diff --git a/src/components/VideoPlayerPreview/index.tsx b/src/components/VideoPlayerPreview/index.tsx index 5edb2977ce23..6c6bd194d3e2 100644 --- a/src/components/VideoPlayerPreview/index.tsx +++ b/src/components/VideoPlayerPreview/index.tsx @@ -13,7 +13,9 @@ import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import useThumbnailDimensions from '@hooks/useThumbnailDimensions'; +import getPlatform from '@libs/getPlatform'; import Navigation from '@navigation/Navigation'; +import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import VideoPlayerThumbnail from './VideoPlayerThumbnail'; @@ -65,6 +67,32 @@ function VideoPlayerPreview({videoUrl, thumbnailUrl, reportID, fileName, videoDi const isOnSearch = useIsOnSearch(); const navigation = useNavigation(); + useEffect(() => { + const platform = getPlatform(); + // On web and desktop platforms, we can use the DOM video element to get accurate video dimensions + // by loading the video metadata. On mobile platforms, we rely on the provided videoDimensions + // since document.createElement is not available in React Native environments. + if (videoUrl && (platform === CONST.PLATFORM.WEB || platform === CONST.PLATFORM.DESKTOP)) { + const video = document.createElement('video'); + video.onloadedmetadata = () => { + if (video.videoWidth === measuredDimensions.width && video.videoHeight === measuredDimensions.height) { + return; + } + setMeasuredDimensions({ + width: video.videoWidth, + height: video.videoHeight, + }); + }; + video.src = videoUrl; + video.load(); + + return () => { + video.src = ''; + }; + } + setMeasuredDimensions(videoDimensions); + }, [videoUrl, measuredDimensions.width, measuredDimensions.height, videoDimensions]); + // We want to play the video only when the user is on the page where it was initially rendered const doesUserRemainOnFirstRenderRoute = useCheckIfRouteHasRemainedUnchanged(videoUrl);