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>
GUI Video Clipper
A macOS desktop app for clipping segments from online videos. Paste a URL, scrub the timeline, mark your clips, and export — without manually downloading the video first.
Features
- URL Input — Paste a YouTube (or other supported) URL and start working immediately
- Video Preview — Scrub, seek, and frame-step through the video with full transport controls
- Mark In/Out — Set clip boundaries with keyboard shortcuts (I/O) or transport buttons
- Timeline — Visual timeline with waveform display and thumbnail strip
- Clip Export — Export clips in lossless (stream copy) or precise (re-encode) modes
- Captions — Download subtitles, preview with karaoke-style highlighting, burn into exports
- Setup Wizard — Automatically detects and installs required dependencies (ffmpeg, yt-dlp)
Prerequisites
- macOS (primary target platform)
- Node.js (v18+)
- Rust toolchain (rustup.rs)
ffmpeg and yt-dlp are detected (and can be installed) automatically by the built-in setup wizard on first launch.
Build & Run
# Install frontend dependencies
npm install
# Development (hot-reload)
npm run tauri dev
# Production build
npm run tauri build
Release Build
npm run release
This runs the full Tauri production build, ad-hoc code signs the .app bundle, and copies the output to dist/release/.
The resulting GUI Video Clipper.app can be launched directly or dragged to /Applications.
Architecture
GUI Video Clipper is built with Tauri v2 (Rust backend) and Svelte 5 (TypeScript frontend).
Backend (Rust)
- Video Resolver — Resolves URLs via yt-dlp, extracts metadata and stream URLs
- Download Manager — Manages preview and high-quality downloads with progress tracking
- Media Server — Local HTTP server for streaming video to the frontend player
- Waveform Generator — Extracts audio waveform data at multiple zoom tiers via ffmpeg
- Thumbnail Extractor — Generates timeline thumbnail strips from keyframes
- Export Pipeline — Handles clip extraction with ffmpeg (lossless and precise modes)
- Subtitle Downloader — Fetches and converts subtitles for preview and burn-in
Frontend (Svelte 5 + TypeScript)
- Timeline — Canvas-based timeline with waveform, thumbnails, and clip region rendering
- Transport Controls — Play/pause, seek, frame-step, shuttle (J/K/L), keyboard shortcuts
- Video Player — HTML5 video element connected to the local media server
- Export Dialog — Configure and execute clip exports with progress tracking
- Caption Settings — Font, color, shadow, and positioning controls for subtitle burn-in
Contributing
- Fork the repository
- Create a feature branch (
git checkout -b feat/my-feature) - Make your changes
- Run checks:
npm run check - Commit with a descriptive message
- Open a pull request