Local Course Player

Offline-first desktop video player for course folders, built with Electron, React, and TypeScript.

Features

• Open a local course folder with a picker or by pasting its path
• Dedicated Home screen with browse/add, Continue Courses, and Previous Courses sections
• Home library categories with manual drag-and-drop course organization and optional sort modes
• Home settings panel for UI scale, density, card size, sidebar width, skip amount, autoplay, and motion preferences
• Auto-scan section folders and lesson files
• Supports video lessons plus local .html and .txt lesson files inside course sections
• Natural sorting for names like 001, 01, 01. and 1. so lessons stay in the expected order
• Udemy-style sidebar with collapsible sections, lesson counts, and progress
• Local video playback with a larger custom player, previous/next lesson, skip controls, speed, volume, fullscreen, and picture-in-picture
• Resume from the last watched lesson and timestamp each time the app reopens
• Manual and automatic lesson completion tracking
• Search and filter lessons by completion state
• Auto-detect .srt subtitle files and allow subtitle track selection
• Generate and cache thumbnails locally with ffmpeg
• Generate and persist course-cover thumbnails automatically from lesson videos when no image file is present
• Auto-prepare a cached H.264/AAC playable copy when the original file uses a Chromium-unfriendly codec or container
• Remove courses from the Home library and clear their saved progress/history without touching files on disk

Expected Folder Structure

My Course/
  Section 01/
    001 Introduction.mp4
    001 Introduction.en.srt
    002 Setup.mkv
  Section 02/
    01. Advanced Topic.webm
    1. Bonus.mov

Immediate subfolders under the selected course folder are treated as sections. Video and subtitle files are detected inside each section folder.

Setup

1. Install dependencies:

npm install

2. Start the desktop app in development:

npm run dev

3. Build the renderer:

npm run build

4. Build a distributable desktop app:

npm run dist

How It Works

Folder scanning

• The Electron main process reads the selected course folder directly from disk.
• Each immediate child directory becomes a course section.
• Files with .mp4, .mkv, .webm, and .mov extensions become lessons.
• Files with .html, .htm, and .txt extensions are also included as lessons and keep their natural order alongside video lessons.
• Sorting uses a natural comparator that prioritizes leading numbers and then falls back to numeric-aware text comparison, which keeps names like 001, 01, 01. and 1. in the right order.

Progress tracking

• Playback progress is saved locally in the Electron user data directory.
• The app stores the Home library, last opened course folder, last selected lesson, playback speed, subtitle selection, expanded sections, and lesson timestamps.
• Progress is updated every few seconds during playback, on pause, and when a lesson ends.
• Lessons are auto-marked complete when roughly 92% of the video has been watched, and they can also be marked manually.

Home library

• The app opens on a Home screen before the course player.
• Added courses are saved into a local library with thumbnail, counts, and continue-watching state.
• Continue Courses prioritizes entries with in-progress lessons.
• The main library can be organized into custom categories.
• Courses can be dragged into categories and reordered manually in Manual sort mode.
• Manual course organization is saved locally and restored on restart.
• Optional sort modes like recently opened, recently watched, progress, and title are available as temporary views on top of the saved manual order.
• Course cards and lesson rows use existing nearby image files when available, otherwise they generate and cache thumbnails from the video automatically.
• Deleting a course from Home removes it from the library and clears its local watch history, but does not delete anything from your computer.

Settings

• Settings are saved locally and loaded automatically each time the app starts.
• You can adjust UI scale and density to make the interface more compact or more spacious.
• Home card size, player sidebar width, skip seconds, autoplay-next, and reduced-motion preferences are also persisted.
• By default the app opens to Home on startup, but you can enable remembering the last screen from Settings.

Playback compatibility

• Lessons are checked before playback using ffmpeg output parsing.
• If the original file looks compatible with Chromium, it is played directly.
• If the file uses a risky container or codec, the app creates and caches a local MP4 fallback using H.264 video and AAC audio.
• Progress and resume data always stay attached to the original lesson path, so switching to a cached playable copy does not break history.

HTML lessons

• HTML files inside a section are treated as lessons and appear in the same ordered lesson list as videos.
• HTML lessons open inside the app in an interactive embedded viewer, so you can continue the course without leaving the application.
• They support previous/next navigation, manual completion, and last-opened lesson restore.

Text lessons

• .txt files such as exercises or notes are included in the lesson list and can be read inside the app.
• Text lessons support previous/next navigation, manual completion, and last-opened lesson restore.
• Course thumbnails are sourced only from video lessons, never from HTML or TXT files.

Subtitle detection

• .srt files in the same section folder are matched to a lesson by base filename.
• Files like 001 Intro.srt and 001 Intro.en.srt will be attached to 001 Intro.mp4.
• Subtitle files are converted to WebVTT in the renderer and attached to the HTML video element as subtitle tracks.

Notes

• Some files can still fail if the source stream is damaged or uses an unusual format that FFmpeg cannot decode cleanly.
• Thumbnail generation uses ffmpeg-static and caches generated images locally for smoother repeated browsing.