feat: 增加链接的右键菜单打开画中画功能

src/background/index.ts

@@ -1,10 +1,12 @@
 import getDanmakuGetter from '@pkgs/danmakuGetter/getDanmakuGetter'
+import isDev from '@root/shared/isDev'
 import {
   FLOAT_BTN_HIDDEN,
   LOCALE,
   NEED_RELOAD as NEED_RELOAD_PAGE,
 } from '@root/shared/storeKey'
 import WebextEvent from '@root/shared/webextEvent'
+import { tryCatch } from '@root/utils'
 import { t } from '@root/utils/i18n'
 import {
   getBrowserLocalStorage,
@@ -13,15 +15,18 @@ import {
   useBrowserLocalStorage,
   useBrowserSyncStorage,
 } from '@root/utils/storage'
+import {
+  FLOAT_BTN_ID,
+  SETTING_ID,
+  LINK_CONTEXTMENU_OPEN_PIP_ID,
+} from '@root/shared/contextmenu'
+import { autorun } from 'mobx'
 import { v4 as uuid } from 'uuid'
 import { onMessage, sendMessage } from 'webext-bridge/background'
 import Browser from 'webextension-polyfill'
+import { WS_PORT } from '../../scripts/shared'
 import './commands'
 import './docPIP'
-import isDev from '@root/shared/isDev'
-import { tryCatch } from '@root/utils'
-import { WS_PORT } from '../../scripts/shared'
-// import '../entry/vite.bg'
 
 console.log('run bg')
 getBrowserLocalStorage(LOCALE).then((locale) => {
@@ -58,7 +63,7 @@ if (isDev) {
 
 if (isDev) {
   // 好像只要有这个就可以keep alive了
-  chrome.runtime.onConnect.addListener((port) => {
+  Browser.runtime.onConnect.addListener((port) => {
     port.onMessage.addListener((msg) => {
       // keep alive
     })
@@ -73,13 +78,13 @@ getBrowserLocalStorage(NEED_RELOAD_PAGE).then(async (needReload) => {
 })
 
 async function reloadPage() {
-  const tabs = await chrome.tabs.query({ active: true })
+  const tabs = await Browser.tabs.query({ active: true })
   console.log('tabs', tabs)
 
   tabs.forEach((tab) => {
     if (!tab.id) return
     if (!tab.url) return
-    chrome.scripting.executeScript({
+    Browser.scripting.executeScript({
       target: { tabId: tab.id },
       func: () => {
         location.reload()
@@ -122,14 +127,19 @@ onMessage(WebextEvent.bgFetch, async (req) => {
 
 onMessage(WebextEvent.getup, () => 'hello')
 
+onMessage(WebextEvent.updateContextMenu, ({ data }) => {
+  Browser.contextMenus.update(data.id, data.data)
+})
+
 const getTabCapturePermission = () =>
-  new Promise<boolean>((res) => {
-    chrome.permissions.contains({ permissions: ['tabCapture'] }, (rs) => {
-      if (rs) return res(true)
-      chrome.permissions.request({ permissions: ['tabCapture'] }, (rs) => {
-        res(rs)
-      })
+  new Promise<boolean>(async (res) => {
+    const rs = await Browser.permissions.contains({
+      permissions: ['tabCapture'],
     })
+    if (rs) return res(true)
+    res(
+      await Browser.permissions.request({ permissions: ['tabCapture'] as any }),
+    )
   })
 
 onMessage(WebextEvent.getTabCapturePermission, getTabCapturePermission)
@@ -208,8 +218,6 @@ onMessage(WebextEvent.stopGetDanmaku, ({ data }) => {
   }
 })
 
-const FLOAT_BTN_ID = 'FLOAT_BTN_ID',
-  SETTING_ID = 'SETTING_ID'
 Browser.runtime.onInstalled.addListener(() => {
   Browser.contextMenus.create({
     contexts: ['action'],
@@ -222,8 +230,20 @@ Browser.runtime.onInstalled.addListener(() => {
     title: t('menu.openSetting'),
     id: SETTING_ID,
   })
+  Browser.contextMenus.create({
+    contexts: ['link'],
+    id: LINK_CONTEXTMENU_OPEN_PIP_ID,
+    title: /* t('menu.openPIP') */ '打开画中画',
+  })
 })
 
+// autorun(() => {
+//   console.log(
+//     'config.disableOpenPIPInLinkMenu',
+//     config.disableOpenPIPInLinkMenu,
+//   )
+// })
+
 // 很奇怪的需要延迟点才不会触发'Cannot find menu item with id'
 setTimeout(() => {
   useBrowserLocalStorage(LOCALE, (locale) => {
@@ -244,6 +264,7 @@ setTimeout(() => {
 }, 50)
 
 Browser.contextMenus.onClicked.addListener((info, tab) => {
+  console.log('click info', info)
   switch (info.menuItemId) {
     case FLOAT_BTN_ID: {
       setBrowserSyncStorage(FLOAT_BTN_HIDDEN, !info.checked)
@@ -256,6 +277,22 @@ Browser.contextMenus.onClicked.addListener((info, tab) => {
           context: 'content-script',
         })
       }
+      break
+    }
+    case LINK_CONTEXTMENU_OPEN_PIP_ID: {
+      if (tab?.id) {
+        sendMessage(
+          WebextEvent.launchPIPWithReplaceModeFromLink,
+          {
+            openUrl: info.linkUrl ?? '',
+          },
+          {
+            tabId: tab?.id,
+            context: 'content-script',
+          },
+        )
+      }
+      break
     }
   }
 })

src/components/VideoPlayerV2/hooks.ts

@@ -9,7 +9,7 @@ import { useMemoizedFn } from 'ahooks'
 import vpContext from './context'
 
 export const useTogglePlayState = () => {
-  const { webVideo, isLive } = useContext(vpContext)
+  const { webVideo, isLive, eventBus } = useContext(vpContext)
 
   const togglePlayState = useMemoizedFn(async (type?: 'play' | 'pause') => {
     if (!webVideo) return

src/components/VideoPlayerV2/index.tsx

@@ -15,7 +15,13 @@ import useOpenIsolationModal from '@root/hook/useOpenIsolationModal'
 import useTargetEventListener from '@root/hook/useTargetEventListener'
 import PostMessageEvent from '@root/shared/postMessageEvent'
 import configStore, { ReplacerDbClickAction } from '@root/store/config'
-import { isDocPIP, isIframe, ownerWindow, wait } from '@root/utils'
+import {
+  createElement,
+  isDocPIP,
+  isIframe,
+  ownerWindow,
+  wait,
+} from '@root/utils'
 import { hasParent } from '@root/utils/dom'
 import screenfull from '@root/utils/screenfull'
 import { Omit } from '@root/utils/typeUtils'
@@ -193,6 +199,12 @@ const VideoPlayerV2Inner = observer(
         return toFullInWeb
       })
     })
+    useOnce(() =>
+      eventBus.on2(PlayerEvent.toggleFullInWeb, () => {
+        console.log('toggleFullInWeb')
+        toggleFullInWeb()
+      }),
+    )
     const toggleFullscreen = useMemoizedFn(() => {
       if (screenfull.isFullscreen) {
         screenfull.exit()
@@ -355,6 +367,10 @@ const VideoPlayerV2Inner = observer(
       }
     })
 
+    useOnce(() => {
+      eventBus.emit(PlayerEvent.videoPlayerInitd)
+    })
+
     const el = (
       <div
         tabIndex={-1}

src/contents/main.ts

@@ -1,5 +1,5 @@
 import API_bilibili from '@root/api/bilibili'
-import { PlayerEvent } from '@root/core/event'
+import { eventBus, PlayerEvent } from '@root/core/event'
 import { WebProvider } from '@root/core/WebProvider'
 import isDev from '@root/shared/isDev'
 import isTop from '@root/shared/isTop'
@@ -16,6 +16,7 @@ import {
   dq,
   dq1Adv,
   getIframeElFromSource,
+  getVideoElInitFloatButtonData,
   tryCatch,
 } from '@root/utils'
 import { getMediaStreamInGetter } from '@root/utils/webRTC'
@@ -24,15 +25,29 @@ import {
   postMessageToChild,
   postMessageToTop,
 } from '@root/utils/windowMessages'
+import CommonProvider from '@root/web-provider/common'
 import { autorun } from 'mobx'
 import { onMessage as onBgMessage } from 'webext-bridge/content-script'
-import _getWebProvider from '../web-provider/getWebProvider'
+import getWebProvider from '../web-provider/getWebProvider'
 import './floatButton'
 
+// console.log('running main.ts', location.href, isTop)
 // iframe里就不用运行了
 if (isTop) {
   console.log('run content')
   main()
+  // 1. 从右键菜单点击发起画中画功能，传到background里，再发送事件到这cs中
+  // 开启LaunchPIPWithReplaceModeFromLinkWebProvider
+  onBgMessage(WebextEvent.launchPIPWithReplaceModeFromLink, ({ data }) => {
+    // requestVideoPIP()
+    playerConfig.forceDocPIPRenderType =
+      DocPIPRenderType.launchPIPWithReplaceModeFromLink
+    playerConfig.replaceModeFromLinkUrl = data.openUrl
+
+    const provider = new CommonProvider()
+    window.provider = provider
+    provider.openPlayer()
+  })
 } else {
   // 处理top发来的请求检测video标签
   onPostMessage(PostMessageEvent.detectVideo_req, () => {
@@ -49,12 +64,51 @@ if (isTop) {
       }),
     )
   })
+
+  // 2. 从LaunchPIPWithReplaceModeFromLinkWebProvider中传事件到位于docPIP iframe的该cs中，启动replaceWebVideoDom模式
+  onPostMessage(PostMessageEvent.openReplaceModePlayer, async (_, source) => {
+    const videoEl = document.querySelector('video')
+    console.log('openReplaceModePlayer', videoEl)
+    if (!videoEl)
+      return postMessageToChild(
+        PostMessageEvent.openReplaceModePlayer_resp,
+        {
+          isOk: false,
+          reason: '找不到video元素',
+        },
+        source,
+      )
+
+    playerConfig.forceDocPIPRenderType = DocPIPRenderType.replaceWebVideoDom
+    const provider = getWebProvider()
+    const [container, vel, isFixed] = getVideoElInitFloatButtonData(videoEl)
+    playerConfig.topContainerEl = container
+    playerConfig.isFixedPos = isFixed
+    window.provider = provider
+    setTimeout(async () => {
+      await provider.openPlayer({
+        videoEl,
+      })
+      const unListen = eventBus.on2(PlayerEvent.videoPlayerInitd, () => {
+        unListen()
+        eventBus.emit(PlayerEvent.toggleFullInWeb)
+        postMessageToChild(
+          PostMessageEvent.openReplaceModePlayer_resp,
+          {
+            isOk: true,
+          },
+          source,
+        )
+      })
+    }, 50)
+  })
+  // onPostMessage(PostMessageEvent.openReplaceModePlayer, () => {})
 }
 
 function main() {
   let provider: WebProvider | undefined
   let getProvider = () => {
-    provider = _getWebProvider()
+    provider = getWebProvider()
     window.provider = provider
     return provider
   }
@@ -422,7 +476,7 @@ function main() {
     console.log('🟡 No support mediaSession action enterpictureinpicture')
   }
 
-  window.getWebProvider = _getWebProvider
+  window.getWebProvider = getWebProvider
 }
 
 if (isDev) {

src/core/VideoPlayer/CanvasVideoPlayer.tsx

@@ -2,6 +2,7 @@ import { createElement } from '@root/utils'
 import { ERROR_MSG } from '@root/shared/errorMsg'
 import { CanvasDanmakuEngine } from '../danmaku/DanmakuEngine'
 import CanvasDanmakuVideo from '../danmaku/DanmakuEngine/canvasDanmaku/CanvasDanmakuVideo'
+import { PlayerEvent } from '../event'
 import VideoPlayerBase from './VideoPlayerBase'
 
 export class CanvasVideoPlayer extends VideoPlayerBase {
@@ -57,5 +58,7 @@ export class CanvasVideoPlayer extends VideoPlayerBase {
         this.bindEvent()
       }
     }
+
+    this.emit(PlayerEvent.videoPlayerInitd)
   }
 }

src/core/VideoPlayer/HtmlVideoPlayer.tsx

@@ -14,10 +14,6 @@ import CanvasVideo from '../CanvasVideo'
 import { PlayerEvent } from '../event'
 import VideoPlayerBase, { supportOnVideoChangeTypes } from './VideoPlayerBase'
 
-const docPIPStyleEl = createElement('style', {
-  innerText: 'html, body { height: 100% }',
-})
-
 export class HtmlVideoPlayer extends VideoPlayerBase {
   playerRootEl?: HTMLElement
 
@@ -66,7 +62,7 @@ export class HtmlVideoPlayer extends VideoPlayerBase {
     })
     this.playerRootEl = createElement('div', {
       className: 'h-full',
-      children: [root, docPIPStyleEl],
+      children: [root],
     })
     const reactRoot = createRoot(root)
 

src/core/VideoPlayer/VideoPlayerBase.ts

@@ -122,7 +122,7 @@ export default class VideoPlayerBase
       }
     })
 
-    this.emit(PlayerEvent.videoPlayerInitd)
+    // this.emit(PlayerEvent.videoPlayerInitd)
   }
   async unload() {
     this.emit(PlayerEvent.videoPlayerBeforeUnload)