@uploadcare/file-uploader 0.50.1-alpha.2

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

@@ -0,0 +1 @@
+{"version":3,"file":"CameraSource.d.ts","sourceRoot":"","sources":["CameraSource.js"],"names":[],"mappings":"AAMA;IAEE,uBAA+C;IAE/C,eAAe;IACf,0BAAyB;IAEzB,WA0BE;IAbE,qBAAqB;IACrB,sCAAuC;IAc3C,eAAe;IACf,oBAKE;IAEF,eAAe;IACf,sBAME;IAEF,eAAe;IACf,iCAEE;IAEF;;;OAGG;IACH,6BA2BQ;IAER,eAAe;IACf,8BASC;IAED,eAAe;IACf,iBAuCC;IAnBC,eAAe;IACf,gBAA+C;IAC/C,eAAe;IACf,aAAyC;IASvC,eAAe;IACf,mBAAsB;IAQ1B,eAAe;IACf,qBAMC;IAED,eAAe;IACf,cAkBC;IAED,8BAgCC;CACF;;;;8BArN6B,iCAAiC"}

package/blocks/CameraSource/CameraSource.js

@@ -0,0 +1,253 @@
+import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+import { ActivityBlock } from '../../abstract/ActivityBlock.js';
+import { canUsePermissionsApi } from '../utils/abilities.js';
+import { debounce } from '../utils/debounce.js';
+import { UploadSource } from '../utils/UploadSource.js';
+
+export class CameraSource extends UploaderBlock {
+  couldBeCtxOwner = true;
+  activityType = ActivityBlock.activities.CAMERA;
+
+  /** @private */
+  _unsubPermissions = null;
+
+  init$ = {
+    ...this.init$,
+    video: null,
+    videoTransformCss: null,
+    shotBtnDisabled: true,
+    videoHidden: true,
+    messageHidden: true,
+    requestBtnHidden: canUsePermissionsApi(),
+    cameraSelectOptions: null,
+    cameraSelectHidden: true,
+    l10nMessage: '',
+
+    onCameraSelectChange: (e) => {
+      /** @type {String} */
+      this._selectedCameraId = e.target.value;
+      this._capture();
+    },
+    onCancel: () => {
+      this.historyBack();
+    },
+    onShot: () => {
+      this._shot();
+    },
+    onRequestPermissions: () => {
+      this._capture();
+    },
+  };
+
+  /** @private */
+  _onActivate = () => {
+    if (canUsePermissionsApi()) {
+      this._subscribePermissions();
+    }
+    this._capture();
+  };
+
+  /** @private */
+  _onDeactivate = () => {
+    if (this._unsubPermissions) {
+      this._unsubPermissions();
+    }
+
+    this._stopCapture();
+  };
+
+  /** @private */
+  _handlePermissionsChange = () => {
+    this._capture();
+  };
+
+  /**
+   * @private
+   * @param {'granted' | 'denied' | 'prompt'} state
+   */
+  _setPermissionsState = debounce((state) => {
+    this.classList.toggle('uc-initialized', state === 'granted');
+
+    if (state === 'granted') {
+      this.set$({
+        videoHidden: false,
+        shotBtnDisabled: false,
+        messageHidden: true,
+      });
+    } else if (state === 'prompt') {
+      this.$.l10nMessage = 'camera-permissions-prompt';
+      this.set$({
+        videoHidden: true,
+        shotBtnDisabled: true,
+        messageHidden: false,
+      });
+      this._stopCapture();
+    } else {
+      this.$.l10nMessage = 'camera-permissions-denied';
+
+      this.set$({
+        videoHidden: true,
+        shotBtnDisabled: true,
+        messageHidden: false,
+      });
+      this._stopCapture();
+    }
+  }, 300);
+
+  /** @private */
+  async _subscribePermissions() {
+    try {
+      // @ts-ignore
+      let permissionsResponse = await navigator.permissions.query({ name: 'camera' });
+      permissionsResponse.addEventListener('change', this._handlePermissionsChange);
+    } catch (err) {
+      console.log('Failed to use permissions API. Fallback to manual request mode.', err);
+      this._capture();
+    }
+  }
+
+  /** @private */
+  async _capture() {
+    let constr = {
+      video: {
+        width: {
+          ideal: 1920,
+        },
+        height: {
+          ideal: 1080,
+        },
+        frameRate: {
+          ideal: 30,
+        },
+      },
+      audio: false,
+    };
+    if (this._selectedCameraId) {
+      constr.video.deviceId = {
+        exact: this._selectedCameraId,
+      };
+    }
+    /** @private */
+    this._canvas = document.createElement('canvas');
+    /** @private */
+    this._ctx = this._canvas.getContext('2d');
+
+    try {
+      this._setPermissionsState('prompt');
+      let stream = await navigator.mediaDevices.getUserMedia(constr);
+      stream.addEventListener('inactive', () => {
+        this._setPermissionsState('denied');
+      });
+      this.$.video = stream;
+      /** @private */
+      this._capturing = true;
+      this._setPermissionsState('granted');
+    } catch (err) {
+      this._setPermissionsState('denied');
+      console.error('Failed to capture camera', err);
+    }
+  }
+
+  /** @private */
+  _stopCapture() {
+    if (this._capturing) {
+      this.$.video?.getTracks()[0].stop();
+      this.$.video = null;
+      this._capturing = false;
+    }
+  }
+
+  /** @private */
+  _shot() {
+    this._canvas.height = this.ref.video['videoHeight'];
+    this._canvas.width = this.ref.video['videoWidth'];
+    // @ts-ignore
+    this._ctx.drawImage(this.ref.video, 0, 0);
+    const date = Date.now();
+    const name = `camera-${date}.jpeg`;
+    const format = 'image/jpeg';
+    this._canvas.toBlob((blob) => {
+      let file = new File([blob], name, {
+        lastModified: date,
+        type: format,
+      });
+      this.api.addFileFromObject(file, { source: UploadSource.CAMERA });
+      this.set$({
+        '*currentActivity': ActivityBlock.activities.UPLOAD_LIST,
+      });
+    }, format);
+  }
+
+  async initCallback() {
+    super.initCallback();
+    this.registerActivity(this.activityType, {
+      onActivate: this._onActivate,
+      onDeactivate: this._onDeactivate,
+    });
+
+    this.subConfigValue('cameraMirror', (val) => {
+      this.$.videoTransformCss = val ? 'scaleX(-1)' : null;
+    });
+
+    try {
+      let deviceList = await navigator.mediaDevices.enumerateDevices();
+      let cameraSelectOptions = deviceList
+        .filter((info) => {
+          return info.kind === 'videoinput';
+        })
+        .map((info, idx) => {
+          return {
+            text: info.label.trim() || `${this.l10n('caption-camera')} ${idx + 1}`,
+            value: info.deviceId,
+          };
+        });
+      if (cameraSelectOptions.length > 1) {
+        this.$.cameraSelectOptions = cameraSelectOptions;
+        this.$.cameraSelectHidden = false;
+      }
+      this._selectedCameraId = cameraSelectOptions[0]?.value;
+    } catch (err) {
+      // mediaDevices isn't available for HTTP
+      // TODO: handle this case
+    }
+  }
+}
+
+CameraSource.template = /* HTML */ `
+  <uc-activity-header>
+    <button type="button" class="uc-mini-btn" set="onclick: *historyBack">
+      <uc-icon name="back"></uc-icon>
+    </button>
+    <div set="@hidden: !cameraSelectHidden">
+      <uc-icon name="camera"></uc-icon>
+      <span l10n="caption-camera"></span>
+    </div>
+    <uc-select
+      class="uc-camera-select"
+      set="$.options: cameraSelectOptions; @hidden: cameraSelectHidden; onchange: onCameraSelectChange"
+    >
+    </uc-select>
+    <button type="button" class="uc-mini-btn uc-close-btn" set="onclick: *closeModal">
+      <uc-icon name="close"></uc-icon>
+    </button>
+  </uc-activity-header>
+  <div class="uc-content">
+    <video
+      autoplay
+      playsinline
+      set="srcObject: video; style.transform: videoTransformCss; @hidden: videoHidden"
+      ref="video"
+    ></video>
+    <div class="uc-message-box" set="@hidden: messageHidden">
+      <span l10n="l10nMessage"></span>
+      <button
+        type="button"
+        set="onclick: onRequestPermissions; @hidden: requestBtnHidden"
+        l10n="camera-permissions-request"
+      ></button>
+    </div>
+    <button type="button" class="uc-shot-btn" set="onclick: onShot; @disabled: shotBtnDisabled">
+      <uc-icon name="camera"></uc-icon>
+    </button>
+  </div>
+`;

