feat: redesign the timer as a full page display

e2e/screenshots.spec.ts

@@ -8,35 +8,43 @@ import {
 } from '@screenly/edge-apps/test/screenshots'
 import path from 'path'
 
-const { screenlyJsContent } = createMockScreenlyForScreenshots(
-  {},
-  {
-    duration: '60',
-    override_locale: 'en',
-    override_timezone: 'America/New_York',
-    display_errors: 'false',
-  },
-)
-
-for (const { width, height } of RESOLUTIONS) {
-  test(`screenshot ${width}x${height}`, async ({ browser }) => {
-    const screenshotsDir = getScreenshotsDir()
-
-    const context = await browser.newContext({ viewport: { width, height } })
-    const page = await context.newPage()
-
-    // Setup mocks
-    await setupClockMock(page)
-    await setupScreenlyJsMock(page, screenlyJsContent)
-
-    await page.goto('/')
-    await page.waitForLoadState('networkidle')
-
-    await page.screenshot({
-      path: path.join(screenshotsDir, `${width}x${height}.png`),
-      fullPage: false,
-    })
+const VARIANTS = [
+  { prefix: '', mode: 'ring' },
+  { prefix: 'digits-', mode: 'digits' },
+]
+
+for (const { prefix, mode } of VARIANTS) {
+  const { screenlyJsContent } = createMockScreenlyForScreenshots(
+    {},
+    {
+      display_errors: 'false',
+      duration: '60',
+      mode,
+      override_locale: 'en',
+      override_timezone: 'America/New_York',
+    },
+  )
+
+  for (const { width, height } of RESOLUTIONS) {
+    test(`screenshot ${prefix}${width}x${height}`, async ({ browser }) => {
+      const screenshotsDir = getScreenshotsDir()
+
+      const context = await browser.newContext({ viewport: { width, height } })
+      const page = await context.newPage()
 
-    await context.close()
-  })
+      // Setup mocks
+      await setupClockMock(page)
+      await setupScreenlyJsMock(page, screenlyJsContent)
+
+      await page.goto('/')
+      await page.waitForLoadState('networkidle')
+
+      await page.screenshot({
+        path: path.join(screenshotsDir, `${prefix}${width}x${height}.png`),
+        fullPage: false,
+      })
+
+      await context.close()
+    })
+  }
 }

index.html

@@ -12,26 +12,19 @@
       reference-height="1080"
       orientation="auto"
     >
-      <div id="app">
-        <app-header class="header"></app-header>
-        <main class="content">
-          <section class="timer-section">
-            <div class="date-text" data-date>--</div>
-            <div class="timer-card">
-              <div class="progress-ring-container" data-progress-ring></div>
-              <div class="timer-display">
-                <div class="timer-digits" data-timer-digits>00:00:00</div>
-                <div class="timer-total" data-timer-total>--</div>
-              </div>
-            </div>
-          </section>
-        </main>
-      </div>
+      <main class="timer">
+        <p class="timer-date" data-date></p>
+        <div class="timer-ring" data-progress-ring>
+          <div class="timer-display">
+            <p class="timer-digits" data-timer-digits>
+              <span data-time-prefix></span
+              ><span class="timer-seconds" data-time-seconds></span>
+            </p>
+            <p class="timer-total" data-timer-total></p>
+          </div>
+        </div>
+      </main>
     </auto-scaler>
-    <template id="timer-digits-template">
-      <span data-time-prefix></span
-      ><span class="accent" data-time-seconds></span>
-    </template>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

package.json

@@ -23,7 +23,7 @@
   "prettier": "./.prettierrc.json",
   "devDependencies": {
     "@playwright/test": "^1.60.0",
-    "@screenly/edge-apps": "^1.2.1",
+    "@screenly/edge-apps": "^1.5.0",
     "@types/bun": "^1.3.14",
     "@types/jsdom": "^28.0.3",
     "bun-types": "^1.3.14",

screenly.yml

@@ -30,6 +30,21 @@ settings:
         help_text: Timer duration in seconds (e.g., 60 for 1 minute, 300 for 5 minutes, 3600 for 1 hour).
         type: number
       schema_version: 1
+  mode:
+    type: string
+    default_value: ring
+    title: Mode
+    optional: true
+    help_text:
+      properties:
+        help_text: Choose the layout for where the screen is placed.
+        options:
+          - label: Ring (date and progress ring)
+            value: ring
+          - label: Digits only (maximum readability at a distance)
+            value: digits
+        type: select
+      schema_version: 1
   override_locale:
     type: string
     default_value: en

screenly_qc.yml

@@ -30,6 +30,21 @@ settings:
         help_text: Timer duration in seconds (e.g., 60 for 1 minute, 300 for 5 minutes, 3600 for 1 hour).
         type: number
       schema_version: 1
+  mode:
+    type: string
+    default_value: ring
+    title: Mode
+    optional: true
+    help_text:
+      properties:
+        help_text: Choose the layout for where the screen is placed.
+        options:
+          - label: Ring (date and progress ring)
+            value: ring
+          - label: Digits only (maximum readability at a distance)
+            value: digits
+        type: select
+      schema_version: 1
   override_locale:
     type: string
     default_value: en