mediacms-user-docs/frontend-tools/video-editor

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
• Tailwind CSS
• Express (for development server)
• Drizzle ORM

Installation

Prerequisites

• Node.js (v20+) - Use nvm use 20 if 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.