phimpal-tv 0.2.1 → 0.2.3

package/README.md

@@ -113,6 +113,21 @@ swallow all input — that looked like a frozen cursor with a dead Return key. S
 - page scans are memoised (a TV CPU was re-computing the same styles hundreds of times per
   key), held keys are coalesced, and carousels are recognised structurally so paging also
   works on Tizen ≤ 6.5, whose Chromium ignores `overflow-x: clip`.
+- (0.2.2) a **black box**: the last 40 steps (key, mode, focus, scope, paging…) are written to
+  `localStorage['tv-trace']` as they happen. If a session ends in the middle of a key, the
+  **next launch** shows the last 12 steps in the same red box for 25 s — so after a freeze,
+  relaunch the module and photograph that box.
+- (0.2.2) a navigation scope (dialog/menu) now has to be on screen **and** contain something
+  focusable; an element merely carrying `role="dialog"` cannot trap the keys any more, and a
+  scope that refuses to close is ignored afterwards.
+- (0.2.3) **low-gfx rendering** on the TV: all CSS transitions, `backdrop-filter`, and the
+  filters/shadows on the card popup and the player are removed. A freeze with no error and no
+  trace points at the renderer, not at the script — TV compositors are known to stall on
+  `backdrop-blur` and on a 500 ms transform over a row of 4K posters. Restore the site's
+  effects with `localStorage['tv-gfx'] = 'full'`.
+- (0.2.3) the running **version is announced** bottom-right for 2 s at startup
+  (`PhimPal TV 0.2.3 · low-gfx`). If you don't see the version you just published, TizenBrew
+  is still serving a cached module: remove and re-add it in the module manager.
 
 ## Known limits
 

package/mod.js

