fix: preload bugs, add more tests

muxinc · Sep 29, 2022 · bcfc23d · bcfc23d
1 parent 5723cdd
commit bcfc23d
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 4 deletions.
diff --git a/packages/mux-video/src/index.ts b/packages/mux-video/src/index.ts
@@ -185,9 +185,11 @@ class MuxVideoElement extends CustomVideoElement<HTMLVideoElement> implements Pa
   }
 
   set preload(val) {
-    if (val === this.preload) return;
+    // dont' cause an infinite loop
+    // check the attribute because an empty string maps to the `auto` prop
+    if (val == this.getAttribute('preload')) return;
 
-    if (val && ['', 'none', 'metadata', 'auto'].includes(val)) {
+    if (val != null && ['', 'none', 'metadata', 'auto'].includes(val)) {
       this.setAttribute('preload', val);
     } else {
       this.removeAttribute('preload');
@@ -394,7 +396,7 @@ class MuxVideoElement extends CustomVideoElement<HTMLVideoElement> implements Pa
         if (newValue === oldValue) {
           break;
         }
-        this.__core?.setPreload(this.preload);
+        this.__core?.setPreload(newValue as HTMLMediaElement['preload']);
         break;
       case Attributes.PLAYBACK_ID:
         /** @TODO Improv+Discuss - how should playback-id update wrt src attr changes (and vice versa) (CJP) */

diff --git a/packages/mux-video/test/player.test.js b/packages/mux-video/test/player.test.js
@@ -120,4 +120,46 @@ describe('<mux-video>', () => {
     assert.isTrue(player.autoplay, 'can turn off autoplay');
     assert.equal(player.getAttribute('autoplay'), '', 'when prop is set to true, attribute value is an empty string');
   });
+
+  it('preload is forwarded to the native el', async function () {
+    const player = await fixture(`<mux-video
+      src="https://stream.mux.com/23s11nz72DsoN657h4314PjKKjsF2JG33eBQQt6B95I.m3u8"
+    ></mux-video>`);
+
+    assert.equal(player.preload, 'metadata', 'browser default preload is metadata');
+
+    player.setAttribute('preload', '');
+    assert.equal(player.preload, 'auto', 'preload="" attribute maps to the auto state');
+    assert.equal(player.nativeEl.preload, 'auto', 'native preload="" attribute maps to the auto state');
+
+    player.preload = null;
+    assert.equal(player.preload, 'metadata', 'browser default preload is metadata');
+    assert.equal(player.nativeEl.preload, 'metadata', 'native browser default preload is metadata');
+
+    player.preload = 'auto';
+    assert.equal(player.getAttribute('preload'), 'auto', 'preload attr is auto');
+    assert.equal(player.nativeEl.getAttribute('preload'), 'auto', 'native preload attr is auto');
+  });
+
+  it('can use preload="none" and play', async function () {
+    this.timeout(10000);
+
+    const player = await fixture(`<mux-video
+      src="https://stream.mux.com/23s11nz72DsoN657h4314PjKKjsF2JG33eBQQt6B95I.m3u8"
+      preload="none"
+      muted
+    ></mux-video>`);
+
+    assert.equal(player.preload, 'none', 'preload is none');
+    await aTimeout(3000);
+    assert.equal(player.buffered.length, 0, 'no buffer loaded');
+
+    try {
+      await player.play();
+    } catch (error) {
+      console.warn(error);
+    }
+
+    assert(!player.paused, 'is playing after play()');
+  });
 });
diff --git a/packages/playback-core/src/preload.ts b/packages/playback-core/src/preload.ts
@@ -9,7 +9,7 @@ export const setupPreload = (
   if (!mediaEl) return () => undefined;
 
   const updatePreload = (val?: HTMLMediaElement['preload']) => {
-    if (val && ['', 'none', 'metadata', 'auto'].includes(val)) {
+    if (val != null && ['', 'none', 'metadata', 'auto'].includes(val)) {
       mediaEl.setAttribute('preload', val);
     } else {
       mediaEl.removeAttribute('preload');