Showing error screen

Author: mgurgel

special-pages/pages/duckplayer/app/components/DesktopApp.jsx

@@ -34,15 +34,14 @@ export function DesktopApp({ embed }) {
 function DesktopLayout({ embed }) {
     const error = useYouTubeError();
 
-    if (error) {
-        return <PlayerError layout={'desktop'} kind={'invalid-id'} />;
-    }
+    // TODO: Better conditionals for showing error or player
 
     return (
         <div class={styles.desktop}>
             <PlayerContainer>
                 {embed === null && <PlayerError layout={'desktop'} kind={'invalid-id'} />}
-                {embed !== null && <Player src={embed.toEmbedUrl()} layout={'desktop'} />}
+                {embed !== null && !error && <Player src={embed.toEmbedUrl()} layout={'desktop'} />}
+                {embed !== null && error && <PlayerError layout={'desktop'} kind={error} />}
                 <HideInFocusMode style={'slide'}>
                     <InfoBarContainer>
                         <InfoBar embed={embed} />

special-pages/pages/duckplayer/app/components/MobileApp.jsx

@@ -12,6 +12,7 @@ import { MobileButtons } from './MobileButtons.jsx';
 import { OrientationProvider } from '../providers/OrientationProvider.jsx';
 import { FocusMode } from './FocusMode.jsx';
 import { useTelemetry } from '../types.js';
+import { useYouTubeError } from '../providers/YouTubeErrorProvider';
 
 const DISABLED_HEIGHT = 450;
 
@@ -53,12 +54,17 @@ export function MobileApp({ embed }) {
  */
 function MobileLayout({ embed }) {
     const platformName = usePlatformName();
+    const error = useYouTubeError();
+
+    // TODO: Better conditionals for showing error or player
+
     return (
         <main class={styles.main}>
             <div class={cn(styles.filler, styles.hideInFocus)} />
             <div class={styles.embed}>
                 {embed === null && <PlayerError layout={'mobile'} kind={'invalid-id'} />}
-                {embed !== null && <Player src={embed.toEmbedUrl()} layout={'mobile'} />}
+                {embed !== null && !error && <Player src={embed.toEmbedUrl()} layout={'mobile'} />}
+                {embed !== null && error && <PlayerError layout={'mobile'} kind={error} />}
             </div>
             <div class={cn(styles.logo, styles.hideInFocus)}>
                 <MobileWordmark />

special-pages/pages/duckplayer/app/components/Player.jsx

@@ -1,14 +1,19 @@
 import { h } from 'preact';
 import cn from 'classnames';
 import styles from './Player.module.css';
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { useEffect, useRef } from 'preact/hooks';
 import { useSettings } from '../providers/SettingsProvider.jsx';
 import { createIframeFeatures } from '../features/iframe.js';
 import { Settings } from '../settings';
 import { useTypedTranslation } from '../types.js';
 
+export const PLAYER_ERRORS = {
+    invalidId: 'invalid-id',
+    botDetected: 'bot-detected',
+}
+
 /**
- * @typedef {'invalid-id'|'bot-detected'} PlayerError
+ * @typedef {typeof PLAYER_ERRORS[keyof typeof PLAYER_ERRORS]} PlayerError
  */
 
 /**
@@ -20,7 +25,6 @@ import { useTypedTranslation } from '../types.js';
  */
 export function Player({ src, layout }) {
     const { ref, didLoad } = useIframeEffects(src);
-
     const wrapperClasses = cn({
         [styles.root]: true,
         [styles.player]: true,
@@ -60,6 +64,7 @@ export function PlayerError({ kind, layout }) {
         ['bot-detected']: <span dangerouslySetInnerHTML={{ __html: t('botDetectedError') }} />,
     };
     const text = errors[kind] || errors['invalid-id'];
+
     return (
         <div
             class={cn(styles.root, {
@@ -108,6 +113,7 @@ function useIframeEffects(src) {
             features.clickCapture(),
             features.titleCapture(),
             features.mouseCapture(),
+            features.errorDetection(),
         ];
 
         /**

special-pages/pages/duckplayer/app/features/error-detection.js

@@ -17,6 +17,13 @@ export class ErrorDetection {
     iframeDidLoad(iframe) {
         const documentBody = iframe.contentWindow?.document?.body;
         if (documentBody) {
+            // Check if iframe already contains error
+            const error = nodeContainsError(documentBody);
+            if (error) {
+                window.dispatchEvent(new CustomEvent(IFRAME_ERROR_EVENT, { detail: { error } }));
+                return null;
+            }
+
             // Create a MutationObserver instance
             const observer = new MutationObserver(handleMutation);
 
@@ -40,29 +47,48 @@ const handleMutation = (mutationsList) => {
         if (mutation.type === 'childList') {
             mutation.addedNodes.forEach((node) => {
                 // Check if the added node is a div with the class ytp-error
-                const error = errorForNode(node);
+                const error = nodeIsError(node);
                 if (error) {
                     console.log('A node with an error has been added to the document:', node);
 
-                    window.dispatchEvent(new CustomEvent(IFRAME_ERROR_EVENT, { detail: error }));
+                    window.dispatchEvent(new CustomEvent(IFRAME_ERROR_EVENT, { detail: { error } }));
                 }
             });
         }
     }
 };
 
+/**
+ * Analyses children of a node to determine if it contains an error state
+ *
+ * @param {Node} [node]
+ * @returns {PlayerError|null}
+ */
+const nodeContainsError = (node) => {
+    if (node?.nodeType === Node.ELEMENT_NODE) {
+        const element = /** @type {HTMLElement} */ (node);
+        const errorElement = element.querySelector('ytp-error');
+
+        if (errorElement) {
+            return 'bot-detected'; // TODO: More generic naming 
+        }
+    }
+
+    return null;
+}
+
 /**
  * Analyses attributes of a node to determine if it contains an error state
  *
  * @param {Node} [node]
  * @returns {PlayerError|null}
  */
-const errorForNode = (node) => {
+const nodeIsError = (node) => {
     // if (node.nodeType === Node.ELEMENT_NODE && /** @type {HTMLElement} */(node).classList.contains('ytp-error')) {
     if (node?.nodeType === Node.ELEMENT_NODE) {
         const element = /** @type {HTMLElement} */ (node);
         if (element.classList.contains('ytp-error')) {
-            return 'bot-detected';
+            return 'bot-detected'; // TODO: More generic naming 
         }
         // Add other error detection logic here
     }

special-pages/pages/duckplayer/app/providers/YouTubeErrorProvider.jsx

@@ -1,6 +1,7 @@
 import { useContext, useState } from 'preact/hooks';
 import { h, createContext } from 'preact';
 import { useEffect } from 'preact/hooks';
+import { PLAYER_ERRORS } from '../components/Player';
 
 export const IFRAME_ERROR_EVENT = 'iframe-error';
 
@@ -26,8 +27,9 @@ export function YouTubeErrorProvider({ initial = null, children }) {
     useEffect(() => {
         /** @type {(event: CustomEvent) => void} */
         const errorEventHandler = (event) => {
-            if (event.detail) {
-                setError(event.detail.error || null);
+            const error = event.detail?.error
+            if (Object.values(PLAYER_ERRORS).includes(error) || error === null) {
+                setError(error);
             }
         };
 

special-pages/pages/duckplayer/integration-tests/duck-player.js

@@ -22,6 +22,26 @@ const html = {
     </div>
 </div>
 </body>
+</html>`,
+    signInRequired: `<html><head><title>${MOCK_VIDEO_TITLE}</title></head>
+<body>
+<div class="ytp-error" role="alert" data-layer="4">
+  <div class="ytp-error-content" style="padding-top: 165px">
+    <div class="ytp-error-content-wrap">
+      <div class="ytp-error-content-wrap-reason"><span>Sign in to confirm you’re not a bot</span></div>
+      <div class="ytp-error-content-wrap-subreason">
+        <span
+          ><span>This helps protect our community. </span
+          ><a
+            href="https://support.google.com/youtube/answer/3037019#zippy=%2Ccheck-that-youre-signed-into-youtube"
+            >Learn more</a
+          ></span
+        >
+      </div>
+    </div>
+  </div>
+</div>
+</body>
 </html>`,
 };
 
@@ -156,6 +176,14 @@ export class DuckPlayerPage {
                 });
             }
 
+            if (urlParams.get('videoID') === 'SIGN_IN_REQUIRED') {
+                return request.fulfill({
+                    status: 200,
+                    body: html.signInRequired,
+                    contentType: 'text/html',
+                });
+            }
+
             const mp4VideoPlaceholderAsDataURI =
                 'data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAAIZnJlZQAAAwFtZGF0AAACogYF//+b3EXpvebZSLeWLNgg2SPu73gyNjQgLSBjb3JlIDE1MiByMjg1NCBlMjA5YTFjIC0gSC4yNjQvTVBFRy00IEFWQyBjb2RlYyAtIENvcHlsZWZ0IDIwMDMtMjAxNyAtIGh0dHA6Ly93d3cudmlkZW9sYW4ub3JnL3gyNjQuaHRtbCAtIG9wdGlvbnM6IGNhYmFjPTEgcmVmPTMgZGVibG9jaz0xOjA6MCBhbmFseXNlPTB4MzowMTMzIHN1Ym1lPTcgcHN5PTEgcHN5X3JkPTEuMDA6MC4wMCBtaXhlZF9yZWY9MSBtZV9yYW5nZT0xNiBjaHJvbWFfbWU9MSB0cmVsbGlzPTEgOHg4ZGN0PTEgY3FtPTAgZGVhZHpvbmU9MjEsMTEgZmFzdF9wc2tpcD0xIGNocm9tYV9xcF9vZmZzZXQ9LTIgdGhyZWFkcz02MyBsb29rYWhlYWRfdGhyZWFkcz0yIHNsaWNlZF90aHJlYWRzPTAgbnI9MCBkZWNpbWF0ZT0xIGludGVybGFjZWQ9MCBibHVyYXlfY29tcGF0PTAgY29uc3RyYWluZWRfaW50cmE9MCBiZnJhbWVzPTMgYl9weXJhbWlkPTIgYl9hZGFwdD1xLTIgYl9iaWFzPTAgZGlyZWN0PTEgd2VpZ2h0Yj0xIG9wZW5fZ29wPTAgd2VpZ2h0cD0yIGtleWludD0yNTAga2V5aW50X21pbj0yNSBzY2VuZWN1dD00MCBpbnRyYV9yZWZyZXNoPTAgcmM9bG9va2FoZWFkIG1idHJlZT0xIGNyZj0yMy4wIHFjb21wPTAuNjAgcXBtaW49MCBxcG1heD02OSBxcHN0ZXA9NCB2YnY9MCBjbG9zZWRfZ29wPTAgY3V0X3Rocm91Z2g9MCAnbm8tZGlndHMuanBnLTFgcC1mbHWinS3SlB8AP0AAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABSAAAAAAAAAAAAAAAAAAABBZHJ0AAAAAAAAAA==';
             return request.fulfill({
@@ -306,8 +334,12 @@ export class DuckPlayerPage {
         await expect(this.page.locator('iframe')).toHaveAttribute('src', expected);
     }
 
-    async hasShownErrorMessage() {
-        await expect(this.page.getByText('ERROR: Invalid video id')).toBeVisible();
+    /**
+     * 
+     * @param {string} text 
+     */
+    async hasShownErrorMessage(text = 'ERROR: Invalid video id') {
+        await expect(this.page.getByText(text)).toBeVisible();
     }
 
     async hasNotAddedIframe() {

special-pages/pages/duckplayer/integration-tests/duckplayer.spec.js

@@ -39,6 +39,16 @@ test.describe('duckplayer iframe', () => {
         await duckplayer.openWithVideoID('UNSUPPORTED');
         await duckplayer.opensInYoutubeFromError({ videoID: 'UNSUPPORTED' });
     });
+    test('supports "watch on youtube" for videos that require sign-in', async ({ page }, workerInfo) => {
+        const duckplayer = DuckPlayerPage.create(page, workerInfo);
+        await duckplayer.openWithVideoID('SIGN_IN_REQUIRED');
+        await duckplayer.opensInYoutubeFromError({ videoID: 'SIGN_IN_REQUIRED' });
+    });
+    test('shows error screen for videos that require sign-in', async ({ page }, workerInfo) => {
+        const duckplayer = DuckPlayerPage.create(page, workerInfo);
+        await duckplayer.openWithVideoID('SIGN_IN_REQUIRED');
+        await duckplayer.hasShownErrorMessage('ERROR: Bot detected');
+    });
     test('clears storage', async ({ page }, workerInfo) => {
         const duckplayer = DuckPlayerPage.create(page, workerInfo);
         await duckplayer.openWithVideoID();