phimpal-tv 0.2.0 → 0.2.2

package/README.md

@@ -100,6 +100,27 @@ Three TV-specific behaviours live in the engine itself:
   site fades it in only while the element really matches `:hover`, which never happens
   with a remote — so the module reveals it itself.
 
+## If it freezes on the TV
+
+Every key is intercepted before it is handled, so an exception inside the module used to
+swallow all input — that looked like a frozen cursor with a dead Return key. Since 0.2.1:
+
+- **Return ×3 within 1.5 s** always resets the module (mode, menus, seek cursor) — the
+  universal escape hatch.
+- any exception is caught, the state is reset automatically, and a **red box bottom-left**
+  shows the error for 10 s. Photograph it: that text is the bug report. The last one is also
+  kept in `localStorage['tv-lasterror']`.
+- 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.
+
 ## Known limits
 
 - The per-track timing button (clock icon) in the subtitle panel is not reachable with the

package/mod.js

@@ -1,4 +1,4 @@
-// PhimPal TV v0.2.0 — generated by build.js from phimpal-tv.user.js, do not edit.
+// PhimPal TV v0.2.2 — generated by build.js from phimpal-tv.user.js, do not edit.
 // TizenBrew site-modification module for https://phimpal.com/
 (function registerRemoteKeys() {
   try {
@@ -50,6 +50,45 @@
   // ------------------------------------------------------------------ dom helpers
   const $ = (s, r = document) => r.querySelector(s);
   const $$ = (s, r = document) => Array.from(r.querySelectorAll(s));
+
+  // ------------------------------------------------------------------ error reporting
+  // On the TV there is no console: any exception in our code is shown on screen (even with
+  // the debug badge off) and kept in localStorage['tv-lasterror'] for the bug report.
+  let errTimer = null;
+  function report(where, e) {
+    const msg = where + ': ' + ((e && e.message) || e) + '\n' + (((e && e.stack) || '').split('\n').slice(1, 3).join('\n'));
+    try { localStorage.setItem('tv-lasterror', new Date().toISOString() + ' ' + msg); } catch (x) { /* ignore */ }
+    try {
+      let b = $('#tv-error');
+      if (!b) { b = document.createElement('pre'); b.id = 'tv-error'; document.body.appendChild(b); }
+      b.textContent = 'phimpal-tv error\n' + msg;
+      b.style.opacity = '1';
+      clearTimeout(errTimer); errTimer = setTimeout(() => { b.style.opacity = '0'; }, 10000);
+    } 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 === '/';
@@ -65,29 +104,47 @@
   const EXCL_SELF = 'button[aria-label="Previous"], button[aria-label="Next"], button[aria-label^="Go to page"]';
   const POPUP = ':scope > .group-hover\\:block';
 
+  // getComputedStyle is the expensive call on a TV CPU; a scan of the page asks for the
+  // same ancestors hundreds of times, so results are memoised for the duration of one scan.
+  let csCache = null, clipCache = null;
+  const cs = (el) => {
+    if (!csCache) return getComputedStyle(el);
+    let v = csCache.get(el); if (!v) { v = getComputedStyle(el); csCache.set(el, v); }
+    return v;
+  };
+  function withScanCache(fn) {
+    const outer = !!csCache;
+    if (!outer) { csCache = new Map(); clipCache = new Map(); }
+    try { return fn(); } finally { if (!outer) { csCache = null; clipCache = null; } }
+  }
   function styleVisible(el) {
-    const cs = getComputedStyle(el);
-    return cs.visibility !== 'hidden' && cs.display !== 'none' && parseFloat(cs.opacity) > 0 && cs.pointerEvents !== 'none';
+    const c = cs(el);
+    return c.visibility !== 'hidden' && c.display !== 'none' && parseFloat(c.opacity) > 0 && c.pointerEvents !== 'none';
   }
   function ancestorsOpaque(el, depth = 4) {
     let n = el.parentElement;
     while (n && n !== document.body && depth-- > 0) {
-      const cs = getComputedStyle(n);
-      if (cs.visibility === 'hidden' || parseFloat(cs.opacity) === 0) return false;
+      const c = cs(n);
+      if (c.visibility === 'hidden' || parseFloat(c.opacity) === 0) return false;
       n = n.parentElement;
     }
     return true;
   }
   // nearest ancestor that clips or scrolls horizontally
   function clipAncestor(el) {
-    let n = el.parentElement;
+    if (clipCache && clipCache.has(el)) return clipCache.get(el);
+    let n = el.parentElement, res = null;
     while (n && n !== document.body) {
-      const ox = getComputedStyle(n).overflowX;
-      if (ox === 'clip' || ox === 'hidden') return { el: n, kind: 'clip' };
-      if (ox === 'auto' || ox === 'scroll') return { el: n, kind: 'scroll' };
+      // the site's rows use `overflow-x: clip`, a value Chromium < 90 (Tizen ≤ 6.5) does not
+      // parse — recognise the row by its class too, so paging works on older TVs
+      if (n.classList.contains('overflow-x-clip')) { res = { el: n, kind: 'clip' }; break; }
+      const ox = cs(n).overflowX;
+      if (ox === 'clip' || ox === 'hidden') { res = { el: n, kind: 'clip' }; break; }
+      if (ox === 'auto' || ox === 'scroll') { res = { el: n, kind: 'scroll' }; break; }
       n = n.parentElement;
     }
-    return null;
+    if (clipCache) clipCache.set(el, res);
+    return res;
   }
   function horizVisible(el, r) {
     const c = clipAncestor(el);
@@ -152,21 +209,31 @@
   }
   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();
     return (sp && rectOf(sp).height > 0) ? sp : null;
   }
 
-  function collectBlocks(scope) {
+  function collectBlocks(scope) { return withScanCache(() => collectBlocksRaw(scope)); }
+  function collectBlocksRaw(scope) {
     const root = scope || document;
     const seen = new Set(), dupes = new Map(), out = [];
     for (const el of $$(CAND, root)) {
@@ -253,15 +320,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();
-    setTimeout(() => {
+    trace('page clicked');
+    setTimeout(safe('page', () => {
       let t = sib && (sib.matches('.group') ? sib : sib.querySelector('.group'));
       if (!(t && isVisibleBlock(t))) {
-        const vis = $$('.group', car.clip).filter(isVisibleBlock);
+        const vis = withScanCache(() => $$('.group', car.clip).filter(isVisibleBlock));
         t = dir === A.RIGHT ? vis[0] : vis[vis.length - 1];
       }
-      if (t) setFocus(t);
-    }, CFG.carouselAnimMs);
+      trace('page settled target=' + describe(t));
+      if (t) setFocus(t); else badge('page: no card');
+      trace('page done');
+    }), CFG.carouselAnimMs);
     return true;
   }
   function rowsOnPage() {
@@ -290,6 +361,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'); }
@@ -312,8 +384,15 @@
   function ensureVisible(el) {
     if (el.closest('header')) return;
     const r = rectOf(el);
+    const c = clipAncestor(el);
+    if (c && c.kind === 'clip') {
+      // never let the browser scroll a carousel row itself (that would fight its translateX
+      // paging); only move the page vertically
+      if (r.top < 90 || r.bottom > innerHeight - 30) window.scrollBy({ top: r.top + r.height / 2 - innerHeight / 2 });
+      return;
+    }
     if (r.top < 90 || r.bottom > innerHeight - 30) el.scrollIntoView({ block: 'center', inline: 'nearest' });
-    else { const c = clipAncestor(el); if (c && c.kind === 'scroll') el.scrollIntoView({ block: 'nearest', inline: 'nearest' }); }
+    else if (c && c.kind === 'scroll') el.scrollIntoView({ block: 'nearest', inline: 'nearest' });
   }
 
   // per-URL focus memory (survives the full reload of the watch page)
@@ -323,8 +402,10 @@
   function hrefOf(b) { const a = b.tagName === 'A' ? b : (isCard(b) ? posterOf(b) : null); return a ? a.getAttribute('href') : null; }
   function remember(block) {
     const m = loadMem();
-    const sc = currentScope();
-    m[memKey()] = { href: hrefOf(block), idx: collectBlocks(sc && sc.contains(block) ? sc : null).indexOf(block) };
+    const href = hrefOf(block);
+    // the index needs a full page scan — only pay for it when there is no href to key on
+    const idx = href ? null : (() => { const sc = currentScope(); return collectBlocks(sc && sc.contains(block) ? sc : null).indexOf(block); })();
+    m[memKey()] = { href, idx };
     saveMem(m);
   }
   function initialFocus() {
@@ -652,7 +733,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);
@@ -670,7 +752,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
@@ -712,12 +796,41 @@
 
   // ------------------------------------------------------------------ key dispatch
   function consume(e) { e.preventDefault(); e.stopImmediatePropagation(); }
+
+  // Whatever happens inside a key handler must never leave the module deaf: every key is
+  // consumed before it is handled, so an exception would otherwise swallow all input.
+  let lastKeyAt = 0, backTaps = [];
+  function hardReset(why) {
+    try { clearSeek(); hoverClose(); } catch (e) { /* ignore */ }
+    S.sub = null; S.menu = null; S.menuItem = null; S.returnMode = null; S.beforeScope = null; S.seekReturn = null;
+    S.focused = null;
+    if (isWatch() && player()) enterPlayer(); else { S.mode = 'NAV'; initialFocus(); }
+    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;
     let act = TIZEN_KEYS[e.keyCode];
     if (!act && CFG.keyboardEmulation) act = KB_KEYS[e.keyCode];
     if (!act) return;
     if (e.repeat && (act === A.OK || act === A.BACK || act === A.PLAY)) return consume(e);
+    // a held D-pad fires faster than a TV can re-scan the page: coalesce repeats
+    const now = Date.now();
+    if (e.repeat && now - lastKeyAt < 120) return consume(e);
+    lastKeyAt = now;
+    // escape hatch: Return three times within 1.5 s always resets the module
+    if (act === A.BACK) { backTaps = backTaps.filter((t) => now - t < 1500).concat(now); if (backTaps.length >= 3) { backTaps = []; consume(e); return hardReset('3× back'); } }
 
     // Back on the home page belongs to the platform: TizenBrew uses it to leave the mod,
     // so let it bubble instead of swallowing it (the user would be stuck otherwise).
@@ -744,6 +857,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) {
@@ -764,8 +878,8 @@
     const t0 = Date.now();
     (function poll() {
       let v = null; try { v = cond(); } catch (e) { /* ignore */ }
-      if (v) return ok(v);
-      if (Date.now() - t0 > timeout) return fail && fail();
+      if (v) return safe('waitFor', ok)(v);
+      if (Date.now() - t0 > timeout) return fail && safe('waitFor:fail', fail)();
       setTimeout(poll, 100);
     })();
   }
@@ -843,14 +957,21 @@
       .video-js.tv-fs .vjs-tech { width: 100% !important; height: 100% !important; object-fit: contain; }
       html.tv-fs-on, html.tv-fs-on body { overflow: hidden !important; }
       html.tv-fs-on header, html.tv-fs-on footer { display: none !important; }
+      #tv-error { position: fixed; left: 16px; bottom: 16px; max-width: 70vw; z-index: 2147483647; margin: 0; white-space: pre-wrap;
+                  font: 15px/1.35 ui-monospace, monospace; color: #fff; background: rgba(160,0,0,.92); padding: 10px 14px; border-radius: 6px;
+                  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; }' : '');
+    // 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; }
+    if (!clipOk) st.textContent += '\n      .overflow-x-clip { overflow-x: hidden !important; }';
     document.head.appendChild(st);
   }
   let badgeTimer = null;
-  function badge(extra) {
-    if (!CFG.debug) return;
+  function badge(extra, force) {
+    if (!CFG.debug && !force) return;
     let b = $('#tv-badge');
     if (!b) { b = document.createElement('div'); b.id = 'tv-badge'; document.body.appendChild(b); }
     const fs = (S.mode !== 'NAV' && isFs()) ? ' FS' : '';
@@ -863,16 +984,20 @@
   function init() {
     if (window.__tvNav && window.__tvNav.destroy) window.__tvNav.destroy(); // hot re-install (dev)
     injectCSS();
-    addEventListener('keydown', onKey, true);
+    showPreviousTrace();
+    trace('init ' + location.pathname + ' ' + innerWidth + 'x' + innerHeight);
+    addEventListener('keydown', onKeySafe, true);
     patchHistory();
-    addEventListener('tv:route', checkRoute);
-    const mo = new MutationObserver(() => { clearTimeout(moTimer); moTimer = setTimeout(onMutate, 200); });
+    const onRouteSafe = safe('route', checkRoute);
+    addEventListener('tv:route', onRouteSafe);
+    const onMutateSafe = safe('mutation', onMutate);
+    const mo = new MutationObserver(() => { clearTimeout(moTimer); moTimer = setTimeout(onMutateSafe, 200); });
     mo.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style'] });
     onRoute();
     window.__tvNav = {
       S, CFG, collectBlocks, setFocus, initialFocus, enterPlayer, enterBar, isVisibleBlock, pickTarget, clipAncestor, currentScope,
       destroy() {
-        removeEventListener('keydown', onKey, true); removeEventListener('tv:route', checkRoute);
+        removeEventListener('keydown', onKeySafe, true); removeEventListener('tv:route', onRouteSafe);
         mo.disconnect(); clearInterval(keepAlive); clearTimeout(moTimer); clearFocus();
         const b = $('#tv-badge'); if (b) b.remove(); const st = $('#tv-nav-style'); if (st) st.remove();
       },

package/package.json

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