feat(asset-metadata): migrate and redesign asset metadata app

edge-apps/asset-metadata/.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+dist/
+*.log
+.DS_Store
+screenshots/*.png

edge-apps/asset-metadata/.ignore

@@ -0,0 +1 @@
+node_modules/

edge-apps/asset-metadata/README.md

@@ -1,82 +1,60 @@
-# Screenly Asset Metadata
+# Asset Metadata
 
-![Screenly Asset Metadata App Preview](static/images/asset-metadata-app-preview.jpg)
-
-This Edge App displays the screen metadata - Hostname, Screen Name, Position , Hardware name, Firmware version, Labels, etc.
-
-## Prerequisites
-
-- [Bun (1.2.2+)](https://bun.sh/docs/installation)
-- [Screenly Edge App CLI (v1.0.3+)](https://github.com/Screenly/cli?tab=readme-ov-file#installation)
+Displays screen metadata on Screenly digital signage players, including hostname, screen name, hardware type, firmware version, GPS coordinates, and assigned labels.
 
 ## Getting Started
 
 ```bash
 bun install
-screenly edge-app create \
-    --name=EDGE_APP_NAME \
-    --in-place
 ```
 
-## Create an Edge App Instance via CLI
+## Development
 
 ```bash
-screenly edge-app instance create --name=EDGE_APP_INSTANCE_NAME
+bun run dev
 ```
 
-## Deployment
+## Building
 
 ```bash
-bun run deploy
+bun run build
 ```
 
-> [!NOTE]
-> The `deploy` command takes care of building the app as well.
-
-## Development
-
-Install the dependencies for the first run:
+## Testing
 
 ```bash
-bun install
+bun run test
 ```
 
-Run the development environment with a single command:
+## Linting & Formatting
 
 ```bash
-bun run dev
+bun run lint
+bun run format
 ```
 
-This will build in watch mode and start the development server via [Screenly CLI](https://github.com/Screenly/cli).
-
-## Unit Tests
+## Deployment
 
-To run unit tests:
+Create and deploy the Edge App:
 
 ```bash
-bun run test:unit
+screenly edge-app create --name asset-metadata --in-place
+bun run deploy
+screenly edge-app instance create
 ```
 
-Press `q` to quit the test runner.
-
-## E2E Tests
+## Screenshots
 
-Install dependencies for the first run:
+Generate screenshots at all supported resolutions:
 
 ```bash
-bun run playwright install-deps
-bun run playwright install
+bun run screenshots
 ```
 
-To run E2E tests:
-
-```bash
-bun run test:e2e
-```
+Screenshots are saved to the `screenshots/` directory.
 
-### Linting and Formatting
+## Configuration
 
-```bash
-bun run lint
-bun run format
-```
+| Setting          | Description                            | Type     | Default |
+| ---------------- | -------------------------------------- | -------- | ------- |
+| `display_errors` | Display errors on screen for debugging | optional | `false` |

edge-apps/asset-metadata/e2e/screenshots.spec.ts

@@ -0,0 +1,42 @@
+import { test } from '@playwright/test'
+import {
+  createMockScreenlyForScreenshots,
+  getScreenshotsDir,
+  RESOLUTIONS,
+  setupClockMock,
+  setupScreenlyJsMock,
+} from '@screenly/edge-apps/test/screenshots'
+import path from 'path'
+
+const { screenlyJsContent } = createMockScreenlyForScreenshots(
+  {
+    coordinates: [40.7128, -74.006],
+    location: 'New York, NY',
+    tags: ['lobby', 'floor-2', 'new-york', 'retail', 'north-wing', 'entrance', 'demo'],
+  },
+  {
+    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()
+
+    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,
+    })
+
+    await context.close()
+  })
+}