From 3992fa2ea6c4d4ca8f8b9e6d4f7aead93185f5ba Mon Sep 17 00:00:00 2001
From: JV8 <junk@veritys.com>
Date: Thu, 3 Sep 2026 02:00:07 +0000
Subject: [PATCH 1/2] fix(youtube-video-element): destroy the player on
 disconnect

The YouTube iframe API keeps every player it creates in module-scoped
registries, so removing the element is not enough to release the
<iframe>: it stays detached but reachable from `window.YT`, along with
everything the player's event handlers close over. The element defines
no `disconnectedCallback`, and `api.destroy()` is otherwise only
reachable from `load()` when `src` is cleared, so every mount/unmount
cycle leaks a player.

- Add `connectedCallback`/`disconnectedCallback` following the pattern
  already used in vimeo-video-element: destroy the player and reset the
  load state on disconnect, reload on reconnect so a DOM move still
  works (`load()` is otherwise only triggered by attributeChangedCallback,
  which does not fire on a move).

- Always release the previous player in `load()`. A new one is
  constructed unconditionally further down, so `oldApi` is never reused,
  but it was only destroyed when `src` was empty. Every `src` change
  therefore orphaned a player in the registries holding its discarded
  iframe. Every attribute that triggers load() is part of the iframe URL,
  so the iframe was already being rebuilt in these cases; this only
  releases the player that was being dropped.

- Guard the load with a `#loadId` generation counter, bumped on
  disconnect and on each load, so an attempt superseded while awaiting
  the API script or `loadComplete` bails out at both points.

- Track and clear the two polling intervals started at the end of
  `load()`. Neither timer id was stored, so the 50ms seek poller had no
  cancel path at all and the 100ms progress poller only cancelled itself
  once fully buffered. Both closures capture `this`, keeping the element
  and its player alive independently of the registries.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 packages/youtube-video-element/test/test.js   | 42 ++++++++++++
 .../youtube-video-element.js                  | 68 +++++++++++++++++--
 2 files changed, 103 insertions(+), 7 deletions(-)

diff --git a/packages/youtube-video-element/test/test.js b/packages/youtube-video-element/test/test.js
index c0fc1e06..3ae8f9f6 100644
--- a/packages/youtube-video-element/test/test.js
+++ b/packages/youtube-video-element/test/test.js
@@ -250,6 +250,48 @@ test('t parameter - case insensitive', async function (t) {
   t.equal(startParam, '171', 'start parameter is set from uppercase T parameter');
 });
 
