From 6be1309628df1ff6193768d4764d09dcc701bb34 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Mon, 9 Dec 2024 12:05:18 +0800
Subject: [PATCH] refactor: use `isInIframe()`

---
 src/components/IframeDrawer.vue  |  7 ++-----
 src/contentScripts/index.ts      |  5 ++---
 src/contentScripts/views/App.vue | 20 ++++++++------------
 src/utils/main.ts                |  8 ++++++++
 4 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/components/IframeDrawer.vue b/src/components/IframeDrawer.vue
index 1c09624f..88322d04 100644
--- a/src/components/IframeDrawer.vue
+++ b/src/components/IframeDrawer.vue
@@ -3,7 +3,7 @@ import { onKeyStroke, useEventListener } from '@vueuse/core'
 
 import { DRAWER_VIDEO_ENTER_PAGE_FULL, DRAWER_VIDEO_EXIT_PAGE_FULL } from '~/constants/globalEvents'
 import { settings } from '~/logic'
-import { isHomePage } from '~/utils/main'
+import { isHomePage, isInIframe } from '~/utils/main'
 
 // TODO: support shortcuts like `Ctrl+Alt+T` to open in new tab, `Esc` to close
 
@@ -21,9 +21,6 @@ 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(() => {
@@ -135,7 +132,7 @@ nextTick(() => {
 })
 
 watchEffect(() => {
-  if (inIframe.value)
+  if (isInIframe())
     return null
 
   useEventListener(window, 'message', ({ data }) => {
diff --git a/src/contentScripts/index.ts b/src/contentScripts/index.ts
index 2391e597..98a92f4f 100644
--- a/src/contentScripts/index.ts
+++ b/src/contentScripts/index.ts
@@ -9,7 +9,7 @@ import { settings } from '~/logic'
 import { setupApp } from '~/logic/common-setup'
 import RESET_BEWLY_CSS from '~/styles/reset.css?raw'
 import { runWhenIdle } from '~/utils/lazyLoad'
-import { compareVersions, injectCSS, isHomePage } from '~/utils/main'
+import { compareVersions, injectCSS, isHomePage, isInIframe } from '~/utils/main'
 import { SVG_ICONS } from '~/utils/svgIcons'
 
 import { version } from '../../package.json'
@@ -129,8 +129,7 @@ async function onDOMLoaded() {
   let originalTopBar: HTMLElement | null = null
 
   // DO NOT change the home page when in iframe because it will cause nested calls to the homepage
-  const inIframe = window.self !== window.top
-  const changeHomePage = !settings.value.useOriginalBilibiliHomepage && isHomePage() && !inIframe
+  const changeHomePage = !isInIframe() && !settings.value.useOriginalBilibiliHomepage && isHomePage()
 
   // Remove the original Bilibili homepage if in Bilibili homepage & useOriginalBilibiliHomepage is enabled
   if (changeHomePage) {
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 447bfa3d..84f94cce 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -8,7 +8,7 @@ import { BEWLY_MOUNTED, DRAWER_VIDEO_ENTER_PAGE_FULL, DRAWER_VIDEO_EXIT_PAGE_FUL
 import { AppPage } from '~/enums/appEnums'
 import { settings } from '~/logic'
 import { type DockItem, useMainStore } from '~/stores/mainStore'
-import { isHomePage, openLinkToNewTab, queryDomUntilFound, scrollToTop } from '~/utils/main'
+import { isHomePage, isInIframe, openLinkToNewTab, queryDomUntilFound, scrollToTop } from '~/utils/main'
 import emitter from '~/utils/mitt'
 
 import { setupNecessarySettingsWatchers } from './necessarySettingsWatchers'
@@ -51,19 +51,15 @@ const showIframeDrawer = ref<boolean>(false)
 const iframePageURL = ref<string>('')
 const iframePageRef = ref()
 
-const inIframe = computed((): boolean => {
-  return window.self !== window.top
-})
-
 const showBewlyPage = computed((): boolean => {
-  if (inIframe.value) {
+  if (isInIframe()) {
     return false
   }
   else if (iframePageURL.value) {
     return false
   }
   else {
-    return isHomePage() && !inIframe.value && !settings.value.useOriginalBilibiliHomepage
+    return isHomePage() && !isInIframe() && !settings.value.useOriginalBilibiliHomepage
   }
 })
 
@@ -203,7 +199,7 @@ function openIframeDrawer(url: string) {
 
 // In drawer video, watch btn className changed and post message to parent
 watchEffect(async (onCleanUp) => {
-  if (!inIframe.value)
+  if (!isInIframe())
     return null
 
   const observer = new MutationObserver(([{ target: el }]) => {
@@ -275,7 +271,7 @@ provide<BewlyAppProvider>('BEWLY_APP', {
 
     <!-- Dock & RightSideButtons -->
     <div
-      v-if="!inIframe"
+      v-if="!isInIframe()"
       pos="absolute top-0 left-0" w-full h-full overflow-hidden
       pointer-events-none
     >
@@ -296,7 +292,7 @@ provide<BewlyAppProvider>('BEWLY_APP', {
     </div>
 
     <!-- TopBar -->
-    <div v-if="!inIframe" m-auto max-w="$bew-page-max-width">
+    <div v-if="!isInIframe()" m-auto max-w="$bew-page-max-width">
       <OldTopBar
         v-if="settings.useOldTopBar"
         pos="top-0 left-0" z="99 hover:1001" w-full
@@ -335,8 +331,8 @@ provide<BewlyAppProvider>('BEWLY_APP', {
         </OverlayScrollbarsComponent>
       </template>
       <Transition name="page-fade">
-        <!-- You must always use `!inIframe` to prevent nested calls to the BiliBili homepage when useOriginalBiliPage is set to true on the BewlyBewly homepage -->
-        <IframePage v-if="!inIframe && iframePageURL && activatedPage " ref="iframePageRef" :url="iframePageURL" />
+        <!-- You must always use `!isInIframe()` to prevent nested calls to the BiliBili homepage when useOriginalBiliPage is set to true on the BewlyBewly homepage -->
+        <IframePage v-if="!isInIframe() && iframePageURL && activatedPage " ref="iframePageRef" :url="iframePageURL" />
       </Transition>
     </div>
 
diff --git a/src/utils/main.ts b/src/utils/main.ts
index dcc2f11b..99ebe2fb 100644
--- a/src/utils/main.ts
+++ b/src/utils/main.ts
@@ -275,3 +275,11 @@ export function queryDomUntilFound(selector: string, timeout = 500, abort?: Abor
     }
   })
 }
+
+/**
+ * Check if the current page is in an iframe
+ * @returns true if the current page is in an iframe
+ */
+export function isInIframe(): boolean {
+  return window.self !== window.top
+}