← Commit history

adom-video: dormant ?avdebug=1 log of presses, focus and keys (diagnosing click focus in real Chrome)

John Lauer ·2dcef9690e ·7d ago ·parent fddf45b
1 file changed +15−3
widgets/video-widget.js+15−3
@@ -236,6 +236,17 @@   @container (max-width: 340px){ .vol .vslide{display:none} }   `; +  // ?avdebug=1 on the page URL logs presses, focus and keys to window.__adomVideoLog (for focus bugs)+  const DEBUG = /[?&]avdebug=1/.test(location.search);+  const dbg = (...a) => { if (!DEBUG) return; const L = (window.__adomVideoLog = window.__adomVideoLog || []); L.push([Math.round(performance.now()), ...a]); if (L.length > 400) L.shift(); };+  const descr = (el) => !el ? 'null' : (el.localName || '?') + (el.className && typeof el.className === 'string' ? '.' + el.className.split(' ')[0] : '');+  if (DEBUG) {+    document.addEventListener('focusin', (e) => dbg('focusin', descr(e.composedPath()[0]), 'doc.active=' + descr(document.activeElement)), true);+    document.addEventListener('focusout', (e) => dbg('focusout', descr(e.composedPath()[0])), true);+    window.addEventListener('keydown', (e) => dbg('win-keydown', e.key, 'target=' + descr(e.composedPath()[0]), 'doc.active=' + descr(document.activeElement)), true);+    window.addEventListener('blur', () => dbg('window-blur')); window.addEventListener('focus', () => dbg('window-focus'));+  }+   // one player owns the keyboard at a time: the one last clicked or focused (or the first on the page)   let active = null; @@ -512,7 +523,7 @@       this.p.focus({ preventScroll: true });     }     toggle() {-      const v = this.v;+      const v = this.v; dbg('toggle', this._vid(), v.paused ? 'play' : 'pause');       if (v.paused || v.ended) { v.play().then(() => this._started(), (e) => { if (e && e.name === 'NotAllowedError') this._hud('Press play to start'); }); this._bezel('play'); }       else { v.pause(); this._bezel('pause'); }     }@@ -800,7 +811,7 @@        p.addEventListener('pointermove', (e) => { if (e.pointerType !== 'touch') this._show(); });       // YouTube's rule: click a player and it owns the keyboard until you click somewhere else-      p.addEventListener('pointerdown', () => { active = this; this._engaged = true; setTimeout(() => this._keepFocus()); });+      p.addEventListener('pointerdown', (e) => { dbg('pointerdown', this._vid(), descr(e.composedPath()[0]), e.pointerType, 'trusted=' + e.isTrusted); active = this; this._engaged = true; setTimeout(() => { this._keepFocus(); dbg('after-press focus', descr(this.shadowRoot.activeElement), 'doc.active=' + descr(document.activeElement)); }); });       document.addEventListener('pointerdown', (e) => { if (!e.composedPath().includes(this)) this._engaged = false; }, true);       p.addEventListener('focusin', () => { active = this; });       p.addEventListener('pointerleave', () => { if (!v.paused && !this.drag) { clearTimeout(this._t.hide); this._t.hide = setTimeout(() => { if (!v.paused && !this.drag && !$('.menu').classList.contains('on')) p.classList.add('hide-ui'); }, 600); } });@@ -864,7 +875,7 @@        // YouTube's keyboard shortcuts, for whichever player owns the keyboard       document.addEventListener('keydown', (e) => {-        if (active !== this) return;+        if (active !== this) { dbg('key-skip not-active', this._vid(), e.key); return; }         const tgt = e.composedPath()[0];         if (tgt && /^(INPUT|TEXTAREA|SELECT)$/.test(tgt.tagName || '') || (tgt && tgt.isContentEditable)) return;         if (e.metaKey || e.altKey) return;@@ -872,6 +883,7 @@         const inFrame = location.pathname.includes('/widget/');         const focusIn = !!this.shadowRoot.activeElement || document.activeElement === this;         const nothingElse = !document.activeElement || document.activeElement === document.body || document.activeElement === document.documentElement;+        dbg('player-keydown', this._vid(), e.key, 'active=' + (active === this), 'focusIn=' + focusIn, 'engaged=' + !!this._engaged, 'nothingElse=' + nothingElse, 'shadow.active=' + descr(this.shadowRoot.activeElement));         if (!inFrame && !focusIn && !(this._engaged && nothingElse)) return;         if (!focusIn && this._engaged) this._keepFocus();         const k = e.key; let hit = true;