forked from Leak_Technologies/VideoTools
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>
3.6 KiB
3.6 KiB
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 backwardfast-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 iconexport.svg- Export/download arrow pointing down into trayclear-markers.svg- Clear/X icon for removing markers
File Operations (Priority 2)
open-file.svg- Folder with document or open folderopen-folder.svg- Folder iconsave.svg- Floppy disk iconscreenshot.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 handlessubtitles.svg- Speech bubble or "CC" textchapters.svg- Book chapters icon or list with dots
Settings/Options (Priority 2)
settings.svg- Gear/cog iconaudio-track.svg- Waveform or music notevideo-track.svg- Film strip or play button in rectanglespeed.svg- Speedometer or "1x" with arrowsloop.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 arrowdown.svg- Down arrowclose.svg- X iconminimize.svg- Horizontal linemaximize.svg- Square/window icon
Status Indicators (Priority 3)
info.svg- Information "i" in circlewarning.svg- Triangle with exclamation markerror.svg- Circle with X or exclamationsuccess.svg- Checkmark in circleloading.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
- Use simple, recognizable shapes
- Maintain consistent stroke width (2px recommended)
- Use single color (white/light gray) for dark theme
- Ensure icons are recognizable at 16x16px minimum
- Export as optimized SVG (remove unnecessary metadata)
- Use standard icon conventions where possible
Icon Storage
Location: /assets/icons/
Naming: Use lowercase with hyphens (e.g., frame-next.svg)