VideoTools/docs/MATERIAL_ICONS_MAPPING.md

# Material Icons Mapping for VT_Player

Using Google Material Icons for clean, professional UI.

## Icon Sources
- **Material Symbols:** https://fonts.google.com/icons
- **Format:** We'll use Material Symbols (variable font with fill/weight options)
- **License:** Apache 2.0 (free for commercial use)

## Integration Methods

### Option 1: Unicode Characters (Simplest)
Use Material Icons font and insert unicode characters directly in Go strings.

### Option 2: SVG Downloads (Recommended)
Download SVG files from Google Fonts and bundle with app.

### Option 3: Icon Font (Best for scaling)
Use Material Symbols variable font with Fyne's text rendering.

## Icon Mappings (Material Symbols Names)

### Playback Controls
| Function | Material Icon | Unicode | Ligature |
|----------|---------------|---------|----------|
| Play | `play_arrow` | U+E037 | play_arrow |
| Pause | `pause` | U+E034 | pause |
| Stop | `stop` | U+E047 | stop |
| Previous | `skip_previous` | U+E045 | skip_previous |
| Next | `skip_next` | U+E044 | skip_next |
| Rewind | `fast_rewind` | U+E020 | fast_rewind |
| Fast Forward | `fast_forward` | U+E01F | fast_forward |

### Frame Navigation (Frame-Accurate Mode)
| Function | Material Icon | Unicode | Notes |
|----------|---------------|---------|-------|
| Frame Previous | `navigate_before` | U+E408 | Or `chevron_left` |
| Frame Next | `navigate_next` | U+E409 | Or `chevron_right` |
| Keyframe Previous | `first_page` | U+E5DC | Double chevron left |
| Keyframe Next | `last_page` | U+E5DD | Double chevron right |

### Volume Controls
| Function | Material Icon | Unicode | Ligature |
|----------|---------------|---------|----------|
| Volume High | `volume_up` | U+E050 | volume_up |
| Volume Medium | `volume_down` | U+E04D | volume_down |
| Volume Low | `volume_mute` | U+E04E | volume_mute |
| Volume Muted | `volume_off` | U+E04F | volume_off |

### Playlist Management
| Function | Material Icon | Unicode | Ligature |
|----------|---------------|---------|----------|
| Playlist/Menu | `menu` | U+E5D2 | menu |
| Add to Playlist | `playlist_add` | U+E03B | playlist_add |
| Remove from Playlist | `playlist_remove` | U+E958 | playlist_remove |
| Clear Playlist | `clear_all` | U+E0B8 | clear_all |
| Playlist Play | `playlist_play` | U+E05F | playlist_play |

### Cut/Edit Tools
| Function | Material Icon | Unicode | Ligature |
|----------|---------------|---------|----------|
| Set In Point | `first_page` | U+E5DC | Or `start` |
| Set Out Point | `last_page` | U+E5DD | Or `end` |
| Cut/Scissors | `content_cut` | U+E14E | content_cut |
| Export | `file_download` | U+E2C4 | file_download |
| Clear Markers | `clear` | U+E14C | clear |

### File Operations
| Function | Material Icon | Unicode | Ligature |
|----------|---------------|---------|----------|
| Open File | `folder_open` | U+E2C8 | folder_open |
| Open Folder | `folder` | U+E2C7 | folder |
| Save | `save` | U+E161 | save |
| Screenshot | `photo_camera` | U+E412 | photo_camera |

### View/Display
| Function | Material Icon | Unicode | Ligature |
|----------|---------------|---------|----------|
| Fullscreen | `fullscreen` | U+E5D0 | fullscreen |
| Fullscreen Exit | `fullscreen_exit` | U+E5D1 | fullscreen_exit |
| Aspect Ratio | `aspect_ratio` | U+E85B | aspect_ratio |
| Subtitles | `closed_caption` | U+E01C | closed_caption |
| Chapters | `list` | U+E896 | list |

