@uploadcare/file-uploader 1.15.0-alpha.10 → 1.15.0-alpha.12

package/blocks/FileItem/FileItem.d.ts

@@ -7,10 +7,6 @@ export class FileItem extends UploaderBlock {
      */
     private _entry;
     /** @private */
-    private _isIntersecting;
-    /** @private */
-    private _debouncedGenerateThumb;
-    /** @private */
     private _debouncedCalculateState;
     /** @private */
     private _renderedOnce;
@@ -54,6 +50,7 @@ export class FileItem extends UploaderBlock {
      * @param {IntersectionObserverEntry[]} entries
      */
     private _observerCallback;
+    _isIntersecting: boolean | undefined;
     _thumbRect: DOMRectReadOnly | undefined;
     /** @private */
     private _calculateState;

package/blocks/FileItem/FileItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["FileItem.js"],"names":[],"mappings":"AAoBA;IAIE,eAAe;IACf,mBAAuB;IACvB;;;OAGG;IACH,eAAc;IACd,eAAe;IACf,wBAAwB;IACxB,eAAe;IACf,gCAA4E;IAC5E,eAAe;IACf,iCAA0E;IAE1E,eAAe;IACf,sBAAsB;IAKpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA+BC;IAGH,eASC;IAED;;;OAGG;IACH,0BAeC;IAXC,wCAA0C;IAa5C,eAAe;IACf,wBAgBC;IAED,eAAe;IACf,2BAuCC;IAED;;;;OAIG;IACH,kBAUC;IAED;;MAaQ;IAER;;;OAGG;IACH,uBAmDC;IAyDD,wEAAwE;IACxE,oBADY,CAAC,oBAAoB,CAAC,CAAC,MAAM,oBAAoB,CAAC,QA0B7D;IAaC,eAAe;IACf,kBAEE;IAWJ;;;MAEC;IAED;;;OAGG;IACH,uBAEC;IAED,wBAsFC;CACF;;;;;8BA/c6B,iCAAiC;AAS/D;;;;;GAKG"}
+{"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["FileItem.js"],"names":[],"mappings":"AAoBA;IAIE,eAAe;IACf,mBAAuB;IACvB;;;OAGG;IACH,eAAc;IAEd,eAAe;IACf,iCAA0E;IAE1E,eAAe;IACf,sBAAsB;IAKpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA+BC;IAGH,eAQC;IAED;;;OAGG;IACH,0BAUC;IAPC,qCAA2C;IAC3C,wCAA0C;IAQ5C,eAAe;IACf,wBAgBC;IAED,eAAe;IACf,2BAuCC;IAED;;;;OAIG;IACH,kBAUC;IAED;;MAaQ;IAER;;;OAGG;IACH,uBAkCC;IAyDD,wEAAwE;IACxE,oBADY,CAAC,oBAAoB,CAAC,CAAC,MAAM,oBAAoB,CAAC,QA0B7D;IAaC,eAAe;IACf,kBAEE;IAUJ;;;MAEC;IAED;;;OAGG;IACH,uBAEC;IAED,wBAsFC;CACF;;;;;8BApb6B,iCAAiC;AAS/D;;;;;GAKG"}

package/blocks/FileItem/FileItem.js

@@ -29,10 +29,7 @@ export class FileItem extends UploaderBlock {
    * @type {any} TODO: Add types for upload entry
    */
   _entry = null;
-  /** @private */
-  _isIntersecting = false;
-  /** @private */
-  _debouncedGenerateThumb = debounce(this._generateThumbnail.bind(this), 100);
+
   /** @private */
   _debouncedCalculateState = debounce(this._calculateState.bind(this), 100);
 
@@ -81,7 +78,6 @@ export class FileItem extends UploaderBlock {
       sub.remove();
     }
 
-    this._debouncedGenerateThumb.cancel();
     this._debouncedCalculateState.cancel();
     this._entrySubs = new Set();
     this._entry = null;
@@ -101,11 +97,6 @@ export class FileItem extends UploaderBlock {
       this.render();
       this._renderedOnce = true;
     }
-    // if (entry.intersectionRatio === 0) {
-    //   this._debouncedGenerateThumb.cancel();
-    // } else {
-    //   this._debouncedGenerateThumb();
-    // }
   }
 
   /** @private */
@@ -230,21 +221,8 @@ export class FileItem extends UploaderBlock {
       this.$.itemName = entry.getValue('fileName') || externalUrl || this.l10n('file-no-name');
     });
 
-    this._subEntry('fileInfo', (fileInfo) => {
+    this._subEntry('fileInfo', () => {
       this._debouncedCalculateState();
-      if (fileInfo && this._isIntersecting) {
-        this._debouncedGenerateThumb();
-      }
-    });
-
-    this._subEntry('cdnUrlModifiers', () => {
-      if (this._isIntersecting) {
-        this._debouncedGenerateThumb();
-      }
-    });
-
-    this._subEntry('thumbUrl', (thumbUrl) => {
-      this.$.thumbUrl = thumbUrl ? `url(${thumbUrl})` : '';
     });
 
     this._subEntry('errors', () => this._debouncedCalculateState());
@@ -252,10 +230,6 @@ export class FileItem extends UploaderBlock {
     this._subEntry('fileSize', () => this._debouncedCalculateState());
     this._subEntry('mimeType', () => this._debouncedCalculateState());
     this._subEntry('isImage', () => this._debouncedCalculateState());
-
-    if (this._isIntersecting) {
-      this._debouncedGenerateThumb();
-    }
   }
 
   initCallback() {
@@ -271,12 +245,12 @@ export class FileItem extends UploaderBlock {
 
     this.subConfigValue('useCloudImageEditor', () => this._debouncedCalculateState());
     this.subConfigValue('filesViewMode', (mode) => {
-      if (this.cfg.filesViewMode === 'grid') {
-        this.$.showFileNames = this.cfg.gridShowFileNames;
-      }
       if (this.cfg.filesViewMode === 'list') {
         this.$.showFileNames = true;
       }
+      if (this.cfg.filesViewMode === 'grid') {
+        this.$.showFileNames = this.cfg.gridShowFileNames;
+      }
 
       this.setAttribute('mode', mode);
     });
@@ -362,7 +336,6 @@ export class FileItem extends UploaderBlock {
   disconnectedCallback() {
     super.disconnectedCallback();
 
-    this._debouncedGenerateThumb.cancel();
     this._observer?.disconnect();
   }
 
@@ -469,7 +442,7 @@ export class FileItem extends UploaderBlock {
 
 FileItem.template = /* HTML */ `
   <div class="uc-inner" set="@finished: isFinished; @uploading: isUploading; @failed: isFailed; @focused: isFocused">
-    <uc-thumb set="uid:uid;thumbUrl:thumbUrl;badgeIcon:badgeIcon"></uc-thumb>
+    <uc-thumb set="uid:uid;badgeIcon:badgeIcon"></uc-thumb>
 
     <div aria-atomic="true" aria-live="polite" class="uc-file-name-wrapper" set="@aria-label:ariaLabelStatusFile;">
       <span class="uc-file-name" set="@hidden: !showFileNames">{{itemName}}</span>

package/blocks/ProgressBar/ProgressBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["ProgressBar.js"],"names":[],"mappings":"AAEA;IACE,qBAAqB;IACrB,eAAW;IAEX,sBAAsB;IACtB,kBAAgB;IAEhB,WAIE;CA+CH;;;;sBA5DqB,yBAAyB"}
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["ProgressBar.js"],"names":[],"mappings":"AAEA;IACE,qBAAqB;IACrB,eAAW;IAEX,sBAAsB;IACtB,kBAAgB;IAEhB,WAIE;CAgDH;;;;sBA7DqB,yBAAyB"}

package/blocks/ProgressBar/ProgressBar.js

@@ -54,6 +54,7 @@ export class ProgressBar extends Block {
     this.defineAccessor('visible', (visible) => {
       this._visible = visible;
 
+      this.classList.toggle('uc-progress-bar--hidden', !visible);
       this.ref.realProgressLine.classList.toggle('uc-progress--hidden', !visible);
       this.ref.fakeProgressLine.classList.toggle('uc-fake-progress--hidden', !visible);
     });

package/blocks/Thumb/Thumb.d.ts

@@ -1,7 +1,18 @@
 export class Thumb extends UploaderBlock {
+    /**
+     * @private
+     * @type {any} TODO: Add types for upload entry
+     */
+    private _entry;
+    /**
+     * @private
+     * @type {IntersectionObserverEntry['boundingClientRect'] | null}
+     */
+    private _thumbRect;
     _debouncedGenerateThumb: (() => Promise<void>) & {
         cancel: () => void;
     };
+    _isIntersecting: boolean;
     init$: {
         thumbUrl: string;
         badgeIcon: string;
@@ -20,6 +31,7 @@ export class Thumb extends UploaderBlock {
         '*historyBack': null;
         '*closeModal': () => void;
     };
+    _calculateThumbSize(): number;
     /** @private */
     private _generateThumbnail;
     /**

package/blocks/Thumb/Thumb.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Thumb.d.ts","sourceRoot":"","sources":["Thumb.js"],"names":[],"mappings":"AAKA;IACE;;MAA4E;IAK1E;;;;;;;;;;;;;;;;;MAKC;IAGH,eAAe;IACf,2BAEC;IAED;;;OAGG;IACH,0BAUC;IAkBC,4CAAuG;CAU1G;;;;8BAhE6B,iCAAiC"}
+{"version":3,"file":"Thumb.d.ts","sourceRoot":"","sources":["Thumb.js"],"names":[],"mappings":"AAMA;IACE;;;OAGG;IACH,eAAc;IAEd;;;OAGG;IACH,mBAAkB;IAElB;;MAA4E;IAE5E,yBAAwB;IAKtB;;;;;;;;;;;;;;;;;MAKC;IAGH,8BAYC;IAED,eAAe;IACf,2BAqCC;IAED;;;OAGG;IACH,0BAaC;IAqCC,4CAAuG;CAW1G;;;;8BAzJ6B,iCAAiC"}

package/blocks/Thumb/Thumb.js

@@ -1,11 +1,26 @@
-//@ts-check
-
 import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+import { createCdnUrl, createCdnUrlModifiers, createOriginalUrl } from '../../utils/cdn-utils.js';
+import { fileCssBg } from '../svg-backgrounds/svg-backgrounds.js';
 import { debounce } from '../utils/debounce.js';
+import { generateThumb } from '../utils/resizeImage.js';
 
 export class Thumb extends UploaderBlock {
+  /**
+   * @private
+   * @type {any} TODO: Add types for upload entry
+   */
+  _entry = null;
+
+  /**
+   * @private
+   * @type {IntersectionObserverEntry['boundingClientRect'] | null}
+   */
+  _thumbRect = null;
+
   _debouncedGenerateThumb = debounce(this._generateThumbnail.bind(this), 100);
 
+  _isIntersecting = false;
+
   constructor() {
     super();
 
@@ -17,9 +32,58 @@ export class Thumb extends UploaderBlock {
     };
   }
 
+  _calculateThumbSize() {
+    let size = Math.max(
+      parseInt(String(this?._thumbRect?.height || 0)),
+      parseInt(String(this?._thumbRect?.width || 0)),
+      this.cfg.thumbSize,
+    );
+
+    if (window.devicePixelRatio > 1) {
+      size *= window.devicePixelRatio;
+    }
+
+    return size;
+  }
+
   /** @private */
   async _generateThumbnail() {
-    console.log('Generating thumbnail for', this.$.uid);
+    if (!this._entry) {
+      return;
+    }
+    let entry = this._entry;
+
+    if (entry.getValue('fileInfo') && entry.getValue('isImage')) {
+      let size = this._calculateThumbSize();
+
+      let thumbUrl = await this.proxyUrl(
+        createCdnUrl(
+          createOriginalUrl(this.cfg.cdnCname, this._entry.getValue('uuid')),
+          createCdnUrlModifiers(entry.getValue('cdnUrlModifiers'), `scale_crop/${size}x${size}/center/-/preview/`),
+        ),
+      );
+      let currentThumbUrl = entry.getValue('thumbUrl');
+      if (currentThumbUrl !== thumbUrl) {
+        entry.setValue('thumbUrl', thumbUrl);
+        currentThumbUrl?.startsWith('blob:') && URL.revokeObjectURL(currentThumbUrl);
+      }
+      return;
+    }
+
+    if (entry.getValue('file')?.type.includes('image')) {
+      try {
+        let size = this._calculateThumbSize();
+
+        let thumbUrl = await generateThumb(entry.getValue('file'), size);
+        entry.setValue('thumbUrl', thumbUrl);
+      } catch (err) {
+        let color = window.getComputedStyle(this).getPropertyValue('--uc-muted-foreground');
+        entry.setValue('thumbUrl', fileCssBg(color));
+      }
+    } else {
+      let color = window.getComputedStyle(this).getPropertyValue('--uc-muted-foreground');
+      entry.setValue('thumbUrl', fileCssBg(color));
+    }
   }
 
   /**
@@ -28,7 +92,10 @@ export class Thumb extends UploaderBlock {
    */
   _observerCallback(entries) {
     const [entry] = entries;
+    this._isIntersecting = entry.isIntersecting;
+
     if (entry.isIntersecting) {
+      this._thumbRect = entry.boundingClientRect;
       this._debouncedGenerateThumb();
       this._observer?.disconnect();
     }
@@ -41,13 +108,32 @@ export class Thumb extends UploaderBlock {
   initCallback() {
     super.initCallback();
 
-    this.defineAccessor('thumbUrl', (/** @type {string} */ val) => (this.$.thumbUrl = val));
     this.defineAccessor('badgeIcon', (/** @type {string} */ val) => (this.$.badgeIcon = val));
 
     this.defineAccessor('uid', (/** @type {string} */ value) => {
       this.set$({ uid: value });
     });
 
+    this.sub('uid', (value) => {
+      this._entry = this.uploadCollection.read(value);
+    });
+
+    this._entry?.subscribe('fileInfo', (fileInfo) => {
+      if (fileInfo?.isImage && this._isIntersecting) {
+        this._debouncedGenerateThumb();
+      }
+    });
+
+    this._entry?.subscribe('thumbUrl', (thumbUrl) => {
+      this.$.thumbUrl = thumbUrl ? `url(${thumbUrl})` : '';
+    });
+
+    this._entry?.subscribe('cdnUrlModifiers', () => {
+      if (this._isIntersecting) {
+        this._debouncedGenerateThumb();
+      }
+    });
+
     this.setAttribute('role', 'img');
   }
 
@@ -62,6 +148,7 @@ export class Thumb extends UploaderBlock {
   disconnectedCallback() {
     super.disconnectedCallback();
 
+    this._debouncedGenerateThumb.cancel();
     this._observer?.disconnect();
   }
 }
@@ -75,8 +162,6 @@ Thumb.template = /* html */ `
 `;
 
 Thumb.bindAttributes({
-  // @ts-expect-error TODO: fix types inside symbiote
-  thumbUrl: null,
   // @ts-expect-error TODO: fix types inside symbiote
   badgeIcon: null,
   // @ts-expect-error TODO: fix types inside symbiote

package/index.ssr.js

@@ -840,7 +840,7 @@ export const ExternalUploadSource = {
 export const FileItem = class {
   static template = `
   <div class="uc-inner" set="@finished: isFinished; @uploading: isUploading; @failed: isFailed; @focused: isFocused">
-    <uc-thumb set="uid:uid;thumbUrl:thumbUrl;badgeIcon:badgeIcon"></uc-thumb>
+    <uc-thumb set="uid:uid;badgeIcon:badgeIcon"></uc-thumb>
 
     <div aria-atomic="true" aria-live="polite" class="uc-file-name-wrapper" set="@aria-label:ariaLabelStatusFile;">
       <span class="uc-file-name" set="@hidden: !showFileNames">{{itemName}}</span>
@@ -1305,7 +1305,7 @@ export const Thumb = class {
     </div>
   </div>
 `;
-  static observedAttributes = ["thumbUrl", "badgeIcon", "uid"];
+  static observedAttributes = ["badgeIcon", "uid"];
   static extSrcList = {
     FACEBOOK: "facebook",
     DROPBOX: "dropbox",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uploadcare/file-uploader",
-  "version": "1.15.0-alpha.10",
+  "version": "1.15.0-alpha.12",
   "description": "Building blocks for Uploadcare products integration",
   "keywords": [
     "web components",

package/solutions/file-uploader/minimal/FileUploaderMinimal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploaderMinimal.d.ts","sourceRoot":"","sources":["FileUploaderMinimal.js"],"names":[],"mappings":"AAQA;IAMI;;;;;;;;;;;;;;;;;;MAMC;IAXF;;;aAAkD;IAAlD;;;aAAkD;IAwGjD;;;4BAAuD;IACvD;;;4BAAyD;CAW5D;;;;8BA3H6B,oCAAoC"}
+{"version":3,"file":"FileUploaderMinimal.d.ts","sourceRoot":"","sources":["FileUploaderMinimal.js"],"names":[],"mappings":"AAQA;IAMI;;;;;;;;;;;;;;;;;;MAMC;IAXF;;;aAAkD;IAAlD;;;aAAkD;IAyGjD;;;4BAAuD;IACvD;;;4BAAyD;CAW5D;;;;8BA5H6B,oCAAoC"}

package/solutions/file-uploader/minimal/FileUploaderMinimal.js

@@ -81,6 +81,7 @@ export class FileUploaderMinimal extends SolutionBlock {
       } else {
         this.set$({
           classUploadList: EMPTY_CLASS,
+          isHiddenStartFrom: false,
         });
         this.$['*currentActivity'] = uBlock.initActivity || ActivityBlock.activities.START_FROM;
       }