fix: destroy hls.js instance on media unmount (#749)

packages/core/src/core/media/delegate.ts

@@ -53,10 +53,11 @@ export function MediaDelegateMixin<Base extends Constructor<any>, Delegate exten
   }
 
   return DelegateMedia as unknown as Constructor<
-    InstanceType<Base> & {
-      attach(target: EventTarget): void;
-      detach(): void;
-    }
+    InstanceType<Base> &
+      InstanceType<Delegate> & {
+        attach(target: EventTarget): void;
+        detach(): void;
+      }
   > &
     Omit<Base, 'prototype'>;
 }

packages/core/src/dom/media/hls/index.ts

@@ -28,6 +28,10 @@ export class HlsMediaDelegateBase implements MediaDelegate {
     this.#engine.detachMedia();
   }
 
+  destroy(): void {
+    this.#engine.destroy();
+  }
+
   set src(src: string) {
     this.#engine.loadSource(src);
   }

packages/html/src/media/hls-video/index.ts

@@ -25,4 +25,12 @@ export class HlsVideo extends HlsCustomMedia {
       this.src = newValue ?? '';
     }
   }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+
+    if (!this.hasAttribute('keep-alive')) {
+      this.destroy();
+    }
+  }
 }

packages/react/src/media/hls-video/index.tsx

@@ -1,10 +1,11 @@
 import { HlsMedia } from '@videojs/core/dom/media/hls';
 import type { PropsWithChildren, VideoHTMLAttributes } from 'react';
-import { forwardRef, useEffect, useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { useMediaRegistration } from '../../player/context';
 import { attachMediaElement } from '../../utils/attach-media-element';
 import { mediaProps } from '../../utils/media-props';
 import { useComposedRefs } from '../../utils/use-composed-refs';
+import { useDestroy } from '../../utils/use-destroy';
 
 export type HlsVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>>;
 
@@ -12,9 +13,9 @@ export const HlsVideo = forwardRef<HTMLVideoElement, HlsVideoProps>(({ children,
   const mediaApi = useMemo(() => new HlsMedia(), []);
   const setMedia = useMediaRegistration();
 
-  useEffect(() => {
+  useDestroy(mediaApi, () => {
     setMedia?.(mediaApi);
-  }, [mediaApi, setMedia]);
+  });
 
   const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);
   return (