Skip to content

Commit 63fc2b9

Browse files
shakyShaneShane Osbourne
shakyShane
and
Shane Osbourne
authored
duckplayer: larger video on mobile landscape (#1164)
* duckplayer: updating landscape view on mobile * max size * tweak to logo padding * disable CSS nesting in special pages output * de-nest --------- Co-authored-by: Shane Osbourne <[email protected]>
1 parent 0454d7d commit 63fc2b9

33 files changed

+238
-114
lines changed

‎special-pages/messages/duckplayer/telemetryEvent.notify.json‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"$schema": "http://json-schema.org/draft-07/schema#",
3+
"title": "TelemetryEvent",
4+
"type": "object",
5+
"required": ["attributes"],
6+
"properties": {
7+
"attributes": {
8+
"oneOf": [
9+
{
10+
"type": "object",
11+
"title": "Impression",
12+
"required": ["name", "value"],
13+
"properties": {
14+
"name": {
15+
"const": "impression"
16+
},
17+
"value": {
18+
"type": "string",
19+
"enum": ["landscape-layout"]
20+
}
21+
}
22+
}
23+
]
24+
}
25+
}
26+
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@
44
display: flex;
55
height: 44px;
66
line-height: 44px;
7-
font-size: 16px;
7+
font-size: 15px;
8+
font-weight: bold;
89
padding: 0 20px;
910
flex-shrink: 0;
1011
box-shadow: none;
1112
background: rgba(255, 255, 255, 0.12);
1213
border-radius: var(--inner-radius);
13-
font-weight: bold;
1414
color: rgba(255, 255, 255, 1);
1515
text-decoration: none;
1616
}

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { createAppFeaturesFrom } from "../features/app.js";
1414
import { MobileButtons } from "./MobileButtons.jsx";
1515
import { OrientationProvider } from "../providers/OrientationProvider.jsx";
1616
import { FocusMode } from "./FocusMode.jsx";
17+
import { useTelemetry } from "../types.js";
1718

1819
const DISABLED_HEIGHT = 450;
1920

