@uploadcare/file-uploader 1.13.0-alpha.1 → 1.13.0-alpha.3

package/abstract/UploaderPublicApi.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UploaderPublicApi.d.ts","sourceRoot":"","sources":["UploaderPublicApi.js"],"names":[],"mappings":"AAaA;IAOE,8DAA8D;IAC9D,iBADY,OAAO,oBAAoB,EAAE,aAAa,EAGrD;IATD;;;OAGG;IACH,aAAK;IAOL,eAAe;IACf,gCAEC;IAED,yCAEC;IAED;;iBAEC;IAED;;;;;;OAMG;IACH,sBAJW,MAAM;;;;sBAEJ,OAAO,UAAU,EAAE,eAAe,CAAC,MAAM,CAAC,CAUrD;IAEF;;;;OAIG;IACH,wBAJW,MAAM;;;;sBAEJ,OAAO,UAAU,EAAE,eAAe,CAAC,MAAM,CAAC,CAUrD;IAEF;;;;OAIG;IACH,4BAJW,MAAM;;;;sBAEJ,OAAO,UAAU,EAAE,eAAe,CAAC,MAAM,CAAC,CAgBrD;IAEF;;;;OAIG;IACH,0BAJW,IAAI;;;;;sBAEF,OAAO,UAAU,EAAE,eAAe,CAAC,MAAM,CAAC,CAcrD;IAEF,iCAAiC;IACjC,qCADY,MAAM,UAMhB;IAEF,uBAEC;IAED,sBAeE;IAEF,mDAAmD;IACnD,6BADY;QAAE,aAAa,CAAC,EAAE,OAAO,CAAA;KAAE,UAkDrC;IAEF;;;;OAIG;IACH,8EAHW,MAAM,iDA8Cf;IAEF,oEAAoE;IACpE,oKAIE;IAEF,+BAA+B;IAC/B,gDAsCE;IAEF,qBAQE;IAEF;;;;;;;;;OASG;IACH,uTAFQ,IAAI,CAWV;IAEF,2DAA2D;IAC3D,0BADc,OAAO,oBAAoB,EAAE,YAAY,CAGrD;IAEF,8BAA8B;IAC9B,wBADY,OAAO,UAOjB;IAEF;;;OAGG;IACH,0BAOC;CACF"}
+{"version":3,"file":"UploaderPublicApi.d.ts","sourceRoot":"","sources":["UploaderPublicApi.js"],"names":[],"mappings":"AAYA;IAOE,8DAA8D;IAC9D,iBADY,OAAO,oBAAoB,EAAE,aAAa,EAGrD;IATD;;;OAGG;IACH,aAAK;IAOL,eAAe;IACf,gCAEC;IAED,yCAEC;IAED;;iBAEC;IAED;;;;;;OAMG;IACH,sBAJW,MAAM;;;;sBAEJ,OAAO,UAAU,EAAE,eAAe,CAAC,MAAM,CAAC,CAUrD;IAEF;;;;OAIG;IACH,wBAJW,MAAM;;;;sBAEJ,OAAO,UAAU,EAAE,eAAe,CAAC,MAAM,CAAC,CAUrD;IAEF;;;;OAIG;IACH,4BAJW,MAAM;;;;sBAEJ,OAAO,UAAU,EAAE,eAAe,CAAC,MAAM,CAAC,CAgBrD;IAEF;;;;OAIG;IACH,0BAJW,IAAI;;;;;sBAEF,OAAO,UAAU,EAAE,eAAe,CAAC,MAAM,CAAC,CAcrD;IAEF,iCAAiC;IACjC,qCADY,MAAM,UAMhB;IAEF,uBAEC;IAED,sBAeE;IAEF,mDAAmD;IACnD,6BADY;QAAE,aAAa,CAAC,EAAE,OAAO,CAAA;KAAE,UA0DrC;IAEF;;;;OAIG;IACH,8EAHW,MAAM,iDA8Cf;IAEF,oEAAoE;IACpE,oKAIE;IAEF,+BAA+B;IAC/B,gDAsCE;IAEF,qBAQE;IAEF;;;;;;;;;OASG;IACH,uTAFQ,IAAI,CAWV;IAEF,2DAA2D;IAC3D,0BADc,OAAO,oBAAoB,EAAE,YAAY,CAGrD;IAEF,8BAA8B;IAC9B,wBADY,OAAO,UAOjB;IAEF;;;OAGG;IACH,0BAOC;CACF"}

package/abstract/UploaderPublicApi.js

@@ -4,12 +4,11 @@ import { ActivityBlock } from './ActivityBlock.js';
 import { applyStyles, Data } from '@symbiotejs/symbiote';
 import { EventType } from '../blocks/UploadCtxProvider/EventEmitter.js';
 import { UploadSource } from '../blocks/utils/UploadSource.js';
-import { deserializeCsv, serializeCsv } from '../blocks/utils/comma-separated.js';
+import { serializeCsv } from '../blocks/utils/comma-separated.js';
 import { IMAGE_ACCEPT_LIST, fileIsImage, mergeFileTypes } from '../utils/fileTypes.js';
 import { parseCdnUrl } from '../utils/parseCdnUrl.js';
 import { buildOutputCollectionState } from './buildOutputCollectionState.js';
 import { stringToArray } from '../utils/stringToArray.js';
