Merge pull request #86 from eli-yip/fix/hide-sidebar-in-web-fullscreen

fix(top-bar): hide dock & sidebar in web fullscreen on bangumi pages

Author: VentusUta

src/components/TopBar/OldTopBar.vue

@@ -4,11 +4,12 @@ import type { Ref, UnwrapNestedRefs } from 'vue'
 
 import { useBewlyApp } from '~/composables/useAppProvider'
 import { useDelayedHover } from '~/composables/useDelayedHover'
+import { useWebFullscreen } from '~/composables/useWebFullscreen'
 import { OVERLAY_SCROLL_BAR_SCROLL, TOP_BAR_VISIBILITY_CHANGE } from '~/constants/globalEvents'
 import { AppPage } from '~/enums/appEnums'
 import { settings } from '~/logic'
 import api from '~/utils/api'
-import { getUserID, isHomePage, isInIframe, isVideoOrBangumiPage, queryDomUntilFound, removeHttpFromUrl } from '~/utils/main'
+import { getUserID, isHomePage, removeHttpFromUrl } from '~/utils/main'
 import emitter from '~/utils/mitt'
 
 import ChannelsPop from './components/ChannelsPop.vue'
@@ -314,34 +315,9 @@ onUnmounted(() => {
   emitter.off(OVERLAY_SCROLL_BAR_SCROLL)
 })
 
