From 8d887a660dca5df54e21e3c596f371860732b513 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 23 Feb 2025 04:02:57 +0800
Subject: [PATCH] feat(iframe-page): improve loading experience and support for
 new watch later URL

- Add loading state and transition for iframe content
- Implement delayed loading animation to prevent unnecessary flashes
- Update supported URL patterns for watch later pages
- Enhance iframe page rendering with smooth transitions
- Add support for new Bilibili watch later list URL format
---
 src/components/IframePage.vue    | 52 ++++++++++++++++++++++++--------
 src/contentScripts/index.ts      |  2 ++
 src/contentScripts/views/App.vue | 47 ++++++++++++++++-------------
 src/stores/mainStore.ts          |  4 +--
 src/utils/main.ts                | 11 +++++--
 5 files changed, 79 insertions(+), 37 deletions(-)

diff --git a/src/components/IframePage.vue b/src/components/IframePage.vue
index 70360d21..9f4e5b97 100644
--- a/src/components/IframePage.vue
+++ b/src/components/IframePage.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useDark } from '~/composables/useDark'
+import { delay } from '~/utils/main'
 
 const props = defineProps<{
   url: string
@@ -8,12 +9,32 @@ const { isDark } = useDark()
 const headerShow = ref(false)
 const iframeRef = ref<HTMLIFrameElement | null>(null)
 const currentUrl = ref<string>(props.url)
+const showIframe = ref<boolean>(false)
+const showLoading = ref<boolean>(false)
 
 watch(() => isDark.value, (newValue) => {
   iframeRef.value?.contentDocument?.documentElement.classList.toggle('dark', newValue)
   iframeRef.value?.contentDocument?.body?.classList.toggle('dark', newValue)
 })
 
+watch(() => props.url, () => {
+  showIframe.value = false
+})
+
+// Only show loading animation after 2 seconds to prevent annoying flash when content loads quickly
+const showLoadingTimeout = ref()
+watch(() => showIframe.value, async (newValue) => {
+  clearTimeout(showLoadingTimeout.value)
+  if (!newValue) {
+    showLoadingTimeout.value = setTimeout(() => {
+      showLoading.value = true
+    }, 2000)
+  }
+  else {
+    showLoading.value = false
+  }
+}, { immediate: true })
+
 onMounted(() => {
   nextTick(() => {
     iframeRef.value?.focus()
@@ -67,18 +88,25 @@ defineExpose({
   <div
     pos="relative top-0 left-0" of-hidden w-full h-full
   >
-    <!-- Iframe -->
-    <iframe
-      ref="iframeRef"
-      :src="props.url"
-      :style="{
-        bottom: headerShow ? `var(--bew-top-bar-height)` : '0',
-      }"
-      frameborder="0"
-      pointer-events-auto
-      pos="absolute left-0"
-      w-inherit h-inherit
-    />
+    <Transition name="fade">
+      <Loading v-if="showLoading" w-full h-full pos="absolute top-0 left-0" />
+    </Transition>
+    <Transition name="fade">
+      <!-- Iframe -->
+      <iframe
+        v-show="showIframe"
+        ref="iframeRef"
+        :src="props.url"
+        :style="{
+          bottom: headerShow ? `var(--bew-top-bar-height)` : '0',
+        }"
+        frameborder="0"
+        pointer-events-auto
+        pos="absolute left-0"
+        w-inherit h-inherit
+        @load="showIframe = true"
+      />
+    </Transition>
   </div>
 </template>
 
diff --git a/src/contentScripts/index.ts b/src/contentScripts/index.ts
index 4f2af4a6..9256ba70 100644
--- a/src/contentScripts/index.ts
+++ b/src/contentScripts/index.ts
@@ -54,6 +54,7 @@ function isSupportedPages(): boolean {
     || /https?:\/\/(?:www\.)?bilibili\.com\/account\/history.*/.test(currentUrl)
     // watcher later page
     || /https?:\/\/(?:www\.)?bilibili\.com\/watchlater\/#\/list.*/.test(currentUrl)
+    || /https?:\/\/(?:www\.)?bilibili\.com\/watchlater\/list.*/.test(currentUrl)
     // user space page
     || /https?:\/\/space\.bilibili\.com\.*/.test(currentUrl)
     // notifications page
@@ -97,6 +98,7 @@ export function isSupportedIframePages(): boolean {
       || /https?:\/\/space\.bilibili\.com\/\d+\/favlist.*/.test(currentUrl)
       || /https?:\/\/www\.bilibili\.com\/history.*/.test(currentUrl)
       || /https?:\/\/www\.bilibili\.com\/watchlater\/#\/list.*/.test(currentUrl)
+      || /https?:\/\/www\.bilibili\.com\/watchlater\/list.*/.test(currentUrl)
       // moments page
       // https://github.com/BewlyBewly/BewlyBewly/issues/1246
       // https://github.com/BewlyBewly/BewlyBewly/issues/1256
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 9b7be2e8..b8fd6dbd 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -387,28 +387,33 @@ provide<BewlyAppProvider>('BEWLY_APP', {
         height: showBewlyPage || iframePageURL ? '100dvh' : '0',
       }"
     >
-      <template v-if="showBewlyPage">
-        <OverlayScrollbarsComponent ref="scrollbarRef" element="div" h-inherit defer @os-scroll="handleOsScroll">
-          <main m-auto max-w="$bew-page-max-width">
-            <div
-              p="t-[calc(var(--bew-top-bar-height)+10px)]" m-auto
-              w="lg:[calc(100%-200px)] [calc(100%-150px)]"
-            >
-              <!-- control button group -->
-              <BackToTopOrRefreshButton
-                v-if="activatedPage !== AppPage.Search && !settings.moveBackToTopOrRefreshButtonToDock"
-                @refresh="handleThrottledPageRefresh"
-                @back-to-top="handleThrottledBackToTop"
-              />
+      <Transition name="fade">
+        <template v-if="showBewlyPage">
+          <OverlayScrollbarsComponent ref="scrollbarRef" element="div" h-inherit defer @os-scroll="handleOsScroll">
+            <main m-auto max-w="$bew-page-max-width">
+              <div
+                p="t-[calc(var(--bew-top-bar-height)+10px)]" m-auto
+                w="lg:[calc(100%-200px)] [calc(100%-150px)]"
+              >
+                <!-- control button group -->
+                <BackToTopOrRefreshButton
+                  v-if="activatedPage !== AppPage.Search && !settings.moveBackToTopOrRefreshButtonToDock"
+                  @refresh="handleThrottledPageRefresh"
+                  @back-to-top="handleThrottledBackToTop"
+                />
 
-              <Transition name="page-fade">
-                <Component :is="pages[activatedPage]" />
-              </Transition>
-            </div>
-          </main>
-        </OverlayScrollbarsComponent>
-      </template>
-      <IframePage v-else-if="iframePageURL && !isInIframe()" ref="iframePageRef" :url="iframePageURL" />
+                <Transition name="page-fade">
+                  <Component :is="pages[activatedPage]" />
+                </Transition>
+              </div>
+            </main>
+          </OverlayScrollbarsComponent>
+        </template>
+      </Transition>
+
+      <Transition v-if="!showBewlyPage && iframePageURL && !isInIframe()" name="fade">
+        <IframePage ref="iframePageRef" :url="iframePageURL" />
+      </Transition>
     </div>
 
     <IframeDrawer
diff --git a/src/stores/mainStore.ts b/src/stores/mainStore.ts
index df74a44e..17863c45 100644
--- a/src/stores/mainStore.ts
+++ b/src/stores/mainStore.ts
@@ -11,7 +11,7 @@ export interface DockItem {
   page: AppPage
   openInNewTab: boolean
   useOriginalBiliPage: boolean
-  url: string
+  url: string | string[]
   hasBewlyPage: boolean // Whether BewlyBewly has a page for this item
 }
 
@@ -80,7 +80,7 @@ export const useMainStore = defineStore('main', () => {
         page: AppPage.WatchLater,
         openInNewTab: false,
         useOriginalBiliPage: false,
-        url: `https://www.bilibili.com/watchlater/#/list`,
+        url: `https://www.bilibili.com/watchlater/list`,
         hasBewlyPage: true,
       },
       {
diff --git a/src/utils/main.ts b/src/utils/main.ts
index 76edb9db..210f8fb3 100644
--- a/src/utils/main.ts
+++ b/src/utils/main.ts
@@ -173,7 +173,7 @@ export function isVideoOrBangumiPage(url: string = location.href): boolean {
     // anime playback & movie page
     || /https?:\/\/(?:www\.)?bilibili\.com\/bangumi\/play\/.*/.test(url)
     // watch later playlist
-    || /https?:\/\/(?:www\.)?bilibili\.com\/list\/watchlater.*/.test(url)
+    || /https?:\/\/(?:www\.)?bilibili\.com\/list\/watchlater\?bvid.*/.test(url)
     || /https?:\/\/(?:www\.)?bilibili\.com\/watchlater\/list.*/.test(url)
     // favorite playlist
     || /https?:\/\/(?:www\.)?bilibili\.com\/list\/ml.*/.test(url)) {
@@ -316,5 +316,12 @@ export function queryDomUntilFound(selector: string, timeout = 500, abort?: Abor
  * @returns true if the current page is in an iframe
  */
 export function isInIframe(): boolean {
-  return window.self !== window.top
+  try {
+    return window.self !== window.top
+  }
+  catch (e) {
+    // If we can't access window.top due to security restrictions,
+    // we're definitely in an iframe
+    return true
+  }
 }