@@ -23,6 +24,7 @@ const DISABLED_HEIGHT = 450;
2324
*/
2425
export function MobileApp({ embed }) {
2526
const settings = useSettings();
27+
const telemetry = useTelemetry();
2628
const features = createAppFeaturesFrom(settings)
2729
return (
2830
<>
@@ -35,7 +37,9 @@ export function MobileApp({ embed }) {
3537
// landscape
3638
// if the height is too low, just disable it
3739
if (window.innerHeight < DISABLED_HEIGHT) {
38-
return FocusMode.disable()
40+
FocusMode.disable()
41+
telemetry.landscapeImpression()
42+
return;
3943
}
4044
return FocusMode.enable()
4145
}} />

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

Lines changed: 31 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
body[data-display="app"] {
2+
padding: 8px;
3+
}
14
html[data-focus-mode="on"]:root .main {
25
--bg-color: transparent;
36
}
@@ -26,14 +29,11 @@ html[data-focus-mode="on"] .hideInFocus {
2629
.main {
2730
--bg-color: rgba(0, 0, 0, 0.3);
2831
--logo-spacing: 185px;
29-
--ui-control-height: calc(44px + 12px + 12px);
30-
--additional-ui: calc(44px * 3);
3132
--gutter-width: 8px;
32-
--gutter-combined: calc(var(--gutter-width) * 2);
3333
--outer-radius: 16px;
34-
--inner-radius: 8px;
34+
--inner-radius: 12px;
3535
--logo-width: 157px;
36-
--inner-padding: 12px;
36+
--inner-padding: 8px;
3737
position: relative;
3838
max-width: 100vh;
3939
margin: 0 auto;
@@ -44,7 +44,7 @@ html[data-focus-mode="on"] .hideInFocus {
4444
--row-2: auto;
4545
--row-3: max-content;
4646
--row-4: max-content;
47-
--row-5: 12px;
47+
--row-5: 16px;
4848
--row-6: max-content;
4949
--row-7: auto;
5050
grid-template-rows:
@@ -83,7 +83,7 @@ body:has([data-state="completed"] [aria-checked="true"]) .switch {
8383
.embed {
8484
background: var(--bg-color);
8585
grid-area: embed;
86-
padding: var(--inner-padding);
86+
padding: calc(var(--inner-padding) / 2);
8787
padding-bottom: 0;
8888
border-top-left-radius: var(--outer-radius);
8989
border-top-right-radius: var(--outer-radius);
@@ -104,9 +104,7 @@ body:has([data-state="completed"] [aria-checked="true"]) .switch {
104104

105105
.switch {
106106
grid-area: switch;
107-
height: 50px;
108-
background: rgba(255, 255, 255, 0.03);
109-
border-radius: 16px;
107+
height: 44px;
110108
}
111109

112110
@media screen and (min-width: 425px) and (max-height: 600px) {
@@ -129,7 +127,7 @@ body:has([data-state="completed"] [aria-checked="true"]) .switch {
129127
border-bottom-left-radius: var(--outer-radius);
130128
display: grid;
131129
align-items: center;
132-
padding-left: var(--inner-padding);
130+
padding-left: 12px;
133131
}
134132
.buttons {
135133
border-bottom-left-radius: unset;
@@ -159,8 +157,8 @@ body:has([data-state="completed"] [aria-checked="true"]) .switch {
159157
background: var(--bg-color);
160158
border-radius: unset;
161159
display: grid;
162-
padding-top: 12px;
163-
padding-bottom: 12px;
160+
padding-top: 8px;
161+
padding-bottom: 8px;
164162
height: 100%;
165163
}
166164
.buttons {
@@ -180,75 +178,41 @@ body:has([data-state="completed"] [aria-checked="true"]) .switch {
180178
}
181179
}
182180
@media screen and (min-width: 600px) and (max-height: 450px) {
183-
.main {
184-
grid-template-columns: 1fr 1fr;
185-
grid-template-rows: calc(44px + 24px) 44px auto calc(44px + 24px);
186-
grid-template-areas:
187-
'embed logo'
188-
'embed buttons'
189-
'embed filler'
190-
'embed switch';
191-
align-content: center;
192-
max-width: 100%;
193-
max-height: 90vh;
194-
}
195-
body:has([data-state="completed"] [aria-checked="true"]) .main {
196-
grid-template-rows: max-content max-content 0 0;
181+
:root {
182+
--body-padding: 4px;
183+
--max-width: calc(100vw - var(--body-padding) * 2);
197184
}
198-
body:has([data-state="completed"] [aria-checked="true"]) .logo {
199-
padding-top: 0;
200-
align-items: end;
185+
body[data-display="app"] {
186+
padding: 0;
201187
}
202-
body:has([data-state="completed"] [aria-checked="true"]) .buttons {
203-
border-bottom-right-radius: var(--outer-radius);
204-
padding-bottom: 12px;
188+
.main {
189+
grid-template-columns: 100%;
190+
grid-template-rows: 100%;
191+
grid-template-areas: 'embed';
192+
max-width: none;
205193
}
206-
body:has([data-state="completed"] [aria-checked="true"]) .switch {
207-
display: none;
194+
.embed {
195+
padding: 0;
196+
border-radius: 0;
197+
width: 100%;
198+
/*max-width: var(--max-width);*/
199+
background-color: transparent;
208200
}
209201
.filler {
210-
display: block;
211-
height: 100%;
212-
grid-area: filler;
213-
background: var(--bg-color)
214-
}
215-
.embed {
216-
padding: var(--inner-padding);
217-
border-bottom-left-radius: var(--outer-radius);
218-
border-top-right-radius: 0;
202+
display: none;
219203
}
220204
.logo {
221-
display: grid;
222-
width: 100%;
223-
background: var(--bg-color);
224-
justify-content: center;
225-
border-top-right-radius: var(--outer-radius);
226-
padding: var(--inner-padding);
227-
padding-left: 0;
205+
display: none;
228206
}
229207
.buttons {
230-
border-bottom-right-radius: 0;
231-
border-bottom-left-radius: 0;
232-
padding: 0;
233-
padding-right: var(--inner-padding);
208+
display: none;
234209
}
235210
.switch {
236-
background: var(--bg-color);
237-
border-top-right-radius: 0;
238-
border-top-left-radius: 0;
239-
border-bottom-left-radius: 0;
240-
border-bottom-right-radius: var(--outer-radius);
241-
align-self: end;
242-
padding: var(--inner-padding);
243-
padding-left: 0;
244-
height: 100%;
211+
display: none;
245212
}
246213
}
247214
@media screen and (min-width: 1100px) {
248215
.switch {
249216
justify-content: end;
250217
}
251-
.switch > * {
252-
min-width: 400px
253-
}
254218
}

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
.root.mobile {
99
aspect-ratio: 16/9;
1010
border-radius: var(--inner-radius);
11+
overflow: hidden;
1112
height: auto;
1213
}
1314

@@ -45,3 +46,21 @@
4546
justify-items: center;
4647
background: #2f2f2f;
4748
}
49+
50+
@media screen and (min-width: 600px) and (max-height: 450px) {
51+
.root.mobile {
52+
max-height: 100%;
53+
margin: 0 auto;
54+
overflow: hidden;
55+
background: rgba(0, 0, 0, 0.3);
56+
border-radius: 0;
57+
}
58+
.iframe.mobile {
59+
overflow: hidden;
60+
border-radius: 0;
61+
}
62+
.error {
63+
overflow: hidden;
64+
border-radius: 0;
65+
}
66+
}

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

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,12 @@
11
.switchBar {
22
display: grid;
3-
border-radius: 16px;
3+
border-radius: 8px;
44
background: rgba(255, 255, 255, 0.03);
55
padding-inline: 16px;
66
height: 100%;
77
line-height: 1.1;
88
}
99

10-
@media screen and (min-width: 900px) {
11-
.switchBar {
12-
border-radius: 8px;
13-
}
14-
}
15-
@media screen and (min-width: 667px) and (max-height: 450px) {
16-
.switchBar {
17-
border-radius: 8px;
18-
}
19-
}
20-
2110
.stateExiting {
2211
transition: all .3s ease-in-out;
2312
transition-delay: 2s;

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

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,16 @@
66
grid-column-gap: 8px;
77
grid-template-columns: max-content max-content;
88
}
9-
@media screen and (max-width: 500px) {
9+
10+
@media screen and (max-width: 767px) {
1011
.logo {
1112
height: 100px;
1213
}
1314
}
14-
.logoSvg {
15-
img {
16-
display: block;
17-
width: 32px;
18-
height: 32px;
19-
}
15+
.logoSvg img {
16+
display: block;
17+
width: 32px;
18+
height: 32px;
2019
}
2120
.text {
2221
font-size: 17px;

‎special-pages/pages/duckplayer/app/index.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,9 @@ body[data-display="app"] {
1515
padding: 16px;
1616
}
1717

18+
@media screen and (min-width: 600px) and (max-height: 450px) {
19+
body[data-display="app"] {
20+
padding: 8px;
21+
}
22+
}
23+

‎special-pages/pages/duckplayer/app/index.js‎

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { EmbedSettings } from './embed-settings.js'
88
import enStrings from '../src/locales/en/duckplayer.json'
99
import { Settings } from './settings.js'
1010
import { SettingsProvider } from './providers/SettingsProvider.jsx'
11-
import { MessagingContext } from './types.js'
11+
import { MessagingContext, TelemetryContext } from './types.js'
1212
import { UserValuesProvider } from './providers/UserValuesProvider.jsx'
1313
import { Fallback } from '../../../shared/components/Fallback/Fallback.jsx'
1414
import { Components } from './components/Components.jsx'
@@ -17,10 +17,11 @@ import { DesktopApp } from './components/DesktopApp.jsx'
1717

1818
/**
1919
* @param {import("../src/js/index.js").DuckplayerPage} messaging
20+
* @param {import("../src/js/index.js").Telemetry} telemetry
2021
* @param {import("../../../shared/environment").Environment} baseEnvironment
2122
* @return {Promise<void>}
2223
*/
23-
export async function init (messaging, baseEnvironment) {
24+
export async function init (messaging, telemetry, baseEnvironment) {
2425
const result = await callWithRetry(() => messaging.initialSetup())
2526
if ('error' in result) {
2627
throw new Error(result.error)
@@ -77,23 +78,25 @@ export async function init (messaging, baseEnvironment) {
7778
willThrow={environment.willThrow}>
7879
<ErrorBoundary didCatch={didCatch} fallback={<Fallback showDetails={environment.env === 'development'}/>}>
7980
<UpdateEnvironment search={window.location.search}/>
80-
<MessagingContext.Provider value={messaging}>
81-
<SettingsProvider settings={settings}>
82-
<UserValuesProvider initial={init.userValues}>
83-
{settings.layout === 'desktop' && (
84-
<TranslationProvider translationObject={enStrings} fallback={enStrings} textLength={environment.textLength}>
85-
<DesktopApp embed={embed} />
86-
</TranslationProvider>
87-
)}
88-
{settings.layout === 'mobile' && (
89-
<TranslationProvider translationObject={strings} fallback={enStrings} textLength={environment.textLength}>
90-
<MobileApp embed={embed} />
91-
</TranslationProvider>
92-
)}
93-
<WillThrow />
94-
</UserValuesProvider>
95-
</SettingsProvider>
96-
</MessagingContext.Provider>
81+
<TelemetryContext.Provider value={telemetry}>
82+
<MessagingContext.Provider value={messaging}>
83+
<SettingsProvider settings={settings}>
84+
<UserValuesProvider initial={init.userValues}>
85+
{settings.layout === 'desktop' && (
86+
<TranslationProvider translationObject={enStrings} fallback={enStrings} textLength={environment.textLength}>
87+
<DesktopApp embed={embed} />
88+
</TranslationProvider>
89+
)}
90+
{settings.layout === 'mobile' && (
91+
<TranslationProvider translationObject={strings} fallback={enStrings} textLength={environment.textLength}>
92+
<MobileApp embed={embed} />
93+
</TranslationProvider>
94+
)}
95+
<WillThrow />
96+
</UserValuesProvider>
97+
</SettingsProvider>
98+
</MessagingContext.Provider>
99+
</TelemetryContext.Provider>
97100
</ErrorBoundary>
98101
</EnvironmentProvider>
99102
, root)

0 commit comments

Comments
 (0)