Merge branch 'master'

2022-03-03 00:00:01 +05:30 · 2022-03-03 00:00:01 +05:30 · 5c40812b4c
parent 70084fdc80 913a3a65aa
commit 5c40812b4c
8 changed files with 142 additions and 123 deletions
--- a/src/components/PhotoFrame.tsx
+++ b/src/components/PhotoFrame.tsx
@ -250,18 +250,15 @@ const PhotoFrame = ({
    }, [open]);

    const updateURL = (index: number) => (url: string) => {
-        files[index] = {
-            ...files[index],
-            msrc: url,
-            src: files[index].src ? files[index].src : url,
-            w: window.innerWidth,
-            h: window.innerHeight,
-        };
-        if (
-            files[index].metadata.fileType === FILE_TYPE.VIDEO &&
-            !files[index].html
-        ) {
-            files[index].html = `
+        const updateFile = (file: EnteFile) => {
+            file = {
+                ...file,
+                msrc: url,
+                w: window.innerWidth,
+                h: window.innerHeight,
+            };
+            if (file.metadata.fileType === FILE_TYPE.VIDEO && !file.html) {
+                file.html = `
                <div class="video-loading">
                    <img src="${url}" />
                    <div class="spinner-border text-light" role="status">
@ -269,84 +266,94 @@ const PhotoFrame = ({
                    </div>
                </div>
            `;
-            delete files[index].src;
-        } else if (
-            files[index].metadata.fileType === FILE_TYPE.LIVE_PHOTO &&
-            !files[index].html
-        ) {
-            files[index].html = `
-                <div class='video-loading'>
+            } else if (
+                file.metadata.fileType === FILE_TYPE.LIVE_PHOTO &&
+                !file.html
+            ) {
+                file.html = `
+                <div class="video-loading">
                    <img src="${url}" />
                    <div class="spinner-border text-light" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
            `;
-            delete files[index].src;
-        }
-        if (
-            files[index].metadata.fileType === FILE_TYPE.IMAGE &&
-            !files[index].src
-        ) {
-            files[index].src = url;
-        }
-        setFiles(files);
+            } else if (
+                file.metadata.fileType === FILE_TYPE.IMAGE &&
+                !file.src
+            ) {
+                file.src = url;
+            }
+            return file;
+        };
+        setFiles((files) => {
+            files[index] = updateFile(files[index]);
+            return [...files];
+        });
+        return updateFile(files[index]);
    };

    const updateSrcURL = async (index: number, srcURL: SourceURL) => {
-        files[index] = {
-            ...files[index],
-            w: window.innerWidth,
-            h: window.innerHeight,
-        };
-        const { imageURL, videoURL } = srcURL;
-        if (files[index].metadata.fileType === FILE_TYPE.VIDEO) {
-            if (await isPlaybackPossible(videoURL)) {
-                files[index].html = `
-                <video controls>
-                    <source src="${videoURL}" />
-                    Your browser does not support the video tag.
-                </video>
-            `;
-            } else {
-                files[index].html = `
-                <div class="video-loading">
-                    <img src="${files[index].msrc}" />
-                    <div class="download-message" >
-                        ${constants.VIDEO_PLAYBACK_FAILED_DOWNLOAD_INSTEAD}
-                        <a class="btn btn-outline-success" href=${videoURL} download="${files[index].metadata.title}"">Download</button>
-                    </div>
+        const { videoURL, imageURL } = srcURL;
+        const isPlayable = videoURL && (await isPlaybackPossible(videoURL));
+        const updateFile = (file: EnteFile) => {
+            file = {
+                ...file,
+                w: window.innerWidth,
+                h: window.innerHeight,
+            };
+            if (file.metadata.fileType === FILE_TYPE.VIDEO) {
+                if (isPlayable) {
+                    file.html = `
+            <video controls>
+                <source src="${videoURL}" />
+                Your browser does not support the video tag.
+            </video>
+        `;
+                } else {
+                    file.html = `
+            <div class="video-loading">
+                <img src="${file.msrc}" />
+                <div class="download-message" >
+                    ${constants.VIDEO_PLAYBACK_FAILED_DOWNLOAD_INSTEAD}
+                    <a class="btn btn-outline-success" href=${videoURL} download="${file.metadata.title}"">Download</button>
                </div>
-                `;
-            }
-        } else if (files[index].metadata.fileType === FILE_TYPE.LIVE_PHOTO) {
-            const { imageURL, videoURL } = srcURL;
-            if (await isPlaybackPossible(videoURL)) {
-                files[index].html = `
+            </div>
+            `;
+                }
+            } else if (file.metadata.fileType === FILE_TYPE.LIVE_PHOTO) {
+                if (isPlayable) {
+                    file.html = `
                <div class = 'live-photo-container'>
-                    <img class = "live-photo-image-${files[index].id}" src="${imageURL}" />
-                    <video class = "live-photo-video-${files[index].id}" loop muted>
+                    <img class = "live-photo-image-${file.id}" src="${imageURL}" />
+                    <video class = "live-photo-video-${file.id}" loop muted>
                        <source src="${videoURL}" />
                        Your browser does not support the video tag.
                    </video>
                </div>
                `;
-            } else {
-                files[index].html = `
+                } else {
+                    file.html = `
                <div class="video-loading">
-                    <img src="${files[index].msrc}" />
-                    <div class="download-message" data-id="${files[index].id}">
+                    <img src="${file.msrc}" />
+                    <div class="download-message" data-id="${file.id}">
                        ${constants.VIDEO_PLAYBACK_FAILED_DOWNLOAD_INSTEAD}
                        <button class = "btn btn-outline-success">Download</button>
                    </div>
                </div>
                `;
+                }
+            } else {
+                file.src = imageURL;
            }
-        } else {
-            files[index].src = imageURL;
-        }
+            return file;
+        };
+        setFiles((files) => {
+            files[index] = updateFile(files[index]);
+            return [...files];
+        });
        setIsSourceLoaded(true);
