105 lines
3.1 KiB
Markdown
105 lines
3.1 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.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)**
|
|
```yaml
|
|
---
|
|
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**
|
|
```markdown
|
|
---
|
|
---
|
|
|
|
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:
|
|
|
|
```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. 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](https://github.com/lovell/sharp) for image processing (screenshot manipulation)
|