### Settings/Options
| Function | Material Icon | Unicode | Ligature |
|----------|---------------|---------|----------|
| Settings | `settings` | U+E8B8 | settings |
| Audio Track | `audiotrack` | U+E3A1 | audiotrack |
| Video Track | `videocam` | U+E04B | videocam |
| Speed | `speed` | U+E9E4 | speed |
| Loop | `repeat` | U+E040 | repeat |
| Loop One | `repeat_one` | U+E041 | repeat_one |

### Navigation/UI
| Function | Material Icon | Unicode | Ligature |
|----------|---------------|---------|----------|
| Back | `arrow_back` | U+E5C4 | arrow_back |
| Forward | `arrow_forward` | U+E5C8 | arrow_forward |
| Up | `arrow_upward` | U+E5D8 | arrow_upward |
| Down | `arrow_downward` | U+E5DB | arrow_downward |
| Close | `close` | U+E5CD | close |
| More Options | `more_vert` | U+E5D4 | more_vert |

### Status Indicators
| Function | Material Icon | Unicode | Ligature |
|----------|---------------|---------|----------|
| Info | `info` | U+E88E | info |
| Warning | `warning` | U+E002 | warning |
| Error | `error` | U+E000 | error |
| Success | `check_circle` | U+E86C | check_circle |
| Loading | `hourglass_empty` | U+E88B | hourglass_empty |

## Implementation Plan

### Phase 1: Font Integration
1. Download Material Symbols font from Google Fonts
2. Bundle font file in `assets/fonts/MaterialSymbols.ttf`
3. Load font in Fyne application startup
4. Create helper functions for icon rendering

### Phase 2: Icon Helper Package
Create `internal/ui/icons.go`:
```go
package ui

import (
    "fyne.io/fyne/v2"
    "fyne.io/fyne/v2/canvas"
)

// Material icon unicode constants
const (
    IconPlayArrow      = "\ue037"
    IconPause          = "\ue034"
    IconStop           = "\ue047"
    IconSkipPrevious   = "\ue045"
    IconSkipNext       = "\ue044"
    IconMenu           = "\ue5d2"
    IconVolumeUp       = "\ue050"
    IconVolumeOff      = "\ue04f"
    // ... more icons
)

// NewIconText creates a text widget with Material Icon
func NewIconText(icon string, size float32) *canvas.Text {
    text := canvas.NewText(icon, color.White)
    text.TextSize = size
    text.TextStyle = fyne.TextStyle{Monospace: true}
    return text
}

// NewIconButton creates a button with Material Icon
func NewIconButton(icon string, tooltip string, tapped func()) *widget.Button {
    btn := widget.NewButton(icon, tapped)
    btn.Importance = widget.LowImportance
    return btn
}
```

### Phase 3: Replace Current Icons
Update all emoji-based icons with Material Icons:
- Play/Pause: ▶/⏸ → play_arrow/pause
- Previous/Next: ⏮/⏭ → skip_previous/skip_next
- Volume: 🔊/🔇 → volume_up/volume_off
- Menu: ☰ → menu

## Download Instructions

### Material Symbols Font
1. Go to: https://fonts.google.com/icons
2. Select "Material Symbols Rounded" (recommended for modern look)
3. Click "Download all" or select specific icons
4. Extract font file: MaterialSymbolsRounded-VariableFont.ttf

### Individual SVG Icons (Alternative)
1. Browse icons at https://fonts.google.com/icons
2. Click icon → Download SVG
3. Save to `assets/icons/[icon-name].svg`

## Advantages of Material Icons

✅ **Consistent Design**: All icons follow same design language
✅ **Professional**: Industry-standard, used by Google/Android
✅ **Comprehensive**: 2500+ icons cover all use cases
✅ **Free**: Apache 2.0 license (no attribution required)
✅ **Scalable**: Vector format scales to any size
✅ **Variable**: Can adjust weight, fill, optical size
✅ **Accessible**: Widely recognized symbols

## Next Steps

1. Download Material Symbols font
2. Create icon helper package
3. Update all buttons to use Material Icons
4. Test rendering on Linux (Fyne + GTK)
5. Add icon customization (size, color themes)