cottongin
c1de18715e
v0.2.0 introduced Player mode with floating controls, auto-hide UI,
PiP, fullscreen, JKL shuttle, speed selector, captions, and cut-clip.
v0.2.1 builds on that with extensive UI polish and new features:
Player Controls Polish:
- Enlarged center playback icons (Play 48, Rewind/FF 36) with filled SVGs
- Moved Cut Clip scissors into center group with hidden cut-before button
- Narrowed floating panel from 70% to 60% width
- Custom-styled volume slider matching seek bar (linear-gradient fill)
- Pure opacity fade animation (0.35s) replacing slide-in
- Tinted panel background (rgba(53,54,80,0.75)) visible on black canvas
- Drop shadow on center transport controls
- Scissors buttons dimmed via color (not opacity) with single-property transitions
- ScissorsLineDashed icon for cut-before variant
- Timestamps in single seek row (time | bar | duration) with sans-serif font
- Milliseconds shown at smaller size, revealed on hover
Screenshot Capture (S / Shift+S):
- Canvas compositing at native video resolution with optional caption burn-in
- Caption rendering matches CSS preview (font, background, outline, word highlight)
- New Rust save_screenshot command using existing filename pattern
- Output: {title} - {ms}ms-screenshot.png
- crossorigin=anonymous on video element for untainted canvas
Other:
- Q keyboard shortcut to quit via Tauri process plugin
- formatTimeParts() utility for split timestamp rendering
- Updated About dialog shortcuts list
- Version bump to 0.2.1
Co-authored-by: Cursor <cursoragent@cursor.com>
49 lines
2.8 KiB
Markdown
49 lines
2.8 KiB
Markdown
# Quit + Screenshot Shortcuts
|
|
|
|
**Date:** 2026-09-23 09:08 UTC
|
|
**Task:** Add Q to quit, S/Shift+S to save screenshot with/without captions, update About dialog shortcuts
|
|
|
|
## Changes Made
|
|
|
|
### Rust backend
|
|
- **`src-tauri/src/commands/export.rs`** — Added `save_screenshot` Tauri command. Accepts output directory, video title, timestamp label, and PNG byte data. Uses the existing `generate_output_path` and `expand_tilde_path` from `clip_exporter` for consistent filename generation. Creates output directory if it doesn't exist.
|
|
- **`src-tauri/src/lib.rs`** — Registered `export::save_screenshot` in the invoke handler.
|
|
|
|
### Frontend bindings
|
|
- **`src/lib/bindings/export.ts`** — Added `saveScreenshot()` function that invokes the new Rust command.
|
|
|
|
### Screenshot utility
|
|
- **`src/lib/utils/screenshot.ts`** (new file) — Canvas-based screenshot capture:
|
|
- Draws the current video frame onto an offscreen canvas at native resolution (`videoWidth` x `videoHeight`)
|
|
- Optionally composites captions using Canvas 2D text APIs, matching the CSS caption style (font, color, background, outline/shadow, word highlighting, position)
|
|
- Scales caption font size proportionally from preview to native resolution
|
|
- Exports as PNG blob, converts to byte array, sends to Rust backend
|
|
- Filename format: `{videoTitle} - {totalMs}ms-screenshot.png`
|
|
|
|
### VideoPlayer
|
|
- **`src/lib/components/VideoPlayer.svelte`** — Added `export function getParsedCues()` to expose parsed VTT cues to the parent component.
|
|
|
|
### App keybindings
|
|
- **`src/App.svelte`** — Added:
|
|
- `Q` — Quit app via `exit(0)` from `@tauri-apps/plugin-process`
|
|
- `S` — Screenshot with captions
|
|
- `Shift+S` — Screenshot without captions
|
|
- `bind:this={videoPlayerRef}` on VideoPlayer for accessing `getParsedCues()`
|
|
- `captureScreenshot(withCaptions)` async function that orchestrates the capture
|
|
|
|
### About dialog
|
|
- **`src/lib/components/AboutDialog.svelte`** — Added Q, S, and Shift+S to the global shortcuts list.
|
|
|
|
## Verification
|
|
- `svelte-check`: 0 errors, 0 warnings
|
|
- `vitest run`: 69 tests passed across 10 test files
|
|
- `cargo check`: compiles clean
|
|
|
|
## Lessons Learned
|
|
- Canvas 2D text rendering requires explicit scaling when compositing at native resolution vs. CSS preview resolution. Using `videoHeight / clientHeight` as the scale factor ensures caption size matches visually.
|
|
- The `toBlob` → `arrayBuffer` → `Array.from(Uint8Array)` pipeline is necessary because Tauri's IPC expects `Vec<u8>` on the Rust side, which maps to `number[]` in TypeScript invoke calls.
|
|
|
|
## Follow-up Items
|
|
- Visual QA recommended to verify caption rendering fidelity on screenshots matches the preview exactly (especially text wrapping and word-level highlighting).
|
|
- Could add a brief toast notification on successful screenshot save (currently only logs to console).
|