feat(mobile): increased tap area on video player overlay (#27269)

* fix(mobile): improved tap area on video player

* fix: back button padding

* chore: use sizedbox.square & button padding

* chore: fixed padding
This commit is contained in:
Yaros
2026-05-09 05:47:41 +02:00
committed by GitHub
parent fdac6c8bc4
commit 41f285aa3e
3 changed files with 82 additions and 60 deletions
@@ -65,8 +65,12 @@ class ViewerBottomBar extends ConsumerWidget {
labelLarge: context.themeData.textTheme.labelLarge?.copyWith(color: Colors.white),
),
),
child: Container(
decoration: const BoxDecoration(
child: Stack(
children: [
const Positioned.fill(
child: IgnorePointer(
child: DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
@@ -74,8 +78,13 @@ class ViewerBottomBar extends ConsumerWidget {
stops: [0.0, 0.7, 1.0],
),
),
child: SafeArea(
),
),
),
SafeArea(
top: false,
child: Padding(
padding: const EdgeInsets.only(top: 16),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
@@ -86,6 +95,8 @@ class ViewerBottomBar extends ConsumerWidget {
),
),
),
],
),
),
);
}
@@ -75,6 +75,10 @@ class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
child: AnimatedOpacity(
opacity: opacity,
duration: Durations.short2,
child: Stack(
children: [
Positioned.fill(
child: IgnorePointer(
child: DecoratedBox(
decoration: BoxDecoration(
gradient: showingDetails
@@ -86,20 +90,28 @@ class ViewerTopAppBar extends ConsumerWidget implements PreferredSizeWidget {
stops: [0.0, 0.7, 1.0],
),
),
child: AppBar(
backgroundColor: Colors.transparent,
leading: const _AppBarBackButton(),
iconTheme: const IconThemeData(size: 22, color: Colors.white),
actionsIconTheme: const IconThemeData(size: 22, color: Colors.white),
shape: const Border(),
actions: showingDetails || isReadonlyModeEnabled
? null
: isInLockedView
? lockedViewActions
: actions,
),
),
),
SafeArea(
bottom: false,
child: SizedBox.square(
child: Theme(
data: context.themeData.copyWith(iconTheme: const IconThemeData(size: 22, color: Colors.white)),
child: Row(
children: [
const _AppBarBackButton(),
const Spacer(),
if (!showingDetails && !isReadonlyModeEnabled)
if (isInLockedView) ...lockedViewActions else ...actions,
],
),
),
),
),
],
),
),
);
}
@@ -113,20 +125,17 @@ class _AppBarBackButton extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final showingDetails = ref.watch(assetViewerProvider.select((state) => state.showingDetails));
return Padding(
padding: const EdgeInsets.only(left: 12.0),
child: ElevatedButton(
return ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: showingDetails ? context.colorScheme.surface : Colors.transparent,
shape: const CircleBorder(),
iconSize: 22,
iconColor: showingDetails ? context.colorScheme.onSurface : Colors.white,
padding: EdgeInsets.zero,
padding: const EdgeInsets.all(10.0),
elevation: showingDetails ? 4 : 0,
),
onPressed: context.maybePop,
child: const Icon(Icons.arrow_back_rounded),
),
);
}
}
@@ -119,7 +119,8 @@ class _VideoControlsState extends ConsumerState<VideoControls> {
onPressed: () => _toggle(isCasting),
),
const Spacer(),
Text(
IgnorePointer(
child: Text(
"${position.format()} / ${duration.format()}",
style: const TextStyle(
color: Colors.white,
@@ -128,6 +129,7 @@ class _VideoControlsState extends ConsumerState<VideoControls> {
shadows: VideoControls._controlShadows,
),
),
),
const SizedBox(width: 12),
],
),