diff --git a/lib/pages/chat/events/video_player.dart b/lib/pages/chat/events/video_player.dart index b71b8b29d..856bda50c 100644 --- a/lib/pages/chat/events/video_player.dart +++ b/lib/pages/chat/events/video_player.dart @@ -68,49 +68,52 @@ class EventVideoPlayer extends StatelessWidget { child: SizedBox( width: width, height: height, - child: Stack( - children: [ - if (event.hasThumbnail) - MxcImage( - event: event, - isThumbnail: true, - width: width, - height: height, - fit: BoxFit.cover, - placeholder: (context) => BlurHash( + child: Hero( + tag: event.eventId, + child: Stack( + children: [ + if (event.hasThumbnail) + MxcImage( + event: event, + isThumbnail: true, + width: width, + height: height, + fit: BoxFit.cover, + placeholder: (context) => BlurHash( + blurhash: blurHash, + width: width, + height: height, + fit: BoxFit.cover, + ), + ) + else + BlurHash( blurhash: blurHash, width: width, height: height, fit: BoxFit.cover, ), - ) - else - BlurHash( - blurhash: blurHash, - width: width, - height: height, - fit: BoxFit.cover, - ), - Center( - child: CircleAvatar( - child: supportsVideoPlayer - ? const Icon(Icons.play_arrow_outlined) - : const Icon(Icons.file_download_outlined), + Center( + child: CircleAvatar( + child: supportsVideoPlayer + ? 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 (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), + ), ), ), - ), - ], + ], + ), ), ), ), diff --git a/lib/pages/image_viewer/video_player.dart b/lib/pages/image_viewer/video_player.dart index f355433ae..0962306e5 100644 --- a/lib/pages/image_viewer/video_player.dart +++ b/lib/pages/image_viewer/video_player.dart @@ -70,13 +70,15 @@ class EventVideoPlayerState extends State { await videoPlayerController.initialize(); // Create a ChewieController on top. - _chewieController = ChewieController( - videoPlayerController: videoPlayerController, - useRootNavigator: !kIsWeb, - autoPlay: true, - autoInitialize: true, - looping: true, - ); + setState(() { + _chewieController = ChewieController( + videoPlayerController: videoPlayerController, + useRootNavigator: !kIsWeb, + autoPlay: true, + autoInitialize: true, + looping: true, + ); + }); } on IOException catch (e) { ScaffoldMessenger.of(context).showSnackBar( SnackBar( @@ -117,33 +119,46 @@ class EventVideoPlayerState extends State { final blurHash = (widget.event.infoMap as Map) .tryGet('xyz.amorgan.blurhash') ?? fallbackBlurHash; - - const width = 300.0; + final infoMap = widget.event.content.tryGetMap('info'); + final videoWidth = infoMap?.tryGet('w') ?? 400; + final videoHeight = infoMap?.tryGet('h') ?? 300; + final height = MediaQuery.of(context).size.height - 52; + final width = videoWidth * (height / videoHeight); final chewieController = _chewieController; return chewieController != null - ? Center(child: Chewie(controller: chewieController)) + ? Center( + child: SizedBox( + width: width, + height: height, + 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, + child: Hero( + tag: widget.event.eventId, + child: hasThumbnail + ? MxcImage( + event: widget.event, + isThumbnail: true, width: width, - height: width, + height: height, fit: BoxFit.cover, + placeholder: (context) => BlurHash( + blurhash: blurHash, + width: width, + height: height, + fit: BoxFit.cover, + ), + ) + : BlurHash( + blurhash: blurHash, + width: width, + height: height, ), - ) - : BlurHash( - blurhash: blurHash, - width: width, - height: width, - ), + ), ), const Center(child: CircularProgressIndicator.adaptive()), ],