package/blocks/CameraSource/camera-source.css

@@ -0,0 +1,107 @@
+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] uc-camera-source {
+  width: min(calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2), calc(100vw - var(--uc-padding) * 2));
+  height: 100vh;
+  max-height: var(--modal-max-content-height);
+}
+
+uc-camera-source.uc-initialized {
+  height: max-content;
+}
+
+@media only screen and (max-width: 430px) {
+  uc-camera-source {
+    width: calc(100vw - var(--uc-padding) * 2);
+    height: var(--modal-content-height-fill, 100%);
+  }
+}
+
+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%;
+  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 {
+  position: absolute;
+  bottom: 20px;
+  width: 58px;
+  height: 58px;
+  color: var(--uc-background);
+  background-color: var(--uc-foreground);
+  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;
+}

package/blocks/CloudImageEditor/index.css

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

package/blocks/CloudImageEditor/index.d.ts

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

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

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

package/blocks/CloudImageEditor/index.js

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

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

@@ -0,0 +1,58 @@
+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;
+        '*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

@@ -0,0 +1 @@
+{"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,6BAkDC;IAED,4BA0FC;IA9EG,iCAAwB;CA+E7B;;;;sBA1NqB,4BAA4B;yBAezB,eAAe"}

package/blocks/CloudImageEditor/src/CloudImageEditorBlock.js

@@ -0,0 +1,228 @@
+// @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 { 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 = 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) {
+        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('cropPreset', (val) => {
+      this.$['*cropPresetList'] = parseCropPreset(val);
+    });
+
+    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());
+  }
+}
+
+CloudImageEditorBlock.template = TEMPLATE;
+CloudImageEditorBlock.bindAttributes({
+  uuid: 'uuid',
+  'cdn-url': 'cdnUrl',
+  'crop-preset': 'cropPreset',
+  tabs: 'tabs',
+});