Error detection

Author: mgurgel

injected/src/features/duckplayer-native/duckplayer-native.js

@@ -1,7 +1,8 @@
-import { getCurrentTimestamp } from './getCurrentTimestamp.js';
-import { mediaControl } from './mediaControl.js';
-import { muteAudio } from './muteAudio.js';
-import { serpNotify } from './serpNotify.js';
+import { getCurrentTimestamp } from './get-current-timestamp.js';
+import { mediaControl } from './media-control.js';
+import { muteAudio } from './mute-audio.js';
+import { serpNotify } from './serp-notify.js';
+import { ErrorDetection } from './error-detection.js';
 
 /**
  *
@@ -11,6 +12,9 @@ import { serpNotify } from './serpNotify.js';
 export async function initDuckPlayerNative(messages) {
     /** @type {import("../duck-player-native.js").InitialSettings} */
     let initialSetup;
+    /** @type {(() => void|null)[]} */
+    const sideEffects = [];
+
     try {
         initialSetup = await messages.initialSetup();
     } catch (e) {
@@ -42,4 +46,13 @@ export async function initDuckPlayerNative(messages) {
         console.log('SERP PROXY');
         serpNotify();
     });
+
+    /* Start error detection */
+    const errorDetection = new ErrorDetection(messages);
+    const destroy = errorDetection.observe();
+    if (destroy) sideEffects.push(destroy);
+
+    return async () => {
+        return await Promise.all(sideEffects.map((destroy) => destroy()));
+    };
 }

injected/src/features/duckplayer-native/error-detection.js

@@ -0,0 +1,132 @@
+/** @typedef {"age-restricted" | "sign-in-required" | "no-embed" | "unknown"} YouTubeError */
+
+/** @type {Record<string,YouTubeError>} */
+export const YOUTUBE_ERRORS = {
+    ageRestricted: 'age-restricted',
+    signInRequired: 'sign-in-required',
+    noEmbed: 'no-embed',
+    unknown: 'unknown',
+};
+
+/**
+ * Detects YouTube errors based on DOM queries
+ */
+export class ErrorDetection {
+    /** @type {import('./native-messages.js').DuckPlayerNativeMessages} */
+    messages;
+
+    constructor(messages) {
+        this.messages = messages;
+        this.settings = {
+            // TODO: Get settings from native
+            signInRequiredSelector: '[href*="//support.google.com/youtube/answer/3037019"]',
+        };
+        this.observe();
+    }
+
+    observe() {
+        console.log('Setting up error detection...');
+        const documentBody = document?.body;
+        if (documentBody) {
+            // Check if iframe already contains error
+            if (this.checkForError(documentBody)) {
+                const error = this.getErrorType();
+                this.messages.onYoutubeError(error);
+                return null;
+            }
+
+            // Create a MutationObserver instance
+            const observer = new MutationObserver(this.handleMutation.bind(this));
+
+            // Start observing the iframe's document for changes
+            observer.observe(documentBody, {
+                childList: true,
+                subtree: true, // Observe all descendants of the body
+            });
+
+            return () => {
+                observer.disconnect();
+            };
+        }
+
+        return null;
+    }
+
+    /**
+     * Mutation handler that checks new nodes for error states
+     *
+     * @type {MutationCallback}
+     */
+    handleMutation(mutationsList) {
+        for (const mutation of mutationsList) {
+            if (mutation.type === 'childList') {
+                mutation.addedNodes.forEach((node) => {
+                    if (this.checkForError(node)) {
+                        console.log('A node with an error has been added to the document:', node);
+                        const error = this.getErrorType();
+                        this.messages.onYoutubeError(error);
+                    }
+                });
+            }
+        }
+    }
+
+    /**
+     * Attempts to detect the type of error in the YouTube embed iframe
+     * @returns {YouTubeError}
+     */
+    getErrorType() {
+        const currentWindow = /** @type {Window & typeof globalThis & { ytcfg: object }} */ (window);
+        let playerResponse;
+
+        try {
+            playerResponse = JSON.parse(currentWindow.ytcfg?.get('PLAYER_VARS')?.embedded_player_response);
+        } catch (e) {
+            console.log('Could not parse player response', e);
+        }
+
+        if (typeof playerResponse === 'object') {
+            const {
+                previewPlayabilityStatus: { desktopLegacyAgeGateReason, status },
+            } = playerResponse;
+
+            // 1. Check for UNPLAYABLE status
+            if (status === 'UNPLAYABLE') {
+                // 1.1. Check for presence of desktopLegacyAgeGateReason
+                if (desktopLegacyAgeGateReason === 1) {
+                    return YOUTUBE_ERRORS.ageRestricted;
+                }
+
+                // 1.2. Fall back to embed not allowed error
+                return YOUTUBE_ERRORS.noEmbed;
+            }
+
+            // 2. Check for sign-in support link
+            try {
+                if (this.settings?.signInRequiredSelector && !!document.querySelector(this.settings.signInRequiredSelector)) {
+                    return YOUTUBE_ERRORS.signInRequired;
+                }
+            } catch (e) {
+                console.log('Sign-in required query failed', e);
+            }
+        }
+
+        // 3. Fall back to unknown error
+        return YOUTUBE_ERRORS.unknown;
+    }
+
+    /**
+     * Analyses a node and its children to determine if it contains an error state
+     *
+     * @param {Node} [node]
+     */
+    checkForError(node) {
+        if (node?.nodeType === Node.ELEMENT_NODE) {
+            const element = /** @type {HTMLElement} */ (node);
+            // Check if element has the error class or contains any children with that class
+            return element.classList.contains('ytp-error') || !!element.querySelector('.ytp-error');
+        }
+
+        return false;
+    }
+}

…duckplayer-native/getCurrentTimestamp.js …ckplayer-native/get-current-timestamp.jsinjected/src/features/duckplayer-native/getCurrentTimestamp.js renamed to injected/src/features/duckplayer-native/get-current-timestamp.js injected/src/features/duckplayer-native/getCurrentTimestamp.js renamed to injected/src/features/duckplayer-native/get-current-timestamp.js

@@ -68,4 +68,12 @@ export class DuckPlayerNativeMessages {
     onSerpNotify(callback) {
         return this.messaging.subscribe('onSerpNotify', callback);
     }
+
+    /**
+     * Notifies browser of YouTube error
+     * @param {string} error
+     */
+    onYoutubeError(error) {
+        this.messaging.notify('onYoutubeError', { error });
+    }
 }