Documentation Index
Fetch the complete documentation index at: https://mintlify.com/OpenCut-app/OpenCut/llms.txt
Use this file to discover all available pages before exploring further.
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}`);