From a0311c031e582db66233aa3488974f776c1199a3 Mon Sep 17 00:00:00 2001 From: Jos Vooges | STH Date: Mon, 7 Sep 2026 19:16:30 +0200 Subject: [PATCH] Add Samsung Tizen TV web client. Focus-friendly VMC shell for Tizen with live TV and playback against the master API. Co-authored-by: Cursor --- apps/tizen-tv/README.md | 12 + apps/tizen-tv/TIZEN-CONSTRAINTS.md | 79 ++ apps/tizen-tv/package.ps1 | 36 + apps/tizen-tv/www/config.xml | 16 + apps/tizen-tv/www/css/app.css | 1078 ++++++++++++++++++++++ apps/tizen-tv/www/icon.png | Bin 0 -> 29004 bytes apps/tizen-tv/www/img/icon.png | Bin 0 -> 29004 bytes apps/tizen-tv/www/index.html | 149 +++ apps/tizen-tv/www/js/api.js | 163 ++++ apps/tizen-tv/www/js/app.js | 1346 ++++++++++++++++++++++++++++ apps/tizen-tv/www/js/focus.js | 100 +++ apps/tizen-tv/www/js/live.js | 366 ++++++++ apps/tizen-tv/www/js/player.js | 764 ++++++++++++++++ apps/tizen-tv/www/js/polyfill.js | 59 ++ 14 files changed, 4168 insertions(+) create mode 100644 apps/tizen-tv/README.md create mode 100644 apps/tizen-tv/TIZEN-CONSTRAINTS.md create mode 100644 apps/tizen-tv/package.ps1 create mode 100644 apps/tizen-tv/www/config.xml create mode 100644 apps/tizen-tv/www/css/app.css create mode 100644 apps/tizen-tv/www/icon.png create mode 100644 apps/tizen-tv/www/img/icon.png create mode 100644 apps/tizen-tv/www/index.html create mode 100644 apps/tizen-tv/www/js/api.js create mode 100644 apps/tizen-tv/www/js/app.js create mode 100644 apps/tizen-tv/www/js/focus.js create mode 100644 apps/tizen-tv/www/js/live.js create mode 100644 apps/tizen-tv/www/js/player.js create mode 100644 apps/tizen-tv/www/js/polyfill.js diff --git a/apps/tizen-tv/README.md b/apps/tizen-tv/README.md new file mode 100644 index 0000000..b2c12d1 --- /dev/null +++ b/apps/tizen-tv/README.md @@ -0,0 +1,12 @@ +# Media Cluster — Samsung Tizen 1.2.0 + +Cinematic UI (Netflix-achtig), Tizen-veilige CSS. IPTV werkt hetzelfde, wel visueel strakker. + +## Install + +`apps/android-tv/dist/vonas-mediacluster-tizen-1.2.0.wgt` via Apps2Samsung → Custom WGT. + +```powershell +cd apps/tizen-tv +.\package.ps1 +``` diff --git a/apps/tizen-tv/TIZEN-CONSTRAINTS.md b/apps/tizen-tv/TIZEN-CONSTRAINTS.md new file mode 100644 index 0000000..f8e9ccd --- /dev/null +++ b/apps/tizen-tv/TIZEN-CONSTRAINTS.md @@ -0,0 +1,79 @@ +# Samsung Tizen — bouwconstraints (officiële docs) + +Bronnen (raadpleeg bij elke grotere change): + +- [Web Engine Specifications](https://developer.samsung.com/smarttv/develop/specifications/web-engine-specifications.html) +- [General Specifications](https://developer.samsung.com/smarttv/develop/specifications/general-specifications.html) +- [AVPlay playback](https://developer.samsung.com/smarttv/develop/guides/multimedia/media-playback/using-avplay.html) +- [W3C/HTML5 API References](https://developer.samsung.com/smarttv/develop/api-references/w3chtml5-api-references.html) +- [Web API References](https://developer.samsung.com/smarttv/develop/api-references/web-api-references.html) +- [TV Device setup / Developer Mode](https://developer.samsung.com/smarttv/develop/getting-started/using-sdk/tv-device.html) + +## Doelplatform + +We mikken op **Tizen 5.5+ (2020, Chromium ~M69)** als ondergrens, met voorkeurstest op nieuwere sets. +TV-webengine wordt **niet** geüpdatet na aankoopjaar — feature-matrix per jaargang geldt. + +| Jaar | Tizen | Chromium (indicatief) | +|------|-------|------------------------| +| 2020 | 5.5 | M69 | +| 2021 | 6.0 | M76 | +| 2022 | 6.5 | M85 | +| 2023 | 7.0 | M94 | +| 2024 | 8.0 | M108 | + +## CSS — vermijden tot bewezen op target + +Volgens Samsung Web Engine Specs (check matrix vóór gebruik): + +| Feature | Let op | +|---------|--------| +| `inset` | **Nee** op oudere engines (o.a. tot ~Tizen 6.x/7.x in matrix als No) → gebruik `top/right/bottom/left` | +| `gap` (flex) | Beperkt / pas later breed → liever margins | +| CSS Grid | Pas later volledig → liever absolute/float/inline-block/flex zonder gap | +| `aspect-ratio`, `dvh`, `:is()`, `:where()`, `:focus-visible` | Modern — niet aannemen | +| `object-fit` | Ja vanaf Tizen 3+ volgens matrix; poster-covers toch liever `background-size: cover` in vast kader + `overflow: hidden` | + +Veilig: flexbox (zonder gap), transforms, transitions (basis), `border-radius`, `box-shadow`, absolute layouts, `background-size/position`. + +## JavaScript + +- ES5-stijl is het veiligst voor breed bereik; ES6 (Promise, arrow, let/const) checken in de Samsung ES6-tabel voor jouw minimumjaar. +- **Geen** aanname van Node/browser globals: altijd `window` of IIFE `(function (global) { ... })(window)`. +- `fetch`: polyfill/XHR achter de hand houden voor oudere engines. +- Geen emoji als enige UI-signaal (font/glyph-support wisselt). + +## AVPlay (productie-playback) + +Volgens Samsung AVPlay guide: + +1. Privilege: `http://developer.samsung.com/privilege/avplay` in `config.xml` +2. Script: `$WEBAPIS/webapis/webapis.js` (lazy laden mag) +3. State machine: `open` → `setDisplayRect` / listener / DRM → `prepare`/`prepareAsync` → `play` +4. `prepare` niet op UI-thread blokkeren → **`prepareAsync`** +5. Object `type="application/avplayer"` alleen tonen tijdens playback (anders fullscreen zwart vlak) +6. Netwerk: `access origin` + internet privilege; HTTPS/certificaten/host bereikbaarheid checken bij `PLAYER_ERROR_CONNECT_FAILED` +7. HTML5 `