-import { useThrottleFn, useToggle } from '@vueuse/core'
+import { useEventListener, useThrottleFn, useToggle } from '@vueuse/core'
import type { Ref } from 'vue'
import type { BewlyAppProvider } from '~/composables/useAppProvider'
import { useDark } from '~/composables/useDark'
-import { BEWLY_MOUNTED, DRAWER_VIDEO_ENTER_PAGE_FULL, DRAWER_VIDEO_EXIT_PAGE_FULL, OVERLAY_SCROLL_BAR_SCROLL } from '~/constants/globalEvents'
+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'
import { type DockItem, useMainStore } from '~/stores/mainStore'
+import { useSettingsStore } from '~/stores/settingsStore'
import { isHomePage, isInIframe, openLinkToNewTab, queryDomUntilFound, scrollToTop } from '~/utils/main'
import emitter from '~/utils/mitt'
import { setupNecessarySettingsWatchers } from './necessarySettingsWatchers'
const mainStore = useMainStore()
+const settingsStore = useSettingsStore()
const { isDark } = useDark()
const [showSettings, toggleSettings] = useToggle(false)
@@ -50,7 +52,24 @@ const iframeDrawerURL = ref('')
const showIframeDrawer = ref(false)
const iframePageRef = ref()
-
+useEventListener(window, 'message', ({ data }) => {
+ switch (data) {
+ case IFRAME_PAGE_SWITCH_BEWLY:
+ {
+ const currentDockItemConfig = settingsStore.getDockItemConfigByPage(activatedPage.value)
+ if (currentDockItemConfig)
+ currentDockItemConfig.useOriginalBiliPage = false
+ }
+ break
+ case IFRAME_PAGE_SWITCH_BILI:
+ {
+ const currentDockItemConfig = settingsStore.getDockItemConfigByPage(activatedPage.value)
+ if (currentDockItemConfig)
+ currentDockItemConfig.useOriginalBiliPage = true
+ }
+ break
+ }
+})
const iframePageURL = computed((): string => {
// If the iframe is not the BiliBili homepage or in iframe, then don't show the iframe page
if (!isHomePage(window.self.location.href) || isInIframe())
@@ -61,7 +80,6 @@ const iframePageURL = computed((): string => {
}
return ''
})
-
const showBewlyPage = computed((): boolean => {
if (isInIframe())
return false
@@ -73,7 +91,7 @@ const showBewlyPage = computed((): boolean => {
if (iframePageURL.value)
return false
- return isHomePage() && !isInIframe() && !settings.value.useOriginalBilibiliHomepage
+ return isHomePage() && !settings.value.useOriginalBilibiliHomepage
})
const isFirstTimeActivatedPageChange = ref(true)
@@ -205,6 +223,18 @@ function openIframeDrawer(url: string) {
showIframeDrawer.value = true
}
+/**
+ * Checks if the current viewport has a scrollbar.
+ * @returns {boolean} Returns true if the viewport has a scrollbar, false otherwise.
+ */
+async function haveScrollbar() {
+ await nextTick()
+ const osInstance = scrollbarRef.value?.osInstance()
+ const { viewport } = osInstance.elements()
+ const { scrollHeight } = viewport // get scroll offset
+ return scrollHeight > window.innerHeight
+}
+
// In drawer video, watch btn className changed and post message to parent
watchEffect(async (onCleanUp) => {
if (!isInIframe())
@@ -234,18 +264,6 @@ watchEffect(async (onCleanUp) => {
})
})
-/**
- * Checks if the current viewport has a scrollbar.
- * @returns {boolean} Returns true if the viewport has a scrollbar, false otherwise.
- */
-async function haveScrollbar() {
- await nextTick()
- const osInstance = scrollbarRef.value?.osInstance()
- const { viewport } = osInstance.elements()
- const { scrollHeight } = viewport // get scroll offset
- return scrollHeight > window.innerHeight
-}
-
provide('BEWLY_APP', {
activatedPage,
mainAppRef,
@@ -300,7 +318,20 @@ provide('BEWLY_APP', {
-
+
-
+
('BEWLY_APP', {
-
+
{
+ function getDockItemConfigByPage(page: AppPage): DockItemConfig | undefined {
+ return settings.value.dockItemsConfig.find(e => e.page === page)
+ }
+
+ function getDockItemIsUseOriginalBiliPage(page: AppPage): boolean {
+ return settings.value.dockItemsConfig.find(e => e.page === page)?.useOriginalBiliPage || false
+ }
+
+ return { getDockItemConfigByPage, getDockItemIsUseOriginalBiliPage }
+})
diff --git a/src/utils/iframeMessaging.ts b/src/utils/iframeMessaging.ts
new file mode 100644
index 00000000..b8ae21b3
--- /dev/null
+++ b/src/utils/iframeMessaging.ts
@@ -0,0 +1,42 @@
+import browser from 'webextension-polyfill'
+
+import type { AppPage } from '~/enums/appEnums'
+import { useSettingsStore } from '~/stores/settingsStore'
+
+const { getDockItemConfigByPage } = useSettingsStore()
+interface Message {
+ contentScriptQuery: string
+ [key: string]: any
+}
+
+export enum IFRAME_MESSAGE {
+ IFRAME_CHANGE_PAGE_MODE = 'iframeChangePageMode',
+}
+
+export function iframeChangePageMode(page: AppPage, useOriginalBiliPage: boolean) {
+ browser.runtime.sendMessage({
+ contentScriptQuery: IFRAME_MESSAGE.IFRAME_CHANGE_PAGE_MODE,
+ page,
+ useOriginalBiliPage,
+ })
+}
+
+function handleMessage(message: Message) {
+ if (message.contentScriptQuery === IFRAME_MESSAGE.IFRAME_CHANGE_PAGE_MODE) {
+ const { page, useOriginalBiliPage } = message
+ const dockItemConfig = getDockItemConfigByPage(page)
+ if (dockItemConfig) {
+ dockItemConfig.useOriginalBiliPage = useOriginalBiliPage
+ }
+ }
+}
+
+export function setupIframeMsgLstnrs() {
+ browser.runtime.onMessage.removeListener(handleConnect)
+ browser.runtime.onMessage.addListener(handleConnect)
+}
+
+function handleConnect() {
+ browser.runtime.onMessage.removeListener(handleMessage)
+ browser.runtime.onMessage.addListener(handleMessage)
+}