Duck Player Native pausing bugs (#1705)

Author: mgurgel

injected/integration-test/duckplayer-native.spec.js

@@ -76,6 +76,23 @@ test.describe('Duck Player Native thumbnail overlay', () => {
         await duckPlayer.didShowOverlay();
         await duckPlayer.didShowLogoInOverlay();
     });
+    test('Does not duplicate overlay on repeated calls', async ({ page }, workerInfo) => {
+        const duckPlayer = DuckPlayerNative.create(page, workerInfo);
+
+        // Given the duckPlayerNative feature is enabled
+        await duckPlayer.withRemoteConfig();
+
+        // When I go to a YouTube page
+        await duckPlayer.gotoYouTubePage();
+        await duckPlayer.sendOnMediaControl();
+
+        // And the browser fires multiple pause messages
+        await duckPlayer.sendOnMediaControl();
+        await duckPlayer.sendOnMediaControl();
+
+        // Then I should see only one thumbnail overlay on the page
+        await duckPlayer.overlayIsUnique();
+    });
     test('Dismisses overlay on click', async ({ page }, workerInfo) => {
         const duckPlayer = DuckPlayerNative.create(page, workerInfo);
 
@@ -101,6 +118,19 @@ test.describe('Duck Player Native thumbnail overlay', () => {
 });
 
 test.describe('Duck Player Native custom error view', () => {
+    test('Shows sign-in error', async ({ page }, workerInfo) => {
+        const duckPlayer = DuckPlayerNative.create(page, workerInfo);
+
+        // Given the duckPlayerNative feature is enabled
+        await duckPlayer.withRemoteConfig();
+
+        // When I go to a YouTube page with an age-restricted error
+        await duckPlayer.gotoSignInErrorPage();
+
+        // Then I should see the generic error screen
+        await duckPlayer.didShowSignInError();
+    });
+
     test('Shows age-restricted error', async ({ page }, workerInfo) => {
         const duckPlayer = DuckPlayerNative.create(page, workerInfo);
 
@@ -111,19 +141,32 @@ test.describe('Duck Player Native custom error view', () => {
         await duckPlayer.gotoAgeRestrictedErrorPage();
 
         // Then I should see the generic error screen
-        await duckPlayer.didShowGenericError();
+        await duckPlayer.didShowAgeRestrictedError();
     });
 
-    test('Shows sign-in error', async ({ page }, workerInfo) => {
+    test('Shows no-embed error', async ({ page }, workerInfo) => {
         const duckPlayer = DuckPlayerNative.create(page, workerInfo);
 
         // Given the duckPlayerNative feature is enabled
         await duckPlayer.withRemoteConfig();
 
         // When I go to a YouTube page with an age-restricted error
-        await duckPlayer.gotoSignInErrorPage();
+        await duckPlayer.gotoNoEmbedErrorPage();
 
         // Then I should see the generic error screen
-        await duckPlayer.didShowSignInError();
+        await duckPlayer.didShowNoEmbedError();
+    });
+
+    test('Shows generic/unknown error', async ({ page }, workerInfo) => {
+        const duckPlayer = DuckPlayerNative.create(page, workerInfo);
+
+        // Given the duckPlayerNative feature is enabled
+        await duckPlayer.withRemoteConfig();
+
+        // When I go to a YouTube page with an age-restricted error
+        await duckPlayer.gotoUnknownErrorPage();
+
+        // Then I should see the generic error screen
+        await duckPlayer.didShowUnknownError();
     });
 });

injected/integration-test/page-objects/duckplayer-native.js

@@ -5,7 +5,7 @@ import { ResultsCollector } from './results-collector.js';
 
 /**
  * @import { PageType } from '../../src/features/duckplayer-native/messages.js'
- * @typedef {"default" | "incremental-dom" | "age-restricted-error" | "sign-in-error"} PlayerPageVariants
+ * @typedef {"default" | "incremental-dom" | "age-restricted-error" | "sign-in-error" | "no-embed-error" | "unknown-error"} PlayerPageVariants
  */
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -33,6 +33,7 @@ export class DuckPlayerNative {
         this.page = page;
         this.build = build;
         this.platform = platform;
+        this.isMobile = platform.name === 'android' || platform.name === 'ios';
         this.collector = new ResultsCollector(page, build, platform);
         this.collector.withMockResponse({
             initialSetup: defaultInitialSetup,
@@ -68,6 +69,14 @@ export class DuckPlayerNative {
         await this.gotoPage('NOCOOKIE', { variant: 'age-restricted-error' });
     }
 
+    async gotoNoEmbedErrorPage() {
+        await this.gotoPage('NOCOOKIE', { variant: 'no-embed-error' });
+    }
+
+    async gotoUnknownErrorPage() {
+        await this.gotoPage('NOCOOKIE', { variant: 'unknown-error' });
+    }
+
     async gotoSignInErrorPage() {
         await this.gotoPage('NOCOOKIE', { variant: 'sign-in-error' });
     }
@@ -85,7 +94,8 @@ export class DuckPlayerNative {
     async gotoPage(pageType, params = {}) {
         await this.withPageType(pageType);
 
-        const { variant = 'default', videoID = '123' } = params;
+        const defaultVariant = this.isMobile ? 'mobile' : 'default';
+        const { variant = defaultVariant, videoID = '123' } = params;
         const urlParams = new URLSearchParams([
             ['v', videoID],
             ['variant', variant],
@@ -236,6 +246,11 @@ export class DuckPlayerNative {
         await this.page.locator('ddg-video-thumbnail-overlay-mobile .logo').waitFor({ state: 'visible', timeout: 1000 });
     }
 
+    async overlayIsUnique() {
+        const count = await this.page.locator('ddg-video-thumbnail-overlay-mobile').count();
+        expect(count).toBe(1);
+    }
+
     async clickOnOverlay() {
         await this.page.locator('ddg-video-thumbnail-overlay-mobile').click();
     }
@@ -260,19 +275,35 @@ export class DuckPlayerNative {
 
     /* Custom Error assertions */
 
-    async didShowGenericError() {
+    async didShowAgeRestrictedError() {
+        await expect(this.page.locator('ddg-video-error')).toMatchAriaSnapshot(`
+            - heading "Sorry, this video is age-restricted" [level=1]
+            - paragraph: To watch age-restricted videos, you need to sign in to YouTube to verify your age.
+            - paragraph: You can still watch this video, but you’ll have to sign in and watch it on YouTube without the added privacy of Duck Player.
+          `);
+    }
+
+    async didShowNoEmbedError() {
+        await expect(this.page.locator('ddg-video-error')).toMatchAriaSnapshot(`
+            - heading "Sorry, this video can only be played on YouTube" [level=1]
+            - paragraph: The creator of this video has chosen not to allow it to be viewed on other sites.
+            - paragraph: You can still watch it on YouTube, but without the added privacy of Duck Player.
+          `);
+    }
+
+    async didShowUnknownError() {
         await expect(this.page.locator('ddg-video-error')).toMatchAriaSnapshot(`
-            - heading "YouTube won’t let Duck Player load this video" [level=1]
-            - paragraph: YouTube doesn’t allow this video to be viewed outside of YouTube.
+            - heading "Duck Player can’t load this video" [level=1]
+            - paragraph: This video can’t be viewed outside of YouTube.
             - paragraph: You can still watch this video on YouTube, but without the added privacy of Duck Player.
           `);
     }
 
     async didShowSignInError() {
         await expect(this.page.locator('ddg-video-error')).toMatchAriaSnapshot(`
-            - heading "YouTube won’t let Duck Player load this video" [level=1]
-            - paragraph: YouTube is blocking this video from loading. If you’re using a VPN, try turning it off and reloading this page.
-            - paragraph: If this doesn’t work, you can still watch this video on YouTube, but without the added privacy of Duck Player.
+            - heading "Sorry, YouTube thinks you’re a bot" [level=1]
+            - paragraph: This can happen if you’re using a VPN. Try turning the VPN off or switching server locations and reloading this page.
+            - paragraph: If that doesn’t work, you’ll have to sign in and watch this video on YouTube without the added privacy of Duck Player.
           `);
     }
 

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

@@ -215,6 +215,50 @@
     </div>
 </template>
 
+<template id="no-embed-error-template">
+    <div class="ytp-error" role="alert" data-layer="4">
+        <div class="ytp-error-content" style="padding-top: 395.5px;">
+            <div class="ytp-error-icon-container"><svg fill="#fff" viewBox="0 0 48 48">
+                    <path d="M0 0h48v48H0V0z" fill="none"></path>
+                    <path
+                        d="M22 30h4v4h-4zm0-16h4v12h-4zm1.99-10C12.94 4 4 12.95 4 24s8.94 20 19.99 20S44 35.05 44 24 35.04 4 23.99 4zM24 40c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z"
+                        fill-opacity="0.7"></path>
+                </svg></div>
+            <div class="ytp-error-content-wrap">
+                <div class="ytp-error-content-wrap-reason"><span><span>The uploader has not made this video available in your country
+                </span><a href="//support.google.com/youtube/answer/2802167?hl=en"
+                            target="_blank">Learn more</a></span></div>
+                <div class="ytp-error-content-wrap-subreason">
+                    <div><a href="http://www.youtube.com/watch?v=PGaO6KUR9fk" target="TARGET_NEW_WINDOW">Watch on
+                            YouTube</a></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<template id="unknown-error-template">
+    <div class="ytp-error" role="alert" data-layer="4">
+        <div class="ytp-error-content" style="padding-top: 395.5px;">
+            <div class="ytp-error-icon-container"><svg fill="#fff" viewBox="0 0 48 48">
+                    <path d="M0 0h48v48H0V0z" fill="none"></path>
+                    <path
+                        d="M22 30h4v4h-4zm0-16h4v12h-4zm1.99-10C12.94 4 4 12.95 4 24s8.94 20 19.99 20S44 35.05 44 24 35.04 4 23.99 4zM24 40c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z"
+                        fill-opacity="0.7"></path>
+                </svg></div>
+            <div class="ytp-error-content-wrap">
+                <div class="ytp-error-content-wrap-reason"><span><span>This video isn't available anymore
+                </span><a href="//support.google.com/youtube/answer/2802167?hl=en"
+                            target="_blank">Learn more</a></span></div>
+                <div class="ytp-error-content-wrap-subreason">
+                    <div><a href="http://www.youtube.com/watch?v=PGaO6KUR9fk" target="TARGET_NEW_WINDOW">Watch on
+                            YouTube</a></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
 <template id="sign-in-error-template">
     <div class="ytp-error" role="alert" data-layer="4">
         <div class="ytp-error-content" style="padding-top: 395.5px;">
@@ -322,9 +366,47 @@
                 insertTemplateInMain('playlist-template');
             }, 200);
             setTimeout(() => {
+                // Simulate conditions for this error in YouTube config object
+                window.ytcfg = {
+                    get: () => ({
+                        embedded_player_response: JSON.stringify({
+                            previewPlayabilityStatus: { desktopLegacyAgeGateReason: 1, status: 'UNPLAYABLE' }
+                        })
+                    })
+                };
                 insertTemplateInVideo('age-restricted-error-template');
             }, 300);
         },
+        "no-embed-error": () => {
+            main.innerHTML += `<div class="container"><div id="player"></div></div>`
+            setTimeout(() => {
+                insertHTMLVideoPlayer();
+                insertTemplateInMain('related-template');
+                insertTemplateInMain('playlist-template');
+            }, 200);
+            setTimeout(() => {
+                // Simulate conditions for this error in YouTube config object
+                window.ytcfg = {
+                    get: () => ({
+                        embedded_player_response: JSON.stringify({
+                            previewPlayabilityStatus: { status: 'UNPLAYABLE' }
+                        })
+                    })
+                };
+                insertTemplateInVideo('no-embed-error-template');
+            }, 300);
+        },
+        "unknown-error": () => {
+            main.innerHTML += `<div class="container"><div id="player"></div></div>`
+            setTimeout(() => {
+                insertHTMLVideoPlayer();
+                insertTemplateInMain('related-template');
+                insertTemplateInMain('playlist-template');
+            }, 200);
+            setTimeout(() => {
+                insertTemplateInVideo('unknown-error-template');
+            }, 300);
+        },
         "sign-in-error": () => {
             main.innerHTML += `<div class="container"><div id="player"></div></div>`
             setTimeout(() => {

injected/src/features/duck-player-native.js

@@ -18,9 +18,16 @@ import { Logger } from './duckplayer/util.js';
  * @property {boolean} playbackPaused - Should video start playing or paused
  */
 
+/**
+ * @import localeStrings from '../locales/duckplayer/en/native.json'
+ * @typedef {(key: keyof localeStrings) => string} TranslationFn
+ */
+
 export class DuckPlayerNativeFeature extends ContentFeature {
     /** @type {DuckPlayerNativeSubFeature | null} */
     currentPage;
+    /** @type {TranslationFn} */
+    t;
 
     async init(args) {
         /**
@@ -42,10 +49,13 @@ export class DuckPlayerNativeFeature extends ContentFeature {
             locale,
         });
 
+        // Translation function to be used by view components
+        this.t = (key) => env.strings('native.json')[key];
+
         const messages = new DuckPlayerNativeMessages(this.messaging, env);
         messages.subscribeToURLChange(({ pageType }) => {
             const playbackPaused = false; // This can be added to the event data in the future if needed
-            this.urlChanged(pageType, selectors, playbackPaused, env, messages);
+            this.urlDidChange(pageType, selectors, playbackPaused, env, messages);
         });
 
         /** @type {InitialSettings} */
@@ -60,7 +70,7 @@ export class DuckPlayerNativeFeature extends ContentFeature {
 
         if (initialSetup.pageType) {
             const playbackPaused = initialSetup.playbackPaused || false;
-            this.urlChanged(initialSetup.pageType, selectors, playbackPaused, env, messages);
+            this.urlDidChange(initialSetup.pageType, selectors, playbackPaused, env, messages);
         }
     }
 
@@ -72,7 +82,7 @@ export class DuckPlayerNativeFeature extends ContentFeature {
      * @param {Environment} env
      * @param {DuckPlayerNativeMessages} messages
      */
-    urlChanged(pageType, selectors, playbackPaused, env, messages) {
+    urlDidChange(pageType, selectors, playbackPaused, env, messages) {
         /** @type {DuckPlayerNativeSubFeature | null} */
         let nextPage = null;
 
@@ -83,7 +93,7 @@ export class DuckPlayerNativeFeature extends ContentFeature {
 
         switch (pageType) {
             case 'NOCOOKIE':
-                nextPage = setupDuckPlayerForNoCookie(selectors, env, messages);
+                nextPage = setupDuckPlayerForNoCookie(selectors, env, messages, this.t);
                 break;
             case 'YOUTUBE':
                 nextPage = setupDuckPlayerForYouTube(selectors, playbackPaused, env, messages);