From 1293e473cad99672d3a932e12cd8b0e82aa37a91 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jason@rasm.me>
Date: Tue, 6 Jan 2026 18:51:19 -0500
Subject: [PATCH] refactor: cast button (#25101)

---
 web/src/lib/cast/cast-button.svelte           | 24 -------------------
 .../components/album-page/album-viewer.svelte |  7 ++++--
 .../asset-viewer/asset-viewer-nav-bar.svelte  |  7 +++---
 .../navigation-bar/navigation-bar.svelte      |  7 ++++--
 web/src/lib/managers/cast-manager.svelte.ts   |  5 +++-
 web/src/lib/services/app.service.ts           | 19 +++++++++++++++
 .../[[assetId=id]]/+page.svelte               |  7 ++++--
 7 files changed, 42 insertions(+), 34 deletions(-)
 delete mode 100644 web/src/lib/cast/cast-button.svelte
 create mode 100644 web/src/lib/services/app.service.ts

diff --git a/web/src/lib/cast/cast-button.svelte b/web/src/lib/cast/cast-button.svelte
deleted file mode 100644
index 392418daa5..0000000000
--- a/web/src/lib/cast/cast-button.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts">
-  import { t } from 'svelte-i18n';
-  import { onMount } from 'svelte';
-  import { mdiCast, mdiCastConnected } from '@mdi/js';
-  import { CastDestinationType, castManager } from '$lib/managers/cast-manager.svelte';
-  import { GCastDestination } from '$lib/utils/cast/gcast-destination.svelte';
-  import { IconButton } from '@immich/ui';
-
-  onMount(async () => {
-    await castManager.initialize();
-  });
-</script>
-
-{#if castManager.availableDestinations.length > 0 && castManager.availableDestinations[0].type === CastDestinationType.GCAST}
-  <IconButton
-    shape="round"
-    variant="ghost"
-    size="medium"
-    color={castManager.isCasting ? 'primary' : 'secondary'}
-    icon={castManager.isCasting ? mdiCastConnected : mdiCast}
-    onclick={() => void GCastDestination.showCastDialog()}
-    aria-label={$t('cast')}
-  />
-{/if}
diff --git a/web/src/lib/components/album-page/album-viewer.svelte b/web/src/lib/components/album-page/album-viewer.svelte
index d5fdb36822..b7fcaa88ec 100644
--- a/web/src/lib/components/album-page/album-viewer.svelte
+++ b/web/src/lib/components/album-page/album-viewer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
-  import CastButton from '$lib/cast/cast-button.svelte';
+  import ActionButton from '$lib/components/ActionButton.svelte';
   import AlbumMap from '$lib/components/album-page/album-map.svelte';
   import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
   import SelectAllAssets from '$lib/components/timeline/actions/SelectAllAction.svelte';
@@ -9,6 +9,7 @@
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import { handleDownloadAlbum } from '$lib/services/album.service';
+  import { getGlobalActions } from '$lib/services/app.service';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
@@ -58,6 +59,8 @@
       handlePromiseError(setAssetId(asset.id).then(() => ($slideshowState = SlideshowState.PlaySlideshow)));
     }
   };
+
+  const { Cast } = $derived(getGlobalActions($t));
 </script>
 
 <svelte:document
@@ -116,7 +119,7 @@
       {/snippet}
 
       {#snippet trailing()}
-        <CastButton />
+        <ActionButton action={Cast} />
 
         {#if sharedLink.allowUpload}
           <IconButton
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 a5050075dc..38ab066c82 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
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import { resolve } from '$app/paths';
-  import CastButton from '$lib/cast/cast-button.svelte';
   import ActionButton from '$lib/components/ActionButton.svelte';
   import type { OnAction, PreAction } from '$lib/components/asset-viewer/actions/action';
   import AddToAlbumAction from '$lib/components/asset-viewer/actions/add-to-album-action.svelte';
@@ -24,6 +23,7 @@
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import { AppRoute } from '$lib/constants';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
+  import { getGlobalActions } from '$lib/services/app.service';
   import { getAssetActions, handleReplaceAsset } from '$lib/services/asset.service';
   import { photoViewerImgElement } from '$lib/stores/assets-store.svelte';
   import { user } from '$lib/stores/user.store';
@@ -111,6 +111,8 @@
     shortcuts: [{ key: 'Escape' }],
   };
 
+  const { Cast } = $derived(getGlobalActions($t));
+
   const { Share, Offline, PlayMotionPhoto, StopMotionPhoto, Info } = $derived(getAssetActions($t, asset));
 
   // $: showEditorButton =
@@ -137,8 +139,7 @@
   </div>
 
   <div class="flex gap-2 overflow-x-auto dark" data-testid="asset-viewer-navbar-actions">
-    <CastButton />
-
+    <ActionButton action={Cast} />
     <ActionButton action={Share} />
     <ActionButton action={Offline} />
     <ActionButton action={PlayMotionPhoto} />
diff --git a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
index ce204412f2..0fd96630eb 100644
--- a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
@@ -5,13 +5,14 @@
 <script lang="ts">
   import { page } from '$app/state';
   import { clickOutside } from '$lib/actions/click-outside';
-  import CastButton from '$lib/cast/cast-button.svelte';
+  import ActionButton from '$lib/components/ActionButton.svelte';
   import NotificationPanel from '$lib/components/shared-components/navigation-bar/notification-panel.svelte';
   import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
   import { AppRoute } from '$lib/constants';
   import SkipLink from '$lib/elements/SkipLink.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
+  import { getGlobalActions } from '$lib/services/app.service';
   import { mobileDevice } from '$lib/stores/mobile-device.svelte';
   import { notificationManager } from '$lib/stores/notification-manager.svelte';
   import { sidebarStore } from '$lib/stores/sidebar.svelte';
@@ -45,6 +46,8 @@
       console.error('Failed to load notifications on mount', error);
     }
   });
