mirror of
https://github.com/mediacms-io/mediacms.git
synced 2025-11-09 17:08:58 -05:00
4f1c4a2b4c
* fix: Disable Segment Tools and Reset Preview State During Playback * chore: remove some unnecessary comments * chore: build assets * fix: do not display the handles (left/right) on preview mode * fix: Disable all tools on preview mode (undo, redo, reset, etc.) * Update README.md * feat: Prettier configuration for video editor * Update README.md * Update .prettierrc * style: Format entire codebase (video-editor) with Prettier * fix: During segments playback mode, disable button interactions but keep hover working * feat: Add yarn format * prettier format * Update package.json * feat: Install prettier and improve formatting * build assets * Update version.py 6.2.0
172 lines
3.3 KiB
Markdown
172 lines
3.3 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
# 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:
|
|
|
|
```bash
|
|
# 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:
|
|
|
|
```bash
|
|
# 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:
|
|
|
|
```bash
|
|
# 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:
|
|
|
|
```bash
|
|
# 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):
|
|
|
|
```bash
|
|
# 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:
|
|
|
|
```bash
|
|
# 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](https://prettier.io):
|
|
|
|
```bash
|
|
# Format all code in the src directory
|
|
npx prettier --write src/
|
|
```
|
|
|
|
Or for specific file types:
|
|
|
|
```bash
|
|
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`:
|
|
|
|
```json
|
|
"scripts": {
|
|
"format": "prettier --write client/src/"
|
|
}
|
|
```
|
|
|
|
Then run:
|
|
|
|
```bash
|
|
yarn format
|
|
# or
|
|
npm run format
|
|
```
|
|
|
|
---
|
|
|
|
Let me know if you'd like to auto-format on commit using `lint-staged` + `husky`.
|