Widget Registry

@@ -487,7 +487,19 @@     }      // ---------- actions -----------    _started() { if (!this.started) { this.started = true; this.$('.big').hidden = true; } }+    _started() {+      if (this.started) return;+      this.started = true;+      const big = this.$('.big'), had = this.shadowRoot.activeElement === big;+      big.hidden = true;+      if (had || this._engaged) this._keepFocus();+    }+    // focus on the player itself unless a visible control inside it already holds it+    _keepFocus() {+      const a = this.shadowRoot.activeElement;+      if (a && a.offsetParent !== null) return;+      this.p.focus({ preventScroll: true });+    }     toggle() {       const v = this.v;       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'); }@@ -741,7 +753,9 @@       $('.big').addEventListener('click', () => this.toggle());        p.addEventListener('pointermove', (e) => { if (e.pointerType !== 'touch') this._show(); });-      p.addEventListener('pointerdown', (e) => { active = this; if (!this.shadowRoot.activeElement || e.composedPath()[0] === v || e.target === this) setTimeout(() => { if (!this.shadowRoot.activeElement) p.focus({ preventScroll: true }); }); });+      // 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()); });+      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); } });       const chrome = $('.chrome');@@ -808,7 +822,10 @@         if (e.metaKey || e.altKey) return;         // outside our own frame, only take keys while the player has focus         const inFrame = location.pathname.includes('/widget/');-        if (!inFrame && !this.shadowRoot.activeElement && document.activeElement !== this) return;+        const focusIn = !!this.shadowRoot.activeElement || document.activeElement === this;+        const nothingElse = !document.activeElement || document.activeElement === document.body || document.activeElement === document.documentElement;+        if (!inFrame && !focusIn && !(this._engaged && nothingElse)) return;+        if (!focusIn && this._engaged) this._keepFocus();         const k = e.key; let hit = true;         if ($('.help').classList.contains('on') && k !== '?' && k !== 'Escape') return;         if (e.ctrlKey) { if (k === 'ArrowLeft') this.chapter(-1); else if (k === 'ArrowRight') this.chapter(1); else return; }