beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Merge pull request #193 from ente-io/master

Browse source 
release 26 oct
This commit is contained in:
Abhinav-grd 2021-10-26 19:12:50 +05:30 committed by GitHub
parent 44a37ad387 f6106e70d1
commit 8d1be4682c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 99 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
src/components/PhotoFrame.tsx
View file

@ -301,46 +301,56 @@ const PhotoFrame = ({
const getSlideData = async (instance: any, index: number, item: File) => {
if (!item.msrc) {
let url: string;
if (galleryContext.thumbs.has(item.id)) {
url = galleryContext.thumbs.get(item.id);
} else {
url = await DownloadManager.getPreview(item);
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;
try {
instance.invalidateCurrItems();
instance.updateSize(true);
let url: string;
if (galleryContext.thumbs.has(item.id)) {
url = galleryContext.thumbs.get(item.id);
} else {
url = await DownloadManager.getPreview(item);
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;
try {
instance.invalidateCurrItems();
instance.updateSize(true);
} catch (e) {
// ignore
}
} catch (e) {
// ignore
// no-op
}
}
if (!fetching[item.dataIndex]) {
fetching[item.dataIndex] = true;
let url: string;
if (galleryContext.files.has(item.id)) {
url = galleryContext.files.get(item.id);
} else {
url = await DownloadManager.getFile(item, true);
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;
try {
instance.invalidateCurrItems();
instance.updateSize(true);
fetching[item.dataIndex] = true;
let url: string;
if (galleryContext.files.has(item.id)) {
url = galleryContext.files.get(item.id);
} else {
url = await DownloadManager.getFile(item, true);
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;
try {
instance.invalidateCurrItems();
instance.updateSize(true);
} catch (e) {
// ignore
}
} catch (e) {
// ignore
// no-op
} finally {
fetching[item.dataIndex] = false;
}
}
};

20
src/components/pages/gallery/PreviewCard.tsx
View file

@ -128,15 +128,19 @@ export default function PreviewCard(props: IProps) {
useLayoutEffect(() => {
if (file && !file.msrc) {
const main = async () => {
const url = await DownloadManager.getPreview(file);
if (isMounted.current) {
setImgSrc(url);
thumbs.set(file.id, url);
file.msrc = url;
if (!file.src) {
file.src = url;
try {
const url = await DownloadManager.getPreview(file);
if (isMounted.current) {
setImgSrc(url);
thumbs.set(file.id, url);
file.msrc = url;
if (!file.src) {
file.src = url;
}
updateUrl(url);
}
updateUrl(url);
} catch (e) {
// no-op
}
};

28
src/services/downloadManager.ts
View file

@ -24,7 +24,7 @@ class DownloadManager {
return URL.createObjectURL(await cacheResp.blob());
}
if (!this.thumbnailObjectUrlPromise.get(file.id)) {
const downloadPromise = this._downloadThumb(
const downloadPromise = this.downloadThumb(
token,
thumbnailCache,
file
@ -35,10 +35,11 @@ class DownloadManager {
} catch (e) {
this.thumbnailObjectUrlPromise.delete(file.id);
logError(e, 'get preview Failed');
throw e;
}
}
_downloadThumb = async (
private downloadThumb = async (
token: string,
thumbnailCache: Cache,
file: File
@ -67,26 +68,29 @@ class DownloadManager {
};
getFile = async (file: File, forPreview = false) => {
let fileUID: string;
if (file.metadata.fileType === FILE_TYPE.VIDEO) {
fileUID = file.id.toString();
} else {
fileUID = `${file.id}_forPreview=${forPreview}`;
}
try {
const getFilePromise = (async () => {
const getFilePromise = async () => {
const fileStream = await this.downloadFile(file);
let fileBlob = await new Response(fileStream).blob();
if (forPreview) {
fileBlob = await convertForPreview(file, fileBlob);
}
return URL.createObjectURL(fileBlob);
})();
if (!this.fileObjectUrlPromise.get(`${file.id}_${forPreview}`)) {
this.fileObjectUrlPromise.set(
`${file.id}_${forPreview}`,
getFilePromise
);
};
if (!this.fileObjectUrlPromise.get(fileUID)) {
this.fileObjectUrlPromise.set(fileUID, getFilePromise());
}
return await this.fileObjectUrlPromise.get(
`${file.id}_${forPreview}`
);
return await this.fileObjectUrlPromise.get(fileUID);
} catch (e) {
this.fileObjectUrlPromise.delete(fileUID);
logError(e, 'Failed to get File');
throw e;
}
};

37
src/services/upload/thumbnailService.ts
View file

@ -5,8 +5,10 @@ import { BLACK_THUMBNAIL_BASE64 } from '../../../public/images/black-thumbnail-b
import FFmpegService from 'services/ffmpegService';
const THUMBNAIL_HEIGHT = 720;
const MAX_ATTEMPTS = 3;
const MIN_THUMBNAIL_SIZE = 50000;
const MIN_COMPRESSION_PERCENTAGE_SIZE_DIFF = 10;
export const MAX_THUMBNAIL_SIZE = 100 * 1024;
const MIN_QUALITY = 0.5;
const MAX_QUALITY = 0.7;
const WAIT_TIME_THUMBNAIL_GENERATION = 10 * 1000;
@ -171,11 +173,14 @@ export async function generateVideoThumbnail(file: globalThis.File) {
}
async function thumbnailCanvasToBlob(canvas: HTMLCanvasElement) {
let thumbnailBlob = null;
let attempts = 0;
let quality = 1;
let thumbnailBlob: Blob = null;
let prevSize = Number.MAX_SAFE_INTEGER;
let quality = MAX_QUALITY;
do {
if (thumbnailBlob) {
prevSize = thumbnailBlob.size;
}
thumbnailBlob = await new Promise((resolve) => {
canvas.toBlob(
function (blob) {
@ -186,12 +191,26 @@ async function thumbnailCanvasToBlob(canvas: HTMLCanvasElement) {
);
});
thumbnailBlob = thumbnailBlob ?? new Blob([]);
attempts++;
quality /= 2;
quality -= 0.1;
} while (
thumbnailBlob.size > MIN_THUMBNAIL_SIZE &&
attempts <= MAX_ATTEMPTS
quality >= MIN_QUALITY &&
thumbnailBlob.size > MAX_THUMBNAIL_SIZE &&
percentageSizeDiff(thumbnailBlob.size, prevSize) >=
MIN_COMPRESSION_PERCENTAGE_SIZE_DIFF
);
if (thumbnailBlob.size > MAX_THUMBNAIL_SIZE) {
logError(
Error('thumbnail_too_large'),
'thumbnail greater than max limit'
);
}
return thumbnailBlob;
}
function percentageSizeDiff(
newThumbnailSize: number,
oldThumbnailSize: number
) {
return ((oldThumbnailSize - newThumbnailSize) * 100) / oldThumbnailSize;
}