From 699e3025924e5484bfd0433d6f037dfde230b2bb Mon Sep 17 00:00:00 2001
From: Kamil Owczarz <kamil.owczarz@swmansion.com>
Date: Thu, 8 Feb 2024 15:36:02 +0100
Subject: [PATCH] Fix not showing duration while loading

---
 .../Attachments/AttachmentCarousel/CarouselItem.js          | 3 +++
 .../AttachmentCarousel/extractAttachmentsFromReport.js      | 1 +
 .../Attachments/AttachmentView/AttachmentViewVideo/index.js | 6 +++++-
 src/components/Attachments/AttachmentView/index.js          | 6 ++++++
 .../HTMLEngineProvider/HTMLRenderers/VideoRenderer.js       | 1 +
 src/components/VideoPlayer/BaseVideoPlayer.js               | 4 ++--
 6 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/Attachments/AttachmentCarousel/CarouselItem.js b/src/components/Attachments/AttachmentCarousel/CarouselItem.js
index 5fcb0012d03d..8ce6ac3c0f9d 100644
--- 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
index 42e32489bbf4..b934bdfdd738 100644
--- 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
index 951e86385128..93ea0f75e5ea 100644
--- a/src/components/Attachments/AttachmentView/AttachmentViewVideo/index.js
+++ b/src/components/Attachments/AttachmentView/AttachmentViewVideo/index.js
@@ -11,14 +11,17 @@ 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 (
@@ -26,6 +29,7 @@ function AttachmentViewVideo({source, isHovered, shouldUseSharedVideoElement}) {
             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
index 3c5e592b8ff6..fdc566e6aba8 100755
--- 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
index 3064bd780b89..7004e02e2096 100644
--- 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
index 9e221c0f05b4..f9fa8041ca8f 100644
--- 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);
     }, []);