fix: guard HLS load target and PiP null video (#1859)

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>

Author: Steve0x2a

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);
+  });
+});

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);
   }
 }

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);
+  });
+});

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;
 }
 
 /**