@uploadcare/file-uploader 1.27.1 → 1.28.0-alpha.0

package/dist/abstract/managers/plugin/PluginTypes.d.ts

@@ -0,0 +1,146 @@
+import { ConfigType, OutputFileEntry } from '../../../types/exported';
+import { CustomConfig, CustomConfigDefinition } from '../../customConfigOptions';
+import { UploaderPublicApi } from '../../UploaderPublicApi';
+export type PluginIconRegistration = {
+    name: string;
+    svg: string;
+};
+export type PluginI18nRegistration = Record<string, Record<string, string>>;
+export type PluginSourceRegistration = {
+    id: string;
+    label: string;
+    icon?: string;
+    /**
+     * Optional expansion function. When present, SourceList calls this to determine
+     * which source IDs should actually be rendered in place of this source.
+     * Useful for sources that map to multiple device-specific variants (e.g. camera
+     * expanding to separate photo/video buttons on mobile).
+     * Return `[id]` (the source's own id) to render it as-is.
+     */
+    expand?: () => string[];
+    onSelect: () => Promise<void> | void;
+};
+export type PluginRenderDispose = () => void;
+export type PluginRender = (el: HTMLElement, activityParams: Record<string, unknown>) => PluginRenderDispose | undefined;
+export type PluginActivityRegistration = {
+    id: string;
+    render: PluginRender;
+};
+export type PluginFileActionRegistration = {
+    id: string;
+    icon: string;
+    shouldRender: (fileEntry: OutputFileEntry) => boolean;
+    onClick: (fileEntry: OutputFileEntry) => void | Promise<void>;
+};
+export type PluginFileHookContext = {
+    /** The file to transform */
+    file: File | Blob;
+    /** MIME type of the file */
+    mimeType: string | null;
+};
+export type PluginFileHookRegistration = {
+    /**
+     * When the hook is called:
+     * - `'beforeUpload'`: called right before the file is uploaded.
+     * - `'onAdd'`: called after the file is added to the upload list.
+     *
+     * Return the modified file and mimeType. Return the originals if no transformation is needed.
+     */
+    type: 'beforeUpload' | 'onAdd';
+    handler: (context: PluginFileHookContext) => PluginFileHookContext | Promise<PluginFileHookContext>;
+};
+export type PluginRegistryApi = {
+    registerSource: (source: PluginSourceRegistration) => PluginSourceRegistration;
+    registerActivity: (activity: PluginActivityRegistration) => PluginActivityRegistration;
+    registerFileAction: (fileAction: PluginFileActionRegistration) => PluginFileActionRegistration;
+    registerFileHook: (hook: PluginFileHookRegistration) => PluginFileHookRegistration;
+    registerIcon: (icon: PluginIconRegistration) => PluginIconRegistration;
+    registerI18n: (i18n: PluginI18nRegistration) => PluginI18nRegistration;
+    registerConfig: <T = unknown>(definition: CustomConfigDefinition<T>) => void;
+};
+/**
+ * API for managing plugin config subscriptions
+ */
+export type PluginConfigApi = {
+    get: <TKey extends keyof (ConfigType & CustomConfig)>(configName: TKey) => (ConfigType & CustomConfig)[TKey];
+    subscribe: <TKey extends keyof (ConfigType & CustomConfig)>(configName: TKey, callback: (value: (ConfigType & CustomConfig)[TKey]) => void) => () => void;
+};
+/**
+ * API for managing plugin activity interactions
+ */
+export type PluginActivityApi = {
+    /**
+     * Get the current activity parameters.
+     *
+     * @returns The current activity parameters object
+     *
+     * @example
+     * ```typescript
+     * const params = pluginApi.activity.getParams();
+     * console.log('Current params:', params);
+     * ```
+     */
+    getParams: () => Record<string, unknown>;
+    /**
+     * Subscribe to changes in activity parameters.
+     * The callback will be called immediately with the current params,
+     * and then whenever the params change.
+     *
+     * Subscriptions are automatically cleaned up when the plugin is disposed.
+     *
+     * @param callback - Function to call with the new params
+     * @returns Unsubscribe function
+     *
+     * @example
+     * ```typescript
+     * pluginApi.activity.subscribeToParams((params) => {
+     *   console.log('Activity params changed:', params);
+     * });
+     * // Cleanup happens automatically on plugin disposal
+     * ```
+     */
+    subscribeToParams: (callback: (params: Record<string, unknown>) => void) => () => void;
+};
+export type PluginFileEntryUpdate = {
+    file?: File | Blob;
+    cdnUrl?: string | null;
+    cdnUrlModifiers?: string | null;
+    mimeType?: string | null;
+};
+export type PluginFilesApi = {
+    /**
+     * Update mutable properties of a file entry by its internalId.
+     * `fileSize` is recalculated automatically when `file` is provided.
+     */
+    update: (internalId: string, changes: PluginFileEntryUpdate) => void;
+};
+export type PluginApi = {
+    registry: PluginRegistryApi;
+    config: PluginConfigApi;
+    activity: PluginActivityApi;
+    files: PluginFilesApi;
+};
+export type PluginUploaderApi = UploaderPublicApi;
+export type PluginExports = {
+    dispose?: () => void;
+};
+export type PluginSetupResult = PluginExports | void | Promise<PluginExports | void>;
+export type PluginSetupParams = {
+    pluginApi: PluginApi;
+    uploaderApi: PluginUploaderApi;
+};
+export type UploaderPlugin = {
+    id: string;
+    setup: (params: PluginSetupParams) => PluginSetupResult;
+};
+export type Owned<T> = T & {
+    pluginId: string;
+};
+export type PluginRegistrySnapshot = {
+    sources: Owned<PluginSourceRegistration>[];
+    activities: Owned<PluginActivityRegistration>[];
+    fileActions: Owned<PluginFileActionRegistration>[];
+    fileHooks: Owned<PluginFileHookRegistration>[];
+    icons: Owned<PluginIconRegistration>[];
+    i18n: Owned<PluginI18nRegistration>[];
+};

