Merge pull request #1709 from GetStream/fix/hidden-video-controls
This commit is contained in:
@@ -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,
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|||||||
+84
-77
@@ -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();
|
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
|||||||
Reference in New Issue
Block a user