Files
gui-video-clipper/chat-summaries/2026-09-23_09-08-quit-screenshot-shortcuts-summary.md
cottongin c1de18715e feat: v0.2.1 — Player controls polish, screenshot capture, quit shortcut
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>
2026-09-23 05:30:45 -04:00

2.8 KiB

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).