Release build 6.5.0 [ci release]

integration-test/playwright/duckplayer.spec.js

@@ -131,7 +131,7 @@ test.describe('Video Player overlays', () => {
         await overlays.userSettingIs('always ask')
         await overlays.gotoPlayerPage()
 
-        // Then then the overlay shows and blocks the video from playing
+        // Then the overlay shows and blocks the video from playing
         await overlays.overlayBlocksVideo()
     })
     test('Overlay blocks video from playing (supporting DOM appearing over time)', async ({ page }, workerInfo) => {
@@ -144,7 +144,7 @@ test.describe('Video Player overlays', () => {
         await overlays.userSettingIs('always ask')
         await overlays.gotoPlayerPage({ variant: 'incremental-dom' })
 
-        // Then then the overlay shows and blocks the video from playing
+        // Then the overlay shows and blocks the video from playing
         await overlays.overlayBlocksVideo()
     })
     test('Overlay is removed when new settings arrive', async ({ page }, workerInfo) => {
@@ -299,6 +299,67 @@ test.describe('Video Player overlays', () => {
             await overlays.overlayBlocksVideo()
         })
     })
+    test.describe('with UI settings overrides', () => {
+        test('displays default overlay copy when no cohort is given', async ({ page }, workerInfo) => {
+            const overlays = DuckplayerOverlays.create(page, workerInfo)
+
+            // Given overlays feature is enabled
+            await overlays.withRemoteConfig()
+
+            // And my setting is 'always ask'
+            // And no overlay copy experiment cohort is set
+            await overlays.initialSetupIs('always ask')
+            await overlays.gotoPlayerPage()
+
+            // Then the overlay shows the correct copy for the default variant
+            await overlays.overlayCopyIsDefault()
+        })
+
+        test('displays default overlay copy in control cohort', async ({ page }, workerInfo) => {
+            const overlays = DuckplayerOverlays.create(page, workerInfo)
+
+            // Given overlays feature is enabled
+            await overlays.withRemoteConfig()
+
+            // And my setting is 'always ask'
+            // And I'm in the 'control' experiment cohort
+            await overlays.initialSetupIs('always ask', 'default overlay copy')
+            await overlays.gotoPlayerPage()
+
+            // Then the overlay shows the correct copy for the default variant
+            await overlays.overlayCopyIsDefault()
+        })
+
+        test('displays overlay copy for cohort A1', async ({ page }, workerInfo) => {
+            const overlays = DuckplayerOverlays.create(page, workerInfo)
+
+            // Given overlays feature is enabled
+            await overlays.withRemoteConfig()
+
+            // And my setting is 'always ask'
+            // And I'm in the 'A1' experiment cohort
+            await overlays.initialSetupIs('always ask', 'overlay copy a1')
+            await overlays.gotoPlayerPage()
+
+            // Then the overlay shows the correct copy for the A1 variant
+            await overlays.overlayCopyIsA1()
+        })
+
+        test('displays overlay copy for cohort B1', async ({ page }, workerInfo) => {
+            const overlays = DuckplayerOverlays.create(page, workerInfo)
+
+            // Given overlays feature is enabled
+            await overlays.withRemoteConfig()
+
+            // And my setting is 'always ask'
+            // And I'm in the 'B1' experiment cohort
+            await overlays.initialSetupIs('always ask', 'overlay copy b1')
+            await overlays.gotoPlayerPage()
+
+            // Then the overlay shows the correct copy for the B1 variant
+            await overlays.overlayCopyIsB1()
+        })
+    })
 })
 
 test.describe('serp proxy', () => {

integration-test/playwright/page-objects/duckplayer-overlays.js

@@ -33,6 +33,22 @@ const userValues = {
     }
 }
 
+// Possible UI Settings
+const uiSettings = {
+    /** @type {import("../../../src/features/duck-player.js").UISettings} */
+    'default overlay copy': {
+        overlayCopy: 'default'
+    },
+    /** @type {import("../../../src/features/duck-player.js").UISettings} */
+    'overlay copy a1': {
+        overlayCopy: 'a1'
+    },
+    /** @type {import("../../../src/features/duck-player.js").UISettings} */
+    'overlay copy b1': {
+        overlayCopy: 'b1'
+    }
+}
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const configFiles = /** @type {const} */([
     'overlays.json',
@@ -254,6 +270,27 @@ export class DuckplayerOverlays {
         })
     }
 
+    /**
+     * @param {keyof userValues} userValueSetting
+     * @param {keyof uiSettings} [uiSetting]
+     * @return {Promise<void>}
+     */
+    async initialSetupIs (userValueSetting, uiSetting) {
+        const initialSetupResponse = {
+            userValues: userValues[userValueSetting]
+        }
+
+        if (uiSetting && uiSettings[uiSetting]) {
+            initialSetupResponse.ui = uiSettings[uiSetting]
+        }
+
+        await this.page.addInitScript(mockResponses, {
+            responses: {
+                initialSetup: initialSetupResponse
+            }
+        })
+    }
+
     /**
      * @param {keyof userValues} setting
      */
@@ -542,6 +579,48 @@ export class DuckplayerOverlays {
             })
         })
     }
