feat(mobile): new video slider ui (#14126)

mobile/lib/constants/immich_colors.dart

@@ -20,7 +20,7 @@ const String defaultColorPresetName = "indigo";
 const Color immichBrandColorLight = Color(0xFF4150AF);
 const Color immichBrandColorDark = Color(0xFFACCBFA);
 const Color whiteOpacity75 = Color.fromARGB((0.75 * 255) ~/ 1, 255, 255, 255);
-const Color blackOpacity40 = Color.fromARGB((0.40 * 255) ~/ 1, 0, 0, 0);
+const Color blackOpacity90 = Color.fromARGB((0.90 * 255) ~/ 1, 0, 0, 0);
 
 final Map<ImmichColorPreset, ImmichTheme> _themePresetsMap = {
   ImmichColorPreset.indigo: ImmichTheme(

mobile/lib/widgets/asset_viewer/bottom_gallery_bar.dart

@@ -5,6 +5,7 @@ import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:fluttertoast/fluttertoast.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/immich_colors.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/providers/album/album.provider.dart';
 import 'package:immich_mobile/providers/album/current_album.provider.dart';
@@ -327,14 +328,23 @@ class BottomGalleryBar extends ConsumerWidget {
       child: AnimatedOpacity(
         duration: const Duration(milliseconds: 100),
         opacity: ref.watch(showControlsProvider) ? 1.0 : 0.0,
+        child: DecoratedBox(
+          decoration: const BoxDecoration(
+            gradient: LinearGradient(
+              begin: Alignment.bottomCenter,
+              end: Alignment.topCenter,
+              colors: [blackOpacity90, Colors.transparent],
+            ),
+          ),
+          position: DecorationPosition.background,
+          child: Padding(
+            padding: EdgeInsets.only(top: 40.0),
             child: Column(
               children: [
-            Visibility(
+                if (showVideoPlayerControls) const VideoControls(),
-              visible: showVideoPlayerControls,
-              child: const VideoControls(),
-            ),
                 BottomNavigationBar(
-              backgroundColor: Colors.black.withOpacity(0.4),
+                  elevation: 0.0,
+                  backgroundColor: Colors.transparent,
                   unselectedIconTheme: const IconThemeData(color: Colors.white),
                   selectedIconTheme: const IconThemeData(color: Colors.white),
                   unselectedLabelStyle: const TextStyle(
@@ -353,8 +363,9 @@ class BottomGalleryBar extends ConsumerWidget {
                   unselectedItemColor: Colors.white,
                   showSelectedLabels: true,
                   showUnselectedLabels: true,
-              items:
+                  items: albumActions
-                  albumActions.map((e) => e.keys.first).toList(growable: false),
+                      .map((e) => e.keys.first)
+                      .toList(growable: false),
                   onTap: (index) {
                     albumActions[index].values.first.call(index);
                   },
@@ -362,6 +373,8 @@ class BottomGalleryBar extends ConsumerWidget {
               ],
             ),
           ),
+        ),
+      ),
     );
   }
 }

mobile/lib/widgets/asset_viewer/formatted_duration.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:immich_mobile/constants/immich_colors.dart';
 
 @pragma('vm:prefer-inline')
 String _formatDuration(Duration position) {
@@ -24,8 +23,8 @@ class FormattedDuration extends StatelessWidget {
         _formatDuration(data),
         style: const TextStyle(
           fontSize: 14.0,
-          color: whiteOpacity75,
+          color: Colors.white,
-          fontWeight: FontWeight.normal,
+          fontWeight: FontWeight.w500,
         ),
         textAlign: TextAlign.center,
       ),

mobile/lib/widgets/asset_viewer/video_controls.dart

@@ -1,7 +1,5 @@
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/constants/immich_colors.dart';
-import 'package:immich_mobile/providers/asset_viewer/show_controls.provider.dart';
 import 'package:immich_mobile/widgets/asset_viewer/video_position.dart';
 
 /// The video controls for the [videoPlayerControlsProvider]
@@ -12,24 +10,11 @@ class VideoControls extends ConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     final isPortrait =
         MediaQuery.orientationOf(context) == Orientation.portrait;
-    return AnimatedOpacity(
+    return isPortrait
-      opacity: ref.watch(showControlsProvider) ? 1.0 : 0.0,
+        ? const VideoPosition()
-      duration: const Duration(milliseconds: 100),
+        : const Padding(
-      child: isPortrait
+            padding: EdgeInsets.symmetric(horizontal: 60.0),
-          ? const ColoredBox(
-              color: blackOpacity40,
-              child: Padding(
-                padding: EdgeInsets.symmetric(horizontal: 24.0),
             child: VideoPosition(),
-              ),
-            )
-          : const ColoredBox(
-              color: blackOpacity40,
-              child: Padding(
-                padding: EdgeInsets.symmetric(horizontal: 128.0),
-                child: VideoPosition(),
-              ),
-            ),
           );
   }
 }

mobile/lib/widgets/asset_viewer/video_mute_button.dart

@@ -1,23 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/providers/asset_viewer/video_player_controls_provider.dart';
-
-class VideoMuteButton extends ConsumerWidget {
-  const VideoMuteButton({super.key});
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    return IconButton(
-      icon: ref.watch(
-        videoPlayerControlsProvider.select((value) => value.mute),
-      )
-          ? const Icon(Icons.volume_off)
-          : const Icon(Icons.volume_up),
-      onPressed: () =>
-          ref.read(videoPlayerControlsProvider.notifier).toggleMute(),
-      color: Colors.white,
-      padding: const EdgeInsets.all(0),
-      alignment: Alignment.centerRight,
-    );
-  }
-}

mobile/lib/widgets/asset_viewer/video_position.dart

@@ -7,7 +7,6 @@ import 'package:immich_mobile/constants/immich_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/widgets/asset_viewer/formatted_duration.dart';
-import 'package:immich_mobile/widgets/asset_viewer/video_mute_button.dart';
 
 class VideoPosition extends HookConsumerWidget {
   const VideoPosition({super.key});
@@ -20,9 +19,21 @@ class VideoPosition extends HookConsumerWidget {
     final wasPlaying = useRef<bool>(true);
     return duration == Duration.zero
         ? const _VideoPositionPlaceholder()
-        : Row(
+        : Column(
+            children: [
+              Padding(
+                // align with slider's inherent padding
+                padding: const EdgeInsets.symmetric(horizontal: 12.0),
+                child: Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                   children: [
                     FormattedDuration(position),
+                    FormattedDuration(duration),
+                  ],
+                ),
+              ),
+              Row(
+                children: [
                   Expanded(
                     child: Slider(
                       value: min(
@@ -35,7 +46,8 @@ class VideoPosition extends HookConsumerWidget {
                       activeColor: Colors.white,
                       inactiveColor: whiteOpacity75,
                       onChangeStart: (value) {
-                    final state = ref.read(videoPlaybackValueProvider).state;
+                        final state =
+                            ref.read(videoPlaybackValueProvider).state;
                         wasPlaying.value = state != VideoPlaybackState.paused;
                         ref.read(videoPlayerControlsProvider.notifier).pause();
                       },
@@ -45,13 +57,14 @@ class VideoPosition extends HookConsumerWidget {
                         }
                       },
                       onChanged: (position) {
-                    ref.read(videoPlayerControlsProvider.notifier).position =
+                        ref
-                        position;
+                            .read(videoPlayerControlsProvider.notifier)
+                            .position = position;
                       },
                     ),
                   ),
-              FormattedDuration(duration),
+                ],
-              const VideoMuteButton(),
+              ),
             ],
           );
   }
@@ -64,9 +77,20 @@ class _VideoPositionPlaceholder extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return const Row(
+    return const Column(
+      children: [
+        Padding(
+          padding: EdgeInsets.symmetric(horizontal: 12.0),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
             children: [
               FormattedDuration(Duration.zero),
+              FormattedDuration(Duration.zero),
+            ],
+          ),
+        ),
+        Row(
+          children: [
             Expanded(
               child: Slider(
                 value: 0.0,
@@ -78,8 +102,8 @@ class _VideoPositionPlaceholder extends StatelessWidget {
                 onChanged: _onChangedDummy,
               ),
             ),
-        FormattedDuration(Duration.zero),
+          ],
-        VideoMuteButton(),
+        ),
       ],
     );
   }