duckplayer: updating landscape view on mobile

duckduckgo · Oct 29, 2024 · 5481b05 · 5481b05
1 parent 6f94a00
commit 5481b05
Show file tree

Hide file tree

Showing 33 changed files with 234 additions and 104 deletions.
diff --git a/special-pages/messages/duckplayer/telemetryEvent.notify.json b/special-pages/messages/duckplayer/telemetryEvent.notify.json
@@ -0,0 +1,26 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "TelemetryEvent",
+  "type": "object",
+  "required": ["attributes"],
+  "properties": {
+    "attributes": {
+      "oneOf": [
+        {
+          "type": "object",
+          "title": "Impression",
+          "required": ["name", "value"],
+          "properties": {
+            "name": {
+              "const": "impression"
+            },
+            "value": {
+              "type": "string",
+              "enum": ["landscape-layout"]
+            }
+          }
+        }
+      ]
+    }
+  }
+}
diff --git a/special-pages/pages/duckplayer/app/components/Button.module.css b/special-pages/pages/duckplayer/app/components/Button.module.css
@@ -4,13 +4,13 @@
     display: flex;
     height: 44px;
     line-height: 44px;
-    font-size: 16px;
+    font-size: 15px;
+    font-weight: bold;
     padding: 0 20px;
     flex-shrink: 0;
     box-shadow: none;
     background: rgba(255, 255, 255, 0.12);
     border-radius: var(--inner-radius);
-    font-weight: bold;
     color: rgba(255, 255, 255, 1);
     text-decoration: none;
 }

diff --git a/special-pages/pages/duckplayer/app/components/MobileApp.jsx b/special-pages/pages/duckplayer/app/components/MobileApp.jsx
@@ -14,6 +14,7 @@ import { createAppFeaturesFrom } from "../features/app.js";
 import { MobileButtons } from "./MobileButtons.jsx";
 import { OrientationProvider } from "../providers/OrientationProvider.jsx";
 import { FocusMode } from "./FocusMode.jsx";
+import { useTelemetry } from "../types.js";
 
 const DISABLED_HEIGHT = 450;
 
