phimpal-tv 0.2.0 → 0.2.1

package/README.md

@@ -100,6 +100,20 @@ 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`.
+
 ## 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.1 — 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,23 @@
   // ------------------------------------------------------------------ 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); } };
   const rectOf = (el) => el.getBoundingClientRect();
   const isWatch = () => /^\/watch\//.test(location.pathname);
   const isHome = () => location.pathname === '/';
@@ -65,29 +82,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);
@@ -166,7 +201,8 @@
     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)) {
@@ -254,14 +290,14 @@
     const item = block.closest('.shrink-0') || block;
     const sib = dir === A.RIGHT ? item.nextElementSibling : item.previousElementSibling;
     btn.click();
-    setTimeout(() => {
+    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);
+      if (t) setFocus(t); else badge('page: no card');
+    }), CFG.carouselAnimMs);
     return true;
   }
   function rowsOnPage() {
@@ -312,8 +348,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 +366,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() {
@@ -712,12 +757,33 @@
 
   // ------------------------------------------------------------------ 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) {
+    try { onKey(e); }
+    catch (err) { report('key ' + e.keyCode, err); try { hardReset('error'); } catch (x) { report('reset', x); } }
+  }
   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).
@@ -764,8 +830,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 +909,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 +936,18 @@
   function init() {
     if (window.__tvNav && window.__tvNav.destroy) window.__tvNav.destroy(); // hot re-install (dev)
     injectCSS();
-    addEventListener('keydown', onKey, true);
+    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.1",
   "description": "D-pad (TV remote) navigation for phimpal.com on Samsung Tizen TVs, as a TizenBrew site-modification module.",
   "appName": "PhimPal TV",
   "packageType": "mods",