mediacms/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.