feat: make badge gray when not same room

package.json

@@ -41,7 +41,7 @@
     "@temir/core": "^0.0.20",
     "@temir/link": "^0.0.20",
     "@temir/tab": "^0.0.20",
-    "blive-message-listener": "^0.1.6",
+    "blive-message-listener": "^0.1.8",
     "dayjs": "^1.11.5",
     "ohmyfetch": "^0.4.19",
     "vue": "^3.2.39",

src/components/DanmuMsgCom.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { TBox, TText } from '@temir/core'
 import type { DanmuMsg } from 'blive-message-listener'
 import { addSpace, getUserNameColor } from '../utils/format'
@@ -7,6 +8,13 @@ const { msg } = defineProps<{
   msg: DanmuMsg
 }>()
 
+const badgeColor = computed(() => {
+  if (msg.user.badge?.anchor.is_same_room) {
+    return msg.user.badge.color
+  }
+  return '#666666'
+})
+
 </script>
 
 <template>
@@ -15,8 +23,8 @@ const { msg } = defineProps<{
       <TBox :flex-shrink="0">
         <TBox>
           <TBox v-if="msg.user.badge && msg.user.badge.active" :margin-right="1">
-            <TText :background-color="msg.user.badge.color" :flex-shrink="0">{{ addSpace(msg.user.badge.name) }}</TText>
-            <TText :color="msg.user.badge.color" background-color="#ffffff">{{ addSpace(msg.user.badge.level.toString()) }}</TText>
+            <TText :background-color="badgeColor" :flex-shrink="0">{{ addSpace(msg.user.badge.name) }}</TText>
+            <TText :color="badgeColor" background-color="#ffffff">{{ addSpace(msg.user.badge.level.toString()) }}</TText>
           </TBox>
         </TBox>
         <TText background-color="blue">{{ msg.user.identity?.rank ? ` 榜${msg.user.identity.rank} ` : '' }}</TText>

src/test.ts

@@ -3,9 +3,20 @@ import { startListen, type MsgHandler } from 'blive-message-listener'
 const handler: MsgHandler = {
   onIncomeDanmu: (msg) => {
     console.dir(msg, { depth: null });
+    console.log(msg.body.user.uname + ' : ' + msg.body.content);
+    console.log()
   },
   onIncomeSuperChat: (msg) => {
     console.dir(msg, { depth: null });
+  },
+  onAttentionChange: (msg) => {
+    console.log('attention', msg.body.attention)
+  },
+  onWatchedChange: (msg) => {
+    console.log('watched', msg.body.text_small)
+  },
+  onGift: (msg) => {
+    console.dir(msg, { depth: null });
   }
 }