duckduckgo · mgurgel · Feb 20, 2025 · Jan 15, 2025 · Jan 15, 2025 · Jan 16, 2025
@@ -15,7 +15,7 @@
     text-decoration: none;
 
     [data-layout="mobile"] & {
-        background-color: #2f2f2f;
+        background-color: rgba(255, 255, 255, 0.12);
     }
 }
 

@@ -14,6 +14,7 @@ import { Settings } from '../settings.js';
 import { EmbedSettings } from '../embed-settings.js';
 import { SwitchBarDesktop } from './SwitchBarDesktop.jsx';
 import { SwitchProvider } from '../providers/SwitchProvider.jsx';
+import { YouTubeError } from './YouTubeError';
 
 export function Components() {
     const settings = new Settings({
@@ -81,6 +82,26 @@ export function Components() {
                 </SettingsProvider>
                 <br />
 
+                <SettingsProvider settings={settings}>
+                    <PlayerContainer>
+                        <YouTubeError layout={'desktop'} kind={'sign-in-required'} />
+                        <InfoBarContainer>
+                            <InfoBar embed={embed} />
+                        </InfoBarContainer>
+                    </PlayerContainer>
+                </SettingsProvider>
+                <br />
+
+                <SettingsProvider settings={settings}>
+                    <PlayerContainer>
+                        <YouTubeError layout={'desktop'} kind={'no-embed'} />
+                        <InfoBarContainer>
+                            <InfoBar embed={embed} />
+                        </InfoBarContainer>
+                    </PlayerContainer>
+                </SettingsProvider>
+                <br />
+
                 <h2>
                     <code>inset=true (mobile)</code>
                 </h2>
@@ -90,7 +111,22 @@ export function Components() {
                         <SwitchBarMobile platformName={'ios'} />
                     </PlayerInternal>
                 </PlayerContainer>
+                <br />
 
+                <PlayerContainer inset>
+                    <PlayerInternal inset>
+                        <YouTubeError layout={'mobile'} kind={'sign-in-required'} />
+                        <SwitchBarMobile platformName={'ios'} />
+                    </PlayerInternal>
+                </PlayerContainer>
+                <br />
+
+                <PlayerContainer inset>
+                    <PlayerInternal inset>
+                        <YouTubeError layout={'mobile'} kind={'no-embed'} />
+                        <SwitchBarMobile platformName={'ios'} />
+                    </PlayerInternal>
+                </PlayerContainer>
                 <br />
             </main>
         </>

@@ -1,4 +1,5 @@
 .main {
+    background-color: #000;
     color: white;
     max-width: 3840px;
     margin: 0 auto;

@@ -3,9 +3,11 @@ import styles from './DesktopApp.module.css';
 import { InfoBar, InfoBarContainer } from './InfoBar.jsx';
 import { PlayerContainer } from './PlayerContainer.jsx';
 import { Player, PlayerError } from './Player.jsx';
+import { YouTubeError } from './YouTubeError';
 import { useSettings } from '../providers/SettingsProvider.jsx';
 import { createAppFeaturesFrom } from '../features/app.js';
 import { HideInFocusMode } from './FocusMode.jsx';
+import { useYouTubeError } from '../providers/YouTubeErrorProvider';
 
 /**
  * @param {object} props
@@ -14,10 +16,12 @@ import { HideInFocusMode } from './FocusMode.jsx';
 export function DesktopApp({ embed }) {
     const settings = useSettings();
     const features = createAppFeaturesFrom(settings);
+    const youtubeError = useYouTubeError();
+
     return (
         <>
             {features.focusMode()}
-            <main class={styles.app}>
+            <main class={styles.app} data-youtube-error={!!youtubeError}>
                 <DesktopLayout embed={embed} />
             </main>
         </>
@@ -29,11 +33,16 @@ export function DesktopApp({ embed }) {
  * @param {import("../embed-settings.js").EmbedSettings|null} props.embed
  */
 function DesktopLayout({ embed }) {
+    const youtubeError = useYouTubeError();
+    const settings = useSettings();
+    const showCustomError = youtubeError && settings.customError?.state === 'enabled';
+
     return (
         <div class={styles.desktop}>
             <PlayerContainer>
                 {embed === null && <PlayerError layout={'desktop'} kind={'invalid-id'} />}
-                {embed !== null && <Player src={embed.toEmbedUrl()} layout={'desktop'} />}
+                {embed !== null && showCustomError && <YouTubeError layout={'desktop'} kind={youtubeError} />}
+                {embed !== null && !showCustomError && <Player src={embed.toEmbedUrl()} layout={'desktop'} />}
                 <HideInFocusMode style={'slide'}>
                     <InfoBarContainer>
                         <InfoBar embed={embed} />

@@ -2,6 +2,7 @@ import { h, Fragment } from 'preact';
 import cn from 'classnames';
 import styles from './MobileApp.module.css';
 import { Player, PlayerError } from './Player.jsx';
+import { YouTubeError } from './YouTubeError';
 import { usePlatformName, useSettings } from '../providers/SettingsProvider.jsx';
 import { SwitchBarMobile } from './SwitchBarMobile.jsx';
 import { MobileWordmark } from './Wordmark.jsx';
@@ -11,6 +12,7 @@ import { MobileButtons } from './MobileButtons.jsx';
 import { OrientationProvider } from '../providers/OrientationProvider.jsx';
 import { FocusMode } from './FocusMode.jsx';
 import { useTelemetry } from '../types.js';
+import { useYouTubeError } from '../providers/YouTubeErrorProvider';
 
 const DISABLED_HEIGHT = 450;
 
@@ -21,12 +23,16 @@ const DISABLED_HEIGHT = 450;
 export function MobileApp({ embed }) {
     const settings = useSettings();
     const telemetry = useTelemetry();
+    const youtubeError = useYouTubeError();
+
     const features = createAppFeaturesFrom(settings);
     return (
         <>
-            {features.focusMode()}
+            {!youtubeError && features.focusMode()}
             <OrientationProvider
                 onChange={(orientation) => {
+                    if (youtubeError) return;
+
                     if (orientation === 'portrait') {
                         return FocusMode.enable();
                     }
@@ -51,12 +57,17 @@ export function MobileApp({ embed }) {
  */
 function MobileLayout({ embed }) {
     const platformName = usePlatformName();
+    const youtubeError = useYouTubeError();
+    const settings = useSettings();
+    const showCustomError = youtubeError && settings.customError?.state === 'enabled';
+
     return (
-        <main class={styles.main}>
+        <main class={styles.main} data-youtube-error={!!youtubeError}>
             <div class={cn(styles.filler, styles.hideInFocus)} />
             <div class={styles.embed}>
                 {embed === null && <PlayerError layout={'mobile'} kind={'invalid-id'} />}
-                {embed !== null && <Player src={embed.toEmbedUrl()} layout={'mobile'} />}
+                {embed !== null && showCustomError && <YouTubeError layout={'mobile'} kind={youtubeError} />}
+                {embed !== null && !showCustomError && <Player src={embed.toEmbedUrl()} layout={'mobile'} />}
             </div>
             <div class={cn(styles.logo, styles.hideInFocus)}>
                 <MobileWordmark />

@@ -34,6 +34,8 @@ html[data-focus-mode="on"] .hideInFocus {
     --inner-radius: 12px;
     --logo-width: 157px;
     --inner-padding: 8px;
+    --mobile-buttons-padding: 8px;
+
     position: relative;
     max-width: 100vh;
     margin: 0 auto;
@@ -113,6 +115,16 @@ body:has([data-state="completed"] [aria-checked="true"]) .switch {
     height: 44px;
 }
 
+.detachedControls {
+    grid-area: detached;
+    display: flex;
+    flex-flow: column;
+    gap: 8px;
+    padding: 8px;
+    background: #2f2f2f;
+    border-radius: 12px;
+}
+
 @media screen and (min-width: 425px) and (max-height: 600px) {
     .main {
         /* reset logo positioning */
@@ -222,3 +234,113 @@ body:has([data-state="completed"] [aria-checked="true"]) .switch {
         justify-content: end;
     }
 }
+
+/* Different layout for YouTube Errors on mobile */
+.main[data-youtube-error="true"] {
+    @media screen and (max-width: 599px) {
+        --bg-color: transparent;
+        --inner-padding: 4px;
+
+        grid-template-areas:
+            'logo'
+            'gap3'
+            'embed'
+            'gap4'
+            'switch'
+            'buttons';
+        grid-template-rows:
+            max-content
+            16px
+            auto
+            12px
+            max-content
+            max-content;
+
+        & .embed {
+            background: #2f2f2f;
+            border-radius: var(--outer-radius);
+            padding: 4px;
+        }
+
+        & .switch {
+            background: #2f2f2f;
+            padding: 8px 8px 0 8px;
+            height: 60px;
+            max-height: 60px;
+            border-top-left-radius: var(--outer-radius);
+            border-top-right-radius: var(--outer-radius);
+
+            transition: all 0.3s;
+        }
+
+        & .buttons {
+            background: #2f2f2f;
+            padding: 8px;
+
+            transition: all 0.3s;
+        }
+
+        &:has([data-state="completed"]) {
+            & .buttons {
+                border-radius: var(--outer-radius);
+            }
+
+            & .switch {
+                background: transparent;
+                max-height: 0;
+            }
+        }
+    }
+
+    /* Hide chrome on smaller screens */
+    @media screen and (max-width: 599px) and (max-height: 599px) {
+        max-width: unset;
+
+        grid-template-rows:
+            0
+            0
+            auto
+            12px
+            0
+            max-content;
+
+        & .logo,
+        & .switch {
+            display: none;
+        }
+
+        & .buttons {
+            border-radius: var(--outer-radius);
+        }
+    }
+
+    /* Show buttons on landscape */
+    @media screen and (min-width: 600px) and (max-height: 450px) {
+        grid-template-areas:
+            'embed'
+            'buttons'
+            'gap5';
+
+        grid-template-rows:
+            auto
+            max-content
+            8px;
+
+        & .buttons {
+            border-radius: var(--outer-radius);
+            display: block;
+        }
+    }
+
+    /* Sticky buttons on very low heights */
+    @media screen and (max-height: 320px) {
+        & .embed {
+            overflow-y: auto;
+        }
+
+        & .buttons {
+            bottom: 0;
+            position: sticky;
+        }
+    }
+}
@@ -102,6 +102,7 @@ function useIframeEffects(src) {
             features.clickCapture(),
             features.titleCapture(),
             features.mouseCapture(),
+            features.errorDetection(),
         ];
 
         /**

@@ -1,7 +1,7 @@
 .switchBar {
     display: grid;
     border-radius: 8px;
-    background: #2f2f2f;
+    background: rgba(255, 255, 255, 0.12);
     padding-inline: 16px;
     height: 100%;
     line-height: 1.1;

@@ -11,6 +11,13 @@
     .logo {
         height: 100px;
     }
+
+    /* TODO: Can this be moved somewhere else? */
+    [data-youtube-error="true"] {
+        & .logo {
+            height: 44px;
+        }
+    }
 }
 .logoSvg img {
     display: block;