Merge pull request #410 from ente-io/master

release

src/components/PhotoFrame.tsx

@@ -244,18 +244,15 @@ const PhotoFrame = ({
     }, [open]);
 
     const updateURL = (index: number) => (url: string) => {
-        files[index] = {
+        const updateFile = (file: EnteFile) => {
-            ...files[index],
+            file = {
+                ...file,
                 msrc: url,
-            src: files[index].src ? files[index].src : url,
                 w: window.innerWidth,
                 h: window.innerHeight,
             };
-        if (
+            if (file.metadata.fileType === FILE_TYPE.VIDEO && !file.html) {
-            files[index].metadata.fileType === FILE_TYPE.VIDEO &&
+                file.html = `
-            !files[index].html
-        ) {
-            files[index].html = `
                 <div class="video-loading">
                     <img src="${url}" />
                     <div class="spinner-border text-light" role="status">
@@ -263,46 +260,59 @@ const PhotoFrame = ({
                     </div>
                 </div>
             `;
-            delete files[index].src;
+            } else if (
-        }
+                (file.metadata.fileType === FILE_TYPE.IMAGE ||
-        if (
+                    file.metadata.fileType === FILE_TYPE.LIVE_PHOTO) &&
-            files[index].metadata.fileType === FILE_TYPE.IMAGE &&
+                !file.src
-            !files[index].src
             ) {
-            files[index].src = url;
+                file.src = url;
             }
-        setFiles(files);
+            return file;
+        };
+        setFiles((files) => {
+            files[index] = updateFile(files[index]);
+            return [...files];
+        });
+        return updateFile(files[index]);
     };
 
     const updateSrcURL = async (index: number, url: string) => {
-        files[index] = {
+        const isPlayable = await isPlaybackPossible(url);
-            ...files[index],
+        const updateFile = (file: EnteFile) => {
+            file = {
+                ...file,
                 w: window.innerWidth,
                 h: window.innerHeight,
             };
-        if (files[index].metadata.fileType === FILE_TYPE.VIDEO) {
+            if (file.metadata.fileType === FILE_TYPE.VIDEO) {
-            if (await isPlaybackPossible(url)) {
+                if (isPlayable) {
-                files[index].html = `
+                    file.html = `
             <video controls>
                 <source src="${url}" />
                 Your browser does not support the video tag.
             </video>
         `;
                 } else {
-                files[index].html = `
+                    file.html = `
             <div class="video-loading">
-                    <img src="${files[index].msrc}" />
+                <img src="${file.msrc}" />
                 <div class="download-message" >
                     ${constants.VIDEO_PLAYBACK_FAILED_DOWNLOAD_INSTEAD}
-                        <a class="btn btn-outline-success" href=${url} download="${files[index].metadata.title}"">Download</button>
+                    <a class="btn btn-outline-success" href=${url} download="${file.metadata.title}"">Download</button>
                 </div>
             </div>
             `;
                 }
             } else {
-            files[index].src = url;
+                file.src = url;
             }
-        setFiles(files);
+            return file;
+        };
+        setFiles((files) => {
+            files[index] = updateFile(files[index]);
+            return [...files];
+        });
+        return updateFile(files[index]);
     };
 
     const handleClose = (needUpdate) => {
@@ -418,13 +428,13 @@ const PhotoFrame = ({
                     }
                     galleryContext.thumbs.set(item.id, url);
                 }
-                updateURL(item.dataIndex)(url);
+                const newFile = updateURL(item.dataIndex)(url);
-                item.msrc = url;
+                item.msrc = newFile.msrc;
-                if (!item.src) {
+                item.html = newFile.html;
-                    item.src = url;
+                item.src = newFile.src;
-                }
+                item.w = newFile.w;
-                item.w = window.innerWidth;
+                item.h = newFile.h;
-                item.h = window.innerHeight;
+
                 try {
                     instance.invalidateCurrItems();
                     instance.updateSize(true);
@@ -442,6 +452,7 @@ const PhotoFrame = ({
                 if (galleryContext.files.has(item.id)) {
                     url = galleryContext.files.get(item.id);
                 } else {
+                    galleryContext.startLoading();
                     if (
                         publicCollectionGalleryContext.accessedThroughSharedURL
                     ) {
@@ -454,13 +465,15 @@ const PhotoFrame = ({
                     } else {
                         url = await DownloadManager.getFile(item, true);
                     }
+                    galleryContext.finishLoading();
                     galleryContext.files.set(item.id, url);
                 }
-                await updateSrcURL(item.dataIndex, url);
+                const newFile = await updateSrcURL(item.dataIndex, url);
-                item.html = files[item.dataIndex].html;
+                item.msrc = newFile.msrc;
-                item.src = files[item.dataIndex].src;
+                item.html = newFile.html;
-                item.w = files[item.dataIndex].w;
+                item.src = newFile.src;
-                item.h = files[item.dataIndex].h;
+                item.w = newFile.w;
+                item.h = newFile.h;
                 try {
                     instance.invalidateCurrItems();
                     instance.updateSize(true);

src/components/PhotoSwipe/PhotoSwipe.tsx

@@ -490,7 +490,8 @@ function InfoModal({
 
 function PhotoSwipe(props: Iprops) {
     const pswpElement = useRef<HTMLDivElement>();
-    const [photoSwipe, setPhotoSwipe] = useState<Photoswipe<any>>();
+    const [photoSwipe, setPhotoSwipe] =
+        useState<Photoswipe<Photoswipe.Options>>();
 
     const { isOpen, items } = props;
     const [isFav, setIsFav] = useState(false);

src/components/pages/gallery/PreviewCard.tsx

@@ -164,7 +164,7 @@ const Cont = styled.div<{ disabled: boolean; selected: boolean }>`
 
 export default function PreviewCard(props: IProps) {
     const [imgSrc, setImgSrc] = useState<string>();
-    const { thumbs, files } = useContext(GalleryContext);
+    const { thumbs } = useContext(GalleryContext);
     const {
         file,
         onClick,
@@ -203,10 +203,6 @@ export default function PreviewCard(props: IProps) {
                     if (isMounted.current) {
                         setImgSrc(url);
                         thumbs.set(file.id, url);
-                        file.msrc = url;
-                        if (!file.src) {
-                            file.src = url;
-                        }
                         updateURL(url);
                     }
                 } catch (e) {
@@ -218,13 +214,6 @@ export default function PreviewCard(props: IProps) {
                 const thumbImgSrc = thumbs.get(file.id);
                 setImgSrc(thumbImgSrc);
                 file.msrc = thumbImgSrc;
-                if (!file.src) {
-                    if (files.has(file.id)) {
-                        file.src = files.get(file.id);
-                    } else {
-                        file.src = thumbImgSrc;
-                    }
-                }
             } else {
                 main();
             }

src/services/fileService.ts

@@ -6,9 +6,15 @@ import { EncryptionResult } from 'types/upload';
 import { Collection } from 'types/collection';
 import HTTPService from './HTTPService';
 import { logError } from 'utils/sentry';
-import { decryptFile, mergeMetadata, sortFiles } from 'utils/file';
+import {
+    decryptFile,
+    mergeMetadata,
+    preservePhotoswipeProps,
+    sortFiles,
+} from 'utils/file';
 import CryptoWorker from 'utils/crypto';
 import { EnteFile, TrashRequest, UpdateMagicMetadataRequest } from 'types/file';
+import { SetFiles } from 'types/gallery';
 
 const ENDPOINT = getEndpoint();
 const FILES_TABLE = 'files';
@@ -28,13 +34,13 @@ const getCollectionLastSyncTime = async (collection: Collection) =>
 
 export const syncFiles = async (
     collections: Collection[],
-    setFiles: (files: EnteFile[]) => void
+    setFiles: SetFiles
 ) => {
     const localFiles = await getLocalFiles();
     let files = await removeDeletedCollectionFiles(collections, localFiles);
     if (files.length !== localFiles.length) {
         await setLocalFiles(files);
-        setFiles([...sortFiles(mergeMetadata(files))]);
+        setFiles(preservePhotoswipeProps([...sortFiles(mergeMetadata(files))]));
     }
     for (const collection of collections) {
         if (!getToken()) {
@@ -70,7 +76,7 @@ export const syncFiles = async (
             `${collection.id}-time`,
             collection.updationTime
         );
-        setFiles([...sortFiles(mergeMetadata(files))]);
+        setFiles(preservePhotoswipeProps([...sortFiles(mergeMetadata(files))]));
     }
     return sortFiles(mergeMetadata(files));
 };
@@ -79,7 +85,7 @@ export const getFiles = async (
     collection: Collection,
     sinceTime: number,
     files: EnteFile[],
-    setFiles: (files: EnteFile[]) => void
+    setFiles: SetFiles
 ): Promise<EnteFile[]> => {
     try {
         const decryptedFiles: EnteFile[] = [];
@@ -116,6 +122,7 @@ export const getFiles = async (
                 time = resp.data.diff.slice(-1)[0].updationTime;
             }
             setFiles(
+                preservePhotoswipeProps(
                     sortFiles(
                         mergeMetadata(
                             [...(files || []), ...decryptedFiles].filter(
@@ -123,6 +130,7 @@ export const getFiles = async (
                             )
                         )
                     )
+                )
             );
         } while (resp.data.hasMore);
         return decryptedFiles;

src/services/trashService.ts

@@ -2,7 +2,12 @@ import { SetFiles } from 'types/gallery';
 import { Collection } from 'types/collection';
 import { getEndpoint } from 'utils/common/apiUtil';
 import { getToken } from 'utils/common/key';
-import { decryptFile, mergeMetadata, sortFiles } from 'utils/file';
+import {
+    decryptFile,
+    mergeMetadata,
+    preservePhotoswipeProps,
+    sortFiles,
+} from 'utils/file';
 import { logError } from 'utils/sentry';
 import localForage from 'utils/storage/localForage';
 import { getCollection } from './collectionService';
@@ -120,7 +125,12 @@ export const updateTrash = async (
             updatedTrash = removeRestoredOrDeletedTrashItems(updatedTrash);
 
             setFiles(
-                sortFiles([...(files ?? []), ...getTrashedFiles(updatedTrash)])
+                preservePhotoswipeProps(
+                    sortFiles([
+                        ...(files ?? []),
+                        ...getTrashedFiles(updatedTrash),
+                    ])
+                )
             );
             await localForage.setItem(TRASH, updatedTrash);
             await localForage.setItem(TRASH_TIME, time);

src/services/upload/uploadManager.ts

@@ -5,7 +5,7 @@ import { getDedicatedCryptoWorker } from 'utils/crypto';
 import {
     sortFilesIntoCollections,
     sortFiles,
-    removeUnnecessaryFileProps,
+    preservePhotoswipeProps,
 } from 'utils/file';
 import { logError } from 'utils/sentry';
 import { getMetadataJSONMapKey, parseMetadataJSON } from './metadataService';
@@ -239,10 +239,8 @@ class UploadManager {
             if (fileUploadResult === FileUploadResults.UPLOADED) {
                 this.existingFiles.push(file);
                 this.existingFiles = sortFiles(this.existingFiles);
-                await setLocalFiles(
+                await setLocalFiles(this.existingFiles);
-                    removeUnnecessaryFileProps(this.existingFiles)
+                this.setFiles(preservePhotoswipeProps(this.existingFiles));
-                );
-                this.setFiles(this.existingFiles);
                 if (!this.existingFilesCollectionWise.has(file.collectionID)) {
                     this.existingFilesCollectionWise.set(file.collectionID, []);
                 }

src/utils/file/index.ts

@@ -281,20 +281,18 @@ export async function decryptFile(file: EnteFile, collectionKey: string) {
     }
 }
 
-export function removeUnnecessaryFileProps(files: EnteFile[]): EnteFile[] {
+export const preservePhotoswipeProps =
-    const stripedFiles = files.map((file) => {
+    (newFiles: EnteFile[]) =>
-        delete file.src;
+    (currentFiles: EnteFile[]): EnteFile[] => {
-        delete file.msrc;
+        const currentFilesMap = Object.fromEntries(
-        delete file.file.objectKey;
+            currentFiles.map((file) => [file.id, file])
-        delete file.thumbnail.objectKey;
+        );
-        delete file.h;
+        const fileWithPreservedProperty = newFiles.map((file) => {
-        delete file.html;
+            const currentFile = currentFilesMap[file.id];
-        delete file.w;
+            return { ...currentFile, ...file };
-
-        return file;
         });
-    return stripedFiles;
+        return fileWithPreservedProperty;
-}
+    };
 
 export function fileNameWithoutExtension(filename) {
     const lastDotPosition = filename.lastIndexOf('.');