-        setFiles(files);
+        return updateFile(files[index]);
    };

    const handleClose = (needUpdate) => {
@ -462,13 +469,13 @@ const PhotoFrame = ({
                    }
                    galleryContext.thumbs.set(item.id, url);
                }
-                updateURL(item.dataIndex)(url);
-                item.msrc = url;
-                if (!item.src) {
-                    item.src = url;
-                }
-                item.w = window.innerWidth;
-                item.h = window.innerHeight;
+                const newFile = updateURL(item.dataIndex)(url);
+                item.msrc = newFile.msrc;
+                item.html = newFile.html;
+                item.src = newFile.src;
+                item.w = newFile.w;
+                item.h = newFile.h;
+
                try {
                    instance.invalidateCurrItems();
                    instance.updateSize(true);
@ -487,6 +494,7 @@ const PhotoFrame = ({
                    const mergedURL = galleryContext.files.get(item.id);
                    urls = mergedURL.split(',');
                } else {
+                    galleryContext.startLoading();
                    if (
                        publicCollectionGalleryContext.accessedThroughSharedURL
                    ) {
@ -499,6 +507,7 @@ const PhotoFrame = ({
                    } else {
                        urls = await DownloadManager.getFile(item, true);
                    }
+                    galleryContext.finishLoading();
                    const mergedURL = urls.join(',');
                    galleryContext.files.set(item.id, mergedURL);
                }
@ -512,11 +521,15 @@ const PhotoFrame = ({
                    [imageURL] = urls;
                }
                setIsSourceLoaded(false);
-                await updateSrcURL(item.dataIndex, { imageURL, videoURL });
-                item.html = files[item.dataIndex].html;
-                item.src = files[item.dataIndex].src;
-                item.w = files[item.dataIndex].w;
-                item.h = files[item.dataIndex].h;
+                const newFile = await updateSrcURL(item.dataIndex, {
+                    imageURL,
+                    videoURL,
+                });
+                item.msrc = newFile.msrc;
+                item.html = newFile.html;
+                item.src = newFile.src;
+                item.w = newFile.w;
+                item.h = newFile.h;
                try {
                    instance.invalidateCurrItems();
                    instance.updateSize(true);
--- a/src/components/PhotoSwipe/PhotoSwipe.tsx
+++ b/src/components/PhotoSwipe/PhotoSwipe.tsx
@ -505,7 +505,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, isSourceLoaded } = props;
    const [isFav, setIsFav] = useState(false);
@ -610,7 +611,9 @@ function PhotoSwipe(props: Iprops) {
                `download-message`
            ) as HTMLCollectionOf<HTMLDivElement>;
            for (const downloadMessageDiv of downloadMessageDivs) {
-                if (downloadMessageDiv?.dataset?.id === item.id) {
+                if (
+                    String(downloadMessageDiv?.dataset?.id) === String(item.id)
+                ) {
                    const downloadLivePhotoBtn =
                        downloadMessageDiv.firstElementChild as HTMLButtonElement;

--- a/src/components/pages/gallery/PreviewCard.tsx
+++ b/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();
            }
--- a/src/services/fileService.ts
+++ b/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,10 +122,12 @@ export const getFiles = async (
                time = resp.data.diff.slice(-1)[0].updationTime;
            }
            setFiles(
-                sortFiles(
-                    mergeMetadata(
-                        [...(files || []), ...decryptedFiles].filter(
-                            (item) => !item.isDeleted
+                preservePhotoswipeProps(
+                    sortFiles(
+                        mergeMetadata(
+                            [...(files || []), ...decryptedFiles].filter(
+                                (item) => !item.isDeleted
+                            )
                        )
                    )
                )
--- a/src/services/trashService.ts
+++ b/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);
--- a/src/services/upload/thumbnailService.ts
+++ b/src/services/upload/thumbnailService.ts
@ -15,7 +15,7 @@ const MAX_THUMBNAIL_SIZE = 100 * 1024;
 const MIN_QUALITY = 0.5;
 const MAX_QUALITY = 0.7;

-const WAIT_TIME_THUMBNAIL_GENERATION = 10 * 1000;
+const WAIT_TIME_THUMBNAIL_GENERATION = 30 * 1000;

 interface Dimension {
    width: number;
--- a/src/services/upload/uploadManager.ts
+++ b/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(
-                    removeUnnecessaryFileProps(this.existingFiles)
-                );
-                this.setFiles(this.existingFiles);
+                await setLocalFiles(this.existingFiles);
+                this.setFiles(preservePhotoswipeProps(this.existingFiles));
                if (!this.existingFilesCollectionWise.has(file.collectionID)) {
                    this.existingFilesCollectionWise.set(file.collectionID, []);
                }
--- a/src/utils/file/index.ts
+++ b/src/utils/file/index.ts
@ -282,20 +282,18 @@ export async function decryptFile(file: EnteFile, collectionKey: string) {
    }
 }

-export function removeUnnecessaryFileProps(files: EnteFile[]): EnteFile[] {
-    const stripedFiles = files.map((file) => {
-        delete file.src;
-        delete file.msrc;
-        delete file.file.objectKey;
-        delete file.thumbnail.objectKey;
-        delete file.h;
-        delete file.html;
-        delete file.w;
-
-        return file;
-    });
-    return stripedFiles;
-}
+export const preservePhotoswipeProps =
+    (newFiles: EnteFile[]) =>
+    (currentFiles: EnteFile[]): EnteFile[] => {
+        const currentFilesMap = Object.fromEntries(
+            currentFiles.map((file) => [file.id, file])
+        );
+        const fileWithPreservedProperty = newFiles.map((file) => {
+            const currentFile = currentFilesMap[file.id];
+            return { ...currentFile, ...file };
+        });
+        return fileWithPreservedProperty;
+    };

 export function fileNameWithoutExtension(filename) {
    const lastDotPosition = filename.lastIndexOf('.');