-import { CameraSourceTypes } from '../blocks/CameraSource/constants.js';
 
 export class UploaderPublicApi {
   /**
@@ -142,6 +141,15 @@ export class UploaderPublicApi {
     const accept = serializeCsv(
       mergeFileTypes([this.cfg.accept ?? '', ...(this.cfg.imgOnly ? IMAGE_ACCEPT_LIST : [])]),
     );
+
+    if (this.cfg.accept && !!this.cfg.imgOnly) {
+      console.warn(
+        'There could be a mistake.\n' +
+          'Both `accept` and `imgOnly` parameters are set.\n' +
+          'The value of `accept` will be concatenated with the internal image mime types list.',
+      );
+    }
+
     const INPUT_ATTR_NAME = 'uploadcare-file-input';
     const fileInput = document.createElement('input');
     fileInput.setAttribute(INPUT_ATTR_NAME, '');
@@ -155,8 +163,7 @@ export class UploaderPublicApi {
     fileInput.multiple = this.cfg.multiple;
     if (options.captureCamera) {
       fileInput.capture = this.cfg.cameraCapture;
-      const isVideoRecordingEnabled = deserializeCsv(this.cfg.cameraModes).includes(CameraSourceTypes.VIDEO);
-      fileInput.accept = ['image/*', isVideoRecordingEnabled && 'video/*'].filter(Boolean).join(',');
+      fileInput.accept = this.cfg.enableVideoRecording ? ['image/*', 'video/*'].join(',') : 'image/*';
     } else {
       fileInput.accept = accept;
     }

package/blocks/CameraSource/CameraSource.d.ts

@@ -1,4 +1,4 @@
-/** @typedef {'photo' | 'video'} CameraMode */
+/** @typedef {'photo' | 'video'} CameraTabId */
 /** @typedef {'shot' | 'retake' | 'accept' | 'play' | 'stop' | 'pause' | 'resume'} CameraStatus */
 export class CameraSource extends UploaderBlock {
     activityType: "camera";
@@ -32,12 +32,12 @@ export class CameraSource extends UploaderBlock {
         audioSelectOptions: null;
         audioSelectHidden: boolean;
         audioSelectDisabled: boolean;
-        audioToggleMicrophoneHidden: boolean;
+        audioToggleMicorphoneHidden: boolean;
         tabCameraHidden: boolean;
         tabVideoHidden: boolean;
         currentIcon: string;
         currentTimelineIcon: string;
-        toggleMicrophoneIcon: string;
+        toggleMicorphoneIcon: string;
         /** @type {Number} */
         _startTime: number;
         /** @type {Number} */
@@ -117,10 +117,10 @@ export class CameraSource extends UploaderBlock {
     _ctx: CanvasRenderingContext2D | null | undefined;
     /**
      * @private
-     * @param {CameraMode} tabId
+     * @param {CameraTabId} tabId
      */
     private _handleActiveTab;
-    _activeTab: CameraMode | undefined;
+    _activeTab: CameraTabId | undefined;
     /**
      * @param {'camera' | 'video'} type
      * @param {'jpeg' | 'webm'} ext
@@ -136,8 +136,6 @@ export class CameraSource extends UploaderBlock {
      * @param {File} file
      */
     _toSend: (file: File) => void;
-    /** @private */
-    private get _cameraModes();
     /**
      * @private
      * @param {'granted' | 'denied' | 'prompt'} state
@@ -152,25 +150,37 @@ export class CameraSource extends UploaderBlock {
     _getPermission: () => void;
     _requestDeviceAccess: () => Promise<void>;
     _getDevices: () => Promise<void>;
-    _cameraDevices: {
+    cameraDevices: {
         text: string;
         value: string;
     }[] | undefined;
-    _audioDevices: false | {
+    audioDevices: false | {
         text: string;
         value: string;
     }[] | undefined;
     _onActivate: () => Promise<void>;
     _onDeactivate: () => Promise<void>;
-    /** @param {CameraMode[]} cameraModes */
-    _handleCameraModes: (cameraModes: CameraMode[]) => void;
     _destroy(): void;
     destroyCallback(): Promise<void>;
 }
 export namespace CameraSource {
+    let types: Readonly<{
+        PHOTO: "photo";
+        VIDEO: "video";
+    }>;
+    let events: Readonly<{
+        IDLE: "idle";
+        SHOT: "shot";
+        PLAY: "play";
+        PAUSE: "pause";
+        RESUME: "resume";
+        STOP: "stop";
+        RETAKE: "retake";
+        ACCEPT: "accept";
+    }>;
     let template: string;
 }
-export type CameraMode = 'photo' | 'video';
+export type CameraTabId = 'photo' | 'video';
 export type CameraStatus = 'shot' | 'retake' | 'accept' | 'play' | 'stop' | 'pause' | 'resume';
 import { UploaderBlock } from '../../abstract/UploaderBlock.js';
 //# sourceMappingURL=CameraSource.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CameraSource.d.ts","sourceRoot":"","sources":["CameraSource.js"],"names":[],"mappings":"AAyCA,8CAA8C;AAE9C,kGAAkG;AAElG;IAEE,uBAA+C;IAE/C,eAAe;IACf,0BAAyB;IAEzB,yBAAyB;IACzB,SADW,QAAQ,EAAE,CACR;IAEb,mCAAmC;IACnC,gBADW,aAAa,GAAG,IAAI,CACT;IAEtB,iCAAiC;IACjC,SADW,WAAW,GAAG,IAAI,CACd;IAEf,4BAA4B;IAC5B,kBADW,MAAM,GAAG,IAAI,CACA;IAExB,4BAA4B;IAC5B,mBADW,MAAM,GAAG,IAAI,CACC;IAKvB;;;;;;;;;;;;;;;;;;;;;;;;QAiCE,qBAAqB;;QAErB,qBAAqB;;;;QAMrB,uBAAuB;kCAAX,KAAK;QAMjB,uBAAuB;iCAAX,KAAK;;;;QAcjB,iDAAiD;;;;;;;;QAejD,4BAA4B;wBAAhB,UAAU;;;;;;;;;;;;;;MAKvB;IAGH,oCAaE;IAEF,yBAkBE;IADA,sCAAiE;IAGnE,wBAKE;IAEF,uBAEE;IAEF,2BAOE;IAEF,0BAEE;IAEF,4BAiCE;IA9BE;;;;;kBAEC;IA8BL,eAAe;IACf,uBAWE;IAEF,2DAA2D;IAC3D,6BAQE;IAEF,+BAOE;IAEF;;;;OAIG;IACH,sBA6BE;IAEF,oBAUE;IAEF,oBAoBE;IAEF,mCAAmC;IACnC,uBADY,YAAY,UAqBtB;IAEF,mCAAmC;IACnC,uBADY,YAAY,UAwCtB;IAEF;;;OAGG;IACH,wBAmBE;IAEF,eAAe;IACf,cAoBC;IAjBC,uCAA+C;IAC/C,kDAAyC;IAkB3C;;;OAGG;IACH,yBAwBE;IADA,mCAAuB;IAGzB;;;;;OAKG;IACH,oBALW,QAAQ,GAAG,OAAO,OAClB,MAAM,GAAG,MAAM,wBAEf,IAAI,UAYb;IAEF,uCAAuC;IACvC,4BADY,SAAS,SAAS,OAmC7B;IAED;;;;OAIG;IACH,gBAFW,IAAI,UAOb;IAEF,eAAe;IACf,2BAEC;IAED;;;OAGG;IACH,6BA+CQ;IAER,6CAQE;IAEF,yBAWE;IAFE,gCAAuB;IAI3B,8BAyCE;IAEF,qCAEE;IAEF,uCAYE;IAEF,2BAA0B;IAE1B,0CASE;IAEF,iCAsCE;IAlCE;;;oBAKK;IAEL;;;oBAOO;IAsBX,iCAME;IAEF,mCAYE;IAEF,wCAAwC;IACxC,kCADY,UAAU,EAAE,UAStB;IAyBF,iBAMC;IAED,iCAIC;CACF;;;;yBAjxBa,OAAO,GAAG,OAAO;2BAEjB,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ;8BAzCnD,iCAAiC"}
+{"version":3,"file":"CameraSource.d.ts","sourceRoot":"","sources":["CameraSource.js"],"names":[],"mappings":"AAsCA,+CAA+C;AAE/C,kGAAkG;AAElG;IAEE,uBAA+C;IAE/C,eAAe;IACf,0BAAyB;IAEzB,yBAAyB;IACzB,SADW,QAAQ,EAAE,CACR;IAEb,mCAAmC;IACnC,gBADW,aAAa,GAAG,IAAI,CACT;IAEtB,iCAAiC;IACjC,SADW,WAAW,GAAG,IAAI,CACd;IAEf,4BAA4B;IAC5B,kBADW,MAAM,GAAG,IAAI,CACA;IAExB,4BAA4B;IAC5B,mBADW,MAAM,GAAG,IAAI,CACC;IAKvB;;;;;;;;;;;;;;;;;;;;;;;;QAiCE,qBAAqB;;QAErB,qBAAqB;;;;QAMrB,uBAAuB;kCAAX,KAAK;QAMjB,uBAAuB;iCAAX,KAAK;;;;QAcjB,iDAAiD;;;;;;;;QAejD,4BAA4B;wBAAhB,UAAU;;;;;;;;;;;;;;MAKvB;IAGH,oCAaE;IAEF,yBAkBE;IADA,sCAAiE;IAGnE,wBAKE;IAEF,uBAEE;IAEF,2BAOE;IAEF,0BAEE;IAEF,4BAiCE;IA9BE;;;;;kBAEC;IA8BL,eAAe;IACf,uBAWE;IAEF,2DAA2D;IAC3D,6BAQE;IAEF,+BAOE;IAEF;;;;OAIG;IACH,sBA6BE;IAEF,oBAUE;IAEF,oBAoBE;IAEF,mCAAmC;IACnC,uBADY,YAAY,UAqBtB;IAEF,mCAAmC;IACnC,uBADY,YAAY,UAuCtB;IAEF;;;OAGG;IACH,wBAmBE;IAEF,eAAe;IACf,cAoBC;IAjBC,uCAA+C;IAC/C,kDAAyC;IAkB3C;;;OAGG;IACH,yBAwBE;IADA,oCAAuB;IAGzB;;;;;OAKG;IACH,oBALW,QAAQ,GAAG,OAAO,OAClB,MAAM,GAAG,MAAM,wBAEf,IAAI,UAYb;IAEF,uCAAuC;IACvC,4BADY,SAAS,SAAS,OAmC7B;IAED;;;;OAIG;IACH,gBAFW,IAAI,UAOb;IAEF;;;OAGG;IACH,6BA8CQ;IAER,6CAQE;IAEF,yBAWE;IAFE,gCAAuB;IAI3B,8BAyCE;IAEF,qCAEE;IAEF,uCAYE;IAEF,2BAA0B;IAE1B,0CASE;IAEF,iCAsCE;IAlCE;;;oBAKK;IAEL;;;oBAOO;IAsBX,iCAIE;IAEF,mCAYE;IAgCF,iBAMC;IAED,iCAIC;CACF;;;;;;;;;;;;;;;;;;0BApwBa,OAAO,GAAG,OAAO;2BAEjB,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ;8BAtCnD,iCAAiC"}

package/blocks/CameraSource/CameraSource.js

@@ -1,12 +1,9 @@
 //@ts-nocheck
 import { ActivityBlock } from '../../abstract/ActivityBlock.js';
 import { UploaderBlock } from '../../abstract/UploaderBlock.js';
-import { stringToArray } from '../../utils/stringToArray.js';
 import { canUsePermissionsApi } from '../utils/abilities.js';
-import { deserializeCsv } from '../utils/comma-separated.js';
 import { debounce } from '../utils/debounce.js';
 import { UploadSource } from '../utils/UploadSource.js';
-import { CameraSourceEvents, CameraSourceTypes } from './constants.js';
 
 const DEFAULT_VIDEO_CONFIG = {
   width: {
@@ -39,7 +36,7 @@ function formatTime(time) {
 const DEFAULT_PICTURE_FORMAT = 'image/jpeg';
 const DEFAULT_VIDEO_FORMAT = 'video/webm';
 
-/** @typedef {'photo' | 'video'} CameraMode */
+/** @typedef {'photo' | 'video'} CameraTabId */
 
 /** @typedef {'shot' | 'retake' | 'accept' | 'play' | 'stop' | 'pause' | 'resume'} CameraStatus */
 
@@ -92,14 +89,14 @@ export class CameraSource extends UploaderBlock {
       audioSelectOptions: null,
       audioSelectHidden: true,
       audioSelectDisabled: true,
-      audioToggleMicrophoneHidden: true,
+      audioToggleMicorphoneHidden: true,
 
       tabCameraHidden: true,
       tabVideoHidden: true,
 
       currentIcon: 'camera-full',
       currentTimelineIcon: 'play',
-      toggleMicrophoneIcon: 'microphone',
+      toggleMicorphoneIcon: 'microphone',
 
       /** @type {Number} */
       _startTime: 0,
@@ -147,17 +144,17 @@ export class CameraSource extends UploaderBlock {
       /** @param {MouseEvent} e */
       onClickTab: (e) => {
         const id = /** @type {HTMLElement} */ (e.currentTarget).getAttribute('data-id');
-        if (id) this._handleActiveTab(/** @type {CameraMode} */ (id));
+        if (id) this._handleActiveTab(/** @type {CameraTabId} */ (id));
       },
     };
   }
 
   _chooseActionWithCamera = () => {
-    if (this._activeTab === CameraSourceTypes.PHOTO) {
+    if (this._activeTab === CameraSource.types.PHOTO) {
       this._shot();
     }
 
-    if (this._activeTab === CameraSourceTypes.VIDEO) {
+    if (this._activeTab === CameraSource.types.VIDEO) {
       if (this._mediaRecorder?.state === 'recording') {
         this._stopRecording();
         return;
@@ -215,10 +212,10 @@ export class CameraSource extends UploaderBlock {
     try {
       this._chunks = [];
       this._options = {
-        ...this.cfg.mediaRecorderOptions,
+        ...this.cfg.mediaRecorerOptions,
       };
 
-      const { mimeType } = this.cfg.mediaRecorderOptions || {};
+      const { mimeType } = this.cfg.mediaRecorerOptions || {};
 
       if (mimeType && MediaRecorder.isTypeSupported(mimeType)) {
         this._options.mimeType = mimeType;
@@ -239,7 +236,7 @@ export class CameraSource extends UploaderBlock {
         this._startTimer();
 
         this.classList.add('uc-recording');
-        this._setCameraState(CameraSourceEvents.PLAY);
+        this._setCameraState(CameraSource.events.PLAY);
       }
     } catch (error) {
       console.error('Failed to start recording', error);
@@ -253,7 +250,7 @@ export class CameraSource extends UploaderBlock {
 
       this._stopTimer();
 
-      this._setCameraState(CameraSourceEvents.STOP);
+      this._setCameraState(CameraSource.events.STOP);
     });
 
     this._mediaRecorder?.stop();
@@ -275,7 +272,7 @@ export class CameraSource extends UploaderBlock {
     this._stream?.getAudioTracks().forEach((track) => {
       track.enabled = !track.enabled;
 
-      this.$.toggleMicrophoneIcon = !track.enabled ? 'microphone-mute' : 'microphone';
+      this.$.toggleMicorphoneIcon = !track.enabled ? 'microphone-mute' : 'microphone';
       this.$.audioSelectDisabled = !track.enabled;
     });
   };
@@ -317,10 +314,10 @@ export class CameraSource extends UploaderBlock {
   };
 
   _retake = () => {
-    this._setCameraState(CameraSourceEvents.RETAKE);
+    this._setCameraState(CameraSource.events.RETAKE);
 
     /** Reset video */
-    if (this._activeTab === CameraSourceTypes.VIDEO) {
+    if (this._activeTab === CameraSource.types.VIDEO) {
       this.$.video = this._stream;
       this.ref.video.muted = true;
     }
@@ -329,9 +326,9 @@ export class CameraSource extends UploaderBlock {
   };
 
   _accept = () => {
-    this._setCameraState(CameraSourceEvents.ACCEPT);
+    this._setCameraState(CameraSource.events.ACCEPT);
 
-    if (this._activeTab === CameraSourceTypes.PHOTO) {
+    if (this._activeTab === CameraSource.types.PHOTO) {
       this._canvas?.toBlob((blob) => {
         const file = this._createFile('camera', 'jpeg', DEFAULT_PICTURE_FORMAT, blob);
         this._toSend(file);
@@ -352,7 +349,7 @@ export class CameraSource extends UploaderBlock {
 
   /** @param {CameraStatus} status */
   _handlePhoto = (status) => {
-    if (status === CameraSourceEvents.SHOT) {
+    if (status === CameraSource.events.SHOT) {
       this.set$({
         tabVideoHidden: true,
         cameraHidden: true,
@@ -362,20 +359,20 @@ export class CameraSource extends UploaderBlock {
       });
     }
 
-    if (status === CameraSourceEvents.RETAKE || status === CameraSourceEvents.ACCEPT) {
+    if (status === CameraSource.events.RETAKE || status === CameraSource.events.ACCEPT) {
       this.set$({
-        tabVideoHidden: !this._cameraModes.includes(CameraSourceTypes.VIDEO),
-        tabCameraHidden: !this._cameraModes.includes(CameraSourceTypes.PHOTO),
+        tabVideoHidden: !this.cfg.enableVideoRecording,
         cameraHidden: false,
+        tabCameraHidden: false,
         cameraActionsHidden: true,
-        cameraSelectHidden: this._cameraDevices.length <= 1,
+        cameraSelectHidden: this.cameraDevices.length <= 1,
       });
     }
   };
 
   /** @param {CameraStatus} status */
   _handleVideo = (status) => {
-    if (status === CameraSourceEvents.PLAY) {
+    if (status === CameraSource.events.PLAY) {
       this.set$({
         timerHidden: false,
         tabCameraHidden: true,
@@ -389,28 +386,27 @@ export class CameraSource extends UploaderBlock {
       });
     }
 
-    if (status === CameraSourceEvents.STOP) {
+    if (status === CameraSource.events.STOP) {
       this.set$({
         timerHidden: false,
         cameraHidden: true,
-        audioToggleMicrophoneHidden: true,
+        audioToggleMicorphoneHidden: true,
         cameraActionsHidden: false,
       });
     }
 
-    if (status === CameraSourceEvents.RETAKE || status === CameraSourceEvents.ACCEPT) {
+    if (status === CameraSource.events.RETAKE || status === CameraSource.events.ACCEPT) {
       this.set$({
         timerHidden: true,
-        tabVideoHidden: !this._cameraModes.includes(CameraSourceTypes.VIDEO),
-        tabCameraHidden: !this._cameraModes.includes(CameraSourceTypes.PHOTO),
+        tabCameraHidden: false,
         cameraHidden: false,
         cameraActionsHidden: true,
-        audioToggleMicrophoneHidden: !this.cfg.enableAudioRecording,
+        audioToggleMicorphoneHidden: !this.cfg.enableAudioRecording,
         currentIcon: 'video-camera-full',
         mutableClassButton: 'uc-shot-btn uc-camera-action',
 
-        audioSelectHidden: !this.cfg.enableAudioRecording || this._audioDevices.length <= 1,
-        cameraSelectHidden: this._cameraDevices.length <= 1,
+        audioSelectHidden: !this.cfg.enableAudioRecording || this.audioDevices.length <= 1,
+        cameraSelectHidden: this.cameraDevices.length <= 1,
       });
     }
   };
@@ -421,14 +417,14 @@ export class CameraSource extends UploaderBlock {
    */
   _setCameraState = (status) => {
     if (
-      this._activeTab === CameraSourceTypes.PHOTO &&
+      this._activeTab === CameraSource.types.PHOTO &&
       (status === 'shot' || status === 'retake' || status === 'accept')
     ) {
       this._handlePhoto(status);
     }
 
     if (
-      this._activeTab === CameraSourceTypes.VIDEO &&
+      this._activeTab === CameraSource.types.VIDEO &&
       (status === 'play' ||
         status === 'stop' ||
         status === 'retake' ||
@@ -465,28 +461,28 @@ export class CameraSource extends UploaderBlock {
 
   /**
    * @private
-   * @param {CameraMode} tabId
+   * @param {CameraTabId} tabId
    */
   _handleActiveTab = (tabId) => {
     this.ref.switcher.querySelectorAll('button').forEach((/** @type {HTMLElement} */ btn) => {
       btn.classList.toggle('uc-active', btn.getAttribute('data-id') === tabId);
     });
 
-    if (tabId === CameraSourceTypes.PHOTO) {
+    if (tabId === CameraSource.types.PHOTO) {
       this.set$({
         currentIcon: 'camera-full',
         audioSelectHidden: true,
-        audioToggleMicrophoneHidden: true,
+        audioToggleMicorphoneHidden: true,
       });
     }
 
-    if (tabId === CameraSourceTypes.VIDEO) {
+    if (tabId === CameraSource.types.VIDEO) {
       this.set$({
         currentTimelineIcon: 'play',
         currentIcon: 'video-camera-full',
 
-        audioSelectHidden: !this.cfg.enableAudioRecording || this._audioDevices.length <= 1,
-        audioToggleMicrophoneHidden: !this.cfg.enableAudioRecording,
+        audioSelectHidden: !this.cfg.enableAudioRecording || this.audioDevices.length <= 1,
+        audioToggleMicorphoneHidden: !this.cfg.enableAudioRecording,
       });
     }
 
@@ -560,11 +556,6 @@ export class CameraSource extends UploaderBlock {
     });
   };
 
-  /** @private */
-  get _cameraModes() {
-    return stringToArray(this.cfg.cameraModes);
-  }
-
   /**
    * @private
    * @param {'granted' | 'denied' | 'prompt'} state
@@ -572,20 +563,19 @@ export class CameraSource extends UploaderBlock {
   _setPermissionsState = debounce((state) => {
     this.classList.toggle('uc-initialized', state === 'granted');
 
-    const visibleAudio = this._activeTab === CameraSourceTypes.VIDEO && this.cfg.enableAudioRecording;
-    const currentIcon = this._activeTab === CameraSourceTypes.PHOTO ? 'camera-full' : 'video-camera-full';
+    const visibleAudio = this._activeTab === CameraSource.types.VIDEO && this.cfg.enableAudioRecording;
+    const currentIcon = this._activeTab === CameraSource.types.PHOTO ? 'camera-full' : 'video-camera-full';
 
     if (state === 'granted') {
       this.set$({
         videoHidden: false,
         cameraHidden: false,
-        tabCameraHidden: !this._cameraModes.includes(CameraSourceTypes.PHOTO),
-        tabVideoHidden: !this._cameraModes.includes(CameraSourceTypes.VIDEO),
+        tabCameraHidden: false,
         messageHidden: true,
         timerHidden: true,
 
         currentIcon,
-        audioToggleMicrophoneHidden: !visibleAudio,
+        audioToggleMicorphoneHidden: !visibleAudio,
         audioSelectHidden: !visibleAudio,
       });
     } else if (state === 'prompt') {
@@ -606,8 +596,8 @@ export class CameraSource extends UploaderBlock {
         videoHidden: true,
         messageHidden: false,
 
-        tabCameraHidden: !this._cameraModes.includes(CameraSourceTypes.PHOTO),
-        tabVideoHidden: !this._cameraModes.includes(CameraSourceTypes.VIDEO),
+        tabCameraHidden: false,
+        tabVideoHidden: !this.cfg.enableVideoRecording,
 
         cameraActionsHidden: true,
 
@@ -719,14 +709,14 @@ export class CameraSource extends UploaderBlock {
     try {
       const devices = await navigator.mediaDevices.enumerateDevices();
 
-      this._cameraDevices = devices
+      this.cameraDevices = devices
         .filter((device) => device.kind === 'videoinput')
         .map((device, index) => ({
           text: device.label.trim() || `${this.l10n('caption-camera')} ${index + 1}`,
           value: device.deviceId,
         }));
 
-      this._audioDevices =
+      this.audioDevices =
         this.cfg.enableAudioRecording &&
         devices
           .filter((device) => device.kind === 'audioinput')
@@ -735,21 +725,21 @@ export class CameraSource extends UploaderBlock {
             value: device.deviceId,
           }));
 
-      if (this._cameraDevices.length > 1) {
+      if (this.cameraDevices.length > 1) {
         this.set$({
-          cameraSelectOptions: this._cameraDevices,
+          cameraSelectOptions: this.cameraDevices,
           cameraSelectHidden: false,
         });
       }
-      this._selectedCameraId = this._cameraDevices[0]?.value;
+      this._selectedCameraId = this.cameraDevices[0]?.value;
 
-      if (this._audioDevices.length > 1) {
+      if (this.audioDevices.length > 1) {
         this.set$({
-          audioSelectOptions: this._audioDevices,
+          audioSelectOptions: this.audioDevices,
           audioSelectHidden: false,
         });
       }
-      this._selectedAudioId = this._audioDevices[0]?.value;
+      this._selectedAudioId = this.audioDevices[0]?.value;
     } catch (error) {
       console.log('Failed to get devices', error);
     }
@@ -759,8 +749,6 @@ export class CameraSource extends UploaderBlock {
     await this._permissionAccess();
     await this._requestDeviceAccess();
     await this._capture();
-
-    this._handleCameraModes(this._cameraModes);
   };
 
   _onDeactivate = async () => {
@@ -777,17 +765,6 @@ export class CameraSource extends UploaderBlock {
     this._stopCapture();
   };
 
-  /** @param {CameraMode[]} cameraModes */
-  _handleCameraModes = (cameraModes) => {
-    this.$.tabVideoHidden = !cameraModes.includes(CameraSourceTypes.VIDEO);
-    this.$.tabCameraHidden = !cameraModes.includes(CameraSourceTypes.PHOTO);
-
-    const defaultTab = cameraModes[0];
-    if (!this._activeTab || !cameraModes.includes(this._activeTab)) {
-      this._handleActiveTab(defaultTab);
-    }
-  };
-
   initCallback() {
     super.initCallback();
     this.registerActivity(this.activityType, {
@@ -800,14 +777,21 @@ export class CameraSource extends UploaderBlock {
     });
 
     this.subConfigValue('enableAudioRecording', (val) => {
-      this.$.audioToggleMicrophoneHidden = !val;
+      this.$.audioToggleMicorphoneHidden = !val;
       this.$.audioSelectDisabled = !val;
     });
 
-    this.subConfigValue('cameraModes', (val) => {
-      if (!this.isActivityActive) return;
-      const cameraModes = deserializeCsv(val);
-      this._handleCameraModes(cameraModes);
+    this.subConfigValue('enableVideoRecording', (val) => {
+      this.$.tabVideoHidden = !val;
+    });
+
+    this.subConfigValue('defaultCameraMode', (val) => {
+      if (this.cfg.enableVideoRecording) {
+        this._handleActiveTab(val);
+        return;
+      }
+
+      this._handleActiveTab('photo');
     });
   }
 
@@ -826,6 +810,24 @@ export class CameraSource extends UploaderBlock {
   }
 }
 
+CameraSource.types = Object.freeze({
+  PHOTO: 'photo',
+  VIDEO: 'video',
+});
+
+CameraSource.events = Object.freeze({
+  IDLE: 'idle',
+  SHOT: 'shot',
+
+  PLAY: 'play',
+  PAUSE: 'pause',
+  RESUME: 'resume',
+  STOP: 'stop',
+
+  RETAKE: 'retake',
+  ACCEPT: 'accept',
+});
+
 CameraSource.template = /* HTML */ `
   <uc-activity-header>
     <button type="button" class="uc-mini-btn" set="onclick: *historyBack" l10n="@title:back">
@@ -880,7 +882,7 @@ CameraSource.template = /* HTML */ `
       <button
         data-id="video"
         type="button"
-        class="uc-switch uc-mini-btn"
+        class="uc-switch  uc-mini-btn"
         set="onclick: onClickTab; @hidden: tabVideoHidden"
       >
         <uc-icon name="video-camera"></uc-icon>
@@ -907,8 +909,8 @@ CameraSource.template = /* HTML */ `
     </button>
 
     <div class="uc-select">
-      <button class="uc-mini-btn uc-btn-microphone" set="onclick: onToggleAudio; @hidden: audioToggleMicrophoneHidden;">
-        <uc-icon set="@name:toggleMicrophoneIcon"></uc-icon>
+      <button class="uc-mini-btn uc-btn-microphone" set="onclick: onToggleAudio; @hidden: audioToggleMicorphoneHidden;">
+        <uc-icon set="@name:toggleMicorphoneIcon"></uc-icon>
       </button>
 
       <uc-select

package/blocks/CameraSource/camera-source.css

@@ -109,7 +109,6 @@ uc-camera-source .uc-controls {
 
 uc-camera-source .uc-switcher {
   display: flex;
-  gap: var(--uc-padding);
 }
 uc-camera-source .uc-switch.uc-active {
   background-color: var(--uc-secondary);

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

@@ -138,6 +138,13 @@ export class CropFrame extends Block {
     } | undefined;
     /** @private */
     private _updateCursor;
+    /**
+     * @private
+     * @param {String} href
+     */
+    private _createMask;
+    _frameImage: SVGElement | undefined;
+    _updateMask(): void;
     /** @private */
     private _render;
     /** @param {boolean} visible */

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

@@ -1 +1 @@
-{"version":3,"file":"CropFrame.d.ts","sourceRoot":"","sources":["CropFrame.js"],"names":[],"mappings":"AA2BA;IAII;;MAGC;IAED,eAAe;IACf,yBAAyD;IAEzD,eAAe;IACf,2BAA6D;IAE7D,eAAe;IACf,8BAAmE;IAGrE;;;OAGG;IACH,+BAaC;IAED,eAAe;IACf,wBAyCC;IAFC,sCAAyB;IACzB,2CAAuC;IAGzC;;;OAGG;IACH,wBAUC;IAED,eAAe;IACf,wBASC;IAED,eAAe;IACf,qBAgEC;IAED;;;OAGG;IACH,0BAHW,OAAO,YAAY,EAAE,WAAW,aAChC,OAAO,YAAY,EAAE,SAAS,QA4BxC;IAED,eAAe;IACf,sBAiBC;IAED,eAAe;IACf,sBA4CC;IAED,eAAe;IACf,qBAeC;IAFC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAA+B;IAC/B,qCAA+B;IAGjC;;;;OAIG;IACH,2BAiBC;IAJC;;;;;kBAA2B;IAC3B,sCAA6B;IAC7B,6CAA6C;IAC7C,2DAAoC;IAGtC;;;OAGG;IACH,0BAUC;IAED;;;OAGG;IACH,4BAmBC;IAED;;;;OAIG;IACH,qBAsBC;IAED;;;OAGG;IACH,+BAqBC;IAFC;;;;;kBAA6B;IAI/B,eAAe;IACf,sBAGC;IAED,eAAe;IACf,gBAGC;IAED,+BAA+B;IAC/B,sBADY,OAAO,QAclB;IAmBG,mCAAsF;CA6B3F;;;;sBAngBqB,4BAA4B"}
+{"version":3,"file":"CropFrame.d.ts","sourceRoot":"","sources":["CropFrame.js"],"names":[],"mappings":"AA2BA;IAII;;MAGC;IAED,eAAe;IACf,yBAAyD;IAEzD,eAAe;IACf,2BAA6D;IAE7D,eAAe;IACf,8BAAmE;IAGrE;;;OAGG;IACH,+BAaC;IAED,eAAe;IACf,wBAyCC;IAFC,sCAAyB;IACzB,2CAAuC;IAGzC;;;OAGG;IACH,wBAUC;IAED,eAAe;IACf,wBASC;IAED,eAAe;IACf,qBAgEC;IAED;;;OAGG;IACH,0BAHW,OAAO,YAAY,EAAE,WAAW,aAChC,OAAO,YAAY,EAAE,SAAS,QA4BxC;IAED,eAAe;IACf,sBAiBC;IAED,eAAe;IACf,sBA4CC;IAED,eAAe;IACf,qBAeC;IAFC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAA+B;IAC/B,qCAA+B;IAGjC;;;;OAIG;IACH,2BAiBC;IAJC;;;;;kBAA2B;IAC3B,sCAA6B;IAC7B,6CAA6C;IAC7C,2DAAoC;IAGtC;;;OAGG;IACH,0BAUC;IAED;;;OAGG;IACH,4BAmBC;IAED;;;;OAIG;IACH,qBAsBC;IAED;;;OAGG;IACH,+BAqBC;IAFC;;;;;kBAA6B;IAI/B,eAAe;IACf,sBAGC;IAED;;;OAGG;IACH,oBAoBC;IADC,oCAA4B;IAG9B,oBAeC;IAED,eAAe;IACf,gBAIC;IAED,+BAA+B;IAC/B,sBADY,OAAO,QAclB;IAmBG,mCAAsF;CAmC3F;;;;sBArjBqB,4BAA4B"}

package/blocks/CloudImageEditor/src/CropFrame.js

@@ -446,10 +446,54 @@ export class CropFrame extends Block {
     this.ref['svg-el'].style.cursor = hoverThumb ? thumbCursor(hoverThumb.direction) : 'initial';
   }
 
+  /**
+   * @private
+   * @param {String} href
+   */
+  _createMask(href) {
+    if (this._frameImage) {
+      this._frameImage.setAttribute('href', href);
+      return;
+    }
+
+    let svg = this.ref['svg-el'];
+    let fr = document.createDocumentFragment();
+
+    let imageNode = createSvgNode('image', {
+      href,
+    });
+
+    imageNode.setAttribute('class', 'uc-cloud-mask');
+
+    fr.appendChild(imageNode);
+
+    svg.appendChild(fr);
+
+    this._frameImage = imageNode;
+  }
+
+  _updateMask() {
+    let cropBox = this.$['*cropBox'];
+
+    if (!cropBox || !this._frameImage) {
+      return;
+    }
+
+    let { x, y, width, height } = cropBox;
+
+    setSvgNodeAttrs(this._frameImage, {
+      x,
+      y,
+      height,
+      width,
+    });
+  }
+
   /** @private */
   _render() {
     this._updateBackdrop();
     this._updateFrame();
+    this._updateMask();
   }
 
   /** @param {boolean} visible */
@@ -491,6 +535,12 @@ export class CropFrame extends Block {
       });
     });
 
+    this.subConfigValue('cloudImageEditorMaskHref', (maskHref) => {
+      if (maskHref) {
+        this._createMask(maskHref);
+      }
+    });
+
     this.sub('dragging', (dragging) => {
       if (!this._frameGuides) return;
       this._frameGuides.setAttribute(