Merge pull request Expensify#75899 from gijoe0295/gijoe/72505

fix: attachment arrows are hidden when playing video

Author: JmillsExpensify

src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.ts

@@ -37,7 +37,7 @@ type AttachmentCarouselPagerContextValue = {
     isScrollEnabled: SharedValue<boolean>;
 
     /** Function to call after a tap event */
-    onTap?: () => void;
+    onTap?: (shouldShowArrows?: boolean) => void;
 
     /** Function to call when the scale changes */
     onScaleChanged?: (scale: number) => void;

src/components/Attachments/AttachmentCarousel/useCarouselContextEvents.ts

@@ -49,13 +49,16 @@ function useCarouselContextEvents(setShouldShowArrows?: (show?: SetStateAction<b
      * This callback is passed to the MultiGestureCanvas/Lightbox through the AttachmentCarouselPagerContext.
      * It is used to trigger touch events on the pager when the user taps on the MultiGestureCanvas/Lightbox.
      */
-    const handleTap = useCallback(() => {
-        if (!isScrollEnabled.get()) {
-            return;
-        }
+    const handleTap = useCallback(
+        (shouldShowArrows?: boolean) => {
+            if (!isScrollEnabled.get()) {
+                return;
+            }
 
-        onRequestToggleArrows();
-    }, [isScrollEnabled, onRequestToggleArrows]);
+            onRequestToggleArrows(shouldShowArrows);
+        },
+        [isScrollEnabled, onRequestToggleArrows],
+    );
 
     return {handleTap, handleScaleChange, scale, isScrollEnabled};
 }

src/components/Attachments/AttachmentView/AttachmentViewVideo/index.tsx

@@ -12,9 +12,12 @@ type AttachmentViewVideoProps = Pick<AttachmentViewProps, 'duration' | 'isHovere
 
     /** The reportID related to the attachment */
     reportID?: string;
+
+    /** Callback function to call when the video is tap */
+    onTap?: (shouldShowArrows?: boolean) => void;
 };
 
-function AttachmentViewVideo({source, isHovered = false, shouldUseSharedVideoElement = false, duration = 0, reportID}: AttachmentViewVideoProps) {
+function AttachmentViewVideo({source, isHovered = false, shouldUseSharedVideoElement = false, duration = 0, reportID, onTap}: AttachmentViewVideoProps) {
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const styles = useThemeStyles();
 
@@ -26,6 +29,7 @@ function AttachmentViewVideo({source, isHovered = false, shouldUseSharedVideoEle
             videoDuration={duration}
             style={[styles.w100, styles.h100, styles.pb5]}
             reportID={reportID}
+            onTap={onTap}
         />
     );
 }

src/components/Attachments/AttachmentView/index.tsx

@@ -140,7 +140,7 @@ function AttachmentView({
     const {updateCurrentURLAndReportID, currentlyPlayingURL, playVideo} = usePlaybackContext();
 
     const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext);
-    const {onAttachmentError} = attachmentCarouselPagerContext ?? {};
+    const {onAttachmentError, onTap} = attachmentCarouselPagerContext ?? {};
     const theme = useTheme();
     const {safeAreaPaddingBottomStyle} = useSafeAreaPaddings();
     const styles = useThemeStyles();
@@ -366,6 +366,7 @@ function AttachmentView({
                 isHovered={isHovered}
                 duration={duration}
                 reportID={reportID}
+                onTap={onTap}
             />
         );
     }

src/components/VideoPlayer/BaseVideoPlayer.tsx

@@ -55,6 +55,7 @@ function BaseVideoPlayer({
     isVideoHovered = false,
     isPreview,
     reportID,
+    onTap,
 }: VideoPlayerProps & {reportID: string}) {
     const styles = useThemeStyles();
     const {
@@ -153,6 +154,14 @@ function BaseVideoPlayer({
         debouncedHideControl();
     }, [isPlaying, debouncedHideControl, controlStatusState, isPopoverVisible, canUseTouchScreen]);
 
+    useEffect(() => {
+        if (!onTap || !controlStatusState) {
+            return;
+        }
+        const shouldShowArrows = controlStatusState === CONST.VIDEO_PLAYER.CONTROLS_STATUS.SHOW || controlStatusState === CONST.VIDEO_PLAYER.CONTROLS_STATUS.VOLUME_ONLY;
+        onTap(shouldShowArrows);
+    }, [controlStatusState, onTap]);
+
     const stopWheelPropagation = useCallback((ev: WheelEvent) => ev.stopPropagation(), []);
 
     const toggleControl = useCallback(() => {

src/components/VideoPlayer/types.ts

@@ -31,6 +31,7 @@ type VideoPlayerProps = {
     shouldPlay?: boolean;
     isPreview?: boolean;
     reportID?: string;
+    onTap?: (shouldShowArrows?: boolean) => void;
 };
 
 export type {VideoPlayerProps, VideoWithOnFullScreenUpdate};