diff --git a/packages/special-pages/pages/duckplayer/src/js/index.js b/packages/special-pages/pages/duckplayer/src/js/index.js index 629914fda..840e9f1e2 100644 --- 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 index 875019b2b..a1e769841 100644 --- 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} 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 index 5626cc006..8121e5f74 100644 --- 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} */ async didReceiveFirstSettingsUpdate () { - await this.mocks.waitForCallCount({ count: 1, method: 'getUserValues' }) + await this.mocks.waitForCallCount({ count: 1, method: 'initialSetup' }) } async toggleAlwaysOpenSetting () {