feat: Move videoplayer into multi image viewer

Also fixes video thumbnails

Signed-off-by: Christian Kußowski <c.kussowski@famedly.com>

lib/pages/chat/events/audio_player.dart

@@ -1,21 +1,22 @@
 import 'dart:async';
 import 'dart:io';
 
-import 'package:async/async.dart';
-import 'package:fluffychat/config/app_config.dart';
-import 'package:fluffychat/config/themes.dart';
-import 'package:fluffychat/utils/error_reporter.dart';
-import 'package:fluffychat/utils/file_description.dart';
-import 'package:fluffychat/utils/localized_exception_extension.dart';
-import 'package:fluffychat/utils/url_launcher.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
+
+import 'package:async/async.dart';
 import 'package:flutter_linkify/flutter_linkify.dart';
 import 'package:just_audio/just_audio.dart';
 import 'package:matrix/matrix.dart';
 import 'package:opus_caf_converter_dart/opus_caf_converter_dart.dart';
 import 'package:path_provider/path_provider.dart';
 
+import 'package:fluffychat/config/app_config.dart';
+import 'package:fluffychat/config/themes.dart';
+import 'package:fluffychat/utils/error_reporter.dart';
+import 'package:fluffychat/utils/file_description.dart';
+import 'package:fluffychat/utils/localized_exception_extension.dart';
+import 'package:fluffychat/utils/url_launcher.dart';
 import '../../../utils/matrix_sdk_extensions/event_extension.dart';
 import '../../../widgets/fluffy_chat_app.dart';
 import '../../../widgets/matrix.dart';

lib/pages/chat/events/message_content.dart

@@ -168,7 +168,12 @@ class MessageContent extends StatelessWidget {
               linkColor: linkColor,
             );
           case MessageTypes.Video:
