chore(mobile): update casting to new asset viewer (#19994)

* update casting to new asset viewer

* handle websocket

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>

mobile/lib/presentation/widgets/action_buttons/base_action_button.widget.dart

@@ -6,6 +6,7 @@ class BaseActionButton extends StatelessWidget {
     super.key,
     required this.label,
     required this.iconData,
+    this.iconColor,
     this.onPressed,
     this.onLongPressed,
     this.maxWidth = 90.0,
@@ -15,6 +16,7 @@ class BaseActionButton extends StatelessWidget {
 
   final String label;
   final IconData iconData;
+  final Color? iconColor;
   final double maxWidth;
   final double? minWidth;
   final bool menuItem;
@@ -27,7 +29,8 @@ class BaseActionButton extends StatelessWidget {
         minWidth ?? (context.isMobile ? context.width / 4.5 : 75.0);
     final iconTheme = IconTheme.of(context);
     final iconSize = iconTheme.size ?? 24.0;
-    final iconColor = iconTheme.color ?? context.themeData.iconTheme.color;
+    final iconColor =
+        this.iconColor ?? iconTheme.color ?? context.themeData.iconTheme.color;
     final textColor = context.themeData.textTheme.labelLarge?.color;
 
     if (menuItem) {

mobile/lib/presentation/widgets/action_buttons/cast_action_button.widget.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/base_action_button.widget.dart';
+import 'package:immich_mobile/providers/cast.provider.dart';
+import 'package:immich_mobile/widgets/asset_viewer/cast_dialog.dart';
+
+class CastActionButton extends ConsumerWidget {
+  const CastActionButton({super.key, this.menuItem = true});
+
+  final bool menuItem;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final isCasting = ref.watch(castProvider.select((c) => c.isCasting));
+
+    return BaseActionButton(
+      iconData: isCasting ? Icons.cast_connected_rounded : Icons.cast_rounded,
+      iconColor:
+          isCasting ? context.primaryColor : null, // null = default color
+      label: "cast".t(context: context),
+      onPressed: () {
+        showDialog(
+          context: context,
+          builder: (context) => const CastDialog(),
+        );
+      },
+      menuItem: menuItem,
+    );
+  }
+}

mobile/lib/presentation/widgets/asset_viewer/asset_viewer.page.dart

@@ -1,6 +1,7 @@
 import 'dart:async';
 
 import 'package:auto_route/auto_route.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
@@ -18,6 +19,7 @@ import 'package:immich_mobile/presentation/widgets/images/thumbnail.widget.dart'
 import 'package:immich_mobile/providers/asset_viewer/is_motion_video_playing.provider.dart';
 import 'package:immich_mobile/providers/asset_viewer/video_player_controls_provider.dart';
 import 'package:immich_mobile/providers/asset_viewer/video_player_value_provider.dart';
+import 'package:immich_mobile/providers/cast.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/timeline.provider.dart';
 import 'package:immich_mobile/widgets/photo_view/photo_view.dart';
@@ -184,6 +186,40 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
       }
     });
     _delayedOperations.add(timer);
+
+    _handleCasting(asset);
+  }
+
+  void _handleCasting(BaseAsset asset) {
+    if (!ref.read(castProvider).isCasting) return;
+
+    // hide any casting snackbars if they exist
+    context.scaffoldMessenger.hideCurrentSnackBar();
+
+    // send image to casting if the server has it
+    if (asset.hasRemote) {
+      final remoteAsset = asset as RemoteAsset;
+
+      ref.read(castProvider.notifier).loadMedia(remoteAsset, false);
+    } else {
+      // casting cannot show local assets
+      context.scaffoldMessenger.clearSnackBars();
+
+      if (ref.read(castProvider).isCasting) {
+        ref.read(castProvider.notifier).stop();
+        context.scaffoldMessenger.showSnackBar(
+          SnackBar(
+            duration: const Duration(seconds: 2),
+            content: Text(
+              "local_asset_cast_failed".tr(),
+              style: context.textTheme.bodyLarge?.copyWith(
+                color: context.primaryColor,
+              ),
+            ),
+          ),
+        );
+      }
+    }
   }
 
   void _onPageBuild(PhotoViewControllerBase controller) {
@@ -570,6 +606,19 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
     ref.watch(assetViewerProvider.select((s) => s.backgroundOpacity));
     ref.watch(isPlayingMotionVideoProvider);
 
+    // Listen for casting changes and send initial asset to the cast provider
+    ref.listen(castProvider.select((value) => value.isCasting),
+        (_, isCasting) async {
+      if (!isCasting) return;
+
+      final asset = ref.read(currentAssetNotifier);
+      if (asset == null) return;
+
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        _handleCasting(asset);
+      });
+    });
+
     // Currently it is not possible to scroll the asset when the bottom sheet is open all the way.
     // Issue: https://github.com/flutter/flutter/issues/109037
     // TODO: Add a custom scrum builder once the fix lands on stable

mobile/lib/presentation/widgets/asset_viewer/top_app_bar.widget.dart

@@ -5,12 +5,15 @@ import 'package:immich_mobile/constants/enums.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/domain/utils/event_stream.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/presentation/widgets/action_buttons/cast_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/favorite_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/motion_photo_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/action_buttons/unfavorite_action_button.widget.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
+import 'package:immich_mobile/providers/cast.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';
 import 'package:immich_mobile/providers/user.provider.dart';
+import 'package:immich_mobile/providers/websocket.provider.dart';
 
 class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
   const ViewerTopAppBar({super.key});
@@ -37,7 +40,17 @@ class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
       opacity = 0;
     }
 
+    final isCasting = ref.watch(
+      castProvider.select((c) => c.isCasting),
+    );
+    final websocketConnected =
+        ref.watch(websocketProvider.select((c) => c.isConnected));
+
     final actions = <Widget>[
+      if (isCasting || (asset.hasRemote && websocketConnected))
+        const CastActionButton(
+          menuItem: true,
+        ),
       if (asset.hasRemote && isOwner && !asset.isFavorite)
         const FavoriteActionButton(source: ActionSource.viewer, menuItem: true),
       if (asset.hasRemote && isOwner && asset.isFavorite)