From 9fc32b6f7a4ba665e064d2c3c800a83264e92a1c Mon Sep 17 00:00:00 2001
From: Thomas <9749173+uhthomas@users.noreply.github.com>
Date: Wed, 11 Mar 2026 01:58:01 +0000
Subject: [PATCH] feat(mobile): use material design 3 slider (#26829)

* feat(mobile): use material design 3 slider

The new slider is easier to use, and looks more modern.

* chore: add shadow to button and text for better visibility

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
---
 mobile/lib/theme/theme_data.dart              |  2 --
 .../widgets/asset_viewer/video_controls.dart  | 22 ++++++++++++-------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/mobile/lib/theme/theme_data.dart b/mobile/lib/theme/theme_data.dart
index 3837d6337c..69b8596490 100644
--- a/mobile/lib/theme/theme_data.dart
+++ b/mobile/lib/theme/theme_data.dart
@@ -62,8 +62,6 @@ ThemeData getThemeData({required ColorScheme colorScheme, required Locale locale
     ),
     chipTheme: const ChipThemeData(side: BorderSide.none),
     sliderTheme: const SliderThemeData(
-      thumbShape: RoundSliderThumbShape(enabledThumbRadius: 7),
-      trackHeight: 2.0,
       // ignore: deprecated_member_use
       year2023: false,
     ),
diff --git a/mobile/lib/widgets/asset_viewer/video_controls.dart b/mobile/lib/widgets/asset_viewer/video_controls.dart
index 29e877b3dc..4eed3903c9 100644
--- a/mobile/lib/widgets/asset_viewer/video_controls.dart
+++ b/mobile/lib/widgets/asset_viewer/video_controls.dart
@@ -14,6 +14,8 @@ import 'package:immich_mobile/widgets/asset_viewer/animated_play_pause.dart';
 class VideoControls extends HookConsumerWidget {
   final String videoPlayerName;
 
+  static const List<Shadow> _controlShadows = [Shadow(color: Colors.black87, blurRadius: 6, offset: Offset(0, 1))];
+
   const VideoControls({super.key, required this.videoPlayerName});
 
   void _toggle(WidgetRef ref, bool isCasting) {
@@ -70,14 +72,17 @@ class VideoControls extends HookConsumerWidget {
         children: [
           Row(
             children: [
-              IconButton(
-                iconSize: 32,
-                padding: const EdgeInsets.all(12),
-                constraints: const BoxConstraints(),
-                icon: isFinished
-                    ? const Icon(Icons.replay, color: Colors.white, size: 32)
-                    : AnimatedPlayPause(color: Colors.white, size: 32, playing: isPlaying),
-                onPressed: () => _toggle(ref, isCasting),
+              IconTheme(
+                data: const IconThemeData(shadows: _controlShadows),
+                child: IconButton(
+                  iconSize: 32,
+                  padding: const EdgeInsets.all(12),
+                  constraints: const BoxConstraints(),
+                  icon: isFinished
+                      ? const Icon(Icons.replay, color: Colors.white, size: 32)
+                      : AnimatedPlayPause(color: Colors.white, size: 32, playing: isPlaying),
+                  onPressed: () => _toggle(ref, isCasting),
+                ),
               ),
               const Spacer(),
               Text(
@@ -86,6 +91,7 @@ class VideoControls extends HookConsumerWidget {
                   color: Colors.white,
                   fontWeight: FontWeight.w500,
                   fontFeatures: [FontFeature.tabularFigures()],
+                  shadows: _controlShadows,
                 ),
               ),
               const SizedBox(width: 16),