Overview
The MediaManager handles media asset storage, retrieval, and lifecycle management. Media assets include videos, images, and audio files. Access it through editor.media.
Usage
Adding media assets
const project = editor.project.getActive();
// Add a video asset
await editor.media.addMediaAsset({
projectId: project.metadata.id,
asset: {
type: 'video',
name: 'my-video.mp4',
url: videoObjectURL,
duration: 30.5,
thumbnailUrl: thumbnailObjectURL,
metadata: {
width: 1920,
height: 1080,
fps: 30
}
}
});
Getting and removing assets
// Get all assets
const assets = editor.media.getAssets();
// Remove an asset
await editor.media.removeMediaAsset({
projectId: project.metadata.id,
id: 'asset-123'
});
Methods
addMediaAsset()
Adds a media asset to the project.
addMediaAsset({
projectId,
asset
}: {
projectId: string;
asset: Omit<MediaAsset, 'id'>;
}): Promise<void>
ID of the project to add the asset to
asset
Omit<MediaAsset, 'id'>
required
Media asset data (ID is auto-generated)
await editor.media.addMediaAsset({
projectId: 'project-123',
asset: {
type: 'video',
name: 'clip.mp4',
url: blobURL,
duration: 10.5,
thumbnailUrl: thumbURL,
metadata: {
width: 1920,
height: 1080,
fps: 30
}
}
});
If saving fails, the asset is automatically removed from memory.
removeMediaAsset()
Removes a media asset from the project.
removeMediaAsset({
projectId,
id
}: {
projectId: string;
id: string;
}): Promise<void>
ID of the media asset to remove
await editor.media.removeMediaAsset({
projectId: 'project-123',
id: 'media-asset-456'
});
Removing a media asset also deletes all timeline elements that reference it.
getAssets()
Returns all media assets for the current project.
getAssets(): MediaAsset[]
MediaAsset[] - Array of media assets
Example
const assets = editor.media.getAssets();
console.log(`Total assets: ${assets.length}`);
for (const asset of assets) {
console.log(`${asset.name}: ${asset.type}`);
}
setAssets()
Sets the media assets. Used internally when loading projects.
setAssets({ assets }: { assets: MediaAsset[] }): void
Array of media assets to set
editor.media.setAssets({ assets: loadedAssets });
isLoadingMedia()
Returns whether media is currently loading.
isLoadingMedia(): boolean
boolean - True if loading
Example
if (editor.media.isLoadingMedia()) {
console.log('Loading media assets...');
}
Project lifecycle methods
loadProjectMedia()
Loads all media assets for a project. Called internally when loading a project.
loadProjectMedia({ projectId }: { projectId: string }): Promise<void>
ID of the project to load media for
await editor.media.loadProjectMedia({ projectId: 'project-123' });
clearProjectMedia()
Clears all media assets for a project from storage.
clearProjectMedia({ projectId }: { projectId: string }): Promise<void>
ID of the project to clear media from
await editor.media.clearProjectMedia({ projectId: 'project-123' });
This permanently deletes all media assets for the project from storage.
clearAllAssets()
Clears all media assets from memory. Called internally when closing a project.
Example
editor.media.clearAllAssets();
This only clears assets from memory, not from storage. It also revokes all object URLs and clears the video cache.
subscribe()
Subscribes to media state changes.
subscribe(listener: () => void): () => void
Function called when media state changes
() => void - Unsubscribe function
Example
const unsubscribe = editor.media.subscribe(() => {
console.log('Media assets changed');
});
// Later: cleanup
unsubscribe();
The useEditor() hook automatically subscribes to media changes. Only use subscribe() directly in non-React code.
MediaAsset type
Media assets have the following structure:
interface MediaAsset {
id: string;
type: 'video' | 'image' | 'audio';
name: string;
url: string;
duration?: number;
thumbnailUrl?: string;
metadata?: {
width?: number;
height?: number;
fps?: number;
// ... other metadata
};
}
const assets = editor.media.getAssets();
const videos = assets.filter(asset => asset.type === 'video');
const images = assets.filter(asset => asset.type === 'image');
console.log(`Videos: ${videos.length}, Images: ${images.length}`);