@twick/video-editor 0.15.21 → 0.15.23

package/dist/helpers/asset-library.d.ts

@@ -0,0 +1,77 @@
+import { MediaItem } from './types';
+
+export type MediaType = "video" | "audio" | "image";
+export interface Paginated<T> {
+    items: T[];
+    page: number;
+    pageSize: number;
+    total: number;
+}
+export interface AssetListParams {
+    source: "user" | "public";
+    type?: MediaType;
+    query?: string;
+    page?: number;
+    pageSize?: number;
+    /** Optional concrete provider id for public assets (e.g. 'pexels'). */
+    provider?: string;
+}
+export interface AssetProviderConfig {
+    /** Stable provider id (e.g. 'pexels', 'unsplash', 'pixabay', 'twick-stock'). */
+    id: string;
+    /** Human readable label for UI (e.g. 'Pexels'). */
+    label: string;
+    /** Media types this provider can return. */
+    supportedTypes: MediaType[] | "all";
+    /** Whether this provider is currently enabled for the active tenant/deployment. */
+    enabled: boolean;
+    /** Optional URL to provider terms of use or attribution guidelines. */
+    termsUrl?: string;
+    /** Optional URL to provider logo/icon for UI. */
+    iconUrl?: string;
+    /** Optional rate-limit or quota hint for UX messaging. */
+    quotaHint?: string;
+}
+/**
+ * High-level asset library abstraction used by @twick/video-editor and
+ * @twick/studio. Implementations may back this with:
+ *
+ * - Local IndexedDB (BrowserMediaManager)
+ * - Twick Cloud asset services
+ * - Host application backends (Next.js / Node / serverless)
+ *
+ * The interface is intentionally minimal and provider-agnostic so that
+ * Studio and the editor do not need to know about individual vendors
+ * like Pexels or Unsplash.
+ */
+export interface AssetLibrary {
+    /**
+     * List or search assets from the unified library.
+     * - For source='user', this should return user-owned assets.
+     * - For source='public', this should fan out to one or more public providers.
+     */
+    listAssets(params: AssetListParams): Promise<Paginated<MediaItem>>;
+    /** Fetch a single asset by id, regardless of source. */
+    getAsset(id: string): Promise<MediaItem | null>;
+    /**
+     * Upload a new user asset.
+     * Implementations are free to use browser uploads, presigned URLs, or
+     * any other storage strategy; the resulting MediaItem must be fully
+     * usable by the editor (url + type).
+     */
+    uploadAsset(file: File, options?: {
+        type?: MediaType;
+        /**
+         * Optional metadata the caller wants to persist (e.g. user-provided
+         * tags or attribution notes).
+         */
+        metadata?: Record<string, unknown>;
+    }): Promise<MediaItem>;
+    /** Delete a user asset. Public/provider assets are read-only. */
+    deleteAsset(id: string): Promise<void>;
+    /**
+     * Discover which public providers are available in the current
+     * environment (and their capabilities).
+     */
+    listPublicProviders(): Promise<AssetProviderConfig[]>;
+}

package/dist/helpers/types.d.ts

@@ -23,19 +23,96 @@ export interface TextEffect {
     bufferTime?: number;
     getSample?: () => string;
 }
