nuvio-tizen 1.0.0

package/README.md

@@ -0,0 +1,107 @@
+# Nuvio for Tizen (UN50MU6100 / Tizen 3.0)
+
+A **from-scratch Tizen web-app reimplementation** of [Nuvio](https://github.com/paytonlowe/NuvioStreaming)'s
+core behaviour, targeting 2017 Samsung TVs (Tizen 3.0, ~Chromium 47).
+
+> **Why a rewrite and not a port?** The upstream Nuvio apps are React Native / Expo
+> (Android TV, iOS). Samsung Tizen TVs run *web apps*, not React Native and not Android
+> APKs. So this project reuses Nuvio's **data model** (Stremio addons for catalogs,
+> metadata and streams) but is written as plain, old-Chromium-safe HTML/JS/CSS with
+> Samsung's **AVPlay** API for video.
+
+## What works (v1)
+
+- Loads user-configured **Stremio addons** (defaults to Cinemeta for catalogs + metadata).
+- Home screen with catalog rows + **Continue Watching**.
+- Detail pages: movies (Play) and series (season/episode browser).
+- **Stream aggregation** across all installed stream addons.
+- Playback via **AVPlay** (HLS/DASH/MP4/progressive) with an HTML5 `<video>` fallback
+  when run in a desktop browser for development.
+- OSD with seek (±10s / ±30s), resume, and per-title progress saved to `localStorage`.
+- Full **D-pad + media-key** remote navigation (custom spatial focus engine).
+- Settings screen to add/remove addon manifest URLs.
+
+## Content / legal note
+
+This app hosts **no** media. It is a client for the open Stremio addon protocol, exactly
+like Nuvio: catalogs and metadata come from **Cinemeta** (official), and playable sources
+come from whatever **stream addons you add yourself** in Settings. Streams that only expose
+a torrent `infoHash` (no HTTP URL) are listed but not playable — AVPlay needs a direct
+HTTP(S)/HLS/DASH URL, and this app embeds no torrent/debrid engine.
+
+---
+
+## Install path A — TizenBrew (recommended, no cert signing)
+
+TizenBrew supports **Tizen 3.0–6.0** (your MU6100 is exactly at the 3.0 floor).
+TizenBrew app modules are just web pages served to the TV; `package.json` here is already
+a valid module manifest (`packageType: "app"`, `appPath: "index.html"`).
+
+Two ways to load it:
+
+**1. Publish to npm** and add it as a module in the TizenBrew MMENU:
+```bash
+npm publish            # from this folder (name: nuvio-tizen)
+```
+Then in TizenBrew on the TV: MMENU → add module → `nuvio-tizen`.
+
+**2. Local dev without publishing** — serve this folder and point a small wrapper package
+at it, or use the [`@tizenbrew-kit/cli`](https://github.com/thichcode/tizenbrew-kit) dev
+server. Simplest smoke test is Install path B's `chrome://` / desktop preview below.
+
+## Install path B — Tizen Studio `.wgt` (sideload)
+
+`config.xml` + `icon.png` make this a standalone Tizen TV widget.
+
+```bash
+# From this project folder, with Tizen Studio CLI on PATH:
+tizen build-web -- .
+tizen package -t wgt -s <your-cert-profile> -- .buildResult
+# Put the TV in Developer Mode (Apps → 12345 → set host PC IP), then:
+tizen install -n NuvioTizen.wgt -t <TV-device-name>
+```
+`required_version="2.4"` matches the Tizen 3.0 TV web API level.
+
+## Develop / test on desktop first
+
+Because everything is plain web tech, you can run the UI in any browser
+(AVPlay is absent, so it uses the `<video>` fallback — good for testing navigation,
+addon loading, and playable HTTP streams):
+
+```bash
+cd "NuvioTizen"
+python3 -m http.server 8080
+# open http://localhost:8080  — use arrow keys + Enter, Backspace = RETURN/back
+```
+> Note: browser CORS may block some addon hosts on desktop; on the TV the widget's
+> `<access origin="*">` (and TizenBrew's environment) allow the cross-origin calls.
+
+---
+
+## Architecture
+
+| File | Responsibility |
+|------|----------------|
+| `index.html` | Layout, video planes (`<object avplayer>` + `<video>` fallback), OSD |
+| `js/polyfills.js` | Feature-guarded shims for Chromium 47 |
+| `js/util.js` | DOM helpers, XHR-JSON, `localStorage`, toast/spinner, concurrency |
+| `js/stremio.js` | Stremio addon client: manifests, catalog/meta/stream, resource matching |
+| `js/keys.js` | Registers TV media keys; maps keyCodes → symbolic actions |
+| `js/focus.js` | Geometry-based spatial (D-pad) focus engine |
+| `js/player.js` | AVPlay lifecycle + HTML5 fallback, OSD, resume/progress |
+| `js/views.js` | Home / Detail / Settings rendering |
+| `js/app.js` | Bootstrap + navigation stack + key routing |
+
+### JS compatibility rules (Tizen 3.0 ≈ Chromium 47)
+No `async`/`await`, no ES6 classes, no destructuring, no default params, no object spread.
+`Promise`, `fetch`-era XHR, template literals, and arrow functions are fine.
+
+## Known limitations / roadmap
+
+- **Untested on the physical TV** — AVPlay quirks (some HLS variants, DRM) will need
+  device iteration. Start with the desktop `<video>` smoke test, then a known-good HTTP
+  MP4/HLS stream addon on the set.
+- No Trakt sync, no search UI, no subtitles yet (Stremio subtitle resource + AVPlay
+  `setSubtitleFile` is the next addition).
+- On-screen keyboard for adding addons relies on the TV IME focusing the `<input>`.
+- Catalog pagination ("load more") not yet wired (fetches first page only).

package/config.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets"
+        id="http://nuvio.tizen/NuvioTizen" version="1.0.0" viewmodes="maximized">
+    <tizen:application id="Nuvio00001.Nuvio" package="Nuvio00001" required_version="2.4"/>
+    <content src="index.html"/>
+    <feature name="http://tizen.org/feature/screen.size.all"/>
+    <icon src="icon.png"/>
+    <name>Nuvio</name>
+    <tizen:privilege name="http://tizen.org/privilege/internet"/>
+    <tizen:privilege name="http://tizen.org/privilege/tv.inputdevice"/>
+    <tizen:privilege name="http://tizen.org/privilege/application.launch"/>
+    <!-- Cross-origin XHR to any addon host -->
+    <access origin="*" subdomains="true"/>
+    <tizen:profile name="tv"/>
+    <tizen:setting screen-orientation="landscape" context-menu="disable"
+                   background-support="disable" encryption="disable"
+                   install-location="auto" hwkey-event="enable"/>
+</widget>

package/css/style.css

@@ -0,0 +1,106 @@
+/* Nuvio for Tizen 3.0 — conservative CSS (no CSS grid gap edge cases, flexbox is fine on Chromium 47) */
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+html, body {
+    width: 1920px;
+    height: 1080px;
+    overflow: hidden;
+    background: #0e1117;
+    color: #e6e9ef;
+    font-family: Arial, "Tizen Sans", sans-serif;
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+/* --- Video planes --- */
+#av-player, #html5-player {
+    position: absolute;
+    top: 0; left: 0;
+    width: 1920px; height: 1080px;
+    background: #000;
+    display: none;
+    z-index: 1;
+}
+#av-player.active, #html5-player.active { display: block; }
+
+#app { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; z-index: 10; }
+.screen { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; }
+.hidden { display: none !important; }
+
+/* --- Header --- */
+.header { height: 96px; padding: 30px 60px 0 60px; display: flex; align-items: center; }
+.brand { font-size: 40px; font-weight: bold; color: #818cf8; letter-spacing: 1px; }
+.brand .dot { color: #e6e9ef; }
+.header .spacer { flex: 1; }
+.header .gear { font-size: 30px; opacity: 0.7; }
+
+/* --- Rows --- */
+.rows { position: absolute; top: 110px; left: 0; right: 0; bottom: 0; overflow: hidden; }
+.row { margin: 0 0 34px 0; }
+.row-title { font-size: 26px; font-weight: bold; margin: 0 0 12px 60px; color: #c7cbd4; }
+.row-scroller { white-space: nowrap; padding: 0 60px; overflow: hidden; }
+
+/* --- Cards --- */
+.card {
+    display: inline-block;
+    width: 200px;
+    height: 300px;
+    margin-right: 22px;
+    border-radius: 10px;
+    background: #1a1f2b;
+    vertical-align: top;
+    position: relative;
+    overflow: hidden;
+    border: 4px solid transparent;
+}
+.card .poster { width: 100%; height: 100%; display: block; background-size: cover; background-position: center; }
+.card .fallback { display: flex; align-items: center; justify-content: center; height: 100%; padding: 10px; font-size: 20px; color: #8b93a5; text-align: center; white-space: normal; }
+.card .cap { position: absolute; bottom: 0; left: 0; right: 0; padding: 26px 10px 8px 10px; font-size: 18px; background: linear-gradient(transparent, rgba(0,0,0,0.85)); white-space: normal; line-height: 1.2; max-height: 70px; overflow: hidden; }
+.card .prog { position: absolute; bottom: 0; left: 0; height: 6px; background: #818cf8; }
+
+/* --- Focus state (TV) --- */
+.focusable.focused { border-color: #818cf8; box-shadow: 0 0 0 2px rgba(129,140,248,0.6); }
+.card.focusable.focused { transform: scale(1.06); z-index: 5; }
+.pill.focusable.focused, .stream.focusable.focused, .ep.focusable.focused { background: #818cf8; color: #0e1117; }
+.gear.focusable.focused { opacity: 1; color: #818cf8; }
+
+/* --- Detail screen --- */
+.detail-hero { position: absolute; top: 0; left: 0; right: 0; height: 620px; background-size: cover; background-position: center top; }
+.detail-hero .shade { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(14,17,23,0.96) 30%, rgba(14,17,23,0.35) 100%), linear-gradient(0deg, #0e1117 4%, transparent 40%); }
+.detail-body { position: absolute; top: 150px; left: 60px; width: 1000px; }
+.detail-title { font-size: 54px; font-weight: bold; margin-bottom: 14px; }
+.detail-meta { font-size: 22px; color: #a7adba; margin-bottom: 18px; }
+.detail-desc { font-size: 22px; line-height: 1.45; color: #cfd3dc; max-height: 200px; overflow: hidden; margin-bottom: 26px; }
+.btn-row { margin-top: 10px; }
+.pill { display: inline-block; padding: 14px 30px; margin-right: 16px; border-radius: 30px; background: #1a1f2b; font-size: 22px; border: 4px solid transparent; }
+
+/* Episode + stream lists */
+.list-panel { position: absolute; top: 640px; left: 60px; right: 60px; bottom: 40px; overflow: hidden; }
+.season-bar { margin-bottom: 14px; white-space: nowrap; }
+.ep, .stream { display: block; padding: 16px 22px; margin-bottom: 10px; background: #161b26; border-radius: 8px; font-size: 22px; border: 4px solid transparent; white-space: normal; }
+.ep .ep-sub, .stream .s-sub { display: block; font-size: 17px; color: #9aa2b1; margin-top: 4px; }
+.list-scroll { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; }
+
+/* Settings */
+.settings-wrap { position: absolute; top: 120px; left: 60px; right: 60px; }
+.settings-wrap h2 { font-size: 30px; margin-bottom: 20px; }
+.addon-item { padding: 16px 20px; margin-bottom: 10px; background: #161b26; border-radius: 8px; font-size: 20px; border: 4px solid transparent; word-break: break-all; white-space: normal; }
+.addon-item .a-name { font-weight: bold; }
+.addon-item .a-url { font-size: 15px; color: #8b93a5; }
+.hint { color: #8b93a5; font-size: 18px; margin-top: 20px; line-height: 1.5; }
+
+/* --- Player OSD --- */
+#player-osd { position: absolute; left: 0; right: 0; bottom: 0; height: 220px; z-index: 20; padding: 40px 60px; background: linear-gradient(transparent, rgba(0,0,0,0.9)); }
+#osd-title { font-size: 30px; font-weight: bold; margin-bottom: 20px; }
+#osd-bar { position: relative; height: 8px; background: rgba(255,255,255,0.2); border-radius: 4px; }
+#osd-buffer { position: absolute; top: 0; left: 0; height: 8px; background: rgba(255,255,255,0.35); border-radius: 4px; width: 0; }
+#osd-progress { position: absolute; top: 0; left: 0; height: 8px; background: #818cf8; border-radius: 4px; width: 0; z-index: 2; }
+#osd-times { display: flex; justify-content: space-between; margin-top: 10px; font-size: 20px; color: #cfd3dc; }
+#osd-hint { margin-top: 14px; font-size: 18px; color: #8b93a5; }
+
+/* --- Toast + spinner --- */
+#toast { position: absolute; bottom: 60px; left: 50%; margin-left: -300px; width: 600px; text-align: center; z-index: 40; background: rgba(0,0,0,0.85); padding: 18px 24px; border-radius: 10px; font-size: 22px; }
+#spinner { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.3); }
+.spin { width: 70px; height: 70px; border: 7px solid rgba(255,255,255,0.2); border-top-color: #818cf8; border-radius: 50%; -webkit-animation: sp 0.9s linear infinite; animation: sp 0.9s linear infinite; }
+@-webkit-keyframes sp { to { -webkit-transform: rotate(360deg); } }
+@keyframes sp { to { transform: rotate(360deg); } }

package/index.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=1920, height=1080, user-scalable=no">
+    <title>Nuvio</title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <!-- AVPlay video plane (Tizen). Sits behind the UI; shown only during playback. -->
+    <object type="application/avplayer" id="av-player"></object>
+    <!-- HTML5 fallback for desktop/dev testing when webapis.avplay is absent -->
+    <video id="html5-player" playsinline></video>
+
+    <div id="app">
+        <div id="screen-home" class="screen"></div>
+        <div id="screen-detail" class="screen hidden"></div>
+        <div id="screen-settings" class="screen hidden"></div>
+    </div>
+
+    <!-- Player OSD overlay (over the video plane) -->
+    <div id="player-osd" class="hidden">
+        <div id="osd-title"></div>
+        <div id="osd-bar"><div id="osd-progress"></div><div id="osd-buffer"></div></div>
+        <div id="osd-times"><span id="osd-cur">00:00</span><span id="osd-dur">00:00</span></div>
+        <div id="osd-hint">OK: Play/Pause &nbsp; &larr;/&rarr;: Seek &nbsp; RETURN: Back</div>
+    </div>
+
+    <div id="toast" class="hidden"></div>
+    <div id="spinner" class="hidden"><div class="spin"></div></div>
+
+    <!-- Load order matters: polyfills -> util -> data -> input -> player -> views -> app -->
+    <script src="js/polyfills.js"></script>
+    <script src="js/util.js"></script>
+    <script src="js/stremio.js"></script>
+    <script src="js/keys.js"></script>
+    <script src="js/focus.js"></script>
+    <script src="js/player.js"></script>
+    <script src="js/views.js"></script>
+    <script src="js/app.js"></script>
+</body>
+</html>

package/js/app.js

@@ -0,0 +1,78 @@
+/* Bootstrap + navigation router. Global namespace: App */
+var App = (function () {
+    'use strict';
+
+    var _current = 'home';
+    var _stack = [];   // frames: { screen, focus }
+
+    function screenEl(name) { return U.byId('screen-' + name); }
+
+    function showScreen(name) {
+        ['home', 'detail', 'settings'].forEach(function (n) {
+            screenEl(n).className = 'screen' + (n === name ? '' : ' hidden');
+        });
+        _current = name;
+    }
+
+    function pushFrame() { _stack.push({ screen: _current, focus: Focus.current() }); }
+
+    function openDetail(type, id) {
+        if (!id) { return; }
+        pushFrame();
+        showScreen('detail');
+        Views.renderDetail(type, id);
+    }
+
+    function openSettings() {
+        pushFrame();
+        showScreen('settings');
+        Views.renderSettings();
+    }
+
+    function back() {
+        if (Player.isActive()) { Player.exit(); return; }
+        if (_current === 'detail' && Views.backInDetail()) { return; }
+        var f = _stack.pop();
+        if (!f) { tryExitApp(); return; }
+        showScreen(f.screen);
+        Focus.setScope(screenEl(f.screen), f.focus);
+    }
+
+    function tryExitApp() {
+        try {
+            if (window.tizen && tizen.application) {
+                tizen.application.getCurrentApplication().exit();
+                return;
+            }
+        } catch (e) {}
+        U.toast('Press RETURN again to exit'); // fallback on non-Tizen
+    }
+
+    function onKey(action) {
+        if (Player.isActive()) { return Player.handleKey(action); }
+        switch (action) {
+            case 'LEFT': Focus.move('LEFT'); return true;
+            case 'RIGHT': Focus.move('RIGHT'); return true;
+            case 'UP': Focus.move('UP'); return true;
+            case 'DOWN': Focus.move('DOWN'); return true;
+            case 'OK': Focus.clickCurrent(); return true;
+            case 'BACK': back(); return true;
+            default: return true;
+        }
+    }
+
+    function start() {
+        Player.init();
+        Keys.init();
+        Keys.setHandler(onKey);
+        showScreen('home');
+        Views.renderHome();
+    }
+
+    return {
+        start: start, back: back,
+        openDetail: openDetail, openSettings: openSettings
+    };
+})();
+
+window.onload = function () { App.start(); };

package/js/focus.js

@@ -0,0 +1,96 @@
+/* Spatial focus navigation for the D-pad. Global namespace: Focus
+   Any element with class "focusable" participates. */
+var Focus = (function () {
+    'use strict';
+
+    var _scope = null;
+    var _current = null;
+
+    function items() {
+        if (!_scope) { return []; }
+        var nodes = _scope.querySelectorAll('.focusable');
+        var out = [];
+        for (var i = 0; i < nodes.length; i++) {
+            var n = nodes[i];
+            var r = n.getBoundingClientRect();
+            if (r.width > 0 && r.height > 0) { out.push(n); }
+        }
+        return out;
+    }
+
+    function setFocus(node) {
+        if (!node) { return; }
+        if (_current && _current !== node && _current.classList) { _current.classList.remove('focused'); }
+        _current = node;
+        if (node.classList) { node.classList.add('focused'); }
+        ensureVisible(node);
+    }
+
+    function ensureVisible(node) {
+        var p = node.parentNode;
+        while (p && p.nodeType === 1 && p !== document.body) {
+            var canX = p.scrollWidth > p.clientWidth + 2;
+            var canY = p.scrollHeight > p.clientHeight + 2;
+            if (canX || canY) {
+                var pr = p.getBoundingClientRect();
+                var nr = node.getBoundingClientRect();
+                if (canX) {
+                    var mx = 90;
+                    if (nr.left < pr.left + mx) { p.scrollLeft -= (pr.left + mx - nr.left); }
+                    else if (nr.right > pr.right - mx) { p.scrollLeft += (nr.right - (pr.right - mx)); }
+                }
+                if (canY) {
+                    var my = 70;
+                    if (nr.top < pr.top + my) { p.scrollTop -= (pr.top + my - nr.top); }
+                    else if (nr.bottom > pr.bottom - my) { p.scrollTop += (nr.bottom - (pr.bottom - my)); }
+                }
+            }
+            p = p.parentNode;
+        }
+    }
+
+    function move(dir) {
+        var list = items();
+        if (!list.length) { return; }
+        if (!_current || list.indexOf(_current) === -1) { setFocus(list[0]); return; }
+
+        var r = _current.getBoundingClientRect();
+        var cx = r.left + r.width / 2, cy = r.top + r.height / 2;
+        var best = null, bestScore = Infinity;
+
+        for (var i = 0; i < list.length; i++) {
+            var node = list[i];
+            if (node === _current) { continue; }
+            var b = node.getBoundingClientRect();
+            var bx = b.left + b.width / 2, by = b.top + b.height / 2;
+            var dx = bx - cx, dy = by - cy;
+            var primary, cross;
+            if (dir === 'LEFT') { if (dx > -1) { continue; } primary = -dx; cross = Math.abs(dy); }
+            else if (dir === 'RIGHT') { if (dx < 1) { continue; } primary = dx; cross = Math.abs(dy); }
+            else if (dir === 'UP') { if (dy > -1) { continue; } primary = -dy; cross = Math.abs(dx); }
+            else { if (dy < 1) { continue; } primary = dy; cross = Math.abs(dx); }
+            var score = primary + cross * 2.2;
+            if (score < bestScore) { bestScore = score; best = node; }
+        }
+        if (best) { setFocus(best); }
+    }
+
+    // scope: root element to search within. preferred: optional element to focus first.
+    function setScope(scope, preferred) {
+        _scope = scope;
+        _current = null;
+        var list = items();
+        if (preferred && list.indexOf(preferred) !== -1) { setFocus(preferred); }
+        else if (list.length) { setFocus(list[0]); }
+    }
+
+    function current() { return _current; }
+    function clickCurrent() { if (_current) { fireClick(_current); } }
+    function fireClick(node) {
+        if (node.__onselect) { node.__onselect(node); return; }
+        if (node.click) { node.click(); }
+    }
+
+    return { setScope: setScope, move: move, setFocus: setFocus, current: current,
+             clickCurrent: clickCurrent, refresh: function () { return items(); } };
+})();

package/js/keys.js

@@ -0,0 +1,56 @@
+/* Remote control input. Global namespace: Keys
+   Registers TV media keys and normalizes keyCodes into symbolic actions. */
+var Keys = (function () {
+    'use strict';
+
+    var CODE = {
+        37: 'LEFT', 38: 'UP', 39: 'RIGHT', 40: 'DOWN',
+        13: 'OK',
+        10009: 'BACK',      // RETURN
+        415: 'PLAY',
+        19: 'PAUSE',
+        10252: 'PLAYPAUSE',
+        413: 'STOP',
+        417: 'FF',
+        412: 'REW',
+        427: 'CHUP', 428: 'CHDOWN'
+    };
+
+    // Names to register via the TVInputDevice API (arrows/OK/RETURN are always on).
+    var REGISTER = [
+        'MediaPlay', 'MediaPause', 'MediaPlayPause', 'MediaStop',
+        'MediaRewind', 'MediaFastForward',
+        'MediaTrackPrevious', 'MediaTrackNext'
+    ];
+
+    function register() {
+        try {
+            if (window.tizen && tizen.tvinputdevice && tizen.tvinputdevice.registerKey) {
+                REGISTER.forEach(function (name) {
+                    try { tizen.tvinputdevice.registerKey(name); } catch (e) {}
+                });
+            }
+        } catch (e) {}
+    }
+
+    var _handler = null;
+    function setHandler(fn) { _handler = fn; }
+
+    function onKeyDown(ev) {
+        var action = CODE[ev.keyCode];
+        if (!action) { return; }
+        if (_handler) {
+            var handled = _handler(action, ev);
+            if (handled !== false) {
+                if (ev.preventDefault) { ev.preventDefault(); }
+            }
+        }
+    }
+
+    function init() {
+        register();
+        document.addEventListener('keydown', onKeyDown, false);
+    }
+
+    return { init: init, setHandler: setHandler, CODE: CODE };
+})();