[TS migration] Migrate VideoPlayerPreview, VideoPlayerControls and VideoPopoverMenu component files to TypeScript

src/components/VideoPlayerPreview/VideoPlayerThumbnail.js → src/components/VideoPlayerPreview/VideoPlayerThumbnail.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import Icon from '@components/Icon';
@@ -12,20 +11,9 @@ import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as ReportUtils from '@libs/ReportUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
+import type {VideoPlayerThumbnailProps} from './types';
 
-const propTypes = {
-    onPress: PropTypes.func.isRequired,
-
-    accessibilityLabel: PropTypes.string.isRequired,
-
-    thumbnailUrl: PropTypes.string,
-};
-
-const defaultProps = {
-    thumbnailUrl: undefined,
-};
-
-function VideoPlayerThumbnail({thumbnailUrl, onPress, accessibilityLabel}) {
+function VideoPlayerThumbnail({thumbnailUrl = undefined, onPress, accessibilityLabel}: VideoPlayerThumbnailProps) {
     const styles = useThemeStyles();
 
     return (
@@ -48,9 +36,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))}
                     >
                         <View style={[styles.videoThumbnailPlayButton]}>
                             <Icon
@@ -68,8 +54,6 @@ function VideoPlayerThumbnail({thumbnailUrl, onPress, accessibilityLabel}) {
     );
 }
 
-VideoPlayerThumbnail.propTypes = propTypes;
-VideoPlayerThumbnail.defaultProps = defaultProps;
 VideoPlayerThumbnail.displayName = 'VideoPlayerThumbnail';
 
 export default VideoPlayerThumbnail;

src/components/VideoPlayerPreview/index.js → src/components/VideoPlayerPreview/index.tsx

@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types';
+import type {VideoReadyForDisplayEvent} from 'expo-av';
 import React, {useEffect, useState} from 'react';
 import {View} from 'react-native';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -10,32 +10,17 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import useThumbnailDimensions from '@hooks/useThumbnailDimensions';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import CONST from '@src/CONST';
+import type {VideoPlayerPreviewProps} from './types';
 import VideoPlayerThumbnail from './VideoPlayerThumbnail';
 
-const propTypes = {
-    videoUrl: PropTypes.string.isRequired,
-
-    videoDimensions: PropTypes.shape({
-        width: PropTypes.number.isRequired,
-        height: PropTypes.number.isRequired,
-    }),
-
-    videoDuration: PropTypes.number,
-
-    thumbnailUrl: PropTypes.string,
-
-    fileName: PropTypes.string.isRequired,
-
-    onShowModalPress: PropTypes.func.isRequired,
-};
-
-const defaultProps = {
-    videoDimensions: CONST.VIDEO_PLAYER.DEFAULT_VIDEO_DIMENSIONS,
-    thumbnailUrl: undefined,
-    videoDuration: 0,
-};
-
-function VideoPlayerPreview({videoUrl, thumbnailUrl, fileName, videoDimensions, videoDuration, onShowModalPress}) {
+function VideoPlayerPreview({
+    videoUrl,
+    thumbnailUrl = undefined,
+    fileName,
+    videoDimensions = CONST.VIDEO_PLAYER.DEFAULT_VIDEO_DIMENSIONS,
+    videoDuration = 0,
+    onShowModalPress,
+}: VideoPlayerPreviewProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {currentlyPlayingURL, updateCurrentlyPlayingURL} = usePlaybackContext();
@@ -44,8 +29,8 @@ 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});
+    const onVideoLoaded = (event: VideoReadyForDisplayEvent & {srcElement: HTMLVideoElement}) => {
+        setMeasuredDimensions({width: event.srcElement.videoWidth, height: event.srcElement.videoHeight});
     };
 
     const handleOnPress = () => {
@@ -75,7 +60,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 +79,6 @@ function VideoPlayerPreview({videoUrl, thumbnailUrl, fileName, videoDimensions,
     );
 }
 
-VideoPlayerPreview.propTypes = propTypes;
-VideoPlayerPreview.defaultProps = defaultProps;
 VideoPlayerPreview.displayName = 'VideoPlayerPreview';
 
 export default VideoPlayerPreview;

src/components/VideoPlayerPreview/types.ts

@@ -0,0 +1,26 @@
+import type {GestureResponderEvent} from 'react-native';
+
+type VideoPlayerThumbnailProps = {
+    thumbnailUrl: string | undefined;
+    onPress: (event?: GestureResponderEvent | KeyboardEvent) => void | Promise<void>;
+    accessibilityLabel: string;
+};
+
+type VideoPlayerPreviewProps = {
+    videoUrl: string;
+
+    videoDimensions: {
+        width: number;
+        height: number;
+    };
+
+    videoDuration: number;
+
+    thumbnailUrl?: string;
+
+    fileName: string;
+
+    onShowModalPress: (event?: GestureResponderEvent | KeyboardEvent) => void | Promise<void>;
+};
+
+export type {VideoPlayerThumbnailProps, VideoPlayerPreviewProps};