forked from 77media/video-flow
78 lines
2.2 KiB
Markdown
78 lines
2.2 KiB
Markdown
# CreateInput Component
|
|
|
|
Video creation input form with configuration options.
|
|
|
|
## File Structure
|
|
|
|
```
|
|
CreateInput/
|
|
├── VideoCreationForm.tsx # Main form component
|
|
├── ConfigPanel.tsx # Configuration panel with all options
|
|
├── config-options.ts # Configuration options and types
|
|
├── index.ts # Module exports
|
|
└── README.md # This file
|
|
```
|
|
|
|
## Components
|
|
|
|
### VideoCreationForm
|
|
Main form component for video creation, includes:
|
|
- Photo upload (character, scene, prop)
|
|
- Text input area
|
|
- Configuration options
|
|
- Create button
|
|
|
|
### ConfigPanel
|
|
Configuration panel with unified circular button style:
|
|
- Language selector (14 languages)
|
|
- Auto Script toggle (AI Story Copilot)
|
|
- Duration selector (8s, 1min, 2min, auto)
|
|
- Aspect ratio selector (landscape/portrait)
|
|
|
|
All buttons follow the same design pattern:
|
|
- Circular buttons with `rounded-full`
|
|
- Border: `border-white/20`
|
|
- Hover: `hover:bg-white/5 hover:border-cyan-400/60`
|
|
- Active state: `border-cyan-400 bg-cyan-400/10`
|
|
- Cyan color theme for interactions
|
|
|
|
## Configuration Options
|
|
|
|
Defined in `config-options.ts`:
|
|
|
|
```typescript
|
|
interface ConfigOptions {
|
|
language: LanguageValue; // Default: 'english'
|
|
expansion_mode: boolean; // Default: false
|
|
videoDuration: VideoDurationValue; // Default: 'unlimited'
|
|
aspect_ratio: AspectRatioValue; // Default: 'VIDEO_ASPECT_RATIO_LANDSCAPE'
|
|
}
|
|
```
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { VideoCreationForm } from '@/components/pages/create-video/CreateInput';
|
|
|
|
export default function CreatePage() {
|
|
return <VideoCreationForm />;
|
|
}
|
|
```
|
|
|
|
## Design System
|
|
|
|
All configuration buttons follow a unified design:
|
|
- **Base style**: `rounded-full border border-white/20 bg-transparent`
|
|
- **Hover**: `hover:bg-white/5 hover:border-cyan-400/60 hover:text-cyan-400`
|
|
- **Active**: `border-cyan-400 bg-cyan-400/10 text-cyan-400`
|
|
- **Transition**: `transition-all duration-200`
|
|
|
|
## Notes
|
|
|
|
- Configuration options are synchronized with ChatInputBox component
|
|
- All text and labels are in English as per project guidelines
|
|
- Uses Tailwind CSS 3.x for all styling
|
|
- Uses Ant Design icons for consistency with existing UI
|
|
- Responsive design with mobile/desktop support
|
|
|