package/dist/abstract/managers/plugin/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PluginManager';
+export * from './PluginTypes';

package/dist/abstract/sharedConfigKey.d.ts

@@ -0,0 +1,2 @@
+import { ConfigType } from '../types';
+export declare const sharedConfigKey: <T extends keyof ConfigType>(key: T) => `*cfg/${T}`;

package/dist/abstract/uploadEntrySchema.d.ts

@@ -0,0 +1,34 @@
+import { Metadata, UploadcareFile } from '@uploadcare/upload-client';
+import { OutputErrorFile } from '../types/index';
+import { TypedData } from './TypedData';
+export interface UploadEntryData extends Record<string, unknown> {
+    file: File | null;
+    externalUrl: string | null;
+    fileName: string | null;
+    fileSize: number | null;
+    lastModified: number;
+    uploadProgress: number;
+    uuid: string | null;
+    isImage: boolean;
+    mimeType: string | null;
+    ctxName: string | null;
+    cdnUrl: string | null;
+    cdnUrlModifiers: string | null;
+    fileInfo: UploadcareFile | null;
+    isUploading: boolean;
+    abortController: AbortController | null;
+    thumbUrl: string | null;
+    silent: boolean;
+    source: string | null;
+    fullPath: string | null;
+    metadata: Metadata | null;
+    errors: OutputErrorFile[];
+    uploadError: Error | null;
+    isRemoved: boolean;
+    isQueuedForUploading: boolean;
+    isValidationPending: boolean;
+    isQueuedForValidation: boolean;
+}
+export declare const initialUploadEntryData: UploadEntryData;
+export type UploadEntryTypedData = TypedData<UploadEntryData>;
+export type UploadEntryKeys = keyof UploadEntryData;

package/dist/blocks/ActivityHeader/ActivityHeader.d.ts

