feat: Move videoplayer into multi image viewer
Also fixes video thumbnails Signed-off-by: Christian Kußowski <c.kussowski@famedly.com>
This commit is contained in:
Christian Kußowski
parent
b022741310
commit
55705d761d
8 changed files with 292 additions and 175 deletions
|
|
@ -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() ??
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
minScale: 1.0,
|
||||
maxScale: 10.0,
|
||||
onInteractionEnd: controller.onInteractionEnds,
|
||||
child: Center(
|
||||
child: Hero(
|
||||
tag: controller.allEvents[i].eventId,
|
||||
child: GestureDetector(
|
||||
// Ignore taps to not go back here:
|
||||
onTap: () {},
|
||||
child: MxcImage(
|
||||
key: ValueKey(controller.allEvents[i].eventId),
|
||||
event: controller.allEvents[i],
|
||||
fit: BoxFit.contain,
|
||||
isThumbnail: false,
|
||||
animated: true,
|
||||
itemBuilder: (context, i) {
|
||||
final event = controller.allEvents[i];
|
||||
switch (event.messageType) {
|
||||
case MessageTypes.Video:
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(top: 52.0),
|
||||
child: Center(
|
||||
child: GestureDetector(
|
||||
// Ignore taps to not go back here:
|
||||
onTap: () {},
|
||||
child: EventVideoPlayer(event),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
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)
|
||||
|
|
|
|||
152
lib/pages/image_viewer/video_player.dart
Normal file
152
lib/pages/image_viewer/video_player.dart
Normal file
|
|
@ -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()),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue