improve: add separate theme for desktop and mobile for video player

lib/presentation/mixins/play_video_action_mixin.dart

@@ -1,5 +1,6 @@
 import 'package:fluffychat/utils/platform_infos.dart';
-import 'package:fluffychat/widgets/video_viewer_dialog.dart';
+import 'package:fluffychat/widgets/video_viewer_desktop_theme.dart';
+import 'package:fluffychat/widgets/video_viewer_mobile_theme.dart';
 import 'package:flutter/material.dart';
 
 mixin PlayVideoActionMixin {
@@ -9,7 +10,10 @@ mixin PlayVideoActionMixin {
       useRootNavigator: PlatformInfos.isWeb,
       useSafeArea: false,
       builder: (context) {
-        return VideoViewerDialog(path: uriOrFilePath);
+        if (PlatformInfos.isWeb || PlatformInfos.isDesktop) {
+          return VideoViewerDesktopTheme(path: uriOrFilePath);
+        }
+        return VideoViewerMobileTheme(path: uriOrFilePath);
       },
     );
   }

lib/widgets/video_viewer_desktop_theme.dart

@@ -0,0 +1,40 @@
+import 'package:fluffychat/widgets/twake_components/twake_icon_button.dart';
+import 'package:fluffychat/widgets/video_player.dart';
+import 'package:fluffychat/widgets/video_viewer_style.dart';
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:flutter_gen/gen_l10n/l10n.dart';
+import 'package:media_kit_video/media_kit_video.dart';
+
+class VideoViewerDesktopTheme extends StatelessWidget {
+  const VideoViewerDesktopTheme({
+    super.key,
+    required this.path,
+  });
+
+  final String path;
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialDesktopVideoControlsTheme(
+      normal: MaterialDesktopVideoControlsThemeData(
+        topButtonBar: [
+          TwakeIconButton(
+            tooltip: L10n.of(context)!.back,
+            icon: Icons.close,
+            onTap: () => context.pop(),
+            iconColor: Theme.of(context).colorScheme.surface,
+          )
+        ],
+        seekBarColor: Theme.of(context).colorScheme.onSurfaceVariant,
+        seekBarPositionColor: Theme.of(context).colorScheme.primary,
+        seekBarHeight: VideoViewerStyle.seekBarHeight,
+        seekBarThumbColor: Theme.of(context).colorScheme.primary,
+      ),
+      fullscreen: const MaterialDesktopVideoControlsThemeData(),
+      child: VideoPlayer(
+        path: path,
+      ),
+    );
+  }
+}

lib/widgets/video_viewer_mobile_theme.dart

@@ -0,0 +1,47 @@
+import 'package:fluffychat/widgets/twake_components/twake_icon_button.dart';
+import 'package:fluffychat/widgets/video_player.dart';
+import 'package:fluffychat/widgets/video_viewer_style.dart';
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:flutter_gen/gen_l10n/l10n.dart';
+import 'package:media_kit_video/media_kit_video.dart';
+
+class VideoViewerMobileTheme extends StatelessWidget {
+  const VideoViewerMobileTheme({
+    super.key,
+    required this.path,
+  });
+
+  final String path;
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialVideoControlsTheme(
+      normal: MaterialVideoControlsThemeData(
+        topButtonBarMargin: VideoViewerStyle.topButtonBarMargin(context),
+        topButtonBar: [
+          TwakeIconButton(
+            tooltip: L10n.of(context)!.back,
+            icon: Icons.close,
+            onTap: () => context.pop(),
+            iconColor: Theme.of(context).colorScheme.surface,
+          )
+        ],
+        bottomButtonBar: const [
+          MaterialPositionIndicator(),
+          Spacer(),
+        ],
+        seekBarColor: Theme.of(context).colorScheme.onSurfaceVariant,
+        seekBarPositionColor: Theme.of(context).colorScheme.primary,
+        bottomButtonBarMargin: VideoViewerStyle.bottomBarMargin(context),
+        seekBarMargin: VideoViewerStyle.bottomBarMargin(context),
+        seekBarHeight: VideoViewerStyle.seekBarHeight,
+        seekBarThumbColor: Theme.of(context).colorScheme.primary,
+      ),
+      fullscreen: const MaterialVideoControlsThemeData(),
+      child: VideoPlayer(
+        path: path,
+      ),
+    );
+  }
+}