From fdd088b4bf5a28d88f40d0b6b6adc1a68a5922ab Mon Sep 17 00:00:00 2001
From: Josh Knapp <jknapp85@gmail.com>
Date: Sun, 12 Jul 2026 13:46:48 -0700
Subject: [PATCH] fix(builder): VideoBlock parses more YouTube/Vimeo URL shapes
 (D4)

Extend detectVideoType to handle youtube.com/shorts/ID, youtube.com/live/ID,
youtube.com/watch?...&v=ID (v not the first query param), and Vimeo
private-hash URLs (vimeo.com/ID/HASH -> ?h=HASH player param). Existing
shapes (youtu.be/ID, youtube.com/embed/ID, youtube.com/watch?v=ID,
vimeo.com/ID, direct files) keep working. The emitted embed src still
passes through safeUrl unchanged.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../media/VideoBlock.toHtml.test.ts           | 61 +++++++++++++++++++
 craft/src/components/media/VideoBlock.tsx     | 39 +++++++++---
 2 files changed, 93 insertions(+), 7 deletions(-)
 create mode 100644 craft/src/components/media/VideoBlock.toHtml.test.ts

diff --git a/craft/src/components/media/VideoBlock.toHtml.test.ts b/craft/src/components/media/VideoBlock.toHtml.test.ts
new file mode 100644
index 0000000..5158a46
--- /dev/null
+++ b/craft/src/components/media/VideoBlock.toHtml.test.ts
@@ -0,0 +1,61 @@
+import { describe, test, expect } from 'vitest';
+import { VideoBlock } from './VideoBlock';
+
+const toHtml = (VideoBlock as any).toHtml;
+
+function embedSrc(videoUrl: string): string {
+  const { html } = toHtml({ videoUrl }, '');
+  const m = html.match(/<iframe src="([^"]+)"/) || html.match(/<video src="([^"]+)"/);
+  return m ? m[1].replace(/&amp;/g, '&') : '';
+}
+
+describe('VideoBlock URL parsing (D4)', () => {
+  test('youtube.com/watch?v=ID (existing case) resolves to embed URL', () => {
+    expect(embedSrc('https://www.youtube.com/watch?v=dQw4w9WgXcQ')).toContain('youtube.com/embed/dQw4w9WgXcQ');
+  });
+
+  test('youtu.be/ID resolves to embed URL', () => {
+    expect(embedSrc('https://youtu.be/dQw4w9WgXcQ')).toContain('youtube.com/embed/dQw4w9WgXcQ');
+  });
+
+  test('youtube.com/embed/ID (existing case) resolves to embed URL', () => {
+    expect(embedSrc('https://www.youtube.com/embed/dQw4w9WgXcQ')).toContain('youtube.com/embed/dQw4w9WgXcQ');
+  });
+
+  test('youtube.com/shorts/ID resolves to embed URL', () => {
+    expect(embedSrc('https://www.youtube.com/shorts/dQw4w9WgXcQ')).toContain('youtube.com/embed/dQw4w9WgXcQ');
+  });
+
+  test('youtube.com/live/ID resolves to embed URL', () => {
+    expect(embedSrc('https://www.youtube.com/live/dQw4w9WgXcQ')).toContain('youtube.com/embed/dQw4w9WgXcQ');
+  });
+
+  test('youtube.com/watch?...&v=ID (v not first param) resolves to embed URL', () => {
+    expect(embedSrc('https://www.youtube.com/watch?list=PLxyz&v=dQw4w9WgXcQ&index=3')).toContain('youtube.com/embed/dQw4w9WgXcQ');
+  });
+
+  test('vimeo.com/ID (existing case) resolves to player URL', () => {
+    expect(embedSrc('https://vimeo.com/123456789')).toContain('https://player.vimeo.com/video/123456789');
+  });
+
+  test('vimeo.com/ID/HASH (private video) resolves to player URL with hash param', () => {
+    const src = embedSrc('https://vimeo.com/123456789/abcdef1234');
+    expect(src).toContain('https://player.vimeo.com/video/123456789');
+    expect(src).toContain('h=abcdef1234');
+  });
+
+  test('direct .mp4 file still works', () => {
+    const { html } = toHtml({ videoUrl: 'https://example.com/clip.mp4' }, '');
+    expect(html).toContain('<video src="https://example.com/clip.mp4"');
+  });
+
+  test('unrecognized URL yields no output (type "none")', () => {
+    const { html } = toHtml({ videoUrl: 'not-a-real-video-url' }, '');
+    expect(html).toBe('');
+  });
+
+  test('emitted src is safeUrl-wrapped: javascript: scheme never reaches output', () => {
+    const { html } = toHtml({ videoUrl: 'javascript:alert(1)' }, '');
+    expect(html).not.toContain('javascript:');
+  });
+});
diff --git a/craft/src/components/media/VideoBlock.tsx b/craft/src/components/media/VideoBlock.tsx
index d28fa87..3b6eec6 100644
--- a/craft/src/components/media/VideoBlock.tsx
+++ b/craft/src/components/media/VideoBlock.tsx
@@ -26,18 +26,43 @@ interface VideoBlockProps {
 
 /* ---------- URL detection ---------- */
 
+/**
+ * Extract a YouTube video ID from any of the URL shapes WHP users paste:
+ * youtu.be/ID, youtube.com/embed/ID, youtube.com/shorts/ID,
+ * youtube.com/live/ID (path-based), and youtube.com/watch?...v=ID where `v`
+ * may appear anywhere in the query string (not just as the first param).
+ */
+function extractYouTubeId(url: string): string | null {
+  const pathMatch = url.match(
+    /(?:youtube\.com\/(?:embed|shorts|live)\/|youtu\.be\/)([a-zA-Z0-9_-]+)/
+  );
+  if (pathMatch) return pathMatch[1];
+
+  const queryMatch = url.match(/youtube\.com\/watch\?([^\s#]+)/);
+  if (queryMatch) {
+    const v = new URLSearchParams(queryMatch[1]).get('v');
+    if (v) return v;
+  }
+
+  return null;
+}
+
 function detectVideoType(url: string): { type: VideoType; embedUrl: string } {
   if (!url) return { type: 'none', embedUrl: '' };
 
   // YouTube
-  const ytMatch = url.match(
-    /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]+)/
-  );
-  if (ytMatch) return { type: 'youtube', embedUrl: `https://www.youtube.com/embed/${ytMatch[1]}?rel=0` };
+  const ytId = extractYouTubeId(url);
+  if (ytId) return { type: 'youtube', embedUrl: `https://www.youtube.com/embed/${ytId}?rel=0` };
 
-  // Vimeo
-  const vmMatch = url.match(/vimeo\.com\/(\d+)/);
-  if (vmMatch) return { type: 'vimeo', embedUrl: `https://player.vimeo.com/video/${vmMatch[1]}` };
+  // Vimeo: vimeo.com/ID, or vimeo.com/ID/HASH for unlisted/private videos
+  // (the hash becomes the player's `h` query param).
+  const vmMatch = url.match(/vimeo\.com\/(\d+)(?:\/([a-zA-Z0-9]+))?/);
+  if (vmMatch) {
+    const embedUrl = vmMatch[2]
+      ? `https://player.vimeo.com/video/${vmMatch[1]}?h=${vmMatch[2]}`
+      : `https://player.vimeo.com/video/${vmMatch[1]}`;
+    return { type: 'vimeo', embedUrl };
+  }
 
   // Direct file
   if (url.match(/\.(mp4|webm|ogg|mov)(\?|$)/i)) return { type: 'file', embedUrl: url };