# 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](https://github.com/yt-dlp/yt-dlp)** - Command-line tool with extensive format/quality options
- **[Media Downloader](https://github.com/mhogomchungu/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)**

```markdown
---
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**

```markdown
<!-- 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:

```bash
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](https://github.com/lovell/sharp) for image processing (screenshot manipulation)