helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

feat(mobile): add cast support (#18341)

Browse source 
* initial cast framework complete and mocked cast dialog working

* wip casting

* casting works!

just need to add session key check and remote video controls

* cleanup of classes

* add session expiration checks

* cast dialog now shows connected device at top of list with a list header. Discovered devices are also cached for app session.

* cast video player finalized

* show fullsize assets on casting

* translation already happens on the text element

* remove prints

* fix lintings

* code review changes from @shenlong-tanwen

* fix connect method override

* fix alphabetization

* remove important

* filter chromecast audio devices

* fix some disconnect command ordering issues and unawaited futures

* remove prints

* only disconnect if we are connected

* don't try to reconnect if its the current device

* add cast button to top bar

* format sessions api

* more formatting issues fixed

* add snack bar to tell user that we cannot cast an asset that is not uploaded to server

* make casting icon change to primary color when casting is active

* only show casting snackbar if we are casting

* dont show cast button if asset is remote and we are not casting

* stop playing media if we seek to an asset that is not remote

* remove https check since it works with local http IP addresses

* remove unneeded imports

* fix recasting when socket closes

* fix info plist formatting

* only show cast button if there is an active websocket connection (ie the server is accessible)

* add device capability bitmask checks

* small comment about bitmask
This commit is contained in:
Brandon Wees 2025-06-08 21:55:23 -05:00 • committed by GitHub
parent e88eb44aba
commit 5574b2dd39
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
24 changed files with 1101 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

160
mobile/lib/widgets/asset_viewer/cast_dialog.dart Normal file
View file

@ -0,0 +1,160 @@
import 'package:easy_localization/easy_localization.dart';
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/models/cast/cast_manager_state.dart';
import 'package:immich_mobile/providers/cast.provider.dart';
class CastDialog extends ConsumerWidget {
const CastDialog({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
final castManager = ref.watch(castProvider);
bool isCurrentDevice(String deviceName) {
return castManager.receiverName == deviceName && castManager.isCasting;
}
bool isDeviceConnecting(String deviceName) {
return castManager.receiverName == deviceName && !castManager.isCasting;
}
return AlertDialog(
title: const Text(
"cast",
style: TextStyle(fontWeight: FontWeight.bold),
).tr(),
content: SizedBox(
width: 250,
height: 250,
child: FutureBuilder<List<(String, CastDestinationType, dynamic)>>(
future: ref.read(castProvider.notifier).getDevices(),
builder: (context, snapshot) {
if (snapshot.hasError) {
return Text(
'Error: ${snapshot.error.toString()}',
);
} else if (!snapshot.hasData) {
return const SizedBox(
height: 48,
child: Center(child: CircularProgressIndicator()),
);
}
if (snapshot.data!.isEmpty) {
return const Text(
'no_cast_devices_found',
).tr();
}
final devices = snapshot.data!;
final connected =
devices.where((d) => isCurrentDevice(d.$1)).toList();
final others =
devices.where((d) => !isCurrentDevice(d.$1)).toList();
final List<dynamic> sectionedList = [];
if (connected.isNotEmpty) {
sectionedList.add("connected_device");
sectionedList.addAll(connected);
}
if (others.isNotEmpty) {
sectionedList.add("discovered_devices");
sectionedList.addAll(others);
}
return ListView.builder(
shrinkWrap: true,
itemCount: sectionedList.length,
itemBuilder: (context, index) {
final item = sectionedList[index];
if (item is String) {
// It's a section header
return Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Text(
item,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
),
).tr(),
);
} else {
final (deviceName, type, deviceObj) =
item as (String, CastDestinationType, dynamic);
return ListTile(
title: Text(
deviceName,
style: TextStyle(
color: isCurrentDevice(deviceName)
? context.colorScheme.primary
: null,
),
),
leading: Icon(
type == CastDestinationType.googleCast
? Icons.cast
: Icons.cast_connected,
color: isCurrentDevice(deviceName)
? context.colorScheme.primary
: null,
),
trailing: isCurrentDevice(deviceName)
? Icon(Icons.check, color: context.colorScheme.primary)
: isDeviceConnecting(deviceName)
? const CircularProgressIndicator()
: null,
onTap: () async {
if (isDeviceConnecting(deviceName)) {
return;
}
if (castManager.isCasting) {
await ref.read(castProvider.notifier).disconnect();
}
if (!isCurrentDevice(deviceName)) {
ref
.read(castProvider.notifier)
.connect(type, deviceObj);
}
},
);
}
},
);
},
),
),
actions: [
if (castManager.isCasting)
TextButton(
onPressed: () => ref.read(castProvider.notifier).disconnect(),
child: Text(
"stop_casting",
style: TextStyle(
color: context.colorScheme.secondary,
fontWeight: FontWeight.bold,
),
).tr(),
),
TextButton(
onPressed: () => context.pop(),
child: Text(
"close",
style: TextStyle(
color: context.colorScheme.primary,
fontWeight: FontWeight.bold,
),
).tr(),
),
],
);
}
}

