yt2press

A tool to convert YouTube videos into press-ready markdown documents 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.mp4 → Markdown file: presentation.md
• Video file: my-video [xyz].mp4 → Markdown file: my-video.md

The markdown file content can be:

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

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

Your content here...

• 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

---
---

Content with timestamps...

1:30

2:45

5:00

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. Find the downloader component
3. Enter your video filename in the textbox
4. Press Enter or 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/                      # Video storage directory
  *.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 static site generation
• WebSocket for real-time communication between browser and server
• gray-matter for parsing YAML frontmatter
• Sharp for image processing (screenshot manipulation)