+
+  const { Cast } = $derived(getGlobalActions($t));
 </script>
 
 <svelte:window bind:innerWidth />
@@ -158,7 +161,7 @@
           {/if}
         </div>
 
-        <CastButton />
+        <ActionButton action={Cast} />
 
         <div
           use:clickOutside={{
diff --git a/web/src/lib/managers/cast-manager.svelte.ts b/web/src/lib/managers/cast-manager.svelte.ts
index 227bd3faea..81aedd9d85 100644
--- a/web/src/lib/managers/cast-manager.svelte.ts
+++ b/web/src/lib/managers/cast-manager.svelte.ts
@@ -1,3 +1,4 @@
+import { eventManager } from '$lib/managers/event-manager.svelte';
 import { GCastDestination } from '$lib/utils/cast/gcast-destination.svelte';
 import { createSession, type SessionCreateResponseDto } from '@immich/sdk';
 import { DateTime, Duration } from 'luxon';
@@ -57,9 +58,11 @@ class CastManager {
       new GCastDestination(),
       // Add other cast destinations here (ie FCast)
     ];
+
+    eventManager.on('AppInit', () => void this.initialize());
   }
 
-  async initialize() {
+  private async initialize() {
     // this goes first to prevent multiple calls to initialize
     if (this.initialized) {
       return;
diff --git a/web/src/lib/services/app.service.ts b/web/src/lib/services/app.service.ts
new file mode 100644
index 0000000000..6597b2fb5e
--- /dev/null
+++ b/web/src/lib/services/app.service.ts
@@ -0,0 +1,19 @@
+import { CastDestinationType, castManager } from '$lib/managers/cast-manager.svelte';
+import { GCastDestination } from '$lib/utils/cast/gcast-destination.svelte';
+import type { ActionItem } from '@immich/ui';
+import { mdiCast, mdiCastConnected } from '@mdi/js';
+import type { MessageFormatter } from 'svelte-i18n';
+
+export const getGlobalActions = ($t: MessageFormatter) => {
+  const Cast: ActionItem = {
+    title: $t('cast'),
+    icon: castManager.isCasting ? mdiCastConnected : mdiCast,
+    color: castManager.isCasting ? 'primary' : 'secondary',
+    $if: () =>
+      castManager.availableDestinations.length > 0 &&
+      castManager.availableDestinations[0].type === CastDestinationType.GCAST,
+    onAction: () => void GCastDestination.showCastDialog(),
+  };
+
+  return { Cast };
+};
diff --git a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 9279893fbb..5d31bc2229 100644
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { afterNavigate, goto, onNavigate } from '$app/navigation';
   import { scrollMemoryClearer } from '$lib/actions/scroll-memory';
-  import CastButton from '$lib/cast/cast-button.svelte';
+  import ActionButton from '$lib/components/ActionButton.svelte';
   import AlbumDescription from '$lib/components/album-page/album-description.svelte';
   import AlbumMap from '$lib/components/album-page/album-map.svelte';
   import AlbumSummary from '$lib/components/album-page/album-summary.svelte';
@@ -39,6 +39,7 @@
   import AlbumUsersModal from '$lib/modals/AlbumUsersModal.svelte';
   import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
   import { handleDeleteAlbum, handleDownloadAlbum } from '$lib/services/album.service';
+  import { getGlobalActions } from '$lib/services/app.service';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
@@ -413,6 +414,8 @@
       }
     }
   };
+
+  const { Cast } = $derived(getGlobalActions($t));
 </script>
 
 <OnEvents {onSharedLinkCreate} {onAlbumDelete} />
@@ -592,7 +595,7 @@
       {#if viewMode === AlbumPageViewMode.VIEW}
         <ControlAppBar showBackButton backIcon={mdiArrowLeft} onClose={() => goto(backUrl)}>
           {#snippet trailing()}
-            <CastButton />
+            <ActionButton action={Cast} />
 
             {#if isEditor}
               <IconButton