Skip to content

Commit 40c522d

Browse files
mgurgelmgurgel
authored
Custom error messages for Duck Player (#1421)
1 parent 3689594 commit 40c522d

37 files changed

+930
-32
lines changed

‎special-pages/pages/duckplayer/app/components/Button.module.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
text-decoration: none;
1616

1717
[data-layout="mobile"] & {
18-
background-color: #2f2f2f;
18+
background-color: rgba(255, 255, 255, 0.12);
1919
}
2020
}
2121

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

+36
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { Settings } from '../settings.js';
1414
import { EmbedSettings } from '../embed-settings.js';
1515
import { SwitchBarDesktop } from './SwitchBarDesktop.jsx';
1616
import { SwitchProvider } from '../providers/SwitchProvider.jsx';
17+
import { YouTubeError } from './YouTubeError';
1718

1819
export function Components() {
1920
const settings = new Settings({
@@ -81,6 +82,26 @@ export function Components() {
8182
</SettingsProvider>
8283
<br />
8384

85+
<SettingsProvider settings={settings}>
86+
<PlayerContainer>
87+
<YouTubeError layout={'desktop'} kind={'sign-in-required'} />
88+
<InfoBarContainer>
89+
<InfoBar embed={embed} />
90+
</InfoBarContainer>
91+
</PlayerContainer>
92+
</SettingsProvider>
93+
<br />
94+
95+
<SettingsProvider settings={settings}>
96+
<PlayerContainer>
97+
<YouTubeError layout={'desktop'} kind={'no-embed'} />
98+
<InfoBarContainer>
99+
<InfoBar embed={embed} />
100+
</InfoBarContainer>
101+
</PlayerContainer>
102+
</SettingsProvider>
103+
<br />
104+
84105
<h2>
85106
<code>inset=true (mobile)</code>
86107
</h2>
@@ -90,7 +111,22 @@ export function Components() {
90111
<SwitchBarMobile platformName={'ios'} />
91112
</PlayerInternal>
92113
</PlayerContainer>
114+
<br />
93115

116+
<PlayerContainer inset>
117+
<PlayerInternal inset>
118+
<YouTubeError layout={'mobile'} kind={'sign-in-required'} />
119+
<SwitchBarMobile platformName={'ios'} />
120+
</PlayerInternal>
121+
</PlayerContainer>
122+
<br />
123+
124+
<PlayerContainer inset>
125+
<PlayerInternal inset>
126+
<YouTubeError layout={'mobile'} kind={'no-embed'} />
127+
<SwitchBarMobile platformName={'ios'} />
128+
</PlayerInternal>
129+
</PlayerContainer>
94130
<br />
95131
</main>
96132
</>

‎special-pages/pages/duckplayer/app/components/Components.module.css

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
.main {
2+
background-color: #000;
23
color: white;
34
max-width: 3840px;
45
margin: 0 auto;

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

+11-2
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@ import styles from './DesktopApp.module.css';
33
import { InfoBar, InfoBarContainer } from './InfoBar.jsx';
44
import { PlayerContainer } from './PlayerContainer.jsx';
55
import { Player, PlayerError } from './Player.jsx';
6+
import { YouTubeError } from './YouTubeError';
67
import { useSettings } from '../providers/SettingsProvider.jsx';
78
import { createAppFeaturesFrom } from '../features/app.js';
89
import { HideInFocusMode } from './FocusMode.jsx';
10+
import { useYouTubeError } from '../providers/YouTubeErrorProvider';
911

1012
/**
1113
* @param {object} props
@@ -14,10 +16,12 @@ import { HideInFocusMode } from './FocusMode.jsx';
1416
export function DesktopApp({ embed }) {
1517
const settings = useSettings();
1618
const features = createAppFeaturesFrom(settings);
19+
const youtubeError = useYouTubeError();
20+
1721
return (
1822
<>
1923
{features.focusMode()}
20-
<main class={styles.app}>
24+
<main class={styles.app} data-youtube-error={!!youtubeError}>
2125
<DesktopLayout embed={embed} />
2226
</main>
2327
</>
@@ -29,11 +33,16 @@ export function DesktopApp({ embed }) {
2933
* @param {import("../embed-settings.js").EmbedSettings|null} props.embed
3034
*/
3135
function DesktopLayout({ embed }) {
36+
const youtubeError = useYouTubeError();
37+
const settings = useSettings();
38+
const showCustomError = youtubeError && settings.customError?.state === 'enabled';
39+
3240
return (
3341
<div class={styles.desktop}>
3442
<PlayerContainer>
3543
{embed === null && <PlayerError layout={'desktop'} kind={'invalid-id'} />}
36-
{embed !== null && <Player src={embed.toEmbedUrl()} layout={'desktop'} />}
44+
{embed !== null && showCustomError && <YouTubeError layout={'desktop'} kind={youtubeError} />}
45+
{embed !== null && !showCustomError && <Player src={embed.toEmbedUrl()} layout={'desktop'} />}
3746
<HideInFocusMode style={'slide'}>
3847
<InfoBarContainer>
3948
<InfoBar embed={embed} />

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

+14-3
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { h, Fragment } from 'preact';
22
import cn from 'classnames';
33
import styles from './MobileApp.module.css';
44
import { Player, PlayerError } from './Player.jsx';
5+
import { YouTubeError } from './YouTubeError';
56
import { usePlatformName, useSettings } from '../providers/SettingsProvider.jsx';
67
import { SwitchBarMobile } from './SwitchBarMobile.jsx';
78
import { MobileWordmark } from './Wordmark.jsx';
@@ -11,6 +12,7 @@ import { MobileButtons } from './MobileButtons.jsx';
1112
import { OrientationProvider } from '../providers/OrientationProvider.jsx';
1213
import { FocusMode } from './FocusMode.jsx';
1314
import { useTelemetry } from '../types.js';
15+
import { useYouTubeError } from '../providers/YouTubeErrorProvider';
1416

1517
const DISABLED_HEIGHT = 450;
1618

@@ -21,12 +23,16 @@ const DISABLED_HEIGHT = 450;
2123
export function MobileApp({ embed }) {
2224
const settings = useSettings();
2325
const telemetry = useTelemetry();
26+
const youtubeError = useYouTubeError();
27+
2428
const features = createAppFeaturesFrom(settings);
2529
return (
2630
<>
27-
{features.focusMode()}
31+
{!youtubeError && features.focusMode()}
2832
<OrientationProvider
2933
onChange={(orientation) => {
34+
if (youtubeError) return;
35+
3036
if (orientation === 'portrait') {
3137
return FocusMode.enable();
3238
}
@@ -51,12 +57,17 @@ export function MobileApp({ embed }) {
5157
*/
5258
function MobileLayout({ embed }) {
5359
const platformName = usePlatformName();
60+
const youtubeError = useYouTubeError();
61+
const settings = useSettings();
62+
const showCustomError = youtubeError && settings.customError?.state === 'enabled';
63+
5464
return (
55-
<main class={styles.main}>
65+
<main class={styles.main} data-youtube-error={!!youtubeError}>
5666
<div class={cn(styles.filler, styles.hideInFocus)} />
5767
<div class={styles.embed}>
5868
{embed === null && <PlayerError layout={'mobile'} kind={'invalid-id'} />}
59-
{embed !== null && <Player src={embed.toEmbedUrl()} layout={'mobile'} />}
69+
{embed !== null && showCustomError && <YouTubeError layout={'mobile'} kind={youtubeError} />}
70+
{embed !== null && !showCustomError && <Player src={embed.toEmbedUrl()} layout={'mobile'} />}
6071
</div>
6172
<div class={cn(styles.logo, styles.hideInFocus)}>
6273
<MobileWordmark />

‎special-pages/pages/duckplayer/app/components/MobileApp.module.css

+122
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ html[data-focus-mode="on"] .hideInFocus {
3434
--inner-radius: 12px;
3535
--logo-width: 157px;
3636
--inner-padding: 8px;
37+
--mobile-buttons-padding: 8px;
38+
3739
position: relative;
3840
max-width: 100vh;
3941
margin: 0 auto;
@@ -113,6 +115,16 @@ body:has([data-state="completed"] [aria-checked="true"]) .switch {
113115
height: 44px;
114116
}
115117

118+
.detachedControls {
119+
grid-area: detached;
120+
display: flex;
121+
flex-flow: column;
122+
gap: 8px;
123+
padding: 8px;
124+
background: #2f2f2f;
125+
border-radius: 12px;
126+
}
127+
116128
@media screen and (min-width: 425px) and (max-height: 600px) {
117129
.main {
118130
/* reset logo positioning */
@@ -222,3 +234,113 @@ body:has([data-state="completed"] [aria-checked="true"]) .switch {
222234
justify-content: end;
223235
}
224236
}
237+
238+
/* Different layout for YouTube Errors on mobile */
239+
.main[data-youtube-error="true"] {
240+
@media screen and (max-width: 599px) {
241+
--bg-color: transparent;
242+
--inner-padding: 4px;
243+
244+
grid-template-areas:
245+
'logo'
246+
'gap3'
247+
'embed'
248+
'gap4'
249+
'switch'
250+
'buttons';
251+
grid-template-rows:
252+
max-content
253+
16px
254+
auto
255+
12px
256+
max-content
257+
max-content;
258+
259+
& .embed {
260+
background: #2f2f2f;
261+
border-radius: var(--outer-radius);
262+
padding: 4px;
263+
}
264+
265+
& .switch {
266+
background: #2f2f2f;
267+
padding: 8px 8px 0 8px;
268+
height: 60px;
269+
max-height: 60px;
270+
border-top-left-radius: var(--outer-radius);
271+
border-top-right-radius: var(--outer-radius);
272+
273+
transition: all 0.3s;
274+
}
275+
276+
& .buttons {
277+
background: #2f2f2f;
278+
padding: 8px;
279+
280+
transition: all 0.3s;
281+
}
282+
283+
&:has([data-state="completed"]) {
284+
& .buttons {
285+
border-radius: var(--outer-radius);
286+
}
287+
288+
& .switch {
289+
background: transparent;
290+
max-height: 0;
291+
}
292+
}
293+
}
294+
295+
/* Hide chrome on smaller screens */
296+
@media screen and (max-width: 599px) and (max-height: 599px) {
297+
max-width: unset;
298+
299+
grid-template-rows:
300+
0
301+
0
302+
auto
303+
12px
304+
0
305+
max-content;
306+
307+
& .logo,
308+
& .switch {
309+
display: none;
310+
}
311+
312+
& .buttons {
313+
border-radius: var(--outer-radius);
314+
}
315+
}
316+
317+
/* Show buttons on landscape */
318+
@media screen and (min-width: 600px) and (max-height: 450px) {
319+
grid-template-areas:
320+
'embed'
321+
'buttons'
322+
'gap5';
323+
324+
grid-template-rows:
325+
auto
326+
max-content
327+
8px;
328+
329+
& .buttons {
330+
border-radius: var(--outer-radius);
331+
display: block;
332+
}
333+
}
334+
335+
/* Sticky buttons on very low heights */
336+
@media screen and (max-height: 320px) {
337+
& .embed {
338+
overflow-y: auto;
339+
}
340+
341+
& .buttons {
342+
bottom: 0;
343+
position: sticky;
344+
}
345+
}
346+
}

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

+1
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@ function useIframeEffects(src) {
102102
features.clickCapture(),
103103
features.titleCapture(),
104104
features.mouseCapture(),
105+
features.errorDetection(),
105106
];
106107

107108
/**

‎special-pages/pages/duckplayer/app/components/SwitchBarMobile.module.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.switchBar {
22
display: grid;
33
border-radius: 8px;
4-
background: #2f2f2f;
4+
background: rgba(255, 255, 255, 0.12);
55
padding-inline: 16px;
66
height: 100%;
77
line-height: 1.1;

‎special-pages/pages/duckplayer/app/components/Wordmark-mobile.module.css

+7
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,13 @@
1111
.logo {
1212
height: 100px;
1313
}
14+
15+
/* TODO: Can this be moved somewhere else? */
16+
[data-youtube-error="true"] {
17+
& .logo {
18+
height: 44px;
19+
}
20+
}
1421
}
1522
.logoSvg img {
1623
display: block;

0 commit comments

Comments
 (0)