Fix not showing duration while loading

Expensify · Feb 8, 2024 · 699e302 · 699e302
1 parent 7a858b7
commit 699e302
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 3 deletions.
diff --git a/src/components/Attachments/AttachmentCarousel/CarouselItem.js b/src/components/Attachments/AttachmentCarousel/CarouselItem.js
@@ -35,6 +35,8 @@ const propTypes = {
 
         /** The id of the transaction related to the attachment */
         transactionID: PropTypes.string,
+
+        duration: PropTypes.number,
     }).isRequired,
 
     /** Whether there is only one element in the attachment carousel */
@@ -118,6 +120,7 @@ function CarouselItem({item, index, activeIndex, isSingleItem, onPress, isFocuse
                     transactionID={item.transactionID}
                     isHovered={isModalHovered}
                     isFocused={isFocused}
+                    optionalVideoDuration={item.duration}
                 />
             </View>
 

diff --git a/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js b/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js
@@ -25,6 +25,7 @@ function extractAttachmentsFromReport(parentReportAction, reportActions) {
                     source: tryResolveUrlFromApiRoot(attribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE]),
                     isAuthTokenRequired: Boolean(attribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE]),
                     file: {name: splittedUrl[splittedUrl.length - 1]},
+                    duration: Number(attribs[CONST.ATTACHMENT_DURATION_ATTRIBUTE]),
                     isReceipt: false,
                     hasBeenFlagged: false,
                 });

diff --git a/src/components/Attachments/AttachmentView/AttachmentViewVideo/index.js b/src/components/Attachments/AttachmentView/AttachmentViewVideo/index.js
@@ -11,21 +11,25 @@ const propTypes = {
     isHovered: PropTypes.bool,
 
     shouldUseSharedVideoElement: PropTypes.bool,
+
+    videoDuration: PropTypes.number,
 };
 
 const defaultProps = {
     isHovered: false,
     shouldUseSharedVideoElement: false,
+    videoDuration: 0,
 };
 
-function AttachmentViewVideo({source, isHovered, shouldUseSharedVideoElement}) {
+function AttachmentViewVideo({source, isHovered, shouldUseSharedVideoElement, videoDuration}) {
     const {isSmallScreenWidth} = useWindowDimensions();
 
     return (
         <VideoPlayer
             url={source}
             shouldUseSharedVideoElement={shouldUseSharedVideoElement && !isSmallScreenWidth}
             isVideoHovered={isHovered}
+            videoDuration={videoDuration}
         />
     );
 }

diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js
@@ -58,6 +58,8 @@ const propTypes = {
     transactionID: PropTypes.string,
 
     isHovered: PropTypes.bool,
+
+    optionalVideoDuration: PropTypes.number,
 };
 
 const defaultProps = {
@@ -70,6 +72,7 @@ const defaultProps = {
     maybeIcon: false,
     transactionID: '',
     isHovered: false,
+    optionalVideoDuration: 0,
 };
 
 function AttachmentView({
@@ -93,6 +96,7 @@ function AttachmentView({
     fallbackSource,
     transaction,
     isHovered,
+    optionalVideoDuration,
 }) {
     const {updateCurrentlyPlayingURL} = usePlaybackContext();
     const theme = useTheme();
@@ -206,11 +210,13 @@ function AttachmentView({
     }
 
     if (isVideo || (file && Str.isVideo(file.name))) {
+        console.log({optionalVideoDuration});
         return (
             <AttachmentViewVideo
                 source={source}
                 shouldUseSharedVideoElement={isUsedInCarousel}
                 isHovered={isHovered}
+                videoDuration={optionalVideoDuration}
             />
         );
     }

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.js
@@ -23,6 +23,7 @@ function VideoRenderer(props) {
     const duration = Number(htmlAttribs[CONST.ATTACHMENT_DURATION_ATTRIBUTE]);
     const activeRoute = Navigation.getActiveRoute();
     const {reportID} = parseReportRouteParams(activeRoute);
+    console.log({duration});
     return (
         <VideoPlayerPreview
             videoUrl={sourceURL}

diff --git a/src/components/VideoPlayer/BaseVideoPlayer.js b/src/components/VideoPlayer/BaseVideoPlayer.js
@@ -35,7 +35,7 @@ function BaseVideoPlayer({
     const styles = useThemeStyles();
     const {isSmallScreenWidth} = useWindowDimensions();
     const {playVideo, currentlyPlayingURL, updateSharedElements, sharedElement, originalParent, shareVideoPlayerElements, currentVideoPlayerRef} = usePlaybackContext();
-    const [duration, setDuration] = useState(videoDuration);
+    const [duration, setDuration] = useState(videoDuration * 1000);
     const [position, setPosition] = useState(0);
     const [isPlaying, setIsPlaying] = useState(false);
     const [isLoading, setIsLoading] = useState(true);
@@ -61,7 +61,7 @@ function BaseVideoPlayer({
         const isVideoPlaying = e.isPlaying || false;
         setIsPlaying(isVideoPlaying);
         setIsLoading(Number.isNaN(e.durationMillis)); // when video is ready to display duration is not NaN
-        setDuration(e.durationMillis || 0);
+        setDuration(e.durationMillis || videoDuration * 1000);
         setPosition(e.positionMillis || 0);
     }, []);