@@ -0,0 +1,8 @@
+import { LitActivityBlock } from '../../lit/LitActivityBlock';
+export declare class ActivityHeader extends LitActivityBlock {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uc-activity-header': ActivityHeader;
+    }
+}

package/dist/blocks/CameraSource/CameraSource.d.ts

@@ -0,0 +1,121 @@
+import { PropertyValues } from 'lit';
+import { LitUploaderBlock } from '../../lit/LitUploaderBlock';
+export type CameraMode = 'photo' | 'video';
+export type CameraStatus = 'shot' | 'retake' | 'accept' | 'play' | 'stop' | 'pause' | 'resume';
+export declare class CameraSource extends LitUploaderBlock {
+    couldBeCtxOwner: boolean;
+    private _unsubPermissions;
+    private _capturing;
+    private _chunks;
+    private _mediaRecorder;
+    private _stream;
+    private _selectedAudioId;
+    private _selectedCameraId;
+    private _activeTab;
+    private _options;
+    private _canvas;
+    private _ctx;
+    private _cameraDevices;
+    private _audioDevices;
+    private _permissionResponses;
+    private _permissionCleanupFns;
+    private _currentVideoSource;
+    private readonly _handlePreviewPlay;
+    private readonly _handlePreviewPause;
+    private _timerRef;
+    private _lineRef;
+    private _videoRef;
+    private _switcherRef;
+    private _startTime;
+    private _elapsedTime;
+    private _videoTransformCss;
+    private _videoHidden;
+    private _messageHidden;
+    private _requestBtnHidden;
+    private _cameraSelectOptions;
+    private _cameraSelectHidden;
+    private _l10nMessage;
+    private _timerHidden;
+    private _cameraHidden;
+    private _cameraActionsHidden;
+    private _audioSelectOptions;
+    private _audioSelectHidden;
+    private _audioSelectDisabled;
+    private _audioToggleMicrophoneHidden;
+    private _tabCameraHidden;
+    private _tabVideoHidden;
+    private _currentIcon;
+    private _currentTimelineIcon;
+    private _toggleMicrophoneIcon;
+    private _mutableClassButton;
+    private _chooseActionWithCamera;
+    private _handleCameraSelectChange;
+    private _handleAudioSelectChange;
+    private _handleRequestPermissions;
+    private _handleStartCamera;
+    private _handleToggleRecording;
+    private _handleToggleAudio;
+    private _handleRetake;
+    private _handleAccept;
+    private _handleClickTab;
+    private _updateTimer;
+    private _startTimer;
+    private _stopTimer;
+    private _startTimeline;
+    private _stopTimeline;
+    private _animationFrameId;
+    private _startRecording;
+    private _stopRecording;
+    /** This method is used to toggle recording pause/resume */
+    private _toggleRecording;
+    private _toggleEnableAudio;
+    /**
+     * Previewing the video that was recorded on the camera
+     */
+    private _previewVideo;
+    private _attachPreviewListeners;
+    private _detachPreviewListeners;
+    private _setVideoSource;
+    /**
+     * Do not bind srcObject directly in the template, because it stops video pausing on shot.
+     * I really don'y know why but that's how it is. Assigning srcObject manually fixes the issue.
+     */
+    private _applyVideoSource;
+    private _retake;
+    private _accept;
+    private _handlePhoto;
+    private _handleVideo;
+    private _setCameraState;
+    private _shot;
+    private _handleActiveTab;
+    private _createFile;
+    private _guessExtensionByMime;
+    /**
+     * The send file to the server
+     */
+    private _toSend;
+    private get _cameraModes();
+    private _setPermissionsState;
+    private _makeStreamInactive;
+    private _stopCapture;
+    private _capture;
+    private _handlePermissionsChange;
+    private _permissionAccess;
+    private _teardownPermissionListeners;
+    private _requestDeviceAccess;
+    private _getDevices;
+    private _onActivate;
+    private _onDeactivate;
+    private _handleCameraModes;
+    initCallback(): void;
+    firstUpdated(changedProperties: PropertyValues<this>): void;
+    updated(changedProperties: PropertyValues<this>): void;
+    private _destroy;
+    disconnectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uc-camera-source': CameraSource;
+    }
+}

