Enables Duck Player custom error on all platforms (#1535)

This is a breaking change for Windows and Android.

Author: mgurgel

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

@@ -3,7 +3,7 @@ import { YOUTUBE_ERROR_EVENT, YOUTUBE_ERRORS } from '../providers/YouTubeErrorPr
 /**
  * @typedef {import("./iframe").IframeFeature} IframeFeature
  * @typedef {import('../../types/duckplayer').YouTubeError} YouTubeError
- * @typedef {import('../../types/duckplayer').DuckPlayerPageSettings['customError']} CustomErrorOptions
+ * @typedef {import('../../types/duckplayer').CustomErrorSettings} CustomErrorSettings
  */
 
 /**
@@ -15,11 +15,11 @@ export class ErrorDetection {
     /** @type {HTMLIFrameElement} */
     iframe;
 
-    /** @type {CustomErrorOptions} */
+    /** @type {CustomErrorSettings} */
     options;
 
     /**
-     * @param {CustomErrorOptions} options
+     * @param {CustomErrorSettings} options
      */
     constructor(options) {
         this.options = options;
@@ -31,8 +31,8 @@ export class ErrorDetection {
     iframeDidLoad(iframe) {
         this.iframe = iframe;
 
-        if (!this.options || !this.options.signInRequiredSelector) {
-            console.log('Missing Custom Error options');
+        if (this.options?.state !== 'enabled') {
+            console.log('Error detection disabled');
             return null;
         }
 
@@ -115,7 +115,8 @@ export class ErrorDetection {
 
             // 2. Check for sign-in support link
             try {
-                if (this.options?.signInRequiredSelector && !!iframeWindow.document.querySelector(this.options.signInRequiredSelector)) {
+                const { settings } = this.options;
+                if (settings?.signInRequiredSelector && !!iframeWindow.document.querySelector(settings.signInRequiredSelector)) {
                     return YOUTUBE_ERRORS.signInRequired;
                 }
             } catch (e) {

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

@@ -41,7 +41,6 @@ export function YouTubeErrorProvider({ initial = null, children }) {
     const [error, setError] = useState(initialError);
 
     const messaging = useMessaging();
-    const platformName = usePlatformName();
     const setFocusMode = useSetFocusMode();
 
     // listen for updates
@@ -52,9 +51,7 @@ export function YouTubeErrorProvider({ initial = null, children }) {
             if (YOUTUBE_ERROR_IDS.includes(eventError) || eventError === null) {
                 if (eventError && eventError !== error) {
                     setFocusMode('paused');
-                    if (platformName === 'macos' || platformName === 'ios') {
-                        messaging.reportYouTubeError({ error: eventError });
-                    }
+                    messaging.reportYouTubeError({ error: eventError });
                 } else {
                     setFocusMode('enabled');
                 }

special-pages/pages/duckplayer/app/settings.js

@@ -7,20 +7,56 @@ export class Settings {
      * @param {{state: 'enabled' | 'disabled'}} [params.pip]
      * @param {{state: 'enabled' | 'disabled'}} [params.autoplay]
      * @param {{state: 'enabled' | 'disabled'}} [params.focusMode]
-     * @param {import("../types/duckplayer.js").InitialSetupResponse['settings']['customError']} [params.customError]
+     * @param {import("../types/duckplayer.js").DuckPlayerPageSettings['customError']} [params.customError]
      */
     constructor({
         platform = { name: 'macos' },
         pip = { state: 'disabled' },
         autoplay = { state: 'enabled' },
         focusMode = { state: 'enabled' },
-        customError = { state: 'disabled', signInRequiredSelector: '' },
+        customError = { state: 'disabled', settings: {}, signInRequiredSelector: '' },
     }) {
         this.platform = platform;
         this.pip = pip;
         this.autoplay = autoplay;
         this.focusMode = focusMode;
-        this.customError = customError;
+        this.customError = this.parseLegacyCustomError(customError);
+    }
+
+    /**
+     * Parses custom error settings so that both old and new schemas are accepted.
+     *
+     * Old schema:
+     * {
+     *   state: "enabled",
+     *   signInRequiredSelector: "div"
+     * }
+     *
+     * New schema:
+     * {
+     *   state: "disabled",
+     *   settings: {
+     *     signInRequiredSelector: "div"
+     *   }
+     * }
+     *
+     * @param {import("../types/duckplayer.js").DuckPlayerPageSettings['customError']} initialSettings
+     * @return {import("../types/duckplayer.js").CustomErrorSettings}
+     */
+    parseLegacyCustomError(initialSettings) {
+        if (initialSettings?.state !== 'enabled') {
+            return { state: 'disabled' };
+        }
+
+        const { settings, signInRequiredSelector } = initialSettings;
+
+        return {
+            state: 'enabled',
+            settings: {
+                ...settings,
+                ...(signInRequiredSelector && { signInRequiredSelector }),
+            },
+        };
     }
 
     /**

special-pages/pages/duckplayer/messages/customErrorSettings.shared.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "CustomErrorSettings",
+  "type": "object",
+  "description": "Configures a custom error message for YouTube errors",
+  "required": ["state"],
+  "properties": {
+    "state": {
+      "type": "string",
+      "enum": ["enabled", "disabled"]
+    },
+    "settings": {
+      "type": "object",
+      "description": "Custom error settings",
+      "properties": {
+        "signInRequiredSelector": {
+          "description": "A selector that, when not empty, indicates a sign-in required error",
+          "type": "string"
+        }
+      }
+    }
+  }
+}

special-pages/pages/duckplayer/messages/initialSetup.response.json

@@ -40,19 +40,18 @@
           }
         },
         "customError": {
-          "type": "object",
-          "description": "Configures a custom error message for YouTube errors",
-          "required": ["state", "signInRequiredSelector"],
-          "properties": {
-            "state": {
-              "type": "string",
-              "enum": ["enabled", "disabled"]
-            },
-            "signInRequiredSelector": {
-              "description": "A selector that, when not empty, indicates a sign-in required error",
-              "type": "string"
+          "allOf": [
+            { "$ref": "customErrorSettings.shared.json" },
+            {
+              "properties": {
+                "signInRequiredSelector": {
+                  "type": "string",
+                  "description": "A selector that, when not empty, indicates a sign-in required error",
+                  "$comment": "This setting is duplicated at the top level until Apple and Windows are migrated to the settings object above"
+                }
+              }
             }
-          }
+          ]
         }
       }
     },

special-pages/pages/duckplayer/types/duckplayer.ts

@@ -129,15 +129,26 @@ export interface DuckPlayerPageSettings {
   focusMode?: {
     state: "enabled" | "disabled";
   };
+  customError?: CustomErrorSettings & {
+    /**
+     * A selector that, when not empty, indicates a sign-in required error
+     */
+    signInRequiredSelector?: string;
+  };
+}
+/**
+ * Configures a custom error message for YouTube errors
+ */
+export interface CustomErrorSettings {
+  state: "enabled" | "disabled";
   /**
-   * Configures a custom error message for YouTube errors
+   * Custom error settings
    */
-  customError?: {
-    state: "enabled" | "disabled";
+  settings?: {
     /**
      * A selector that, when not empty, indicates a sign-in required error
      */
-    signInRequiredSelector: string;
+    signInRequiredSelector?: string;
   };
 }
 /**

special-pages/pages/duckplayer/unit-tests/settings.mjs

@@ -0,0 +1,78 @@
+import { describe, it } from 'node:test';
+import { deepEqual } from 'node:assert/strict';
+import { Settings } from '../app/settings.js';
+
+describe('parses settings', () => {
+    it('handles disabled custom error schema', () => {
+        const settings = new Settings({
+            customError: {
+                state: 'disabled',
+            },
+        });
+        const expected = {
+            state: 'disabled',
+        };
+
+        deepEqual(settings.customError, expected);
+    });
+    it('handles old custom error schema', () => {
+        const settings = new Settings({
+            customError: {
+                state: 'enabled',
+                signInRequiredSelector: 'div',
+            },
+        });
+        const expected = {
+            state: 'enabled',
+            settings: {
+                signInRequiredSelector: 'div',
+            },
+        };
+
+        deepEqual(settings.customError, expected);
+    });
+    it('handles new custom error schema', () => {
+        const settings = new Settings({
+            customError: {
+                state: 'enabled',
+                settings: {
+                    signInRequiredSelector: 'div',
+                },
+            },
+        });
+        const expected = {
+            state: 'enabled',
+            settings: {
+                signInRequiredSelector: 'div',
+            },
+        };
+
+        deepEqual(settings.customError, expected);
+    });
+    it('handles custom error enabled without settings', () => {
+        const settings = new Settings({
+            customError: {
+                state: 'enabled',
+            },
+        });
+        const expected = {
+            state: 'enabled',
+            settings: {},
+        };
+
+        deepEqual(settings.customError, expected);
+    });
+    it('handles malformed custom error schema', () => {
+        const settings = new Settings({
+            customError: {
+                // @ts-expect-error - Malformed object on purpose
+                status: 'enabled',
+            },
+        });
+        const expected = {
+            state: 'disabled',
+        };
+
+        deepEqual(settings.customError, expected);
+    });
+});