-// #region Hide the top bar when entering web fullscreen (网页全屏)
-// On normal video pages Bilibili's web-fullscreen player layer happens to cover the top bar,
-// but on bangumi pages (`/bangumi/play/`) it doesn't, leaving the top bar floating over the video.
-// So we explicitly detect web fullscreen via the player's web-fullscreen button state and hide the
-// top bar ourselves. (The drawer/iframe case is handled separately in App.vue.)
-let webFullscreenObserver: MutationObserver | null = null
-const webFullscreenAbort = new AbortController()
-
-onMounted(() => {
-  if (isInIframe() || !isVideoOrBangumiPage())
-    return
-
-  queryDomUntilFound('.bpx-player-ctrl-btn.bpx-player-ctrl-web', 500, webFullscreenAbort).then((webFullscreenBtn) => {
-    if (!webFullscreenBtn)
-      return
-
-    webFullscreenObserver = new MutationObserver(() => {
-      toggleTopBarVisible(!webFullscreenBtn.classList.contains('bpx-state-entered'))
-    })
-    webFullscreenObserver.observe(webFullscreenBtn, { attributes: true, attributeFilter: ['class'] })
-  })
-})
-
-onUnmounted(() => {
-  webFullscreenObserver?.disconnect()
-  webFullscreenAbort.abort()
-})
-// #endregion
+// Hide the top bar when entering web fullscreen (网页全屏). See useWebFullscreen for details.
+const { isWebFullscreen } = useWebFullscreen()
+watch(isWebFullscreen, webFullscreen => toggleTopBarVisible(!webFullscreen))
 
 async function initData() {
   await getUserInfo()

src/components/TopBar/TopBar.vue

@@ -5,11 +5,12 @@ import type { Ref, UnwrapNestedRefs } from 'vue'
 import { useBewlyApp } from '~/composables/useAppProvider'
 import { useDark } from '~/composables/useDark'
 import { useDelayedHover } from '~/composables/useDelayedHover'
+import { useWebFullscreen } from '~/composables/useWebFullscreen'
 import { OVERLAY_SCROLL_BAR_SCROLL, TOP_BAR_VISIBILITY_CHANGE } from '~/constants/globalEvents'
 import { AppPage } from '~/enums/appEnums'
 import { settings } from '~/logic'
 import api from '~/utils/api'
-import { getUserID, isHomePage, isInIframe, isVideoOrBangumiPage, queryDomUntilFound, removeHttpFromUrl } from '~/utils/main'
+import { getUserID, isHomePage, isInIframe, removeHttpFromUrl } from '~/utils/main'
 import emitter from '~/utils/mitt'
 import { createTransformer } from '~/utils/transformer'
 
@@ -343,34 +344,9 @@ onUnmounted(() => {
   emitter.off(OVERLAY_SCROLL_BAR_SCROLL)
 })
 
-// #region Hide the top bar when entering web fullscreen (网页全屏)
-// On normal video pages Bilibili's web-fullscreen player layer happens to cover the top bar,
-// but on bangumi pages (`/bangumi/play/`) it doesn't, leaving the top bar floating over the video.
-// So we explicitly detect web fullscreen via the player's web-fullscreen button state and hide the
-// top bar ourselves. (The drawer/iframe case is handled separately in App.vue.)
-let webFullscreenObserver: MutationObserver | null = null
-const webFullscreenAbort = new AbortController()
-
-onMounted(() => {
-  if (isInIframe() || !isVideoOrBangumiPage())
-    return
-
-  queryDomUntilFound('.bpx-player-ctrl-btn.bpx-player-ctrl-web', 500, webFullscreenAbort).then((webFullscreenBtn) => {
-    if (!webFullscreenBtn)
-      return
-
-    webFullscreenObserver = new MutationObserver(() => {
-      toggleTopBarVisible(!webFullscreenBtn.classList.contains('bpx-state-entered'))
-    })
-    webFullscreenObserver.observe(webFullscreenBtn, { attributes: true, attributeFilter: ['class'] })
-  })
-})
-
-onUnmounted(() => {
-  webFullscreenObserver?.disconnect()
-  webFullscreenAbort.abort()
-})
-// #endregion
+// Hide the top bar when entering web fullscreen (网页全屏). See useWebFullscreen for details.
+const { isWebFullscreen } = useWebFullscreen()
+watch(isWebFullscreen, webFullscreen => toggleTopBarVisible(!webFullscreen))
 
 async function initData() {
   await getUserInfo()

src/composables/useWebFullscreen.ts

@@ -0,0 +1,45 @@
+import { isInIframe, isVideoOrBangumiPage, queryDomUntilFound } from '~/utils/main'
+
+/**
+ * Detect Bilibili web fullscreen (网页全屏) on video/bangumi pages.
+ *
+ * On normal video pages Bilibili's web-fullscreen player layer happens to cover our overlay
+ * (top bar, dock, side buttons), but on bangumi pages (`/bangumi/play/`) it doesn't, leaving
+ * them floating over the video. So we explicitly detect web fullscreen by observing the player's
+ * web-fullscreen control button toggling `bpx-state-entered`, and let callers hide their overlay.
+ *
+ * Only active on video/bangumi pages outside of an iframe. (The drawer/iframe case is handled
+ * separately in App.vue, which needs to message the parent frame instead.)
+ *
+ * @returns `isWebFullscreen` — a reactive ref that is `true` while in web fullscreen.
+ */
+export function useWebFullscreen() {
+  const isWebFullscreen = ref<boolean>(false)
+
+  let observer: MutationObserver | null = null
+  const abort = new AbortController()
+
+  onMounted(() => {
+    if (isInIframe() || !isVideoOrBangumiPage())
+      return
+
+    queryDomUntilFound('.bpx-player-ctrl-btn.bpx-player-ctrl-web', 500, abort).then((webFullscreenBtn) => {
+      if (!webFullscreenBtn)
+        return
+
+      const sync = () => {
+        isWebFullscreen.value = webFullscreenBtn.classList.contains('bpx-state-entered')
+      }
+      sync()
+      observer = new MutationObserver(sync)
+      observer.observe(webFullscreenBtn, { attributes: true, attributeFilter: ['class'] })
+    })
+  })
+
+  onUnmounted(() => {
+    observer?.disconnect()
+    abort.abort()
+  })
+
+  return { isWebFullscreen }
+}

src/contentScripts/views/App.vue

@@ -4,6 +4,7 @@ import type { Ref } from 'vue'
 
 import type { BewlyAppProvider } from '~/composables/useAppProvider'
 import { useDark } from '~/composables/useDark'
+import { useWebFullscreen } from '~/composables/useWebFullscreen'
 import { BEWLY_MOUNTED, DRAWER_VIDEO_ENTER_PAGE_FULL, DRAWER_VIDEO_EXIT_PAGE_FULL, IFRAME_PAGE_SWITCH_BEWLY, IFRAME_PAGE_SWITCH_BILI, OVERLAY_SCROLL_BAR_SCROLL } from '~/constants/globalEvents'
 import { AppPage } from '~/enums/appEnums'
 import { settings } from '~/logic'
@@ -386,6 +387,9 @@ watchEffect(async (onCleanUp) => {
   })
 })
 
+// Hide the floating dock / sidebar when entering web fullscreen (网页全屏), same as the top bar.
+const { isWebFullscreen } = useWebFullscreen()
+
 provide<BewlyAppProvider>('BEWLY_APP', {
   activatedPage,
   mainAppRef,
@@ -619,7 +623,7 @@ document.head.appendChild(removeLeftQuoteIndent)
 
     <!-- Dock & RightSideButtons -->
     <div
-      v-if="!isInIframe()"
+      v-if="!isInIframe() && !isWebFullscreen"
       pos="absolute top-0 left-0" w-full h-full overflow-hidden
       pointer-events-none
     >