Duck Player: Add support for new YouTube Player UI links (#1753)

Author: mgurgel

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

@@ -22,7 +22,7 @@ export function Components() {
         platform: { name: 'macos' },
         customError: { state: 'enabled' },
     });
-    let embed = EmbedSettings.fromHref('https://localhost?videoID=123');
+    let embed = /** @type {EmbedSettings} */ (EmbedSettings.fromHref('https://localhost?videoID=123'));
     let url = embed?.toEmbedUrl();
     if (!url) throw new Error('unreachable');
     return (
@@ -76,7 +76,7 @@ export function Components() {
                 </h2>
                 <SettingsProvider settings={settings}>
                     <PlayerContainer>
-                        <Player src={url} layout={'desktop'} />
+                        <Player src={url} layout={'desktop'} embed={embed} />
                         <InfoBarContainer>
                             <InfoBar embed={embed} />
                         </InfoBarContainer>

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

@@ -40,7 +40,7 @@ function DesktopLayout({ embed }) {
             <PlayerContainer>
                 {embed === null && <PlayerError layout={'desktop'} kind={'invalid-id'} />}
                 {embed !== null && showCustomError && <YouTubeError layout={'desktop'} embed={embed} />}
-                {embed !== null && !showCustomError && <Player src={embed.toEmbedUrl()} layout={'desktop'} />}
+                {embed !== null && !showCustomError && <Player src={embed.toEmbedUrl()} layout={'desktop'} embed={embed} />}
                 <HideInFocusMode style={'slide'}>
                     <InfoBarContainer>
                         <InfoBar embed={embed} />

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

@@ -24,8 +24,8 @@ export function MobileApp({ embed }) {
     const settings = useSettings();
     const telemetry = useTelemetry();
     const showCustomError = useShowCustomError();
-
     const features = createAppFeaturesFrom(settings);
+
     return (
         <>
             {!showCustomError && features.focusMode()}
@@ -65,7 +65,7 @@ function MobileLayout({ embed }) {
             <div class={styles.embed}>
                 {embed === null && <PlayerError layout={'mobile'} kind={'invalid-id'} />}
                 {embed !== null && showCustomError && <YouTubeError layout={'mobile'} embed={embed} />}
-                {embed !== null && !showCustomError && <Player src={embed.toEmbedUrl()} layout={'mobile'} />}
+                {embed !== null && !showCustomError && <Player src={embed.toEmbedUrl()} layout={'mobile'} embed={embed} />}
             </div>
             <div class={cn(styles.logo, styles.hideInFocus)}>
                 <MobileWordmark />

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

@@ -2,20 +2,25 @@ import { h } from 'preact';
 import cn from 'classnames';
 import styles from './Player.module.css';
 import { useEffect, useRef } from 'preact/hooks';
-import { useSettings } from '../providers/SettingsProvider.jsx';
+import { useSettings, useOpenOnYoutubeHandler } from '../providers/SettingsProvider.jsx';
 import { createIframeFeatures } from '../features/iframe.js';
 import { Settings } from '../settings';
 import { useTypedTranslation } from '../types.js';
 
+/**
+ * @import {EmbedSettings} from '../embed-settings.js';
+ */
+
 /**
  * Player component renders an embedded media player.
  *
  * @param {object} props
  * @param {string} props.src - The source URL of the media to be played.
  * @param {Settings['layout']} props.layout
+ * @param {EmbedSettings} props.embed
  */
-export function Player({ src, layout }) {
-    const { ref, didLoad } = useIframeEffects(src);
+export function Player({ src, layout, embed }) {
+    const { ref, didLoad } = useIframeEffects(src, embed);
     const wrapperClasses = cn({
         [styles.root]: true,
         [styles.player]: true,
@@ -80,20 +85,22 @@ export function PlayerError({ kind, layout }) {
  * When either event occurs, we proceed to apply our list of features.
  *
  * @param {string} src - the iframe `src` attribute
+ * @param {EmbedSettings} embed
  * @return {{
  *   ref: import("preact/hooks").MutableRef<HTMLIFrameElement|null>,
  *   didLoad: () => void
  * }}
  */
-function useIframeEffects(src) {
+function useIframeEffects(src, embed) {
     const ref = useRef(/** @type {HTMLIFrameElement|null} */ (null));
     const didLoad = useRef(/** @type {boolean} */ (false));
     const settings = useSettings();
+    const openOnYoutube = useOpenOnYoutubeHandler();
 
     useEffect(() => {
         if (!ref.current) return;
         const iframe = ref.current;
-        const features = createIframeFeatures(settings);
+        const features = createIframeFeatures(settings, embed);
 
         /** @type {import("../features/iframe.js").IframeFeature[]} */
         const iframeFeatures = [
@@ -103,6 +110,7 @@ function useIframeEffects(src) {
             features.titleCapture(),
             features.mouseCapture(),
             features.errorDetection(),
+            features.replaceWatchLinks(() => openOnYoutube(embed)),
         ];
 
         /**
@@ -131,7 +139,7 @@ function useIframeEffects(src) {
             }
             iframe.removeEventListener('load', loadHandler);
         };
-    }, [src, settings]);
+    }, [src, settings, embed]);
 
     return { ref, didLoad: () => (didLoad.current = true) };
 }

special-pages/pages/duckplayer/app/features/iframe.js

@@ -4,6 +4,11 @@ import { ClickCapture } from './click-capture.js';
 import { TitleCapture } from './title-capture.js';
 import { MouseCapture } from './mouse-capture.js';
 import { ErrorDetection } from './error-detection.js';
+import { ReplaceWatchLinks } from './replace-watch-links.js';
+
+/**
+ * @import {EmbedSettings} from '../embed-settings.js';
+ */
 
 /**
  * Represents an individual piece of functionality in the iframe.
@@ -36,9 +41,9 @@ export class IframeFeature {
  * global `Settings`
  *
  * @param {import("../settings").Settings} settings
- * @returns {Record<string, () => IframeFeature>}
+ * @param {EmbedSettings} embed
  */
-export function createIframeFeatures(settings) {
+export function createIframeFeatures(settings, embed) {
     return {
         /**
          * @return {IframeFeature}
@@ -81,5 +86,12 @@ export function createIframeFeatures(settings) {
         errorDetection: () => {
             return new ErrorDetection(settings.customError);
         },
+        /**
+         * @param {() => void} handler - what to invoke when a watch-link was clicked
+         * @return {IframeFeature}
+         */
+        replaceWatchLinks: (handler) => {
+            return new ReplaceWatchLinks(embed.videoId.id, handler);
+        },
     };
 }

special-pages/pages/duckplayer/app/features/replace-watch-links.js

@@ -0,0 +1,64 @@
+/**
+ * @typedef {import("./iframe").IframeFeature} IframeFeature
+ */
+
+import { VideoParams } from 'injected/src/features/duckplayer/util';
+
+/**
+ * @implements IframeFeature
+ */
+export class ReplaceWatchLinks {
+    /**
+     * @param {string} videoId
+     * @param {() => void} handler - what to invoke when a watch-link was clicked
+     */
+    constructor(videoId, handler) {
+        this.videoId = videoId;
+        this.handler = handler;
+    }
+    /**
+     * @param {HTMLIFrameElement} iframe
+     */
+    iframeDidLoad(iframe) {
+        const doc = iframe.contentDocument;
+        const win = iframe.contentWindow;
+
+        if (!doc) {
+            console.log('could not access contentDocument');
+            return () => {};
+        }
+
+        if (win && doc) {
+            doc.addEventListener(
+                'click',
+                (e) => {
+                    if (!(e.target instanceof /** @type {any} */ (win).Element)) return;
+
+                    /** @type {HTMLLinkElement|null} */
+                    const closestLink = /** @type {Element} */ (e.target).closest('a[href]');
+                    if (closestLink && this.isWatchLink(closestLink.href)) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        this.handler();
+                    }
+                },
+                {
+                    capture: true,
+                },
+            );
+        } else {
+            console.warn('could not access iframe?.contentWindow && iframe?.contentDocument');
+        }
+
+        return null;
+    }
+
+    /**
+     * @param {string} href
+     * @return {boolean}
+     */
+    isWatchLink(href) {
+        const videoParams = VideoParams.forWatchPage(href);
+        return videoParams?.id === this.videoId;
+    }
+}

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

@@ -3,10 +3,13 @@ import { createContext } from 'preact';
 import { Settings } from '../settings';
 import { useContext } from 'preact/hooks';
 import { useMessaging } from '../types.js';
-import { EmbedSettings } from '../embed-settings';
 
 const SettingsContext = createContext(/** @type {{settings: Settings}} */ ({}));
 
+/**
+ * @import {EmbedSettings} from '../embed-settings.js';
+ */
+
 /**
  * @param {object} params
  * @param {Settings} params.settings