diff --git a/src/components/VideoPlayer/VideoPlayerControls/ProgressBar/index.js b/src/components/VideoPlayer/VideoPlayerControls/ProgressBar/index.tsx
similarity index 68%
rename from src/components/VideoPlayer/VideoPlayerControls/ProgressBar/index.js
rename to src/components/VideoPlayer/VideoPlayerControls/ProgressBar/index.tsx
index c6eb1a179726..f9dd09db59f4 100644
--- a/src/components/VideoPlayer/VideoPlayerControls/ProgressBar/index.js
+++ b/src/components/VideoPlayer/VideoPlayerControls/ProgressBar/index.tsx
@@ -1,25 +1,27 @@
-import PropTypes from 'prop-types';
 import React, {useEffect, useState} from 'react';
+import type {LayoutChangeEvent, ViewStyle} from 'react-native';
+import type {GestureStateChangeEvent, GestureUpdateEvent, PanGestureChangeEventPayload, PanGestureHandlerEventPayload} from 'react-native-gesture-handler';
 import {Gesture, GestureDetector} from 'react-native-gesture-handler';
 import Animated, {runOnJS, useAnimatedStyle, useSharedValue} from 'react-native-reanimated';
 import {usePlaybackContext} from '@components/VideoPlayerContexts/PlaybackContext';
 import useThemeStyles from '@hooks/useThemeStyles';
 
