Skip to content

Commit

Permalink
TW-1126: Increase Video player hitbox size
Browse files Browse the repository at this point in the history
  • Loading branch information
@hoangdat
Julian KOUNE authored and hoangdat committed Dec 26, 2023
1 parent 5094a01 commit dd71da7
Show file tree
Hide file tree
Showing 4 changed files with 140 additions and 123 deletions.
126 changes: 71 additions & 55 deletions lib/pages/chat/events/download_video_widget.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,62 +103,78 @@ class _DownloadVideoWidgetState extends State<DownloadVideoWidget>
event: widget.event,
fit: BoxFit.cover,
),
Center(
child: ValueListenableBuilder<DownloadVideoState>(
valueListenable: _downloadStateNotifier,
builder: (context, downloadState, child) {
switch (downloadState) {
case DownloadVideoState.loading:
return Stack(
children: [
CenterVideoButton(
icon: Icons.play_arrow,
onTap: _downloadAction,
),
SizedBox(
width: MessageContentStyle.videoCenterButtonSize,
height: MessageContentStyle.videoCenterButtonSize,
child: ValueListenableBuilder(
valueListenable: downloadProgressNotifier,
builder: (context, progress, child) {
return CircularProgressIndicator(
strokeWidth: 2,
color: LinagoraRefColors.material()
.primary[100],
value:
PlatformInfos.isWeb ? null : progress,
);
},
ValueListenableBuilder<DownloadVideoState>(
valueListenable: _downloadStateNotifier,
builder: (context, downloadState, child) {
switch (downloadState) {
case DownloadVideoState.loading:
return InkWell(
onTap: _downloadAction,
child: Center(
child: Stack(
children: [
const CenterVideoButton(
icon: Icons.play_arrow,
),
),
],
);
case DownloadVideoState.initial:
return CenterVideoButton(
icon: Icons.play_arrow,
onTap: _downloadAction,
);
case DownloadVideoState.done:
return CenterVideoButton(
icon: Icons.play_arrow,
onTap: () {
if (path != null) {
playVideoAction(
context,
path!,
event: widget.event,
);
}
},
);
case DownloadVideoState.failed:
return CenterVideoButton(
icon: Icons.error,
onTap: _downloadAction,
);
}
},
),
SizedBox(
width:
MessageContentStyle.videoCenterButtonSize,
height:
MessageContentStyle.videoCenterButtonSize,
child: ValueListenableBuilder(
valueListenable: downloadProgressNotifier,
builder: (context, progress, child) {
return CircularProgressIndicator(
strokeWidth: 2,
color: LinagoraRefColors.material()
.primary[100],
value:
PlatformInfos.isWeb ? null : progress,
);
},
),
),
],
),
),
);
case DownloadVideoState.initial:
return InkWell(
onTap: _downloadAction,
child: const Center(
child: CenterVideoButton(
icon: Icons.play_arrow,
),
),
);
case DownloadVideoState.done:
return InkWell(
onTap: () {
if (path != null) {
playVideoAction(
context,
path!,
event: widget.event,
);
}
},
child: const Center(
child: CenterVideoButton(
icon: Icons.play_arrow,
),
),
);
case DownloadVideoState.failed:
return InkWell(
onTap: _downloadAction,
child: const Center(
child: CenterVideoButton(
icon: Icons.error,
),
),
);
}
},
),
],
),
Expand Down
133 changes: 66 additions & 67 deletions lib/pages/chat/events/event_video_player.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,94 +61,93 @@ class EventVideoPlayer extends StatelessWidget {
rounded ? MessageContentStyle.borderRadiusBubble : BorderRadius.zero,
child: Material(
color: Colors.black,
child: SizedBox(
width: MessageContentStyle.imageBubbleWidth(imageWidth),
height: MessageContentStyle.videoBubbleHeight(imageHeight),
child: Stack(
alignment: Alignment.center,
children: [
BlurHash(hash: blurHash),
if (hasThumbnail)
Center(
child: ImageBubble(
event,
width: MessageContentStyle.imageBubbleWidth(imageWidth),
height: MessageContentStyle.videoBubbleHeight(imageHeight),
rounded: rounded,
thumbnailCacheKey: thumbnailCacheKey,
thumbnailCacheMap: thumbnailCacheMap,
noResizeThumbnail: noResizeThumbnail,
thumbnailOnly: true,
child: InkWell(
onTap: () => _onTapVideo(context),
child: SizedBox(
width: MessageContentStyle.imageBubbleWidth(imageWidth),
height: MessageContentStyle.videoBubbleHeight(imageHeight),
child: Stack(
alignment: Alignment.center,
children: [
BlurHash(hash: blurHash),
if (hasThumbnail)
Center(
child: ImageBubble(
event,
width: MessageContentStyle.imageBubbleWidth(imageWidth),
height:
MessageContentStyle.videoBubbleHeight(imageHeight),
rounded: rounded,
thumbnailCacheKey: thumbnailCacheKey,
thumbnailCacheMap: thumbnailCacheMap,
noResizeThumbnail: noResizeThumbnail,
thumbnailOnly: true,
),
),
const CenterVideoButton(
icon: Icons.play_arrow,
),
CenterVideoButton(
icon: Icons.play_arrow,
onTap: () async {
await Navigator.of(
context,
rootNavigator: PlatformInfos.isWeb,
).push(
HeroPageRoute(
builder: (context) {
return InteractiveViewerGallery(
itemBuilder: DownloadVideoWidget(event: event),
);
},
),
);
},
),
if (showDuration)
Positioned(
bottom: ChatDetailsMediaStyle.durationPosition,
right: ChatDetailsMediaStyle.durationPosition,
child: Container(
padding: ChatDetailsMediaStyle.durationPadding,
decoration: ChatDetailsMediaStyle.durationBoxDecoration(
context,
),
child: Text(
event.duration?.mediaTimeLength() ?? "--:--",
style: ChatDetailsMediaStyle.durationTextStyle(context),
if (showDuration)
Positioned(
bottom: ChatDetailsMediaStyle.durationPosition,
right: ChatDetailsMediaStyle.durationPosition,
child: Container(
padding: ChatDetailsMediaStyle.durationPadding,
decoration: ChatDetailsMediaStyle.durationBoxDecoration(
context,
),
child: Text(
event.duration?.mediaTimeLength() ?? "--:--",
style: ChatDetailsMediaStyle.durationTextStyle(context),
),
),
),
),
],
],
),
),
),
),
);
}

Future<void> _onTapVideo(BuildContext context) async {
await Navigator.of(
context,
rootNavigator: PlatformInfos.isWeb,
).push(
HeroPageRoute(
builder: (context) {
return InteractiveViewerGallery(
itemBuilder: DownloadVideoWidget(event: event),
);
},
),
);
}
}

class CenterVideoButton extends StatelessWidget {
final IconData icon;

final VoidCallback? onTap;

const CenterVideoButton({
super.key,
required this.icon,
this.onTap,
});

@override
Widget build(BuildContext context) {
return InkWell(
onTap: onTap,
child: Container(
width: MessageContentStyle.videoCenterButtonSize,
height: MessageContentStyle.videoCenterButtonSize,
decoration: const BoxDecoration(
color: MessageContentStyle.backgroundColorCenterButton,
shape: BoxShape.circle,
),
alignment: Alignment.center,
child: Icon(
icon,
color: LinagoraRefColors.material().primary[100],
size: MessageContentStyle.iconInsideVideoButtonSize,
),
return Container(
width: MessageContentStyle.videoCenterButtonSize,
height: MessageContentStyle.videoCenterButtonSize,
decoration: const BoxDecoration(
color: MessageContentStyle.backgroundColorCenterButton,
shape: BoxShape.circle,
),
alignment: Alignment.center,
child: Icon(
icon,
color: LinagoraRefColors.material().primary[100],
size: MessageContentStyle.iconInsideVideoButtonSize,
),
);
}
Expand Down
2 changes: 1 addition & 1 deletion lib/pages/chat/events/message_content_style.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ class MessageContentStyle {

static const Color backgroundColorCenterButton = Colors.black38;

static const BorderRadiusGeometry borderRadiusBubble =
static const BorderRadius borderRadiusBubble =
BorderRadius.all(Radius.circular(12.0));

static const backIconColor = Colors.white;
Expand Down
2 changes: 2 additions & 0 deletions lib/widgets/mxc_image.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,6 +255,8 @@ class _MxcImageState extends State<MxcImage>
if (widget.isPreview) {
return Material(
child: InkWell(
borderRadius:
widget.rounded ? BorderRadius.circular(12.0) : BorderRadius.zero,
onTap: widget.onTapPreview != null || widget.onTapSelectMode != null
? () => _onTap(context)
: null,
Expand Down

0 comments on commit dd71da7

Please sign in to comment.