DuckPlayer page - mobile support (#1028)

* DuckPlayer page - mobile support

* exclude screenshot tests by default (for now)

* exclude preact dev tools

---------

Co-authored-by: Shane Osbourne <sosbourne@duckduckgo.com>

package.json

@@ -39,6 +39,7 @@
     "posttest-int": "npm run test-int --workspaces --if-present",
     "posttest-int-x": "npm run test-int-x --workspaces --if-present",
     "serve": "http-server -c-1 --port 3220 integration-test/test-pages",
+    "serve-special-pages": "http-server -c-1 --port 3221 build/integration/pages",
     "playwright": "playwright test",
     "playwright-headed": "playwright test --headed",
     "preplaywright": "npm run build-windows && npm run build-apple && npm run build-android",

packages/messaging/lib/test-utils.mjs

@@ -196,7 +196,7 @@ export function mockAndroidMessaging(params) {
 
             // if it's a notification, simulate the empty response and don't check for a response
             if (!('id' in msg)) {
-                return console.warn("no id");
+                return;
             }
 
             if (!(msg.method in window.__playwright_01.mockResponses)) {
@@ -238,7 +238,7 @@ export function mockResponses(params) {
 export function waitForCallCount(params) {
     const outgoing = window.__playwright_01.mocks.outgoing
     const filtered = outgoing.filter(({ payload }) => params.method === payload.method)
-    return filtered.length === params.count
+    return filtered.length >= params.count
 }
 
 /**

packages/special-pages/index.mjs

@@ -29,6 +29,7 @@ export const support = {
         'integration': ['copy', 'build-js'],
         'windows': ['copy', 'build-js'],
         'apple': ['copy', 'build-js', 'inline-html'],
+        'android': ['copy', 'build-js']
     },
     /** @type {Partial<Record<ImportMeta['injectName'], string[]>>} */
     errorpage: {

packages/special-pages/messages/duckplayer/initialSetup.response.json

@@ -57,6 +57,10 @@
           "enum": ["macos", "windows", "android", "ios"]
         }
       }
+    },
+    "localeStrings": {
+      "type": "string",
+      "description": "Optional locale-specific strings"
     }
   }
 }

packages/special-pages/package.json

@@ -8,7 +8,8 @@
   "scripts": {
     "build": "node index.mjs",
     "build.dev": "node index.mjs --env development",
-    "test": "npm run test.unit && playwright test",
+    "test": "npm run test.unit && playwright test --grep-invert '@screenshots'",
+    "test.screenshots": "npm run test.unit && playwright test --grep '@screenshots'",
     "test.windows": "npm run test -- --project windows",
     "test.macos": "npm run test -- --project macos",
     "test.ios": "npm run test -- --project ios",

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

@@ -9,7 +9,7 @@
     flex-shrink: 0;
     box-shadow: none;
     background: rgba(255, 255, 255, 0.12);
-    border-radius: 8px;
+    border-radius: var(--inner-radius);
     font-weight: bold;
     color: rgba(255, 255, 255, 1);
     text-decoration: none;
@@ -24,8 +24,6 @@
     flex: 1;
     text-align: center;
     justify-content: center;
-    padding-left: 4px;
-    padding-right: 4px;
     text-wrap: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;

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

@@ -0,0 +1,48 @@
+import { h, Fragment } from "preact";
+import styles from "./DesktopApp.module.css";
+import { Background } from "./Background.jsx";
+import { InfoBar, InfoBarContainer } from "./InfoBar.jsx";
+import { PlayerContainer } from "./PlayerContainer.jsx";
+import { Player, PlayerError } from "./Player.jsx";
+import { useSettings } from "../providers/SettingsProvider.jsx";
+import { createAppFeaturesFrom } from "../features/app.js";
+import { HideInFocusMode } from "./FocusMode.jsx";
+
+
+/**
+ * @param {object} props
+ * @param {import("../embed-settings.js").EmbedSettings|null} props.embed
+ */
+export function DesktopApp({ embed }) {
+    const settings = useSettings();
+    const features = createAppFeaturesFrom(settings)
+    return (
+        <>
+            <Background />
+            {features.focusMode()}
+            <main class={styles.app}>
+                <DesktopLayout embed={embed} />
+            </main>
+        </>
+    )
+}
+
+/**
+ * @param {object} props
+ * @param {import("../embed-settings.js").EmbedSettings|null} props.embed
+ */
+function DesktopLayout({embed}) {
+    return (
+        <div class={styles.desktop}>
+            <PlayerContainer>
+                {embed === null && <PlayerError layout={'desktop'} kind={'invalid-id'} />}
+                {embed !== null && <Player src={embed.toEmbedUrl()} layout={'desktop'} />}
+                <HideInFocusMode style={"slide"}>
+                    <InfoBarContainer>
+                        <InfoBar embed={embed}/>
+                    </InfoBarContainer>
+                </HideInFocusMode>
+            </PlayerContainer>
+        </div>
+    )
+}

packages/special-pages/pages/duckplayer/app/components/App.module.css → packages/special-pages/pages/duckplayer/app/components/DesktopApp.module.css

@@ -1,6 +1,8 @@
 :root {
     /* Set video to take up 80vw width */
     --video-width: 80vw;
+    --outer-radius: 16px;
+    --inner-radius: 8px;
 }
 
 @media screen and (max-width: 1080px) {
@@ -84,7 +86,7 @@
     grid-template-columns: 60% 1fr;
     grid-column-gap: 8px;
     background: rgba(0, 0, 0, 0.3);
-    border-radius: 16px;
+    border-radius: var(--outer-radius);
     padding: 8px;
     @media screen  and (max-width: 700px) {
         grid-template-columns: 50% 1fr;

packages/special-pages/pages/duckplayer/app/components/FloatingBar.jsx

@@ -2,19 +2,6 @@ import styles from "./FloatingBar.module.css"
 import { h } from "preact";
 import cn from "classnames";
 
-
-/**
- * @param {object} props
- * @param {import("preact").ComponentChild} props.children
- */
-export function BottomNavBar({children}) {
-    return (
-        <div class={styles.bottomNavBar}>
-            {children}
-        </div>
-    )
-}
-
 /**
  * @param {object} props
  * @param {import("preact").ComponentChild} props.children

packages/special-pages/pages/duckplayer/app/components/FloatingBar.module.css

@@ -4,15 +4,11 @@
 }
 
 .inset {
-    border-radius: 8px;
+    border-radius: var(--outer-radius);
     padding: 8px;
     background: rgba(0, 0, 0, 0.3);
 }
 
-.bottomNavBar {
-}
-
-
 .topBar {
     display: grid;
     justify-content: center;