@uploadcare/file-uploader 1.22.0 → 1.24.0-alpha.0

package/blocks/CameraSource/calcCameraModes.d.ts

@@ -1,5 +0,0 @@
-export function calcCameraModes(cfg: import("../../types").ConfigType): {
-    isVideoRecordingEnabled: boolean;
-    isPhotoEnabled: boolean;
-};
-//# sourceMappingURL=calcCameraModes.d.ts.map

package/blocks/CameraSource/calcCameraModes.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"calcCameraModes.d.ts","sourceRoot":"","sources":["calcCameraModes.js"],"names":[],"mappings":"AAKO,qCAAoC,OAAO,aAAa,EAAE,UAAU;;;EAK1E"}

package/blocks/CameraSource/calcCameraModes.js

@@ -1,11 +0,0 @@
-//@ts-check
-
-import { deserializeCsv } from '../utils/comma-separated.js';
-import { CameraSourceTypes } from './constants.js';
-
-export const calcCameraModes = (/** @type {import('../../types').ConfigType} } */ cfg) => {
-  return {
-    isVideoRecordingEnabled: deserializeCsv(cfg.cameraModes).includes(CameraSourceTypes.VIDEO),
-    isPhotoEnabled: deserializeCsv(cfg.cameraModes).includes(CameraSourceTypes.PHOTO),
-  };
-};

package/blocks/CameraSource/camera-source.css

@@ -1,183 +0,0 @@
-uc-camera-source {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-height: 100%;
-  overflow: hidden;
-  background-color: var(--uc-background);
-  border-radius: var(--uc-radius);
-}
-
-[uc-modal] > dialog:has(uc-camera-source[active]) {
-  width: 100%;
-  height: 100%;
-}
-
-uc-camera-source:not(.uc-initialized) .uc-controls {
-  display: none;
-}
-
-uc-camera-source video {
-  display: block;
-  width: 100%;
-  max-height: 100%;
-  object-fit: contain;
-  object-position: center center;
-  background-color: var(--uc-muted);
-  border-radius: var(--uc-radius);
-}
-
-uc-camera-source .uc-toolbar {
-  position: absolute;
-  bottom: 0;
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  padding: var(--uc-padding);
-  background-color: var(--uc-background);
-}
-
-uc-camera-source .uc-content {
-  display: flex;
-  flex: 1;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  padding: var(--uc-padding);
-  padding-top: 0;
-  overflow: hidden;
-}
-
-uc-camera-source .uc-message-box {
-  display: flex;
-  flex-direction: column;
-  grid-gap: 40px;
-  align-items: center;
-  justify-content: center;
-  padding: 40px 40px 0;
-  color: var(--uc-foreground);
-}
-
-uc-camera-source .uc-message-box button {
-  color: var(--uc-primary-foreground);
-  background-color: var(--uc-primary);
-}
-
-uc-camera-source .uc-shot-btn {
-  width: 58px;
-  height: 58px;
-  color: var(--uc-background);
-  background-color: var(--uc-primary-light);
-  border-radius: 50%;
-  opacity: 0.85;
-  transition:
-    bottom var(--uc-transition),
-    opacity var(--uc-transition),
-    transform var(--uc-transition);
-}
-
-uc-camera-source .uc-shot-btn:hover {
-  transform: scale(1.05);
-  opacity: 1;
-}
-
-uc-camera-source .uc-shot-btn:active {
-  transform: scale(1);
-  opacity: 1;
-}
-
-uc-camera-source .uc-shot-btn[disabled] {
-  bottom: -80px;
-}
-
-uc-camera-source .uc-shot-btn uc-icon svg {
-  width: 20px;
-  height: 20px;
-}
-
-uc-camera-source .uc-controls {
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  padding: 0 var(--uc-padding) var(--uc-padding);
-  min-height: 74px;
-}
-
-uc-camera-source .uc-switcher {
-  display: flex;
-  gap: calc(var(--uc-padding) / 2);
-}
-uc-camera-source .uc-switch.uc-active {
-  background-color: var(--uc-secondary);
-}
-
-uc-camera-source .uc-camera-actions {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 5px;
-}
-
-uc-camera-source .uc-stop-record {
-  background-color: var(--uc-destructive-foreground-light);
-  opacity: 1;
-}
-
-:where(uc-camera-source:is(.uc-recording)) .uc-recording-timer uc-icon {
-  display: none;
-}
-
-:where(uc-camera-source:is(.uc-recording)) .uc-recording-timer {
-  pointer-events: none;
-}
-
-uc-camera-source .uc-recording-timer {
-  z-index: 1;
-  position: relative;
-  overflow: hidden;
-}
-
-:where(uc-camera-source) .uc-recording-timer uc-icon {
-  width: 10px;
-  height: 10px;
-  margin-right: 10px;
-}
-
-uc-camera-source .uc-recording-timer .uc-line {
-  position: absolute;
-  content: '';
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background-color: var(--uc-foreground-light);
-  transform: scaleX(0);
-  transform-origin: left;
-  transition: transform var(--uc-transition);
-}
-
-uc-camera-source .uc-btn-microphone {
-  z-index: 1;
-}
-
-uc-camera-source .uc-select {
-  display: flex;
-}
-
-uc-camera-source .uc-audio-select {
-  width: 98px;
-}
-
-uc-camera-source .uc-audio-select select {
-  width: 100%;
-}
-
-uc-camera-source .uc-camera-action {
-  position: absolute;
-  inset: 0 var(--uc-padding) var(--uc-padding);
-  margin: 0 auto;
-}

