107 lines
3.4 KiB
Markdown
107 lines
3.4 KiB
Markdown
# 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](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/ # 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 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)
|