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

mobile/lib/presentation/widgets/asset_viewer/bottom_bar.widget.dart

@@ -65,8 +65,12 @@ class ViewerBottomBar extends ConsumerWidget {
                   labelLarge: context.themeData.textTheme.labelLarge?.copyWith(color: Colors.white),
                 ),
               ),
-              child: Container(
+              child: Stack(
-                decoration: const BoxDecoration(
+                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 {
                       ),
                     ),
                   ),
+                ],
+              ),
             ),
     );
   }

mobile/lib/presentation/widgets/asset_viewer/viewer_top_app_bar.widget.dart

@@ -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(
+    return ElevatedButton(
-      padding: const EdgeInsets.only(left: 12.0),
-      child: 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),
-      ),
     );
   }
 }

mobile/lib/widgets/asset_viewer/video_controls.dart

@@ -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),
             ],
           ),