Compare commits

..

22 Commits

Author SHA1 Message Date
Your Name
c0a8eca955 fix: WCAG AAA contrast compliance, speed menu z-index, custom app icon
- Fix all text colors to meet WCAG 2.2 AAA 7:1 contrast ratios against
  dark backgrounds (--textMuted, --textDim, hover states across playlist,
  player, panels, tooltips)
- Fix speed menu rendering behind seek bar by correcting z-index stacking
  context (.controls z-index:10, .miniCtl z-index:3, .seek z-index:2)
- Replace default Tauri icons with custom TutorialVault icon across all
  required sizes (32-512px PNGs, ICO, ICNS, Windows Square logos)
- Update README: Fraunces → Bricolage Grotesque font reference
- Add collapsible dock pane persistence and keyboard-adjustable dividers
2026-02-19 18:23:38 +02:00
Your Name
a571a33415 docs: update README with all recent features and changes
- Add new playback features: mute toggle, PiP, fullscreen, seek feedback, error overlay
- Expand keyboard shortcuts table with F, M, [, ], ? bindings
- Add playlist search/filter, scroll-to-current, mini progress bars
- Add timestamp insertion for notes
- Add two-click reset confirmation, collapsible dock panes, custom titlebar
- Add full accessibility section (WCAG 2.2 AAA)
- Add architecture module breakdown and Cold Open design theme details
2026-02-19 17:10:33 +02:00
Your Name
1b2ebd807c chore: update fonts, Tauri config, and reduced-motion support
- Switch font deps from Sora/Manrope/IBM Plex Mono to Fraunces/Inter/Space Mono (Cold Open theme)
- Add Tauri window permissions for custom titlebar controls
- Disable native decorations and drag-drop in Tauri config
- Add prefers-reduced-motion media query for WCAG compliance
2026-02-19 17:03:39 +02:00
Your Name
715c3c713a feat: add 15 UI enhancements
1. Mute toggle (M key + volume icon click)
2. Fullscreen shortcut (F key)
3. Seek feedback overlay (±5s flash with accumulation)
4. Playlist search/filter with clear button
5. Scroll-to-current button (IntersectionObserver)
6. Picture-in-Picture button
7. Timestamp insertion in notes
8. Keyboard shortcut help panel (? key)
9. Playback speed shortcuts ([ and ] keys)
10. Reset progress two-click confirmation
11. Video load error state overlay
12. Double-click video to fullscreen
13. Playlist stats in header (count + done)
14. Mini progress bars per playlist item
15. Collapsible dock panes with chevron icons

All enhancements are WCAG 2.2 AAA compliant with proper
aria-labels, aria-live regions, focus-visible states,
keyboard accessibility, and 44x44 touch targets.
2026-02-19 17:01:01 +02:00
Your Name
98011cf604 style: remove controls container and bump surface contrast
Strip background/border-radius from .controlsStrip so playback
controls float freely. Roughly double all --surface opacity values
for better element visibility against the dark slate background.
2026-02-19 16:54:12 +02:00
Your Name
c2533e8a76 docs: add design for 15 UI enhancements
Mute toggle, fullscreen shortcut, seek feedback overlay, playlist
search, scroll-to-current, PiP, timestamp insertion, keyboard help,
speed shortcuts, reset confirmation, error state, double-click
fullscreen, playlist stats, per-item progress bars, collapsible docks.
2026-02-19 16:51:54 +02:00
Your Name
a6f1aef489 fix: reset heading margins and button chrome from semantic HTML changes
The WCAG pass changed <div> to <h3> for dock headers and <span> to
<button> for the zoom reset label. Browser defaults for those elements
(heading margins, button border/background) were never overridden,
causing bloated headers and a Windows-XP-style zoom button.
2026-02-19 16:40:39 +02:00
Your Name
cd362a29b1 a11y: bring UI to WCAG 2.2 AAA compliance
Semantic HTML: lang attr, landmarks (header/main/region/complementary),
heading hierarchy (h1-h3), dl/dt/dd for info panel.

ARIA: labels on all icon buttons, aria-hidden on decorative icons,
progressbar role with dynamic aria-valuenow, aria-haspopup/expanded
on all menu triggers, role=listbox/option on playlist, aria-selected,
computed aria-labels on playlist rows.

Contrast: raised --textMuted/--textDim/--icon to AAA 7:1 ratios.