package/dist/blocks/CameraSource/__tests__/calcCameraModes.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/blocks/CameraSource/calcCameraModes.d.ts

@@ -0,0 +1,5 @@
+import { ConfigType } from '../../types/index';
+export declare const calcCameraModes: (cfg: ConfigType) => {
+    isVideoRecordingEnabled: boolean;
+    isPhotoEnabled: boolean;
+};

package/dist/blocks/CameraSource/constants.d.ts

@@ -0,0 +1,15 @@
+export declare const CameraSourceTypes: Readonly<{
+    PHOTO: "photo";
+    VIDEO: "video";
+}>;
+export declare const CameraSourceEvents: Readonly<{
+    IDLE: "idle";
+    SHOT: "shot";
+    PLAY: "play";
+    PAUSE: "pause";
+    RESUME: "resume";
+    STOP: "stop";
+    RETAKE: "retake";
+    ACCEPT: "accept";
+}>;
+export type ModeCameraType = (typeof CameraSourceTypes)[keyof typeof CameraSourceTypes];

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

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

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

@@ -0,0 +1,60 @@
+import { PropertyValues } from 'lit';
+import { LitBlock } from '../../../lit/LitBlock';
+import { initState } from './state.js';
+export declare class CloudImageEditorBlock extends LitBlock {
+    attributesMeta: ({
+        uuid: string;
+    } | {
+        'cdn-url': string;
+    }) & Partial<{
+        tabs: string;
+        'crop-preset': string;
+    }> & {
+        'ctx-name': string;
+    };
+    ctxOwner: boolean;
+    static styleAttrs: string[];
+    private _statusMessage;
+    private _imageSrc;
+    private _fileType;
+    private _showLoader;
+    uuid: string | null;
+    cdnUrl: string | null;
+    cropPreset: string;
+    tabs: string | null;
+    private _hasNetworkProblems;
+    private _isInitialized;
+    private _pendingInitUpdate;
+    private readonly _debouncedShowLoader;
+    private readonly _imgRef;
+    private readonly _cropperRef;
+    private readonly _faderRef;
+    private readonly _imgContainerRef;
+    private readonly _handleImageLoad;
+    private readonly _handleImageError;
+    private readonly _handleRetryNetwork;
+    private _scheduleInitialization;
+    init$: ReturnType<typeof initState>;
+    initCallback(): void;
+    private _assignSharedElements;
+    private _attachImageListeners;
+    private _detachImageListeners;
+    private get _imageClassName();
+    /**
+     * To proper work, we need non-zero size the element. So, we'll wait for it.
+     */
+    private _waitForSize;
+    firstUpdated(changedProperties: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    private _syncTabListFromProp;
+    private _syncCropPresetState;
+    updateImage(): Promise<void>;
+    initEditor(): Promise<void>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uc-cloud-image-editor-block': CloudImageEditorBlock;
+    }
+}

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

