From d076a01bdef8ddbca2632f4e6197e6152e67bf9a Mon Sep 17 00:00:00 2001
From: Yi Zhan <stevesough@gmail.com>
Date: Sun, 6 Sep 2026 09:36:19 +0000
Subject: [PATCH] fix: guard HLS load target and PiP null video

Snapshot the HLS loader target before the provider dynamic import so
an unmount cannot construct HLSProvider with null. Require a real
video element in canUsePictureInPicture, matching #989.

Fixes #1771

Signed-off-by: Yi Zhan <stevesough@gmail.com>
---
 .../vidstack/src/providers/hls/loader.test.ts | 28 ++++++++++++++
 packages/vidstack/src/providers/hls/loader.ts | 14 ++++++-
 packages/vidstack/src/utils/support.test.ts   | 37 +++++++++++++++++++
 packages/vidstack/src/utils/support.ts        |  4 +-
 4 files changed, 79 insertions(+), 4 deletions(-)
 create mode 100644 packages/vidstack/src/providers/hls/loader.test.ts
 create mode 100644 packages/vidstack/src/utils/support.test.ts

diff --git a/packages/vidstack/src/providers/hls/loader.test.ts b/packages/vidstack/src/providers/hls/loader.test.ts
new file mode 100644
index 000000000..8df85a634
--- /dev/null
+++ b/packages/vidstack/src/providers/hls/loader.test.ts
@@ -0,0 +1,28 @@
+import { HLSProviderLoader } from './loader';
+
+describe('HLSProviderLoader.load', function () {
+  afterEach(function () {
+    Reflect.deleteProperty(document, 'pictureInPictureEnabled');
+  });
+
+  it('does not construct the provider with a null target if unmounted during import', async function () {
+    Object.defineProperty(document, 'pictureInPictureEnabled', {
+      configurable: true,
+      value: true,
+    });
+
+    const loader = new HLSProviderLoader(),
+      video = document.createElement('video'),
+      ctx = { notify() {} } as any;
+
+    loader.target = video;
+
+    const load = loader.load(ctx);
+    loader.target = null as any;
+
+    const provider = await load;
+
+    expect(provider).to.have.property('type', 'hls');
+    expect(provider.video).to.equal(video);
+  });
+});
diff --git a/packages/vidstack/src/providers/hls/loader.ts b/packages/vidstack/src/providers/hls/loader.ts
index 1cdb16c34..78dbeb614 100644
--- a/packages/vidstack/src/providers/hls/loader.ts
+++ b/packages/vidstack/src/providers/hls/loader.ts
@@ -22,12 +22,22 @@ export class HLSProviderLoader
       throw Error('[vidstack] can not load hls provider server-side');
     }
 
-    if (__DEV__ && !this.target) {
+    const target = this.target;
+
+    if (__DEV__ && !target) {
+      throw Error(
+        '[vidstack] `<video>` element was not found - did you forget to include `<media-provider>`?',
+      );
+    }
+
+    const { HLSProvider } = await import('./provider');
+
+    if (!target) {
       throw Error(
         '[vidstack] `<video>` element was not found - did you forget to include `<media-provider>`?',
       );
     }
 
-    return new (await import('./provider')).HLSProvider(this.target, context);
+    return new HLSProvider(target, context);
   }
 }
diff --git a/packages/vidstack/src/utils/support.test.ts b/packages/vidstack/src/utils/support.test.ts
new file mode 100644
index 000000000..7e3a8dff8
--- /dev/null
+++ b/packages/vidstack/src/utils/support.test.ts
@@ -0,0 +1,37 @@
+import { canUsePictureInPicture } from './support';
+
+describe(canUsePictureInPicture.name, function () {
+  afterEach(function () {
+    Reflect.deleteProperty(document, 'pictureInPictureEnabled');
+  });
+
+  it('returns false when video is null even if picture-in-picture is enabled', function () {
+    Object.defineProperty(document, 'pictureInPictureEnabled', {
+      configurable: true,
+      value: true,
+    });
+
+    expect(canUsePictureInPicture(null)).to.equal(false);
+  });
+
+  it('returns true for a video element when picture-in-picture is enabled', function () {
+    Object.defineProperty(document, 'pictureInPictureEnabled', {
+      configurable: true,
+      value: true,
+    });
+
+    expect(canUsePictureInPicture(document.createElement('video'))).to.equal(true);
+  });
+
+  it('returns false when the video has picture-in-picture disabled', function () {
+    Object.defineProperty(document, 'pictureInPictureEnabled', {
+      configurable: true,
+      value: true,
+    });
+
+    const video = document.createElement('video');
+    video.disablePictureInPicture = true;
+
+    expect(canUsePictureInPicture(video)).to.equal(false);
+  });
+});
diff --git a/packages/vidstack/src/utils/support.ts b/packages/vidstack/src/utils/support.ts
index 02af6c2d6..feb6de7fb 100644
--- a/packages/vidstack/src/utils/support.ts
+++ b/packages/vidstack/src/utils/support.ts
@@ -83,8 +83,8 @@ export function canPlayHLSNatively(video?: HTMLVideoElement | null): boolean {
  * @see {@link https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture}
  */
 export function canUsePictureInPicture(video: HTMLVideoElement | null): boolean {
-  if (__SERVER__) return false;
-  return !!document.pictureInPictureEnabled && !video?.disablePictureInPicture;
+  if (__SERVER__ || !video) return false;
+  return !!document.pictureInPictureEnabled && !video.disablePictureInPicture;
 }
 
 /**