feat: Added video thumbnails and playback for attachments

This commit is contained in:
Deven Joshi
2020-12-11 18:18:35 +05:30
parent 102e6ce4d0
commit 18781201e3
+85 -16
View File
@@ -1,3 +1,5 @@
import 'dart:io';
import 'package:cached_network_image/cached_network_image.dart'; import 'package:cached_network_image/cached_network_image.dart';
import 'package:file_picker/file_picker.dart'; import 'package:file_picker/file_picker.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
@@ -5,11 +7,13 @@ import 'package:stream_chat/stream_chat.dart';
import 'package:stream_chat_flutter/src/stream_chat_theme.dart'; import 'package:stream_chat_flutter/src/stream_chat_theme.dart';
import 'package:stream_chat_flutter/src/stream_svg_icon.dart'; import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
import 'package:stream_chat_flutter/src/utils.dart'; import 'package:stream_chat_flutter/src/utils.dart';
import 'package:video_compress/video_compress.dart';
import 'package:video_player/video_player.dart';
import 'media_utils.dart'; import 'media_utils.dart';
enum FileAttachmentType { local, online } enum FileAttachmentType { local, online }
class FileAttachment extends StatelessWidget { class FileAttachment extends StatefulWidget {
final Attachment attachment; final Attachment attachment;
final Size size; final Size size;
final Widget trailing; final Widget trailing;
@@ -25,17 +29,44 @@ class FileAttachment extends StatelessWidget {
this.file, this.file,
}) : super(key: key); }) : super(key: key);
@override
_FileAttachmentState createState() => _FileAttachmentState();
}
class _FileAttachmentState extends State<FileAttachment> {
VideoPlayerController _controller;
Future<void> _initializeVideoPlayerFuture;
@override
void initState() {
super.initState();
if (MediaUtils.getMimeType(widget.attachment.title).type == 'video') {
if (widget.attachmentType == FileAttachmentType.online) {
_controller = VideoPlayerController.network(
widget.attachment.assetUrl,
);
} else {
_controller = VideoPlayerController.file(
File.fromRawPath(widget.file.bytes),
);
}
_initializeVideoPlayerFuture = _controller.initialize();
}
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Material( return Material(
child: Container( child: Container(
width: size?.width ?? 100, width: widget.size?.width ?? 100,
height: 56.0, height: 56.0,
margin: trailing != null ? EdgeInsets.only(top: 4.0) : null, margin: widget.trailing != null ? EdgeInsets.only(top: 4.0) : null,
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: Colors.white,
borderRadius: trailing != null ? BorderRadius.circular(16.0) : null, borderRadius:
border: trailing != null widget.trailing != null ? BorderRadius.circular(16.0) : null,
border: widget.trailing != null
? Border.fromBorderSide(BorderSide(color: Color(0xFFE6E6E6))) ? Border.fromBorderSide(BorderSide(color: Color(0xFFE6E6E6)))
: null, : null,
), ),
@@ -56,7 +87,7 @@ class FileAttachment extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Text( Text(
attachment?.title ?? 'File', widget.attachment?.title ?? 'File',
style: TextStyle( style: TextStyle(
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
fontSize: 14.0, fontSize: 14.0,
@@ -68,7 +99,7 @@ class FileAttachment extends StatelessWidget {
height: 3.0, height: 3.0,
), ),
Text( Text(
'${attachment.extraData['file_size'] ?? 'N/A'} bytes', '${widget.attachment.extraData['file_size'] ?? 'N/A'} bytes',
style: TextStyle( style: TextStyle(
color: Colors.black.withOpacity(0.5), color: Colors.black.withOpacity(0.5),
fontSize: 14.0, fontSize: 14.0,
@@ -79,13 +110,13 @@ class FileAttachment extends StatelessWidget {
), ),
Column( Column(
children: [ children: [
trailing ?? widget.trailing ??
IconButton( IconButton(
icon: StreamSvgIcon.cloud_download( icon: StreamSvgIcon.cloud_download(
color: Colors.black, color: Colors.black,
), ),
onPressed: () { onPressed: () {
launchURL(context, attachment.assetUrl); launchURL(context, widget.attachment.assetUrl);
}, },
), ),
], ],
@@ -128,19 +159,19 @@ class FileAttachment extends StatelessWidget {
} }
Widget _getFileTypeImage() { Widget _getFileTypeImage() {
if ((MediaUtils.getMimeType(attachment.title).type == 'image')) { if ((MediaUtils.getMimeType(widget.attachment.title).type == 'image')) {
switch (attachmentType) { switch (widget.attachmentType) {
case FileAttachmentType.local: case FileAttachmentType.local:
return Image.memory( return Image.memory(
file.bytes, widget.file.bytes,
fit: BoxFit.cover, fit: BoxFit.cover,
); );
break; break;
case FileAttachmentType.online: case FileAttachmentType.online:
return CachedNetworkImage( return CachedNetworkImage(
imageUrl: attachment.imageUrl ?? imageUrl: widget.attachment.imageUrl ??
attachment.assetUrl ?? widget.attachment.assetUrl ??
attachment.thumbUrl, widget.attachment.thumbUrl,
fit: BoxFit.cover, fit: BoxFit.cover,
progressIndicatorBuilder: (context, _, progress) { progressIndicatorBuilder: (context, _, progress) {
return Center( return Center(
@@ -158,7 +189,45 @@ class FileAttachment extends StatelessWidget {
} }
} }
switch (attachment.extraData['mime_type']) { if ((MediaUtils.getMimeType(widget.attachment.title).type == 'video')) {
switch (widget.attachmentType) {
case FileAttachmentType.local:
return FutureBuilder<File>(
future: VideoCompress.getFileThumbnail(widget.file.path),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Image.asset(
'images/placeholder.png',
package: 'stream_chat_flutter',
);
}
return Image.file(
snapshot.data,
fit: BoxFit.cover,
);
},
);
break;
case FileAttachmentType.online:
return FutureBuilder(
future: _initializeVideoPlayerFuture,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(_controller),
);
} else {
return Center(child: CircularProgressIndicator());
}
},
);
break;
}
}
switch (widget.attachment.extraData['mime_type']) {
case '7z': case '7z':
return StreamSvgIcon.filetype_7z(); return StreamSvgIcon.filetype_7z();
break; break;