+export type MediaSource = "user" | "public";
+export type MediaOrigin = "upload" | "pexels" | "unsplash" | "pixabay" | "custom" | string;
+/**
+ * Generic media entity used by the editor and Studio.
+ *
+ * This shape is intentionally provider-agnostic and can represent:
+ * - User-uploaded assets (local or cloud-backed)
+ * - Public/provider assets (Pexels, Unsplash, internal stock, etc.)
+ *
+ * NOTE:
+ * - Existing consumers can continue to treat this as a simple MediaItem
+ *   (id, type, url, thumbnail, duration, etc.).
+ * - New fields (source/origin/provider/attribution) enable richer asset
+ *   library experiences without breaking backwards compatibility.
+ */
 export interface MediaItem {
+    /** Stable internal id for this asset within the host app/library. */
     id: string;
+    /** Human-readable name (file name, provider title, etc.). */
     name: string;
+    /** Logical media type (video, audio, image, etc.). */
     type: string;
+    /**
+     * Primary URL used by canvas/visualizer and exports.
+     * This may point to user storage, CDN, or a third-party provider.
+     */
     url: string;
+    /**
+     * Optional preview image URL (thumbnail or poster frame).
+     * Prefer using this over the full asset for grid/list views.
+     */
+    previewUrl?: string;
+    /**
+     * Backwards-compatible thumbnail alias for previewUrl.
+     */
     thumbnail?: string;
+    /**
+     * Optional URL to a precomputed audio waveform or spectrogram.
+     */
+    waveformUrl?: string;
+    /** Duration in milliseconds for audio/video assets (if known). */
     duration?: number;
+    /** Pixel dimensions for image/video assets (if known). */
     width?: number;
     height?: number;
+    /** Approximate size of the original asset in bytes (if known). */
+    sizeBytes?: number;
+    /**
+     * High-level source category: user-owned vs public/provider.
+     * Undefined for legacy items defaults to user-owned semantics.
+     */
+    source?: MediaSource;
+    /**
+     * Origin of the asset (upload, pexels, unsplash, etc.).
+     * Useful for analytics and provider-specific policies.
+     */
+    origin?: MediaOrigin;
+    /**
+     * Provider metadata (for public assets).
+     * - provider: canonical provider id ('pexels', 'unsplash', ...)
+     * - providerId: provider-specific asset id
+     * - providerUrl: link back to the provider's detail page
+     */
+    provider?: string;
+    providerId?: string;
+    providerUrl?: string;
+    /**
+     * Attribution and licensing hints for public assets.
+     * The host app can surface this in UI or export flows.
+     */
+    attribution?: {
+        text?: string;
+        author?: string;
+        authorUrl?: string;
+        licenseUrl?: string;
+    };
+    /** Free-form tags for search and filtering. */
+    tags?: string[];
+    /**
+     * Arbitrary structured metadata.
+     * Consumers should namespace their keys to avoid collisions.
+     */
     metadata?: {
         title?: string;
         [key: string]: any;
     };
+    /**
+     * Optional serialized binary representation for local-only storage
+     * (e.g. IndexedDB via BrowserMediaManager).
+     */
     arrayBuffer?: ArrayBuffer;
 }
 export interface PaginationOptions {

package/dist/index.d.ts

@@ -5,6 +5,7 @@ import { usePlayerControl } from './hooks/use-player-control';
 import { useEditorManager } from './hooks/use-editor-manager';
 import { default as BrowserMediaManager } from './helpers/media-manager/browser-media-manager';
 import { MediaItem, PaginationOptions, SearchOptions, Animation, TextEffect, ElementColors, CanvasConfig } from './helpers/types';
+import { AssetLibrary, AssetListParams, AssetProviderConfig, Paginated as AssetPaginated } from './helpers/asset-library';
 import { default as BaseMediaManager } from './helpers/media-manager/base-media-manager';
 import { animationGifs, getAnimationGif } from './assets';
 import { ANIMATIONS } from './helpers/animation-manager';
@@ -13,7 +14,7 @@ import { default as useTimelineControl } from './hooks/use-timeline-control';
 import { setElementColors } from './helpers/editor.utils';
 
 export { setElementColors };
-export type { MediaItem, PaginationOptions, SearchOptions, Animation, TextEffect, ElementColors };
+export type { MediaItem, PaginationOptions, SearchOptions, Animation, TextEffect, ElementColors, AssetLibrary, AssetListParams, AssetProviderConfig, AssetPaginated, };
 export type { PlayerControlsProps, VideoEditorProps, VideoEditorConfig, TimelineTickConfig, TimelineZoomConfig, CanvasConfig };
 export { throttle, debounce } from './helpers/function.utils';
 export { ANIMATIONS, TEXT_EFFECTS };

package/dist/index.js

@@ -9352,7 +9352,8 @@ const usePlayerManager = ({
     setSelectedItem,
     editor,
     changeLog,
-    videoResolution
+    videoResolution,
+    selectedIds
   } = timeline.useTimelineContext();
   const { getCurrentTime, setSeekTime } = livePlayer.useLivePlayerContext();
   const currentChangeLog = React.useRef(changeLog);
@@ -9508,8 +9509,23 @@ const usePlayerManager = ({
       captionProps,
       cleanAndAdd: true,
       lockAspectRatio: canvasConfig == null ? void 0 : canvasConfig.lockAspectRatio
+    }).then(() => {
+      currentChangeLog.current = changeLog;
+      if (twickCanvas && selectedIds.size > 0) {
+        const primaryId = [...selectedIds][0];
+        const objects = twickCanvas.getObjects();
+        const activeObject = objects.find(
+          (obj) => {
+            var _a2;
+            return ((_a2 = obj == null ? void 0 : obj.get) == null ? void 0 : _a2.call(obj, "id")) === primaryId;
+          }
+        );
+        if (activeObject && twickCanvas.getActiveObject() !== activeObject) {
+          twickCanvas.setActiveObject(activeObject);
+          twickCanvas.requestRenderAll();
+        }
+      }
     });
-    currentChangeLog.current = changeLog;
   };
   updateCanvasRef.current = updateCanvas;
   const onPlayerUpdate = (event) => {