fix obs components display

2025-12-07 02:46:55 +08:00 · 2025-03-18 19:58:54 +08:00
parent 300a38e851
commit eb43d88e44
22 changed files with 308 additions and 232 deletions
--- a/src/views/obs/DanmujiOBS.vue
+++ b/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()
--- a/src/views/obs/LiveLotteryOBS.vue
+++ b/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>

--- a/src/views/obs/LiveRequestOBS.vue
+++ b/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>

--- a/src/views/obs/LiveRequestProcessedOBS.vue
+++ b/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>

--- a/src/views/obs/MusicRequestOBS.vue
+++ b/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>

--- a/src/views/obs/QuestionDisplayOBS.vue
+++ b/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>
--- a/src/views/obs/QueueOBS.vue
+++ b/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;