feat: Better in app video player
This commit is contained in:
Christian Pauly
parent
7e5259bb4b
commit
8a371d53b9
8 changed files with 145 additions and 199 deletions
|
|
@ -4,8 +4,6 @@ import 'package:matrix/matrix.dart';
|
|||
|
||||
import 'package:fluffychat/config/themes.dart';
|
||||
import 'package:fluffychat/utils/date_time_extension.dart';
|
||||
import 'package:fluffychat/utils/matrix_sdk_extensions.dart/event_extension.dart';
|
||||
import 'package:fluffychat/utils/platform_infos.dart';
|
||||
import 'package:fluffychat/utils/string_color.dart';
|
||||
import 'package:fluffychat/widgets/avatar.dart';
|
||||
import 'package:fluffychat/widgets/matrix.dart';
|
||||
|
|
@ -92,13 +90,10 @@ class Message extends StatelessWidget {
|
|||
bottomRight: const Radius.circular(AppConfig.borderRadius),
|
||||
);
|
||||
final noBubble = {
|
||||
MessageTypes.Video,
|
||||
MessageTypes.Image,
|
||||
MessageTypes.Sticker,
|
||||
}.contains(event.messageType) &&
|
||||
!(event.messageType == MessageTypes.Video &&
|
||||
!((PlatformInfos.isMobile && event.showThumbnail) ||
|
||||
PlatformInfos.isWeb));
|
||||
MessageTypes.Video,
|
||||
MessageTypes.Image,
|
||||
MessageTypes.Sticker,
|
||||
}.contains(event.messageType);
|
||||
|
||||
if (ownMessage) {
|
||||
color = displayEvent.status.isError
|
||||
|
|
|
|||
|
|
@ -6,11 +6,10 @@ import 'package:matrix/matrix.dart';
|
|||
import 'package:matrix_link_text/link_text.dart';
|
||||
import 'package:url_launcher/url_launcher.dart';
|
||||
|
||||
import 'package:fluffychat/utils/matrix_sdk_extensions.dart/event_extension.dart';
|
||||
import 'package:fluffychat/pages/chat/events/video_player.dart';
|
||||
import 'package:fluffychat/utils/matrix_sdk_extensions.dart/matrix_locals.dart';
|
||||
import 'package:fluffychat/widgets/matrix.dart';
|
||||
import '../../../config/app_config.dart';
|
||||
import '../../../pages/video_viewer/video_viewer.dart';
|
||||
import '../../../utils/platform_infos.dart';
|
||||
import '../../../utils/url_launcher.dart';
|
||||
import '../../bootstrap/bootstrap_dialog.dart';
|
||||
|
|
@ -90,38 +89,7 @@ class MessageContent extends StatelessWidget {
|
|||
return MessageDownloadContent(event, textColor);
|
||||
case MessageTypes.Video:
|
||||
if (PlatformInfos.isMobile || PlatformInfos.isWeb) {
|
||||
if (event.showThumbnail) {
|
||||
return Stack(
|
||||
alignment: Alignment.center,
|
||||
children: <Widget>[
|
||||
ImageBubble(
|
||||
event,
|
||||
width: 400,
|
||||
height: 300,
|
||||
fit: BoxFit.cover,
|
||||
tapToView: false,
|
||||
),
|
||||
FloatingActionButton.extended(
|
||||
onPressed: () => showDialog(
|
||||
context: Matrix.of(context).navigatorContext,
|
||||
useRootNavigator: false,
|
||||
builder: (_) => VideoViewer(event),
|
||||
),
|
||||
label: Text(L10n.of(context).play('Video')),
|
||||
icon: const Icon(Icons.video_camera_front_outlined),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
return FloatingActionButton.extended(
|
||||
onPressed: () => showDialog(
|
||||
context: Matrix.of(context).navigatorContext,
|
||||
useRootNavigator: false,
|
||||
builder: (_) => VideoViewer(event),
|
||||
),
|
||||
label: Text(L10n.of(context).play('Video')),
|
||||
icon: const Icon(Icons.video_camera_front_outlined),
|
||||
);
|
||||
return EventVideoPlayer(event);
|
||||
}
|
||||
return MessageDownloadContent(event, textColor);
|
||||
case MessageTypes.File:
|
||||
|
|
|
|||
123
lib/pages/chat/events/video_player.dart
Normal file
123
lib/pages/chat/events/video_player.dart
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
//@dart=2.12
|
||||
|
||||
import 'dart:io';
|
||||
|
||||
import 'package:flutter/foundation.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:flick_video_player/flick_video_player.dart';
|
||||
import 'package:flutter_blurhash/flutter_blurhash.dart';
|
||||
import 'package:flutter_gen/gen_l10n/l10n.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/pages/chat/events/image_bubble.dart';
|
||||
import 'package:fluffychat/utils/localized_exception_extension.dart';
|
||||
import 'package:fluffychat/utils/matrix_sdk_extensions.dart/event_extension.dart';
|
||||
import 'package:fluffychat/utils/sentry_controller.dart';
|
||||
|
||||
class EventVideoPlayer extends StatefulWidget {
|
||||
final Event event;
|
||||
const EventVideoPlayer(this.event, {Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
_EventVideoPlayerState createState() => _EventVideoPlayerState();
|
||||
}
|
||||
|
||||
class _EventVideoPlayerState extends State<EventVideoPlayer> {
|
||||
FlickManager? _flickManager;
|
||||
bool _isDownloading = false;
|
||||
String? _networkUri;
|
||||
File? _tmpFile;
|
||||
|
||||
void _downloadAction() async {
|
||||
setState(() => _isDownloading = true);
|
||||
try {
|
||||
final videoFile = await widget.event.downloadAndDecryptAttachment();
|
||||
if (kIsWeb) {
|
||||
final blob = html.Blob([videoFile.bytes]);
|
||||
_networkUri = html.Url.createObjectUrlFromBlob(blob);
|
||||
} else {
|
||||
final tmpDir = await getTemporaryDirectory();
|
||||
final file = File(tmpDir.path + videoFile.name);
|
||||
if (await file.exists() == false) {
|
||||
await file.writeAsBytes(videoFile.bytes);
|
||||
}
|
||||
_tmpFile = file;
|
||||
}
|
||||
} on MatrixConnectionException catch (e) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
|
||||
content: Text(e.toLocalizedString(context)),
|
||||
));
|
||||
} catch (e, s) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
|
||||
content: Text(e.toLocalizedString(context)),
|
||||
));
|
||||
SentryController.captureException(e, s);
|
||||
} finally {
|
||||
setState(() => _isDownloading = false);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_flickManager?.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
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;
|
||||
final videoFile = _tmpFile;
|
||||
final networkUri = _networkUri;
|
||||
if (kIsWeb && networkUri != null && _flickManager == null) {
|
||||
_flickManager = FlickManager(
|
||||
videoPlayerController: VideoPlayerController.network(networkUri),
|
||||
);
|
||||
} else if (!kIsWeb && videoFile != null && _flickManager == null) {
|
||||
_flickManager = FlickManager(
|
||||
videoPlayerController: VideoPlayerController.file(videoFile),
|
||||
autoPlay: true,
|
||||
);
|
||||
}
|
||||
|
||||
final flickManager = _flickManager;
|
||||
return SizedBox(
|
||||
width: 400,
|
||||
height: 300,
|
||||
child: Stack(
|
||||
children: [
|
||||
if (flickManager == null) ...[
|
||||
if (hasThumbnail)
|
||||
ImageBubble(widget.event)
|
||||
else
|
||||
BlurHash(hash: blurHash),
|
||||
Center(
|
||||
child: OutlinedButton.icon(
|
||||
style: OutlinedButton.styleFrom(
|
||||
backgroundColor: Theme.of(context).colorScheme.surface,
|
||||
),
|
||||
icon: _isDownloading
|
||||
? const CircularProgressIndicator.adaptive(strokeWidth: 2)
|
||||
: const Icon(Icons.download_outlined),
|
||||
label: Text(
|
||||
L10n.of(context)!
|
||||
.videoWithSize(widget.event.sizeString ?? '?MB'),
|
||||
),
|
||||
onPressed: _isDownloading ? null : _downloadAction,
|
||||
),
|
||||
),
|
||||
] else
|
||||
FlickVideoPlayer(flickManager: flickManager),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue