feat: add native hls media + refactor (#1154)

packages/html/src/define/media/native-hls-video.ts

@@ -0,0 +1,14 @@
+import { NativeHlsVideo } from '../../media/native-hls-video';
+import { safeDefine } from '../safe-define';
+
+export class NativeHlsVideoElement extends NativeHlsVideo {
+  static readonly tagName = 'native-hls-video';
+}
+
+safeDefine(NativeHlsVideoElement);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [NativeHlsVideoElement.tagName]: NativeHlsVideoElement;
+  }
+}

packages/html/src/index.ts

@@ -1,5 +1,4 @@
 // Core
-export type { Delegate } from '@videojs/core';
 export { DelegateMixin } from '@videojs/core';
 export * from '@videojs/core/dom';
 

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

@@ -0,0 +1,18 @@
+import { NativeHlsCustomMedia, NativeHlsMediaDelegate } from '@videojs/core/dom/media/native-hls';
+import { MediaAttachMixin } from '../../store/media-attach-mixin';
+import { MediaPropsMixin } from '../../utils/media-props-mixin';
+
+export class NativeHlsVideo extends MediaPropsMixin(MediaAttachMixin(NativeHlsCustomMedia), NativeHlsMediaDelegate) {
+  constructor() {
+    super();
+    this.attach(this.target);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback?.();
+
+    if (!this.hasAttribute('keep-alive')) {
+      this.destroy();
+    }
+  }
+}

packages/html/src/utils/media-props-mixin.ts

@@ -10,6 +10,7 @@ function buildAttrPropMap(DelegateClass: AnyClass): Map<string, string> {
   const map = new Map<string, string>();
   for (let proto = DelegateClass.prototype; proto && proto !== Object.prototype; proto = Object.getPrototypeOf(proto)) {
     for (const key of Object.getOwnPropertyNames(proto)) {
+      if (key.startsWith('_')) continue;
       const desc = Object.getOwnPropertyDescriptor(proto, key);
       if (desc?.set) map.set(camelToKebab(key), key);
     }