Focus: global :focus-visible outline, slider thumb glow, menu item
highlight, switch focus-within, row focus styles.

Target sizes: 44x44 hit areas on zoom/window/remove buttons via
::before pseudo-elements.

Keyboard: playlist arrow nav + Enter/Space activate + Alt+Arrow
reorder with live region announcements + move buttons. Speed menu,
subtitles menu, and recent menu all keyboard-navigable with
Arrow/Enter/Space/Escape. Dividers resizable via Arrow keys.

Dynamic document.title updates on video/folder load.
2026-02-19 16:35:19 +02:00
Your Name
600188eb1a docs: add WCAG 2.2 AAA implementation plan 2026-02-19 16:00:19 +02:00
Your Name
17e4ffd28f docs: add WCAG 2.2 AAA remediation design 2026-02-19 15:54:04 +02:00
Your Name
f3aa5f7937 Move and expand philosophy section 2026-02-19 12:58:55 +02:00
Your Name
1579e146b5 Replace fancy dashes and quotes with plain ASCII 2026-02-19 12:56:30 +02:00
Your Name
17b57dbab0 Fancy up README header with badges 2026-02-19 12:54:43 +02:00
Your Name
8860188055 Add emoji to README 2026-02-19 12:53:50 +02:00
Your Name
26ff5cd95b Add README 2026-02-19 12:52:21 +02:00
Your Name
9c8d7d94cd TutorialVault: complete Tauri v2 port with runtime fixes
Rename from TutorialDock to TutorialVault. Remove legacy Python app
and scripts. Fix video playback, subtitles, metadata display, window
state persistence, and auto-download of ffmpeg/ffprobe on first run.
Bundle fonts via npm instead of runtime download.
2026-02-19 12:44:57 +02:00
Your Name
a459efae45 feat: implement all frontend TypeScript modules
Create player.ts (video controls, seek, volume, speed, overlay),
playlist.ts (list rendering, tree SVG, drag-and-drop reorder, scrollbar),
subtitles.ts (subtitle menu, track management, sidecar/embedded),
ui.ts (zoom, splits, info panel, notes, toasts, recent menu),
tooltips.ts (zoom-aware tooltip system with delays),
store.ts (shared state and utility functions), and
main.ts (boot sequence, tick loop, keyboard shortcuts).

All modules compile with strict TypeScript. Vite build produces
34KB JS + 41KB CSS. 115 Rust tests pass.
2026-02-19 11:44:48 +02:00
Your Name
4e454084a8 feat: implement video_protocol.rs, commands.rs, wire up main.rs, and index.html
- video_protocol.rs: tutdock:// custom protocol with HTTP Range support
  for video streaming, subtitle/font serving with path traversal protection
- commands.rs: all 26 Tauri command handlers as thin wrappers
- main.rs: full Tauri bootstrap with state management, window restore,
  async font caching, and ffmpeg discovery
- index.html: complete HTML markup extracted from Python app
- lib.rs: updated with all module declarations and AppPaths struct
2026-02-19 11:23:37 +02:00
Your Name
9c8474d24f feat: implement library.rs, types.ts, api.ts, and extract CSS
- library.rs: full video library management (1948 lines, 10 tests)
  folder scanning, progress tracking, playlists, subtitle integration,
  background duration scanning
- types.ts: all TypeScript interfaces for Tauri command responses
- api.ts: typed wrappers for all 26 Tauri invoke commands
- 6 CSS files extracted from Python HTML into src/styles/
2026-02-19 02:08:23 +02:00
Your Name
4e91fe679f feat: implement ffmpeg.rs, subtitles.rs, and fonts.rs
- ffmpeg.rs: discovery, duration extraction, metadata probing, download
- subtitles.rs: SRT-to-VTT conversion, sidecar discovery, storage, extraction
- fonts.rs: Google Fonts and Font Awesome local caching
2026-02-19 01:59:21 +02:00
Your Name
3280d60f71 feat: implement recents.rs - recent folders management 2026-02-19 01:50:28 +02:00
Your Name
b95094c50f feat: implement prefs.rs - preferences with save/load/update 2026-02-19 01:50:20 +02:00

118
README.md
View File

