From a18dcf2159abc0267a3f4096de5104f9c5146804 Mon Sep 17 00:00:00 2001 From: sherlock Date: Thu, 5 Oct 2023 10:37:24 +0700 Subject: [PATCH] improve: images/videos viewer --- .../image_viewer/image_viewer_style.dart | 7 ++++ lib/pages/image_viewer/image_viewer_view.dart | 3 +- .../mixins/play_video_action_mixin.dart | 33 +++++-------------- lib/utils/interactive_viewer_gallery.dart | 3 +- lib/widgets/video_viewer_desktop_theme.dart | 7 +++- 5 files changed, 26 insertions(+), 27 deletions(-) diff --git a/lib/pages/image_viewer/image_viewer_style.dart b/lib/pages/image_viewer/image_viewer_style.dart index d82902b806..3d88427473 100644 --- a/lib/pages/image_viewer/image_viewer_style.dart +++ b/lib/pages/image_viewer/image_viewer_style.dart @@ -1,4 +1,11 @@ +import 'package:fluffychat/utils/platform_infos.dart'; +import 'package:flutter/material.dart'; + class ImageViewerStyle { static const double minScaleInteractiveViewer = 1.0; static const double maxScaleInteractiveViewer = 10.0; + static double? appBarHeight = PlatformInfos.isWeb ? 56 : null; + static EdgeInsetsGeometry paddingTopAppBar = EdgeInsetsDirectional.only( + top: PlatformInfos.isWeb ? 0 : 56, + ); } diff --git a/lib/pages/image_viewer/image_viewer_view.dart b/lib/pages/image_viewer/image_viewer_view.dart index 63e267e08d..31f1d19771 100644 --- a/lib/pages/image_viewer/image_viewer_view.dart +++ b/lib/pages/image_viewer/image_viewer_view.dart @@ -70,8 +70,9 @@ class ImageViewerView extends StatelessWidget { Widget _buildAppBarPreview() { return Container( + padding: ImageViewerStyle.paddingTopAppBar, + height: ImageViewerStyle.appBarHeight, color: LinagoraSysColors.material().onTertiaryContainer.withOpacity(0.5), - padding: const EdgeInsets.only(top: 56), child: ValueListenableBuilder( valueListenable: controller.showAppbarPreview, builder: (context, showAppbar, _) { diff --git a/lib/presentation/mixins/play_video_action_mixin.dart b/lib/presentation/mixins/play_video_action_mixin.dart index 0069689006..4cf415de79 100644 --- a/lib/presentation/mixins/play_video_action_mixin.dart +++ b/lib/presentation/mixins/play_video_action_mixin.dart @@ -11,31 +11,16 @@ mixin PlayVideoActionMixin { String uriOrFilePath, { String? eventId, }) async { - if (!PlatformInfos.isWeb) { - Navigator.of(context).push( - HeroPageRoute( - builder: (context) { - return InteractiveViewerGallery( - itemBuilder: VideoViewerMobileTheme( - path: uriOrFilePath, - eventId: eventId, - ), - ); - }, - ), - ); - } else { - await showDialog( - context: context, - useRootNavigator: PlatformInfos.isWeb, - useSafeArea: false, + Navigator.of(context, rootNavigator: PlatformInfos.isWeb).push( + HeroPageRoute( builder: (context) { - if (PlatformInfos.isWeb || PlatformInfos.isDesktop) { - return VideoViewerDesktopTheme(path: uriOrFilePath); - } - return VideoViewerMobileTheme(path: uriOrFilePath, eventId: eventId); + return InteractiveViewerGallery( + itemBuilder: PlatformInfos.isMobile + ? VideoViewerMobileTheme(path: uriOrFilePath) + : VideoViewerDesktopTheme(path: uriOrFilePath), + ); }, - ); - } + ), + ); } } diff --git a/lib/utils/interactive_viewer_gallery.dart b/lib/utils/interactive_viewer_gallery.dart index 4ef3fc9ff1..8b7290c382 100644 --- a/lib/utils/interactive_viewer_gallery.dart +++ b/lib/utils/interactive_viewer_gallery.dart @@ -1,4 +1,5 @@ import 'package:fluffychat/utils/custom_dismissable.dart'; +import 'package:fluffychat/utils/platform_infos.dart'; import 'package:flutter/material.dart'; /// A callback for the [InteractiveViewerBoundary] that is called when the scale @@ -81,7 +82,7 @@ class _InteractiveViewerGalleryState extends State Widget build(BuildContext context) { return CustomDismissible( onDismissed: () => Navigator.of(context).pop(), - enabled: _enableDismiss, + enabled: _enableDismiss && !PlatformInfos.isWeb, child: widget.itemBuilder, ); } diff --git a/lib/widgets/video_viewer_desktop_theme.dart b/lib/widgets/video_viewer_desktop_theme.dart index 90d510749a..8c22820195 100644 --- a/lib/widgets/video_viewer_desktop_theme.dart +++ b/lib/widgets/video_viewer_desktop_theme.dart @@ -31,7 +31,12 @@ class VideoViewerDesktopTheme extends StatelessWidget { seekBarHeight: VideoViewerStyle.seekBarHeight, seekBarThumbColor: Theme.of(context).colorScheme.primary, ), - fullscreen: const MaterialDesktopVideoControlsThemeData(), + fullscreen: MaterialDesktopVideoControlsThemeData( + seekBarColor: Theme.of(context).colorScheme.onSurfaceVariant, + seekBarPositionColor: Theme.of(context).colorScheme.primary, + seekBarHeight: VideoViewerStyle.seekBarHeight, + seekBarThumbColor: Theme.of(context).colorScheme.primary, + ), child: VideoPlayer( path: path, ),