Fix download progress (#1367)

apps/photos/src/components/PhotoFrame.tsx

@@ -538,7 +538,9 @@ const PhotoFrame = ({
             // ignore
         }
         try {
-            addLogLine(`[${item.id}] new file getConvertedVideo request`);
+            addLogLine(
+                `[${item.id}] new file getConvertedVideo request- ${item.metadata.title}}`
+            );
             fetching[item.id] = true;
             if (!filesStore.has(item.id)) {
                 addLogLine(
@@ -559,13 +561,14 @@ const PhotoFrame = ({
             } else {
                 originalVideoURL = srcURL.original.split(',')[1];
             }
-            const convertedVideoURL = URL.createObjectURL(
-                await getPlayableVideo(
+            const playableVideo = await getPlayableVideo(
                 item.metadata.title,
                 await (await fetch(originalVideoURL)).blob(),
                 true
-                )
             );
+            const convertedVideoURL = playableVideo
+                ? URL.createObjectURL(playableVideo)
+                : '';
             if (item.metadata.fileType === FILE_TYPE.VIDEO) {
                 srcURL.converted = convertedVideoURL;
             } else {

apps/photos/src/components/PhotoViewer/index.tsx

@@ -50,6 +50,7 @@ import CircularProgressWithLabel from './styledComponents/CircularProgressWithLa
 import EnteSpinner from 'components/EnteSpinner';
 import AlbumOutlined from '@mui/icons-material/AlbumOutlined';
 import { FlexWrapper } from 'components/Container';
+import isElectron from 'is-electron';
 
 interface PhotoswipeFullscreenAPI {
     enter: () => void;
@@ -298,6 +299,7 @@ function PhotoViewer(props: Iprops) {
 
     function updateShowConvertBtn(file: EnteFile) {
         const shouldShowConvertBtn =
+            isElectron() &&
             (file.metadata.fileType === FILE_TYPE.VIDEO ||
                 file.metadata.fileType === FILE_TYPE.LIVE_PHOTO) &&
             !file.isConverted &&

apps/photos/src/services/downloadManager.ts

@@ -188,7 +188,10 @@ class DownloadManager {
             if (!token) {
                 return null;
             }
-            const onDownloadProgress = this.trackDownloadProgress(file.id);
+            const onDownloadProgress = this.trackDownloadProgress(
+                file.id,
+                file.info?.fileSize
+            );
             if (
                 file.metadata.fileType === FILE_TYPE.IMAGE ||
                 file.metadata.fileType === FILE_TYPE.LIVE_PHOTO
@@ -205,6 +208,7 @@ class DownloadManager {
                         }
                     )
                 );
+                this.clearDownloadProgress(file.id);
                 if (typeof resp.data === 'undefined') {
                     throw Error(CustomError.REQUEST_FAILED);
                 }
@@ -240,7 +244,7 @@ class DownloadManager {
             );
             const reader = resp.body.getReader();
 
-            const contentLength = +resp.headers.get('Content-Length');
+            const contentLength = +resp.headers.get('Content-Length') ?? 0;
             let downloadedBytes = 0;
 
             const stream = new ReadableStream({
@@ -386,8 +390,14 @@ class DownloadManager {
         }
     }
 
-    trackDownloadProgress = (fileID: number) => {
+    trackDownloadProgress = (fileID: number, fileSize: number) => {
         return (event: { loaded: number; total: number }) => {
+            if (isNaN(event.total) || event.total === 0) {
+                if (!fileSize) {
+                    return;
+                }
+                event.total = fileSize;
+            }
             if (event.loaded === event.total) {
                 this.fileDownloadProgress.delete(fileID);
             } else {
@@ -399,6 +409,11 @@ class DownloadManager {
             this.progressUpdater(new Map(this.fileDownloadProgress));
         };
     };
+
+    clearDownloadProgress = (fileID: number) => {
+        this.fileDownloadProgress.delete(fileID);
+        this.progressUpdater(new Map(this.fileDownloadProgress));
+    };
 }
 
 export default new DownloadManager();

apps/photos/src/utils/file/index.ts

@@ -386,7 +386,8 @@ async function getRenderableLivePhotoURL(
     );
     const convertedVideoBlob = await getPlayableVideo(
         livePhoto.videoNameTitle,
-        videoBlob
+        videoBlob,
+        true
     );
     const { originalURL: originalImageURL, convertedURL: convertedImageURL } =
         getFileObjectURLs(imageBlob, convertedImageBlob);
@@ -411,13 +412,21 @@ export async function getPlayableVideo(
         if (isPlayable && !forceConvert) {
             return videoBlob;
         } else {
-            addLogLine('video format not supported, converting it');
+            if (!forceConvert && !isElectron()) {
+                return null;
+            }
+            addLogLine(
+                'video format not supported, converting it name:',
+                videoNameTitle
+            );
             const mp4ConvertedVideo = await ffmpegService.convertToMP4(
                 new File([videoBlob], videoNameTitle)
             );
+            addLogLine('video successfully converted', videoNameTitle);
             return new Blob([await mp4ConvertedVideo.arrayBuffer()]);
         }
     } catch (e) {
+        addLogLine('video conversion failed', videoNameTitle);
         logError(e, 'video conversion failed');
         return null;
     }