yt2press

A tool to convert YouTube videos into VitePress web app with timestamped screenshots.

How to Use

Step 1: Prepare Your Video

Download or place a video file in the /docs/public directory. Several options are available for downloading YouTube videos:

YouTube Downloader Options

• yt-dlp - Command-line tool with extensive format/quality options
• Media Downloader - Desktop application with modern UI

Choose any method to download your video and save it to /docs/public directory.

Step 2: Create a Markdown File

Create a markdown file in /docs directory. The filename should match the video filename with [xxx] removed and spaces replaced with underscores.

For example:

• Video file: my video [abc123].mp4 → Markdown file: my_video.md
• Video file: presentation.webm → Markdown file: presentation.md
• Video file: my-video [xyz].mpeg → Markdown file: my-video.md

The markdown file content can be:

Option A: YAML Frontmatter (for auto-generating timestamps)

---
interval: 5
dedup: true
---

<!-- Markdown content here can be left empty -->

• interval: Interval in seconds to auto-generate timestamps
• dedup: (Optional) Set to true to remove similar screenshots (defaults to 0.005), or specify a custom threshold value

Option B: Manual Timestamps

<!-- Frontmatter is optional -->
<!-- Content with timestamps... -->

1:30
Mi habitasse hendrerit id tincidunt finibus eleifend dolor aliquet erat egestas.

2:45
Semper pretium donec laoreet convallis accumsan habitasse.

5:00
Velit euismod blandit proin arcu magna.

Timestamps should be in M:SS or MM:SS format on their own line. They will be converted to timestamped screenshot references.

Step 3: Start the Development Server

Run the following command in the project directory:

pnpm run dev

This starts the VitePress development server and WebSocket server for communication.

Step 4: Use the Downloader Interface

1. Open the VitePress website in your browser
2. Enter your video filename in the textbox (e.g. my video [abc123].mp4, presentation.webm, my-video [xyz].mpeg)
3. Press Enter or click Submit

The app will:

• Load the video
• Extract screenshots at specified timestamps
• Replace timestamp lines with embedded screenshot images
• Save the updated markdown file

Project Structure

docs/                          # VitePress documentation root
  .vitepress/
    theme/
      components/
        Downloader.vue        # Vue component for the downloader interface
        Video.vue             # Vue component to display videos and linked timestamps
  public/                      # Directory to put downloaded videos
  *.md                         # Markdown files with content
  [video-filename]/             # Screenshot folders (auto-generated)
    *.png                      # Timestamped screenshots
server.js                       # WebSocket server for handling downloads
group-similar.js               # Script for deduplicating similar screenshots

Dependencies

• Node.js and pnpm
• VitePress for web UI
• WebSocket for real-time communication between browser and server
• gray-matter for parsing YAML frontmatter
• Sharp for image processing (screenshot manipulation)