Quick Edit Video - React Component Library

A React component for quick video editing with Mantine UI library, featuring a responsive video player, controls, and customization tools.

🚀 Features

• ⚛️ React 18+ - Latest React with concurrent features
• 🎨 Mantine 8 - Beautiful React components library
• 📱 Responsive Design - Mobile and desktop layouts
• 🎯 TypeScript - Full type safety with exported types
• 🎥 Video Player - Interactive video scene with controls
• 🎨 Customization Tools - Color adjustments and presets
• 🔧 State Management - Zustand store for download state
• 📦 NPM Package - Ready to install and use

📦 Installation

npm install @pablituuu/quick-edit-video
# or
yarn add @pablituuu/quick-edit-video
# or
pnpm add @pablituuu/quick-edit-video

🎯 Usage

Basic Usage

import { QuickEditView } from '@pablituuu/quick-edit-video';

function App() {
  const mockSceneId = "test-scene-123";
  const mockWorkflow = {
    isMultiVideo: false,
    isResolved: true,
    segments: [
      {
        clips: [
          {
            id: "clip-1",
            type: "video",
            src: "https://example.com/video1.mp4",
            duration: 10000,
          },
        ],
      },
    ],
  };

  return (
    <QuickEditView 
      sceneId={mockSceneId} 
      workflow={mockWorkflow}
    />
  );
}

Individual Components

import { 
  Scene, 
  VideoControls, 
  VideoCustomization 
} from '@pablituuu/quick-edit-video';

function App() {
  const stateManager = new MockStateManager({
    size: { width: 1080, height: 1920 }
  });

  return (
    <div>
      <Scene stateManager={stateManager} />
      <VideoControls stateManager={stateManager} />
      <VideoCustomization workflow={mockWorkflow} />
    </div>
  );
}

Using Hooks

import { 
  useStateManagerEvents, 
  usePlayerEvents,
  useDownloadState 
} from '@pablituuu/quick-edit-video';

function App() {
  const { actions } = useDownloadState();
  
  useStateManagerEvents(stateManager);
  usePlayerEvents();

  const handleExport = () => {
    actions.startExport();
  };

  return <div>...</div>;
}

🔧 Props

QuickEditView Component

| Prop | Type | Default | Description | |------|------|---------|-------------| | sceneId | string | Required | Unique identifier for the scene | | workflow | Workflow | undefined | Workflow configuration object |

Scene Component

| Prop | Type | Default | Description | |------|------|---------|-------------| | stateManager | StateManager | Required | State manager instance |

VideoControls Component

| Prop | Type | Default | Description | |------|------|---------|-------------| | stateManager | StateManager | Required | State manager instance |

VideoCustomization Component

| Prop | Type | Default | Description | |------|------|---------|-------------| | workflow | Workflow | undefined | Workflow configuration |

📁 Project Structure

src/
├── components/
│   ├── Scene.tsx              # Video scene component
│   ├── VideoControls.tsx      # Video player controls
│   └── VideoCustomization.tsx # Video editing tools
├── hooks/
│   ├── use-state-manager-events.ts # State manager events
│   └── use-player-events.ts        # Player event handling
├── store/
│   └── use-download-state.ts       # Download state management
├── types.ts                   # TypeScript type definitions
├── QuickEdit.tsx              # Main component
└── index.ts                   # Library entry point

🎨 Features

Video Player

• Interactive video scene
• Responsive design
• Mock video player for development

Video Controls

• Play/Pause functionality
• Skip forward/backward (10s)
• Progress bar with time display
• Responsive layout

Video Customization

• Color presets (Vintage, Dramatic, Warm, Cool)
• Brightness, contrast, and saturation controls
• Tint color selection
• Real-time preview

State Management

• Zustand store for download state
• Export progress tracking
• Error handling
• State persistence

🔧 Development

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm

Setup

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build library
pnpm build:lib

# Build demo app
pnpm build

Publishing

# Build the library
pnpm build:lib

# Publish to npm
npm run publish

📚 Dependencies

• @mantine/core - UI component library
• @mantine/hooks - Useful React hooks
• @tabler/icons-react - Beautiful icons
• lucide-react - Additional icons
• zustand - State management
• React 18+ - React framework

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🔗 Links

• Mantine Documentation
• React Documentation
• NPM Package