Center instant show controls

[abdelaziz-mahdy]

Problem and Fix Summary

1. Widget Width Handling Issue:

   • Problem: Previously, the width for video controls was derived from the MediaQuery, which captures the entire screen width. This approach caused issues when the video player wasn't in full-screen mode, leading to improper control scaling and misalignment.
   • Fix: Introduced the use of LayoutBuilder to dynamically obtain the width of the widget itself rather than the entire screen. This ensures that the controls are correctly sized and positioned regardless of the player's on-screen size, enhancing the adaptability of the video player in different layouts.

2. Gesture Detection Delay:

   • Problem: The original implementation used a gesture detector that had a delay while determining whether the user's action was a single or double tap. This delay hindered immediate responsiveness, particularly in showing controls.
   • Fix: Implemented segmented logic and a listener to immediately catch touch events. If a touch is detected in the central area of the video player, the controls are shown instantly, similar to YouTube's approach.

3. Double Tap Seek UI Adjustment Summary:

   • Problem: Previously, the double-tap-to-seek function covered the entire width of the video player, leading to confusion as it overlapped with areas for normal interactions.
   • Fix: Implemented a segmented layout, dividing the player's width into a [2,1,2] ratio. The double-tap-to-seek feature is now positioned on the sides (the '2' segments), with the central segment ('1') dedicated to regular taps. This design, similar to YouTube's user interface, allows clear differentiation between areas for normal taps and double-tap-to-seek, reducing user confusion and improving the video player's intuitiveness.