mirror of
https://github.com/screentinker/screentinker.git
synced 2026-06-15 02:33:15 -06:00
0cfa09046c
Ports the ScreenTinker player to a Tizen TV / signage web app, speaking the SAME /device socket.io protocol as the Android player — no server changes; a Tizen display pairs from the same dashboard. - app.js: device protocol client — register (pairing_code | device_id+token), device:registered/paired/unpaired/playlist-update, 15s heartbeat, keep-awake. Always reaches the server prompt until the display is actually paired; a saved-but-unreachable server falls back to the prompt (no blank screen); BACK returns to it. - player.js: fullscreen single-zone renderer — image (duration timer), video (play-to-end + loop), YouTube (iframe embed), widget (iframe render endpoint). - config.xml: Tizen TV manifest; build-wgt.sh packages (signs if Tizen CLI present, else unsigned); README covers URL-Launcher and signed-.wgt deploy. Validated: headless protocol test vs the live server passed end-to-end (register -> pair -> reconnect-auth -> playlist(2) -> content 200); loads + renders in Chromium with no JS errors. Not yet ported (fullscreen single-zone covers most signage): multi-zone, video walls, screenshots, remote control, self-OTA. .wgt is a build artifact (gitignored).
73 lines
2.3 KiB
CSS
73 lines
2.3 KiB
CSS
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
html, body {
|
|
width: 100%; height: 100%;
|
|
background: #000; color: #f1f5f9;
|
|
font-family: "Samsung One", "Tizen Sans", Arial, sans-serif;
|
|
overflow: hidden;
|
|
cursor: none;
|
|
}
|
|
|
|
.screen {
|
|
position: absolute; top: 0; left: 0;
|
|
width: 100%; height: 100%;
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.hidden { display: none !important; }
|
|
|
|
/* Setup / pairing card */
|
|
.card {
|
|
background: #111827;
|
|
border: 1px solid #1f2937;
|
|
border-radius: 18px;
|
|
padding: 48px 64px;
|
|
text-align: center;
|
|
max-width: 760px;
|
|
}
|
|
.card h1 { color: #3b82f6; font-size: 44px; margin-bottom: 6px; }
|
|
.sub { color: #94a3b8; font-size: 22px; margin-bottom: 36px; }
|
|
.card label { display: block; text-align: left; color: #94a3b8; font-size: 18px; margin-bottom: 8px; }
|
|
|
|
#serverUrl {
|
|
width: 100%; font-size: 26px; padding: 16px 20px;
|
|
border-radius: 10px; border: 2px solid #334155;
|
|
background: #0b1220; color: #f1f5f9; margin-bottom: 24px;
|
|
}
|
|
#serverUrl:focus { outline: none; border-color: #3b82f6; }
|
|
|
|
button {
|
|
font-size: 24px; font-weight: bold; color: #fff;
|
|
background: #3b82f6; border: none; border-radius: 10px;
|
|
padding: 16px 40px; cursor: pointer;
|
|
}
|
|
button:focus { outline: 3px solid #93c5fd; }
|
|
button.ghost { background: transparent; color: #64748b; font-size: 18px; margin-top: 24px; padding: 8px; }
|
|
|
|
.status { color: #64748b; font-size: 18px; margin-top: 20px; min-height: 24px; }
|
|
.status.error { color: #ef4444; }
|
|
|
|
/* Pairing code */
|
|
.code {
|
|
font-size: 96px; font-weight: bold; letter-spacing: 16px;
|
|
color: #22c55e; margin: 24px 0; font-family: monospace;
|
|
}
|
|
.hint { color: #94a3b8; font-size: 20px; line-height: 1.5; }
|
|
|
|
/* Playback stage */
|
|
.stage { background: #000; }
|
|
.stage img, .stage video, .stage iframe {
|
|
position: absolute; top: 0; left: 0;
|
|
width: 100%; height: 100%; border: 0;
|
|
}
|
|
.stage img.contain, .stage video.contain { object-fit: contain; }
|
|
.stage img.cover, .stage video.cover { object-fit: cover; }
|
|
.stage img.fill, .stage video.fill { object-fit: fill; }
|
|
|
|
/* Toast */
|
|
.toast {
|
|
position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
|
|
background: rgba(17,24,39,0.92); color: #f1f5f9;
|
|
padding: 12px 24px; border-radius: 10px; font-size: 18px;
|
|
border: 1px solid #334155;
|
|
}
|