fix(iframe-drawer): resolve content being obscured at the top of video #1023 (#1067)

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

src/components/IframeDrawer.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onKeyStroke, useEventListener } from '@vueuse/core'
 
+import { DRAWER_VIDEO_ENTER_PAGE_FULL, DRAWER_VIDEO_EXIT_PAGE_FULL } from '~/constants/globalEvents'
 import { isHomePage } from '~/utils/main'
 
 // TODO: support shortcuts like `Ctrl+Alt+T` to open in new tab, `Esc` to close
@@ -15,9 +16,13 @@ const emit = defineEmits<{
 }>()
 
 const show = ref(false)
+const headerShow = ref(false)
 const iframeRef = ref<HTMLIFrameElement | null>(null)
 const currentUrl = ref<string>(props.url)
 const delayCloseTimer = ref<NodeJS.Timeout | null>(null)
+const inIframe = computed((): boolean => {
+  return window.self !== window.top
+})
 
 useEventListener(window, 'popstate', updateIframeUrl)
 nextTick(() => {
@@ -27,6 +32,7 @@ nextTick(() => {
 onMounted(async () => {
   history.pushState(null, '', props.url)
   show.value = true
+  headerShow.value = true
   await nextTick()
   iframeRef.value?.focus()
 })
@@ -69,6 +75,7 @@ async function handleClose() {
   }
   await releaseIframeResources()
   show.value = false
+  headerShow.value = false
   delayCloseTimer.value = setTimeout(() => {
     emit('close')
   }, 300)
@@ -95,10 +102,13 @@ function handleOpenInNewTab() {
 
 const isEscPressed = ref<boolean>(false)
 const escPressedTimer = ref<NodeJS.Timeout | null>(null)
+const disableEscPress = ref<boolean>(false)
 
 nextTick(() => {
   onKeyStroke('Escape', (e: KeyboardEvent) => {
     e.preventDefault()
+    if (disableEscPress.value)
+      return
     if (isEscPressed.value) {
       handleClose()
     }
@@ -114,6 +124,24 @@ nextTick(() => {
   }, { target: iframeRef.value?.contentWindow })
 })
 
+watchEffect(() => {
+  if (inIframe.value)
+    return null
+
+  useEventListener(window, 'message', ({ data }) => {
+    switch (data) {
+      case DRAWER_VIDEO_ENTER_PAGE_FULL:
+        headerShow.value = false
+        disableEscPress.value = true
+        break
+      case DRAWER_VIDEO_EXIT_PAGE_FULL:
+        headerShow.value = true
+        disableEscPress.value = false
+        break
+    }
+  })
+})
+
 // const keys = useMagicKeys()
 // const ctrlAltT = keys['Ctrl+Alt+T']
 
@@ -140,7 +168,7 @@ nextTick(() => {
 
     <Transition name="fade">
       <div
-        v-if="show"
+        v-if="headerShow"
         pos="relative top-0" flex="~ items-center justify-end gap-2"
         max-w="$bew-page-max-width" w-full h="$bew-top-bar-height"
         m-auto px-4
@@ -195,15 +223,18 @@ nextTick(() => {
     <Transition name="drawer">
       <div
         v-if="show"
-        pos="absolute top-$bew-top-bar-height left-0" of-hidden bg="$bew-bg"
+        :pos="`absolute ${headerShow ? 'top-$bew-top-bar-height' : 'top-0'} left-0`" of-hidden bg="$bew-bg"
         rounded="t-$bew-radius" w-full h-full
       >
         <iframe
           ref="iframeRef"
           :src="currentUrl"
+          :style="{
+            bottom: headerShow ? `var(--bew-top-bar-height)` : '0',
+          }"
           frameborder="0"
           pointer-events-auto
-          pos="absolute bottom-$bew-top-bar-height left-0"
+          pos="absolute  left-0"
           w-full h-full
         />
       </div>