Release build 9.9.0 [ci release]

Author: mgurgel

CHANGELOG.txt

@@ -1,4 +1 @@
-- Fix config schema tests (#1752)
-- onboarding: updated assets and copy (#1718)
-- fix:  NTP Privacy Stats widget number formatting (#1735)
-- build(deps-dev): bump the typescript group across 1 directory with 2 updates (#1743)
+- Duck Player: Add support for new YouTube Player UI links (#1753)

Sources/ContentScopeScripts/dist/pages/duckplayer/dist/index.js

@@ -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>

Sources/ContentScopeScripts/dist/pages/duckplayer/index.html

@@ -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} />

build/android/pages/duckplayer/dist/index.js

@@ -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 />

build/integration/pages/duckplayer/dist/index.js

@@ -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) };
 }