diff --git a/src/components/danmu/DanmuPanel.vue b/src/components/danmu/DanmuPanel.vue index 77a6fd9..def169f 100644 --- a/src/components/danmu/DanmuPanel.vue +++ b/src/components/danmu/DanmuPanel.vue @@ -2,12 +2,9 @@ import { useMatchEngagementStore } from '@/stores/matchEngagement'; import { storeToRefs } from 'pinia'; import ScrollTop from 'primevue/scrolltop'; -import Skeleton from 'primevue/skeleton'; -import VirtualScroller from 'primevue/virtualscroller'; import { computed } from 'vue'; import { useDanmuStore } from '../../stores/danmu'; import { useDanmuFilterStore } from '../../stores/danmuFilter'; -import type { DanmuMessage } from '../../types/api'; import DanmuItem from './DanmuItem.vue'; const danmuStore = useDanmuStore(); @@ -16,7 +13,7 @@ const matchEngagementStore = useMatchEngagementStore(); const { messages } = storeToRefs(danmuStore); const { viewerCount } = storeToRefs(matchEngagementStore); -const virtualItems = computed>(() => { +const filteredMessages = computed(() => { return messages.value.filter((message) => danmuFilterStore.matchMessage(message)); }); @@ -32,29 +29,17 @@ const viewerCountLabel = computed(() => { {{ viewerCountLabel }} - - - +
+
+ +
+
暂无弹幕
- + @@ -118,7 +103,4 @@ const viewerCountLabel = computed(() => { bottom: 0.75rem; } -.list-body :deep(.p-virtualscroller-content) { - overflow-x: hidden; -} diff --git a/src/components/layout/LiveStage.vue b/src/components/layout/LiveStage.vue index f5935d0..a5820ad 100644 --- a/src/components/layout/LiveStage.vue +++ b/src/components/layout/LiveStage.vue @@ -5,7 +5,7 @@ import { storeToRefs } from 'pinia'; import { Fieldset } from 'primevue'; import Splitter from 'primevue/splitter'; import SplitterPanel from 'primevue/splitterpanel'; -import { computed, defineAsyncComponent } from 'vue'; +import { computed, defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'; import LivePlayer from '../live/LivePlayer.vue'; import type { DanmuMessage } from '../../types/api'; @@ -39,6 +39,45 @@ const MatchReactionStrip = defineAsyncComponent(() => import('../panels/MatchRea const hasCurrentMatch = computed(() => Boolean(runningMatchForSelectedZone.value)); const showMatchDependentPlaceholder = computed(() => streamLoading.value || !liveGameInfo.value); +const liveColumnRef = ref(null); +const desktopSplitterStyle = ref>({}); + +let liveColumnResizeObserver: ResizeObserver | null = null; + +function updateDesktopSplitterHeight() { + if (isMobile.value || !danmuEnabledAtLoad || !liveColumnRef.value) { + desktopSplitterStyle.value = {}; + return; + } + + const height = liveColumnRef.value.getBoundingClientRect().height; + if (height > 0) { + desktopSplitterStyle.value = { + '--live-stage-height': `${Math.ceil(height)}px`, + }; + } +} + +onMounted(() => { + liveColumnResizeObserver = new ResizeObserver(() => updateDesktopSplitterHeight()); + if (liveColumnRef.value) { + liveColumnResizeObserver.observe(liveColumnRef.value); + } + + void nextTick(updateDesktopSplitterHeight); +}); + +onBeforeUnmount(() => { + liveColumnResizeObserver?.disconnect(); + liveColumnResizeObserver = null; +}); + +watch( + [isMobile, pkEnabled, reactionEnabled, hasCurrentMatch, showMatchDependentPlaceholder], + () => { + void nextTick(updateDesktopSplitterHeight); + }, +); function onRetry() { void dataStore.retryLiveStream(); @@ -63,9 +102,14 @@ function onDanmuReset() {