-const propTypes = {
-    duration: PropTypes.number.isRequired,
+type ProgressBarProps = {
+    /** Total duration of a video. */
+    duration: number;
 
-    position: PropTypes.number.isRequired,
+    /** Position of progress pointer on the bar. */
+    position: number;
 
-    seekPosition: PropTypes.func.isRequired,
+    /** Function to seek to a specific position in the video. */
+    seekPosition: (newPosition: number) => void;
 };
 
-const defaultProps = {};
-
-function getProgress(currentPosition, maxPosition) {
+function getProgress(currentPosition: number, maxPosition: number): number {
     return Math.min(Math.max((currentPosition / maxPosition) * 100, 0), 100);
 }
 
-function ProgressBar({duration, position, seekPosition}) {
+function ProgressBar({duration, position, seekPosition}: ProgressBarProps) {
     const styles = useThemeStyles();
     const {pauseVideo, playVideo, checkVideoPlaying} = usePlaybackContext();
     const [sliderWidth, setSliderWidth] = useState(1);
@@ -27,18 +29,18 @@ function ProgressBar({duration, position, seekPosition}) {
     const progressWidth = useSharedValue(0);
     const wasVideoPlayingOnCheck = useSharedValue(false);
 
-    const onCheckVideoPlaying = (isPlaying) => {
+    const onCheckVideoPlaying = (isPlaying: boolean) => {
         wasVideoPlayingOnCheck.value = isPlaying;
     };
 
-    const progressBarInteraction = (event) => {
+    const progressBarInteraction = (event: GestureUpdateEvent<PanGestureHandlerEventPayload & PanGestureChangeEventPayload> | GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
         const progress = getProgress(event.x, sliderWidth);
         progressWidth.value = progress;
         runOnJS(seekPosition)((progress * duration) / 100);
     };
 
-    const onSliderLayout = (e) => {
-        setSliderWidth(e.nativeEvent.layout.width);
+    const onSliderLayout = (event: LayoutChangeEvent) => {
+        setSliderWidth(event.nativeEvent.layout.width);
     };
 
     const pan = Gesture.Pan()
@@ -66,7 +68,7 @@ function ProgressBar({duration, position, seekPosition}) {
         progressWidth.value = getProgress(position, duration);
     }, [duration, isSliderPressed, position, progressWidth]);
 
-    const progressBarStyle = useAnimatedStyle(() => ({width: `${progressWidth.value}%`}));
+    const progressBarStyle: ViewStyle = useAnimatedStyle(() => ({width: `${progressWidth.value}%`}));
 
     return (
         <GestureDetector gesture={pan}>
@@ -85,8 +87,6 @@ function ProgressBar({duration, position, seekPosition}) {
     );
 }
 
-ProgressBar.propTypes = propTypes;
-ProgressBar.defaultProps = defaultProps;
 ProgressBar.displayName = 'ProgressBar';
 
 export default ProgressBar;
diff --git a/src/components/VideoPlayer/VideoPlayerControls/VolumeButton/index.js b/src/components/VideoPlayer/VideoPlayerControls/VolumeButton/index.tsx
similarity index 81%
rename from src/components/VideoPlayer/VideoPlayerControls/VolumeButton/index.js
rename to src/components/VideoPlayer/VideoPlayerControls/VolumeButton/index.tsx
index 45f47eb87c36..011391ed4c71 100644
--- a/src/components/VideoPlayer/VideoPlayerControls/VolumeButton/index.js
+++ b/src/components/VideoPlayer/VideoPlayerControls/VolumeButton/index.tsx
@@ -1,6 +1,7 @@
-import PropTypes from 'prop-types';
 import React, {memo, useCallback, useState} from 'react';
+import type {LayoutChangeEvent, StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
+import type {GestureStateChangeEvent, GestureUpdateEvent, PanGestureChangeEventPayload, PanGestureHandlerEventPayload} from 'react-native-gesture-handler';
 import {Gesture, GestureDetector} from 'react-native-gesture-handler';
 import Animated, {runOnJS, useAnimatedStyle, useDerivedValue} from 'react-native-reanimated';
 import Hoverable from '@components/Hoverable';
@@ -10,18 +11,16 @@ import {useVolumeContext} from '@components/VideoPlayerContexts/VolumeContext';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as NumberUtils from '@libs/NumberUtils';
-import stylePropTypes from '@styles/stylePropTypes';
 
-const propTypes = {
-    style: stylePropTypes.isRequired,
-    small: PropTypes.bool,
-};
+type VolumeButtonProps = {
+    /** Style for the volume button. */
+    style?: StyleProp<ViewStyle>;
 
-const defaultProps = {
-    small: false,
+    /** Is button icon small. */
+    small?: boolean;
 };
 
-const getVolumeIcon = (volume) => {
+const getVolumeIcon = (volume: number) => {
     if (volume === 0) {
         return Expensicons.Mute;
     }
@@ -31,7 +30,7 @@ const getVolumeIcon = (volume) => {
     return Expensicons.VolumeHigh;
 };
 
-function VolumeButton({style, small}) {
+function VolumeButton({style, small = false}: VolumeButtonProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {updateVolume, volume} = useVolumeContext();
@@ -39,12 +38,12 @@ function VolumeButton({style, small}) {
     const [volumeIcon, setVolumeIcon] = useState({icon: getVolumeIcon(volume.value)});
     const [isSliderBeingUsed, setIsSliderBeingUsed] = useState(false);
 
-    const onSliderLayout = useCallback((e) => {
-        setSliderHeight(e.nativeEvent.layout.height);
+    const onSliderLayout = useCallback((event: LayoutChangeEvent) => {
+        setSliderHeight(event.nativeEvent.layout.height);
     }, []);
 
     const changeVolumeOnPan = useCallback(
-        (event) => {
+        (event: GestureStateChangeEvent<PanGestureHandlerEventPayload> | GestureUpdateEvent<PanGestureHandlerEventPayload & PanGestureChangeEventPayload>) => {
             const val = NumberUtils.roundToTwoDecimalPlaces(1 - event.y / sliderHeight);
             volume.value = NumberUtils.clamp(val, 0, 1);
         },
@@ -65,7 +64,7 @@ function VolumeButton({style, small}) {
 
     const progressBarStyle = useAnimatedStyle(() => ({height: `${volume.value * 100}%`}));
 
-    const updateIcon = useCallback((vol) => {
+    const updateIcon = useCallback((vol: number) => {
         setVolumeIcon({icon: getVolumeIcon(vol)});
     }, []);
 
@@ -98,7 +97,6 @@ function VolumeButton({style, small}) {
                         tooltipText={volume.value === 0 ? translate('videoPlayer.unmute') : translate('videoPlayer.mute')}
                         onPress={() => updateVolume(volume.value === 0 ? 1 : 0)}
                         src={volumeIcon.icon}
-                        fill={styles.white}
                         small={small}
                         shouldForceRenderingTooltipBelow
                     />
@@ -108,8 +106,6 @@ function VolumeButton({style, small}) {
     );
 }
 
-VolumeButton.propTypes = propTypes;
-VolumeButton.defaultProps = defaultProps;
 VolumeButton.displayName = 'VolumeButton';
 
 export default memo(VolumeButton);
diff --git a/src/components/VideoPlayer/VideoPlayerControls/index.js b/src/components/VideoPlayer/VideoPlayerControls/index.tsx
similarity index 75%
rename from src/components/VideoPlayer/VideoPlayerControls/index.js
rename to src/components/VideoPlayer/VideoPlayerControls/index.tsx
index 262613ce0797..7c61721b67b7 100644
--- a/src/components/VideoPlayer/VideoPlayerControls/index.js
+++ b/src/components/VideoPlayer/VideoPlayerControls/index.tsx
@@ -1,55 +1,58 @@
-import PropTypes from 'prop-types';
+import type {Video} from 'expo-av';
+import type {MutableRefObject} from 'react';
 import React, {useCallback, useMemo, useState} from 'react';
+import type {GestureResponderEvent, LayoutChangeEvent, StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import Animated from 'react-native-reanimated';
 import * as Expensicons from '@components/Icon/Expensicons';
-import refPropTypes from '@components/refPropTypes';
 import Text from '@components/Text';
 import IconButton from '@components/VideoPlayer/IconButton';
 import {convertMillisecondsToTime} from '@components/VideoPlayer/utils';
 import {usePlaybackContext} from '@components/VideoPlayerContexts/PlaybackContext';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import stylePropTypes from '@styles/stylePropTypes';
 import CONST from '@src/CONST';
 import ProgressBar from './ProgressBar';
 import VolumeButton from './VolumeButton';
 
-const propTypes = {
-    duration: PropTypes.number.isRequired,
+type VideoPlayerControlsProps = {
+    /** Duration of a video. */
+    duration: number;
 
-    position: PropTypes.number.isRequired,
+    /** Position of progress pointer. */
+    position: number;
 
-    url: PropTypes.string.isRequired,
+    /** Url of a video. */
+    url: string;
 
-    videoPlayerRef: refPropTypes.isRequired,
+    /** Ref for video player. */
+    videoPlayerRef: MutableRefObject<Video>;
 
-    isPlaying: PropTypes.bool.isRequired,
+    /** Is video playing. */
+    isPlaying: boolean;
 
-    // Defines if component should have small icons and tighter spacing inline
-    small: PropTypes.bool,
+    /** Defines if component should have small icons and tighter spacing inline. */
+    small?: boolean;
 
-    style: stylePropTypes,
+    /** Style of video player controls. */
+    style?: StyleProp<ViewStyle>;
 
-    showPopoverMenu: PropTypes.func.isRequired,
+    /** Function called to show popover menu. */
+    showPopoverMenu: (event?: GestureResponderEvent | KeyboardEvent) => void | Promise<void>;
 
-    togglePlayCurrentVideo: PropTypes.func.isRequired,
+    /** Function to play and pause the video.  */
+    togglePlayCurrentVideo: (event?: GestureResponderEvent | KeyboardEvent) => void | Promise<void>;
 };
 
-const defaultProps = {
-    small: false,
-    style: undefined,
-};
-
-function VideoPlayerControls({duration, position, url, videoPlayerRef, isPlaying, small, style, showPopoverMenu, togglePlayCurrentVideo}) {
+function VideoPlayerControls({duration, position, url, videoPlayerRef, isPlaying, small = false, style, showPopoverMenu, togglePlayCurrentVideo}: VideoPlayerControlsProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {updateCurrentlyPlayingURL} = usePlaybackContext();
     const [shouldShowTime, setShouldShowTime] = useState(false);
     const iconSpacing = small ? styles.mr3 : styles.mr4;
 
-    const onLayout = (e) => {
-        setShouldShowTime(e.nativeEvent.layout.width > CONST.VIDEO_PLAYER.HIDE_TIME_TEXT_WIDTH);
+    const onLayout = (event: LayoutChangeEvent) => {
+        setShouldShowTime(event.nativeEvent.layout.width > CONST.VIDEO_PLAYER.HIDE_TIME_TEXT_WIDTH);
     };
 
     const enterFullScreenMode = useCallback(() => {
@@ -58,7 +61,7 @@ function VideoPlayerControls({duration, position, url, videoPlayerRef, isPlaying
     }, [updateCurrentlyPlayingURL, url, videoPlayerRef]);
 
     const seekPosition = useCallback(
-        (newPosition) => {
+        (newPosition: number) => {
             videoPlayerRef.current.setStatusAsync({positionMillis: newPosition});
         },
         [videoPlayerRef],
@@ -116,8 +119,6 @@ function VideoPlayerControls({duration, position, url, videoPlayerRef, isPlaying
     );
 }
 
-VideoPlayerControls.propTypes = propTypes;
-VideoPlayerControls.defaultProps = defaultProps;
 VideoPlayerControls.displayName = 'VideoPlayerControls';
 
 export default VideoPlayerControls;
diff --git a/src/components/VideoPlayerPreview/VideoPlayerThumbnail.js b/src/components/VideoPlayerPreview/VideoPlayerThumbnail.tsx
similarity index 80%
rename from src/components/VideoPlayerPreview/VideoPlayerThumbnail.js
rename to src/components/VideoPlayerPreview/VideoPlayerThumbnail.tsx
index bcdc37a6ce90..9bbd9fe5fc62 100644
--- a/src/components/VideoPlayerPreview/VideoPlayerThumbnail.js
+++ b/src/components/VideoPlayerPreview/VideoPlayerThumbnail.tsx
@@ -1,6 +1,6 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
+import type {GestureResponderEvent} from 'react-native';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Image from '@components/Image';
@@ -13,19 +13,18 @@ import * as ReportUtils from '@libs/ReportUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 
-const propTypes = {
-    onPress: PropTypes.func.isRequired,
+type VideoPlayerThumbnailProps = {
+    /** Url of thumbnail image. */
+    thumbnailUrl?: string;
 
-    accessibilityLabel: PropTypes.string.isRequired,
+    /** Callback executed on thumbnail press. */
+    onPress: (event?: GestureResponderEvent | KeyboardEvent) => void | Promise<void>;
 
-    thumbnailUrl: PropTypes.string,
+    /** Accessibility label for the thumbnail. */
+    accessibilityLabel: string;
 };
 
-const defaultProps = {
-    thumbnailUrl: undefined,
-};
-
-function VideoPlayerThumbnail({thumbnailUrl, onPress, accessibilityLabel}) {
+function VideoPlayerThumbnail({thumbnailUrl, onPress, accessibilityLabel}: VideoPlayerThumbnailProps) {
     const styles = useThemeStyles();
 
     return (
@@ -48,9 +47,7 @@ function VideoPlayerThumbnail({thumbnailUrl, onPress, accessibilityLabel}) {
                         onPress={onPress}
                         onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
                         onPressOut={() => ControlSelection.unblock()}
-                        onLongPress={(event) =>
-                            showContextMenuForReport(event, anchor, (report && report.reportID) || '', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report))
-                        }
+                        onLongPress={(event) => showContextMenuForReport(event, anchor, report?.reportID ?? '', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report))}
                         shouldUseHapticsOnLongPress
                     >
                         <View style={[styles.videoThumbnailPlayButton]}>
@@ -69,8 +66,6 @@ function VideoPlayerThumbnail({thumbnailUrl, onPress, accessibilityLabel}) {
     );
 }
 
-VideoPlayerThumbnail.propTypes = propTypes;
-VideoPlayerThumbnail.defaultProps = defaultProps;
 VideoPlayerThumbnail.displayName = 'VideoPlayerThumbnail';
 
 export default VideoPlayerThumbnail;
diff --git a/src/components/VideoPlayerPreview/index.js b/src/components/VideoPlayerPreview/index.tsx
similarity index 68%
rename from src/components/VideoPlayerPreview/index.js
rename to src/components/VideoPlayerPreview/index.tsx
index 252bc53fc839..a1e9568cc2ad 100644
--- a/src/components/VideoPlayerPreview/index.js
+++ b/src/components/VideoPlayerPreview/index.tsx
@@ -1,6 +1,7 @@
-import PropTypes from 'prop-types';
+import type {VideoReadyForDisplayEvent} from 'expo-av';
 import React, {useEffect, useState} from 'react';
 import {View} from 'react-native';
+import type {GestureResponderEvent} from 'react-native';
 import * as Expensicons from '@components/Icon/Expensicons';
 import VideoPlayer from '@components/VideoPlayer';
 import IconButton from '@components/VideoPlayer/IconButton';
@@ -9,33 +10,34 @@ import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useThumbnailDimensions from '@hooks/useThumbnailDimensions';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import CONST from '@src/CONST';
 import VideoPlayerThumbnail from './VideoPlayerThumbnail';
 
-const propTypes = {
-    videoUrl: PropTypes.string.isRequired,
+type VideoDimensions = {
+    width: number;
+    height: number;
+};
 
-    videoDimensions: PropTypes.shape({
-        width: PropTypes.number.isRequired,
-        height: PropTypes.number.isRequired,
-    }),
+type VideoPlayerPreviewProps = {
+    /** Url to a video. */
+    videoUrl: string;
 
-    videoDuration: PropTypes.number,
+    /** Dimension of a video. */
+    videoDimensions: VideoDimensions;
 
-    thumbnailUrl: PropTypes.string,
+    /** Duration of a video. */
+    videoDuration: number;
 
-    fileName: PropTypes.string.isRequired,
+    /** Url to a thumbnail image. */
+    thumbnailUrl?: string;
 
-    onShowModalPress: PropTypes.func.isRequired,
-};
+    /** Name of a video file. */
+    fileName: string;
 
-const defaultProps = {
-    videoDimensions: CONST.VIDEO_PLAYER.DEFAULT_VIDEO_DIMENSIONS,
-    thumbnailUrl: undefined,
-    videoDuration: 0,
+    /** Callback executed when modal is pressed. */
+    onShowModalPress: (event?: GestureResponderEvent | KeyboardEvent) => void | Promise<void>;
 };
 
-function VideoPlayerPreview({videoUrl, thumbnailUrl, fileName, videoDimensions, videoDuration, onShowModalPress}) {
+function VideoPlayerPreview({videoUrl, thumbnailUrl, fileName, videoDimensions, videoDuration, onShowModalPress}: VideoPlayerPreviewProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {currentlyPlayingURL, updateCurrentlyPlayingURL} = usePlaybackContext();
@@ -44,8 +46,10 @@ function VideoPlayerPreview({videoUrl, thumbnailUrl, fileName, videoDimensions,
     const [measuredDimensions, setMeasuredDimensions] = useState(videoDimensions);
     const {thumbnailDimensionsStyles} = useThumbnailDimensions(measuredDimensions.width, measuredDimensions.height);
 
-    const onVideoLoaded = (e) => {
-        setMeasuredDimensions({width: e.srcElement.videoWidth, height: e.srcElement.videoHeight});
+    // `onVideoLoaded` is passed to VideoPlayerPreview's `Video` element which is displayed only on web.
+    // VideoReadyForDisplayEvent type is lacking srcElement, that's why it's added here
+    const onVideoLoaded = (event: VideoReadyForDisplayEvent & {srcElement: HTMLVideoElement}) => {
+        setMeasuredDimensions({width: event.srcElement.videoWidth, height: event.srcElement.videoHeight});
     };
 
     const handleOnPress = () => {
@@ -75,7 +79,7 @@ function VideoPlayerPreview({videoUrl, thumbnailUrl, fileName, videoDimensions,
                     <VideoPlayer
                         url={videoUrl}
                         onOpenInModalButtonPress={onShowModalPress}
-                        onVideoLoaded={onVideoLoaded}
+                        onVideoLoaded={onVideoLoaded as (event: VideoReadyForDisplayEvent) => void}
                         videoDuration={videoDuration}
                         shouldUseSmallVideoControls
                         style={[styles.w100, styles.h100]}
@@ -94,8 +98,6 @@ function VideoPlayerPreview({videoUrl, thumbnailUrl, fileName, videoDimensions,
     );
 }
 
-VideoPlayerPreview.propTypes = propTypes;
-VideoPlayerPreview.defaultProps = defaultProps;
 VideoPlayerPreview.displayName = 'VideoPlayerPreview';
 
 export default VideoPlayerPreview;
diff --git a/src/components/VideoPopoverMenu/index.js b/src/components/VideoPopoverMenu/index.js
deleted file mode 100644
index 01aaa8e35174..000000000000
--- a/src/components/VideoPopoverMenu/index.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import PopoverMenu from '@components/PopoverMenu';
-import {useVideoPopoverMenuContext} from '@components/VideoPlayerContexts/VideoPopoverMenuContext';
-
-const propTypes = {
-    isPopoverVisible: PropTypes.bool,
-
-    hidePopover: PropTypes.func,
-
-    anchorPosition: PropTypes.shape({
-        horizontal: PropTypes.number.isRequired,
-        vertical: PropTypes.number.isRequired,
-    }),
-};
-const defaultProps = {
-    isPopoverVisible: false,
-    anchorPosition: {
-        horizontal: 0,
-        vertical: 0,
-    },
-    hidePopover: () => {},
-};
-
-function VideoPopoverMenu({isPopoverVisible, hidePopover, anchorPosition}) {
-    const {menuItems} = useVideoPopoverMenuContext();
-
-    return (
-        <PopoverMenu
-            onClose={hidePopover}
-            onItemSelected={hidePopover}
-            isVisible={isPopoverVisible}
-            anchorPosition={anchorPosition}
-            menuItems={menuItems}
-            withoutOverlay
-        />
-    );
-}
-
-VideoPopoverMenu.propTypes = propTypes;
-VideoPopoverMenu.defaultProps = defaultProps;
-VideoPopoverMenu.displayName = 'VideoPopoverMenu';
-
-export default VideoPopoverMenu;
diff --git a/src/components/VideoPopoverMenu/index.tsx b/src/components/VideoPopoverMenu/index.tsx
new file mode 100644
index 000000000000..aad6364f91df
--- /dev/null
+++ b/src/components/VideoPopoverMenu/index.tsx
@@ -0,0 +1,44 @@
+import React, {useRef} from 'react';
+import type {View} from 'react-native';
+import type {PopoverMenuItem} from '@components/PopoverMenu';
+import PopoverMenu from '@components/PopoverMenu';
+import {useVideoPopoverMenuContext} from '@components/VideoPlayerContexts/VideoPopoverMenuContext';
+import type {AnchorPosition} from '@styles/index';
+
+type VideoPopoverMenuProps = {
+    /** Whether  popover menu is visible. */
+    isPopoverVisible?: boolean;
+
+    /** Callback executed to hide popover when an item is selected. */
+    hidePopover?: (selectedItem?: PopoverMenuItem, index?: number) => void;
+
+    /** The horizontal and vertical anchors points for the popover.  */
+    anchorPosition?: AnchorPosition;
+};
+
+function VideoPopoverMenu({
+    isPopoverVisible = false,
+    hidePopover = () => {},
+    anchorPosition = {
+        horizontal: 0,
+        vertical: 0,
+    },
+}: VideoPopoverMenuProps) {
+    const {menuItems} = useVideoPopoverMenuContext();
+    const videoPlayerMenuRef = useRef<View | HTMLDivElement>(null);
+
+    return (
+        <PopoverMenu
+            onClose={hidePopover}
+            onItemSelected={hidePopover}
+            isVisible={isPopoverVisible}
+            anchorPosition={anchorPosition}
+            menuItems={menuItems}
+            anchorRef={videoPlayerMenuRef}
+            withoutOverlay
+        />
+    );
+}
+VideoPopoverMenu.displayName = 'VideoPopoverMenu';
+
+export default VideoPopoverMenu;