User Interface

IINA Plugin Bookmarks provides three distinct interface modes to suit different workflows.

Interface Modes

Sidebar

The recommended interface for most users. Provides complete bookmark management within IINA's native sidebar.

Features

• ✓ View all bookmarks in scrollable list
• ✓ Create, edit, delete bookmarks
• ✓ Search and advanced filtering
• ✓ Sort by timestamp, title, or creation date
• ✓ Import/export bookmarks
• ✓ Cloud sync integration
• ✓ Drag-to-reorder (when custom sort enabled)
• ✓ Tag management
• ✓ File reconciliation for missing paths

Access

• Keyboard: Cmd+Shift+B
• Menu: View → Toggle Sidebar
• Auto-open: Sidebar appears by default when IINA launches

Layout

┌─────────────────────────────┐
│ Search: [____________]  🔍  │
│ ────────────────────────── │
│ Filters: [All] [Tags] [▼]  │
│ ────────────────────────── │
│ Sort by: Timestamp ▼       │
│ ────────────────────────── │
│ [+ Add Bookmark]           │
│ [↓ Import] [↑ Export]      │
│ [☁ Cloud Sync]             │
│ ────────────────────────── │
│ 📑 Bookmark Title 1        │
│    00:02:15 • Tag1, Tag2   │
│ 📑 Bookmark Title 2        │
│    00:05:30 • Tag3         │
│ 📑 Bookmark Title 3        │
│    00:12:45                │
│ ...                         │
└─────────────────────────────┘

Bookmarks List

Each bookmark displays:

• Title - Auto-detected or custom
• Timestamp - Formatted as HH:MM:SS
• Tags - Color-coded labels
• File path - Shown on hover
• Edit/Delete buttons - On hover

Overlay

Minimal interface overlaid on the video for quick bookmark jumping without leaving fullscreen.

Features

• ✓ Quick search
• ✓ Jump to bookmark
• ✓ Minimal visual footprint
• ✓ Keyboard navigation
• ✓ Auto-hide after selection

Access

Configure a custom hotkey in IINA preferences:

1. Open IINA Preferences
2. Go to Advanced → Plugins
3. Set hotkey for "Show Bookmarks Overlay"

Use Cases

• Fullscreen viewing - Access bookmarks without exiting fullscreen
• Presentations - Quickly jump between marked segments
• Review sessions - Navigate to specific timestamps efficiently

Layout

┌─────────────────────────────────────────┐
│                                         │
│         🔍 Search bookmarks...          │
│                                         │
│  ┌────────────────────────────────┐    │
│  │ 00:02:15 - Bookmark Title 1    │    │
│  │ 00:05:30 - Bookmark Title 2    │    │
│  │ 00:12:45 - Bookmark Title 3    │    │
│  └────────────────────────────────┘    │
│                                         │
│         Press ESC to close              │
└─────────────────────────────────────────┘

Keyboard Shortcuts

• ↑/↓ - Navigate bookmarks
• Enter - Jump to selected bookmark
• ESC - Close overlay
• Type - Filter results

Standalone Window

Independent window with full functionality, ideal for multi-monitor setups or power users.

Features

• ✓ All sidebar features
• ✓ Resizable and repositionable
• ✓ Stays on top (optional)
• ✓ Separate from IINA window
• ✓ Persistent position across sessions

Access

• Menu: Plugins → Bookmarks → Open Window
• Sidebar: Click "Open in Window" button

Use Cases

• Multi-monitor - Keep bookmarks on second screen while video plays on primary
• Side-by-side - View bookmarks alongside other reference material
• Annotation workflow - Add detailed notes while video plays

Window Management

• Resize - Drag window edges/corners
• Move - Drag title bar
• Always on Top - Enable in window menu
• Close - Cmd+W or close button

Shared Components

All three interfaces share these dialogs:

Add Bookmark Dialog

• Auto-populate current timestamp and file path
• Optional custom title
• Description field with markdown support
• Tag input with autocomplete
• Preview bookmark before saving

Import Dialog

• Drag-and-drop JSON/CSV files
• Duplicate handling options (skip/replace/merge)
• Validation with error reporting
• Import preview before confirmation

Export Dialog

• Choose JSON or CSV format
• Select bookmarks to export (all/filtered)
• CSV includes formula injection protection
• Download or copy to clipboard

Cloud Sync Dialog

• Provider selection (Google Drive/Dropbox)
• Authentication flow
• Sync action selection (upload/download/sync)
• Progress indicator
• Result summary with statistics

Filter Component

• Text search across titles and descriptions
• Tag filtering (AND/OR logic)
• Date range selection
• File path filtering
• Save filter presets

Dark Mode

All interfaces support dark mode:

• Auto-detect - Follows system preference
• Manual toggle - Available in plugin settings
• High contrast - Optimized for readability

Dark mode themes:

• Sidebar: Integrates with IINA's dark theme
• Overlay: Semi-transparent dark background
• Window: System-native dark appearance

Accessibility

Keyboard Navigation

• Tab - Navigate between elements
• Enter/Space - Activate buttons
• ESC - Close dialogs/overlay
• Arrow keys - Navigate lists

Screen Reader Support

• Semantic HTML elements
• ARIA labels and roles
• Focus management
• Descriptive alt text

Focus Trapping

Dialogs implement focus trapping:

• Focus stays within dialog when open
• ESC closes dialog and restores focus
• Tab cycles through dialog elements only

Performance

Optimization Techniques

• Virtual scrolling - Large bookmark lists render efficiently
• Debounced search - 300ms delay to prevent excessive filtering
• Lazy loading - UI components load on demand
• Memoization - React components memoized to prevent unnecessary re-renders

Memory Management

• Event listeners cleaned up on unmount
• No memory leaks from React hooks
• Efficient state updates via reducers

Customization

UI Preferences

Configure in plugin settings:

• Default interface - Choose startup mode
• Theme - Light/dark/auto
• Font size - Adjust for readability
• Compact mode - Reduce spacing for more bookmarks on screen

Hotkeys

Set custom keyboard shortcuts:

• Show/hide sidebar
• Toggle overlay
• Open standalone window
• Add bookmark at current time

Next Steps

• Learn about Bookmark Management
• Explore Filtering and Search
• Set up Cloud Sync
• Review Data Management for import/export