Timeline Usage
Component Integration
Import and use the timeline components in your React application.
For optimal performance and proper functionality, structure your components like this:
tsx
import type {PlayerRef} from '@remotion/player';import {Timeline, TimelineContainer} from './timeline/remotion-timeline/components/timeline';import {TimelineProvider} from './timeline/remotion-timeline/context/provider';import {TimelineSizeProvider} from './timeline/remotion-timeline/context/timeline-size-provider';import {TimelineZoomProvider} from './timeline/remotion-timeline/context/timeline-zoom-provider';import {PreviewContainer} from './layout';export const App = () => {const playerRef = useRef<PlayerRef>(null);const timelineContainerRef = useRef<HTMLDivElement>(null);const timelineContainerSize = useElementSize(timelineContainerRef);const timelineContainerWidth = timelineContainerSize?.width;return (<TimelineProvideronChange={(newState) => {console.log('New timeline state:', newState);}}initialState={initialState}><TimelineZoomProvider initialZoom={1}><PreviewContainer><VideoPreview loop playerRef={playerRef} /><ActionRow playerRef={playerRef} /></PreviewContainer><TimelineContainer timelineContainerRef={timelineContainerRef}>{timelineContainerWidth ? (<TimelineSizeProvider containerWidth={timelineContainerWidth}><Timeline playerRef={playerRef} /></TimelineSizeProvider>) : null}</TimelineContainer></TimelineZoomProvider></TimelineProvider>);};
This structure ensures:
- Timeline state management through
TimelineProvider
- Zoom functionality with
TimelineZoomProvider
- Proper sizing calculations with
TimelineSizeProvider
- Responsive timeline container with
TimelineContainer
Default state structure
The project includes a predefined state structure for timeline tracks and items. You can check TimelineProvider component for the state structure.
Video Preview
This project includes a CanvasComposition
, a Remotion composition that renders the timeline state in the Remotion Player.
You can:
- Use the provided composition as-is for quick prototyping
- Adapt it to your needs
- Replace it with your own composition while keeping the timeline functionality
Check video-preview.tsx
and App.tsx
for implementation examples.
State Persistence
The TimelineProvider
includes an onChange
callback that fires whenever the timeline state changes (adding/removing tracks, moving items, etc.). Use this to save the editor state to your backend:
tsx
function VideoEditor() {const saveToServer = async (state: TimelineState) => {try {await fetch('/api/save-timeline', {method: 'POST',body: JSON.stringify(state),});} catch (error) {console.error('Failed to save timeline state:', error);}};return (<TimelineProvider onChange={saveToServer} initialState={initialState}><div className="video-editor"><VideoPreview playerRef={playerRef} /><ActionRow playerRef={playerRef} /><TimelineRoot playerRef={playerRef} /></div></TimelineProvider>);}
Example Project Structure
In App.tsx
, you can see the complete implementation of the timeline component.
The example project demonstrates:
- Importing the timeline components
- Using the
ActionRow
component to use timeline zoom and add clips - Using the
TimelineRoot
component to render the timeline