From b448f03420c32d2c171f86bf3149f69c84bb3407 Mon Sep 17 00:00:00 2001
From: Omri C <omricarmel@outlook.com>
Date: Thu, 5 Dec 2024 17:01:58 +0200
Subject: [PATCH 1/2] can cast with castjs

---
 .../asset-viewer/asset-viewer-nav-bar.svelte  |  8 ++-
 .../lib/components/cast/cast-sender.svelte    | 54 +++++++++++++++++++
 2 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 web/src/lib/components/cast/cast-sender.svelte

diff --git a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
index 8bea15e2a77c1..b0c327cc51e77 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
@@ -42,10 +42,12 @@
     mdiMagnifyPlusOutline,
     mdiPresentationPlay,
     mdiUpload,
+    mdiCast,
   } from '@mdi/js';
   import { canCopyImageToClipboard } from '$lib/utils/asset-utils';
   import { t } from 'svelte-i18n';
   import type { Snippet } from 'svelte';
+  import CastSender from '$lib/components/cast/cast-sender.svelte';
 
   interface Props {
     asset: AssetResponseDto;
@@ -83,6 +85,7 @@
   const sharedLink = getSharedLink();
   let isOwner = $derived($user && asset.ownerId === $user?.id);
   let showDownloadButton = $derived(sharedLink ? sharedLink.allowDownload : !asset.isOffline);
+  let showCast = $derived(sharedLink && !sharedLink.password);
   // $: showEditorButton =
   //   isOwner &&
   //   asset.type === AssetTypeEnum.Image &&
@@ -133,10 +136,13 @@
     {#if showDetailButton}
       <ShowDetailAction {onShowDetail} />
     {/if}
-
     {#if isOwner}
       <FavoriteAction {asset} {onAction} />
     {/if}
+    {#if showCast}
+      <CastSender {asset} />
+    {/if}
+
     <!-- {#if showEditorButton}
       <CircleIconButton
         color="opaque"
diff --git a/web/src/lib/components/cast/cast-sender.svelte b/web/src/lib/components/cast/cast-sender.svelte
new file mode 100644
index 0000000000000..cc49a754a6878
--- /dev/null
+++ b/web/src/lib/components/cast/cast-sender.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { getKey } from '$lib/utils';
+  import { getBaseUrl, type AssetResponseDto } from '@immich/sdk';
+  import { mdiCast } from '@mdi/js';
+  import { onMount } from 'svelte';
+
+  interface Props {
+    asset: AssetResponseDto;
+  }
+
+  let { asset, ...rest }: Props = $props();
+
+  let cjs;
+
+  let key = getKey();
+  let downloadUrl = window.location.origin + getBaseUrl() + `/assets/${asset.id}/original` + (key ? `?key=${key}` : '');
+  let thumbUrl =
+    window.location.origin + getBaseUrl() + `/assets/${asset.id}/thumbnail?size=thumbnail` + (key ? `&key=${key}` : '');
+
+  onMount(() => {
+    // Dynamically create a script tag to load Castjs
+    const script = document.createElement('script');
+    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/castjs/5.3.0/cast.min.js';
+    script.onload = () => {
+      // Initialize Castjs after the script is loaded
+      if (typeof Castjs !== 'undefined') {
+        cjs = new Castjs();
+        console.log('Castjs loaded successfully.');
+      } else {
+        console.error('Castjs is still undefined after loading.');
+      }
+    };
+    script.onerror = () => {
+      console.error('Failed to load Castjs library.');
+    };
+    document.body.appendChild(script);
+  });
+
+  const castVideo = () => {
+    if (cjs && cjs.available) {
+      console.log(downloadUrl);
+      cjs.cast(downloadUrl, {
+        poster: thumbUrl,
+        title: asset.originalFileName,
+        description: 'casting from immich',
+      });
+    } else {
+      console.error('Casting is unavailable.');
+    }
+  };
+</script>
+
+<CircleIconButton onclick={castVideo} color="opaque" hideMobile={false} icon={mdiCast} title={'cast'} />

From 1cdb4484d5f432064c95a6fa177f9486271adccd Mon Sep 17 00:00:00 2001
From: Omri C <omricarmel@outlook.com>
Date: Thu, 5 Dec 2024 20:40:32 +0200
Subject: [PATCH 2/2] use cast_sender.js directly

---
 .../asset-viewer/asset-viewer-nav-bar.svelte  |  7 +-
 .../lib/components/cast/cast-sender.svelte    | 80 ++++++++++++-------
 2 files changed, 54 insertions(+), 33 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
index b0c327cc51e77..48b3e871d3573 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
@@ -15,6 +15,7 @@
   import UnstackAction from '$lib/components/asset-viewer/actions/unstack-action.svelte';
   import KeepThisDeleteOthersAction from '$lib/components/asset-viewer/actions/keep-this-delete-others.svelte';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import CastSender from '$lib/components/cast/cast-sender.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import { AppRoute } from '$lib/constants';
@@ -42,12 +43,10 @@
     mdiMagnifyPlusOutline,
     mdiPresentationPlay,
     mdiUpload,
-    mdiCast,
   } from '@mdi/js';
   import { canCopyImageToClipboard } from '$lib/utils/asset-utils';
   import { t } from 'svelte-i18n';
   import type { Snippet } from 'svelte';
-  import CastSender from '$lib/components/cast/cast-sender.svelte';
 
   interface Props {
     asset: AssetResponseDto;
@@ -85,7 +84,7 @@
   const sharedLink = getSharedLink();
   let isOwner = $derived($user && asset.ownerId === $user?.id);
   let showDownloadButton = $derived(sharedLink ? sharedLink.allowDownload : !asset.isOffline);
-  let showCast = $derived(sharedLink && !sharedLink.password);
+  let showCastButton = $derived(sharedLink && !sharedLink.password && window.chrome);
   // $: showEditorButton =
   //   isOwner &&
   //   asset.type === AssetTypeEnum.Image &&
@@ -139,7 +138,7 @@
     {#if isOwner}
       <FavoriteAction {asset} {onAction} />
     {/if}
-    {#if showCast}
+    {#if showCastButton}
       <CastSender {asset} />
     {/if}
 
diff --git a/web/src/lib/components/cast/cast-sender.svelte b/web/src/lib/components/cast/cast-sender.svelte
index cc49a754a6878..58700e5aa2fa0 100644
--- a/web/src/lib/components/cast/cast-sender.svelte
+++ b/web/src/lib/components/cast/cast-sender.svelte
@@ -11,44 +11,66 @@
 
   let { asset, ...rest }: Props = $props();
 
-  let cjs;
-
   let key = getKey();
   let downloadUrl = window.location.origin + getBaseUrl() + `/assets/${asset.id}/original` + (key ? `?key=${key}` : '');
   let thumbUrl =
     window.location.origin + getBaseUrl() + `/assets/${asset.id}/thumbnail?size=thumbnail` + (key ? `&key=${key}` : '');
 
+  const __onGCastApiAvailable = function (isAvailable: boolean) {
+    if (isAvailable) {
+      initializeCastApi();
+    }
+  };
+
   onMount(() => {
-    // Dynamically create a script tag to load Castjs
-    const script = document.createElement('script');
-    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/castjs/5.3.0/cast.min.js';
-    script.onload = () => {
-      // Initialize Castjs after the script is loaded
-      if (typeof Castjs !== 'undefined') {
-        cjs = new Castjs();
-        console.log('Castjs loaded successfully.');
-      } else {
-        console.error('Castjs is still undefined after loading.');
-      }
-    };
-    script.onerror = () => {
-      console.error('Failed to load Castjs library.');
-    };
-    document.body.appendChild(script);
+    if (window.chrome && !window.chrome.cast) {
+      window['__onGCastApiAvailable'] = __onGCastApiAvailable;
+
+      const script = document.createElement('script');
+      script.src = 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1';
+      script.onload = () => {
+        console.log('loaded cast from gstatic');
+      };
+      script.onerror = () => {
+        console.error('failed to load cast from gstatic.');
+      };
+      document.body.appendChild(script);
+    }
   });
 
-  const castVideo = () => {
-    if (cjs && cjs.available) {
-      console.log(downloadUrl);
-      cjs.cast(downloadUrl, {
-        poster: thumbUrl,
-        title: asset.originalFileName,
-        description: 'casting from immich',
-      });
-    } else {
-      console.error('Casting is unavailable.');
+  const initializeCastApi = function () {
+    var options = {};
+
+    // use the chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID
+    options.receiverApplicationId = chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID;
+
+    // ORIGIN_SCOPED - Auto connect from same appId and page origin
+    options.autoJoinPolicy = chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED;
+
+    cast.framework.CastContext.getInstance().setOptions(options);
+  };
+
+  const castAsset = async () => {
+    // get or create session
+    var castSession = cast.framework.CastContext.getInstance().getCurrentSession();
+    if (!castSession) {
+      await cast.framework.CastContext.getInstance().requestSession();
+      castSession = cast.framework.CastContext.getInstance().getCurrentSession();
     }
+
+    var mediaInfo = new chrome.cast.media.MediaInfo(downloadUrl, asset.originalMimeType);
+
+    // for thumb and title
+    mediaInfo.metadata = new chrome.cast.media.GenericMediaMetadata();
+    mediaInfo.metadata.metadataType = chrome.cast.media.MetadataType.GENERIC;
+    mediaInfo.metadata.title = asset.originalFileName;
+    mediaInfo.metadata.images = [{ url: thumbUrl }];
+
+    var request = new chrome.cast.media.LoadRequest(mediaInfo);
+
+    // cast content
+    await castSession.loadMedia(request);
   };
 </script>
 
-<CircleIconButton onclick={castVideo} color="opaque" hideMobile={false} icon={mdiCast} title={'cast'} />
+<CircleIconButton onclick={castAsset} color="opaque" hideMobile={false} icon={mdiCast} title={'cast'} />