+test('destroys the player when disconnected', async function (t) {
+  const video = await createVideoElement();
+  await video.loadComplete;
+
+  t.ok(video.api, 'has a player once loaded');
+  t.ok(video.shadowRoot.querySelector('iframe'), 'has an iframe once loaded');
+
+  video.remove();
+
+  t.equal(video.api, null, 'the player reference is released on disconnect');
+  t.equal(video.isLoaded, false, 'the element is no longer marked loaded');
+  t.equal(
+    video.shadowRoot.querySelector('iframe'),
+    null,
+    'destroy() removed the iframe from the shadow root'
+  );
+});
+
+test('creates a new player when reconnected', async function (t) {
+  const video = await createVideoElement();
+  await video.loadComplete;
+
+  const firstApi = video.api;
+  video.remove();
+  document.body.append(video);
+
+  await video.loadComplete;
+
+  t.ok(video.api, 'has a player again after reconnecting');
+  t.ok(video.api !== firstApi, 'a new player was created, not the destroyed one');
+  t.ok(video.shadowRoot.querySelector('iframe'), 'the iframe was rebuilt');
+});
+
+test('disconnecting before the player is ready does not throw', async function (t) {
+  const video = await createVideoElement();
+  // Do not await loadComplete: the API may still be loading.
+  video.remove();
+
+  t.equal(video.api, null, 'no player is left behind');
+  t.ok(true, 'disconnecting mid-load did not throw');
+});
+
 function delay(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
diff --git a/packages/youtube-video-element/youtube-video-element.js b/packages/youtube-video-element/youtube-video-element.js
index 75958dba..b034f336 100644
--- a/packages/youtube-video-element/youtube-video-element.js
+++ b/packages/youtube-video-element/youtube-video-element.js
@@ -147,6 +147,9 @@ class YoutubeVideoElement extends MediaPlayedRangesMixin(globalThis.HTMLElement
   loadComplete = new PublicPromise();
   #loadRequested;
   #hasLoaded;
+  #wasDisconnected = false;
+  #loadId = 0;
+  #timers = [];
   #readyState = 0;
   #seeking = false;
   #seekComplete;
@@ -172,6 +175,12 @@ class YoutubeVideoElement extends MediaPlayedRangesMixin(globalThis.HTMLElement
   async load() {
     if (this.#loadRequested) return;
 
+    // Identifies this load attempt. `load()` awaits the API script, so the
+    // element can be disconnected (or asked to load again) while this one is
+    // still in flight; those bump #loadId and this attempt bails out below
+    // instead of attaching a player nothing will ever destroy.
+    const loadId = ++this.#loadId;
+
     if (!this.shadowRoot) {
       this.attachShadow({ mode: 'open' });
     }
@@ -193,12 +202,13 @@ class YoutubeVideoElement extends MediaPlayedRangesMixin(globalThis.HTMLElement
 
     let oldApi = this.api;
     this.api = null;
+    // A new player is always constructed below, so the previous one is never
+    // reused. Release it rather than just dropping the reference, otherwise it
+    // stays in the API's registries holding its (now discarded) iframe.
+    // Removes the <iframe> containing the player.
+    oldApi?.destroy();
 
-    if (!this.src) {
-      // Removes the <iframe> containing the player.
-      oldApi?.destroy();
-      return;
-    }
+    if (!this.src) return;
 
     this.#textTracksVideo = document.createElement('video');
     this.textTracks = this.#textTracksVideo.textTracks;
@@ -223,6 +233,10 @@ class YoutubeVideoElement extends MediaPlayedRangesMixin(globalThis.HTMLElement
     }
 
     const YT = await loadScript(API_URL, API_GLOBAL, API_GLOBAL_READY);
+
+    // Superseded by a disconnect or a newer load() while awaiting the API.
+    if (loadId !== this.#loadId) return;
+
     this.api = new YT.Player(iframe, {
       events: {
         onReady: () => {
@@ -328,8 +342,14 @@ class YoutubeVideoElement extends MediaPlayedRangesMixin(globalThis.HTMLElement
 
     await this.loadComplete;
 
+    // Superseded while awaiting loadComplete; don't start pollers for a player
+    // that is already gone.
+    if (loadId !== this.#loadId) return;
+
+    this.#clearTimers();
+
     let lastCurrentTime = 0;
-    setInterval(() => {
+    this.#timers.push(setInterval(() => {
       const diff = Math.abs(this.currentTime - lastCurrentTime);
       const bufferedEnd = this.buffered.end(this.buffered.length - 1);
       if (this.seeking && bufferedEnd > 0.1) {
@@ -341,7 +361,7 @@ class YoutubeVideoElement extends MediaPlayedRangesMixin(globalThis.HTMLElement
         this.dispatchEvent(new Event('seeking'));
       }
       lastCurrentTime = this.currentTime;
-    }, 50);
+    }, 50));
 
     let lastBufferedEnd;
     const progressInterval = setInterval(() => {
@@ -355,6 +375,40 @@ class YoutubeVideoElement extends MediaPlayedRangesMixin(globalThis.HTMLElement
         this.dispatchEvent(new Event('progress'));
       }
     }, 100);
+    this.#timers.push(progressInterval);
+  }
+
+  #clearTimers() {
+    for (const id of this.#timers) clearInterval(id);
+    this.#timers = [];
+  }
+
+  connectedCallback() {
+    // `load()` is only triggered by attributeChangedCallback, so an element that
+    // is moved in the DOM (disconnected and reconnected without its attributes
+    // changing) has to ask for a new player itself.
+    if (this.#wasDisconnected) {
+      this.#wasDisconnected = false;
+      this.load();
+    }
+    super.connectedCallback?.();
+  }
+
+  disconnectedCallback() {
+    this.#wasDisconnected = true;
+    this.#loadId++;
+    this.#clearTimers();
+    this.#loadRequested = null;
+    this.#hasLoaded = null;
+    this.isLoaded = false;
+    this.loadComplete = new PublicPromise();
+    // The YouTube iframe API holds a reference to every player it creates, so
+    // dropping the element is not enough to release the <iframe>: it stays
+    // detached but reachable from window.YT. destroy() removes the iframe and
+    // deregisters the player.
+    this.api?.destroy?.();
+    this.api = null;
+    super.disconnectedCallback?.();
   }
 
   async attributeChangedCallback(attrName, oldValue, newValue) {

From db5a5e3028e6578da14c5d506b39c78652103cf8 Mon Sep 17 00:00:00 2001
From: JV8 <junk@veritys.com>
Date: Tue, 22 Sep 2026 19:16:50 +0000
Subject: [PATCH 2/2] fix(youtube-video-element): settle loadComplete on
 disconnect

Review follow-up.

disconnectedCallback replaced loadComplete without settling the old
promise, so anything awaiting it when the element disconnected before
onReady (play(), pause(), user code) hung forever. Reject it with an
AbortError, which is what HTMLMediaElement.play() rejects with when
interrupted and what videojs-video-element already uses.

Rejecting on its own surfaces unhandled rejections: load() awaits
loadComplete itself and is called fire-and-forget; the currentTime,
muted, playbackRate and volume setters chain .then() on it with no
rejection handler; and when nothing is awaiting at all, the rejected
promise has no handler. Mark the old promise handled before rejecting,
catch in load() (the #loadId check then bails), and give the four
setters a no-op rejection handler so queued work is discarded after a
disconnect.

Also make the mid-load disconnect test meaningful. It asserted
api === null immediately after remove(), which disconnectedCallback
guarantees regardless of the #loadId guard. It now lets the in-flight
continuation resume before asserting, and fails with the guard removed.
Adds a test that the pending loadComplete settles after disconnect.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JM3M1hmNuwrvKiEcvpHPWV
---
 packages/youtube-video-element/test/test.js   | 27 ++++++++++++++++---
 .../youtube-video-element.js                  | 25 +++++++++++++----
 2 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/packages/youtube-video-element/test/test.js b/packages/youtube-video-element/test/test.js
index 3ae8f9f6..59e9a4bb 100644
--- a/packages/youtube-video-element/test/test.js
+++ b/packages/youtube-video-element/test/test.js
@@ -283,13 +283,32 @@ test('creates a new player when reconnected', async function (t) {
   t.ok(video.shadowRoot.querySelector('iframe'), 'the iframe was rebuilt');
 });
 
-test('disconnecting before the player is ready does not throw', async function (t) {
+test('disconnecting mid-load does not build a player afterwards', async function (t) {
   const video = await createVideoElement();
-  // Do not await loadComplete: the API may still be loading.
+  // Disconnect while load() is still awaiting the API script.
   video.remove();
 
-  t.equal(video.api, null, 'no player is left behind');
-  t.ok(true, 'disconnecting mid-load did not throw');
+  // Let that in-flight continuation actually resume before asserting;
+  // immediately after remove() api === null is true by construction.
+  for (let i = 0; i < 500 && !globalThis.YT?.Player; i++) await delay(10);
+  await delay(100);
+
+  t.equal(video.api, null, 'the superseded load did not construct a player');
+});
+
+test('disconnecting before ready settles the pending loadComplete', async function (t) {
+  const video = await createVideoElement();
+  const pending = video.loadComplete;
+
+  // Disconnect after the player is constructed but before onReady fires.
+  for (let i = 0; i < 500 && !video.api; i++) await delay(10);
+  video.remove();
+
+  const outcome = await Promise.race([
+    pending.then(() => 'resolved', (err) => err.name),
+    delay(3000).then(() => 'pending'),
+  ]);
+  t.ok(outcome !== 'pending', `loadComplete settles after disconnect (${outcome})`);
 });
 
 function delay(ms) {
diff --git a/packages/youtube-video-element/youtube-video-element.js b/packages/youtube-video-element/youtube-video-element.js
index b034f336..7fadea9a 100644
--- a/packages/youtube-video-element/youtube-video-element.js
+++ b/packages/youtube-video-element/youtube-video-element.js
@@ -340,7 +340,9 @@ class YoutubeVideoElement extends MediaPlayedRangesMixin(globalThis.HTMLElement
       this.dispatchEvent(new Event('timeupdate'));
     });
 
-    await this.loadComplete;
+    // Rejected if the element disconnects before onReady; the #loadId check
+    // below then bails.
+    await this.loadComplete.catch(noop);
 
     // Superseded while awaiting loadComplete; don't start pollers for a player
     // that is already gone.
@@ -401,6 +403,17 @@ class YoutubeVideoElement extends MediaPlayedRangesMixin(globalThis.HTMLElement
     this.#loadRequested = null;
     this.#hasLoaded = null;
     this.isLoaded = false;
+    // Settle anything still awaiting this load (play(), pause(), queued
+    // setters, user code) rather than leaving it pending forever. AbortError
+    // is what HTMLMediaElement.play() rejects with when interrupted. A no-op
+    // if the load already completed. The catch only marks the promise as
+    // handled so a disconnect with nothing awaiting doesn't surface as an
+    // unhandled rejection; actual awaiters still receive it.
+    const pending = this.loadComplete;
+    pending.catch(noop);
+    pending.reject(
+      new DOMException('Disconnected before load completed', 'AbortError')
+    );
     this.loadComplete = new PublicPromise();
     // The YouTube iframe API holds a reference to every player it creates, so
     // dropping the element is not enough to release the <iframe>: it stays
@@ -521,7 +534,7 @@ class YoutubeVideoElement extends MediaPlayedRangesMixin(globalThis.HTMLElement
           this.api?.pauseVideo();
         });
       }
-    });
+    }, noop);
   }
 
   set defaultMuted(val) {
@@ -546,7 +559,7 @@ class YoutubeVideoElement extends MediaPlayedRangesMixin(globalThis.HTMLElement
     if (this.muted == val) return;
     this.loadComplete.then(() => {
       val ? this.api?.mute() : this.api?.unMute();
-    });
+    }, noop);
   }
 
   get muted() {
@@ -562,7 +575,7 @@ class YoutubeVideoElement extends MediaPlayedRangesMixin(globalThis.HTMLElement
     if (this.playbackRate == val) return;
     this.loadComplete.then(() => {
       this.api?.setPlaybackRate(val);
-    });
+    }, noop);
   }
 
   get playsInline() {
@@ -588,7 +601,7 @@ class YoutubeVideoElement extends MediaPlayedRangesMixin(globalThis.HTMLElement
     this.#initialVolume = val;
     this.loadComplete.then(() => {
       this.api?.setVolume(val * 100);
-    });
+    }, noop);
   }
 
   get volume() {
@@ -675,6 +688,8 @@ async function loadScript(src, globalName, readyFnName) {
 
 const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
+const noop = () => {};
+
 function promisify(fn) {
   return (...args) =>
     new Promise((resolve) => {