d9b1d6cab1
* Update .gitignore * feat: Improve Visual Distinction Between Trim and Chapters Editors * fix: Convert timeline header styles to CSS classes Moved inline styles for timeline headers in chapters and video editors to dedicated CSS classes for better maintainability and consistency. * Bump version to 7.3.0 Update the VERSION in cms/version.py to 7.3.0 for the new release. * build assets * Update segment color schemes in video and chapters editor. * build assets * build assets * fix: Prevent Safari from resetting segments after drag operations Prevent Safari from resetting segments when loadedmetadata fires multiple times and fix stale state issues in click handlers by using refs instead of closure variables. * build assets * Bump version to 7.3.0-beta.3 Update the VERSION string in cms/version.py to reflect the new pre-release version 7.3.0-beta.3.
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
- 🔄 Undo/redo support for all editing operations
- 🔊 Audio mute controls
- 💾 Save edits directly to MediaCMS
Tech Stack
- React 18
- TypeScript
- Vite
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.
Sure! Here's your updated README.md section with a new "Code Formatting" section using Prettier. I placed it after the "Development" section to keep the flow logical:
Code Formatting
To automatically format all source files using Prettier:
# Format all code in the src directory
npx prettier --write src/
Or for specific file types:
cd frontend-tools/video-editor/
npx prettier --write "client/src/**/*.{js,jsx,ts,tsx,json,css,scss,md}"
You can also add this as a script in package.json:
"scripts": {
"format": "prettier --write client/src/"
}
Then run:
yarn format
# or
npm run format
Let me know if you'd like to auto-format on commit using lint-staged + husky.