@@ -0,0 +1,56 @@
+import { PropertyValues, TemplateResult } from 'lit';
+import { LitBlock } from '../../../lit/LitBlock';
+export declare class CropFrame extends LitBlock {
+    private _backdropMask?;
+    private _backdropMaskInner?;
+    private readonly _backdropMaskId;
+    private _frameThumbs?;
+    private _frameGuides?;
+    private _draggingThumb?;
+    private _hoverThumb?;
+    private _dragStartPoint?;
+    private _dragStartCrop?;
+    private _frameImage?;
+    private _guidesHidden;
+    private _draggingValue;
+    private readonly _svgRef;
+    private _svgReady;
+    private _pendingMaskHref;
+    private get _svgElement();
+    private get _dragging();
+    private set _dragging(value);
+    private _applyGuidesDragState;
+    private _shouldThumbBeDisabled;
+    private _createBackdrop;
+    /**
+     * @private Super Tricky workaround for the chromium bug See
+     *   https://bugs.chromium.org/p/chromium/issues/detail?id=330815
+     */
+    private _resizeBackdrop;
+    private _updateBackdrop;
+    private _updateFrame;
+    private _createThumb;
+    private _createThumbs;
+    private _createGuides;
+    private _createFrame;
+    private _handlePointerDown;
+    private readonly _handlePointerUp;
+    private readonly _handlePointerMove;
+    private _calcCropBox;
+    private readonly _handleSvgPointerMove;
+    private _updateCursor;
+    private _createMask;
+    private _updateMask;
+    private _render;
+    toggleThumbs(visible: boolean): void;
+    initCallback(): void;
+    protected firstUpdated(changedProperties: PropertyValues<this>): void;
+    private _initializeSvg;
+    disconnectedCallback(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uc-crop-frame': CropFrame;
+    }
+}

package/dist/blocks/CloudImageEditor/src/EditorAspectRatioButtonControl.d.ts

@@ -0,0 +1,24 @@
+import { EditorButtonControl } from './EditorButtonControl.js';
+import { CropAspectRatio } from './types';
+export declare class EditorFreeformButtonControl extends EditorButtonControl {
+    initCallback(): void;
+    onClick(): void;
+    private _computeTitle;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export declare class EditorAspectRatioButtonControl extends EditorButtonControl {
+    private _aspectRatio;
+    get aspectRatio(): CropAspectRatio | null;
+    set aspectRatio(value: CropAspectRatio | null);
+    initCallback(): void;
+    protected onClick(): void;
+    private _updateAspectRatioPresentation;
+    private _renderIcon;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uc-editor-freeform-button-control': EditorFreeformButtonControl;
+        'uc-editor-aspect-ratio-button-control': EditorAspectRatioButtonControl;
+    }
+}

package/dist/blocks/CloudImageEditor/src/EditorButtonControl.d.ts

@@ -0,0 +1,14 @@
+import { PropertyValues } from 'lit';
+import { LitBlock } from '../../../lit/LitBlock';
+export declare class EditorButtonControl extends LitBlock {
+    active: boolean;
+    title: string;
+    protected icon: string;
+    protected titleProp: string;
+    protected get buttonClasses(): Record<string, boolean>;
+    private _updateHostStateClasses;
+    protected onClick(_event: MouseEvent): void;
+    connectedCallback(): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/blocks/CloudImageEditor/src/EditorCropButtonControl.d.ts

@@ -0,0 +1,13 @@
+import { PropertyValues } from 'lit';
+import { EditorButtonControl } from './EditorButtonControl.js';
+import { CropOperation } from './toolbar-constants';
+export declare class EditorCropButtonControl extends EditorButtonControl {
+    operation: CropOperation | undefined;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected onClick(e: MouseEvent): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uc-editor-crop-button-control': EditorCropButtonControl;
+    }
+}

package/dist/blocks/CloudImageEditor/src/EditorFilterControl.d.ts

@@ -0,0 +1,35 @@
+import { PropertyValues } from 'lit';
+import { EditorButtonControl } from './EditorButtonControl.js';
+export declare class EditorFilterControl extends EditorButtonControl {
+    private _operation;
+    private _filter;
+    private _originalUrl;
+    private _observer?;
+    private _cancelPreload?;
+    private _lastPreviewRequestId;
+    private _previewVisibilityCheckRaf?;
+    private _previewVisibilityCheckTimeout?;
+    private _previewImage;
+    private _previewLoaded;
+    isOriginal: boolean;
+    private _iconSize;
+    get filter(): string;
+    set filter(value: string);
+    onClick(e: MouseEvent): void;
+    private _previewSrc;
+    private _observerCallback;
+    initCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    private _updateFilterLabels;
+    private _loadPreview;
+    private _schedulePreviewVisibilityCheck;
+    private _clearPreviewVisibilityChecks;
+    private get _shouldShowPreview();
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uc-editor-filter-control': EditorFilterControl;
+    }
+}

