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

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/lib/parseTabs.js

@@ -1,12 +1,12 @@
 // @ts-check
 
-import { deserializeCsv } from '../../../utils/comma-separated.js';
+import { deserealizeCsv } from '../../../utils/comma-separated.js';
 import { ALL_TABS } from '../toolbar-constants.js';
 
 /** @param {string} tabs */
 export const parseTabs = (tabs) => {
   if (!tabs) return ALL_TABS;
-  const tabList = deserializeCsv(tabs).filter((tab) => ALL_TABS.includes(tab));
+  const tabList = deserealizeCsv(tabs).filter((tab) => ALL_TABS.includes(tab));
   if (tabList.length === 0) {
     return ALL_TABS;
   }

package/blocks/Config/Config.d.ts

@@ -9,7 +9,7 @@
  *   'iconHrefResolver',
  *   'fileValidators',
  *   'collectionValidators',
- *   'mediaRecorderOptions',
+ *   'mediaRecorerOptions',
  * ]}
  */
 export const complexConfigKeys: [
@@ -20,7 +20,7 @@ export const complexConfigKeys: [
     'iconHrefResolver',
     'fileValidators',
     'collectionValidators',
-    'mediaRecorderOptions'
+    'mediaRecorerOptions'
 ];
 export type Config = import('../../utils/mixinClass.js').MixinClass<typeof ConfigClass, import('../../types').ConfigType>;
 /** @typedef {import('../../utils/mixinClass.js').MixinClass<typeof ConfigClass, import('../../types').ConfigType>} Config */
@@ -64,6 +64,6 @@ declare class ConfigClass extends Block {
 }
 import { Block } from '../../abstract/Block.js';
 /** Mapping of attribute names to state */
-declare const attrStateMapping: Record<"accept" | "pubkey" | "multiple" | "store" | "debug" | "crop-preset" | "secure-expire" | "max-local-file-size-bytes" | "multiple-min" | "multiple-max" | "confirm-upload" | "img-only" | "external-sources-preferred-types" | "external-sources-embed-css" | "camera-mirror" | "camera-capture" | "source-list" | "thumb-size" | "show-empty-list" | "use-local-image-editor" | "use-cloud-image-editor" | "cloud-image-editor-tabs" | "remove-copyright" | "image-shrink" | "modal-scroll-lock" | "modal-backdrop-strokes" | "source-list-wrap" | "remote-tab-session-key" | "cdn-cname" | "base-url" | "social-base-url" | "secure-signature" | "secure-delivery-proxy" | "retry-throttled-request-max-times" | "multipart-min-file-size" | "multipart-chunk-size" | "max-concurrent-requests" | "multipart-max-concurrent-requests" | "multipart-max-attempts" | "check-for-url-duplicates" | "save-url-for-recurrent-uploads" | "group-output" | "user-agent-integration" | "locale-name" | "secure-uploads-expire-threshold" | "camera-modes" | "default-camera-mode" | "enable-audio-recording" | "enable-video-recording" | "max-video-recording-duration" | "secureexpire" | "croppreset" | "maxlocalfilesizebytes" | "multiplemin" | "multiplemax" | "confirmupload" | "imgonly" | "externalsourcespreferredtypes" | "externalsourcesembedcss" | "cameramirror" | "cameracapture" | "sourcelist" | "thumbsize" | "showemptylist" | "uselocalimageeditor" | "usecloudimageeditor" | "cloudimageeditortabs" | "removecopyright" | "imageshrink" | "modalscrolllock" | "modalbackdropstrokes" | "sourcelistwrap" | "remotetabsessionkey" | "cdncname" | "baseurl" | "socialbaseurl" | "securesignature" | "securedeliveryproxy" | "retrythrottledrequestmaxtimes" | "multipartminfilesize" | "multipartchunksize" | "maxconcurrentrequests" | "multipartmaxconcurrentrequests" | "multipartmaxattempts" | "checkforurlduplicates" | "saveurlforrecurrentuploads" | "groupoutput" | "useragentintegration" | "localename" | "secureuploadsexpirethreshold" | "cameramodes" | "defaultcameramode" | "enableaudiorecording" | "enablevideorecording" | "maxvideorecordingduration", string>;
+declare const attrStateMapping: Record<"pubkey" | "multiple" | "accept" | "store" | "debug" | "crop-preset" | "secure-expire" | "max-local-file-size-bytes" | "multiple-min" | "multiple-max" | "confirm-upload" | "img-only" | "external-sources-preferred-types" | "external-sources-embed-css" | "camera-mirror" | "camera-capture" | "source-list" | "thumb-size" | "show-empty-list" | "use-local-image-editor" | "use-cloud-image-editor" | "cloud-image-editor-tabs" | "remove-copyright" | "image-shrink" | "modal-scroll-lock" | "modal-backdrop-strokes" | "source-list-wrap" | "remote-tab-session-key" | "cdn-cname" | "base-url" | "social-base-url" | "secure-signature" | "secure-delivery-proxy" | "retry-throttled-request-max-times" | "multipart-min-file-size" | "multipart-chunk-size" | "max-concurrent-requests" | "multipart-max-concurrent-requests" | "multipart-max-attempts" | "check-for-url-duplicates" | "save-url-for-recurrent-uploads" | "group-output" | "user-agent-integration" | "locale-name" | "secure-uploads-expire-threshold" | "default-camera-mode" | "enable-audio-recording" | "enable-video-recording" | "max-video-recording-duration" | "secureexpire" | "croppreset" | "maxlocalfilesizebytes" | "multiplemin" | "multiplemax" | "confirmupload" | "imgonly" | "externalsourcespreferredtypes" | "externalsourcesembedcss" | "cameramirror" | "cameracapture" | "sourcelist" | "thumbsize" | "showemptylist" | "uselocalimageeditor" | "usecloudimageeditor" | "cloudimageeditortabs" | "removecopyright" | "imageshrink" | "modalscrolllock" | "modalbackdropstrokes" | "sourcelistwrap" | "remotetabsessionkey" | "cdncname" | "baseurl" | "socialbaseurl" | "securesignature" | "securedeliveryproxy" | "retrythrottledrequestmaxtimes" | "multipartminfilesize" | "multipartchunksize" | "maxconcurrentrequests" | "multipartmaxconcurrentrequests" | "multipartmaxattempts" | "checkforurlduplicates" | "saveurlforrecurrentuploads" | "groupoutput" | "useragentintegration" | "localename" | "secureuploadsexpirethreshold" | "defaultcameramode" | "enableaudiorecording" | "enablevideorecording" | "maxvideorecordingduration", string>;
 export {};
 //# sourceMappingURL=Config.d.ts.map

package/blocks/Config/Config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Config.d.ts","sourceRoot":"","sources":["Config.js"],"names":[],"mappings":"AAcA;;;;;;;;;;;;;GAaG;AACH,gCAXU;IACT,UAAc;IACd,0BAA8B;IAC9B,gCAAoC;IACpC,gCAAoC;IACpC,kBAAsB;IACtB,gBAAoB;IACpB,sBAA0B;IAC1B,sBAA0B;CACvB,CAWF;qBAyNY,OAAO,2BAA2B,EAAE,UAAU,CAAC,kBAAkB,EAAE,OAAO,aAAa,EAAE,UAAU,CAAC;AAAlH,6HAA6H;AAG7H,4BAAmF;AA/LnF;IAkBE;;;;OAIG;IACH,+BAYC;IAED;;;;OAIG;IACH,2BAQC;IAED;;;;OAIG;IACH,kBAyBC;IAED;;;OAGG;IACH,kBAIC;IAED;;;;OAIG;IACH,wCAJW,MAAM,iBACN,OAAO,aACP,OAAO,QAoBjB;IA0CD;;;;OAIG;IACH,+BAJW,MAAM,uBAAuB,UAC7B,MAAM,UACN,MAAM,QAahB;CACF;sBAjPqB,yBAAyB;AAwD/C,0CAA0C;AAC1C,smEAGG"}
+{"version":3,"file":"Config.d.ts","sourceRoot":"","sources":["Config.js"],"names":[],"mappings":"AAYA;;;;;;;;;;;;;GAaG;AACH,gCAXU;IACT,UAAc;IACd,0BAA8B;IAC9B,gCAAoC;IACpC,gCAAoC;IACpC,kBAAsB;IACtB,gBAAoB;IACpB,sBAA0B;IAC1B,qBAAyB;CACtB,CAWF;qBAiNY,OAAO,2BAA2B,EAAE,UAAU,CAAC,kBAAkB,EAAE,OAAO,aAAa,EAAE,UAAU,CAAC;AAAlH,6HAA6H;AAG7H,4BAAmF;AAvLnF;IAkBE;;;;OAIG;IACH,+BAYC;IAED;;;;OAIG;IACH,2BAQC;IAED;;;;OAIG;IACH,kBAiBC;IAED;;;OAGG;IACH,kBAIC;IAED;;;;OAIG;IACH,wCAJW,MAAM,iBACN,OAAO,aACP,OAAO,QAoBjB;IA0CD;;;;OAIG;IACH,+BAJW,MAAM,uBAAuB,UAC7B,MAAM,UACN,MAAM,QAahB;CACF;sBAvOqB,yBAAyB;AAsD/C,0CAA0C;AAC1C,qkEAGG"}