d1745e6a1a
- Fixed segment and cutaway playback to properly stop at the end and resume correctly after user interaction - Ensured playback continues seamlessly from cutaway to next segment when clicking Play - Updated start and end bracket icons for both segment and cutaway popup menus to correct designs - Fixed dynamic updates of popup menus when dragging segment boundaries past the playhead - Fixed issue where deleting a segment did not trigger correct switch to cutaway popup menu - Synced playback icons between popup menu and video controls under various playback scenarios - Replaced browser-native unload confirmation with a custom, unified message to warn about unsaved edits - Ensured timeline-based editing now works reliably on iPhone/iPad (iOS Safari) - Fixed issue where clicking at the end of a cutaway area closed the popup and prevented re-opening on desktop browsers
MediaCMS Video Editor
A modern browser-based video editing tool built with React and TypeScript that integrates with MediaCMS. The editor allows users to trim, split, and manage video segments with a timeline interface.
Features
- ⏱️ Trim video start and end points
- ✂️ Split videos into multiple segments
- 👁️ Preview individual segments or the full edited video
- 🔍 Zoom timeline for precise editing
- 🔄 Undo/redo support for all editing operations
- 🔊 Audio mute controls
- 💾 Save edits directly to MediaCMS
Tech Stack
- React 18
- TypeScript
- Vite
- Tailwind CSS
- Express (for development server)
- Drizzle ORM
Installation
Prerequisites
- Node.js (v20+) - Use
nvm use 20if you have nvm installed - Yarn or npm package manager
Setup
# Navigate to the video editor directory
cd frontend-tools/video-editor
# Install dependencies with Yarn
yarn install
# Or with npm
npm install
Development
The video editor can be run in two modes:
Standalone Development Mode
This starts a local development server with hot reloading:
# Start the development server with Yarn
yarn dev
# Or with npm
npm run dev
Frontend-only Development Mode
If you want to work only on the frontend with MediaCMS backend:
# Start frontend-only development with Yarn
yarn dev:frontend
# Or with npm
npm run dev:frontend
Building
For MediaCMS Integration
To build the video editor for integration with MediaCMS:
# Build for Django integration with Yarn
yarn build:django
# Or with npm
npm run build:django
This will compile the editor and place the output in the MediaCMS static directory.
Standalone Build
To build the editor as a standalone application:
# Build for production with Yarn
yarn build
# Or with npm
npm run build
Deployment
To deploy the video editor, you can use the build and deploy script (recommended):
# Run the deployment script
sh deploy/scripts/build_and_deploy.sh
The build script handles all necessary steps for compiling and deploying the editor to MediaCMS.
You can also deploy manually after building:
# With Yarn
yarn deploy
# Or with npm
npm run deploy
Project Structure
/src- Source code/components- React components/hooks- Custom React hooks/lib- Utility functions and helpers/services- API services/styles- CSS and style definitions
API Integration
The video editor interfaces with MediaCMS through a set of API endpoints for retrieving and saving video edits.