fix(ui): fix video player controls getting hidden.

Signed-off-by: Sahil Kumar <[email protected]>
This commit is contained in:
Sahil Kumar
2023-08-16 16:42:48 +05:30
parent e5d593a9e6
commit 27074ddb55
2 changed files with 155 additions and 148 deletions
@@ -281,84 +281,83 @@ class _FullScreenMediaState extends State<StreamFullScreenMedia> {
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<bool>(
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,
);
});
@@ -307,88 +307,95 @@ class _FullScreenMediaDesktopState extends State<FullScreenMediaDesktop> {
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<bool>(
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',
);
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,
);
child: Builder(
builder: (context) {
if (attachment.type == 'image' ||
attachment.type == 'giphy') {
final imageUrl = attachment.imageUrl ??
attachment.assetUrl ??
attachment.thumbUrl;
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,
),
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,
),
);
} 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();
);
},
);
},
),
),