3.9 KiB
File Descriptions
Core Video Editor Components
video-export.jsx - Custom React hook that handles video export functionality using FFmpeg in the browser. Manages font loading, media downloading, FFmpeg command generation, and provides export progress tracking for converting timeline elements into a final MP4 video.
video-editor.jsx - Main orchestrator component that manages the video editing timeline, synchronizes multiple video elements, handles playback controls, and coordinates between all child components. Contains the core logic for video loading, timing calculations, and state management.
video-preview.jsx - Renders the actual video preview using React Konva for canvas-based rendering. Displays active timeline elements (videos, images, text) with interactive selection, transformation handles, and guide lines for precise positioning.
Video Preview Utilities
video-preview-utils.js - Utility functions for video preview operations including position snapping calculations, element bounds detection, font style formatting, and center-positioning logic for different element types.
video-preview-element-selection.js - Custom hook that manages element selection state in the preview canvas, handles click events for selecting/deselecting elements, and emits events when text elements are selected for editing.
video-preview-element-transform.js - Custom hook that handles element transformations including drag operations with snapping, resize/scale operations, rotation, and visual guide line management for precise element positioning.
UI Components
video-download-modal.jsx - Modal dialog component for video export that displays download progress, export status, and optionally shows the generated FFmpeg command for debugging purposes.
editor-controls.jsx - Bottom control bar with play/pause, edit, download, and share buttons. Uses event emitters to communicate with the video editor for playback control.
text-sidebar.jsx - Right sidebar for editing text element properties including content, font family, size, weight, style, colors, and stroke width. Provides real-time preview and updates the selected text element.
edit-sidebar.jsx - Right sidebar with tabs for selecting memes and backgrounds from media libraries. Handles fetching, displaying, and selecting media assets with visual previews.
edit-nav-sidebar.jsx - Left navigation sidebar containing settings dialog and app branding. Includes toggles for application preferences like "gen alpha slang" mode.
editor-header.jsx - Top header bar with navigation menu button, app title, and coin display. Includes a dialog for upcoming AI features with contextual messaging based on settings.
editor-canvas.jsx - Responsive wrapper component that scales the video editor canvas based on viewport size while maintaining the 9:16 aspect ratio and handling coordinate transformations.
editor.jsx - Main application component that coordinates all sidebars, handles responsive layout, manages global state, and provides the overall editor interface structure.
Data and Utilities
sample-timeline-data.jsx - Static sample data containing timeline elements (videos, images, text) with positioning, timing, and media source information for testing and demonstration purposes.
video-editor-commentary.jsx - Comprehensive documentation file explaining the video editor's architecture, system flow, performance optimizations, and key design decisions with detailed technical commentary.
timeline-template-processor.js - Utility function that processes timeline templates by combining them with selected media assets (memes, backgrounds, captions) to generate complete timeline configurations.
layout-constants.js - Defines responsive layout constants and calculation functions for optimal canvas sizing, viewport detection, and maintaining proper aspect ratios across different screen sizes.