Initial poc

Author: mgurgel

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

@@ -0,0 +1,70 @@
+import { IFRAME_ERROR_EVENT } from '../providers/YouTubeErrorProvider';
+
+/**
+ * @typedef {import("./iframe").IframeFeature} IframeFeature
+ * @typedef {import("../components/Player").PlayerError} PlayerError
+ */
+
+/**
+ * Detects YouTube errors based on DOM queries
+ *
+ * @implements IframeFeature
+ */
+export class ErrorDetection {
+    /**
+     * @param {HTMLIFrameElement} iframe
+     */
+    iframeDidLoad(iframe) {
+        const documentBody = iframe.contentWindow?.document?.body;
+        if (documentBody) {
+            // Create a MutationObserver instance
+            const observer = new MutationObserver(handleMutation);
+
+            // Start observing the iframe's document for changes
+            observer.observe(documentBody, {
+                childList: true,
+                subtree: true, // Observe all descendants of the body
+            });
+        }
+        return null;
+    }
+}
+
+/**
+ * Mutation handler that checks new nodes for error states
+ *
+ * @type {MutationCallback}
+ */
+const handleMutation = (mutationsList) => {
+    for (const mutation of 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);
+                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 }));
+                }
+            });
+        }
+    }
+};
+
+/**
+ * Analyses attributes of a node to determine if it contains an error state
+ *
+ * @param {Node} [node]
+ * @returns {PlayerError|null}
+ */
+const errorForNode = (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';
+        }
+        // Add other error detection logic here
+    }
+    return null;
+};

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

@@ -0,0 +1,44 @@
+import { useContext, useState } from 'preact/hooks';
+import { h, createContext } from 'preact';
+import { useEffect } from 'preact/hooks';
+
+export const IFRAME_ERROR_EVENT = 'iframe-error';
+
+/**
+ * @typedef {import("../components/Player").PlayerError} PlayerError
+ */
+
+const YouTubeErrorContext = createContext({
+    /** @type {PlayerError|null} */
+    error: null,
+});
+
+/**
+ * @param {object} props
+ * @param {PlayerError|null} [props.initial=null]
+ * @param {import("preact").ComponentChild} props.children
+ */
+export function YouTubeErrorProvider({ initial = null, children }) {
+    // initial state
+    const [error, setError] = useState(initial);
+
+    // listen for updates
+    useEffect(() => {
+        /** @type {(event: CustomEvent) => void} */
+        const errorEventHandler = (event) => {
+            if (event.detail) {
+                setError(event.detail.error || null);
+            }
+        };
+
+        window.addEventListener(IFRAME_ERROR_EVENT, errorEventHandler);
+
+        return () => window.removeEventListener(IFRAME_ERROR_EVENT, errorEventHandler);
+    }, []);
+
+    return <YouTubeErrorContext.Provider value={{ error }}>{children}</YouTubeErrorContext.Provider>;
+}
+
+export function useYouTubeError() {
+    return useContext(YouTubeErrorContext).error;
+}