@@ -23,6 +24,7 @@ const DISABLED_HEIGHT = 450;
  */
 export function MobileApp({ embed }) {
     const settings = useSettings();
+    const telemetry = useTelemetry();
     const features = createAppFeaturesFrom(settings)
     return (
         <>
@@ -35,7 +37,9 @@ export function MobileApp({ embed }) {
                     // landscape
                     // if the height is too low, just disable it
                     if (window.innerHeight < DISABLED_HEIGHT) {
-                        return FocusMode.disable()
+                        FocusMode.disable()
+                        telemetry.landscapeImpression()
+                        return;
                     }
                     return FocusMode.enable()
                 }} />

diff --git a/special-pages/pages/duckplayer/app/components/MobileApp.module.css b/special-pages/pages/duckplayer/app/components/MobileApp.module.css
@@ -1,3 +1,6 @@
+body[data-display="app"] {
+    padding: 8px;
+}
 html[data-focus-mode="on"]:root .main {
     --bg-color: transparent;
 }
@@ -31,9 +34,9 @@ html[data-focus-mode="on"] .hideInFocus {
     --gutter-width: 8px;
     --gutter-combined: calc(var(--gutter-width) * 2);
     --outer-radius: 16px;
-    --inner-radius: 8px;
+    --inner-radius: 12px;
     --logo-width: 157px;
-    --inner-padding: 12px;
+    --inner-padding: 8px;
     position: relative;
     max-width: 100vh;
     margin: 0 auto;
@@ -44,7 +47,7 @@ html[data-focus-mode="on"] .hideInFocus {
     --row-2: auto;
     --row-3: max-content;
     --row-4: max-content;
-    --row-5: 12px;
+    --row-5: 16px;
     --row-6: max-content;
     --row-7: auto;
     grid-template-rows:
@@ -83,7 +86,7 @@ body:has([data-state="completed"] [aria-checked="true"]) .switch {
 .embed {
     background: var(--bg-color);
     grid-area: embed;
-    padding: var(--inner-padding);
+    padding: calc(var(--inner-padding) / 2);
     padding-bottom: 0;
     border-top-left-radius: var(--outer-radius);
     border-top-right-radius: var(--outer-radius);
@@ -104,9 +107,7 @@ body:has([data-state="completed"] [aria-checked="true"]) .switch {
 
 .switch {
     grid-area: switch;
-    height: 50px;
-    background: rgba(255, 255, 255, 0.03);
-    border-radius: 16px;
+    height: 44px;
 }
 
 @media screen and (min-width: 425px) and (max-height: 600px) {
@@ -159,8 +160,8 @@ body:has([data-state="completed"] [aria-checked="true"]) .switch {
         background: var(--bg-color);
         border-radius: unset;
         display: grid;
-        padding-top: 12px;
-        padding-bottom: 12px;
+        padding-top: 8px;
+        padding-bottom: 8px;
         height: 100%;
     }
     .buttons {
@@ -180,75 +181,41 @@ body:has([data-state="completed"] [aria-checked="true"]) .switch {
     }
 }
 @media screen and (min-width: 600px) and (max-height: 450px) {
-    .main {
-        grid-template-columns: 1fr 1fr;
-        grid-template-rows: calc(44px + 24px) 44px auto calc(44px + 24px);
-        grid-template-areas:
-            'embed logo'
-            'embed buttons'
-            'embed filler'
-            'embed switch';
-        align-content: center;
-        max-width: 100%;
-        max-height: 90vh;
-    }
-    body:has([data-state="completed"] [aria-checked="true"]) .main {
-        grid-template-rows: max-content max-content 0 0;
+    :root {
+        --body-padding: 4px;
+        --max-width: calc(100vw - var(--body-padding) * 2);
     }
-    body:has([data-state="completed"] [aria-checked="true"]) .logo {
-        padding-top: 0;
-        align-items: end;
+    body[data-display="app"] {
+        padding: var(--body-padding);
     }
-    body:has([data-state="completed"] [aria-checked="true"]) .buttons {
-        border-bottom-right-radius: var(--outer-radius);
-        padding-bottom: 12px;
+    .main {
+        grid-template-columns: 100%;
+        grid-template-rows: 100%;
+        grid-template-areas: 'embed';
+        max-width: none;
     }
-    body:has([data-state="completed"] [aria-checked="true"]) .switch {
-        display: none;
+    .embed {
+        padding: 0;
+        border-radius: 0;
+        width: 100%;
+        max-width: var(--max-width);
+        background-color: transparent;
     }
     .filler {
-        display: block;
-        height: 100%;
-        grid-area: filler;
-        background: var(--bg-color)
-    }
-    .embed {
-        padding: var(--inner-padding);
-        border-bottom-left-radius: var(--outer-radius);
-        border-top-right-radius: 0;
+        display: none;
     }
     .logo {
-        display: grid;
-        width: 100%;
-        background: var(--bg-color);
-        justify-content: center;
-        border-top-right-radius: var(--outer-radius);
-        padding: var(--inner-padding);
-        padding-left: 0;
+        display: none;
     }
     .buttons {
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 0;
-        padding: 0;
-        padding-right: var(--inner-padding);
+        display: none;
     }
     .switch {
-        background: var(--bg-color);
-        border-top-right-radius: 0;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: var(--outer-radius);
-        align-self: end;
-        padding: var(--inner-padding);
-        padding-left: 0;
-        height: 100%;
+        display: none;
     }
 }
 @media screen and (min-width: 1100px) {
     .switch {
         justify-content: end;
     }
-    .switch > * {
-        min-width: 400px
-    }
 }
diff --git a/special-pages/pages/duckplayer/app/components/Player.module.css b/special-pages/pages/duckplayer/app/components/Player.module.css
@@ -8,6 +8,7 @@
 .root.mobile {
     aspect-ratio: 16/9;
     border-radius: var(--inner-radius);
+    overflow: hidden;
     height: auto;
 }
 
@@ -45,3 +46,22 @@
     justify-items: center;
     background: #2f2f2f;
 }
+
+@media screen and (min-width: 600px) and (max-height: 450px) {
+    .root.mobile {
+        max-height: 100%;
+        margin: 0 auto;
+        border-radius: var(--outer-radius);
+        overflow: hidden;
+        padding: 4px;
+        background: rgba(0, 0, 0, 0.3)
+    }
+    .iframe.mobile {
+        overflow: hidden;
+        border-radius: var(--inner-radius);
+    }
+    .error {
+        overflow: hidden;
+        border-radius: var(--inner-radius);
+    }
+}
diff --git a/special-pages/pages/duckplayer/app/components/SwitchBarMobile.module.css b/special-pages/pages/duckplayer/app/components/SwitchBarMobile.module.css
@@ -1,23 +1,12 @@
 .switchBar {
     display: grid;
-    border-radius: 16px;
+    border-radius: 8px;
     background: rgba(255, 255, 255, 0.03);
     padding-inline: 16px;
     height: 100%;
     line-height: 1.1;
 }
 
-@media screen and (min-width: 900px) {
-    .switchBar {
-        border-radius: 8px;
-    }
-}
-@media screen and (min-width: 667px) and (max-height: 450px) {
-    .switchBar {
-        border-radius: 8px;
-    }
-}
-
 .stateExiting {
     transition: all .3s ease-in-out;
     transition-delay: 2s;

diff --git a/special-pages/pages/duckplayer/app/components/Wordmark-mobile.module.css b/special-pages/pages/duckplayer/app/components/Wordmark-mobile.module.css
@@ -6,7 +6,8 @@
     grid-column-gap: 8px;
     grid-template-columns: max-content max-content;
 }
-@media screen and (max-width: 500px) {
+
+@media screen and (max-width: 767px) {
     .logo {
         height: 100px;
     }

diff --git a/special-pages/pages/duckplayer/app/index.css b/special-pages/pages/duckplayer/app/index.css
@@ -15,3 +15,9 @@ body[data-display="app"] {
     padding: 16px;
 }
 
+@media screen and (min-width: 600px) and (max-height: 450px) {
+    body[data-display="app"] {
+        padding: 8px;
+    }
+}
+
diff --git a/special-pages/pages/duckplayer/app/index.js b/special-pages/pages/duckplayer/app/index.js
@@ -8,7 +8,7 @@ import { EmbedSettings } from './embed-settings.js'
 import enStrings from '../src/locales/en/duckplayer.json'
 import { Settings } from './settings.js'
 import { SettingsProvider } from './providers/SettingsProvider.jsx'
-import { MessagingContext } from './types.js'
+import { MessagingContext, TelemetryContext } from './types.js'
 import { UserValuesProvider } from './providers/UserValuesProvider.jsx'
 import { Fallback } from '../../../shared/components/Fallback/Fallback.jsx'
 import { Components } from './components/Components.jsx'
@@ -17,10 +17,11 @@ import { DesktopApp } from './components/DesktopApp.jsx'
 
 /**
  * @param {import("../src/js/index.js").DuckplayerPage} messaging
+ * @param {import("../src/js/index.js").Telemetry} telemetry
  * @param {import("../../../shared/environment").Environment} baseEnvironment
  * @return {Promise<void>}
  */
-export async function init (messaging, baseEnvironment) {
+export async function init (messaging, telemetry, baseEnvironment) {
     const result = await callWithRetry(() => messaging.initialSetup())
     if ('error' in result) {
         throw new Error(result.error)
@@ -77,23 +78,25 @@ export async function init (messaging, baseEnvironment) {
                 willThrow={environment.willThrow}>
                 <ErrorBoundary didCatch={didCatch} fallback={<Fallback showDetails={environment.env === 'development'}/>}>
                     <UpdateEnvironment search={window.location.search}/>
-                    <MessagingContext.Provider value={messaging}>
-                        <SettingsProvider settings={settings}>
-                            <UserValuesProvider initial={init.userValues}>
-                                {settings.layout === 'desktop' && (
-                                    <TranslationProvider translationObject={enStrings} fallback={enStrings} textLength={environment.textLength}>
-                                        <DesktopApp embed={embed} />
-                                    </TranslationProvider>
-                                )}
-                                {settings.layout === 'mobile' && (
-                                    <TranslationProvider translationObject={strings} fallback={enStrings} textLength={environment.textLength}>
-                                        <MobileApp embed={embed} />
-                                    </TranslationProvider>
-                                )}
-                                <WillThrow />
-                            </UserValuesProvider>
-                        </SettingsProvider>
-                    </MessagingContext.Provider>
+                    <TelemetryContext.Provider value={telemetry}>
+                        <MessagingContext.Provider value={messaging}>
+                            <SettingsProvider settings={settings}>
+                                <UserValuesProvider initial={init.userValues}>
+                                    {settings.layout === 'desktop' && (
+                                        <TranslationProvider translationObject={enStrings} fallback={enStrings} textLength={environment.textLength}>
+                                            <DesktopApp embed={embed} />
+                                        </TranslationProvider>
+                                    )}
+                                    {settings.layout === 'mobile' && (
+                                        <TranslationProvider translationObject={strings} fallback={enStrings} textLength={environment.textLength}>
+                                            <MobileApp embed={embed} />
+                                        </TranslationProvider>
+                                    )}
+                                    <WillThrow />
+                                </UserValuesProvider>
+                            </SettingsProvider>
+                        </MessagingContext.Provider>
+                    </TelemetryContext.Provider>
                 </ErrorBoundary>
             </EnvironmentProvider>
             , root)

diff --git a/special-pages/pages/duckplayer/app/providers/OrientationProvider.jsx b/special-pages/pages/duckplayer/app/providers/OrientationProvider.jsx
@@ -7,7 +7,10 @@ import { useEffect } from "preact/hooks";
  */
 export function OrientationProvider ({ onChange }) {
     useEffect(() => {
-        if (!screen.orientation?.type) return;
+        if (!screen.orientation?.type) {
+            onChange(getOrientationFromWidth());
+            return
+        }
         onChange(getOrientationFromScreen())
         const handleOrientationChange = () => {
             onChange(getOrientationFromScreen());

diff --git a/special-pages/pages/duckplayer/app/types.js b/special-pages/pages/duckplayer/app/types.js
@@ -16,3 +16,5 @@ export function useTypedTranslation () {
 
 export const MessagingContext = createContext(/** @type {import("../src/js/index.js").DuckplayerPage} */({}))
 export const useMessaging = () => useContext(MessagingContext)
+export const TelemetryContext = createContext(/** @type {import("../src/js/index.js").Telemetry} */({}))
+export const useTelemetry = () => useContext(TelemetryContext)