commit
90e5cb45e9
|
@ -244,18 +244,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">
|
||||
|
@ -263,46 +260,59 @@ const PhotoFrame = ({
|
|||
</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.metadata.fileType === FILE_TYPE.LIVE_PHOTO) &&
|
||||
!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, url: string) => {
|
||||
files[index] = {
|
||||
...files[index],
|
||||
w: window.innerWidth,
|
||||
h: window.innerHeight,
|
||||
};
|
||||
if (files[index].metadata.fileType === FILE_TYPE.VIDEO) {
|
||||
if (await isPlaybackPossible(url)) {
|
||||
files[index].html = `
|
||||
<video controls>
|
||||
<source src="${url}" />
|
||||
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=${url} download="${files[index].metadata.title}"">Download</button>
|
||||
</div>
|
||||
const isPlayable = await isPlaybackPossible(url);
|
||||
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="${url}" />
|
||||
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=${url} download="${file.metadata.title}"">Download</button>
|
||||
</div>
|
||||
`;
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
} else {
|
||||
file.src = url;
|
||||
}
|
||||
} else {
|
||||
files[index].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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
|
|
|
@ -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
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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, []);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
});
|
||||
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('.');
|
||||
|
|
Loading…
Reference in a new issue