npm package: @pablituuu/quick-edit-video
Description: A React component for quick video editing with Mantine UI library
Author: Your Name
Latest version: 2.0.0

# 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

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

## 🎯 Usage

### Basic Usage

```tsx
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

```tsx
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

```tsx
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

```bash
# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build library
pnpm build:lib

# Build demo app
pnpm build
```

### Publishing

```bash
# 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](LICENSE) file for details.

## 🔗 Links

- [Mantine Documentation](https://mantine.dev/)
- [React Documentation](https://react.dev/)
- [NPM Package](https://www.npmjs.com/package/@pablituuu/quick-edit-video)