@@ -1,4 +1,4 @@
-// PhimPal TV v0.2.1 — generated by build.js from phimpal-tv.user.js, do not edit.
+// PhimPal TV v0.2.3 — generated by build.js from phimpal-tv.user.js, do not edit.
 // TizenBrew site-modification module for https://phimpal.com/
 (function registerRemoteKeys() {
   try {
@@ -13,9 +13,11 @@
 
   // ------------------------------------------------------------------ config
   const CFG = {
+    version: '0.2.3',
     keyboardEmulation: false,  // remote key codes only
     debug: (function () { try { return localStorage.getItem('tv-debug') === '1'; } catch (e) { return false; } })(), // badge off unless asked
     hideCursor: true,          // the D-pad replaces the pointer
+    lowGfx: (function () { try { return localStorage.getItem('tv-gfx') !== 'full'; } catch (e) { return true; } })(), // flat rendering unless tv-gfx=full
     seekSteps: [10, 30, 60, 300], // seconds per press, accelerates while you keep pressing
     seekAccelWindow: 800,      // ms between presses to accelerate
     chanSeek: 300,             // Channel up/down step inside seek mode, seconds
@@ -67,6 +69,28 @@
     } catch (x) { /* ignore */ }
   }
   const safe = (where, fn) => function () { try { return fn.apply(this, arguments); } catch (e) { report(where, e); } };
+
+  // Black box: the last steps are written to localStorage as they happen. If the previous
+  // session died mid-key (frozen page, app killed), the next launch shows that tail on screen.
+  const TRACE_KEY = 'tv-trace', TRACE_MAX = 40;
+  let traceBuf = [];
+  function trace(msg) {
+    traceBuf.push((Date.now() % 100000) + ' ' + msg);
+    if (traceBuf.length > TRACE_MAX) traceBuf.shift();
+    try { localStorage.setItem(TRACE_KEY, traceBuf.join('\n')); } catch (e) { /* ignore */ }
+  }
+  function showPreviousTrace() {
+    let prev = null; try { prev = localStorage.getItem(TRACE_KEY); } catch (e) { /* ignore */ }
+    if (!prev || !/\bkey \d+ start\b(?![\s\S]*\bkey end\b)/.test(prev)) return; // previous session ended cleanly
+    const tail = prev.split('\n').slice(-12).join('\n');
+    try {
+      let b = $('#tv-error');
+      if (!b) { b = document.createElement('pre'); b.id = 'tv-error'; document.body.appendChild(b); }
+      b.textContent = 'phimpal-tv — previous session ended mid-key:\n' + tail;
+      b.style.opacity = '1';
+      clearTimeout(errTimer); errTimer = setTimeout(() => { b.style.opacity = '0'; }, 25000);
+    } catch (e) { /* ignore */ }
+  }
   const rectOf = (el) => el.getBoundingClientRect();
   const isWatch = () => /^\/watch\//.test(location.pathname);
   const isHome = () => location.pathname === '/';
@@ -187,14 +211,23 @@
   }
   const hoverMenuOpen = () => !!S.hoverTrigger && !!currentScope(); // aria-expanded goes stale, the rendered menu doesn't
 
-  // dialogs / menus that should capture navigation
+  // dialogs / menus that should capture navigation.
+  // A scope must be on screen AND contain something to focus: an element that merely
+  // carries role="dialog" (a toast, an off-screen drawer, a banner) would otherwise trap
+  // every key — arrows find nothing inside it and Back cannot close it. Scopes that refuse
+  // to close are blacklisted for the rest of the page.
   const subPanel = () => $('.vjs-subtitle-panel.is-open');
+  const deadScopes = new WeakSet();
   function currentScope() {
     const list = $$('.vjs-modal-dialog:not(.vjs-hidden), [role="dialog"], [role="alertdialog"], [role="menu"], [data-scope="menu"][data-part="content"], [data-scope="popover"][data-part="content"], [data-scope="dialog"][data-part="content"]');
     const dialog = list.find((e) => {
+      if (deadScopes.has(e)) return false;
       if (e.closest('.video-js') && !e.classList.contains('vjs-modal-dialog')) return false;
+      if (e.closest('aside')) return false; // mobile drawer, parked off-screen with a transform
       const r = rectOf(e);
-      return r.width > 0 && r.height > 0 && styleVisible(e);
+      if (!(r.width > 0 && r.height > 0 && styleVisible(e))) return false;
+      if (r.right <= 0 || r.bottom <= 0 || r.left >= innerWidth || r.top >= innerHeight) return false; // off-screen
+      return $$(CAND, e).some((c) => c !== e && isVisibleBlock(c)); // has something to focus
     });
     if (dialog) return dialog; // a caption-settings modal opens on top of the subtitle panel
     const sp = subPanel();
@@ -289,15 +322,19 @@
     if (!canClick(btn)) return false;
     const item = block.closest('.shrink-0') || block;
     const sib = dir === A.RIGHT ? item.nextElementSibling : item.previousElementSibling;
+    trace('page click ' + dir);
     btn.click();
+    trace('page clicked');
     setTimeout(safe('page', () => {
       let t = sib && (sib.matches('.group') ? sib : sib.querySelector('.group'));
       if (!(t && isVisibleBlock(t))) {
         const vis = withScanCache(() => $$('.group', car.clip).filter(isVisibleBlock));
         t = dir === A.RIGHT ? vis[0] : vis[vis.length - 1];
       }
+      trace('page settled target=' + describe(t));
       if (t) setFocus(t); else badge('page: no card');
-    }), CFG.carouselAnimMs);
+      trace('page done');
+    }), CFG.lowGfx ? 80 : CFG.carouselAnimMs); // no transition to wait for in low-gfx mode
     return true;
   }
   function rowsOnPage() {
@@ -326,6 +363,7 @@
   }
   function setFocus(block, opts = {}) {
     if (!block) return;
+    trace('focus ' + describe(block));
     if (S.focused !== block) clearFocus();
     S.focused = block;
     if (isCard(block)) { block.classList.add('tv-focus'); (popupOf(block) || block).classList.add('tv-focus-ring'); }
@@ -697,7 +735,8 @@
     const scope = currentScope();
     const blocks = collectBlocks(scope);
     let t = pickTarget(f, dir, blocks);
-    if (!t && (dir === A.LEFT || dir === A.RIGHT) && pageCarousel(f, dir)) return;
+    trace('move ' + dir + ' scope=' + describe(scope) + ' blocks=' + blocks.length + ' target=' + describe(t));
+    if (!t && (dir === A.LEFT || dir === A.RIGHT) && pageCarousel(f, dir)) { trace('paging ' + dir); return; }
     if (!t && dir === A.UP && !scope && scrollY > 0) {
       window.scrollTo({ top: 0, behavior: 'smooth' });
       setTimeout(() => { const t2 = pickTarget(S.focused, A.UP, collectBlocks()); if (t2) setFocus(t2); }, 450);
@@ -715,7 +754,9 @@
     if (scope && scope.classList.contains('vjs-subtitle-panel')) return closeSubPanel();
     const hoverT = S.hoverTrigger;
     const finish = () => {
-      if (currentScope()) return; // still open, stay in scope
+      const still = currentScope();
+      if (still === scope) { deadScopes.add(scope); trace('scope refused to close, ignoring it'); } // never trap the user
+      else if (still) return; // a different dialog is open, stay in it
       if (S.returnMode) { const m = S.returnMode; S.returnMode = null; return m === 'PLAYER' ? enterPlayer() : enterBar(); }
       const back = S.beforeScope || hoverT; S.beforeScope = null;
       if (back && isVisibleBlock(back)) return setFocus(back, { noHover: true }); // don't re-open a hover menu
@@ -769,8 +810,16 @@
     badge('reset: ' + why, true);
   }
   function onKeySafe(e) {
+    const known = TIZEN_KEYS[e.keyCode] || (CFG.keyboardEmulation && KB_KEYS[e.keyCode]);
+    if (known) trace('key ' + e.keyCode + ' start mode=' + S.mode + ' sub=' + S.sub + ' focus=' + describe(S.focused));
     try { onKey(e); }
     catch (err) { report('key ' + e.keyCode, err); try { hardReset('error'); } catch (x) { report('reset', x); } }
+    if (known) trace('key end mode=' + S.mode + ' focus=' + describe(S.focused));
+  }
+  function describe(el) {
+    if (!el) return 'none';
+    const a = el.tagName === 'A' ? el : (el.querySelector && el.querySelector('a[href]'));
+    return el.tagName + (el.id ? '#' + el.id : '') + '.' + (el.className + '').trim().split(/\s+/).slice(0, 2).join('.') + (a && a.getAttribute('href') ? '[' + a.getAttribute('href').slice(0, 30) + ']' : '');
   }
   function onKey(e) {
     if (e.__tv) return;
@@ -810,6 +859,7 @@
       if (S.mode !== 'NAV') { S.returnMode = S.mode === 'SEEK' ? 'PLAYER' : S.mode; clearSeek(); S.mode = 'NAV'; S.sub = null; S.menu = null; }
       if (!S.focused || !scope.contains(S.focused)) {
         const bl = collectBlocks(scope);
+        trace('scope grabbed key: ' + describe(scope) + ' blocks=' + bl.length);
         if (bl.length) { S.beforeScope = S.focused; setFocus(bl[0]); if (act !== A.BACK) return; }
       }
     } else if (S.returnMode) {
@@ -914,7 +964,15 @@
                   pointer-events: none; opacity: 0; transition: opacity .3s; }
       #tv-badge { position: fixed; top: 12px; right: 12px; z-index: 2147483647; font: 13px/1.2 ui-monospace, monospace; padding: 6px 10px;
                   background: rgba(0,0,0,.75); color: #fff; border-radius: 6px; pointer-events: none; opacity: 0; transition: opacity .3s; white-space: pre; }
-    ` + (CFG.hideCursor ? '\n      html, body, * { cursor: none !important; }' : '');
+    ` + (CFG.hideCursor ? '\n      html, body, * { cursor: none !important; }' : '')
+      + (CFG.lowGfx ? `
+      /* TV compositors stall on backdrop-filter, large filters and animated transforms over
+         a dozen 4K posters: render everything flat and instant. */
+      *, *::before, *::after { transition: none !important; animation-duration: 0s !important;
+                               backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
+      .group.tv-focus .group-hover\\:block, .video-js, .video-js * { filter: none !important; box-shadow: none !important; }
+      header { background: rgba(10, 12, 20, .96) !important; }
+      .tv-focus-ring { box-shadow: none; }` : '');
     // Chromium < 90 ignores `overflow-x: clip`, which would spill every carousel across the
     // page; `hidden` is the closest thing it understands.
     let clipOk = true; try { clipOk = CSS.supports('overflow-x', 'clip'); } catch (e) { clipOk = false; }
@@ -936,6 +994,10 @@
   function init() {
     if (window.__tvNav && window.__tvNav.destroy) window.__tvNav.destroy(); // hot re-install (dev)
     injectCSS();
+    showPreviousTrace();
+    trace('init ' + CFG.version + ' ' + location.pathname + ' ' + innerWidth + 'x' + innerHeight);
+    // always announce the running build once, so a stale module cache is obvious
+    setTimeout(() => badge('PhimPal TV ' + CFG.version + (CFG.lowGfx ? ' · low-gfx' : ''), true), 800);
     addEventListener('keydown', onKeySafe, true);
     patchHistory();
     const onRouteSafe = safe('route', checkRoute);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phimpal-tv",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "D-pad (TV remote) navigation for phimpal.com on Samsung Tizen TVs, as a TizenBrew site-modification module.",
   "appName": "PhimPal TV",
   "packageType": "mods",