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

package/blocks/CameraSource/camera-source.css

@@ -10,9 +10,25 @@ uc-camera-source {
   border-radius: var(--uc-radius);
 }
 
-[uc-modal] > dialog:has(uc-camera-source[active]) {
-  width: 100%;
-  height: 100%;
+[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-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 {
@@ -36,11 +52,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;
@@ -62,12 +78,10 @@ uc-camera-source .uc-message-box button {
 }
 
 uc-camera-source .uc-shot-btn {
-  position: absolute;
-  bottom: 20px;
   width: 58px;
   height: 58px;
   color: var(--uc-background);
-  background-color: var(--uc-foreground);
+  background-color: var(--uc-primary-light);
   border-radius: 50%;
   opacity: 0.85;
   transition:
@@ -94,3 +108,87 @@ uc-camera-source .uc-shot-btn uc-icon svg {
   width: 20px;
   height: 20px;
 }
+
+uc-camera-source .uc-controls {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 0 var(--uc-padding) var(--uc-padding);
+  min-height: 74px;
+}
+
+uc-camera-source .uc-switcher {
+  display: flex;
+}
+uc-camera-source .uc-switch.uc-active {
+  background-color: var(--uc-secondary);
+}
+
+uc-camera-source .uc-camera-actions {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 5px;
+}
+
+uc-camera-source .uc-stop-record {
+  background-color: var(--uc-destructive-foreground-light);
+  opacity: 1;
+}
+
+:where(uc-camera-source:is(.uc-recording)) .uc-recording-timer uc-icon {
+  display: none;
+}
+
+:where(uc-camera-source:is(.uc-recording)) .uc-recording-timer {
+  pointer-events: none;
+}
+
+uc-camera-source .uc-recording-timer {
+  z-index: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+:where(uc-camera-source) .uc-recording-timer uc-icon {
+  width: 10px;
+  height: 10px;
+  margin-right: 10px;
+}
+
+uc-camera-source .uc-recording-timer .uc-line {
+  position: absolute;
+  content: '';
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background-color: var(--uc-foreground-light);
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform var(--uc-transition);
+}
+
+uc-camera-source .uc-btn-microphone {
+  z-index: 1;
+}
+
+uc-camera-source .uc-select {
+  display: flex;
+}
+
+uc-camera-source .uc-audio-select {
+  width: 98px;
+}
+
+uc-camera-source .uc-audio-select select {
+  width: 100%;
+}
+
+uc-camera-source .uc-camera-action {
+  position: absolute;
+  inset: 0 var(--uc-padding) var(--uc-padding);
+  margin: 0 auto;
+}

package/blocks/CloudImageEditorActivity/index.css

@@ -7,7 +7,7 @@ uc-cloud-image-editor-activity {
   background-color: var(--uc-background);
 }
 
-[uc-modal] > dialog:has(uc-cloud-image-editor-activity[active]) {
-  width: 100%;
-  height: 100%;
+[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%);
 }

package/blocks/Config/Config.d.ts

@@ -9,6 +9,7 @@
  *   'iconHrefResolver',
  *   'fileValidators',
  *   'collectionValidators',
+ *   'optionsMediaRecorder',
  * ]}
  */
 export const complexConfigKeys: [
@@ -18,7 +19,8 @@ export const complexConfigKeys: [
     'secureDeliveryProxyUrlResolver',
     'iconHrefResolver',
     'fileValidators',
-    'collectionValidators'
+    'collectionValidators',
+    'optionsMediaRecorder'
 ];
 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 */
@@ -62,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" | "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", 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-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>;
 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;;;;;;;;;;;;GAYG;AACH,gCAVU;IACT,UAAc;IACd,0BAA8B;IAC9B,gCAAoC;IACpC,gCAAoC;IACpC,kBAAsB;IACtB,gBAAoB;IACpB,sBAA0B;CACvB,CAUF;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;sBArOqB,yBAAyB;AAoD/C,0CAA0C;AAC1C,qzDAGG"}
+{"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"}

package/blocks/Config/Config.js

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

package/blocks/Config/initialConfig.d.ts

@@ -1,6 +1,6 @@
 export const DEFAULT_CDN_CNAME: "https://ucarecdn.com";
 export const DEFAULT_BASE_URL: "https://upload.uploadcare.com";
-export const DEFAULT_SOCIAL_BASE_URL: "https://social.staging0.uploadcare.com";
+export const DEFAULT_SOCIAL_BASE_URL: "https://social.uploadcare.com";
 /** @type {import('../../types/exported').ConfigType} */
 export const initialConfig: import('../../types/exported').ConfigType;
 //# sourceMappingURL=initialConfig.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"initialConfig.d.ts","sourceRoot":"","sources":["initialConfig.js"],"names":[],"mappings":"AAKA,uDAAwD;AACxD,+DAAgE;AAChE,+EAAgF;AAEhF,wDAAwD;AACxD,4BADW,OAAO,sBAAsB,EAAE,UAAU,CA2DlD"}
+{"version":3,"file":"initialConfig.d.ts","sourceRoot":"","sources":["initialConfig.js"],"names":[],"mappings":"AAKA,uDAAwD;AACxD,+DAAgE;AAChE,sEAAuE;AAEvE,wDAAwD;AACxD,4BADW,OAAO,sBAAsB,EAAE,UAAU,CAiElD"}

package/blocks/Config/initialConfig.js

@@ -5,7 +5,7 @@ import { serializeCsv } from '../utils/comma-separated.js';
 
 export const DEFAULT_CDN_CNAME = 'https://ucarecdn.com';
 export const DEFAULT_BASE_URL = 'https://upload.uploadcare.com';
-export const DEFAULT_SOCIAL_BASE_URL = 'https://social.staging0.uploadcare.com';
+export const DEFAULT_SOCIAL_BASE_URL = 'https://social.uploadcare.com';
 
 /** @type {import('../../types/exported').ConfigType} */
 export const initialConfig = {
@@ -66,4 +66,10 @@ export const initialConfig = {
   iconHrefResolver: null,
   fileValidators: [],
   collectionValidators: [],
+
+  defaultCameraTab: 'photo',
+  enableAudioRecording: true,
+  enableVideoRecording: true,
+  maxDurationVideoRecord: null,
+  optionsMediaRecorder: null,
 };

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

@@ -1 +1 @@
-{"version":3,"file":"normalizeConfigValue.d.ts","sourceRoot":"","sources":["normalizeConfigValue.js"],"names":[],"mappings":"AAeO,iCADK,OAAO,WAWlB;AA4IM,sGAHI,OAAO,mDAcjB"}
+{"version":3,"file":"normalizeConfigValue.d.ts","sourceRoot":"","sources":["normalizeConfigValue.js"],"names":[],"mappings":"AAeO,iCADK,OAAO,WAWlB;AA4JM,sGAHI,OAAO,mDAcjB"}

package/blocks/Config/normalizeConfigValue.js

@@ -36,6 +36,15 @@ const asCameraCapture = (value) => {
   return strValue;
 };
 
+/** @param {unknown} value */
+const asCameraTab = (value) => {
+  const strValue = asString(value);
+  if (strValue !== 'photo' && strValue !== 'video') {
+    throw new Error(`Invalid "CameraTab" value: "${strValue}"`);
+  }
+  return strValue;
+};
+
 /** @param {unknown} value */
 const asMetadata = (value) => {
   if (typeof value === 'object' && !Array.isArray(value)) {
@@ -75,7 +84,7 @@ const asFunction = (value) => {
 };
 
 /**
- * @template {Function[]} T
+ * @template {Function[] | string | {}} T
  * @param {unknown} value
  * @returns {T}
  */
@@ -155,6 +164,13 @@ const mapping = {
   iconHrefResolver: /** @type {typeof asFunction<import('../../types').IconHrefResolver>} */ (asFunction),
   fileValidators: /** @type {typeof asArray<import('../../types').FileValidators>} */ (asArray),
   collectionValidators: /** @type {typeof asArray<import('../../types').CollectionValidators>} */ (asArray),
+
+  defaultCameraTab: asCameraTab,
+  enableAudioRecording: asBoolean,
+  enableVideoRecording: asBoolean,
+  optionsMediaRecorder: asObject,
+
+  maxDurationVideoRecord: asNumber,
 };
 
 /**

package/blocks/ExternalSource/ExternalSource.d.ts

@@ -1,21 +1,30 @@
 /** @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;
-        /** @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;
+        selectedList: never[];
+        counter: number;
+        multiple: boolean;
         onDone: () => void;
         onCancel: () => void;
-        onSelectAll: () => void;
-        onDeselectAll: () => void;
         '*commonProgress': number;
         '*uploadList': never[];
         '*uploadQueue': import("@uploadcare/upload-client").Queue;
@@ -34,30 +43,39 @@ export class ExternalSource extends UploaderBlock {
     get activityParams(): ActivityParams;
     /**
      * @private
-     * @param {NonNullable<import('./types.js').InputMessageMap['selected-files-change']['selectedFiles']>[number]} selectedFile
+     * @type {HTMLIFrameElement | null}
      */
-    private extractUrlFromSelectedFile;
+    private _iframe;
     /**
      * @private
-     * @param {import('./types.js').InputMessageMap['selected-files-change']} message
+     * @param {SelectedFileMessage} message
      */
-    private handleSelectedFilesChange;
+    private extractUrlFromMessage;
+    /**
+     * @private
+     * @param {Message} message
+     */
+    private sendMessage;
+    /**
+     * @private
+     * @param {SelectedFileMessage} message
+     */
+    private handleFileSelected;
     /** @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;
@@ -65,5 +83,17 @@ 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;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"}
+{"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"}