fix(ui): fix video player controls getting hidden.
Signed-off-by: Sahil Kumar <[email protected]>
This commit is contained in:
@@ -281,84 +281,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 +474,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