-            return EventVideoPlayer(event, textColor: textColor);
+            return EventVideoPlayer(
+              event,
+              textColor: textColor,
+              linkColor: linkColor,
+              timeline: timeline,
+            );
           case MessageTypes.File:
             return MessageDownloadContent(
               event,

lib/pages/chat/events/video_player.dart

@@ -1,136 +1,51 @@
-import 'dart:io';
-
-import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
-import 'package:chewie/chewie.dart';
-import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:flutter_linkify/flutter_linkify.dart';
 import 'package:matrix/matrix.dart';
-import 'package:path_provider/path_provider.dart';
-import 'package:universal_html/html.dart' as html;
-import 'package:video_player/video_player.dart';
 
 import 'package:fluffychat/config/app_config.dart';
-import 'package:fluffychat/pages/chat/events/image_bubble.dart';
 import 'package:fluffychat/utils/file_description.dart';
-import 'package:fluffychat/utils/localized_exception_extension.dart';
 import 'package:fluffychat/utils/matrix_sdk_extensions/event_extension.dart';
 import 'package:fluffychat/utils/platform_infos.dart';
 import 'package:fluffychat/utils/url_launcher.dart';
 import 'package:fluffychat/widgets/blur_hash.dart';
-import '../../../utils/error_reporter.dart';
+import 'package:fluffychat/widgets/mxc_image.dart';
+import '../../image_viewer/image_viewer.dart';
 
-class EventVideoPlayer extends StatefulWidget {
+class EventVideoPlayer extends StatelessWidget {
   final Event event;
+  final Timeline? timeline;
   final Color? textColor;
   final Color? linkColor;
 
   const EventVideoPlayer(
     this.event, {
+    this.timeline,
     this.textColor,
     this.linkColor,
     super.key,
   });
 
-  @override
-  EventVideoPlayerState createState() => EventVideoPlayerState();
-}
-
-class EventVideoPlayerState extends State<EventVideoPlayer> {
-  ChewieController? _chewieController;
-  VideoPlayerController? _videoPlayerController;
-  bool _isDownloading = false;
-
-  // The video_player package only doesn't support Windows and Linux.
-  final _supportsVideoPlayer =
-      !PlatformInfos.isWindows && !PlatformInfos.isLinux;
-
-  void _downloadAction() async {
-    if (!_supportsVideoPlayer) {
-      widget.event.saveFile(context);
-      return;
-    }
-
-    setState(() => _isDownloading = true);
-
-    try {
-      final videoFile = await widget.event.downloadAndDecryptAttachment();
-
-      // Dispose the controllers if we already have them.
-      _disposeControllers();
-      late VideoPlayerController videoPlayerController;
-
-      // Create the VideoPlayerController from the contents of videoFile.
-      if (kIsWeb) {
-        final blob = html.Blob([videoFile.bytes]);
-        final networkUri = Uri.parse(html.Url.createObjectUrlFromBlob(blob));
-        videoPlayerController = VideoPlayerController.networkUrl(networkUri);
-      } else {
-        final tempDir = await getTemporaryDirectory();
-        final fileName = Uri.encodeComponent(
-          widget.event.attachmentOrThumbnailMxcUrl()!.pathSegments.last,
-        );
-        final file = File('${tempDir.path}/${fileName}_${videoFile.name}');
-        if (await file.exists() == false) {
-          await file.writeAsBytes(videoFile.bytes);
-        }
-        videoPlayerController = VideoPlayerController.file(file);
-      }
-      _videoPlayerController = videoPlayerController;
-
-      await videoPlayerController.initialize();
-
-      // Create a ChewieController on top.
-      _chewieController = ChewieController(
-        videoPlayerController: videoPlayerController,
-        useRootNavigator: !kIsWeb,
-        autoPlay: true,
-        autoInitialize: true,
-      );
-    } on IOException catch (e) {
-      ScaffoldMessenger.of(context).showSnackBar(
-        SnackBar(
-          content: Text(e.toLocalizedString(context)),
-        ),
-      );
-    } catch (e, s) {
-      ErrorReporter(context, 'Unable to play video').onErrorCallback(e, s);
-    } finally {
-      setState(() => _isDownloading = false);
-    }
-  }
-
-  void _disposeControllers() {
-    _chewieController?.dispose();
-    _videoPlayerController?.dispose();
-    _chewieController = null;
-    _videoPlayerController = null;
-  }
-
-  @override
-  void dispose() {
-    _disposeControllers();
-    super.dispose();
-  }
-
   static const String fallbackBlurHash = 'L5H2EC=PM+yV0g-mq.wG9c010J}I';
 
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
+    final supportsVideoPlayer = PlatformInfos.supportsVideoPlayer;
 
-    final hasThumbnail = widget.event.hasThumbnail;
+    final blurHash = (event.infoMap as Map<String, dynamic>)
-    final blurHash = (widget.event.infoMap as Map<String, dynamic>)
             .tryGet<String>('xyz.amorgan.blurhash') ??
         fallbackBlurHash;
-    final fileDescription = widget.event.fileDescription;
+    final fileDescription = event.fileDescription;
-    final textColor = widget.textColor;
+    final infoMap = event.content.tryGetMap<String, Object?>('info');
-    final linkColor = widget.linkColor;
+    final videoWidth = infoMap?.tryGet<int>('w') ?? 400;
+    final videoHeight = infoMap?.tryGet<int>('h') ?? 300;
+    const height = 300.0;
+    final width = videoWidth * (height / videoHeight);
 
-    const width = 300.0;
+    final durationInt = infoMap?.tryGet<int>('duration');
+    final duration =
+        durationInt == null ? null : Duration(milliseconds: durationInt);
 
-    final chewieController = _chewieController;
     return Column(
       mainAxisSize: MainAxisSize.min,
       spacing: 8,
@@ -138,52 +53,66 @@ class EventVideoPlayerState extends State<EventVideoPlayer> {
         Material(
           color: Colors.black,
           borderRadius: BorderRadius.circular(AppConfig.borderRadius),
-          child: SizedBox(
+          child: InkWell(
-            height: width,
+            onTap: () => supportsVideoPlayer
-            child: chewieController != null
+                ? showDialog(
-                ? Center(child: Chewie(controller: chewieController))
+                    context: context,
-                : Stack(
+                    builder: (_) => ImageViewer(
-                    children: [
+                      event,
-                      if (hasThumbnail)
+                      timeline: timeline,
-                        Center(
+                      outerContext: context,
-                          child: ImageBubble(
+                    ),
-                            widget.event,
+                  )
-                            tapToView: false,
+                : event.saveFile(context),
-                            textColor: widget.textColor,
+            borderRadius: BorderRadius.circular(AppConfig.borderRadius),
-                          ),
+            child: SizedBox(
-                        )
+              width: width,
-                      else
+              height: height,
-                        BlurHash(
+              child: Stack(
-                          blurhash: blurHash,
+                children: [
-                          width: width,
+                  if (event.hasThumbnail)
-                          height: width,
+                    MxcImage(
-                        ),
+                      event: event,
-                      Center(
+                      isThumbnail: true,
-                        child: IconButton(
+                      width: width,
-                          style: IconButton.styleFrom(
+                      height: height,
-                            backgroundColor: theme.colorScheme.surface,
+                      fit: BoxFit.cover,
-                          ),
+                      placeholder: (context) => BlurHash(
-                          icon: _isDownloading
+                        blurhash: blurHash,
-                              ? const SizedBox(
+                        width: width,
-                                  width: 24,
+                        height: height,
-                                  height: 24,
+                        fit: BoxFit.cover,
-                                  child: CircularProgressIndicator.adaptive(
+                      ),
-                                    strokeWidth: 2,
+                    )
-                                  ),
+                  else
-                                )
+                    BlurHash(
-                              : _supportsVideoPlayer
+                      blurhash: blurHash,
-                                  ? const Icon(Icons.play_circle_outlined)
+                      width: width,
-                                  : const Icon(Icons.file_download_outlined),
+                      height: height,
-                          tooltip: _isDownloading
+                      fit: BoxFit.cover,
-                              ? L10n.of(context).loadingPleaseWait
+                    ),
-                              : L10n.of(context).videoWithSize(
+                  Center(
-                                  widget.event.sizeString ?? '?MB',
+                    child: CircleAvatar(
-                                ),
+                      child: supportsVideoPlayer
-                          onPressed: _isDownloading ? null : _downloadAction,
+                          ? const Icon(Icons.play_arrow_outlined)
+                          : const Icon(Icons.file_download_outlined),
+                    ),
+                  ),
+                  if (duration != null)
+                    Positioned(
+                      bottom: 8,
+                      left: 16,
+                      child: Text(
+                        '${duration.inMinutes.toString().padLeft(2, '0')}:${(duration.inSeconds % 60).toString().padLeft(2, '0')}',
+                        style: TextStyle(
+                          color: Colors.white,
+                          backgroundColor: Colors.black.withAlpha(32),
                         ),
                       ),
-                    ],
+                    ),
-                  ),
+                ],
+              ),
+            ),
           ),
         ),
         if (fileDescription != null && textColor != null && linkColor != null)

lib/pages/image_viewer/image_viewer.dart

@@ -33,7 +33,13 @@ class ImageViewerController extends State<ImageViewer> {
   void initState() {
     super.initState();
     allEvents = widget.timeline?.events
-            .where((event) => event.messageType == MessageTypes.Image)
+            .where(
+              (event) => {
+                MessageTypes.Image,
+                MessageTypes.Sticker,
+                if (PlatformInfos.supportsVideoPlayer) MessageTypes.Video,
+              }.contains(event.messageType),
+            )
             .toList()
             .reversed
             .toList() ??

lib/pages/image_viewer/image_viewer_view.dart

@@ -1,7 +1,9 @@
 import 'package:flutter/material.dart';
 
 import 'package:flutter_gen/gen_l10n/l10n.dart';
+import 'package:matrix/matrix.dart';
 
+import 'package:fluffychat/pages/image_viewer/video_player.dart';
 import 'package:fluffychat/utils/platform_infos.dart';
 import 'package:fluffychat/widgets/hover_builder.dart';
 import 'package:fluffychat/widgets/mxc_image.dart';
@@ -75,27 +77,46 @@ class ImageViewerView extends StatelessWidget {
                 child: PageView.builder(
                   controller: controller.pageController,
                   itemCount: controller.allEvents.length,
-                  itemBuilder: (context, i) => InteractiveViewer(
+                  itemBuilder: (context, i) {
-                    minScale: 1.0,
+                    final event = controller.allEvents[i];
-                    maxScale: 10.0,
+                    switch (event.messageType) {
-                    onInteractionEnd: controller.onInteractionEnds,
+                      case MessageTypes.Video:
-                    child: Center(
+                        return Padding(
-                      child: Hero(
+                          padding: const EdgeInsets.only(top: 52.0),
-                        tag: controller.allEvents[i].eventId,
+                          child: Center(
-                        child: GestureDetector(
+                            child: GestureDetector(
-                          // Ignore taps to not go back here:
+                              // Ignore taps to not go back here:
-                          onTap: () {},
+                              onTap: () {},
-                          child: MxcImage(
+                              child: EventVideoPlayer(event),
-                            key: ValueKey(controller.allEvents[i].eventId),
+                            ),
-                            event: controller.allEvents[i],
-                            fit: BoxFit.contain,
-                            isThumbnail: false,
-                            animated: true,
                           ),
-                        ),
+                        );
-                      ),
+                      case MessageTypes.Image:
-                    ),
+                      case MessageTypes.Sticker:
-                  ),
+                      default:
+                        return InteractiveViewer(
+                          minScale: 1.0,
+                          maxScale: 10.0,
+                          onInteractionEnd: controller.onInteractionEnds,
+                          child: Center(
+                            child: Hero(
+                              tag: event.eventId,
+                              child: GestureDetector(
+                                // Ignore taps to not go back here:
+                                onTap: () {},
+                                child: MxcImage(
+                                  key: ValueKey(event.eventId),
+                                  event: event,
+                                  fit: BoxFit.contain,
+                                  isThumbnail: false,
+                                  animated: true,
+                                ),
+                              ),
+                            ),
+                          ),
+                        );
+                    }
+                  },
                 ),
               ),
               if (hovered && controller.canGoBack)

lib/pages/image_viewer/video_player.dart

@@ -0,0 +1,152 @@
+import 'dart:io';
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'package:chewie/chewie.dart';
+import 'package:matrix/matrix.dart';
+import 'package:path_provider/path_provider.dart';
+import 'package:universal_html/html.dart' as html;
+import 'package:video_player/video_player.dart';
+
+import 'package:fluffychat/utils/localized_exception_extension.dart';
+import 'package:fluffychat/utils/matrix_sdk_extensions/event_extension.dart';
+import 'package:fluffychat/utils/platform_infos.dart';
+import 'package:fluffychat/widgets/blur_hash.dart';
+import '../../../utils/error_reporter.dart';
+import '../../widgets/mxc_image.dart';
+
+class EventVideoPlayer extends StatefulWidget {
+  final Event event;
+
+  const EventVideoPlayer(
+    this.event, {
+    super.key,
+  });
+
+  @override
+  EventVideoPlayerState createState() => EventVideoPlayerState();
+}
+
+class EventVideoPlayerState extends State<EventVideoPlayer> {
+  ChewieController? _chewieController;
+  VideoPlayerController? _videoPlayerController;
+
+  // The video_player package only doesn't support Windows and Linux.
+  final _supportsVideoPlayer =
+      !PlatformInfos.isWindows && !PlatformInfos.isLinux;
+
+  void _downloadAction() async {
+    if (!_supportsVideoPlayer) {
+      widget.event.saveFile(context);
+      return;
+    }
+
+    try {
+      final videoFile = await widget.event.downloadAndDecryptAttachment();
+
+      // Dispose the controllers if we already have them.
+      _disposeControllers();
+      late VideoPlayerController videoPlayerController;
+
+      // Create the VideoPlayerController from the contents of videoFile.
+      if (kIsWeb) {
+        final blob = html.Blob([videoFile.bytes]);
+        final networkUri = Uri.parse(html.Url.createObjectUrlFromBlob(blob));
+        videoPlayerController = VideoPlayerController.networkUrl(networkUri);
+      } else {
+        final tempDir = await getTemporaryDirectory();
+        final fileName = Uri.encodeComponent(
+          widget.event.attachmentOrThumbnailMxcUrl()!.pathSegments.last,
+        );
+        final file = File('${tempDir.path}/${fileName}_${videoFile.name}');
+        if (await file.exists() == false) {
+          await file.writeAsBytes(videoFile.bytes);
+        }
+        videoPlayerController = VideoPlayerController.file(file);
+      }
+      _videoPlayerController = videoPlayerController;
+
+      await videoPlayerController.initialize();
+
+      // Create a ChewieController on top.
+      _chewieController = ChewieController(
+        videoPlayerController: videoPlayerController,
+        useRootNavigator: !kIsWeb,
+        autoPlay: true,
+        autoInitialize: true,
+        looping: true,
+      );
+    } on IOException catch (e) {
+      ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(
+          content: Text(e.toLocalizedString(context)),
+        ),
+      );
+    } catch (e, s) {
+      ErrorReporter(context, 'Unable to play video').onErrorCallback(e, s);
+    }
+  }
+
+  void _disposeControllers() {
+    _chewieController?.dispose();
+    _videoPlayerController?.dispose();
+    _chewieController = null;
+    _videoPlayerController = null;
+  }
+
+  @override
+  void dispose() {
+    _disposeControllers();
+    super.dispose();
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      _downloadAction();
+    });
+  }
+
+  static const String fallbackBlurHash = 'L5H2EC=PM+yV0g-mq.wG9c010J}I';
+
+  @override
+  Widget build(BuildContext context) {
+    final hasThumbnail = widget.event.hasThumbnail;
+    final blurHash = (widget.event.infoMap as Map<String, dynamic>)
+            .tryGet<String>('xyz.amorgan.blurhash') ??
+        fallbackBlurHash;
+
+    const width = 300.0;
+
+    final chewieController = _chewieController;
+    return chewieController != null
+        ? Center(child: Chewie(controller: chewieController))
+        : Stack(
+            children: [
+              Center(
+                child: hasThumbnail
+                    ? MxcImage(
+                        event: widget.event,
+                        isThumbnail: true,
+                        width: width,
+                        fit: BoxFit.cover,
+                        placeholder: (context) => BlurHash(
+                          blurhash: blurHash,
+                          width: width,
+                          height: width,
+                          fit: BoxFit.cover,
+                        ),
+                      )
+                    : BlurHash(
+                        blurhash: blurHash,
+                        width: width,
+                        height: width,
+                      ),
+              ),
+              const Center(child: CircularProgressIndicator.adaptive()),
+            ],
+          );
+  }
+}

lib/utils/platform_infos.dart

@@ -29,6 +29,9 @@ abstract class PlatformInfos {
 
   static bool get usesTouchscreen => !isMobile;
 
+  static bool get supportsVideoPlayer =>
+      !PlatformInfos.isWindows && !PlatformInfos.isLinux;
+
   /// Web could also record in theory but currently only wav which is too large
   static bool get platformCanRecord => (isMobile || isMacOS);
 

lib/widgets/mxc_image.dart

@@ -96,7 +96,7 @@ class _MxcImageState extends State<MxcImage> {
       final data = await event.downloadAndDecryptAttachment(
         getThumbnail: widget.isThumbnail,
       );
-      if (data.detectFileType is MatrixImageFile) {
+      if (data.detectFileType is MatrixImageFile || widget.isThumbnail) {
         if (!mounted) return;
         setState(() {
           _imageData = data.bytes;