Skip to content

Commit be30002

Browse files
[2.22.1] Improve feature-video with GitHub embed learnings
- Add low-quality preview GIF creation (640px, 128 colors) - Use --s3-no-check-bucket flag for rclone uploads - Document GitHub limitation: external MP4s don't embed - Use clickable GIF linking to video for PR descriptions 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 84890f1 commit be30002

File tree

1 file changed

+25
-14
lines changed

1 file changed

+25
-14
lines changed

plugins/compound-engineering/commands/feature-video.md

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -193,16 +193,18 @@ ffmpeg -y -framerate 0.5 -pattern_type glob -i '.playwright-mcp/tmp/screenshots/
193193
-c:v libx264 -pix_fmt yuv420p -vf "scale=1280:-2" \
194194
tmp/videos/feature-demo.mp4
195195

196-
# Create GIF (larger file, but works everywhere)
197-
ffmpeg -y -framerate 0.7 -pattern_type glob -i '.playwright-mcp/tmp/screenshots/*.png' \
198-
-vf "scale=1280:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" \
199-
-loop 0 tmp/videos/feature-demo.gif
196+
# Create low-quality GIF for preview (small file, for GitHub embed)
197+
ffmpeg -y -framerate 0.5 -pattern_type glob -i '.playwright-mcp/tmp/screenshots/*.png' \
198+
-vf "scale=640:-1:flags=lanczos,split[s0][s1];[s0]palettegen=max_colors=128[p];[s1][p]paletteuse" \
199+
-loop 0 tmp/videos/feature-demo-preview.gif
200200

201201
# Copy screenshots to project folder for easy access
202202
cp -r .playwright-mcp/tmp/screenshots tmp/
203203
```
204204

205-
**Note:** The `-2` in scale ensures height is divisible by 2 (required for H.264).
205+
**Note:**
206+
- The `-2` in MP4 scale ensures height is divisible by 2 (required for H.264)
207+
- Preview GIF uses 640px width and 128 colors to keep file size small (~100-200KB)
206208

207209
</record_walkthrough>
208210

@@ -216,17 +218,19 @@ cp -r .playwright-mcp/tmp/screenshots tmp/
216218
# Check rclone is configured
217219
rclone listremotes
218220

219-
# Upload video and screenshots to cloud storage
220-
rclone copy tmp/videos/feature-demo.mp4 r2:your-bucket/pr-videos/ --progress
221-
rclone copy tmp/screenshots/ r2:your-bucket/pr-videos/screenshots/ --progress
221+
# Upload video, preview GIF, and screenshots to cloud storage
222+
# Use --s3-no-check-bucket to avoid permission errors
223+
rclone copy tmp/videos/ r2:kieran-claude/pr-videos/pr-[number]/ --s3-no-check-bucket --progress
224+
rclone copy tmp/screenshots/ r2:kieran-claude/pr-videos/pr-[number]/screenshots/ --s3-no-check-bucket --progress
222225

223226
# List uploaded files
224-
rclone ls r2:your-bucket/pr-videos/
227+
rclone ls r2:kieran-claude/pr-videos/pr-[number]/
225228
```
226229

227-
The public URL depends on your bucket configuration. For R2 with public access:
230+
Public URLs (R2 with public access):
228231
```
229-
https://pub-XXXXX.r2.dev/pr-videos/feature-demo.mp4
232+
Video: https://pub-4047722ebb1b4b09853f24d3b61467f1.r2.dev/pr-videos/pr-[number]/feature-demo.mp4
233+
Preview: https://pub-4047722ebb1b4b09853f24d3b61467f1.r2.dev/pr-videos/pr-[number]/feature-demo-preview.gif
230234
```
231235

232236
</upload_video>
@@ -244,12 +248,19 @@ gh pr view [number] --json body -q '.body'
244248

245249
If the PR already has a video section, replace it. Otherwise, append:
246250

251+
**IMPORTANT:** GitHub cannot embed external MP4s directly. Use a clickable GIF that links to the video:
252+
247253
```markdown
248-
## Demo Video
254+
## Demo
249255

250-
![Feature Demo]([video-url])
256+
[![Feature Demo]([preview-gif-url])]([video-mp4-url])
251257

252-
_Walkthrough recorded with Playwright_
258+
*Click to view full video*
259+
```
260+
261+
Example:
262+
```markdown
263+
[![Feature Demo](https://pub-4047722ebb1b4b09853f24d3b61467f1.r2.dev/pr-videos/pr-137/feature-demo-preview.gif)](https://pub-4047722ebb1b4b09853f24d3b61467f1.r2.dev/pr-videos/pr-137/feature-demo.mp4)
253264
```
254265

255266
**Update the PR:**

0 commit comments

Comments
 (0)