@commonpub/layer 0.21.11 → 0.21.13

package/components/blocks/BlockEmbedView.vue

@@ -1,21 +1,7 @@
 <script setup lang="ts">
 const props = defineProps<{ content: Record<string, unknown> }>();
 
-// Translate common watch-page URLs into iframe-embeddable equivalents
-// so authors who paste a YouTube/Vimeo URL into the generic Embed block
-// don't end up with an iframe that the provider refuses to render
-// (X-Frame-Options / CSP frame-ancestors). Mirrors BlockVideoView.
-const embedUrl = computed(() => {
-  const raw = (props.content.url as string) || '';
-  if (!raw) return '';
-  const yt = raw.match(/(?:youtube\.com\/(?:watch\?v=|embed\/|v\/|shorts\/)|youtu\.be\/)([a-zA-Z0-9_-]{6,})/);
-  if (yt) return `https://www.youtube-nocookie.com/embed/${yt[1]}`;
-  const vimeo = raw.match(/vimeo\.com\/(\d+)/);
-  if (vimeo) return `https://player.vimeo.com/video/${vimeo[1]}`;
-  // Anything else: allow http(s) only (block javascript:, data:, etc.).
-  if (raw.startsWith('https://') || raw.startsWith('http://')) return raw;
-  return '';
-});
+const embedUrl = computed(() => toEmbedUrl(props.content.url as string));
 </script>
 
 <template>

package/components/blocks/BlockVideoView.vue

@@ -2,23 +2,7 @@
 const props = defineProps<{ content: Record<string, unknown> }>();
 
 const url = computed(() => (props.content.url as string) || '');
-
-const embedUrl = computed(() => {
-  const u = url.value;
-  if (!u) return '';
-
-  // YouTube — handle watch + youtu.be + /embed/ + /v/ + /shorts/.
-  const ytMatch = u.match(/(?:youtube\.com\/(?:watch\?v=|embed\/|v\/|shorts\/)|youtu\.be\/)([a-zA-Z0-9_-]{6,})/);
-  if (ytMatch) return `https://www.youtube-nocookie.com/embed/${ytMatch[1]}`;
-
-  // Vimeo — extract video ID and construct safe embed URL
-  const vimeoMatch = u.match(/vimeo\.com\/(\d+)/);
-  if (vimeoMatch) return `https://player.vimeo.com/video/${vimeoMatch[1]}`;
-
-  // Only allow http/https URLs for unknown platforms — block javascript:, data:, etc.
-  if (u.startsWith('https://') || u.startsWith('http://')) return u;
-  return '';
-});
+const embedUrl = computed(() => toEmbedUrl(url.value));
 
 const platform = computed(() => {
   const u = url.value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.21.11",
+  "version": "0.21.13",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -50,16 +50,16 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/auth": "0.6.0",
+    "@commonpub/config": "0.13.0",
     "@commonpub/docs": "0.6.3",
-    "@commonpub/protocol": "0.10.1",
-    "@commonpub/schema": "0.16.0",
+    "@commonpub/auth": "0.6.0",
     "@commonpub/learning": "0.5.2",
-    "@commonpub/ui": "0.8.5",
+    "@commonpub/schema": "0.16.0",
     "@commonpub/explainer": "0.7.15",
-    "@commonpub/config": "0.13.0",
+    "@commonpub/ui": "0.8.5",
+    "@commonpub/editor": "0.7.10",
     "@commonpub/server": "2.54.2",
-    "@commonpub/editor": "0.7.10"
+    "@commonpub/protocol": "0.10.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/utils/embedUrl.ts

@@ -0,0 +1,66 @@
+/**
+ * Translate a pasted video / embed URL into an iframe-embeddable form.
+ *
+ * Authors commonly paste the watch-page URL (which provider iframes
+ * refuse to render via X-Frame-Options). This helper detects YouTube
+ * and Vimeo URLs and rewrites them to the canonical embed form,
+ * preserving start-time (`?t=`) and Vimeo private-video hashes.
+ *
+ * Unknown providers pass through unchanged if they use http(s),
+ * otherwise return empty string (blocks `javascript:`, `data:` etc).
+ *
+ * Returns `''` when the input is empty or rejected.
+ */
+export function toEmbedUrl(raw: string | null | undefined): string {
+  if (!raw) return '';
+
+  // YouTube — watch / embed / v / shorts / youtu.be. The capture group is
+  // the 11-char video ID; we accept 6+ to tolerate future ID-length shifts.
+  const yt = raw.match(
+    /(?:youtube\.com\/(?:watch\?v=|embed\/|v\/|shorts\/)|youtu\.be\/)([a-zA-Z0-9_-]{6,})/,
+  );
+  if (yt) {
+    const id = yt[1];
+    const start = extractStartSeconds(raw);
+    return start > 0
+      ? `https://www.youtube-nocookie.com/embed/${id}?start=${start}`
+      : `https://www.youtube-nocookie.com/embed/${id}`;
+  }
+
+  // Vimeo — public (vimeo.com/ID) and private (vimeo.com/ID/HASH). The
+  // hash is required for unlisted/private videos; without it the iframe
+  // 403s.
+  const vimeo = raw.match(/vimeo\.com\/(\d+)(?:\/([a-zA-Z0-9]+))?/);
+  if (vimeo) {
+    const id = vimeo[1];
+    const hash = vimeo[2];
+    return hash
+      ? `https://player.vimeo.com/video/${id}?h=${hash}`
+      : `https://player.vimeo.com/video/${id}`;
+  }
+
+  if (raw.startsWith('https://') || raw.startsWith('http://')) return raw;
+  return '';
+}
+
+/**
+ * Extract a `t=` / `start=` query parameter from a URL and convert it
+ * to integer seconds. Supports YouTube's mixed formats:
+ *   - 120
+ *   - 120s
+ *   - 2m30s
+ *   - 1h30m45s
+ * Returns 0 if no start-time is present or the format is unrecognized.
+ */
+export function extractStartSeconds(raw: string): number {
+  const m = raw.match(/[?&#](?:t|start)=([^&#]+)/);
+  if (!m) return 0;
+  const t = m[1];
+  if (/^\d+$/.test(t)) return parseInt(t, 10);
+  const parts = t.match(/^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s?)?$/);
+  if (!parts) return 0;
+  const h = parseInt(parts[1] || '0', 10);
+  const mm = parseInt(parts[2] || '0', 10);
+  const s = parseInt(parts[3] || '0', 10);
+  return h * 3600 + mm * 60 + s;
+}