Merge branch 'muxinc:master' into reexport-hls-library

hls-video-element.d.ts

@@ -0,0 +1,32 @@
+import { CustomVideoElement } from 'custom-media-element';
+import Hls from 'hls.js';
+
+declare class HLSVideoElement extends CustomVideoElement {
+ /**
+ * The current instance of the HLS.js library.
+ *
+ * @example
+ * ```js
+ * const video = document.querySelector('hls-video');
+ * video.api.on(Hls.Events.MANIFEST_PARSED, () => {});
+ * ```
+ */
+ api: Hls | null;
+
+ /**
+ * Fires when attributes are changed on the custom element.
+ */
+ attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+
+ /**
+ * Loads the HLS.js instance and attach it to the video element.
+ */
+ load(): Promise<void>;
+
+ /**
+ * Unloads the HLS.js instance and detaches it from the video element.
+ */
+ #destroy(): void;
+}
+
+export default HLSVideoElement;

hls-video-element.js

@@ -28,8 +28,7 @@ class HLSVideoElement extends CustomVideoElement {
  return;
  }
 
- // Wait 1 tick to allow other attributes to be set.
- await Promise.resolve();
+
 
  if (Hls.isSupported()) {
 
@@ -38,8 +37,10 @@ class HLSVideoElement extends CustomVideoElement {
  liveDurationInfinity: true
  });
 
- // Set up preload
+ // Wait 1 tick to allow other attributes to be set.
+ await Promise.resolve();
 
+ // Set up preload
  switch (this.nativeEl.preload) {
  case 'none': {
  // when preload is none, load the source on first play

package.json

@@ -4,6 +4,7 @@
  "description": "Custom element (web component) for playing video using the HTTP Live Streaming (HLS) format. Uses HLS.js.",
  "type": "module",
  "main": "hls-video-element.js",
+ "types": "hls-video-element.d.ts",
  "files": [],
  "scripts": {
  "lint": "npx eslint *.js -c ./node_modules/wet-run/.eslintrc.json",