@uploadcare/file-uploader 1.11.0-alpha.2 → 1.11.0-alpha.4

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

@@ -1 +1 @@
-{"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,4BA4CE;IAzCE;;;;;kBAEC;IAyCL,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,yBAUE;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;;;;;;;;;;;;;;;;;;0BA9wBa,OAAO,GAAG,OAAO;2BAEjB,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ;8BAtCnD,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,4BAgCE;IA7BE;;;;;kBAEC;IA6BL,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;;;;;;;;;;;;;;;;;;0BAnwBa,OAAO,GAAG,OAAO;2BAEjB,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ;8BAtCnD,iCAAiC"}

package/blocks/CameraSource/CameraSource.js

@@ -167,8 +167,8 @@ export class CameraSource extends UploaderBlock {
   _updateTimer = () => {
     const currentTime = Math.floor((performance.now() - this.$._startTime + this.$._elapsedTime) / 1000);
 
-    if (typeof this.cfg.maxDurationVideoRecord === 'number' && this.cfg.maxDurationVideoRecord > 0) {
-      const remainingTime = this.cfg.maxDurationVideoRecord - currentTime;
+    if (typeof this.cfg.maxVideoRecordingDuration === 'number' && this.cfg.maxVideoRecordingDuration > 0) {
+      const remainingTime = this.cfg.maxVideoRecordingDuration - currentTime;
 
       if (remainingTime <= 0) {
         this.ref.timer.textContent = formatTime(remainingTime);
@@ -212,27 +212,15 @@ export class CameraSource extends UploaderBlock {
     try {
       this._chunks = [];
       this._options = {
-        ...this.cfg.optionsMediaRecorder,
+        ...this.cfg.mediaRecorerOptions,
       };
 
-      const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-
       if (
-        this.cfg.optionsMediaRecorder?.mimeType &&
-        MediaRecorder.isTypeSupported(this.cfg.optionsMediaRecorder.mimeType)
-      ) {
-        this._options.mimeType = this.cfg.optionsMediaRecorder.mimeType;
-      } else if (
-        isFirefox &&
-        this.cfg.optionsMediaRecorder?.mimeType &&
-        MediaRecorder.isTypeSupported(this.cfg.optionsMediaRecorder.mimeType)
+        this.cfg.mediaRecorerOptions?.mimeType &&
+        MediaRecorder.isTypeSupported(this.cfg.mediaRecorerOptions.mimeType)
       ) {
-        const mimeType = this.cfg.optionsMediaRecorder?.mimeType;
-
-        if (mimeType && !MediaRecorder.isTypeSupported(mimeType)) {
-          throw new Error(`MIME type ${mimeType} is not supported`);
-        }
-
+        this._options.mimeType = this.cfg.mediaRecorerOptions.mimeType;
+      } else {
         this._options.mimeType = DEFAULT_VIDEO_FORMAT;
       }
 
@@ -636,6 +624,7 @@ export class CameraSource extends UploaderBlock {
       this.$.video = null;
 
       this._makeStreamInactive();
+      this._stopTimer();
 
       this._capturing = false;
     }
@@ -795,7 +784,7 @@ export class CameraSource extends UploaderBlock {
       this.$.tabVideoHidden = !val;
     });
 
-    this.subConfigValue('defaultCameraTab', (val) => {
+    this.subConfigValue('defaultCameraMode', (val) => {
       if (this.cfg.enableVideoRecording) {
         this._handleActiveTab(val);
         return;

package/blocks/CameraSource/camera-source.css

@@ -10,27 +10,15 @@ uc-camera-source {
   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;
+[uc-modal] > dialog:has(uc-camera-source[active]) {
+  width: 100%;
+  height: 100%;
 }
 
 uc-camera-source:not(.uc-initialized) .uc-controls {
   display: none;
 }
 
-@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%;
@@ -52,11 +40,11 @@ uc-camera-source .uc-toolbar {
 }
 
 uc-camera-source .uc-content {
-  position: relative;
   display: flex;
   flex: 1;
   justify-content: center;
   width: 100%;
+  height: 100%;
   padding: var(--uc-padding);
   padding-top: 0;
   overflow: hidden;

package/blocks/CloudImageEditorActivity/index.css

@@ -7,7 +7,7 @@ uc-cloud-image-editor-activity {
   background-color: var(--uc-background);
 }
 
-[uc-modal] uc-cloud-image-editor-activity {
-  width: min(calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2), calc(100vw - var(--uc-padding) * 2));
-  height: var(--modal-content-height-fill, 100%);
+[uc-modal] > dialog:has(uc-cloud-image-editor-activity[active]) {
+  width: 100%;
+  height: 100%;
 }

package/blocks/Config/Config.d.ts

@@ -9,7 +9,7 @@
  *   'iconHrefResolver',
  *   'fileValidators',
  *   'collectionValidators',
- *   'optionsMediaRecorder',
+ *   'mediaRecorerOptions',
  * ]}
  */
 export const complexConfigKeys: [
@@ -20,7 +20,7 @@ export const complexConfigKeys: [
     'iconHrefResolver',
     'fileValidators',
     'collectionValidators',
-    'optionsMediaRecorder'
+    '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<"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" | "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-tab" | "enable-audio-recording" | "enable-video-recording" | "max-duration-video-record" | "secureexpire" | "croppreset" | "maxlocalfilesizebytes" | "multiplemin" | "multiplemax" | "confirmupload" | "imgonly" | "externalsourcespreferredtypes" | "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" | "defaultcameratab" | "enableaudiorecording" | "enablevideorecording" | "maxdurationvideorecord", 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" | "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" | "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":"AAYA;;;;;;;;;;;;;GAaG;AACH,gCAXU;IACT,UAAc;IACd,0BAA8B;IAC9B,gCAAoC;IACpC,gCAAoC;IACpC,kBAAsB;IACtB,gBAAoB;IACpB,sBAA0B;IAC1B,sBAA0B;CACvB,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,kgEAGG"}
+{"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,0gEAGG"}

package/blocks/Config/Config.js

@@ -21,7 +21,7 @@ const allConfigKeys = /** @type {(keyof import('../../types').ConfigType)[]} */
  *   'iconHrefResolver',
  *   'fileValidators',
  *   'collectionValidators',
- *   'optionsMediaRecorder',
+ *   'mediaRecorerOptions',
  * ]}
  */
 export const complexConfigKeys = [
@@ -32,7 +32,7 @@ export const complexConfigKeys = [
   'iconHrefResolver',
   'fileValidators',
   'collectionValidators',
-  'optionsMediaRecorder',
+  'mediaRecorerOptions',
 ];
 
 /** @type {(key: keyof import('../../types').ConfigType) => key is keyof import('../../types').ConfigComplexType} */

package/blocks/Config/initialConfig.js

@@ -67,9 +67,9 @@ export const initialConfig = {
   fileValidators: [],
   collectionValidators: [],
 
-  defaultCameraTab: 'photo',
+  defaultCameraMode: 'photo',
   enableAudioRecording: true,
   enableVideoRecording: true,
-  maxDurationVideoRecord: null,
-  optionsMediaRecorder: null,
+  maxVideoRecordingDuration: null,
+  mediaRecorerOptions: null,
 };

package/blocks/Config/normalizeConfigValue.js

@@ -165,12 +165,12 @@ const mapping = {
   fileValidators: /** @type {typeof asArray<import('../../types').FileValidators>} */ (asArray),
   collectionValidators: /** @type {typeof asArray<import('../../types').CollectionValidators>} */ (asArray),
 
-  defaultCameraTab: asCameraTab,
+  defaultCameraMode: asCameraTab,
   enableAudioRecording: asBoolean,
   enableVideoRecording: asBoolean,
-  optionsMediaRecorder: asObject,
+  mediaRecorerOptions: asObject,
 
-  maxDurationVideoRecord: asNumber,
+  maxVideoRecordingDuration: asNumber,
 };
 
 /**

package/blocks/ExternalSource/ExternalSource.d.ts

@@ -1,30 +1,21 @@
 /** @typedef {{ externalSourceType: string }} ActivityParams */
-/**
- * @typedef {{
- *   type: 'file-selected';
- *   obj_type: 'selected_file';
- *   filename: string;
- *   url: string;
- *   alternatives?: Record<string, string>;
- * }} SelectedFileMessage
- */
-/**
- * @typedef {{
- *   type: 'embed-css';
- *   style: string;
- * }} EmbedCssMessage
- */
-/** @typedef {SelectedFileMessage | EmbedCssMessage} Message */
 export class ExternalSource extends UploaderBlock {
     activityType: "external";
     init$: {
         activityIcon: string;
         activityCaption: string;
-        selectedList: never[];
-        counter: number;
-        multiple: boolean;
+        /** @type {import('./types.js').InputMessageMap['selected-files-change']['selectedFiles']} */
+        selectedList: import('./types.js').InputMessageMap['selected-files-change']['selectedFiles'];
+        total: number;
+        isSelectionReady: boolean;
+        couldSelectAll: boolean;
+        couldDeselectAll: boolean;
+        showSelectionStatus: boolean;
+        counterText: string;
         onDone: () => void;
         onCancel: () => void;
+        onSelectAll: () => void;
+        onDeselectAll: () => void;
         '*commonProgress': number;
         '*uploadList': never[];
         '*uploadQueue': import("@uploadcare/upload-client").Queue;
@@ -43,39 +34,30 @@ export class ExternalSource extends UploaderBlock {
     get activityParams(): ActivityParams;
     /**
      * @private
-     * @type {HTMLIFrameElement | null}
+     * @param {NonNullable<import('./types.js').InputMessageMap['selected-files-change']['selectedFiles']>[number]} selectedFile
      */
-    private _iframe;
+    private extractUrlFromSelectedFile;
     /**
      * @private
-     * @param {SelectedFileMessage} message
+     * @param {import('./types.js').InputMessageMap['selected-files-change']} message
      */
-    private extractUrlFromMessage;
-    /**
-     * @private
-     * @param {Message} message
-     */
-    private sendMessage;
-    /**
-     * @private
-     * @param {SelectedFileMessage} message
-     */
-    private handleFileSelected;
+    private handleSelectedFilesChange;
     /** @private */
     private handleIframeLoad;
-    /**
-     * @private
-     * @param {string} propName
-     */
-    private getCssValue;
     /** @private */
     private applyStyles;
     /** @private */
+    private setupL10n;
+    /** @private */
     private remoteUrl;
     /** @private */
     private mountIframe;
     /** @private */
+    private _messageBridge;
+    /** @private */
     private unmountIframe;
+    /** @private */
+    private resetSelectionStatus;
 }
 export namespace ExternalSource {
     let template: string;
@@ -83,17 +65,5 @@ export namespace ExternalSource {
 export type ActivityParams = {
     externalSourceType: string;
 };
-export type SelectedFileMessage = {
-    type: 'file-selected';
-    obj_type: 'selected_file';
-    filename: string;
-    url: string;
-    alternatives?: Record<string, string>;
-};
-export type EmbedCssMessage = {
-    type: 'embed-css';
-    style: string;
-};
-export type Message = SelectedFileMessage | EmbedCssMessage;
 import { UploaderBlock } from '../../abstract/UploaderBlock.js';
 //# sourceMappingURL=ExternalSource.d.ts.map

package/blocks/ExternalSource/ExternalSource.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExternalSource.d.ts","sourceRoot":"","sources":["ExternalSource.js"],"names":[],"mappings":"AAWA,+DAA+D;AAE/D;;;;;;;;GAQG;AAEH;;;;;GAKG;AAEH,+DAA+D;AAE/D;IAEE,yBAAiD;IAK/C;;;;;;;;;;;;;;;;;;;;;MAoBC;IAGH,6BAA6B;IAC7B,qCAMC;IAED;;;OAGG;IACH,gBAAe;IA2Cf;;;OAGG;IACH,8BAcC;IAED;;;OAGG;IACH,oBAEC;IAED;;;OAGG;IACH,2BAUC;IAED,eAAe;IACf,yBAEC;IAED;;;OAGG;IACH,oBAGC;IAED,eAAe;IACf,oBAkBC;IAED,eAAe;IACf,kBAcC;IAED,eAAe;IACf,oBAsBC;IAED,eAAe;IACf,sBAMC;CACF;;;;6BA5Oa;IAAE,kBAAkB,EAAE,MAAM,CAAA;CAAE;kCAG/B;IACZ,IAAQ,EAAE,eAAe,CAAC;IAC1B,QAAY,EAAE,eAAe,CAAC;IAC9B,QAAY,EAAE,MAAM,CAAC;IACrB,GAAO,EAAE,MAAM,CAAC;IAChB,YAAgB,CAAC,EAAE,OAAO,MAAM,EAAE,MAAM,CAAC,CAAC;CACvC;8BAIS;IACZ,IAAQ,EAAE,WAAW,CAAC;IACtB,KAAS,EAAE,MAAM,CAAC;CACf;sBAGU,mBAAmB,GAAG,eAAe;8BA1BrB,iCAAiC"}
+{"version":3,"file":"ExternalSource.d.ts","sourceRoot":"","sources":["ExternalSource.js"],"names":[],"mappings":"AAWA,+DAA+D;AAE/D;IAEE,yBAAiD;IAK/C;;;QAKE,6FAA6F;sBAAlF,OAAO,YAAY,EAAE,eAAe,CAAC,uBAAuB,CAAC,CAAC,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;MA+B1F;IAGH,6BAA6B;IAC7B,qCAMC;IA4CD;;;OAGG;IACH,mCAcC;IAED;;;OAGG;IACH,kCAoBC;IAED,eAAe;IACf,yBAGC;IAED,eAAe;IACf,oBAKC;IAED,eAAe;IACf,kBAKC;IAED,eAAe;IACf,kBAeC;IAED,eAAe;IACf,oBA6BC;IALC,eAAe;IACf,uBAA6D;IAM/D,eAAe;IACf,sBAMC;IAED,eAAe;IACf,6BASC;CACF;;;;6BA7Oa;IAAE,kBAAkB,EAAE,MAAM,CAAA;CAAE;8BAPd,iCAAiC"}

package/blocks/ExternalSource/ExternalSource.js

@@ -5,31 +5,12 @@ import { ActivityBlock } from '../../abstract/ActivityBlock.js';
 import { UploaderBlock } from '../../abstract/UploaderBlock.js';
 import { stringToArray } from '../../utils/stringToArray.js';
 import { wildcardRegexp } from '../../utils/wildcardRegexp.js';
-import { buildStyles } from './buildStyles.js';
-import { registerMessage, unregisterMessage } from './messages.js';
+import { buildThemeDefinition } from './buildThemeDefinition.js';
+import { MessageBridge } from './MessageBridge.js';
 import { queryString } from './query-string.js';
 
 /** @typedef {{ externalSourceType: string }} ActivityParams */
 
-/**
- * @typedef {{
- *   type: 'file-selected';
- *   obj_type: 'selected_file';
- *   filename: string;
- *   url: string;
- *   alternatives?: Record<string, string>;
- * }} SelectedFileMessage
- */
-
-/**
- * @typedef {{
- *   type: 'embed-css';
- *   style: string;
- * }} EmbedCssMessage
- */
-
-/** @typedef {SelectedFileMessage | EmbedCssMessage} Message */
-
 export class ExternalSource extends UploaderBlock {
   couldBeCtxOwner = true;
   activityType = ActivityBlock.activities.EXTERNAL;
@@ -41,12 +22,20 @@ export class ExternalSource extends UploaderBlock {
       ...this.init$,
       activityIcon: '',
       activityCaption: '',
+
+      /** @type {import('./types.js').InputMessageMap['selected-files-change']['selectedFiles']} */
       selectedList: [],
-      counter: 0,
-      multiple: false,
+      total: 0,
+
+      isSelectionReady: false,
+      couldSelectAll: false,
+      couldDeselectAll: false,
+      showSelectionStatus: false,
+      counterText: '',
+
       onDone: () => {
         for (const message of this.$.selectedList) {
-          const url = this.extractUrlFromMessage(message);
+          const url = this.extractUrlFromSelectedFile(message);
           const { filename } = message;
           const { externalSourceType } = this.activityParams;
           this.api.addFileFromUrl(url, { fileName: filename, source: externalSourceType });
@@ -57,6 +46,14 @@ export class ExternalSource extends UploaderBlock {
       onCancel: () => {
         this.historyBack();
       },
+
+      onSelectAll: () => {
+        this._messageBridge?.send({ type: 'select-all' });
+      },
+
+      onDeselectAll: () => {
+        this._messageBridge?.send({ type: 'deselect-all' });
+      },
     };
   }
 
@@ -69,12 +66,6 @@ export class ExternalSource extends UploaderBlock {
     throw new Error(`External Source activity params not found`);
   }
 
-  /**
-   * @private
-   * @type {HTMLIFrameElement | null}
-   */
-  _iframe = null;
-
   initCallback() {
     super.initCallback();
     this.registerActivity(this.activityType, {
@@ -108,24 +99,25 @@ export class ExternalSource extends UploaderBlock {
         this.unmountIframe();
       }
     });
-    this.sub('selectedList', (list) => {
-      this.$.counter = list.length;
-    });
     this.subConfigValue('multiple', (multiple) => {
-      this.$.multiple = multiple;
+      this.$.showSelectionStatus = multiple;
+    });
+
+    this.subConfigValue('localeName', (val) => {
+      this.setupL10n();
     });
   }
 
   /**
    * @private
-   * @param {SelectedFileMessage} message
+   * @param {NonNullable<import('./types.js').InputMessageMap['selected-files-change']['selectedFiles']>[number]} selectedFile
    */
-  extractUrlFromMessage(message) {
-    if (message.alternatives) {
+  extractUrlFromSelectedFile(selectedFile) {
+    if (selectedFile.alternatives) {
       const preferredTypes = stringToArray(this.cfg.externalSourcesPreferredTypes);
       for (const preferredType of preferredTypes) {
         const regexp = wildcardRegexp(preferredType);
-        for (const [type, typeUrl] of Object.entries(message.alternatives)) {
+        for (const [type, typeUrl] of Object.entries(selectedFile.alternatives)) {
           if (regexp.test(type)) {
             return typeUrl;
           }
@@ -133,81 +125,71 @@ export class ExternalSource extends UploaderBlock {
       }
     }
 
-    return message.url;
+    return selectedFile.url;
   }
 
   /**
    * @private
-   * @param {Message} message
+   * @param {import('./types.js').InputMessageMap['selected-files-change']} message
    */
-  sendMessage(message) {
-    this._iframe?.contentWindow?.postMessage(JSON.stringify(message), '*');
-  }
-
-  /**
-   * @private
-   * @param {SelectedFileMessage} message
-   */
-  async handleFileSelected(message) {
-    if (!this.$.multiple && this.$.selectedList.length) {
+  async handleSelectedFilesChange(message) {
+    if (this.cfg.multiple !== message.isMultipleMode) {
+      console.error('Multiple mode mismatch');
       return;
     }
 
-    this.$.selectedList = [...this.$.selectedList, message];
-
-    if (!this.$.multiple) {
-      this.$.onDone();
-    }
+    this.bindL10n('counterText', () =>
+      this.l10n('selected-count', {
+        count: message.selectedCount,
+        total: message.total,
+      }),
+    );
+
+    this.set$({
+      isSelectionReady: message.isReady,
+      showSelectionStatus: message.isMultipleMode && message.total > 0,
+      couldSelectAll: message.selectedCount < message.total,
+      couldDeselectAll: message.selectedCount === message.total,
+      selectedList: message.selectedFiles,
+    });
   }
 
   /** @private */
   handleIframeLoad() {
     this.applyStyles();
-  }
-
-  /**
-   * @private
-   * @param {string} propName
-   */
-  getCssValue(propName) {
-    let style = window.getComputedStyle(this);
-    return style.getPropertyValue(propName).trim();
+    this.setupL10n();
   }
 
   /** @private */
   applyStyles() {
-    let colors = {
-      radius: this.getCssValue('--uc-radius'),
-      backgroundColor: this.getCssValue('--uc-background'),
-      textColor: this.getCssValue('--uc-foreground'),
-      secondaryColor: this.getCssValue('--uc-secondary'),
-      secondaryForegroundColor: this.getCssValue('--uc-secondary-foreground'),
-      secondaryHover: this.getCssValue('--uc-secondary-hover'),
-      linkColor: this.getCssValue('--uc-primary'),
-      linkColorHover: this.getCssValue('--uc-primary-hover'),
-      fontFamily: this.getCssValue('--uc-font-family'),
-      fontSize: this.getCssValue('--uc-font-size'),
-    };
+    this._messageBridge?.send({
+      type: 'set-theme-definition',
+      theme: buildThemeDefinition(this),
+    });
+  }
 
-    this.sendMessage({
-      type: 'embed-css',
-      style: buildStyles(colors),
+  /** @private */
+  setupL10n() {
+    this._messageBridge?.send({
+      type: 'set-locale-definition',
+      localeDefinition: this.cfg.localeName,
     });
   }
 
   /** @private */
   remoteUrl() {
-    const { pubkey, remoteTabSessionKey, socialBaseUrl } = this.cfg;
+    const { pubkey, remoteTabSessionKey, socialBaseUrl, multiple } = this.cfg;
     const { externalSourceType } = this.activityParams;
     const lang = this.l10n('social-source-lang')?.split('-')?.[0] || 'en';
     const params = {
       lang,
       public_key: pubkey,
       images_only: false.toString(),
-      pass_window_open: false,
       session_key: remoteTabSessionKey,
+      wait_for_theme: true,
+      multiple: multiple.toString(),
     };
-    const url = new URL(`/window3/${externalSourceType}`, socialBaseUrl);
+    const url = new URL(`/window4/${externalSourceType}`, socialBaseUrl);
     url.search = queryString(params);
     return url.toString();
   }
@@ -231,31 +213,43 @@ export class ExternalSource extends UploaderBlock {
     this.ref.iframeWrapper.innerHTML = '';
     this.ref.iframeWrapper.appendChild(iframe);
 
-    registerMessage('file-selected', iframe.contentWindow, this.handleFileSelected.bind(this));
+    if (!iframe.contentWindow) {
+      return;
+    }
+
+    this._messageBridge?.destroy();
+
+    /** @private */
+    this._messageBridge = new MessageBridge(iframe.contentWindow);
+    this._messageBridge.on('selected-files-change', this.handleSelectedFilesChange.bind(this));
 
-    this._iframe = iframe;
-    this.$.selectedList = [];
+    this.resetSelectionStatus();
   }
 
   /** @private */
   unmountIframe() {
-    this._iframe && unregisterMessage('file-selected', this._iframe.contentWindow);
+    this._messageBridge?.destroy();
+    this._messageBridge = undefined;
     this.ref.iframeWrapper.innerHTML = '';
-    this._iframe = null;
-    this.$.selectedList = [];
-    this.$.counter = 0;
+
+    this.resetSelectionStatus();
+  }
+
+  /** @private */
+  resetSelectionStatus() {
+    this.set$({
+      selectedList: [],
+      total: 0,
+      isSelectionReady: false,
+      couldSelectAll: false,
+      couldDeselectAll: false,
+      showSelectionStatus: false,
+    });
   }
 }
 
 ExternalSource.template = /* HTML */ `
   <uc-activity-header>
-    <button type="button" class="uc-mini-btn" set="onclick: *historyBack" l10n="@title:back">
-      <uc-icon name="back"></uc-icon>
-    </button>
-    <div>
-      <uc-icon set="@name: activityIcon"></uc-icon>
-      <span>{{activityCaption}}</span>
-    </div>
     <button
       type="button"
       class="uc-mini-btn uc-close-btn"
@@ -269,12 +263,15 @@ ExternalSource.template = /* HTML */ `
     <div ref="iframeWrapper" class="uc-iframe-wrapper"></div>
     <div class="uc-toolbar">
       <button type="button" class="uc-cancel-btn uc-secondary-btn" set="onclick: onCancel" l10n="cancel"></button>
-      <div></div>
-      <div set="@hidden: !multiple" class="uc-selected-counter"><span l10n="selected-count"></span>{{counter}}</div>
+      <div set="@hidden: !showSelectionStatus" class="uc-selection-status-box">
+        <span>{{counterText}}</span>
+        <button type="button" set="onclick: onSelectAll; @hidden: !couldSelectAll" l10n="select-all"></button>
+        <button type="button" set="onclick: onDeselectAll; @hidden: !couldDeselectAll" l10n="deselect-all"></button>
+      </div>
       <button
         type="button"
         class="uc-done-btn uc-primary-btn"
-        set="onclick: onDone; @disabled: !counter"
+        set="onclick: onDone; @disabled: !isSelectionReady"
         l10n="done"
       ></button>
     </div>

package/blocks/ExternalSource/MessageBridge.d.ts

@@ -0,0 +1,20 @@
+export class MessageBridge {
+    /** @param {Window} context */
+    constructor(context: Window);
+    /** @type {Map<string, Set<import('./types').InputMessageHandler<import('./types').InputMessageType>>>} */
+    _handlerMap: Map<string, Set<import('./types').InputMessageHandler<import('./types').InputMessageType>>>;
+    /** @type {Window} */
+    _context: Window;
+    /** @param {MessageEvent} e */
+    _handleMessage: (e: MessageEvent) => void;
+    /**
+     * @template {import('./types').InputMessageType} T
+     * @param {T} type
+     * @param {import('./types').InputMessageHandler<T>} handler
+     */
+    on<T extends "selected-files-change">(type: T, handler: import("./types").InputMessageHandler<T>): void;
+    /** @param {import('./types').OutputMessage} message */
+    send(message: import('./types').OutputMessage): void;
+    destroy(): void;
+}
+//# sourceMappingURL=MessageBridge.d.ts.map