Merge pull request #36945 from neonbhai/video-player-tooltip-render-fix

Fix: Render tooltip on Video Player Buttons
Expensify · Mar 22, 2024 · 67acd7b · 67acd7b
2 parents a7a1086 + 1cbdaac
commit 67acd7b
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 25 deletions.
diff --git a/src/components/VideoPlayer/IconButton.js b/src/components/VideoPlayer/IconButton.js
@@ -1,8 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import Hoverable from '@components/Hoverable';
 import Icon from '@components/Icon';
-import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Tooltip from '@components/Tooltip';
 import useThemeStyles from '@hooks/useThemeStyles';
 import stylePropTypes from '@styles/stylePropTypes';
@@ -44,21 +43,18 @@ function IconButton({src, fill, onPress, style, hoverStyle, tooltipText, small,
             text={tooltipText}
             shouldForceRenderingBelow={shouldForceRenderingTooltipBelow}
         >
-            <Hoverable>
-                {(isHovered) => (
-                    <PressableWithoutFeedback
-                        accessibilityLabel={tooltipText}
-                        onPress={onPress}
-                        style={[styles.videoIconButton, isHovered && [styles.videoIconButtonHovered, hoverStyle], style]}
-                    >
-                        <Icon
-                            src={src}
-                            fill={fill}
-                            small={small}
-                        />
-                    </PressableWithoutFeedback>
-                )}
-            </Hoverable>
+            <PressableWithFeedback
+                accessibilityLabel={tooltipText}
+                onPress={onPress}
+                style={[styles.videoIconButton, style]}
+                hoverStyle={[styles.videoIconButtonHovered, hoverStyle]}
+            >
+                <Icon
+                    src={src}
+                    fill={fill}
+                    small={small}
+                />
+            </PressableWithFeedback>
         </Tooltip>
     );
 }

diff --git a/src/components/VideoPlayerPreview/index.tsx b/src/components/VideoPlayerPreview/index.tsx
@@ -7,6 +7,8 @@ import VideoPlayer from '@components/VideoPlayer';
 import IconButton from '@components/VideoPlayer/IconButton';
 import {usePlaybackContext} from '@components/VideoPlayerContexts/PlaybackContext';
 import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useThumbnailDimensions from '@hooks/useThumbnailDimensions';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -39,6 +41,8 @@ type VideoPlayerPreviewProps = {
 
 function VideoPlayerPreview({videoUrl, thumbnailUrl, fileName, videoDimensions, videoDuration, onShowModalPress}: VideoPlayerPreviewProps) {
     const styles = useThemeStyles();
+    const theme = useTheme();
+    const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
     const {currentlyPlayingURL, updateCurrentlyPlayingURL} = usePlaybackContext();
     const {isSmallScreenWidth} = useWindowDimensions();
@@ -84,14 +88,16 @@ function VideoPlayerPreview({videoUrl, thumbnailUrl, fileName, videoDimensions,
                         shouldUseSmallVideoControls
                         style={[styles.w100, styles.h100]}
                     />
-
-                    <IconButton
-                        src={Expensicons.Expand}
-                        style={styles.videoExpandButton}
-                        tooltipText={translate('videoPlayer.expand')}
-                        onPress={onShowModalPress}
-                        small
-                    />
+                    <View style={[styles.pAbsolute, styles.w100]}>
+                        <IconButton
+                            src={Expensicons.Expand}
+                            style={[styles.videoExpandButton]}
+                            hoverStyle={StyleUtils.getBackgroundColorStyle(theme.videoPlayerBG)}
+                            tooltipText={translate('videoPlayer.expand')}
+                            onPress={onShowModalPress}
+                            small
+                        />
+                    </View>
                 </>
             )}
         </View>