Skip to content

Commit 96acfac

Browse files
nicomiguelinoclaudeCopilot
authored
feat(simple-timer): add new edge app with timer functionality (#684)
Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
1 parent f6eec7d commit 96acfac

19 files changed

Lines changed: 2003 additions & 0 deletions

File tree

‎edge-apps/edge-apps-library/src/test/setup.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,5 @@ global.navigator = dom.window.navigator
1414
global.Node = dom.window.Node
1515
global.HTMLElement = dom.window.HTMLElement
1616
global.customElements = dom.window.customElements
17+
global.getComputedStyle = dom.window.getComputedStyle
18+
global.SVGSVGElement = dom.window.SVGSVGElement

‎edge-apps/simple-timer/.gitignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
node_modules/
2+
dist/
3+
*.log
4+
.DS_Store
5+
static/js/*.js
6+
static/js/*.js.map

‎edge-apps/simple-timer/.ignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules/

‎edge-apps/simple-timer/README.md‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# Screenly Simple Timer App
2+
3+
## Getting Started
4+
5+
```bash
6+
bun install
7+
```
8+
9+
## Deployment
10+
11+
Create and deploy the Edge App:
12+
13+
```bash
14+
screenly edge-app create --name my-simple-timer --in-place
15+
bun run deploy
16+
screenly edge-app instance create
17+
```
18+
19+
## Configuration
20+
21+
The app accepts the following settings via `screenly.yml`:
22+
23+
- `display_errors` - Display detailed error messages on screen for debugging purposes (optional, advanced, default: 'false')
24+
- `duration` - Timer duration in seconds (e.g., 60 for 1 minute, 300 for 5 minutes, 3600 for 1 hour) (required, default: '60')
25+
- `override_locale` - Override the default locale with a supported language code (e.g., en, fr, de). Defaults to English if not specified (optional)
26+
- `override_timezone` - Override the default timezone with a supported timezone identifier (e.g., Europe/London, America/New_York). Defaults to the system timezone if left blank (optional)
27+
28+
## Development
29+
30+
```bash
31+
bun install # Install dependencies
32+
bun run dev # Start development server
33+
```
34+
35+
## Testing
36+
37+
```bash
38+
bun test
39+
```

‎edge-apps/simple-timer/bun.lock‎

Lines changed: 1122 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎edge-apps/simple-timer/index.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Simple Timer - Screenly Edge App</title>
7+
<script src="screenly.js?version=1"></script>
8+
<link rel="stylesheet" href="dist/css/style.css" />
9+
</head>
10+
<body>
11+
<auto-scaler
12+
reference-width="1920"
13+
reference-height="1080"
14+
orientation="auto"
15+
>
16+
<div id="app">
17+
<app-header class="header"></app-header>
18+
<main class="content">
19+
<section class="timer-section">
20+
<div class="date-text" data-date>--</div>
21+
<div class="timer-card">
22+
<div class="progress-ring-container" data-progress-ring></div>
23+
<div class="timer-display">
24+
<div class="timer-digits" data-timer-digits>00:00:00</div>
25+
<div class="timer-total" data-timer-total>--</div>
26+
</div>
27+
</div>
28+
</section>
29+
</main>
30+
</div>
31+
</auto-scaler>
32+
<template id="timer-digits-template">
33+
<span data-time-prefix></span
34+
><span class="accent" data-time-seconds></span>
35+
</template>
36+
<script src="dist/js/main.js"></script>
37+
</body>
38+
</html>

‎edge-apps/simple-timer/package.json‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "simple-timer",
3+
"version": "1.0.0",
4+
"type": "module",
5+
"scripts": {
6+
"prebuild": "bun run type-check",
7+
"generate-mock-data": "screenly edge-app run --generate-mock-data",
8+
"predev": "bun run generate-mock-data && edge-apps-scripts build",
9+
"dev": "run-p build:dev edge-app-server",
10+
"edge-app-server": "screenly edge-app run",
11+
"build": "edge-apps-scripts build",
12+
"build:dev": "edge-apps-scripts build:dev",
13+
"build:prod": "edge-apps-scripts build",
14+
"test": "bun test",
15+
"test:unit": "bun test",
16+
"lint": "edge-apps-scripts lint --fix",
17+
"format": "prettier --write src/ README.md index.html",
18+
"format:check": "prettier --check src/ README.md index.html",
19+
"deploy": "bun run build && screenly edge-app deploy",
20+
"type-check": "edge-apps-scripts type-check",
21+
"prepare": "cd ../edge-apps-library && bun install && bun run build"
22+
},
23+
"dependencies": {},
24+
"prettier": "../edge-apps-library/.prettierrc.json",
25+
"devDependencies": {
26+
"@screenly/edge-apps": "workspace:../edge-apps-library",
27+
"@types/bun": "^1.3.7",
28+
"@types/jsdom": "^27.0.0",
29+
"bun-types": "^1.3.7",
30+
"jsdom": "^27.4.0",
31+
"npm-run-all2": "^8.0.4",
32+
"prettier": "^3.8.1",
33+
"typescript": "^5.9.3"
34+
}
35+
}

‎edge-apps/simple-timer/screenly.yml‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
syntax: manifest_v1
3+
description: Screenly Simple Timer Edge App
4+
icon: https://playground.srly.io/edge-apps/simple-timer/static/img/icon.svg
5+
author: Screenly, Inc.
6+
ready_signal: true
7+
settings:
8+
display_errors:
9+
type: string
10+
default_value: 'false'
11+
title: Display Errors
12+
optional: true
13+
help_text:
14+
properties:
15+
advanced: true
16+
help_text: For debugging purposes to display errors on the screen.
17+
type: boolean
18+
schema_version: 1
19+
duration:
20+
type: string
21+
default_value: '60'
22+
title: Duration
23+
optional: false
24+
help_text:
25+
properties:
26+
help_text: Timer duration in seconds (e.g., 60 for 1 minute, 300 for 5 minutes, 3600 for 1 hour).
27+
type: number
28+
schema_version: 1
29+
override_locale:
30+
type: string
31+
default_value: en
32+
title: Override Locale
33+
optional: true
34+
help_text: |
35+
Override the default locale with a supported language code (e.g., en, fr, de). Defaults to English if not specified.
36+
override_timezone:
37+
type: string
38+
default_value: ''
39+
title: Override Timezone
40+
optional: true
41+
help_text: |
42+
Override the default timezone with a supported timezone identifier (e.g., Europe/London, America/New_York). Defaults to the system timezone if left blank.

‎edge-apps/simple-timer/screenly_qc.yml‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
syntax: manifest_v1
3+
description: Screenly Simple Timer Edge App
4+
icon: https://playground.srly.io/edge-apps/simple-timer/static/img/icon.svg
5+
author: Screenly, Inc.
6+
ready_signal: true
7+
settings:
8+
display_errors:
9+
type: string
10+
default_value: 'false'
11+
title: Display Errors
12+
optional: true
13+
help_text:
14+
properties:
15+
advanced: true
16+
help_text: For debugging purposes to display errors on the screen.
17+
type: boolean
18+
schema_version: 1
19+
duration:
20+
type: string
21+
default_value: '60'
22+
title: Duration
23+
optional: false
24+
help_text:
25+
properties:
26+
help_text: Timer duration in seconds (e.g., 60 for 1 minute, 300 for 5 minutes, 3600 for 1 hour).
27+
type: number
28+
schema_version: 1
29+
override_locale:
30+
type: string
31+
default_value: en
32+
title: Override Locale
33+
optional: true
34+
help_text: |
35+
Override the default locale with a supported language code (e.g., en, fr, de). Defaults to English if not specified.
36+
override_timezone:
37+
type: string
38+
default_value: ''
39+
title: Override Timezone
40+
optional: true
41+
help_text: |
42+
Override the default timezone with a supported timezone identifier (e.g., Europe/London, America/New_York). Defaults to the system timezone if left blank.

‎edge-apps/simple-timer/src/css/style.css‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
/* Import Screenly Design System */
2+
@import '@screenly/edge-apps/styles';
3+
4+
@font-face {
5+
font-family: 'Inria Sans';
6+
src: url('/static/fonts/InriaSans-Bold.ttf') format('truetype');
7+
font-weight: 700;
8+
font-style: normal;
9+
font-display: swap;
10+
}
11+
12+
@font-face {
13+
font-family: 'Inria Sans';
14+
src: url('/static/fonts/InriaSans-Regular.ttf') format('truetype');
15+
font-weight: 400;
16+
font-style: normal;
17+
font-display: swap;
18+
}
19+
20+
:root {
21+
--theme-color-primary: #ac1fff;
22+
}
23+
24+
* {
25+
box-sizing: border-box;
26+
}
27+
28+
body {
29+
margin: 0;
30+
padding: 0;
31+
overflow: hidden;
32+
color: white;
33+
font-family: 'Inter', system-ui, sans-serif;
34+
background: url('/static/images/bg.webp') no-repeat center center;
35+
background-size: cover;
36+
text-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.25);
37+
}
38+
39+
body::before {
40+
content: '';
41+
position: fixed;
42+
inset: 0;
43+
z-index: var(--z-index-backdrop);
44+
pointer-events: none;
45+
background: rgba(0, 0, 0, 0.2);
46+
backdrop-filter: blur(7px);
47+
}
48+
49+
auto-scaler {
50+
position: relative;
51+
z-index: var(--z-index-content);
52+
}
53+
54+
#app {
55+
width: 100%;
56+
height: 100%;
57+
}
58+
59+
.content {
60+
display: flex;
61+
justify-content: center;
62+
align-items: center;
63+
height: calc(100% - 5rem);
64+
}
65+
66+
.timer-section {
67+
display: flex;
68+
flex-direction: column;
69+
align-items: center;
70+
gap: 2rem;
71+
}
72+
73+
.date-text {
74+
font-family: 'Inter', system-ui, sans-serif;
75+
font-size: 2.8125rem;
76+
font-weight: 400;
77+
color: white;
78+
letter-spacing: -0.1125rem;
79+
text-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.25);
80+
}
81+
82+
.timer-card {
83+
position: relative;
84+
display: flex;
85+
justify-content: center;
86+
align-items: center;
87+
width: 41.25rem;
88+
height: 41.25rem;
89+
border-radius: 1.5rem;
90+
border: 0.047rem solid rgba(255, 255, 255, 0.1);
91+
background:
92+
linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
93+
linear-gradient(90deg, rgba(68, 68, 68, 0.4), rgba(68, 68, 68, 0.4)),
94+
linear-gradient(
95+
135deg,
96+
rgba(255, 255, 255, 0.08) 0%,
97+
rgba(255, 255, 255, 0.02) 100%
98+
);
99+
box-shadow:
100+
0 0.84rem 2.52rem 0 rgba(0, 0, 0, 0.15),
101+
0 0.047rem 0 0 rgba(255, 255, 255, 0.15) inset,
102+
0 -0.047rem 0 0 rgba(255, 255, 255, 0.05) inset;
103+
}
104+
105+
.progress-ring-container {
106+
position: absolute;
107+
inset: 0;
108+
display: flex;
109+
justify-content: center;
110+
align-items: center;
111+
}
112+
113+
.progress-ring-container svg {
114+
width: 73%;
115+
height: 73%;
116+
}
117+
118+
.timer-display {
119+
position: relative;
120+
display: flex;
121+
flex-direction: column;
122+
align-items: center;
123+
gap: 0.5rem;
124+
z-index: 1;
125+
}
126+
127+
.timer-digits {
128+
font-family: 'Inria Sans', sans-serif;
129+
font-weight: 700;
130+
font-size: 5.8rem;
131+
line-height: 1;
132+
letter-spacing: 0.15rem;
133+
color: white;
134+
font-variant-numeric: tabular-nums;
135+
}
136+
137+
.timer-digits .accent {
138+
color: var(--theme-color-primary);
139+
}
140+
141+
.timer-total {
142+
font-family: 'Inria Sans', sans-serif;
143+
font-weight: 400;
144+
font-size: 1.7rem;
145+
color: rgba(255, 255, 255, 0.7);
146+
}
147+
148+
@media (orientation: portrait) {
149+
#app {
150+
display: flex;
151+
flex-direction: column;
152+
height: 100%;
153+
}
154+
155+
.content {
156+
flex: 1;
157+
height: auto;
158+
}
159+
160+
.timer-card {
161+
width: 36rem;
162+
height: 36rem;
163+
}
164+
165+
.timer-digits {
166+
font-size: 5rem;
167+
}
168+
169+
.date-text {
170+
font-size: 2.4rem;
171+
}
172+
}

0 commit comments

Comments
 (0)