27
mobile/lib/widgets/asset_viewer/custom_video_player_controls.dart
View file

@ -1,9 +1,11 @@
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/models/cast/cast_manager_state.dart';
import 'package:immich_mobile/providers/asset_viewer/current_asset.provider.dart';
import 'package:immich_mobile/providers/asset_viewer/show_controls.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/utils/hooks/timer_hook.dart';
import 'package:immich_mobile/widgets/asset_viewer/center_play_button.dart';
import 'package:immich_mobile/widgets/common/delayed_loading_indicator.dart';
@ -25,6 +27,8 @@ class CustomVideoPlayerControls extends HookConsumerWidget {
final VideoPlaybackState state =
ref.watch(videoPlaybackValueProvider.select((value) => value.state));
final cast = ref.watch(castProvider);
// A timer to hide the controls
final hideTimer = useTimer(
hideTimerDuration,
@ -42,7 +46,8 @@ class CustomVideoPlayerControls extends HookConsumerWidget {
}
},
);
final showBuffering = state == VideoPlaybackState.buffering;
final showBuffering =
state == VideoPlaybackState.buffering && !cast.isCasting;
/// Shows the controls and starts the timer to hide them
void showControlsAndStartHideTimer() {
@ -59,6 +64,23 @@ class CustomVideoPlayerControls extends HookConsumerWidget {
/// Toggles between playing and pausing depending on the state of the video
void togglePlay() {
showControlsAndStartHideTimer();
if (cast.isCasting) {
if (cast.castState == CastState.playing) {
ref.read(castProvider.notifier).pause();
} else if (cast.castState == CastState.paused) {
ref.read(castProvider.notifier).play();
} else if (cast.castState == CastState.idle) {
// resend the play command since its finished
final asset = ref.read(currentAssetProvider);
if (asset == null) {
return;
}
ref.read(castProvider.notifier).loadMedia(asset, true);
}
return;
}
if (state == VideoPlaybackState.playing) {
ref.read(videoPlayerControlsProvider.notifier).pause();
} else if (state == VideoPlaybackState.completed) {
@ -89,7 +111,8 @@ class CustomVideoPlayerControls extends HookConsumerWidget {
backgroundColor: Colors.black54,
iconColor: Colors.white,
isFinished: state == VideoPlaybackState.completed,
isPlaying: state == VideoPlaybackState.playing,
isPlaying: state == VideoPlaybackState.playing ||
(cast.isCasting && cast.castState == CastState.playing),
show: assetIsVideo && showControls,
onPressed: togglePlay,
),

26
mobile/lib/widgets/asset_viewer/top_control_app_bar.dart
View file

@ -1,12 +1,16 @@
import 'package:auto_route/auto_route.dart';
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/providers/activity_statistics.provider.dart';
import 'package:immich_mobile/providers/album/current_album.provider.dart';
import 'package:immich_mobile/entities/asset.entity.dart';
import 'package:immich_mobile/providers/asset.provider.dart';
import 'package:immich_mobile/providers/routes.provider.dart';
import 'package:immich_mobile/providers/cast.provider.dart';
import 'package:immich_mobile/providers/tab.provider.dart';
import 'package:immich_mobile/providers/websocket.provider.dart';
import 'package:immich_mobile/widgets/asset_viewer/cast_dialog.dart';
import 'package:immich_mobile/widgets/asset_viewer/motion_photo_button.dart';
import 'package:immich_mobile/providers/asset_viewer/current_asset.provider.dart';
@ -44,6 +48,10 @@ class TopControlAppBar extends HookConsumerWidget {
const double iconSize = 22.0;
final a = ref.watch(assetWatcher(asset)).value ?? asset;
final album = ref.watch(currentAlbumProvider);
final isCasting = ref.watch(castProvider.select((c) => c.isCasting));
final websocketConnected =
ref.watch(websocketProvider.select((c) => c.isConnected));
final comments = album != null &&
album.remoteId != null &&
asset.remoteId != null
@ -169,6 +177,22 @@ class TopControlAppBar extends HookConsumerWidget {
);
}
Widget buildCastButton() {
return IconButton(
onPressed: () {
showDialog(
context: context,
builder: (context) => const CastDialog(),
);
},
icon: Icon(
isCasting ? Icons.cast_connected_rounded : Icons.cast_rounded,
size: 20.0,
color: isCasting ? context.primaryColor : Colors.grey[200],
),
);
}
bool isInHomePage = ref.read(tabProvider.notifier).state == TabEnum.home;
bool? isInTrash = ref.read(currentAssetProvider)?.isTrashed;
@ -193,6 +217,8 @@ class TopControlAppBar extends HookConsumerWidget {
!asset.isTrashed &&
!isInLockedView)
buildAddToAlbumButton(),
if (isCasting || (asset.isRemote && websocketConnected))
buildCastButton(),
if (asset.isTrashed) buildRestoreButton(),
if (album != null && album.shared && !isInLockedView)
buildActivitiesButton(),

31
mobile/lib/widgets/asset_viewer/video_position.dart
View file

@ -6,6 +6,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/constants/colors.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/widgets/asset_viewer/formatted_duration.dart';
class VideoPosition extends HookConsumerWidget {
@ -13,9 +14,16 @@ class VideoPosition extends HookConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final (position, duration) = ref.watch(
videoPlaybackValueProvider.select((v) => (v.position, v.duration)),
);
final isCasting = ref.watch(castProvider).isCasting;
final (position, duration) = isCasting
? ref.watch(
castProvider.select((c) => (c.currentTime, c.duration)),
)
: ref.watch(
videoPlaybackValueProvider.select((v) => (v.position, v.duration)),
);
final wasPlaying = useRef<bool>(true);
return duration == Duration.zero
? const _VideoPositionPlaceholder()
@ -57,15 +65,22 @@ class VideoPosition extends HookConsumerWidget {
}
},
onChanged: (value) {
final inSeconds =
(duration * (value / 100.0)).inSeconds;
final position = inSeconds.toDouble();
final seekToDuration = (duration * (value / 100.0));
if (isCasting) {
ref
.read(castProvider.notifier)
.seekTo(seekToDuration);
return;
}
ref
.read(videoPlayerControlsProvider.notifier)
.position = position;
.position = seekToDuration.inSeconds.toDouble();
// This immediately updates the slider position without waiting for the video to update
ref.read(videoPlaybackValueProvider.notifier).position =
Duration(seconds: inSeconds);
seekToDuration;
},
),
),

18
mobile/lib/widgets/common/immich_app_bar.dart
View file

@ -8,9 +8,11 @@ import 'package:immich_mobile/extensions/build_context_extensions.dart';
import 'package:immich_mobile/models/backup/backup_state.model.dart';
import 'package:immich_mobile/models/server_info/server_info.model.dart';
import 'package:immich_mobile/providers/backup/backup.provider.dart';
import 'package:immich_mobile/providers/cast.provider.dart';
import 'package:immich_mobile/providers/server_info.provider.dart';
import 'package:immich_mobile/providers/user.provider.dart';
import 'package:immich_mobile/routing/router.dart';
import 'package:immich_mobile/widgets/asset_viewer/cast_dialog.dart';
import 'package:immich_mobile/widgets/common/app_bar_dialog/app_bar_dialog.dart';
import 'package:immich_mobile/widgets/common/user_circle_avatar.dart';
@ -31,6 +33,7 @@ class ImmichAppBar extends ConsumerWidget implements PreferredSizeWidget {
final user = ref.watch(currentUserProvider);
final isDarkTheme = context.isDarkTheme;
const widgetSize = 30.0;
final isCasting = ref.watch(castProvider.select((c) => c.isCasting));
buildProfileIndicator() {
return InkWell(
@ -184,6 +187,21 @@ class ImmichAppBar extends ConsumerWidget implements PreferredSizeWidget {
icon: const Icon(Icons.science_rounded),
onPressed: () => context.pushRoute(const FeatInDevRoute()),
),
if (isCasting)
Padding(
padding: const EdgeInsets.only(right: 12),
child: IconButton(
onPressed: () {
showDialog(
context: context,
builder: (context) => const CastDialog(),
);
},
icon: Icon(
isCasting ? Icons.cast_connected_rounded : Icons.cast_rounded,
),
),
),
if (showUploadButton)
Padding(
padding: const EdgeInsets.only(right: 20),