From 27074ddb5573adcf69a2a713cd45507e01462f35 Mon Sep 17 00:00:00 2001 From: Sahil Kumar Date: Wed, 16 Aug 2023 16:42:48 +0530 Subject: [PATCH 1/3] fix(ui): fix video player controls getting hidden. Signed-off-by: Sahil Kumar --- .../fullscreen_media/full_screen_media.dart | 142 ++++++++-------- .../full_screen_media_desktop.dart | 157 +++++++++--------- 2 files changed, 153 insertions(+), 146 deletions(-) diff --git a/packages/stream_chat_flutter/lib/src/fullscreen_media/full_screen_media.dart b/packages/stream_chat_flutter/lib/src/fullscreen_media/full_screen_media.dart index 2a791954f..f8efc89e0 100644 --- a/packages/stream_chat_flutter/lib/src/fullscreen_media/full_screen_media.dart +++ b/packages/stream_chat_flutter/lib/src/fullscreen_media/full_screen_media.dart @@ -281,84 +281,83 @@ class _FullScreenMediaState extends State { final currentAttachmentPackage = widget.mediaAttachmentPackages[index]; final attachment = currentAttachmentPackage.attachment; - if (attachment.type == 'image' || attachment.type == 'giphy') { - final imageUrl = attachment.imageUrl ?? - attachment.assetUrl ?? - attachment.thumbUrl; - return ValueListenableBuilder( - valueListenable: _isDisplayingDetail, - builder: (context, isDisplayingDetail, _) => - AnimatedContainer( + return ValueListenableBuilder( + valueListenable: _isDisplayingDetail, + builder: (context, isDisplayingDetail, child) { + return AnimatedContainer( + duration: kThemeChangeDuration, color: isDisplayingDetail ? StreamChannelHeaderTheme.of(context).color : Colors.black, - duration: kThemeAnimationDuration, - child: ContextMenuArea( - verticalPadding: 0, - builder: (_) => [ - DownloadMenuItem( - attachment: attachment, - ), - ], - 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', + child: Builder( + builder: (context) { + if (attachment.type == 'image' || + attachment.type == 'giphy') { + final imageUrl = attachment.imageUrl ?? + attachment.assetUrl ?? + attachment.thumbUrl; + + return 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, + ), ); - final colorTheme = - StreamChatTheme.of(context).colorTheme; - return Shimmer.fromColors( - baseColor: colorTheme.disabled, - highlightColor: colorTheme.inputBg, - child: image, + } else if (attachment.type == 'video') { + final controller = videoPackages[attachment.id]!; + if (!controller.initialized) { + return const Center( + child: CircularProgressIndicator.adaptive(), + ); + } + + 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, - heroAttributes: PhotoViewHeroAttributes( - tag: widget.mediaAttachmentPackages, - ), - backgroundDecoration: const BoxDecoration( - color: Colors.transparent, - ), - ), + } + + return const SizedBox(); + }, ), - ), - ); - } 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 +474,7 @@ class VideoPackage { videoPlayerController: _videoPlayerController, autoInitialize: _autoInitialize, showControls: _showControls, + showOptions: false, aspectRatio: _videoPlayerController.value.aspectRatio, ); }); diff --git a/packages/stream_chat_flutter/lib/src/fullscreen_media/full_screen_media_desktop.dart b/packages/stream_chat_flutter/lib/src/fullscreen_media/full_screen_media_desktop.dart index 13185a794..0b870f773 100644 --- a/packages/stream_chat_flutter/lib/src/fullscreen_media/full_screen_media_desktop.dart +++ b/packages/stream_chat_flutter/lib/src/fullscreen_media/full_screen_media_desktop.dart @@ -307,88 +307,95 @@ class _FullScreenMediaDesktopState extends State { final currentAttachmentPackage = widget.mediaAttachmentPackages[index]; final attachment = currentAttachmentPackage.attachment; - if (attachment.type == 'image' || attachment.type == 'giphy') { - final imageUrl = attachment.imageUrl ?? - attachment.assetUrl ?? - attachment.thumbUrl; - return ValueListenableBuilder( - valueListenable: _isDisplayingDetail, - builder: (context, isDisplayingDetail, _) => - AnimatedContainer( + + return ValueListenableBuilder( + valueListenable: _isDisplayingDetail, + builder: (context, isDisplayingDetail, child) { + return AnimatedContainer( + duration: kThemeChangeDuration, color: isDisplayingDetail ? StreamChannelHeaderTheme.of(context).color : Colors.black, - duration: kThemeAnimationDuration, - child: ContextMenuArea( - verticalPadding: 0, - builder: (_) => [ - DownloadMenuItem( - attachment: attachment, - ), - ], - 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', + child: Builder( + builder: (context) { + if (attachment.type == 'image' || + attachment.type == 'giphy') { + final imageUrl = attachment.imageUrl ?? + attachment.assetUrl ?? + attachment.thumbUrl; + + return 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, + ), ); - final colorTheme = - StreamChatTheme.of(context).colorTheme; - return Shimmer.fromColors( - baseColor: colorTheme.disabled, - highlightColor: colorTheme.inputBg, - child: image, + } else if (attachment.type == 'video') { + final package = videoPackages[attachment.id]!; + package.player.open( + Playlist( + medias: [ + Media.network(package.attachment.assetUrl), + ], + ), + autoStart: widget.autoplayVideos, ); - }, - 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( - onTap: switchDisplayingDetail, - child: Padding( - padding: const EdgeInsets.symmetric(vertical: 50), - child: ContextMenuArea( - verticalPadding: 0, - builder: (_) => [ - DownloadMenuItem( - attachment: attachment, - ), - ], - child: Video( - player: package.player, - ), + 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(); + ); + }, + ); }, ), ), From 8df58533435a2b75b24f6881dcab7505a859ada7 Mon Sep 17 00:00:00 2001 From: Sahil Kumar Date: Wed, 16 Aug 2023 16:44:23 +0530 Subject: [PATCH 2/3] chore: update CHANGELOG.md Signed-off-by: Sahil Kumar --- packages/stream_chat_flutter/CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/stream_chat_flutter/CHANGELOG.md b/packages/stream_chat_flutter/CHANGELOG.md index d2e3bc52b..5d7b5e2e1 100644 --- a/packages/stream_chat_flutter/CHANGELOG.md +++ b/packages/stream_chat_flutter/CHANGELOG.md @@ -4,6 +4,8 @@ - [[#1702]](https://github.com/GetStream/stream-chat-flutter/issues/1702) 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 From c19bea00e662a001606dff332a3ca94e0d517fd8 Mon Sep 17 00:00:00 2001 From: Sahil Kumar Date: Wed, 16 Aug 2023 16:55:13 +0530 Subject: [PATCH 3/3] chore: fix analysis. Signed-off-by: Sahil Kumar --- .../lib/src/fullscreen_media/full_screen_media.dart | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/stream_chat_flutter/lib/src/fullscreen_media/full_screen_media.dart b/packages/stream_chat_flutter/lib/src/fullscreen_media/full_screen_media.dart index f8efc89e0..a1708e17f 100644 --- a/packages/stream_chat_flutter/lib/src/fullscreen_media/full_screen_media.dart +++ b/packages/stream_chat_flutter/lib/src/fullscreen_media/full_screen_media.dart @@ -3,13 +3,11 @@ import 'dart:io'; import 'package:cached_network_image/cached_network_image.dart'; import 'package:chewie/chewie.dart'; -import 'package:contextmenu/contextmenu.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:photo_view/photo_view.dart'; import 'package:shimmer/shimmer.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/stream_chat_flutter.dart'; import 'package:video_player/video_player.dart';