wip

web/src/lib/components/cast/cast-button.svelte

@@ -3,10 +3,16 @@
   import Button from '$lib/components/elements/buttons/button.svelte';
   import { onMount } from 'svelte';
 
-  onMount(async () => {
-    await loadCastFramework();
-    CastPlayer.getInstance();
+  onMount(() => {
+    loadCastFramework();
   });
+
+  window['__onGCastApiAvailable'] = function (isAvailable) {
+    // The cast sender can't be initialized until the API is available
+    if (isAvailable) {
+      CastPlayer.getInstance();
+    }
+  };
 </script>
 
 <Button size="icon" color="transparent-primary" rounded="lg" on:click>

web/src/lib/utils/cast-player.ts

@@ -267,19 +267,10 @@ class CastPlayer {
 
 export default CastPlayer;
 
-export const loadCastFramework = (() => {
-  let promise: Promise<typeof cast> | undefined;
-
-  return async () => {
-    if (promise === undefined) {
-      promise = new Promise(() => {
-        const script = document.createElement('script');
-        script.src = FRAMEWORK_LINK;
-
-        document.body.append(script);
-        console.debug('Cast framework loaded');
-      });
-    }
-    return promise;
-  };
-})();
+export const loadCastFramework = function () {
+  if (!document.querySelector(`script[src="${FRAMEWORK_LINK}"]`)) {
+    const script = document.createElement('script');
+    script.src = FRAMEWORK_LINK;
+    document.body.append(script);
+  }
+};