How cristianolivera1/openvid works
Openvid is a browser-based video-demo and mockup editor. Users record their screen or upload video, edit a timeline with zooms, audio, visual elements and mockups, then export a finished demo. The README documents image export and broad visual-customization capabilities as well. The editor page’s imports and calls are indexed, but most editor internals are unsampled; edges are limited to indexed references and explicit README descriptions.
Main entry points: page.tsx Editor route · useZoomFragments.ts Zoom fragments · useVideoExport.ts Video export · ZoomMovementTrackItem.tsx Zoom movement
Components 20
Capture and editing
- Editor route
app/[locale]/(editor)/editor/page.tsx - Screen recording
hooks/useScreenRecording.ts - Screen capture
hooks/useScreenCapture.ts - Video upload
hooks/useVideoUpload.ts - Video canvas
app/components/ui/editor/VideoCanvas.tsx - Zoom movement
app/components/ui/editor/ZoomMovementTrackItem.tsx - Zoom fragments
hooks/useZoomFragments.ts
Visual composition
- Mockup motion
lib/mockup-motion.ts - 3D mockup controls
lib/viewer-controls3d.ts - Canvas utilities
lib/canvas.utils.ts - Image projects
hooks/useImageProjects.ts
Rendering and export
- Image export
hooks/useImageExport.ts - Video export
hooks/useVideoExport.ts - FFmpeg processing
lib/ffmpeg.utils.ts
Local project state
- Video upload cache
lib/video-upload-cache.ts - Video project cache
lib/video-project-cache.ts - Thumbnail cache
lib/thumbnail-cache.ts
Accounts and services
- Session auth
app/contexts/useAuth.tsx - Supabase client
utils/supabase/client.ts
Other components
- Creator
Connections 23
- Creator → Editor route: opens editor
- Editor route → Screen recording: calls
app/[locale]/(editor)/editor/page.tsx - Editor route → Screen capture: calls
app/[locale]/(editor)/editor/page.tsx - Editor route → Video upload: calls
app/[locale]/(editor)/editor/page.tsx - Editor route → Image projects: calls
app/[locale]/(editor)/editor/page.tsx - Editor route → Video export: calls
app/[locale]/(editor)/editor/page.tsx - Editor route → Video upload cache: reads and writes
app/[locale]/(editor)/editor/page.tsx - Editor route → Video project cache: reads and writes
app/[locale]/(editor)/editor/page.tsx - Editor route → Thumbnail cache: uses
app/[locale]/(editor)/editor/page.tsx - Editor route → Video canvas: composes
app/[locale]/(editor)/editor/page.tsx - Editor route → Zoom fragments: manages
- Zoom fragments → Zoom movement: updates
hooks/useZoomFragments.ts - Zoom movement → Zoom fragments: edits fragments
hooks/useZoomFragments.ts - Creator → Screen recording: records screen
- Creator → Video upload: uploads video
- Creator → Mockup motion: adds motion
- Creator → 3D mockup controls: applies 3D effects
- Creator → Canvas utilities: customizes canvas
- Creator → Image projects: creates image mockups
- Creator → Image export: exports image
- Creator → Video export: exports video
- Video export → FFmpeg processing: uses processing
hooks/useVideoExport.ts - Session auth → Supabase client: creates client
app/contexts/useAuth.tsx