chore: add shadow to video play/pause icon shadow (#26836)

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(
+      child: Stack(
-        color: widget.color,
+        alignment: Alignment.center,
-        size: widget.size,
+        children: [
-        icon: AnimatedIcons.play_pause,
+          for (final shadow in widget.shadows ?? const <Shadow>[])
-        progress: animationController,
+            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,
+        ],
       ),
     );
   }

mobile/lib/widgets/asset_viewer/video_controls.dart

@@ -72,17 +72,14 @@ class VideoControls extends HookConsumerWidget {
         children: [
           Row(
             children: [
-              IconTheme(
+              IconButton(
-                data: const IconThemeData(shadows: _controlShadows),
+                iconSize: 32,
-                child: IconButton(
+                padding: const EdgeInsets.all(12),
-                  iconSize: 32,
+                constraints: const BoxConstraints(),
-                  padding: const EdgeInsets.all(12),
+                icon: isFinished
-                  constraints: const BoxConstraints(),
+                    ? const Icon(Icons.replay, color: Colors.white, size: 32, shadows: _controlShadows)
-                  icon: isFinished
+                    : AnimatedPlayPause(color: Colors.white, size: 32, playing: isPlaying, shadows: _controlShadows),
-                      ? const Icon(Icons.replay, color: Colors.white, size: 32)
+                onPressed: () => _toggle(ref, isCasting),
-                      : AnimatedPlayPause(color: Colors.white, size: 32, playing: isPlaying),
-                  onPressed: () => _toggle(ref, isCasting),
-                ),
               ),
               const Spacer(),
               Text(