Skip to content

Commit 10be601

Browse files
jonathanKingstonjonathanKingston
authored
Merge branch 'main' into jkt/c-s-s-experiments
2 parents 5683d86 + ce153da commit 10be601

File tree

22 files changed

+298
-105
lines changed

22 files changed

+298
-105
lines changed

‎injected/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
"@types/node": "^22.14.1",
3939
"@typescript-eslint/eslint-plugin": "^8.20.0",
4040
"fast-check": "^4.1.1",
41-
"jasmine": "^5.6.0",
41+
"jasmine": "^5.7.1",
4242
"minimist": "^1.2.8"
4343
}
4444
}

‎package-lock.json

Lines changed: 9 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎special-pages/pages/duckplayer/app/embed-settings.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ export class EmbedSettings {
7171

7272
url.searchParams.set('rel', '0'); // shows related videos from the same channel as the video
7373
url.searchParams.set('modestbranding', '1'); // disables showing the YouTube logo in the video control bar
74+
url.searchParams.set('color', 'white'); // Forces legacy YouTube player UI
7475

7576
if (this.timestamp && this.timestamp.seconds > 0) {
7677
url.searchParams.set('start', String(this.timestamp.seconds)); // if timestamp supplied, start video at specific point

‎special-pages/pages/duckplayer/integration-tests/duck-player.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@ import { perPlatform } from 'injected/integration-test/type-helpers.mjs';
55

66
const MOCK_VIDEO_ID = 'VIDEO_ID';
77
const MOCK_VIDEO_TITLE = 'Embedded Video - YouTube';
8-
const youtubeEmbed = (id) => 'https://www.youtube-nocookie.com/embed/' + id + '?iv_load_policy=1&autoplay=1&rel=0&modestbranding=1';
8+
const youtubeEmbed = (id) =>
9+
'https://www.youtube-nocookie.com/embed/' + id + '?iv_load_policy=1&autoplay=1&rel=0&modestbranding=1&color=white';
910
const youtubeEmbedIOS = (id) =>
10-
'https://www.youtube-nocookie.com/embed/' + id + '?iv_load_policy=1&autoplay=1&muted=1&rel=0&modestbranding=1';
11+
'https://www.youtube-nocookie.com/embed/' + id + '?iv_load_policy=1&autoplay=1&muted=1&rel=0&modestbranding=1&color=white';
1112
const html = {
1213
unsupported: `<html><head><title>${MOCK_VIDEO_TITLE}</title></head>
1314
<body>

‎special-pages/pages/duckplayer/unit-tests/embed-settings.mjs

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { EmbedSettings } from '../app/embed-settings.js';
55
describe('creates embed url', () => {
66
it('handles duck scheme', () => {
77
const actual = EmbedSettings.fromHref('duck://player/123')?.toEmbedUrl();
8-
const expected = 'https://www.youtube-nocookie.com/embed/123?iv_load_policy=1&autoplay=1&rel=0&modestbranding=1';
8+
const expected = 'https://www.youtube-nocookie.com/embed/123?iv_load_policy=1&autoplay=1&rel=0&modestbranding=1&color=white';
99
deepEqual(actual, expected);
1010
});
1111
it('handles duck scheme with timestamp', () => {
@@ -15,6 +15,7 @@ describe('creates embed url', () => {
1515
autoplay: '1',
1616
rel: '0',
1717
modestbranding: '1',
18+
color: 'white',
1819
start: '3723',
1920
};
2021
if (!actual) throw new Error('unreachable');
@@ -28,6 +29,7 @@ describe('creates embed url', () => {
2829
autoplay: '1',
2930
rel: '0',
3031
modestbranding: '1',
32+
color: 'white',
3133
start: '3723',
3234
};
3335
if (!actual) throw new Error('unreachable');
@@ -41,6 +43,7 @@ describe('creates embed url', () => {
4143
autoplay: '1',
4244
rel: '0',
4345
modestbranding: '1',
46+
color: 'white',
4447
start: '3723',
4548
};
4649
if (!actual) throw new Error('unreachable');
@@ -54,6 +57,7 @@ describe('creates embed url', () => {
5457
autoplay: '1',
5558
rel: '0',
5659
modestbranding: '1',
60+
color: 'white',
5761
};
5862
if (!actual) throw new Error('unreachable');
5963
const asParams = Object.fromEntries(new URL(actual).searchParams);
@@ -67,6 +71,7 @@ describe('creates embed url', () => {
6771
autoplay: '1',
6872
rel: '0',
6973
modestbranding: '1',
74+
color: 'white',
7075
muted: '1',
7176
};
7277
if (!actual) throw new Error('unreachable');
@@ -80,6 +85,7 @@ describe('creates embed url', () => {
8085
iv_load_policy: '1',
8186
rel: '0',
8287
modestbranding: '1',
88+
color: 'white',
8389
};
8490
if (!actual) throw new Error('unreachable');
8591
const asParams = Object.fromEntries(new URL(actual).searchParams);
@@ -93,6 +99,7 @@ describe('creates embed url', () => {
9399
autoplay: '1',
94100
rel: '0',
95101
modestbranding: '1',
102+
color: 'white',
96103
};
97104
if (!actual) throw new Error('unreachable');
98105
const asParams = Object.fromEntries(new URL(actual).searchParams);

‎special-pages/pages/onboarding/app/components/App2.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useEnv } from '../../../../shared/components/EnvironmentProvider';
55
import { usePlatformName } from './SettingsProvider';
66
import { ErrorBoundary } from '../../../../shared/components/ErrorBoundary';
77
import { Fallback } from '../pages/Fallback';
8-
import { Background } from './v3/Background';
8+
import { Background } from './v3/Background.js';
99
import { BeforeAfterProvider } from './v3/BeforeAfterProvider';
1010
import { SingleStep } from './v3/SingleStep';
1111
import { Hiker } from './v3/Hiker';

‎special-pages/pages/onboarding/app/components/Background.module.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,15 +47,15 @@
4747
}
4848
}
4949
.foreground.layer1 {
50-
background-image: url("../../public/assets/img/layer1.svg");
50+
background-image: url("../../public/assets/img/layer1_legacy.svg");
5151
animation-name: slidein1;
5252
}
5353
.foreground.layer2 {
54-
background-image: url("../../public/assets/img/layer2.svg");
54+
background-image: url("../../public/assets/img/layer2_legacy.svg");
5555
animation-name: slidein2;
5656
}
5757
.foreground.layer3 {
58-
background-image: url("../../public/assets/img/layer3.svg");
58+
background-image: url("../../public/assets/img/layer3_legacy.svg");
5959
animation-name: slidein3;
6060
}
6161
@media only screen and (max-width: 480px) {

‎special-pages/pages/onboarding/app/components/v3/Background.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import cn from 'classnames';
44

55
export function Background() {
66
return (
7-
<div className={styles.background}>
8-
<div className={cn(styles.foreground, styles.layer1)} />
9-
<div className={cn(styles.foreground, styles.layer2)} />
10-
<div className={cn(styles.foreground, styles.layer3)} />
7+
<div class={styles.background}>
8+
<div class={cn(styles.foreground, styles.animated, styles.clouds)} />
9+
<div class={cn(styles.foreground, styles.animated, styles.mountains)} />
10+
<div class={cn(styles.foreground, styles.stars)} />
1111
</div>
1212
);
1313
}

‎special-pages/pages/onboarding/app/components/v3/Background.module.css

Lines changed: 39 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
background-image: url("../../../public/assets/img/grain.png"), url("../../../public/assets/img/background-v3.jpg");
1212
background-blend-mode: overlay, normal;
1313
background-repeat: repeat, no-repeat;
14-
background-size: 100px, cover;
14+
background-size: 50px, cover;
1515

1616
@media only screen and (min-width: 481px) {
1717
background-size: 100px, 200% 100%;
@@ -24,69 +24,78 @@
2424
background-image: url("../../../public/assets/img/grain-dark.png"), url("../../../public/assets/img/background-dark-v3.jpg");
2525
background-blend-mode: overlay, normal;
2626
background-repeat: repeat, no-repeat;
27-
background-size: 100px, cover;
27+
background-size: 50px, cover;
2828
}
2929
}
3030

3131
.foreground {
3232
position: absolute;
33-
top: 10vh;
33+
top: 0;
3434
left: 0;
3535
width: 100vw;
36-
height: 80vh;
37-
background-size: contain;
36+
height: 100vh;
3837
background-repeat: no-repeat;
38+
}
3939

40-
animation-duration: 50s;
41-
40+
.animated {
41+
animation-duration: 30s;
4242
animation-fill-mode: both;
4343
animation-timing-function: linear;
44+
}
45+
46+
.clouds {
47+
background-image: url("../../../public/assets/img/clouds.svg");
48+
background-position: top right;
49+
animation-name: offscreen-clouds;
50+
animation-duration: 50s;
4451

4552
@media (prefers-color-scheme: dark) {
4653
opacity: .1;
4754
}
4855
}
49-
.foreground.layer1 {
50-
background-image: url("../../../public/assets/img/layer1.svg");
51-
animation-name: slidein1;
52-
}
53-
.foreground.layer2 {
54-
background-image: url("../../../public/assets/img/layer2.svg");
55-
animation-name: slidein2;
56+
57+
.mountains {
58+
background-image: url("../../../public/assets/img/mountains.svg");
59+
background-position: bottom right;
60+
61+
@media (prefers-color-scheme: dark) {
62+
opacity: .15;
63+
}
5664
}
57-
.foreground.layer3 {
58-
background-image: url("../../../public/assets/img/layer3.svg");
59-
animation-name: slidein3;
65+
66+
.stars {
67+
background-image: url("../../../public/assets/img/stars.svg");
68+
background-position: top right;
69+
display: none;
70+
71+
@media screen and (prefers-color-scheme: dark) {
72+
display: block;
73+
}
6074
}
75+
6176
@media only screen and (max-width: 480px) {
6277
.foreground {
6378
display: none
6479
}
6580
}
66-
@keyframes slidein1 {
67-
from {
68-
transform: translateX(110vw);
69-
}
7081

71-
to {
72-
transform: translateX(40vw);
73-
}
74-
}
75-
@keyframes slidein2 {
82+
@keyframes offscreen {
7683
from {
7784
transform: translateX(100vw);
7885
}
7986

8087
to {
81-
transform: translateX(40vw);
88+
transform: translateX(0vw);
8289
}
8390
}
84-
@keyframes slidein3 {
91+
92+
@keyframes offscreen-clouds {
8593
from {
86-
transform: translateX(120vw);
94+
/* this accounts for clouds SVG having some 'whitespace' + being pinned to the top right */
95+
transform: translateX(830px);
8796
}
8897

8998
to {
90-
transform: translateX(40vw);
99+
transform: translateX(0vw);
91100
}
92101
}

‎special-pages/pages/onboarding/app/components/v3/Heading.module.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,8 @@
7676
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="40" fill="none"><path fill="%23000" d="M21.627 34.502c-4.4-3.677-14.05-12.309-21.115-22.728-1.63-2.403.911-5.248 3.657-4.457 11.207 3.226 16.613-.79 18.715-3.195.828-.948 1.103-2.221 1.103-3.495L24 0v40l-.013-.497a6.54 6.54 0 0 0-2.36-5.001z"/></svg>');
7777
mask-position: right var(--sp-8);
7878
mask-repeat: no-repeat;
79+
position: relative;
80+
left: 1px; /* nudge it over to handle pixel rounding gaps */
7981

8082
@media (prefers-color-scheme: dark) {
8183
background: linear-gradient(180deg, #333 0%, rgba(51, 51, 51, 0.72) 100%);

‎special-pages/pages/onboarding/app/global.js

Lines changed: 9 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -218,36 +218,23 @@ export function GlobalProvider({ order, children, stepDefinitions, messaging, fi
218218
* @param {ImportMeta['platform']} platform
219219
*/
220220
async function handleSystemSettingUpdate(action, messaging, platform) {
221-
const { id, payload, current } = action;
221+
const { id, payload } = action;
222222
switch (id) {
223223
case 'bookmarks': {
224-
if (!current) {
225-
messaging.setBookmarksBar(payload);
226-
} else {
227-
if (payload.enabled) {
228-
messaging.setBookmarksBar(payload);
229-
}
230-
}
224+
messaging.setBookmarksBar(payload);
231225
return payload;
232226
}
233227
case 'session-restore': {
234-
if (!current) {
235-
messaging.setSessionRestore(payload);
236-
} else {
237-
if (payload.enabled) {
238-
messaging.setSessionRestore(payload);
239-
}
240-
}
228+
messaging.setSessionRestore(payload);
241229
return payload;
242230
}
243231
case 'home-shortcut': {
244-
if (!current) {
245-
messaging.setShowHomeButton(payload);
246-
} else {
247-
if (payload.enabled) {
248-
messaging.setShowHomeButton(payload);
249-
}
250-
}
232+
messaging.setShowHomeButton(payload);
233+
return payload;
234+
}
235+
case 'ad-blocking':
236+
case 'youtube-ad-blocking': {
237+
messaging.setAdBlocking(payload);
251238
return payload;
252239
}
253240
case 'dock': {
@@ -280,17 +267,6 @@ async function handleSystemSettingUpdate(action, messaging, platform) {
280267
}
281268
break;
282269
}
283-
case 'ad-blocking':
284-
case 'youtube-ad-blocking': {
285-
if (!current) {
286-
messaging.setAdBlocking(payload);
287-
} else {
288-
if (payload.enabled) {
289-
messaging.setAdBlocking(payload);
290-
}
291-
}
292-
return payload;
293-
}
294270
}
295271
if ('value' in payload) {
296272
return { enabled: payload.enabled, value: payload.value };

0 commit comments

Comments
 (0)