Merge pull request Expensify#38302 from software-mansion-labs/@Skalak…

…id/fix-ios-safari-video-thumbnails

Fix video file preview not displaying after selecting video from device gallery

src/components/VideoPlayer/BaseVideoPlayer.js

@@ -15,6 +15,7 @@ import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import CONST from '@src/CONST';
 import {videoPlayerDefaultProps, videoPlayerPropTypes} from './propTypes';
 import shouldReplayVideo from './shouldReplayVideo';
+import * as VideoUtils from './utils';
 import VideoPlayerControls from './VideoPlayerControls';
 
 const isMobileSafari = Browser.isMobileSafari();
@@ -49,7 +50,8 @@ function BaseVideoPlayer({
     const [isPlaying, setIsPlaying] = useState(false);
     const [isLoading, setIsLoading] = useState(true);
     const [isBuffering, setIsBuffering] = useState(true);
-    const [sourceURL] = useState(url.includes('blob:') || url.includes('file:///') ? url : addEncryptedAuthTokenToURL(url));
+    // we add "#t=0.001" at the end of the URL to skip first milisecond of the video and always be able to show proper video preview when video is paused at the beginning
+    const [sourceURL] = useState(VideoUtils.addSkipTimeTagToURL(url.includes('blob:') || url.includes('file:///') ? url : addEncryptedAuthTokenToURL(url), 0.001));
     const [isPopoverVisible, setIsPopoverVisible] = useState(false);
     const [popoverAnchorPosition, setPopoverAnchorPosition] = useState({horizontal: 0, vertical: 0});
     const videoPlayerRef = useRef(null);

src/components/VideoPlayer/VideoPlayerControls/index.js

@@ -6,7 +6,7 @@ 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 {convertMillisecondsToTime} from '@components/VideoPlayer/utils';
 import {usePlaybackContext} from '@components/VideoPlayerContexts/PlaybackContext';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';

src/components/VideoPlayer/utils.ts

@@ -1,11 +1,23 @@
-// Converts milliseconds to '[hours:]minutes:seconds' format
-const convertMillisecondsToTime = (milliseconds: number) => {
+/**
+ * Converts milliseconds to '[hours:]minutes:seconds' format
+ */
+function convertMillisecondsToTime(milliseconds: number) {
     const hours = Math.floor(milliseconds / 3600000);
     const minutes = Math.floor((milliseconds / 60000) % 60);
     const seconds = Math.floor((milliseconds / 1000) % 60)
         .toFixed(0)
         .padStart(2, '0');
     return hours > 0 ? `${hours}:${String(minutes).padStart(2, '0')}:${seconds}` : `${minutes}:${seconds}`;
-};
+}
 
-export default convertMillisecondsToTime;
+/**
+ * Adds a #t=seconds tag to the end of the URL to skip first seconds of the video
+ */
+function addSkipTimeTagToURL(url: string, seconds: number) {
+    if (url.includes('#t=')) {
+        return url;
+    }
+    return `${url}#t=${seconds}`;
+}
+
+export {convertMillisecondsToTime, addSkipTimeTagToURL};