Merge pull request #410 from ente-io/master

release
This commit is contained in:
Abhinav Kumar 2022-03-03 08:42:15 +05:30 committed by GitHub
commit 90e5cb45e9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 119 additions and 102 deletions

View file

@ -244,18 +244,15 @@ const PhotoFrame = ({
}, [open]);
const updateURL = (index: number) => (url: string) => {
files[index] = {
...files[index],
const updateFile = (file: EnteFile) => {
file = {
...file,
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 = `
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">
@ -263,46 +260,59 @@ const PhotoFrame = ({
</div>
</div>
`;
delete files[index].src;
}
if (
files[index].metadata.fileType === FILE_TYPE.IMAGE &&
!files[index].src
} else if (
(file.metadata.fileType === FILE_TYPE.IMAGE ||
file.metadata.fileType === FILE_TYPE.LIVE_PHOTO) &&
!file.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] = {
...files[index],
const isPlayable = await isPlaybackPossible(url);
const updateFile = (file: EnteFile) => {
file = {
...file,
w: window.innerWidth,
h: window.innerHeight,
};
if (files[index].metadata.fileType === FILE_TYPE.VIDEO) {
if (await isPlaybackPossible(url)) {
files[index].html = `
if (file.metadata.fileType === FILE_TYPE.VIDEO) {
if (isPlayable) {
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);
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);
@ -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);
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, 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);

View file

@ -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);

View file

@ -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();
}

View file

@ -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;

View file

@ -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);

View file

@ -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, []);
}

View file

@ -281,20 +281,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;
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 stripedFiles;
}
return fileWithPreservedProperty;
};
export function fileNameWithoutExtension(filename) {
const lastDotPosition = filename.lastIndexOf('.');