A powerful desktop application for converting video files to HLS (HTTP Live Streaming) format, built with Electron, React, and Shadcn UI.
- Bundled FFMPEG: FFMPEG is automatically included - no manual installation required!
- Single & Bulk Conversion: Convert individual files or process multiple videos at once
- Custom Settings: Optional custom FFMPEG path and default split time configuration
- Dark Mode: Beautiful dark theme throughout the application
- Custom Title Bar: Frameless window with minimize and close buttons
- Multi-Platform: Support for Windows, macOS, and Linux
- First-Time Setup: Guided settings configuration on first launch
- NSIS Installer (x64, ia32)
- Portable (x64, ia32)
- ZIP Archive (x64, ia32)
- DMG Image (x64, arm64, universal)
- PKG Installer (x64, arm64, universal)
- ZIP Archive (x64, arm64, universal)
- AppImage (x64, arm64)
- DEB Package (x64, arm64)
- RPM Package (x64, arm64)
- TAR.GZ Archive (x64, arm64)
- Snap Package (x64)
Download ready-to-use releases from the Releases page.
For complete build instructions, see BUILD.md.
Important: Use GitHub Actions for building all platforms, not local builds!
# Install dependencies
pnpm install
# Run in development mode
pnpm dev
# Build (for testing only - use GitHub Actions for production)
# For Windows
pnpm build:win
# For macOS
pnpm build:mac
# For Linux
pnpm build:linuxRapidHLS/
├── electron/
│ ├── main.ts # Electron main process
│ └── preload.ts # Preload script for IPC
├── src/
│ ├── components/
│ │ ├── Layout.tsx # Main layout with fixed TitleBar
│ │ ├── TitleBar.tsx # Custom window controls
│ │ ├── SplashScreen.tsx # Animated splash screen
│ │ └── ui/ # Shadcn UI components
│ ├── pages/
│ │ ├── Home.tsx # Home page with conversion options
│ │ ├── Settings.tsx # Settings configuration page
│ │ ├── About.tsx # About page with app info
│ │ ├── SingleConvert.tsx # Single file conversion
│ │ └── BulkConvert.tsx # Bulk conversion
│ ├── styles/
│ │ └── index.css # Global styles and Tailwind imports
│ ├── lib/
│ │ └── utils.ts # Utility functions
│ ├── types/
│ │ └── electron.d.ts # TypeScript definitions
│ ├── App.tsx # Main app with routing
│ └── main.tsx # React entry point
├── public/ # Static assets
└── assets/ # Application assets
- Two main conversion options: Single Convert and Bulk Convert
- Quick access to conversion methods
- Footer with GitHub link to creator
- Configure FFMPEG installation path
- Set default split time for HLS segments
- First-time setup wizard with "Later" option
- Settings stored in localStorage
- Detailed information about RapidHLS
- Explanation of HLS technology
- Feature list and requirements
- Information about bundled FFMPEG
- Convert individual video files (Coming soon)
- Process multiple videos at once (Coming soon)
- Electron 28.0.0: Desktop application framework
- React 18.2.0: UI library
- TypeScript 5.3.2: Type-safe development
- Vite 5.0.2: Fast build tool
- React Router DOM 7.13.0: Client-side routing
- Shadcn UI: Beautiful component library
- Tailwind CSS 3.3.5: Utility-first CSS
- Lucide Icons: Icon library
- Node.js (v18 or higher)
- pnpm package manager
- FFMPEG is bundled automatically (no separate installation needed)
# Install dependencies
pnpm install
# Run in development mode
pnpm dev
# Format code
pnpm format
# Check formatting
pnpm format:check# Build for all platforms
pnpm build
# Build for specific platform
pnpm build:win # Windows (NSIS + Portable)
pnpm build:mac # macOS (DMG + ZIP)
pnpm build:linux # Linux (AppImage + deb + rpm)The application uses React Router for navigation with a persistent TitleBar:
- Settings Icon: Click to access settings page
- Info Icon: Click to view about page
- Window Controls: Minimize and close buttons in top-right
When launching RapidHLS for the first time:
- Splash Screen: Animated RapidHLS logo with "Created By AliESM"
- Auto-Redirect: Automatically redirected to Settings page
- Configure or Skip:
- Configure FFMPEG path and split time, then click "Save Settings"
- Or click "Later" to skip and explore the app
- Never Again: Settings page won't auto-show after first configuration
Settings are stored in browser's localStorage:
{
ffmpegPath: string, // Path to FFMPEG executable
splitTime: string, // Default split time in seconds
configured: boolean // Whether user has configured settings
}pnpm dev- Start development serverpnpm build- Build for production (all platforms)pnpm build:win- Build for Windowspnpm build:mac- Build for macOSpnpm build:linux- Build for Linuxpnpm format- Format code with Prettierpnpm format:check- Check code formatting