Merge pull request #1709 from GetStream/fix/hidden-video-controls

This commit is contained in:
Sahil Kumar
2023-08-16 17:11:45 +05:30
committed by GitHub
3 changed files with 157 additions and 150 deletions
@@ -4,6 +4,8 @@
- [[#1702]](https://github.com/GetStream/stream-chat-flutter/issues/1702) - [[#1702]](https://github.com/GetStream/stream-chat-flutter/issues/1702)
Fixed `Message.replaceMentions` not treating `@usernames` as mentions. Fixed `Message.replaceMentions` not treating `@usernames` as mentions.
- [[#1694]](https://github.com/GetStream/stream-chat-flutter/issues/1694) Fixed Video player buttons
getting covered by bottom toolbar.
✅ Added ✅ Added
@@ -3,13 +3,11 @@ import 'dart:io';
import 'package:cached_network_image/cached_network_image.dart'; import 'package:cached_network_image/cached_network_image.dart';
import 'package:chewie/chewie.dart'; import 'package:chewie/chewie.dart';
import 'package:contextmenu/contextmenu.dart';
import 'package:flutter/foundation.dart'; import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart'; import 'package:photo_view/photo_view.dart';
import 'package:shimmer/shimmer.dart'; import 'package:shimmer/shimmer.dart';
import 'package:stream_chat_flutter/platform_widget_builder/platform_widget_builder.dart'; import 'package:stream_chat_flutter/platform_widget_builder/platform_widget_builder.dart';
import 'package:stream_chat_flutter/src/context_menu_items/download_menu_item.dart';
import 'package:stream_chat_flutter/src/fullscreen_media/full_screen_media_widget.dart'; import 'package:stream_chat_flutter/src/fullscreen_media/full_screen_media_widget.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart'; import 'package:stream_chat_flutter/stream_chat_flutter.dart';
import 'package:video_player/video_player.dart'; import 'package:video_player/video_player.dart';
@@ -281,84 +279,83 @@ class _FullScreenMediaState extends State<StreamFullScreenMedia> {
final currentAttachmentPackage = final currentAttachmentPackage =
widget.mediaAttachmentPackages[index]; widget.mediaAttachmentPackages[index];
final attachment = currentAttachmentPackage.attachment; final attachment = currentAttachmentPackage.attachment;
if (attachment.type == 'image' || attachment.type == 'giphy') { return ValueListenableBuilder(
final imageUrl = attachment.imageUrl ?? valueListenable: _isDisplayingDetail,
attachment.assetUrl ?? builder: (context, isDisplayingDetail, child) {
attachment.thumbUrl; return AnimatedContainer(
return ValueListenableBuilder<bool>( duration: kThemeChangeDuration,
valueListenable: _isDisplayingDetail,
builder: (context, isDisplayingDetail, _) =>
AnimatedContainer(
color: isDisplayingDetail color: isDisplayingDetail
? StreamChannelHeaderTheme.of(context).color ? StreamChannelHeaderTheme.of(context).color
: Colors.black, : Colors.black,
duration: kThemeAnimationDuration, child: Builder(
child: ContextMenuArea( builder: (context) {
verticalPadding: 0, if (attachment.type == 'image' ||
builder: (_) => [ attachment.type == 'giphy') {
DownloadMenuItem( final imageUrl = attachment.imageUrl ??
attachment: attachment, attachment.assetUrl ??
), attachment.thumbUrl;
],
child: PhotoView( return PhotoView(
imageProvider: (imageUrl == null && imageProvider: (imageUrl == null &&
attachment.localUri != null && attachment.localUri != null &&
attachment.file?.bytes != null) attachment.file?.bytes != null)
? Image.memory(attachment.file!.bytes!).image ? Image.memory(attachment.file!.bytes!).image
: CachedNetworkImageProvider(imageUrl!), : CachedNetworkImageProvider(imageUrl!),
errorBuilder: (_, __, ___) => const AttachmentError(), errorBuilder: (_, __, ___) =>
loadingBuilder: (context, _) { const AttachmentError(),
final image = Image.asset( loadingBuilder: (context, _) {
'images/placeholder.png', final image = Image.asset(
fit: BoxFit.cover, 'images/placeholder.png',
package: 'stream_chat_flutter', fit: BoxFit.cover,
package: 'stream_chat_flutter',
);
final colorTheme =
StreamChatTheme.of(context).colorTheme;
return Shimmer.fromColors(
baseColor: colorTheme.disabled,
highlightColor: colorTheme.inputBg,
child: image,
);
},
maxScale: PhotoViewComputedScale.covered,
minScale: PhotoViewComputedScale.contained,
heroAttributes: PhotoViewHeroAttributes(
tag: widget.mediaAttachmentPackages,
),
backgroundDecoration: const BoxDecoration(
color: Colors.transparent,
),
); );
final colorTheme = } else if (attachment.type == 'video') {
StreamChatTheme.of(context).colorTheme; final controller = videoPackages[attachment.id]!;
return Shimmer.fromColors( if (!controller.initialized) {
baseColor: colorTheme.disabled, return const Center(
highlightColor: colorTheme.inputBg, child: CircularProgressIndicator.adaptive(),
child: image, );
}
final mediaQuery = MediaQuery.of(context);
final bottomPadding = mediaQuery.padding.bottom;
return AnimatedPadding(
duration: kThemeChangeDuration,
padding: EdgeInsets.symmetric(
vertical: isDisplayingDetail
? kToolbarHeight + bottomPadding
: 0,
),
child: Chewie(
controller: controller.chewieController!,
),
); );
}, }
maxScale: PhotoViewComputedScale.covered,
minScale: PhotoViewComputedScale.contained, return const SizedBox();
heroAttributes: PhotoViewHeroAttributes( },
tag: widget.mediaAttachmentPackages,
),
backgroundDecoration: const BoxDecoration(
color: Colors.transparent,
),
),
), ),
),
);
} else if (attachment.type == 'video') {
final controller = videoPackages[attachment.id]!;
if (!controller.initialized) {
return const Center(
child: CircularProgressIndicator.adaptive(),
); );
} },
return InkWell( );
onTap: switchDisplayingDetail,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 50),
child: ContextMenuArea(
verticalPadding: 0,
builder: (_) => [
DownloadMenuItem(
attachment: attachment,
),
],
child: Chewie(
controller: controller.chewieController!,
),
),
),
);
}
return const SizedBox();
}, },
), ),
), ),
@@ -475,6 +472,7 @@ class VideoPackage {
videoPlayerController: _videoPlayerController, videoPlayerController: _videoPlayerController,
autoInitialize: _autoInitialize, autoInitialize: _autoInitialize,
showControls: _showControls, showControls: _showControls,
showOptions: false,
aspectRatio: _videoPlayerController.value.aspectRatio, aspectRatio: _videoPlayerController.value.aspectRatio,
); );
}); });
@@ -307,88 +307,95 @@ class _FullScreenMediaDesktopState extends State<FullScreenMediaDesktop> {
final currentAttachmentPackage = final currentAttachmentPackage =
widget.mediaAttachmentPackages[index]; widget.mediaAttachmentPackages[index];
final attachment = currentAttachmentPackage.attachment; final attachment = currentAttachmentPackage.attachment;
if (attachment.type == 'image' || attachment.type == 'giphy') {
final imageUrl = attachment.imageUrl ?? return ValueListenableBuilder(
attachment.assetUrl ?? valueListenable: _isDisplayingDetail,
attachment.thumbUrl; builder: (context, isDisplayingDetail, child) {
return ValueListenableBuilder<bool>( return AnimatedContainer(
valueListenable: _isDisplayingDetail, duration: kThemeChangeDuration,
builder: (context, isDisplayingDetail, _) =>
AnimatedContainer(
color: isDisplayingDetail color: isDisplayingDetail
? StreamChannelHeaderTheme.of(context).color ? StreamChannelHeaderTheme.of(context).color
: Colors.black, : Colors.black,
duration: kThemeAnimationDuration, child: Builder(
child: ContextMenuArea( builder: (context) {
verticalPadding: 0, if (attachment.type == 'image' ||
builder: (_) => [ attachment.type == 'giphy') {
DownloadMenuItem( final imageUrl = attachment.imageUrl ??
attachment: attachment, attachment.assetUrl ??
), attachment.thumbUrl;
],
child: PhotoView(
imageProvider: (imageUrl == null &&
attachment.localUri != null &&
attachment.file?.bytes != null)
? Image.memory(attachment.file!.bytes!).image
: CachedNetworkImageProvider(imageUrl!),
errorBuilder: (_, __, ___) => const AttachmentError(),
loadingBuilder: (context, _) {
final image = Image.asset(
'images/placeholder.png',
fit: BoxFit.cover,
package: 'stream_chat_flutter',
);
final colorTheme =
StreamChatTheme.of(context).colorTheme;
return Shimmer.fromColors(
baseColor: colorTheme.disabled,
highlightColor: colorTheme.inputBg,
child: image,
);
},
maxScale: PhotoViewComputedScale.covered,
minScale: PhotoViewComputedScale.contained,
heroAttributes: PhotoViewHeroAttributes(
tag: widget.mediaAttachmentPackages,
),
backgroundDecoration: const BoxDecoration(
color: Colors.transparent,
),
),
),
),
);
} else if (attachment.type == 'video') {
final package = videoPackages[attachment.id]!;
package.player.open(
Playlist(
medias: [
Media.network(package.attachment.assetUrl),
],
),
autoStart: widget.autoplayVideos,
);
return InkWell( return PhotoView(
onTap: switchDisplayingDetail, imageProvider: (imageUrl == null &&
child: Padding( attachment.localUri != null &&
padding: const EdgeInsets.symmetric(vertical: 50), attachment.file?.bytes != null)
child: ContextMenuArea( ? Image.memory(attachment.file!.bytes!).image
verticalPadding: 0, : CachedNetworkImageProvider(imageUrl!),
builder: (_) => [ errorBuilder: (_, __, ___) =>
DownloadMenuItem( const AttachmentError(),
attachment: attachment, loadingBuilder: (context, _) {
), final image = Image.asset(
], 'images/placeholder.png',
child: Video( fit: BoxFit.cover,
player: package.player, package: 'stream_chat_flutter',
), );
final colorTheme =
StreamChatTheme.of(context).colorTheme;
return Shimmer.fromColors(
baseColor: colorTheme.disabled,
highlightColor: colorTheme.inputBg,
child: image,
);
},
maxScale: PhotoViewComputedScale.covered,
minScale: PhotoViewComputedScale.contained,
heroAttributes: PhotoViewHeroAttributes(
tag: widget.mediaAttachmentPackages,
),
backgroundDecoration: const BoxDecoration(
color: Colors.transparent,
),
);
} else if (attachment.type == 'video') {
final package = videoPackages[attachment.id]!;
package.player.open(
Playlist(
medias: [
Media.network(package.attachment.assetUrl),
],
),
autoStart: widget.autoplayVideos,
);
final mediaQuery = MediaQuery.of(context);
final bottomPadding = mediaQuery.padding.bottom;
return AnimatedPadding(
duration: kThemeChangeDuration,
padding: EdgeInsets.symmetric(
vertical: isDisplayingDetail
? kToolbarHeight + bottomPadding
: 0,
),
child: ContextMenuArea(
verticalPadding: 0,
builder: (_) => [
DownloadMenuItem(
attachment: attachment,
),
],
child: Video(
player: package.player,
),
),
);
}
return const SizedBox();
},
), ),
), );
); },
} );
return const SizedBox();
}, },
), ),
), ),