@hatfiller/tizenpstream 1.0.0 → 1.0.2

package/README.md

@@ -5,7 +5,8 @@ TizenBrew **site modification** module for [P-Stream](https://pstream.mov) on Sa
 ## Install
 
 1. Install [TizenBrew](https://github.com/reisxd/TizenBrew) on your Samsung Tizen TV.
-2. In TizenBrew’s module manager, add `@hatfiller/tizenpstream` as an NPM module.
+2. **App (launcher):** In the module manager add **`tizenpstream-app`** (no @). This gives you a **PStream** tile; opening it launches pstream.mov in the app view so you can navigate with the remote like a normal Tizen app.
+3. **Mod (navigation + keys):** Add **`@hatfiller/tizenpstream`** so D-pad, Enter, Back, and media keys work on pstream.mov. Enter exactly **`@hatfiller/tizenpstream`** (no `npm/` in front). If you see “unknown module”, try **`hatfiller/tizenpstream`** (without `@`).
 
 ## What it does
 
@@ -16,10 +17,20 @@ TizenBrew **site modification** module for [P-Stream](https://pstream.mov) on Sa
 
 The script is written in ES5-style JS for compatibility with older Tizen WebKit.
 
+### See your TV’s Tizen / device info (debug)
+
+- **Once on load:** A small debug overlay appears for about 6 seconds with your TV’s user agent and Tizen build info (if available).
+- **Anytime:** Press the **0** key on the remote to show or hide the same overlay (UA, Tizen API, build). Press **0** or **Back** again to close it.
+
 ## Module type
 
 This is a **site modification** module (`packageType: "mods"`). It injects `mods/userScript.js` (or `dist/userScript.js`) into `https://pstream.mov` when you open it via TizenBrew.
 
+## Repo layout
+
+- **Mod (this package):** `@hatfiller/tizenpstream` — injects into pstream.mov for remote navigation and debug overlay.
+- **App launcher:** `tizen-pstream-app/` — package **`tizenpstream-app`** (unscoped); add it in TizenBrew for a PStream tile. Publish from that folder with `npm publish --access public`.
+
 ## Build
 
 ```bash

package/dist/userScript.js

@@ -16,8 +16,40 @@
   /** @type {HTMLVideoElement | null} */
   var lastKnownVideo = null;
 
+  var FOCUS_CLASS = 'tizenpstream-focus';
+  var lastFocused = null;
+
+  function injectFocusStyles() {
+    if (document.getElementById('tizenpstream-focus-styles')) return;
+    var style = document.createElement('style');
+    style.id = 'tizenpstream-focus-styles';
+    style.textContent = [
+      '*:focus { outline: 4px solid #00d4ff !important; outline-offset: 2px !important; box-shadow: 0 0 0 6px rgba(0,212,255,0.4) !important; }',
+      '.' + FOCUS_CLASS + ' { outline: 4px solid #00d4ff !important; outline-offset: 2px !important; box-shadow: 0 0 0 6px rgba(0,212,255,0.4) !important; }',
+      'video.' + FOCUS_CLASS + ' { outline: 4px solid #00d4ff !important; }'
+    ].join('\n');
+    (document.head || document.documentElement).appendChild(style);
+  }
+
+  function makeFocusable(el) {
+    if (el && !el.disabled && el.getAttribute('tabindex') === null) {
+      try { el.setAttribute('tabindex', '0'); } catch (err) {}
+    }
+  }
+
+  function ensureClickablesFocusable() {
+    var sel = '[onclick], [role="button"], [role="link"], [role="option"], [data-href], [data-link], [data-action], a, button, [tabindex]';
+    var nodes = document.querySelectorAll(sel);
+    for (var i = 0; i < nodes.length; i++) {
+      var n = nodes[i];
+      if (n.offsetParent !== null && (n.getAttribute('tabindex') === null || n.getAttribute('tabindex') === '')) {
+        makeFocusable(n);
+      }
+    }
+  }
+
   function getFocusableSelector() {
-    return 'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"]), input:not([disabled]), select, textarea, [onclick], video';
+    return 'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"]), input:not([disabled]), select, textarea, [onclick], [role="button"], [role="link"], [role="option"], [data-href], video';
   }
 
   function getFocusables(container) {
@@ -26,13 +58,29 @@
     var list = [];
     for (var i = 0; i < nodes.length; i++) {
       var n = nodes[i];
-      if (n.offsetParent !== null && !n.disabled) {
+      if (n.offsetParent !== null && !n.disabled && n.offsetWidth > 0 && n.offsetHeight > 0) {
         list.push(n);
       }
     }
     return list;
   }
 
+  function setFocusRing(el) {
+    if (lastFocused && lastFocused !== el) {
+      lastFocused.classList.remove(FOCUS_CLASS);
+    }
+    lastFocused = el;
+    if (el) {
+      el.classList.add(FOCUS_CLASS);
+      el.focus();
+      try {
+        el.scrollIntoView({ block: 'nearest', behavior: 'auto', inline: 'nearest' });
+      } catch (err) {
+        el.scrollIntoView(true);
+      }
+    }
+  }
+
   function getVisibleCenter(el) {
     var r = el.getBoundingClientRect();
     return { x: r.left + r.width / 2, y: r.top + r.height / 2 };
@@ -62,10 +110,98 @@
         best = cand;
       }
     }
-    return best;
+    if (best) return best;
+    var idx = focusables.indexOf(current);
+    if (idx === -1) return focusables[0] || null;
+    if (dir === 'right' || dir === 'down') return focusables[idx + 1] || focusables[0] || null;
+    if (dir === 'left' || dir === 'up') return focusables[idx - 1] || focusables[focusables.length - 1] || null;
+    return null;
+  }
+
+  function registerTVKeys() {
+    try {
+      if (typeof tizen !== 'undefined' && tizen.tvinputdevice) {
+        var keys = [
+          'MediaPlayPause', 'MediaPlay', 'MediaPause', 'MediaStop',
+          'MediaFastForward', 'MediaRewind', 'MediaTrackNext', 'MediaTrackPrevious'
+        ];
+        for (var i = 0; i < keys.length; i++) {
+          try {
+            tizen.tvinputdevice.registerKey(keys[i]);
+          } catch (err) {}
+        }
+      }
+    } catch (err) {}
+  }
+
+  function trackVideo() {
+    var v = document.querySelector('video');
+    if (v && v !== lastKnownVideo) {
+      lastKnownVideo = v;
+      v.addEventListener('play', function () {
+        lastKnownVideo = v;
+      });
+    }
+  }
+
+  var KEY_0 = 48;
+  var debugOverlay = null;
+
+  function getTizenDebugInfo(cb) {
+    var out = { userAgent: navigator.userAgent, tizen: 'no' };
+    try {
+      if (typeof tizen !== 'undefined') {
+        out.tizen = 'yes';
+        if (tizen.systeminfo && tizen.systeminfo.getPropertyValue) {
+          tizen.systeminfo.getPropertyValue('BUILD', function (build) {
+            out.build = typeof build === 'object' ? JSON.stringify(build) : String(build);
+            cb(out);
+          }, function () { cb(out); });
+          return;
+        }
+      }
+    } catch (e) {
+      out.error = String(e.message || e);
+    }
+    cb(out);
+  }
+
+  function showDebugOverlay() {
+    getTizenDebugInfo(function (info) {
+      if (debugOverlay && debugOverlay.parentNode) {
+        debugOverlay.parentNode.removeChild(debugOverlay);
+        debugOverlay = null;
+        return;
+      }
+      var lines = [
+        'PStream mod debug',
+        'UA: ' + (info.userAgent || '').substring(0, 80),
+        'Tizen: ' + info.tizen,
+        info.build ? 'Build: ' + info.build : '',
+        info.error ? 'Err: ' + info.error : ''
+      ].filter(Boolean);
+      var div = document.createElement('div');
+      div.id = 'tizenpstream-debug-overlay';
+      div.style.cssText = 'position:fixed;top:20px;left:20px;right:20px;max-width:90%;background:rgba(0,0,0,0.9);color:#0f0;font:14px monospace;padding:12px;z-index:999999;border:2px solid #0f0;white-space:pre-wrap;word-break:break-all;';
+      div.textContent = lines.join('\n');
+      div.addEventListener('keydown', function (e) {
+        if (e.keyCode === KEY_0 || e.keyCode === KEY_BACK) {
+          if (div.parentNode) div.parentNode.removeChild(div);
+          debugOverlay = null;
+        }
+      });
+      document.body.appendChild(div);
+      debugOverlay = div;
+      div.focus();
+    });
   }
 
   function handleKeydown(e) {
+    if (e.keyCode === KEY_0) {
+      showDebugOverlay();
+      e.preventDefault();
+      return false;
+    }
     var key = e.keyCode;
     var dir = null;
     if (key === KEY_LEFT) dir = 'left';
@@ -76,12 +212,12 @@
     if (dir) {
       var focusables = getFocusables();
       var current = document.activeElement;
-      if (!current || current === document.body) {
+      if (!current || current === document.body || focusables.indexOf(current) === -1) {
         current = focusables[0] || null;
       }
       var next = findNeighbor(current, focusables, dir);
       if (next) {
-        next.focus();
+        setFocusRing(next);
         e.preventDefault();
         e.stopPropagation();
         return false;
@@ -90,12 +226,25 @@
 
     if (key === KEY_ENTER) {
       var target = document.activeElement;
-      if (target && target.tagName === 'VIDEO') {
+      if (!target || target === document.body) {
+        var focusables = getFocusables();
+        if (focusables[0]) setFocusRing(focusables[0]);
+        e.preventDefault();
+        return false;
+      }
+      if (target.tagName === 'VIDEO') {
         if (target.paused) target.play();
         else target.pause();
         e.preventDefault();
         return false;
       }
+      if (target.tagName === 'A' || target.getAttribute('role') === 'button' || target.getAttribute('role') === 'link' || target.onclick || target.getAttribute('onclick')) {
+        try {
+          target.click();
+        } catch (err) {}
+        e.preventDefault();
+        return false;
+      }
     }
 
     if (key === KEY_BACK) {
@@ -109,37 +258,31 @@
     return true;
   }
 
-  function registerTVKeys() {
-    try {
-      if (typeof tizen !== 'undefined' && tizen.tvinputdevice) {
-        var keys = [
-          'MediaPlayPause', 'MediaPlay', 'MediaPause', 'MediaStop',
-          'MediaFastForward', 'MediaRewind', 'MediaTrackNext', 'MediaTrackPrevious'
-        ];
-        for (var i = 0; i < keys.length; i++) {
-          try {
-            tizen.tvinputdevice.registerKey(keys[i]);
-          } catch (err) {}
-        }
-      }
-    } catch (err) {}
-  }
-
-  function trackVideo() {
-    var v = document.querySelector('video');
-    if (v && v !== lastKnownVideo) {
-      lastKnownVideo = v;
-      v.addEventListener('play', function () {
-        lastKnownVideo = v;
-      });
-    }
-  }
-
+  var debugShownOnce = false;
   function init() {
+    injectFocusStyles();
+    ensureClickablesFocusable();
     registerTVKeys();
     document.addEventListener('keydown', handleKeydown, true);
     trackVideo();
     setInterval(trackVideo, 2000);
+    setInterval(ensureClickablesFocusable, 3000);
+    setTimeout(function () {
+      var focusables = getFocusables();
+      if (focusables[0]) setFocusRing(focusables[0]);
+    }, 500);
+    if (!debugShownOnce) {
+      debugShownOnce = true;
+      setTimeout(function () {
+        showDebugOverlay();
+        setTimeout(function () {
+          if (debugOverlay && debugOverlay.parentNode) {
+            debugOverlay.parentNode.removeChild(debugOverlay);
+            debugOverlay = null;
+          }
+        }, 6000);
+      }, 1500);
+    }
   }
 
   if (document.readyState === 'loading') {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hatfiller/tizenpstream",
   "appName": "PStream",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "TizenBrew module for P-Stream (pstream.mov) on Samsung Tizen TVs — TV remote support and focus handling for pre-2022 and older Tizen.",
   "packageType": "mods",
   "websiteURL": "https://pstream.mov",
@@ -15,6 +15,7 @@
     "type": "git",
     "url": "git+https://github.com/perlytiara/TizenPStream.git"
   },
+  "keywords": ["tizenbrew", "tizen", "pstream", "samsung-tv"],
   "keys": [
     "MediaPlayPause",
     "MediaPlay",