refactor: cast button (#25101)

Author: jrasm91

web/src/lib/cast/cast-button.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

web/src/lib/components/album-page/album-viewer.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} />

web/src/lib/components/asset-viewer/asset-viewer-nav-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={{

web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte

@@ -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;

web/src/lib/managers/cast-manager.svelte.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 };
+};

web/src/lib/services/app.service.ts

@@ -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