@uploadcare/file-uploader 0.50.1-alpha.2 → 0.50.1

package/blocks/CloudImageEditor/src/EditorFilterControl.js

@@ -1,3 +1,4 @@
+// @ts-check
 import { createCdnUrl, createCdnUrlModifiers } from '../../../utils/cdn-utils.js';
 import { EditorButtonControl } from './EditorButtonControl.js';
 import { FAKE_ORIGINAL_FILTER } from './EditorSlider.js';
@@ -5,15 +6,19 @@ import { COMMON_OPERATIONS, transformationsToOperations } from './lib/transforma
 import { preloadImage } from './lib/preloadImage.js';
 
 export class EditorFilterControl extends EditorButtonControl {
-  init$ = {
-    ...this.init$,
-    active: false,
-    title: '',
-    icon: '',
-    isOriginal: false,
-    iconSize: '20',
-    'on.click': null,
-  };
+  constructor() {
+    super();
+
+    this.init$ = {
+      ...this.init$,
+      active: false,
+      title: '',
+      icon: '',
+      isOriginal: false,
+      iconSize: '20',
+      'on.click': null,
+    };
+  }
 
   _previewSrc() {
     let previewSize = parseInt(window.getComputedStyle(this).getPropertyValue('--l-base-min-width'), 10);
@@ -24,6 +29,7 @@ export class EditorFilterControl extends EditorButtonControl {
 
     /** @type {import('./types.js').Transformations} */
     let transformations = { ...this.$['*editorTransformations'] };
+    // @ts-expect-error FIXME: fix this
     transformations[this._operation] =
       this._filter !== FAKE_ORIGINAL_FILTER
         ? {
@@ -47,10 +53,10 @@ export class EditorFilterControl extends EditorButtonControl {
    * @param {IntersectionObserverEntry[]} entries
    * @param {IntersectionObserver} observer
    */
-  _observerCallback(entries, observer) {
+  async _observerCallback(entries, observer) {
     let intersectionEntry = entries[0];
     if (intersectionEntry.isIntersecting) {
-      let src = this.proxyUrl(this._previewSrc());
+      let src = await this.proxyUrl(this._previewSrc());
       let previewEl = this.ref['preview-el'];
       let { promise, cancel } = preloadImage(src);
       this._cancelPreload = cancel;
@@ -66,14 +72,14 @@ export class EditorFilterControl extends EditorButtonControl {
           observer.unobserve(this);
         });
     } else {
-      this._cancelPreload && this._cancelPreload();
+      this._cancelPreload?.();
     }
   }
 
   initCallback() {
     super.initCallback();
 
-    this.$['on.click'] = (e) => {
+    this.$['on.click'] = () => {
       if (!this.$.active) {
         this.$['*sliderEl'].setOperation(this._operation, this._filter);
         this.$['*sliderEl'].apply();
@@ -85,12 +91,16 @@ export class EditorFilterControl extends EditorButtonControl {
       this.$['*currentFilter'] = this._filter;
     };
 
-    this.defineAccessor('filter', (filter) => {
-      this._operation = 'filter';
-      this._filter = filter;
-      this.$.isOriginal = filter === FAKE_ORIGINAL_FILTER;
-      this.$.icon = this.$.isOriginal ? 'original' : 'slider';
-    });
+    this.defineAccessor(
+      'filter',
+      /** @param {string} filter */
+      (filter) => {
+        this._operation = 'filter';
+        this._filter = filter;
+        this.$.isOriginal = filter === FAKE_ORIGINAL_FILTER;
+        this.$.icon = this.$.isOriginal ? 'original' : 'slider';
+      },
+    );
 
     this._observer = new window.IntersectionObserver(this._observerCallback.bind(this), {
       threshold: [0, 1],
@@ -128,9 +138,9 @@ export class EditorFilterControl extends EditorButtonControl {
       }
     });
 
-    this.sub('*networkProblems', (networkProblems) => {
+    this.sub('*networkProblems', async (networkProblems) => {
       if (!networkProblems) {
-        let src = this.proxyUrl(this._previewSrc());
+        let src = await this.proxyUrl(this._previewSrc());
         let previewEl = this.ref['preview-el'];
         if (previewEl.style.backgroundImage) {
           previewEl.style.backgroundImage = 'none';
@@ -143,13 +153,13 @@ export class EditorFilterControl extends EditorButtonControl {
   destroyCallback() {
     super.destroyCallback();
     this._observer?.disconnect();
-    this._cancelPreload && this._cancelPreload();
+    this._cancelPreload?.();
   }
 }
 
 EditorFilterControl.template = /* HTML */ `
   <button type="button" role="option">
     <div class="uc-preview" ref="preview-el"></div>
-    <uc-icon ref="icon-el" set="@name: icon; @size: iconSize;"></uc-icon>
+    <lr-icon ref="icon-el" set="@name: icon; @size: iconSize;"></lr-icon>
   </button>
 `;

package/blocks/CloudImageEditor/src/EditorImageCropper.js

@@ -461,7 +461,7 @@ export class EditorImageCropper extends Block {
    * @param {import('./types.js').Transformations} transformations
    * @returns {Promise<HTMLImageElement>}
    */
-  _waitForImage(originalUrl, transformations) {
+  async _waitForImage(originalUrl, transformations) {
     let width = this.offsetWidth;
     transformations = {
       ...transformations,
@@ -470,13 +470,13 @@ export class EditorImageCropper extends Block {
       flip: undefined,
       mirror: undefined,
     };
-    let src = this.proxyUrl(viewerImageSrc(originalUrl, width, transformations));
+    let src = await this.proxyUrl(viewerImageSrc(originalUrl, width, transformations));
     let { promise, cancel, image } = preloadImage(src);
 
     let stop = this._handleImageLoading(src);
     image.addEventListener('load', stop, { once: true });
     image.addEventListener('error', stop, { once: true });
-    this._cancelPreload && this._cancelPreload();
+    this._cancelPreload?.();
     this._cancelPreload = cancel;
 
     return promise
@@ -547,5 +547,5 @@ export class EditorImageCropper extends Block {
 
 EditorImageCropper.template = /* HTML */ `
   <canvas class="uc-canvas" ref="canvas-el"></canvas>
-  <uc-crop-frame ref="frame-el"></uc-crop-frame>
+  <lr-crop-frame ref="frame-el"></lr-crop-frame>
 `;

package/blocks/CloudImageEditor/src/EditorImageFader.d.ts

@@ -35,14 +35,14 @@ export class EditorImageFader extends Block {
      * @param {String} [options.filter]
      * @param {String} [options.operation]
      * @param {Number} [options.value]
-     * @returns {String}
+     * @returns {Promise<String>}
      */
     private _imageSrc;
     /**
      * @private
      * @param {String} operation
      * @param {Number} value
-     * @returns {Keypoint}
+     * @returns {Promise<Keypoint>}
      */
     private _constructKeypoint;
     /**
@@ -79,7 +79,7 @@ export class EditorImageFader extends Block {
     _cancelLastImages: any;
     _container: HTMLDivElement | undefined;
     /** @param {import('./types.js').Transformations} transformations */
-    setTransformations(transformations: import('./types.js').Transformations): void;
+    setTransformations(transformations: import('./types.js').Transformations): Promise<void>;
     _transformations: import("./types.js").Transformations | undefined;
     /**
      * @param {object} options
@@ -93,7 +93,7 @@ export class EditorImageFader extends Block {
         operation: string;
         value: number;
         filter?: string | undefined;
-    }): void;
+    }): Promise<void>;
     _cancelBatchPreload: (() => void) | undefined;
     /** @private */
     private _setOriginalSrc;
@@ -111,7 +111,7 @@ export class EditorImageFader extends Block {
         value?: number | undefined;
         filter?: string | undefined;
         fromViewer?: boolean | undefined;
-    }): void;
+    }): Promise<void>;
     _url: string | undefined;
     _filter: string | undefined;
     _fromViewer: boolean | undefined;

package/blocks/CloudImageEditor/src/EditorImageFader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorImageFader.d.ts","sourceRoot":"","sources":["EditorImageFader.js"],"names":[],"mappings":"AA8DA;;;;;;;GAOG;AAEH;IAII;;;OAGG;IACH,kBAAsB;IAEtB;;;OAGG;IACH,gBAAmB;IAEnB,eAAe;IACf,8BAAwE;IAK1E;;;;OAIG;IACH,4BAmBC;IAED,eAAe;IACf,eAWC;IATC,yBAQE;IAGJ;;;;;;;;OAQG;IACH,kBAUC;IAED;;;;;OAKG;IACH,2BASC;IAED;;;;;;;OAOG;IACH,gBAEC;IAED;;;;;OAKG;IACH,qBA0CC;IAED,qCAAqC;IACrC,WADY,eAAe,QAK1B;IAED;;;;OAIG;IACH,gBAgBC;IAfC,+BAA2B;IAC3B,2BAAmB;IAgBrB,eAAe;IACf,4BAKC;IAED,eAAe;IACf,mBAmCC;IAjCC,mBAAqE;IAcrE,uBAGC;IAMC,uCAA2B;IAY/B,oEAAoE;IACpE,oCADY,OAAO,YAAY,EAAE,eAAe,QAmB/C;IAjBC,mEAAuC;IAmBzC;;;;;;OAMG;IACH;QAL2B,GAAG;QACH,SAAS;QACT,KAAK;QACJ,MAAM;aAUjC;IADC,8CAAiC;IAGnC,eAAe;IACf,wBA4CC;IAED;;;;;;;OAOG;IACH;QAN2B,GAAG;QACF,SAAS;QACT,KAAK;QACL,MAAM;QACL,UAAU;aAsBtC;IAjBC,yBAAe;IAGf,4BAAqB;IACrB,iCAA6B;IAS7B,mCAAkH;IAMpH,0CAA0C;IAC1C,sBADY;QAAE,IAAI,CAAC,UAAS;KAAE,QA4B7B;CACF;;;;;WAlYa,gBAAgB;;;sBAlER,4BAA4B"}
+{"version":3,"file":"EditorImageFader.d.ts","sourceRoot":"","sources":["EditorImageFader.js"],"names":[],"mappings":"AA8DA;;;;;;;GAOG;AAEH;IAII;;;OAGG;IACH,kBAAsB;IAEtB;;;OAGG;IACH,gBAAmB;IAEnB,eAAe;IACf,8BAAwE;IAK1E;;;;OAIG;IACH,4BAmBC;IAED,eAAe;IACf,eAWC;IATC,yBAQE;IAGJ;;;;;;;;OAQG;IACH,kBAUC;IAED;;;;;OAKG;IACH,2BASC;IAED;;;;;;;OAOG;IACH,gBAEC;IAED;;;;;OAKG;IACH,qBA0CC;IAED,qCAAqC;IACrC,WADY,eAAe,QAK1B;IAED;;;;OAIG;IACH,gBAgBC;IAfC,+BAA2B;IAC3B,2BAAmB;IAgBrB,eAAe;IACf,4BAKC;IAED,eAAe;IACf,mBAmCC;IAjCC,mBAAqE;IAcrE,uBAGC;IAMC,uCAA2B;IAY/B,oEAAoE;IACpE,oCADY,OAAO,YAAY,EAAE,eAAe,iBAmB/C;IAjBC,mEAAuC;IAmBzC;;;;;;OAMG;IACH;QAL2B,GAAG;QACH,SAAS;QACT,KAAK;QACJ,MAAM;sBAUjC;IADC,8CAAiC;IAGnC,eAAe;IACf,wBA4CC;IAED;;;;;;;OAOG;IACH;QAN2B,GAAG;QACF,SAAS;QACT,KAAK;QACL,MAAM;QACL,UAAU;sBAwBtC;IAnBC,yBAAe;IAGf,4BAAqB;IACrB,iCAA6B;IAS7B,mCAEC;IAMH,0CAA0C;IAC1C,sBADY;QAAE,IAAI,CAAC,UAAS;KAAE,QA4B7B;CACF;;;;;WApYa,gBAAgB;;;sBAlER,4BAA4B"}

package/blocks/CloudImageEditor/src/EditorImageFader.js

@@ -138,9 +138,9 @@ export class EditorImageFader extends Block {
    * @param {String} [options.filter]
    * @param {String} [options.operation]
    * @param {Number} [options.value]
-   * @returns {String}
+   * @returns {Promise<String>}
    */
-  _imageSrc({ url = this._url, filter = this._filter, operation, value } = {}) {
+  async _imageSrc({ url = this._url, filter = this._filter, operation, value } = {}) {
     let transformations = { ...this._transformations };
 
     if (operation) {
@@ -149,17 +149,17 @@ export class EditorImageFader extends Block {
 
     // do not use getBoundingClientRect because scale transform affects it
     let width = this.offsetWidth;
-    return this.proxyUrl(viewerImageSrc(url, width, transformations));
+    return await this.proxyUrl(viewerImageSrc(url, width, transformations));
   }
 
   /**
    * @private
    * @param {String} operation
    * @param {Number} value
-   * @returns {Keypoint}
+   * @returns {Promise<Keypoint>}
    */
-  _constructKeypoint(operation, value) {
-    let src = this._imageSrc({ operation, value });
+  async _constructKeypoint(operation, value) {
+    let src = await this._imageSrc({ operation, value });
     return {
       src,
       image: null,
@@ -187,14 +187,14 @@ export class EditorImageFader extends Block {
    * @param {String | null} filter
    * @param {Number} value
    */
-  _addKeypoint(operation, filter, value) {
+  async _addKeypoint(operation, filter, value) {
     let shouldSkip = () =>
       !this._isSame(operation, filter) || this._value !== value || !!this._keypoints.find((kp) => kp.value === value);
 
     if (shouldSkip()) {
       return;
     }
-    let keypoint = this._constructKeypoint(operation, value);
+    let keypoint = await this._constructKeypoint(operation, value);
     let image = new Image();
     image.src = keypoint.src;
     let stop = this._handleImageLoading(keypoint.src);
@@ -308,10 +308,10 @@ export class EditorImageFader extends Block {
   }
 
   /** @param {import('./types.js').Transformations} transformations */
-  setTransformations(transformations) {
+  async setTransformations(transformations) {
     this._transformations = transformations;
     if (this._previewImage) {
-      let src = this._imageSrc();
+      let src = await this._imageSrc();
       let stop = this._handleImageLoading(src);
       this._previewImage.src = src;
       this._previewImage.addEventListener('load', stop, { once: true });
@@ -335,11 +335,11 @@ export class EditorImageFader extends Block {
    * @param {Number} options.value
    * @param {String} [options.filter]
    */
-  preload({ url, filter, operation, value }) {
+  async preload({ url, filter, operation, value }) {
     this._cancelBatchPreload && this._cancelBatchPreload();
 
     let keypoints = keypointsRange(operation, value);
-    let srcList = keypoints.map((kp) => this._imageSrc({ url, filter, operation, value: kp }));
+    let srcList = await Promise.all(keypoints.map((kp) => this._imageSrc({ url, filter, operation, value: kp })));
     let { cancel } = batchPreloadImages(srcList);
 
     this._cancelBatchPreload = cancel;
@@ -400,7 +400,7 @@ export class EditorImageFader extends Block {
    * @param {String} [options.filter]
    * @param {Boolean} [options.fromViewer]
    */
-  activate({ url, operation, value, filter, fromViewer }) {
+  async activate({ url, operation, value, filter, fromViewer }) {
     this._isActive = true;
     this._hidden = false;
     this._url = url;
@@ -411,12 +411,14 @@ export class EditorImageFader extends Block {
 
     let isOriginal = typeof value !== 'number' && !filter;
     if (isOriginal) {
-      let src = this._imageSrc({ operation, value });
+      let src = await this._imageSrc({ operation, value });
       this._setOriginalSrc(src);
       this._container && this._container.remove();
       return;
     }
-    this._keypoints = keypointsRange(operation, value).map((keyValue) => this._constructKeypoint(operation, keyValue));
+    this._keypoints = await Promise.all(
+      keypointsRange(operation, value).map((keyValue) => this._constructKeypoint(operation, keyValue)),
+    );
 
     this._update(operation, value);
     this._initNodes();

package/blocks/CloudImageEditor/src/EditorSlider.js

@@ -111,8 +111,8 @@ export class EditorSlider extends Block {
 }
 
 EditorSlider.template = /* HTML */ `
-  <uc-slider-ui
+  <lr-slider-ui
     ref="slider-el"
     set="disabled: disabled; min: min; max: max; defaultValue: defaultValue; zero: zero; onInput: on.input;"
-  ></uc-slider-ui>
+  ></lr-slider-ui>
 `;

package/blocks/CloudImageEditor/src/EditorToolbar.js

@@ -19,31 +19,31 @@ import { viewerImageSrc } from './util.js';
 /** @param {String} id */
 function renderTabToggle(id) {
   return /* HTML */ `
-    <uc-presence-toggle
+    <lr-presence-toggle
       class="uc-tab-toggle"
       set="visible: presence.tabToggle.${id}; styles: presence.tabToggleStyles;"
     >
-      <uc-btn-ui
+      <lr-btn-ui
         theme="tab"
         ref="tab-toggle-${id}"
         data-id="${id}"
         icon="${id}"
         set="onclick: on.clickTab; aria-role:tab_role; aria-controls:tab_${id}"
       >
-      </uc-btn-ui>
-    </uc-presence-toggle>
+      </lr-btn-ui>
+    </lr-presence-toggle>
   `;
 }
 
 /** @param {String} id */
 function renderTabContent(id) {
   return /* HTML */ `
-    <uc-presence-toggle
+    <lr-presence-toggle
       id="tab_${id}"
       class="uc-tab-content"
       set="visible: presence.tabContent.${id}; styles: presence.tabContentStyles"
     >
-      <uc-editor-scroller hidden-scrollbar>
+      <lr-editor-scroller hidden-scrollbar>
         <div class="uc-controls-list_align">
           <div
             role="listbox"
@@ -52,8 +52,8 @@ function renderTabContent(id) {
             ref="controls-list-${id}"
           ></div>
         </div>
-      </uc-editor-scroller>
-    </uc-presence-toggle>
+      </lr-editor-scroller>
+    </lr-presence-toggle>
   `;
 }
 
@@ -105,7 +105,7 @@ export class EditorToolbar extends Block {
         visible: 'uc-tab-toggles--visible',
       },
       'on.cancel': () => {
-        this._cancelPreload && this._cancelPreload();
+        this._cancelPreload?.();
         this.$['*on.cancel']();
       },
       'on.apply': () => {
@@ -271,11 +271,11 @@ export class EditorToolbar extends Block {
   }
 
   /** @private */
-  _preloadEditedImage() {
+  async _preloadEditedImage() {
     if (this.$['*imgContainerEl'] && this.$['*originalUrl']) {
       let width = this.$['*imgContainerEl'].offsetWidth;
-      let src = this.proxyUrl(viewerImageSrc(this.$['*originalUrl'], width, this.$['*editorTransformations']));
-      this._cancelPreload && this._cancelPreload();
+      let src = await this.proxyUrl(viewerImageSrc(this.$['*originalUrl'], width, this.$['*editorTransformations']));
+      this._cancelPreload?.();
       let { cancel } = batchPreloadImages([src]);
       this._cancelPreload = () => {
         cancel();
@@ -400,42 +400,42 @@ export class EditorToolbar extends Block {
 }
 
 EditorToolbar.template = /* HTML */ `
-  <uc-line-loader-ui set="active: showLoader"></uc-line-loader-ui>
+  <lr-line-loader-ui set="active: showLoader"></lr-line-loader-ui>
   <div class="uc-info-tooltip_container">
     <div class="uc-info-tooltip_wrapper">
       <div ref="tooltip-el" class="uc-info-tooltip uc-info-tooltip_hidden">{{*operationTooltip}}</div>
     </div>
   </div>
   <div class="uc-toolbar-container">
-    <uc-presence-toggle
+    <lr-presence-toggle
       role="tablist"
       class="uc-sub-toolbar"
       set="visible: presence.mainToolbar; styles: presence.subTopToolbarStyles"
     >
       <div class="uc-tab-content-row">${ALL_TABS.map(renderTabContent).join('')}</div>
       <div class="uc-controls-row">
-        <uc-presence-toggle
+        <lr-presence-toggle
           class="uc-tab-toggles"
           set="visible: presence.tabToggles; styles: presence.tabTogglesStyles"
         >
           <div ref="tabs-indicator" class="uc-tab-toggles_indicator"></div>
           ${ALL_TABS.map(renderTabToggle).join('')}
-        </uc-presence-toggle>
-        <uc-btn-ui style="order: -1" theme="secondary-icon" icon="closeMax" set="onclick: on.cancel"> </uc-btn-ui>
-        <uc-btn-ui theme="primary-icon" icon="done" set="onclick: on.apply"> </uc-btn-ui>
+        </lr-presence-toggle>
+        <lr-btn-ui style="order: -1" theme="secondary-icon" icon="closeMax" set="onclick: on.cancel"> </lr-btn-ui>
+        <lr-btn-ui theme="primary-icon" icon="done" set="onclick: on.apply"> </lr-btn-ui>
       </div>
-    </uc-presence-toggle>
-    <uc-presence-toggle
+    </lr-presence-toggle>
+    <lr-presence-toggle
       class="uc-sub-toolbar"
       set="visible: presence.subToolbar; styles: presence.subBottomToolbarStyles"
     >
       <div class="uc-slider">
-        <uc-editor-slider ref="slider-el"></uc-editor-slider>
+        <lr-editor-slider ref="slider-el"></lr-editor-slider>
       </div>
       <div class="uc-controls-row">
-        <uc-btn-ui theme="secondary" set="onclick: on.cancelSlider;" l10n="@text:cancel"> </uc-btn-ui>
-        <uc-btn-ui theme="primary" set="onclick: on.applySlider;" l10n="@text:apply"> </uc-btn-ui>
+        <lr-btn-ui theme="secondary" set="onclick: on.cancelSlider;" l10n="@text:cancel"> </lr-btn-ui>
+        <lr-btn-ui theme="primary" set="onclick: on.applySlider;" l10n="@text:apply"> </lr-btn-ui>
       </div>
-    </uc-presence-toggle>
+    </lr-presence-toggle>
   </div>
 `;