lashman/tutorialvault
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

docs: update README with all recent features and changes

Browse Source 
- 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
This commit is contained in:
Your Name
2026-02-19 17:10:33 +02:00
parent 1b2ebd807c
commit a571a33415
1 changed files with 63 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
README.md
View File

@@ -69,9 +69,17 @@ 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.
**⏩ 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. 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.
**📺 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.
**🚫 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:**
@@ -82,6 +90,13 @@ This is that tool.
| Right Arrow | Skip forward 5 seconds |
| Up Arrow | Volume up 5% |
| Down Arrow | Volume down 5% |
| F | Toggle fullscreen |
| M | Mute / Unmute |
| [ | Decrease playback speed |
| ] | Increase playback speed |
| ? | Show keyboard shortcut help |
Press **?** at any time to open a help dialog listing all available shortcuts.
---
@@ -97,7 +112,9 @@ This is that tool.
**⏪ 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 single button resets all watch progress while preserving your notes, subtitles, volume, and speed settings.
**🔁 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.
---
@@ -111,6 +128,10 @@ This is that tool.
**🔢 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).
**🎯 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
@@ -133,6 +154,8 @@ This is that tool.
**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.
**👁️ 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.
@@ -157,7 +180,11 @@ All of this requires ffprobe, which TutorialVault will automatically download if
### 🖥️ Interface
**↔️ 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.
**🪟 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.
**📂 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.
@@ -173,6 +200,26 @@ All of this requires ffprobe, which TutorialVault will automatically download if
---
### ♿ Accessibility
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.
**🏷️ 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.
**🎯 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.
**🎞️ 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.
---
### 🧳 Portability
**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.
@@ -224,7 +271,18 @@ TutorialVault is a [Tauri v2](https://v2.tauri.app/) application with a Rust bac
**⚙️ 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):** Handles the player interface, playlist rendering, subtitle menu, notes, info panel, drag-and-drop, keyboard shortcuts, and all visual presentation.
**🖼️ 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
- `playlist.ts` -- Playlist rendering, tree view, drag-and-drop, search/filter, scroll-to-current
- `subtitles.ts` -- Subtitle discovery, menu, embedded track extraction
- `ui.ts` -- Zoom, split ratios, notes, info panel, recent menu, toast, collapsible panes
- `tooltips.ts` -- Hover tooltips with zoom awareness and viewport clamping
- `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 [Fraunces](https://fonts.google.com/specimen/Fraunces) 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.