How lossless-cut Works: Architecture, System Design & Code Deep Dive

Project Overview

LosslessCut is an Electron-based desktop application designed for fast, lossless cutting of video and audio files. It allows professional developers and general users to quickly trim media segments without re-encoding, preserving original quality and significantly reducing processing time. It achieves this by leveraging the powerful FFmpeg tool for media processing, wrapped within a user-friendly React-driven UI.

Category

desktop-app

Difficulty

intermediate

Tech Stack

JavaScript, Node.js, React, TypeScript

Author

mifi

Tags

electron, ffmpeg, video

How lossless-cut Works

LosslessCut is an Electron-based desktop application designed for fast, lossless cutting of video and audio files. It allows professional developers and general users to quickly trim media segments without re-encoding, preserving original quality and significantly reducing processing time. It achieves this by leveraging the powerful FFmpeg tool for media processing, wrapped within a user-friendly React-driven UI.

Data Flow

Data in LosslessCut primarily flows between the Electron main process and renderer process, and within the renderer's React component hierarchy. User interactions in the UI (e.g., in `src/renderer/src/App.tsx`, `src/renderer/src/Timeline.tsx`) update local React component state, which often propagates to a global application state managed by custom stores like `src/renderer/src/edlStore.ts` for editing decisions or `src/renderer/src/segments.ts` for segment logic. When main process functionalities are required (e.g., file system access, FFmpeg execution), data is sent from the renderer to the main process via secure Inter-Process Communication (IPC), facilitated by `src/preload/index.ts` and listened for in `src/main/index.ts`. The main process (e.g., `src/main/ffmpeg.ts`) interacts with external binaries like FFmpeg/FFprobe, parses their output, and then sends processed data back to the renderer via IPC. This data is then consumed by `src/renderer/src/App.tsx` or other components to update the UI, display media information, or reflect processing progress. Configuration data is managed persistently by `src/main/configStore.ts` in the main process. Shared TypeScript type definitions in `src/common/types.ts` ensure data consistency and type safety across both processes.

Key Modules & Components

• Media File Handling and Metadata Extraction: Provides the capability to open, analyze, and extract metadata from various video and audio file formats using FFprobe. This module is crucial for initializing the application state with media information and preparing files for editing.
  Key files: src/main/ffmpeg.ts, src/main/index.ts, src/common/types.ts
• Lossless Cut Segment Management and Preview: Enables users to define precise cut points on a media timeline, create and manage segments, and preview these segments using Media Source Extensions (MSE) for frame-accurate playback without re-encoding. It provides the core editing functionality for lossless media trimming.
  Key files: src/renderer/src/Timeline.tsx, src/renderer/src/segments.ts, src/renderer/src/edlStore.ts
• Lossless Export Processing: Orchestrates the lossless export of user-defined segments by constructing and executing FFmpeg commands, ensuring original media quality is preserved. This module manages output configuration and provides progress feedback to the user.
  Key files: src/renderer/src/components/ExportSheet.tsx, src/renderer/src/edlStore.ts, src/renderer/src/hooks/useFfmpegOperations.ts
• Application Configuration Management: Handles persistent application settings and user preferences, providing a centralized mechanism for managing and persisting application state across sessions. This module enables customization and consistent behavior across different application runs.
  Key files: src/main/configStore.ts
• User Interface and Experience: Defines the structure and behavior of the graphical user interface. Encompasses the main application window, menus, event handling, and component rendering, providing the visual interface through which the user interacts with the application's functionality.
  Key files: src/renderer/src/index.tsx, src/renderer/src/App.tsx, src/main/menu.ts