fix(iframe-drawer): prevent top content from covering issues (#1249)

Co-authored-by: Hakadao <a578457889743@gmail.com>

src/components/IframeDrawer.vue

@@ -21,11 +21,23 @@ const headerShow = ref(false)
 const iframeRef = ref<HTMLIFrameElement | null>(null)
 const currentUrl = ref<string>(props.url)
 const delayCloseTimer = ref<NodeJS.Timeout | null>(null)
+const removeTopBarClassInjected = ref<boolean>(false)
 
 useEventListener(window, 'popstate', updateIframeUrl)
 nextTick(() => {
   useEventListener(iframeRef.value?.contentWindow, 'historyChange', updateCurrentUrl)
   useEventListener(iframeRef.value?.contentWindow, 'popstate', updateCurrentUrl)
+
+  useEventListener(iframeRef.value?.contentWindow, 'DOMContentLoaded', () => {
+    if (headerShow.value) {
+      iframeRef.value?.contentWindow?.document.documentElement.classList.add('remove-bili-top-bar-without-placeholder')
+      removeTopBarClassInjected.value = true
+    }
+    else {
+      iframeRef.value?.contentWindow?.document.documentElement.classList.remove('remove-bili-top-bar-without-placeholder')
+      removeTopBarClassInjected.value = false
+    }
+  })
 })
 
 onMounted(() => {
@@ -238,11 +250,12 @@ watchEffect(() => {
           ref="iframeRef"
           :src="props.url"
           :style="{
-            bottom: headerShow ? `var(--bew-top-bar-height)` : '0',
+            // Prevent top bar shaking when before the remove-bili-top-bar-without-placeholder class is injected
+            top: !removeTopBarClassInjected ? `calc(-1 * var(--bew-top-bar-height))` : '0',
           }"
           frameborder="0"
           pointer-events-auto
-          pos="absolute  left-0"
+          pos="relative left-0"
           w-full h-full
         />
       </div>

src/components/IframePage.vue

@@ -59,7 +59,7 @@ defineExpose({
 
 <template>
   <div
-    pos="absolute top-0 left-0" of-hidden w-100vw h-100vh
+    pos="relative top-0 left-0" of-hidden w-full h-full
   >
     <!-- Iframe -->
     <iframe
@@ -70,7 +70,7 @@ defineExpose({
       }"
       frameborder="0"
       pointer-events-auto
-      pos="absolute  left-0"
+      pos="absolute left-0"
       w-inherit h-inherit
     />
   </div>

src/contentScripts/views/App.vue

@@ -9,7 +9,7 @@ import { AppPage } from '~/enums/appEnums'
 import { settings } from '~/logic'
 import { type DockItem, useMainStore } from '~/stores/mainStore'
 import { useSettingsStore } from '~/stores/settingsStore'
-import { isHomePage, isInIframe, openLinkToNewTab, queryDomUntilFound, scrollToTop } from '~/utils/main'
+import { isHomePage, isInIframe, isVideoOrBangumiPage, openLinkToNewTab, queryDomUntilFound, scrollToTop } from '~/utils/main'
 import emitter from '~/utils/mitt'
 
 import { setupNecessarySettingsWatchers } from './necessarySettingsWatchers'
@@ -93,6 +93,24 @@ const showBewlyPage = computed((): boolean => {
 
   return isHomePage() && !settings.value.useOriginalBilibiliHomepage
 })
+const showTopBar = computed((): boolean => {
+  // When using the open in drawer feature, the iframe inside the page will hide the top bar
+  if (isVideoOrBangumiPage() && isInIframe())
+    return false
+
+  // When the user switches to the original Bilibili page, BewlyBewly will only show the top bar inside the iframe.
+  // This helps prevent the outside top bar from covering the contents.
+  // reference: https://github.com/BewlyBewly/BewlyBewly/issues/1235
+
+  // when using original bilibili homepage, show top bar
+  return settings.value.useOriginalBilibiliHomepage
+  // when on home page and not using original bilibili page, show top bar
+    || (isHomePage() && !settingsStore.getDockItemIsUseOriginalBiliPage(activatedPage.value) && !isInIframe())
+  // when in iframe and using original bilibili page, show top bar
+    || (settingsStore.getDockItemIsUseOriginalBiliPage(activatedPage.value) && isInIframe())
+  // when not on home page, show top bar
+    || !isHomePage()
+})
 
 const isFirstTimeActivatedPageChange = ref<boolean>(true)
 watch(
@@ -319,19 +337,7 @@ provide<BewlyAppProvider>('BEWLY_APP', {
 
     <!-- TopBar -->
     <div
-      v-if="
-        // When the user switches to the original Bilibili page, BewlyBewly will only show the top bar inside the iframe.
-        // This helps prevent the outside top bar from covering the contents.
-        // reference: https://github.com/BewlyBewly/BewlyBewly/issues/1235
-
-        // when using original bilibili homepage, show top bar
-        settings.useOriginalBilibiliHomepage
-          // when on home page and not using original bilibili page, show top bar
-          || (isHomePage() && !settingsStore.getDockItemIsUseOriginalBiliPage(activatedPage) && !isInIframe())
-          // when in iframe and using original bilibili page, show top bar
-          || (settingsStore.getDockItemIsUseOriginalBiliPage(activatedPage) && isInIframe())
-          // when not on home page, show top bar
-          || !isHomePage()"
+      v-if="showTopBar"
       m-auto max-w="$bew-page-max-width"
     >
       <BewlyOrBiliTopBarSwitcher v-if="settings.showBewlyOrBiliTopBarSwitcher" />

src/styles/removeBiliTopBar.scss

@@ -22,3 +22,9 @@
     margin-top: calc(-1 * var(--bew-top-bar-height)) !important;
   }
 }
+
+.remove-bili-top-bar-without-placeholder {
+  #biliMainHeader {
+    display: none;
+  }
+}

src/utils/main.ts

@@ -161,6 +161,25 @@ export function isHomePage(url: string = location.href): boolean {
   return false
 }
 
+/**
+ * Check if the current page is a video or bangumi page
+ * @param url the url to check
+ * @returns true if the current page is a video or bangumi page
+ */
+export function isVideoOrBangumiPage(url: string = location.href): boolean {
+  if ( // video page
+    /https?:\/\/(?:www\.)?bilibili\.com\/(?:video|list)\/.*/.test(url)
+    // anime playback & movie page
+    || /https?:\/\/(?:www\.)?bilibili\.com\/bangumi\/play\/.*/.test(url)
+    // watch later playlist
+    || /https?:\/\/(?:www\.)?bilibili\.com\/list\/watchlater.*/.test(url)
+    // favorite playlist
+    || /https?:\/\/(?:www\.)?bilibili\.com\/list\/ml.*/.test(url)) {
+    return true
+  }
+  return false
+}
+
 /**
  * Compresses and resizes an image file.
  *