package/dist/blocks/CloudImageEditor/src/EditorImageCropper.d.ts

@@ -0,0 +1,56 @@
+import { PropertyValues, TemplateResult } from 'lit';
+import { LitBlock } from '../../../lit/LitBlock';
+import { ImageSize } from './types';
+type Operations = {
+    flip: boolean;
+    mirror: boolean;
+    rotate: number;
+};
+export declare class EditorImageCropper extends LitBlock {
+    ctxOwner: boolean;
+    private _commitDebounced;
+    private _handleResizeThrottled;
+    private _imageSize;
+    private _canvas?;
+    private _ctx;
+    private _isActive;
+    private _observer?;
+    private _image;
+    private _cancelPreload?;
+    private readonly _canvasRef;
+    private readonly _frameRef;
+    constructor();
+    protected firstUpdated(changedProperties: PropertyValues<this>): void;
+    private _syncTransformations;
+    private _initCanvas;
+    private _alignImage;
+    private _alignCrop;
+    private _drawImage;
+    private _draw;
+    private _animateIn;
+    private _getCropDimensions;
+    private _getCropTransformation;
+    private _commit;
+    setValue<K extends keyof Operations>(operation: K, value: Operations[K]): void;
+    getValue<K extends keyof Operations>(operation: K): Operations[K];
+    activate(imageSize: ImageSize, { fromViewer }?: {
+        fromViewer?: boolean;
+    }): Promise<void>;
+    deactivate({ reset }?: {
+        reset?: boolean;
+    }): void;
+    private _transitionToCrop;
+    private _transitionToImage;
+    private _reset;
+    private _waitForImage;
+    private _handleImageLoading;
+    initCallback(): void;
+    disconnectedCallback(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uc-editor-image-cropper': EditorImageCropper;
+    }
+}
+export {};

package/dist/blocks/CloudImageEditor/src/EditorImageFader.d.ts

@@ -0,0 +1,63 @@
+import { TemplateResult } from 'lit';
+import { LitBlock } from '../../../lit/LitBlock';
+import { COLOR_OPERATIONS_CONFIG } from './toolbar-constants.js';
+import { Transformations } from './types';
+type OperationKey = keyof typeof COLOR_OPERATIONS_CONFIG;
+export declare class EditorImageFader extends LitBlock {
+    private _isActive;
+    private _hidden;
+    private _operation;
+    private _filter;
+    private _value?;
+    private _transformations;
+    private _keypoints;
+    private _previewImage?;
+    private _cancelLastImages?;
+    private _cancelBatchPreload?;
+    private _url?;
+    private _fromViewer?;
+    private _raf;
+    private _addKeypointDebounced;
+    private readonly _previewHostRef;
+    private readonly _layersHostRef;
+    constructor();
+    private _handleImageLoading;
+    private _flush;
+    private _imageSrc;
+    private _constructKeypoint;
+    /**
+     * Check if current operation and filter equals passed ones
+     */
+    private _isSame;
+    set(value: string | number): void;
+    private _update;
+    private _createPreviewImage;
+    private _initNodes;
+    setTransformations(transformations: Transformations): Promise<void>;
+    preload({ url, filter, operation, value, }: {
+        url: string;
+        filter?: string;
+        operation?: OperationKey;
+        value?: number;
+    }): Promise<void>;
+    private _setOriginalSrc;
+    activate({ url, operation, value, filter, fromViewer, }: {
+        url: string;
+        operation?: OperationKey;
+        value?: number;
+        filter?: string;
+        fromViewer?: boolean;
+    }): Promise<void>;
+    deactivate({ hide }?: {
+        hide?: boolean;
+    }): void;
+    private _ensurePreviewAttached;
+    private _clearLayersHost;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uc-editor-image-fader': EditorImageFader;
+    }
+}
+export {};