fix: no cast framework rq w/ disableremoteplayback (#72)

fix #59
muxinc · Dec 20, 2024 · fd7a34d · fd7a34d
1 parent 67c7141
commit fd7a34d
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/packages/castable-video/castable-mixin.js b/packages/castable-video/castable-mixin.js
@@ -37,7 +37,10 @@ export const CastableMediaMixin = (superclass) =>
       if (this.#remote) return this.#remote;
 
       if (requiresCastFramework()) {
-        loadCastFramework();
+        // No need to load the Cast framework if it's disabled.
+        if (!this.disableRemotePlayback) {
+          loadCastFramework();
+        }
 
         privateProps.set(this, {
           loadOnPrompt: () => this.#loadOnPrompt()

diff --git a/packages/castable-video/index.html b/packages/castable-video/index.html
@@ -30,7 +30,7 @@
     <script type="importmap">
       {
         "imports": {
-          "custom-media-element": "https://cdn.jsdelivr.net/npm/custom-media-element@1.0/+esm"
+          "custom-media-element": "https://cdn.jsdelivr.net/npm/custom-media-element@1.4/+esm"
         }
       }
     </script>
@@ -48,6 +48,7 @@ <h1>Castable Video</h1>
     >
       <!-- Uses progressive enhancement for best performance -->
       <video
+        slot="media"
         poster="https://image.mux.com/O6LdRc0112FEJXH00bGsN9Q31yu5EIVHTgjTKRkKtEq1k/thumbnail.jpg?time=56"
         src="https://stream.mux.com/O6LdRc0112FEJXH00bGsN9Q31yu5EIVHTgjTKRkKtEq1k/high.mp4"
         crossorigin
@@ -82,7 +83,9 @@ <h1>Castable Video</h1>
       if (castable.remote.state === 'disconnected') {
         castable.remote.watchAvailability((available) => {
           castBtn.hidden = !available;
-          castBtn2.hidden = !available;
+        })
+        .catch((error) => {
+          console.error(`> Error watching remote device availability: ${error}`);
         })
         .then((id) => {
           console.log(`> Started watching remote device availability: ${id}`);
@@ -108,6 +111,20 @@ <h1>Castable Video</h1>
       crossorigin
     ></castable-video>
 
+    <script type="module">
+      if (castable2.remote.state === 'disconnected') {
+        castable2.remote.watchAvailability((available) => {
+          castBtn2.hidden = !available;
+        })
+        .catch((error) => {
+          console.error(`> Error watching remote device availability: ${error}`);
+        })
+        .then((id) => {
+          console.log(`> Started watching remote device availability: ${id}`);
+        });
+      }
+    </script>
+
     <br />
 
     <div class="controls">