package/blocks/CameraSource/constants.d.ts

@@ -1,16 +0,0 @@
-export const CameraSourceTypes: Readonly<{
-    PHOTO: "photo";
-    VIDEO: "video";
-}>;
-export const CameraSourceEvents: Readonly<{
-    IDLE: "idle";
-    SHOT: "shot";
-    PLAY: "play";
-    PAUSE: "pause";
-    RESUME: "resume";
-    STOP: "stop";
-    RETAKE: "retake";
-    ACCEPT: "accept";
-}>;
-export type ModeCameraType = (typeof CameraSourceTypes)[keyof typeof CameraSourceTypes];
-//# sourceMappingURL=constants.d.ts.map

package/blocks/CameraSource/constants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["constants.js"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;;;;;;;GAWG;6BAEW,CAAC,OAAO,iBAAiB,EAAE,MAAM,OAAO,iBAAiB,CAAC"}

package/blocks/CameraSource/constants.js

@@ -1,19 +0,0 @@
-export const CameraSourceTypes = Object.freeze({
-  PHOTO: 'photo',
-  VIDEO: 'video',
-});
-
-export const CameraSourceEvents = Object.freeze({
-  IDLE: 'idle',
-  SHOT: 'shot',
-
-  PLAY: 'play',
-  PAUSE: 'pause',
-  RESUME: 'resume',
-  STOP: 'stop',
-
-  RETAKE: 'retake',
-  ACCEPT: 'accept',
-});
-
-/** @typedef {(typeof CameraSourceTypes)[keyof typeof CameraSourceTypes]} ModeCameraType */

package/blocks/CloudImageEditor/index.css

@@ -1 +0,0 @@
-@import url('./src/css/index.css');

package/blocks/CloudImageEditor/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./src/index.js";
-//# sourceMappingURL=index.d.ts.map

package/blocks/CloudImageEditor/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":""}

package/blocks/CloudImageEditor/index.js

@@ -1 +0,0 @@
-export * from './src/index.js';

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

@@ -1,59 +0,0 @@
-export class CloudImageEditorBlock extends Block {
-    init$: {
-        '*originalUrl': null;
-        '*faderEl': null;
-        '*cropperEl': null;
-        '*imgEl': null;
-        '*imgContainerEl': null;
-        '*networkProblems': boolean;
-        '*imageSize': null;
-        '*editorTransformations': import("./types.js").Transformations;
-        '*cropPresetList': import("./types.js").CropPresetList;
-        '*currentAspectRatio': null;
-        '*tabList': ("crop" | "tuning" | "filters")[];
-        '*tabId': "crop";
-        entry: null;
-        extension: null;
-        editorMode: boolean;
-        modalCaption: string;
-        isImage: boolean;
-        msg: string;
-        src: string;
-        fileType: string;
-        showLoader: boolean;
-        uuid: null;
-        cdnUrl: null;
-        cropPreset: string;
-        tabs: string;
-        'presence.networkProblems': boolean;
-        'presence.modalCaption': boolean;
-        'presence.editorToolbar': boolean;
-        'presence.viewerToolbar': boolean;
-        '*on.retryNetwork': () => void;
-        '*on.apply': (transformations: import("./types.js").Transformations) => void;
-        '*on.cancel': () => void;
-    };
-    /** @private */
-    private _debouncedShowLoader;
-    /**
-     * @private
-     * @param {boolean} show
-     */
-    private _showLoader;
-    /**
-     * To proper work, we need non-zero size the element. So, we'll wait for it.
-     *
-     * @private
-     * @returns {Promise<void>}
-     */
-    private _waitForSize;
-    updateImage(): Promise<void>;
-    initEditor(): Promise<void>;
-    _imgLoading: boolean | undefined;
-}
-export namespace CloudImageEditorBlock {
-    export { TEMPLATE as template };
-}
-import { Block } from '../../../abstract/Block.js';
-import { TEMPLATE } from './template.js';
-//# sourceMappingURL=CloudImageEditorBlock.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"CloudImageEditorBlock.d.ts","sourceRoot":"","sources":["CloudImageEditorBlock.js"],"names":[],"mappings":"AAmBA;IAOI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAGC;IAGH,eAAe;IACf,6BAAkE;IAElE;;;OAGG;IACH,oBAEC;IAED;;;;;OAKG;IACH,qBAeC;IAYD,6BAmDC;IAED,4BAwGC;IA5FG,iCAAwB;CA6F7B;;;;sBAzOqB,4BAA4B;yBAezB,eAAe"}

package/blocks/CloudImageEditor/src/CloudImageEditorBlock.js

@@ -1,243 +0,0 @@
-// @ts-check
-import { Block } from '../../../abstract/Block.js';
-import {
-  createCdnUrl,
-  createCdnUrlModifiers,
-  createOriginalUrl,
-  extractOperations,
-  extractUuid,
-} from '../../../utils/cdn-utils.js';
-import { TRANSPARENT_PIXEL_SRC } from '../../../utils/transparentPixelSrc.js';
-import { debounce } from '../../utils/debounce.js';
-import { classNames } from './lib/classNames.js';
-import { getClosestAspectRatio, parseCropPreset } from './lib/parseCropPreset.js';
-import { parseTabs } from './lib/parseTabs.js';
-import { operationsToTransformations, transformationsToOperations } from './lib/transformationUtils.js';
-import { initState } from './state.js';
-import { TEMPLATE } from './template.js';
-import { TabId } from './toolbar-constants.js';
-
-export class CloudImageEditorBlock extends Block {
-  ctxOwner = true;
-  static styleAttrs = ['uc-cloud-image-editor'];
-
-  constructor() {
-    super();
-
-    this.init$ = {
-      ...this.init$,
-      ...initState(this),
-    };
-  }
-
-  /** @private */
-  _debouncedShowLoader = debounce(this._showLoader.bind(this), 300);
-
-  /**
-   * @private
-   * @param {boolean} show
-   */
-  _showLoader(show) {
-    this.$.showLoader = show;
-  }
-
-  /**
-   * To proper work, we need non-zero size the element. So, we'll wait for it.
-   *
-   * @private
-   * @returns {Promise<void>}
-   */
-  _waitForSize() {
-    const TIMEOUT = 3000;
-    return new Promise((resolve, reject) => {
-      const timeoutId = setTimeout(() => {
-        reject(new Error('[cloud-image-editor] timeout waiting for non-zero container size'));
-      }, TIMEOUT);
-      const resizeObserver = new ResizeObserver(([element]) => {
-        if (element.contentRect.width > 0 && element.contentRect.height > 0) {
-          resolve();
-          clearTimeout(timeoutId);
-          resizeObserver.disconnect();
-        }
-      });
-      resizeObserver.observe(this);
-    });
-  }
-
-  initCallback() {
-    super.initCallback();
-
-    this.$['*faderEl'] = this.ref['fader-el'];
-    this.$['*cropperEl'] = this.ref['cropper-el'];
-    this.$['*imgContainerEl'] = this.ref['img-container-el'];
-
-    this.initEditor();
-  }
-
-  async updateImage() {
-    if (!this.isConnected) {
-      return;
-    }
-    await this._waitForSize();
-
-    if (this.$.cdnUrl) {
-      const uuid = extractUuid(this.$.cdnUrl);
-      const originalUrl = createOriginalUrl(this.$.cdnUrl, uuid);
-      if (originalUrl === this.$['*originalUrl']) {
-        return;
-      }
-      this.$['*originalUrl'] = originalUrl;
-      const operations = extractOperations(this.$.cdnUrl);
-      const transformations = operationsToTransformations(operations);
-      this.$['*editorTransformations'] = transformations;
-    } else if (this.$.uuid) {
-      const originalUrl = createOriginalUrl(this.cfg.cdnCname, this.$.uuid);
-      if (originalUrl === this.$['*originalUrl']) {
-        return;
-      }
-      this.$['*originalUrl'] = originalUrl;
-      this.$['*editorTransformations'] = {};
-    } else {
-      throw new Error('No UUID nor CDN URL provided');
-    }
-
-    if (this.$['*tabId'] === TabId.CROP) {
-      this.$['*cropperEl'].deactivate({ reset: true });
-    } else {
-      this.$['*faderEl'].deactivate();
-    }
-
-    try {
-      const cdnUrl = await this.proxyUrl(createCdnUrl(this.$['*originalUrl'], createCdnUrlModifiers('json')));
-      const json = await fetch(cdnUrl).then((response) => response.json());
-
-      const { width, height } = /** @type {{ width: number; height: number }} */ (json);
-      this.$['*imageSize'] = { width, height };
-
-      if (this.$['*tabId'] === TabId.CROP) {
-        this.$['*cropperEl'].activate(this.$['*imageSize']);
-      } else {
-        this.$['*faderEl'].activate({ url: this.$['*originalUrl'] });
-      }
-    } catch (err) {
-      if (err) {
-        this.telemetryManager.sendEventError(err, 'cloud editor image. Failed to load image info');
-        console.error('Failed to load image info', err);
-      }
-    }
-  }
-
-  async initEditor() {
-    try {
-      await this._waitForSize();
-    } catch (err) {
-      if (this.isConnected) {
-        // @ts-ignore TODO: fix this
-        console.error(err.message);
-      }
-      return;
-    }
-
-    this.ref['img-el'].addEventListener('load', () => {
-      this._imgLoading = false;
-      this._debouncedShowLoader(false);
-
-      if (this.$.src !== TRANSPARENT_PIXEL_SRC) {
-        this.$['*networkProblems'] = false;
-      }
-    });
-
-    this.ref['img-el'].addEventListener('error', () => {
-      this._imgLoading = false;
-      this._debouncedShowLoader(false);
-
-      this.$['*networkProblems'] = true;
-    });
-
-    this.sub('src', (src) => {
-      let el = this.ref['img-el'];
-      if (el.src !== src) {
-        this._imgLoading = true;
-        el.src = src || TRANSPARENT_PIXEL_SRC;
-      }
-    });
-
-    this.sub(
-      'tabs',
-      /** @param {string} val */ (val) => {
-        this.$['*tabList'] = parseTabs(val);
-      },
-    );
-
-    this.sub('*tabId', (tabId) => {
-      this.ref['img-el'].className = classNames('uc-image', {
-        'uc-image_hidden_to_cropper': tabId === TabId.CROP,
-        'uc-image_hidden_effects': tabId !== TabId.CROP,
-      });
-    });
-
-    this.classList.add('uc-editor_ON');
-
-    this.sub('*networkProblems', (networkProblems) => {
-      this.$['presence.networkProblems'] = networkProblems;
-      this.$['presence.modalCaption'] = !networkProblems;
-    });
-
-    this.sub(
-      '*editorTransformations',
-      (transformations) => {
-        if (Object.keys(transformations).length === 0) {
-          return;
-        }
-        let originalUrl = this.$['*originalUrl'];
-        let cdnUrlModifiers = createCdnUrlModifiers(transformationsToOperations(transformations), 'preview');
-        let cdnUrl = createCdnUrl(originalUrl, cdnUrlModifiers);
-
-        /** @type {import('./types.js').ApplyResult} */
-        let eventData = {
-          originalUrl,
-          cdnUrlModifiers,
-          cdnUrl,
-          transformations,
-        };
-        this.dispatchEvent(
-          new CustomEvent('change', {
-            detail: eventData,
-            bubbles: true,
-            composed: true,
-          }),
-        );
-      },
-      false,
-    );
-
-    this.sub('uuid', (val) => val && this.updateImage());
-    this.sub('cdnUrl', (val) => val && this.updateImage());
-
-    this.sub('cropPreset', (val) => {
-      const list = parseCropPreset(val);
-      let closest = null;
-
-      if (this.$.cdnUrl) {
-        const operations = extractOperations(this.$.cdnUrl);
-        const transformations = operationsToTransformations(operations);
-
-        if (Array.isArray(transformations?.crop?.dimensions)) {
-          const [w, h] = transformations?.crop?.dimensions;
-          closest = getClosestAspectRatio(w, h, list, 0.1);
-        }
-      }
-
-      this.$['*cropPresetList'] = list;
-      this.$['*currentAspectRatio'] = closest ?? list?.[0] ?? null;
-    });
-  }
-}
-
-CloudImageEditorBlock.template = TEMPLATE;
-CloudImageEditorBlock.bindAttributes({
-  uuid: 'uuid',
-  'cdn-url': 'cdnUrl',
-  'crop-preset': 'cropPreset',
-  tabs: 'tabs',
-});