fix obs components display

src/views/OBSLayout.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { NSpin } from 'naive-ui'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const timer = ref<any>()
+const visible = ref(true)
+const active = ref(true)
+onMounted(() => {
+  timer.value = setInterval(() => {
+    if (!visible.value || !active.value) return
+    window.$mitt.emit('onOBSComponentUpdate')
+  }, 1000)
+
+  //@ts-expect-error 这里获取不了
+  if (window.obsstudio) {
+    //@ts-expect-error 这里获取不了
+    window.obsstudio.onVisibilityChange = function (visibility: boolean) {
+      visible.value = visibility
+    }
+    //@ts-expect-error 这里获取不了
+    window.obsstudio.onActiveChange = function (a: boolean) {
+      active.value = a
+    }
+  }
+})
+onUnmounted(() => {
+  clearInterval(timer.value)
+})
+</script>
+
+<template>
+  <div style="height: 100vh;">
+    <RouterView v-slot="{ Component }">
+      <KeepAlive>
+        <Suspense>
+          <component :is="Component" :active :visible />
+          <template #fallback>
+            <NSpin show />
+          </template>
+        </Suspense>
+      </KeepAlive>
+    </RouterView>
+  </div>
+</template>

src/views/manage/QuestionBoxManageView.vue

@@ -383,6 +383,7 @@ onMounted(() => {
                         暂时还没写
                       </NTooltip> -->
                 <NButton size="small" @click="useQB.blacklist(item)" type="warning"> 拉黑 </NButton>
+                <NButton size="small" @click="useQB.blacklist(item)" type="primary"> 标记为正常 </NButton>
               </NSpace>
             </template>
             <template #header-extra="{ item }">

src/views/obs/DanmujiOBS.vue

@@ -10,7 +10,6 @@ import * as chatModels from '../../data/chat/models';
 import * as pronunciation from './blivechat/utils/pronunciation'
 // @ts-ignore
 import * as trie from './blivechat/utils/trie'
-import { DanmakuInfo, GiftInfo, GuardInfo, SCInfo } from '@/data/DanmakuClient';
 import { EventModel } from '@/api/api-models';
 import { DownloadConfig, useAccount } from '@/api/account';
 import { useWebRTC } from '@/store/useRTC';
@@ -19,6 +18,7 @@ import { OPEN_LIVE_API_URL, VTSURU_API_URL } from '@/data/constants';
 import { CustomChart } from 'echarts/charts';
 import { useRoute } from 'vue-router';
 import { NAlert } from 'naive-ui';
+import { DanmakuInfo, GiftInfo, GuardInfo, SCInfo } from '@/data/DanmakuClients/OpenLiveClient';
 
 export interface DanmujiConfig {
   minGiftPrice: number,
@@ -46,7 +46,9 @@ export interface DanmujiConfig {
 defineExpose({ setCss })
 const { customCss, isOBS = true } = defineProps<{
   customCss?: string
-  isOBS?: boolean
+  isOBS?: boolean,
+  active: boolean,
+  visible: boolean,
 }>()
 
 const messageRender = ref()

src/views/obs/LiveLotteryOBS.vue

@@ -43,29 +43,13 @@ async function getUsers() {
     type: OpenLiveLotteryType.Waiting,
   } as UpdateLiveLotteryUsersModel
 }
-
-const visiable = ref(true)
-const active = ref(true)
-let timer: any
 onMounted(() => {
-  timer = setInterval(async () => {
-    if (!visiable.value || !active.value) return
-    const r = await getUsers()
-    if (r) {
-      result.value = r
-    }
-  }, 2000)
-  //@ts-expect-error 这里获取不了
-  window.obsstudio.onVisibilityChange = function (visibility: boolean) {
-    visiable.value = visibility
-  }
-  //@ts-expect-error 这里获取不了
-  window.obsstudio.onActiveChange = function (a: boolean) {
-    active.value = a
-  }
+  window.$mitt.on('onOBSComponentUpdate', () => {
+    getUsers()
+  })
 })
 onUnmounted(() => {
-  clearInterval(timer)
+  window.$mitt.off('onOBSComponentUpdate')
 })
 </script>
 

src/views/obs/LiveRequestOBS.vue

@@ -17,7 +17,9 @@ import { List } from 'linqts'
 import { useWebRTC } from '@/store/useRTC'
 
 const props = defineProps<{
-  id?: number
+  id?: number,
+  active?: boolean,
+  visible?: boolean,
 }>()
 
 const message = useMessage()
@@ -117,7 +119,7 @@ async function update() {
   }
 }
 async function onAddedItem() {
-  
+
 }
 
 const direction = ref<'normal' | 'reverse'>('normal')
@@ -127,25 +129,16 @@ const active = ref(true)
 let timer: any
 onMounted(() => {
   update()
-  timer = setInterval(() => update(), 2000)
-
   // 接收点播结果消息
   rtc.on('function.live-request.add', () => update())
 
-  //@ts-expect-error 这里获取不了
-  if (window.obsstudio) {
-    //@ts-expect-error 这里获取不了
-    window.obsstudio.onVisibilityChange = function (visibility: boolean) {
-      visiable.value = visibility
-    }
-    //@ts-expect-error 这里获取不了
-    window.obsstudio.onActiveChange = function (a: boolean) {
-      active.value = a
-    }
-  }
+  window.$mitt.on('onOBSComponentUpdate', () => {
+    update()
+  })
 })
 onUnmounted(() => {
-  clearInterval(timer)
+  window.$mitt.off('onOBSComponentUpdate')
+  rtc.off('function.live-request.add', () => update())
 })
 </script>
 

src/views/obs/LiveRequestProcessedOBS.vue

@@ -15,7 +15,9 @@ import { useRoute } from 'vue-router'
 import { Vue3Marquee } from 'vue3-marquee'
 
 const props = defineProps<{
-  id?: number
+  id?: number,
+  active: boolean,
+  visible: boolean,
 }>()
 
 const message = useMessage()
@@ -94,7 +96,6 @@ const allowGuardTypes = computed(() => {
   return types
 })
 async function update() {
-  if (!visiable.value || !active.value) return
   const r = await get()
   if (r) {
     const isCountChange = originSongs.value.length != r.songs.length
@@ -110,26 +111,14 @@ async function update() {
 
 const direction = ref<'normal' | 'reverse'>('normal')
 
-const visiable = ref(true)
-const active = ref(true)
-let timer: any
 onMounted(() => {
   update()
-  timer = setInterval(update, 2000)
-  //@ts-expect-error 这里获取不了
-  if (window.obsstudio) {
-    //@ts-expect-error 这里获取不了
-    window.obsstudio.onVisibilityChange = function (visibility: boolean) {
-      visiable.value = visibility
-    }
-    //@ts-expect-error 这里获取不了
-    window.obsstudio.onActiveChange = function (a: boolean) {
-      active.value = a
-    }
-  }
+  window.$mitt.on('onOBSComponentUpdate', () => {
+    update()
+  })
 })
 onUnmounted(() => {
-  clearInterval(timer)
+  window.$mitt.off('onOBSComponentUpdate')
 })
 </script>
 

src/views/obs/MusicRequestOBS.vue

@@ -15,7 +15,9 @@ type WaitMusicInfo = {
 }
 
 const props = defineProps<{
-  id?: number
+  id?: number,
+  active: boolean,
+  visible: boolean,
 }>()
 
 const message = useMessage()
@@ -68,19 +70,12 @@ const active = ref(true)
 let timer: any
 onMounted(() => {
   update()
-  timer = setInterval(update, 2000)
-
-  //@ts-expect-error 这里获取不了
-  window.obsstudio.onVisibilityChange = function (visibility: boolean) {
-    visiable.value = visibility
-  }
-  //@ts-expect-error 这里获取不了
-  window.obsstudio.onActiveChange = function (a: boolean) {
-    active.value = a
-  }
+  window.$mitt.on('onOBSComponentUpdate', () => {
+    update()
+  })
 })
 onUnmounted(() => {
-  clearInterval(timer)
+  window.$mitt.off('onOBSComponentUpdate')
 })
 </script>
 

src/views/obs/QuestionDisplayOBS.vue

@@ -7,6 +7,12 @@ import { onMounted, onUnmounted, ref } from 'vue'
 import QuestionDisplayCard from '../manage/QuestionDisplayCard.vue'
 import { useWebRTC } from '@/store/useRTC'
 
+const props = defineProps<{
+  id?: number,
+  active: boolean,
+  visible: boolean,
+}>()
+
 const hash = ref('')
 const token = useRouteQuery('token')
 const rtc = await useWebRTC().Init('slave')
@@ -50,33 +56,16 @@ async function getQuestionAndSetting() {
 function handleScroll(value: { clientHeight: number, scrollHeight: number, scrollTop: number }) {
   cardRef.value?.setScroll(value)
 }
-
-const visiable = ref(true)
-const active = ref(true)
 let timer: any
 onMounted(() => {
-  timer = setInterval(() => {
-    if (!visiable.value || !active.value) return
+  window.$mitt.on('onOBSComponentUpdate', () => {
     checkIfChanged()
-  }, 1000)
-
-  //@ts-expect-error 这里获取不了
-  if (window.obsstudio) {
-    //@ts-expect-error 这里获取不了
-    window.obsstudio.onVisibilityChange = function (visibility: boolean) {
-      visiable.value = visibility
-    }
-    //@ts-expect-error 这里获取不了
-    window.obsstudio.onActiveChange = function (a: boolean) {
-      active.value = a
-    }
-  }
+  })
 
   rtc?.on('function.question.sync-scroll', handleScroll)
 })
 onUnmounted(() => {
-  clearInterval(timer)
-
+  window.$mitt.off('onOBSComponentUpdate')
   rtc?.off('function.question.sync-scroll', handleScroll)
 })
 </script>

src/views/obs/QueueOBS.vue

@@ -2,26 +2,26 @@
 import {
   QueueFrom,
   QueueSortType,
-  ResponseQueueModel,
-  Setting_Queue,
-  Setting_LiveRequest,
-  SongRequestFrom,
-  SongRequestInfo,
   QueueStatus,
+  ResponseQueueModel,
+  Setting_Queue
 } from '@/api/api-models'
 import { QueryGetAPI } from '@/api/query'
-import { AVATAR_URL, QUEUE_API_URL, SONG_REQUEST_API_URL } from '@/data/constants'
+import { QUEUE_API_URL } from '@/data/constants'
+import { MittType } from '@/mitt'
+import { useWebRTC } from '@/store/useRTC'
 import { useElementSize } from '@vueuse/core'
+import { List } from 'linqts'
+import mitt from 'mitt'
+import { NDivider, NEmpty, useMessage } from 'naive-ui'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { Vue3Marquee } from 'vue3-marquee'
-import { NCard, NDivider, NEmpty, NSpace, NText, useMessage } from 'naive-ui'
-import { List } from 'linqts'
-import { isSameDay } from 'date-fns'
-import { useWebRTC } from '@/store/useRTC'
 
 const props = defineProps<{
-  id?: number
+  id?: number,
+  active: boolean,
+  visible: boolean,
 }>()
 
 const message = useMessage()
@@ -91,7 +91,7 @@ async function get() {
     if (data.code == 200) {
       return data.data
     }
-  } catch (err) {}
+  } catch (err) { }
   return {} as { queue: ResponseQueueModel[]; setting: Setting_Queue }
 }
 const isMoreThanContainer = computed(() => {
@@ -111,7 +111,6 @@ const allowGuardTypes = computed(() => {
   return types
 })
 async function update() {
-  if (!visiable.value || !active.value) return
   const r = await get()
   if (r) {
     queue.value = r.queue.sort((a, b) => {
@@ -121,27 +120,14 @@ async function update() {
   }
 }
 
-const visiable = ref(true)
-const active = ref(true)
-let timer: any
 onMounted(() => {
   update()
-  timer = setInterval(update, 2000)
-
-  //@ts-expect-error 这里获取不了
-  if (window.obsstudio) {
-    //@ts-expect-error 这里获取不了
-    window.obsstudio.onVisibilityChange = function (visibility: boolean) {
-      visiable.value = visibility
-    }
-    //@ts-expect-error 这里获取不了
-    window.obsstudio.onActiveChange = function (a: boolean) {
-      active.value = a
-    }
-  }
+  window.$mitt.on('onOBSComponentUpdate', () => {
+    update()
+  })
 })
 onUnmounted(() => {
-  clearInterval(timer)
+  window.$mitt.off('onOBSComponentUpdate')
 })
 </script>
 
@@ -151,12 +137,8 @@ onUnmounted(() => {
     <NDivider class="queue-divider">
       <p class="queue-header-count">已有 {{ activeItems.length ?? 0 }} 人</p>
     </NDivider>
-    <div
-      class="queue-singing-container"
-      :singing="queue.findIndex((s) => s.status == QueueStatus.Progressing) > -1"
-      :from="progressing?.from as number"
-      :status="progressing?.status as number"
-    >
+    <div class="queue-singing-container" :singing="queue.findIndex((s) => s.status == QueueStatus.Progressing) > -1"
+      :from="progressing?.from as number" :status="progressing?.status as number">
       <div class="queue-singing-prefix"></div>
       <template v-if="progressing">
         <img class="queue-singing-avatar" :src="progressing?.user?.face" referrerpolicy="no-referrer" />
@@ -167,31 +149,16 @@ onUnmounted(() => {
     </div>
     <div class="queue-content" ref="listContainerRef">
       <template v-if="activeItems.length > 0">
-        <Vue3Marquee
-          class="queue-list"
-          :key="key"
-          vertical
-          :pause="!isMoreThanContainer"
-          :duration="20"
-          :style="`height: ${height}px;width: ${width}px;`"
-        >
-          <span
-            class="queue-list-item"
-            :from="item.from as number"
-            :status="item.status as number"
-            :payment="item.giftPrice ?? 0"
-            v-for="(item, index) in activeItems"
-            :key="item.id"
-            :style="`height: ${itemHeight}px`"
-          >
+        <Vue3Marquee class="queue-list" :key="key" vertical :pause="!isMoreThanContainer" :duration="20"
+          :style="`height: ${height}px;width: ${width}px;`">
+          <span class="queue-list-item" :from="item.from as number" :status="item.status as number"
+            :payment="item.giftPrice ?? 0" v-for="(item, index) in activeItems" :key="item.id"
+            :style="`height: ${itemHeight}px`">
             <div class="queue-list-item-index" :index="index + 1">
               {{ index + 1 }}
             </div>
-            <div
-              v-if="settings.showFanMadelInfo"
-              class="queue-list-item-level"
-              :has-level="(item.user?.fans_medal_level ?? 0) > 0"
-            >
+            <div v-if="settings.showFanMadelInfo" class="queue-list-item-level"
+              :has-level="(item.user?.fans_medal_level ?? 0) > 0">
               {{ `${item.user?.fans_medal_name} ${item.user?.fans_medal_level}` }}
             </div>
             <div class="queue-list-item-user-name">
@@ -212,13 +179,8 @@ onUnmounted(() => {
       </div>
     </div>
     <div class="queue-footer" ref="footerRef" v-if="settings.showRequireInfo">
-      <Vue3Marquee
-        :key="key"
-        ref="footerListRef"
-        class="queue-footer-marquee"
-        :pause="footerSize.width < footerListSize.width"
-        :duration="20"
-      >
+      <Vue3Marquee :key="key" ref="footerListRef" class="queue-footer-marquee"
+        :pause="footerSize.width < footerListSize.width" :duration="20">
         <span class="queue-tag" type="prefix">
           <div class="queue-tag-key">关键词</div>
           <div class="queue-tag-value">
@@ -278,6 +240,7 @@ onUnmounted(() => {
   border-radius: 10px;
   color: white;
 }
+
 .queue-header {
   margin: 0;
   color: #fff;
@@ -290,17 +253,20 @@ onUnmounted(() => {
     0 0 30px #61606086,
     0 0 40px rgba(64, 156, 179, 0.555);
 }
+
 .queue-header-count {
   color: #ffffff;
   text-align: center;
   font-size: 14px;
 }
+
 .queue-divider {
   margin: 0 auto;
   margin-top: -15px;
   margin-bottom: -15px;
   width: 90%;
 }
+
 .queue-singing-container {
   height: 35px;
   margin: 0 10px 0 10px;
@@ -308,34 +274,41 @@ onUnmounted(() => {
   align-items: center;
   gap: 10px;
 }
+
 .queue-singing-empty {
   font-weight: bold;
   font-style: italic;
   color: #ffffffbe;
 }
+
 .queue-singing-prefix {
   border: 2px solid rgb(231, 231, 231);
   height: 30px;
   width: 10px;
   border-radius: 10px;
 }
+
 .queue-singing-container[singing='true'] .queue-singing-prefix {
   background-color: #75c37f;
   animation: animated-border 3s linear infinite;
 }
+
 .queue-singing-container[singing='false'] .queue-singing-prefix {
   background-color: #c37575;
 }
+
 .queue-singing-avatar {
   height: 30px;
   border-radius: 50%;
   /* 添加无限旋转动画 */
   animation: rotate 20s linear infinite;
 }
+
 /* 网页点歌 */
 .queue-singing-container[from='3'] .queue-singing-avatar {
   display: none;
 }
+
 .queue-singing-name {
   font-size: large;
   font-weight: bold;
@@ -343,17 +316,21 @@ onUnmounted(() => {
   white-space: nowrap;
   max-width: 80%;
 }
+
 @keyframes rotate {
   0% {
     transform: rotate(0);
   }
+
   100% {
     transform: rotate(360deg);
   }
 }
+
 .n-divider__line {
   background-color: #ffffffd5;
 }
+
 .queue-content {
   background-color: #0f0f0f4f;
   margin: 10px;
@@ -362,9 +339,11 @@ onUnmounted(() => {
   border-radius: 10px;
   overflow-x: hidden;
 }
+
 .marquee {
   justify-items: left;
 }
+
 .queue-list-item {
   display: flex;
   width: 100%;
@@ -374,6 +353,7 @@ onUnmounted(() => {
   justify-content: left;
   gap: 10px;
 }
+
 .queue-list-item-user-name {
   font-size: 18px;
   font-weight: bold;
@@ -390,6 +370,7 @@ onUnmounted(() => {
   color: #d2d8d6;
   font-size: 12px;
 }
+
 .queue-list-item[from='0'] .queue-list-item-avatar {
   display: none;
 }
@@ -408,6 +389,7 @@ onUnmounted(() => {
 
   margin-left: auto;
 }
+
 .queue-list-item-index {
   text-align: center;
   height: 18px;
@@ -425,16 +407,19 @@ onUnmounted(() => {
   font-weight: bold;
   text-shadow: 0 0 6px #ebc34c;
 }
+
 .queue-list-item-index[index='2'] {
   background-color: #c0c0c0;
   color: white;
   font-weight: bold;
 }
+
 .queue-list-item-index[index='3'] {
   background-color: #b87333;
   color: white;
   font-weight: bold;
 }
+
 .queue-list-item-level {
   text-align: center;
   height: 18px;
@@ -445,9 +430,11 @@ onUnmounted(() => {
   color: rgba(204, 204, 204, 0.993);
   font-size: 12px;
 }
+
 .queue-list-item-level[has-level='false'] {
   display: none;
 }
+
 .queue-footer {
   margin: 0 5px 5px 5px;
   height: 60px;
@@ -456,6 +443,7 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
 }
+
 .queue-tag {
   display: flex;
   margin: 5px 0 5px 5px;
@@ -468,14 +456,17 @@ onUnmounted(() => {
   flex-direction: column;
   justify-content: left;
 }
+
 .queue-tag-key {
   font-style: italic;
   color: rgb(211, 211, 211);
   font-size: 12px;
 }
+
 .queue-tag-value {
   font-size: 14px;
 }
+
 @keyframes animated-border {
   0% {
     box-shadow: 0 0 0px #589580;

src/views/open_live/LiveRequest.vue

@@ -14,8 +14,8 @@ import {
 } from '@/api/api-models'
 import { QueryGetAPI, QueryPostAPI, QueryPostAPIWithParams } from '@/api/query'
 import SongPlayer from '@/components/SongPlayer.vue'
-import { RoomAuthInfo } from '@/data/DanmakuClient'
 import { CURRENT_HOST, SONG_REQUEST_API_URL } from '@/data/constants'
+import { RoomAuthInfo } from '@/data/DanmakuClients/OpenLiveClient'
 import { useDanmakuClient } from '@/store/useDanmakuClient'
 import {
   Checkmark12Regular,