forked from Leak_Technologies/VideoTools
Stu Leak
5e2171a95e
Major fixes: - Fix drag-and-drop video loading bug (s.source was never set) - Call switchToVideo() instead of showPlayerView() to properly initialize player state - Show initial preview frame/thumbnail when video loads - Improve ffprobe error messages (capture stderr for better diagnostics) UI improvements: - Move playlist from left to right side - Add playlist toggle button (☰) with visibility control - Load and display preview frame immediately when video loads - Improve control layout with volume container - Auto-hide playlist when only one video loaded Documentation: - Add FEATURE_ROADMAP.md tracking 30 planned features - Add ICONS_NEEDED.md listing 53 required SVG icons - Update .gitignore to exclude binaries References: DEV_SPEC_FRAME_ACCURATE_PLAYBACK.md Co-Authored-By: Claude <noreply@anthropic.com>
96 lines
3.6 KiB
Markdown
96 lines
3.6 KiB
Markdown
# VT_Player Icon Specifications
|
|
|
|
All icons should be SVG format, ideally 24x24px base size for UI consistency.
|
|
|
|
## Playback Controls (Priority 1)
|
|
- `play.svg` - Play button (triangle pointing right)
|
|
- `pause.svg` - Pause button (two vertical bars)
|
|
- `stop.svg` - Stop button (square)
|
|
- `previous.svg` - Previous track (skip backward)
|
|
- `next.svg` - Next track (skip forward)
|
|
- `rewind.svg` - Rewind/seek backward
|
|
- `fast-forward.svg` - Fast forward/seek forward
|
|
|
|
## Frame Navigation (Priority 1 - Frame-Accurate Playback)
|
|
- `frame-previous.svg` - Previous frame (|◄ single step back)
|
|
- `frame-next.svg` - Next frame (►| single step forward)
|
|
- `keyframe-previous.svg` - Previous keyframe (||◄◄ double chevron back)
|
|
- `keyframe-next.svg` - Next keyframe (►►|| double chevron forward)
|
|
|
|
## Volume Controls (Priority 1)
|
|
- `volume-high.svg` - Speaker with waves (70-100% volume)
|
|
- `volume-medium.svg` - Speaker with fewer waves (30-69% volume)
|
|
- `volume-low.svg` - Speaker with minimal waves (1-29% volume)
|
|
- `volume-muted.svg` - Speaker with X (0% volume/muted)
|
|
|
|
## Playlist Management (Priority 1)
|
|
- `playlist.svg` - Hamburger menu / list icon (☰)
|
|
- `playlist-add.svg` - Plus icon or list with +
|
|
- `playlist-remove.svg` - Minus icon or list with -
|
|
- `playlist-clear.svg` - List with X or trash can
|
|
|
|
## Cut/Edit Tools (Priority 1 - LosslessCut features)
|
|
- `marker-in.svg` - In-point marker ([ or scissors open left)
|
|
- `marker-out.svg` - Out-point marker (] or scissors open right)
|
|
- `cut.svg` - Cut/scissors icon
|
|
- `export.svg` - Export/download arrow pointing down into tray
|
|
- `clear-markers.svg` - Clear/X icon for removing markers
|
|
|
|
## File Operations (Priority 2)
|
|
- `open-file.svg` - Folder with document or open folder
|
|
- `open-folder.svg` - Folder icon
|
|
- `save.svg` - Floppy disk icon
|
|
- `screenshot.svg` - Camera or rectangle with corners
|
|
|
|
## View/Display (Priority 2)
|
|
- `fullscreen.svg` - Arrows pointing to corners (expand)
|
|
- `fullscreen-exit.svg` - Arrows pointing inward (contract)
|
|
- `aspect-ratio.svg` - Rectangle with resize handles
|
|
- `subtitles.svg` - Speech bubble or "CC" text
|
|
- `chapters.svg` - Book chapters icon or list with dots
|
|
|
|
## Settings/Options (Priority 2)
|
|
- `settings.svg` - Gear/cog icon
|
|
- `audio-track.svg` - Waveform or music note
|
|
- `video-track.svg` - Film strip or play button in rectangle
|
|
- `speed.svg` - Speedometer or "1x" with arrows
|
|
- `loop.svg` - Circular arrows (loop/repeat)
|
|
- `shuffle.svg` - Crossed arrows (shuffle/random)
|
|
|
|
## Navigation/UI (Priority 3)
|
|
- `back.svg` - Left arrow (go back)
|
|
- `forward.svg` - Right arrow (go forward)
|
|
- `up.svg` - Up arrow
|
|
- `down.svg` - Down arrow
|
|
- `close.svg` - X icon
|
|
- `minimize.svg` - Horizontal line
|
|
- `maximize.svg` - Square/window icon
|
|
|
|
## Status Indicators (Priority 3)
|
|
- `info.svg` - Information "i" in circle
|
|
- `warning.svg` - Triangle with exclamation mark
|
|
- `error.svg` - Circle with X or exclamation
|
|
- `success.svg` - Checkmark in circle
|
|
- `loading.svg` - Circular spinner or hourglass
|
|
|
|
## Application Icon
|
|
- `VT_Icon.svg` - Main application icon (already exists?)
|
|
|
|
## Total Count
|
|
Priority 1: 25 icons (core playback + frame-accurate features)
|
|
Priority 2: 14 icons (extended features)
|
|
Priority 3: 14 icons (UI/polish)
|
|
**Total: 53 icons**
|
|
|
|
## Design Guidelines
|
|
1. Use simple, recognizable shapes
|
|
2. Maintain consistent stroke width (2px recommended)
|
|
3. Use single color (white/light gray) for dark theme
|
|
4. Ensure icons are recognizable at 16x16px minimum
|
|
5. Export as optimized SVG (remove unnecessary metadata)
|
|
6. Use standard icon conventions where possible
|
|
|
|
## Icon Storage
|
|
Location: `/assets/icons/`
|
|
Naming: Use lowercase with hyphens (e.g., `frame-next.svg`)
|