+
+    /**
+     * Checks for presence of default overlay copy
+     */
+    async overlayCopyIsDefault () {
+        await this.page.locator('ddg-video-overlay').waitFor({ state: 'visible', timeout: 1000 })
+        await this.page.getByText('Tired of targeted YouTube ads and recommendations?', { exact: true }).waitFor({ state: 'visible', timeout: 1000 })
+        await this.page.getByText('Duck Player provides a clean viewing experience without personalized ads and prevents viewing activity from influencing your YouTube recommendations.', { exact: true }).waitFor({ state: 'visible', timeout: 1000 })
+
+        await this.page.getByRole('link', { name: 'Watch in Duck Player' }).waitFor({ state: 'visible', timeout: 1000 })
+        await this.page.getByRole('button', { name: 'Watch Here' }).waitFor({ state: 'visible', timeout: 1000 })
+
+        await this.page.getByLabel('Remember my choice').waitFor({ state: 'visible', timeout: 1000 })
+    }
+
+    /**
+     * Checks for presence of overlay copy A1 experiment
+     */
+    async overlayCopyIsA1 () {
+        await this.page.locator('ddg-video-overlay').waitFor({ state: 'visible', timeout: 1000 })
+        await this.page.getByText('Turn on Duck Player to watch without targeted ads', { exact: true }).waitFor({ state: 'visible', timeout: 1000 })
+        await this.page.getByText('What you watch in DuckDuckGo won’t influence your recommendations on YouTube.', { exact: true }).waitFor({ state: 'visible', timeout: 1000 })
+
+        await this.page.getByRole('link', { name: 'Turn On Duck Player' }).waitFor({ state: 'visible', timeout: 1000 })
+        await this.page.getByRole('button', { name: 'No Thanks' }).waitFor({ state: 'visible', timeout: 1000 })
+
+        await this.page.getByLabel('Remember my choice').waitFor({ state: 'visible', timeout: 1000 })
+    }
+
+    /**
+     * Checks for presence of overlay copy B1 experiment
+     */
+    async overlayCopyIsB1 () {
+        await this.page.locator('ddg-video-overlay').waitFor({ state: 'visible', timeout: 1000 })
+        await this.page.getByText('Drowning in ads on YouTube? Turn on Duck Player.', { exact: true }).waitFor({ state: 'visible', timeout: 1000 })
+        await this.page.getByText('What you watch in DuckDuckGo won’t influence your recommendations on YouTube.', { exact: true }).waitFor({ state: 'visible', timeout: 1000 })
+
+        await this.page.getByRole('link', { name: 'Turn On Duck Player' }).waitFor({ state: 'visible', timeout: 1000 })
+        await this.page.getByRole('button', { name: 'No Thanks' }).waitFor({ state: 'visible', timeout: 1000 })
+
+        await this.page.getByLabel('Remember my choice').waitFor({ state: 'visible', timeout: 1000 })
+    }
 }
 
 /**

integration-test/test-pages/duckplayer/pages/player.html

@@ -98,6 +98,34 @@
         </div>
     </div>
 </template>
+<script>
+    (async () => {
+        if (!new URLSearchParams(location.search).has('preview')) {
+            return;
+        }
+        await import("/build/integration/contentScope.js").catch(console.error)
+        const overlays = await fetch('/integration-test/test-pages/duckplayer/config/overlays.json').then(x => x.json())
+        document.dispatchEvent(new CustomEvent('content-scope-init-args', {
+            detail: {
+                debug: true,
+                platform: {
+                    name: 'macos'
+                },
+                site: {
+                    domain: location.hostname,
+                    isBroken: false,
+                    allowlisted: false,
+                    enabledFeatures: [
+                        'duckPlayer'
+                    ]
+                },
+                featureSettings: {
+                    duckPlayer: overlays.features.duckPlayer.settings,
+                }
+            }
+        }))
+    })();
+</script>
 
 <script type="module">
     const variant = new URLSearchParams(window.location.search).get('variant') || 'default';
@@ -140,7 +168,7 @@
                 const params = new URLSearchParams(a.search);
                 const current = new URL(window.location.href);
                 current.searchParams.set('v', params.get('v'));
-                history.pushState('','',current.toString());
+                history.pushState('', '', current.toString());
                 document.title = a.title;
                 return;
             }

src/features/duck-player.js

@@ -45,9 +45,15 @@ import { Environment, initOverlays } from './duckplayer/overlays.js'
  * @property {boolean} overlayInteracted - always a boolean
  */
 
+/**
+ * @typedef UISettings - UI-specific settings
+ * @property {'default'|'a1'|'b1'} overlayCopy
+ */
+
 /**
  * @typedef OverlaysInitialSettings - The initial payload used to communicate render-blocking information
  * @property {UserValues} userValues
+ * @property {UISettings} ui
  */
 
 /**
@@ -87,11 +93,12 @@ export default class DuckPlayerFeature extends ContentFeature {
             throw new Error('cannot operate duck player without a messaging backend')
         }
 
-        const comms = new DuckPlayerOverlayMessages(this.messaging)
         const env = new Environment({
             debug: args.debug,
+            injectName: import.meta.injectName,
             platform: this.platform
         })
+        const comms = new DuckPlayerOverlayMessages(this.messaging, env)
 
         if (overlaysEnabled) {
             initOverlays(overlaySettings.youtube, env, comms)