@@ -55,13 +55,13 @@ This is that tool.
**Open any folder as a course.** TutorialVault recursively scans a folder and all its subdirectories for video files, organizing them into a navigable playlist. Supported formats include MP4, MKV, WebM, AVI, MOV, MPEG, M2TS, and OGV.
**Recent folders.** A dropdown menu keeps track of folders you've opened before. Click any entry to jump back to it instantly. Remove entries you no longer need.
**🕐 Recent folders.** A dropdown menu keeps track of folders you've opened before. Click any entry to jump back to it instantly. Remove entries you no longer need.
**Automatic restore.** The app remembers the last folder you had open and automatically loads it on startup, resuming exactly where you left off. No setup, no re-navigation.
**🔄 Automatic restore.** The app remembers the last folder you had open and automatically loads it on startup, resuming exactly where you left off. No setup, no re-navigation.
**Smart file identity.** Files are identified by their content, not their path. Rename or reorganize files within the folder and your progress follows them.
**🔑 Smart file identity.** Files are identified by their content, not their path. Rename or reorganize files within the folder and your progress follows them.
**Subfolder awareness.** When your course has subdirectories (chapters, sections, modules), TutorialVault detects the structure and displays a visual tree in the playlist, making it easy to see where you are in a large course.
**🌳 Subfolder awareness.** When your course has subdirectories (chapters, sections, modules), TutorialVault detects the structure and displays a visual tree in the playlist, making it easy to see where you are in a large course.
---
@@ -69,19 +69,19 @@ This is that tool.
**Full-featured player.** Play, pause, seek, adjust volume, change playback speed, and go fullscreen. All the controls you'd expect, with a clean minimal interface that stays out of your way.
**Playback speed.** Presets from 0.50x to 2.00x, with a visual speedometer that changes color based on your current rate. Speed is saved per folder, so your lecture courses stay at 1.5x while your drawing tutorials stay at 1x. Cycle through speeds with keyboard shortcuts.
**Playback speed.** Presets from 0.50x to 2.00x, with a visual speedometer that changes color based on your current rate. Speed is saved per folder, so your lecture courses stay at 1.5x while your drawing tutorials stay at 1x. Cycle through speeds with keyboard shortcuts.
**Volume control.** A slider with a live percentage tooltip. Click the volume icon to mute/unmute instantly. Volume is saved per folder as well.
**🔊 Volume control.** A slider with a live percentage tooltip. Click the volume icon to mute/unmute instantly. Volume is saved per folder as well.
**Picture-in-Picture.** Pop the video out into a floating window so you can follow along while working in another application. The PiP button appears automatically when your browser supports it.
**🖼️ Picture-in-Picture.** Pop the video out into a floating window so you can follow along while working in another application. The PiP button appears automatically when your browser supports it.
**Fullscreen.** Double-click the video or press F to toggle fullscreen. The player remembers your position and controls remain accessible.
**📺 Fullscreen.** Double-click the video or press F to toggle fullscreen. The player remembers your position and controls remain accessible.
**Seek feedback.** When skipping forward or backward, a brief overlay shows the accumulated seek amount (+5s, -10s, etc.) so you always know how far you've jumped.
**Seek feedback.** When skipping forward or backward, a brief overlay shows the accumulated seek amount (+5s, -10s, etc.) so you always know how far you've jumped.
**Error handling.** If a video format isn't supported by the player, an error overlay appears with a clear message and a "Try next" button to skip to the next video without interrupting your session.
**🚫 Error handling.** If a video format isn't supported by the player, an error overlay appears with a clear message and a "Try next" button to skip to the next video without interrupting your session.
**Keyboard shortcuts:**
**⌨️ Keyboard shortcuts:**
| Key | Action |
|-----|--------|
@@ -102,19 +102,19 @@ Press **?** at any time to open a help dialog listing all available shortcuts.
### 📊 Progress Tracking
**Automatic position saving.** Your playback position is saved continuously as you watch. Close the app, come back tomorrow, and you're right where you stopped.
**💾 Automatic position saving.** Your playback position is saved continuously as you watch. Close the app, come back tomorrow, and you're right where you stopped.
**High-water mark tracking.** TutorialVault remembers the furthest point you've reached in each video, independent of where you happen to be scrubbing to.
**📈 High-water mark tracking.** TutorialVault remembers the furthest point you've reached in each video, independent of where you happen to be scrubbing to.
**Automatic completion detection.** When you watch to within 2 seconds of the end, a video is marked as done. Once done, it stays done - no accidental un-finishing.
**Automatic completion detection.** When you watch to within 2 seconds of the end, a video is marked as done. Once done, it stays done - no accidental un-finishing.
**Overall progress.** A progress bar shows your completion percentage for the entire folder, calculated from actual watched time relative to total duration. Not just "videos finished out of total" - actual time-weighted progress.
**📉 Overall progress.** A progress bar shows your completion percentage for the entire folder, calculated from actual watched time relative to total duration. Not just "videos finished out of total" - actual time-weighted progress.
**Resume from where you left off.** Clicking any video in the playlist, or navigating with previous/next, resumes from your last position. Finished videos start from the beginning.
**Resume from where you left off.** Clicking any video in the playlist, or navigating with previous/next, resumes from your last position. Finished videos start from the beginning.
**Progress reset.** If you want to go through a course again from scratch, a reset button clears all watch progress while preserving your notes, subtitles, volume, and speed settings. Uses a two-click confirmation to prevent accidental resets -- the first click arms the button (it turns red with a warning icon), and the second click within 3 seconds actually resets. If you change your mind, just wait or click elsewhere.
**🔁 Progress reset.** If you want to go through a course again from scratch, a reset button clears all watch progress while preserving your notes, subtitles, volume, and speed settings. Uses a two-click confirmation to prevent accidental resets -- the first click arms the button (it turns red with a warning icon), and the second click within 3 seconds actually resets. If you change your mind, just wait or click elsewhere.
**Mini progress bars.** Each item in the playlist shows a thin progress bar at the bottom of its row, visualizing how far you've watched. Completed videos get a green bar; in-progress videos show the accent color proportional to watched time.
**📊 Mini progress bars.** Each item in the playlist shows a thin progress bar at the bottom of its row, visualizing how far you've watched. Completed videos get a green bar; in-progress videos show the accent color proportional to watched time.
---
@@ -122,31 +122,31 @@ Press **?** at any time to open a help dialog listing all available shortcuts.
**Visual playlist.** Every video in the folder is listed with its title, watched time, total duration, and status tags. The currently playing video is marked "Now," and completed videos are marked "Done."
**Tree view.** Courses with subdirectories get a visual tree with SVG connectors showing the hierarchy. Lines, corners, and dots show parent-child relationships at a glance.
**🌲 Tree view.** Courses with subdirectories get a visual tree with SVG connectors showing the hierarchy. Lines, corners, and dots show parent-child relationships at a glance.
**Drag and drop reorder.** Rearrange the playlist by dragging items. A blue indicator line shows exactly where an item will land. Your custom order is saved and persists between sessions.
**🔀 Drag and drop reorder.** Rearrange the playlist by dragging items. A blue indicator line shows exactly where an item will land. Your custom order is saved and persists between sessions.
**Smart ordering.** Natural sort by default - "Lesson 2" comes before "Lesson 10." When you reopen a folder that has new files, existing items keep their saved order and new files appear at the end.
**🔢 Smart ordering.** Natural sort by default - "Lesson 2" comes before "Lesson 10." When you reopen a folder that has new files, existing items keep their saved order and new files appear at the end.
**Search and filter.** A search field in the playlist header lets you filter videos by name in real time. Matches are case-insensitive and update the displayed list instantly. A clear button resets the filter. Statistics next to the header show total video count and how many are done (or "X of Y" when filtering).
**🔍 Search and filter.** A search field in the playlist header lets you filter videos by name in real time. Matches are case-insensitive and update the displayed list instantly. A clear button resets the filter. Statistics next to the header show total video count and how many are done (or "X of Y" when filtering).
**Scroll to current.** When the currently playing video scrolls out of view in a long playlist, a crosshair button appears in the header. Click it to scroll the active video back into view.
**🎯 Scroll to current.** When the currently playing video scrolls out of view in a long playlist, a crosshair button appears in the header. Click it to scroll the active video back into view.
---
### 💬 Subtitles
**Automatic subtitle discovery.** TutorialVault finds subtitles in three ways, in this priority order:
**🔍 Automatic subtitle discovery.** TutorialVault finds subtitles in three ways, in this priority order:
1. **Previously loaded subtitle** - if you've loaded a subtitle for a video before, it's remembered and reloaded automatically.
2. **Sidecar files** - `.srt` or `.vtt` files sitting next to the video with a matching filename (including language variants like `video.en.srt` or `video.french.srt`).
3. **Embedded tracks** - subtitle tracks inside the video container itself (common in MKV files), extracted on demand using ffmpeg.
**Subtitle menu.** A CC button opens a menu listing all available subtitles - external files, embedded tracks, a "load from file" option for picking any subtitle file on your system, and a disable option.
**📋 Subtitle menu.** A CC button opens a menu listing all available subtitles - external files, embedded tracks, a "load from file" option for picking any subtitle file on your system, and a disable option.
**Language detection.** Sidecar subtitles with language suffixes are automatically labeled (English, French, German, Spanish, Italian, Portuguese, Russian, Japanese, Korean, Chinese, Arabic, Hindi, Dutch, Swedish, Polish). English subtitles are sorted first.
**🌍 Language detection.** Sidecar subtitles with language suffixes are automatically labeled (English, French, German, Spanish, Italian, Portuguese, Russian, Japanese, Korean, Chinese, Arabic, Hindi, Dutch, Swedish, Polish). English subtitles are sorted first.
**Persistent selection.** Once a subtitle is loaded for a video, it's converted to VTT format, stored locally, and automatically reloaded every time you watch that video.
**📌 Persistent selection.** Once a subtitle is loaded for a video, it's converted to VTT format, stored locally, and automatically reloaded every time you watch that video.
---
@@ -154,11 +154,11 @@ Press **?** at any time to open a help dialog listing all available shortcuts.
**Per-video notes.** A text area in the dock panel lets you write notes for each video. Timestamps, reminders, key takeaways, questions - whatever you need. Notes auto-save as you type.
**Timestamp insertion.** Click the clock button in the notes header to insert the current video timestamp at your cursor position in `[M:SS]` format. Useful for marking specific moments while you watch.
**⏱️ Timestamp insertion.** Click the clock button in the notes header to insert the current video timestamp at your cursor position in `[M:SS]` format. Useful for marking specific moments while you watch.
**Visible in the playlist.** Videos with notes show a small indicator in the playlist, so you can quickly spot which videos you've annotated.
**👁️ Visible in the playlist.** Videos with notes show a small indicator in the playlist, so you can quickly spot which videos you've annotated.
**Preserved on reset.** Resetting watch progress never touches your notes.
**🛡️ Preserved on reset.** Resetting watch progress never touches your notes.
---
@@ -166,13 +166,13 @@ Press **?** at any time to open a help dialog listing all available shortcuts.
**Detailed metadata panel.** The info panel shows everything about the current video and folder:
- **Folder info** - path, structure (flat or subfolder), next unfinished video.
- **Video info** - codec, resolution, frame rate, pixel format, bitrate.
- **Audio info** - codec, channels, sample rate, bitrate.
- **Subtitle info** - count and details of embedded tracks, or external file status.
- **File info** - extension, file size, modification date, containing folder.
- **Progress stats** - finished count, remaining count, estimated time remaining.
- **Per-subfolder breakdown** - completion counts for each top-level subdirectory.
- 📁 **Folder info** - path, structure (flat or subfolder), next unfinished video.
- 🎬 **Video info** - codec, resolution, frame rate, pixel format, bitrate.
- 🔈 **Audio info** - codec, channels, sample rate, bitrate.
- 💬 **Subtitle info** - count and details of embedded tracks, or external file status.
- 📄 **File info** - extension, file size, modification date, containing folder.
- **Progress stats** - finished count, remaining count, estimated time remaining.
- 📊 **Per-subfolder breakdown** - completion counts for each top-level subdirectory.
All of this requires ffprobe, which TutorialVault will automatically download if it's not already available on your system.
@@ -180,23 +180,23 @@ All of this requires ffprobe, which TutorialVault will automatically download if
### 🖥️ Interface
**Custom titlebar.** The app uses a custom-drawn titlebar with minimize, maximize, and close buttons, replacing the default OS chrome. The titlebar doubles as a drag region for moving the window and integrates the toolbar controls directly.
**🪟 Custom titlebar.** The app uses a custom-drawn titlebar with minimize, maximize, and close buttons, replacing the default OS chrome. The titlebar doubles as a drag region for moving the window and integrates the toolbar controls directly.
**Resizable panels.** Drag the divider between the video area and the playlist to adjust the split. Drag the divider between the notes and info panels too. Both ratios are saved. Dividers also support keyboard adjustment with arrow keys.
**↔️ Resizable panels.** Drag the divider between the video area and the playlist to adjust the split. Drag the divider between the notes and info panels too. Both ratios are saved. Dividers also support keyboard adjustment with arrow keys.
**Collapsible dock panes.** Click the Notes or Info panel header to collapse it, freeing up vertical space for the other pane. A chevron icon indicates the current state. Collapsed state is saved and restored between sessions.
**📂 Collapsible dock panes.** Click the Notes or Info panel header to collapse it, freeing up vertical space for the other pane. A chevron icon indicates the current state. Collapsed state is saved and restored between sessions.
**UI zoom.** Scale the entire interface from 75% to 200% with the zoom controls in the top bar. Useful for high-DPI displays or when you want more real estate for the video.
**🔎 UI zoom.** Scale the entire interface from 75% to 200% with the zoom controls in the top bar. Useful for high-DPI displays or when you want more real estate for the video.
**Always on top.** A toggle to keep the window above all others. Handy when following along with a tutorial in another application.
**📌 Always on top.** A toggle to keep the window above all others. Handy when following along with a tutorial in another application.
**Autoplay.** When enabled, the next video starts playing automatically when the current one ends. Saved per folder.
**⏭️ Autoplay.** When enabled, the next video starts playing automatically when the current one ends. Saved per folder.
**Custom scrollbar.** The playlist has a custom scrollbar that auto-hides when not in use, with fade indicators at the edges when there's more content to scroll.
**🎨 Custom scrollbar.** The playlist has a custom scrollbar that auto-hides when not in use, with fade indicators at the edges when there's more content to scroll.
**Tooltips.** Hover over any control for a two-line tooltip explaining what it does. Tooltips are zoom-aware and stay within the viewport.
**💡 Tooltips.** Hover over any control for a two-line tooltip explaining what it does. Tooltips are zoom-aware and stay within the viewport.
**Toast notifications.** Brief confirmations appear at the bottom of the screen for actions like loading folders, resetting progress, and loading subtitles.
**🔔 Toast notifications.** Brief confirmations appear at the bottom of the screen for actions like loading folders, resetting progress, and loading subtitles.
---
@@ -204,19 +204,19 @@ All of this requires ffprobe, which TutorialVault will automatically download if
TutorialVault targets WCAG 2.2 AAA compliance throughout the interface.
**Semantic HTML.** The interface uses proper semantic elements -- `<nav>`, `<main>`, `<header>`, `<section>`, `<h2>`, `<h3>` -- so screen readers can navigate the structure meaningfully.
**🔤 Semantic HTML.** The interface uses proper semantic elements -- `<nav>`, `<main>`, `<header>`, `<section>`, `<h2>`, `<h3>` -- so screen readers can navigate the structure meaningfully.
**ARIA attributes.** All interactive elements have appropriate ARIA labels, roles, and state attributes. Menus use `role="menu"` with `aria-haspopup` and `aria-expanded`. The progress bar uses `role="progressbar"` with live value updates. The seek feedback overlay uses `aria-live="assertive"` for screen reader announcements.
**🏷️ ARIA attributes.** All interactive elements have appropriate ARIA labels, roles, and state attributes. Menus use `role="menu"` with `aria-haspopup` and `aria-expanded`. The progress bar uses `role="progressbar"` with live value updates. The seek feedback overlay uses `aria-live="assertive"` for screen reader announcements.
**Full keyboard navigation.** Every control is reachable and operable via keyboard. Menus support arrow key navigation, Escape to close, and Enter/Space to activate. Dividers can be adjusted with arrow keys. The shortcut help dialog traps focus while open.
**⌨️ Full keyboard navigation.** Every control is reachable and operable via keyboard. Menus support arrow key navigation, Escape to close, and Enter/Space to activate. Dividers can be adjusted with arrow keys. The shortcut help dialog traps focus while open.
**Touch targets.** All interactive elements meet the 44x44px minimum target size. Buttons, checkboxes, and menu items are sized for comfortable interaction on all input methods.
**🎯 Touch targets.** All interactive elements meet the 44x44px minimum target size. Buttons, checkboxes, and menu items are sized for comfortable interaction on all input methods.
**Focus indicators.** All focusable elements show a visible `focus-visible` ring (2px solid outline) when navigated via keyboard. Focus indicators use the accent color with sufficient contrast.
**👁️ Focus indicators.** All focusable elements show a visible `focus-visible` ring (2px solid outline) when navigated via keyboard. Focus indicators use the accent color with sufficient contrast.
**Reduced motion.** The app respects `prefers-reduced-motion` at the OS level. When enabled, all animations and transitions are effectively disabled, ensuring the interface remains usable for people who are sensitive to motion.
**🎞️ Reduced motion.** The app respects `prefers-reduced-motion` at the OS level. When enabled, all animations and transitions are effectively disabled, ensuring the interface remains usable for people who are sensitive to motion.
**Contrast.** Text and UI elements meet AAA contrast ratios (7:1 for normal text, 4.5:1 for large text) against the dark background surfaces.
**🔲 Contrast.** Text and UI elements meet AAA contrast ratios (7:1 for normal text, 4.5:1 for large text) against the dark background surfaces.
---
@@ -224,9 +224,9 @@ TutorialVault targets WCAG 2.2 AAA compliance throughout the interface.
**Fully portable.** Everything - preferences, library state, subtitles, ffmpeg binaries, even the WebView2 profile - lives in a `state/` directory next to the executable. Copy the folder to a USB drive and it works anywhere. No registry entries, no AppData folders, no hidden configuration in your home directory.
**Crash-safe storage.** All state files are written atomically with backup rotation. If something goes wrong mid-write, the app falls back to the most recent valid backup. Nobody should lose their progress to a power outage.
**🛟 Crash-safe storage.** All state files are written atomically with backup rotation. If something goes wrong mid-write, the app falls back to the most recent valid backup. Nobody should lose their progress to a power outage.
**No external dependencies at runtime.** ffmpeg and ffprobe are automatically downloaded on first launch if not found locally. Fonts are bundled. Everything the app needs, it carries with it.
**📦 No external dependencies at runtime.** ffmpeg and ffprobe are automatically downloaded on first launch if not found locally. Fonts are bundled. Everything the app needs, it carries with it.
---
@@ -269,9 +269,9 @@ The built executable and all assets will be in `src-tauri/target/release/`.
TutorialVault is a [Tauri v2](https://v2.tauri.app/) application with a Rust backend and a TypeScript frontend.
**Backend (Rust):** Handles file scanning, fingerprinting, state persistence, ffmpeg integration, subtitle processing, and a custom HTTP protocol for serving video and subtitle files to the frontend.
**⚙️ Backend (Rust):** Handles file scanning, fingerprinting, state persistence, ffmpeg integration, subtitle processing, and a custom HTTP protocol for serving video and subtitle files to the frontend.
**Frontend (TypeScript + Vite):** A modular architecture with dedicated modules for each concern:
**🖼️ Frontend (TypeScript + Vite):** A modular architecture with dedicated modules for each concern:
- `main.ts` -- Boot sequence, tick loop, keyboard shortcuts, cross-module wiring
- `player.ts` -- Video element, seek/volume/speed controls, mute, fullscreen, PiP, error states
@@ -282,9 +282,9 @@ TutorialVault is a [Tauri v2](https://v2.tauri.app/) application with a Rust bac
- `store.ts` -- Shared state, pure utilities, cross-module callback registry
- `api.ts` -- Typed wrapper around Tauri's invoke API
**Design theme.** The interface uses a "Cold Open" dark theme built on cool slate backgrounds (`#0f1117` base) with a steel blue accent (`#88A4C4`). Typography uses [Bricolage Grotesque](https://fonts.google.com/specimen/Bricolage+Grotesque) for headings, [Inter](https://fonts.google.com/specimen/Inter) for body text, and [Space Mono](https://fonts.google.com/specimen/Space+Mono) for monospace elements. All fonts are bundled -- no external requests at runtime.
**🎨 Design theme.** The interface uses a "Cold Open" dark theme built on cool slate backgrounds (`#0f1117` base) with a steel blue accent (`#88A4C4`). Typography uses [Bricolage Grotesque](https://fonts.google.com/specimen/Bricolage+Grotesque) for headings, [Inter](https://fonts.google.com/specimen/Inter) for body text, and [Space Mono](https://fonts.google.com/specimen/Space+Mono) for monospace elements. All fonts are bundled -- no external requests at runtime.
**State is local.** All data is stored in JSON files with atomic writes and backup rotation. No database, no server, no network requests beyond the one-time ffmpeg download.
**💾 State is local.** All data is stored in JSON files with atomic writes and backup rotation. No database, no server, no network requests beyond the one-time ffmpeg download.
---