Overview
The ScenesManager handles scene creation, switching, and bookmark management. Each project can have multiple scenes, with one marked as the main scene. Access it through editor.scenes.
Usage
Creating and switching scenes
// Create a new scene
const sceneId = await editor.scenes.createScene({
name: 'Scene 2',
isMain: false
});
// Switch to the scene
await editor.scenes.switchToScene({ sceneId });
Working with bookmarks
// Add a bookmark at current time
const currentTime = editor.playback.getCurrentTime();
await editor.scenes.toggleBookmark({ time: currentTime });
// Check if a time is bookmarked
const isBookmarked = editor.scenes.isBookmarked({ time: 5.0 });
// Update bookmark properties
await editor.scenes.updateBookmark({
time: 5.0,
updates: {
note: 'Important moment',
color: '#ff0000'
}
});
Scene methods
createScene()
Creates a new scene in the project.
createScene({ name, isMain }: {
name: string;
isMain: boolean
}): Promise<string>
Whether this is the main scene
Promise<string> - The ID of the created scene
Example
const sceneId = await editor.scenes.createScene({
name: 'Intro Scene',
isMain: false
});
Throws an error if no active project exists.
deleteScene()
Deletes a scene from the project.
deleteScene({ sceneId }: { sceneId: string }): Promise<void>
ID of the scene to delete
await editor.scenes.deleteScene({ sceneId: 'scene-123' });
Cannot delete the main scene or the last remaining scene. Throws an error in these cases.
renameScene()
Renames a scene.
renameScene({ sceneId, name }: {
sceneId: string;
name: string
}): Promise<void>
ID of the scene to rename
await editor.scenes.renameScene({
sceneId: 'scene-123',
name: 'Updated Scene Name'
});
switchToScene()
Switches the active scene.
switchToScene({ sceneId }: { sceneId: string }): Promise<void>
ID of the scene to switch to
await editor.scenes.switchToScene({ sceneId: 'scene-123' });
Throws an error if the scene is not found.
getActiveScene()
Returns the currently active scene.
Returns
TScene - The active scene
Example
const scene = editor.scenes.getActiveScene();
console.log(`Active scene: ${scene.name}`);
Throws an error if no scene is active.
getScenes()
Returns all scenes in the project.
Returns
TScene[] - Array of all scenes
Example
const scenes = editor.scenes.getScenes();
console.log(`Total scenes: ${scenes.length}`);
setScenes()
Sets all scenes and optionally the active scene.
setScenes({ scenes, activeSceneId }: {
scenes: TScene[];
activeSceneId?: string;
}): void
ID of the scene to make active
editor.scenes.setScenes({
scenes: updatedScenes,
activeSceneId: 'scene-123'
});
Bookmark methods
toggleBookmark()
Toggles a bookmark at a specific time.
toggleBookmark({ time }: { time: number }): Promise<void>
Time in seconds to toggle bookmark
// Toggle bookmark at 5 seconds
await editor.scenes.toggleBookmark({ time: 5.0 });
Bookmarks are snapped to frame boundaries based on the project FPS.
isBookmarked()
Checks if a time has a bookmark.
isBookmarked({ time }: { time: number }): boolean
boolean - True if time is bookmarked
Example
if (editor.scenes.isBookmarked({ time: 5.0 })) {
console.log('Time is bookmarked');
}
removeBookmark()
Removes a bookmark at a specific time.
removeBookmark({ time }: { time: number }): Promise<void>
Time in seconds of the bookmark to remove
await editor.scenes.removeBookmark({ time: 5.0 });
updateBookmark()
Updates properties of a bookmark.
updateBookmark({ time, updates }: {
time: number;
updates: Partial<{ note: string; color: string; duration: number }>;
}): Promise<void>
Time in seconds of the bookmark to update
updates
Partial<Bookmark>
required
Properties to update
await editor.scenes.updateBookmark({
time: 5.0,
updates: {
note: 'Key moment',
color: '#ff0000',
duration: 2.0
}
});
moveBookmark()
Moves a bookmark to a new time.
moveBookmark({ fromTime, toTime }: {
fromTime: number;
toTime: number;
}): Promise<void>
Current time of the bookmark in seconds
New time for the bookmark in seconds
// Move bookmark from 5s to 10s
await editor.scenes.moveBookmark({
fromTime: 5.0,
toTime: 10.0
});
getBookmarkAtTime()
Returns the bookmark at a specific time.
getBookmarkAtTime({ time }: { time: number }): Bookmark | null
Bookmark | null - The bookmark if found, null otherwise
Example
const bookmark = editor.scenes.getBookmarkAtTime({ time: 5.0 });
if (bookmark) {
console.log(`Bookmark note: ${bookmark.note}`);
}
Internal methods
loadProjectScenes()
Loads scenes from storage for a project. Called internally when loading a project.
loadProjectScenes({ projectId }: { projectId: string }): Promise<void>
ID of the project to load scenes from
initializeScenes()
Initializes scenes for the current project. Called internally when creating or loading a project.
initializeScenes({ scenes, currentSceneId }: {
scenes: TScene[];
currentSceneId?: string;
}): void
ID of the scene to make active
clearScenes()
Clears all scenes. Called internally when closing a project.
updateSceneTracks()
Updates the tracks for the active scene. Called internally by TimelineManager.
updateSceneTracks({ tracks }: { tracks: TimelineTrack[] }): void
subscribe()
Subscribes to scene state changes.
subscribe(listener: () => void): () => void
Function called when scene state changes
() => void - Unsubscribe function
Example
const unsubscribe = editor.scenes.subscribe(() => {
console.log('Scenes changed');
});
The useEditor() hook automatically subscribes to scene changes. Only use subscribe() directly in non-React code.