Enable PiP button in DuckPlayer (#973)

* Enable pip button in duckplayer * fix an exception in the DuckPlayer integration test * Remove redundant console logs * Lint fix * Fix integration tests for duckplayer * rename to 'state' --------- Co-authored-by: Shane Osbourne <sosbourne@duckduckgo.com>
duckduckgo · Jun 14, 2024 · b69c66c · b69c66c
1 parent 53be04e
commit b69c66c
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 8 deletions.
diff --git a/packages/special-pages/pages/duckplayer/src/js/index.js b/packages/special-pages/pages/duckplayer/src/js/index.js
@@ -90,12 +90,16 @@ const VideoPlayer = {
      * @param {object} opts
      * @param {string} opts.base
      * @param {ImportMeta['env']} opts.env
+     * @param {import('./messages').DuckPlayerPageSettings} opts.settings
      */
     init: (opts) => {
         VideoPlayer.loadVideoById()
         VideoPlayer.autoFocusVideo(opts.env)
         VideoPlayer.setTabTitle()
         VideoPlayer.setClickListener(opts.base)
+        if (opts.settings.pip.state === 'enabled') {
+            VideoPlayer.enablePiP()
+        }
     },
 
     /**
@@ -232,6 +236,26 @@ const VideoPlayer = {
         })
     },
 
+    enablePiP: () => {
+        VideoPlayer.onIframeLoaded(() => {
+            try {
+                const iframe = VideoPlayer.iframe()
+                const iframeDocument = iframe?.contentDocument
+                const iframeWindow = iframe?.contentWindow
+                if (iframeDocument && iframeWindow) {
+                    // @ts-expect-error - typescript doesn't know about CSSStyleSheet here for some reason
+                    const styleSheet = new iframeWindow.CSSStyleSheet()
+                    styleSheet.replaceSync('button.ytp-pip-button { display: inline-block !important; }')
+                    // See https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets#append_a_new_stylesheet
+                    iframeDocument.adoptedStyleSheets = [...iframeDocument.adoptedStyleSheets, styleSheet]
+                }
+            } catch (e) {
+                // ignore errors
+                console.warn(e)
+            }
+        })
+    },
+
     /**
      * Wait for the video to load and then focus it
      * @param {ImportMeta['env']} env
@@ -817,13 +841,10 @@ document.addEventListener('DOMContentLoaded', async () => {
         return
     }
 
-    // here we have access to userValues and settings
-    console.log(result.value.userValues)
-    console.log(result.value.settings)
-
     VideoPlayer.init({
         base: baseUrl(import.meta.injectName),
-        env: import.meta.env
+        env: import.meta.env,
+        settings: result.value.settings
     })
     Tooltip.init()
     PlayOnYouTube.init({

diff --git a/packages/special-pages/pages/duckplayer/src/js/messages.js b/packages/special-pages/pages/duckplayer/src/js/messages.js
@@ -28,6 +28,19 @@ export class DuckPlayerPageMessages {
      * @returns {Promise<InitialSetup>} params
      */
     initialSetup () {
+        if (this.injectName === 'integration') {
+            return Promise.resolve({
+                settings: {
+                    pip: {
+                        state: 'enabled'
+                    }
+                },
+                userValues: new UserValues({
+                    overlayInteracted: false,
+                    privatePlayerMode: { alwaysAsk: {} }
+                })
+            })
+        }
         return this.messaging.request('initialSetup')
     }
 
@@ -125,7 +138,7 @@ export class DuckPlayerPageSettings {
     /**
      * @param {object} params
      * @param {object} params.pip
-     * @param {"enabled" | "disabled"} params.pip.status
+     * @param {"enabled" | "disabled"} params.pip.state
      */
     constructor (params) {
         /**

diff --git a/packages/special-pages/tests/page-objects/duck-player.js b/packages/special-pages/tests/page-objects/duck-player.js
@@ -49,7 +49,7 @@ export class DuckPlayerPage {
             initialSetup: {
                 settings: {
                     pip: {
-                        status: 'disabled'
+                        state: 'disabled'
                     }
                 },
                 userValues: {
@@ -312,7 +312,7 @@ export class DuckPlayerPage {
      * @return {Promise<void>}
      */
     async didReceiveFirstSettingsUpdate () {
-        await this.mocks.waitForCallCount({ count: 1, method: 'getUserValues' })
+        await this.mocks.waitForCallCount({ count: 1, method: 'initialSetup' })
     }
 
     async toggleAlwaysOpenSetting () {