From 6c531e0a5a34af52b676bf0c5d1e2be8bee8f985 Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Wed, 11 Mar 2026 14:15:31 -0500
Subject: [PATCH] chore: add shadow to video play/pause icon shadow (#26836)

---
 .../asset_viewer/animated_play_pause.dart     | 35 +++++++++++++++----
 .../widgets/asset_viewer/video_controls.dart  | 19 +++++-----
 2 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/mobile/lib/widgets/asset_viewer/animated_play_pause.dart b/mobile/lib/widgets/asset_viewer/animated_play_pause.dart
index e7ceac6105..4be7f49b5a 100644
--- a/mobile/lib/widgets/asset_viewer/animated_play_pause.dart
+++ b/mobile/lib/widgets/asset_viewer/animated_play_pause.dart
@@ -1,12 +1,15 @@
+import 'dart:ui';
+
 import 'package:flutter/material.dart';
 
 /// A widget that animates implicitly between a play and a pause icon.
 class AnimatedPlayPause extends StatefulWidget {
-  const AnimatedPlayPause({super.key, required this.playing, this.size, this.color});
+  const AnimatedPlayPause({super.key, required this.playing, this.size, this.color, this.shadows});
 
   final double? size;
   final bool playing;
   final Color? color;
+  final List<Shadow>? shadows;
 
   @override
   State<StatefulWidget> createState() => AnimatedPlayPauseState();
@@ -39,12 +42,32 @@ class AnimatedPlayPauseState extends State<AnimatedPlayPause> with SingleTickerP
 
   @override
   Widget build(BuildContext context) {
+    final icon = AnimatedIcon(
+      color: widget.color,
+      size: widget.size,
+      icon: AnimatedIcons.play_pause,
+      progress: animationController,
+    );
+
     return Center(
-      child: AnimatedIcon(
-        color: widget.color,
-        size: widget.size,
-        icon: AnimatedIcons.play_pause,
-        progress: animationController,
+      child: Stack(
+        alignment: Alignment.center,
+        children: [
+          for (final shadow in widget.shadows ?? const <Shadow>[])
+            Transform.translate(
+              offset: shadow.offset,
+              child: ImageFiltered(
+                imageFilter: ImageFilter.blur(sigmaX: shadow.blurRadius / 2, sigmaY: shadow.blurRadius / 2),
+                child: AnimatedIcon(
+                  color: shadow.color,
+                  size: widget.size,
+                  icon: AnimatedIcons.play_pause,
+                  progress: animationController,
+                ),
+              ),
+            ),
+          icon,
+        ],
       ),
     );
   }
diff --git a/mobile/lib/widgets/asset_viewer/video_controls.dart b/mobile/lib/widgets/asset_viewer/video_controls.dart
index 4eed3903c9..85707c82ea 100644
--- a/mobile/lib/widgets/asset_viewer/video_controls.dart
+++ b/mobile/lib/widgets/asset_viewer/video_controls.dart
@@ -72,17 +72,14 @@ class VideoControls extends HookConsumerWidget {
         children: [
           Row(
             children: [
-              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),
-                ),
+              IconButton(
+                iconSize: 32,
+                padding: const EdgeInsets.all(12),
+                constraints: const BoxConstraints(),
+                icon: isFinished
+                    ? const Icon(Icons.replay, color: Colors.white, size: 32, shadows: _controlShadows)
+                    : AnimatedPlayPause(color: Colors.white, size: 32, playing: isPlaying, shadows: _controlShadows),
+                onPressed: () => _toggle(ref, isCasting),
               ),
               const Spacer(),
               Text(