diff --git a/abstract/uploadEntrySchema.js b/abstract/uploadEntrySchema.js index 797384472..2d5dbee53 100644 --- a/abstract/uploadEntrySchema.js +++ b/abstract/uploadEntrySchema.js @@ -103,6 +103,10 @@ export const uploadEntrySchema = Object.freeze({ value: null, nullable: true, }, + isFailedToGenerateThumb: { + type: Boolean, + value: false, + }, silent: { type: Boolean, value: false, diff --git a/blocks/Config/initialConfig.js b/blocks/Config/initialConfig.js index f834b7485..43c60d231 100644 --- a/blocks/Config/initialConfig.js +++ b/blocks/Config/initialConfig.js @@ -24,7 +24,7 @@ export const initialConfig = { sourceList: 'local, url, camera, dropbox, gdrive', cloudImageEditorTabs: serializeCsv(ALL_TABS), maxLocalFileSizeBytes: 0, - thumbSize: 76, + thumbSize: 64, showEmptyList: false, useLocalImageEditor: false, useCloudImageEditor: true, diff --git a/blocks/FileItem/FileItem.js b/blocks/FileItem/FileItem.js index 9d46ad207..57b9be935 100644 --- a/blocks/FileItem/FileItem.js +++ b/blocks/FileItem/FileItem.js @@ -129,39 +129,45 @@ export class FileItem extends UploaderBlock { if (!this._entry) { return; } - let entry = this._entry; - - if (entry.getValue('fileInfo') && entry.getValue('isImage')) { - let size = this.cfg.thumbSize; - let thumbUrl = this.proxyUrl( + const entry = this._entry; + + if ( + entry.getValue('fileInfo') && + entry.getValue('isImage') && + (entry.getValue('cdnUrlModifiers') || entry.getValue('isFailedToGenerateThumb')) + ) { + const size = this.cfg.thumbSize; + const cdnThumbUrl = this.proxyUrl( createCdnUrl( createOriginalUrl(this.cfg.cdnCname, this._entry.getValue('uuid')), createCdnUrlModifiers(entry.getValue('cdnUrlModifiers'), `scale_crop/${size}x${size}/center`), ), ); - let currentThumbUrl = entry.getValue('thumbUrl'); - if (currentThumbUrl !== thumbUrl) { - entry.setValue('thumbUrl', thumbUrl); + const currentThumbUrl = entry.getValue('thumbUrl'); + if (currentThumbUrl !== cdnThumbUrl) { + entry.setValue('thumbUrl', cdnThumbUrl); currentThumbUrl?.startsWith('blob:') && URL.revokeObjectURL(currentThumbUrl); } return; } + if (!entry.getValue('isImage')) { + const iconColor = window.getComputedStyle(this).getPropertyValue('--clr-generic-file-icon'); + entry.setValue('thumbUrl', fileCssBg(iconColor)); + return; + } + if (entry.getValue('thumbUrl')) { return; } - if (entry.getValue('file')?.type.includes('image')) { - try { - let thumbUrl = await generateThumb(entry.getValue('file'), this.cfg.thumbSize); - entry.setValue('thumbUrl', thumbUrl); - } catch (err) { - let color = window.getComputedStyle(this).getPropertyValue('--clr-generic-file-icon'); - entry.setValue('thumbUrl', fileCssBg(color)); - } - } else { - let color = window.getComputedStyle(this).getPropertyValue('--clr-generic-file-icon'); + try { + const thumbUrl = await generateThumb(entry.getValue('file'), this.cfg.thumbSize); + entry.setValue('thumbUrl', thumbUrl); + } catch (err) { + const color = window.getComputedStyle(this).getPropertyValue('--clr-generic-file-icon'); entry.setValue('thumbUrl', fileCssBg(color)); + entry.setValue('isFailedToGenerateThumb', true); } }