feat: redesign the welcome screen as a full page greeting

e2e/screenshots.spec.ts

@@ -8,35 +8,46 @@ import {
 } from '@screenly/edge-apps/test/screenshots'
 import path from 'path'
 
-const { screenlyJsContent } = createMockScreenlyForScreenshots(
-  { coordinates: [40.7128, -74.006], location: 'New York, NY' },
-  {
-    enable_analytics: 'false',
-    override_locale: 'en',
-    override_timezone: 'America/New_York',
-    welcome_heading: 'Welcome',
-    welcome_message: 'to the team, Sam!',
-  },
-)
-
-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()
-
-    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: 'lobby' },
+  { prefix: 'poster-', mode: 'poster' },
+]
+
+for (const { prefix, mode } of VARIANTS) {
+  const { screenlyJsContent } = createMockScreenlyForScreenshots(
+    { coordinates: [40.7128, -74.006], location: 'New York, NY' },
+    {
+      enable_analytics: 'false',
+      mode,
+      override_locale: 'en',
+      override_timezone: 'America/New_York',
+      welcome_heading: 'Welcome',
+      welcome_message: 'to the team, Sam!',
+    },
+  )
+
+  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 },
+        reducedMotion: 'reduce',
+      })
+      const page = await context.newPage()
 
-    await context.close()
-  })
+      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

@@ -13,13 +13,17 @@
       orientation="auto"
       padding="0"
     >
-      <div id="app">
-        <app-header class="header" show-date></app-header>
-        <main class="content">
+      <main class="welcome">
+        <header class="welcome-header">
+          <img class="welcome-logo is-hidden" data-logo alt="" />
+          <p class="welcome-time" data-time></p>
+        </header>
+        <section class="welcome-body">
+          <p class="welcome-eyebrow" data-eyebrow></p>
           <p id="welcome-heading" class="welcome-heading"></p>
           <p id="welcome-message" class="welcome-message"></p>
-        </main>
-      </div>
+        </section>
+      </main>
     </auto-scaler>
     <script type="module" src="/src/main.ts"></script>
   </body>

package.json

@@ -22,7 +22,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

@@ -15,6 +15,21 @@ settings:
     optional: true
     help_text: Enable or disable Sentry and Google Analytics integrations.
     is_global: true
+  mode:
+    type: string
+    default_value: lobby
+    title: Mode
+    optional: true
+    help_text:
+      properties:
+        help_text: Choose the layout for where the screen is placed.
+        options:
+          - label: Lobby (logo and date header)
+            value: lobby
+          - label: Poster (message only)
+            value: poster
+        type: select
+      schema_version: 1
   override_locale:
     type: string
     default_value: en

screenly_qc.yml

@@ -15,6 +15,21 @@ settings:
     optional: true
     help_text: Enable or disable Sentry and Google Analytics integrations.
     is_global: true
+  mode:
+    type: string
+    default_value: lobby
+    title: Mode
+    optional: true
+    help_text:
+      properties:
+        help_text: Choose the layout for where the screen is placed.
+        options:
+          - label: Lobby (logo and date header)
+            value: lobby
+          - label: Poster (message only)
+            value: poster
+        type: select
+      schema_version: 1
   override_locale:
     type: string
     default_value: en

src/app.test.ts

@@ -1,7 +1,7 @@
 import { describe, test, expect, beforeEach, afterEach } from 'bun:test'
 import { setupScreenlyMock, resetScreenlyMock } from '@screenly/edge-apps/test'
 
-import init from './app'
+import init, { getHeadingSizeClass } from './app'
 
 describe('Welcome App', () => {
   beforeEach(() => {
@@ -57,4 +57,31 @@ describe('Welcome App', () => {
       'to the team',
     )
   })
+
+  test('steps a long heading down in size', () => {
+    setupScreenlyMock({}, { welcome_heading: 'Welcome to our headquarters' })
+    init()
+
+    const headingEl = document.querySelector('#welcome-heading')
+    expect(headingEl?.classList.contains('is-long')).toBe(true)
+  })
+})
+
+describe('getHeadingSizeClass', () => {
+  test('returns no class for a short heading', () => {
+    expect(getHeadingSizeClass('Welcome')).toBe('')
+  })
+
+  test('returns is-long past 16 characters', () => {
+    expect(getHeadingSizeClass('a'.repeat(17))).toBe('is-long')
+  })
+
+  test('returns is-very-long past 34 characters', () => {
+    expect(getHeadingSizeClass('a'.repeat(35))).toBe('is-very-long')
+  })
+
+  test('treats the thresholds as exclusive', () => {
+    expect(getHeadingSizeClass('a'.repeat(16))).toBe('')
+    expect(getHeadingSizeClass('a'.repeat(34))).toBe('is-long')
+  })
 })

src/app.ts

@@ -1,5 +1,16 @@
 import { getSettingWithDefault, signalReady } from '@screenly/edge-apps'
 
+const LONG_HEADING_CHARS = 16
+const VERY_LONG_HEADING_CHARS = 34
+
+// The greeting is customer free text; a long one steps down in size instead
+// of wrapping off the canvas
+export function getHeadingSizeClass(text: string): string {
+  if (text.length > VERY_LONG_HEADING_CHARS) return 'is-very-long'
+  if (text.length > LONG_HEADING_CHARS) return 'is-long'
+  return ''
+}
+
 export default function init() {
   const welcomeHeading = getSettingWithDefault<string>(
     'welcome_heading',
@@ -12,6 +23,9 @@ export default function init() {
 
   const headingEl =
     document.querySelector<HTMLParagraphElement>('#welcome-heading')!
+  headingEl.className = ['welcome-heading', getHeadingSizeClass(welcomeHeading)]
+    .filter(Boolean)
+    .join(' ')
   headingEl.textContent = welcomeHeading
 
   const messageEl =