fix(registry): remove invalid media from caption components

packages/cli/src/registry/registryComponents.test.ts

@@ -0,0 +1,71 @@
+import { existsSync, readFileSync, readdirSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { lintHyperframeHtml } from "@hyperframes/lint";
+import { describe, expect, it } from "vitest";
+
+const componentsDir = resolve(
+  dirname(fileURLToPath(import.meta.url)),
+  "../../../../registry/components",
+);
+
+interface RegistryManifest {
+  files: Array<{ path: string; type: string }>;
+}
+
+async function invalidInstallableMedia(entryName: string): Promise<string[]> {
+  const itemDir = join(componentsDir, entryName);
+  const manifest = JSON.parse(
+    readFileSync(join(itemDir, "registry-item.json"), "utf8"),
+  ) as RegistryManifest;
+  const invalidMedia: string[] = [];
+
+  for (const file of manifest.files) {
+    if (file.type !== "hyperframes:snippet" || !file.path.endsWith(".html")) continue;
+    const result = await lintHyperframeHtml(readFileSync(join(itemDir, file.path), "utf8"), {
+      isSubComposition: true,
+    });
+    for (const finding of result.findings) {
+      if (finding.code !== "media_in_subcomposition" && finding.code !== "media_missing_src") {
+        continue;
+      }
+      invalidMedia.push(`${entryName}/${file.path}: ${finding.code}`);
+    }
+  }
+
+  return invalidMedia;
+}
+
+async function invalidDemoMedia(entryName: string): Promise<string[]> {
+  const demoPath = join(componentsDir, entryName, "demo.html");
+  if (!existsSync(demoPath)) return [];
+
+  const result = await lintHyperframeHtml(readFileSync(demoPath, "utf8"));
+  return result.findings
+    .filter((finding) => finding.code === "media_missing_src")
+    .map((finding) => `${entryName}/demo.html: ${finding.code}`);
+}
+
+describe("registry components", () => {
+  it("ships installable snippets without invalid nested media", async () => {
+    const invalidMedia: string[] = [];
+
+    for (const entry of readdirSync(componentsDir, { withFileTypes: true })) {
+      if (!entry.isDirectory()) continue;
+      invalidMedia.push(...(await invalidInstallableMedia(entry.name)));
+    }
+
+    expect(invalidMedia).toEqual([]);
+  });
+
+  it("ships demos without source-less media", async () => {
+    const invalidMedia: string[] = [];
+
+    for (const entry of readdirSync(componentsDir, { withFileTypes: true })) {
+      if (!entry.isDirectory()) continue;
+      invalidMedia.push(...(await invalidDemoMedia(entry.name)));
+    }
+
+    expect(invalidMedia).toEqual([]);
+  });
+});

registry/components/caption-clip-wipe/caption-clip-wipe.html

@@ -33,14 +33,6 @@
         overflow: hidden;
         background: transparent;
       }
-      #wp-video {
-        position: absolute;
-        inset: 0;
-        z-index: 0;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
       .wp-overlay {
         position: absolute;
         inset: 0;
@@ -92,15 +84,6 @@
       data-width="1920"
       data-height="1080"
     >
-      <video
-        id="wp-video"
-        muted
-        playsinline
-        data-start="0"
-        data-duration="8"
-        data-track-index="0"
-        data-has-audio="false"
-      ></video>
       <div class="wp-overlay"></div>
       <div id="wp-container"></div>
     </div>

registry/components/caption-clip-wipe/demo.html

@@ -32,14 +32,6 @@
         overflow: hidden;
         background: #0a0a0a;
       }
-      #wp-video {
-        position: absolute;
-        inset: 0;
-        z-index: 0;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
       .wp-overlay {
         position: absolute;
         inset: 0;
@@ -90,15 +82,6 @@
       data-width="1920"
       data-height="1080"
     >
-      <video
-        id="wp-video"
-        muted
-        playsinline
-        data-start="0"
-        data-duration="8"
-        data-track-index="0"
-        data-has-audio="false"
-      ></video>
       <div class="wp-overlay"></div>
       <div id="wp-container"></div>
     </div>

registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html

@@ -37,15 +37,6 @@
         background: transparent;
       }
 
-      #bg-video {
-        position: absolute;
-        inset: 0;
-        z-index: 1;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-
       .caption-layer {
         position: absolute;
         inset: 0;
@@ -132,17 +123,6 @@
       data-width="1920"
       data-height="1080"
     >
-      <video
-        id="bg-video"
-        muted
-        playsinline
-        preload="auto"
-        data-start="0"
-        data-duration="8"
-        data-track-index="0"
-        data-has-audio="false"
-      ></video>
-
       <div class="caption-layer" aria-hidden="true">
         <div id="caption-stage" class="safe-zone"></div>
       </div>

registry/components/caption-editorial-emphasis/demo.html

@@ -36,15 +36,6 @@
         background: #000;
       }
 
-      #bg-video {
-        position: absolute;
-        inset: 0;
-        z-index: 1;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-
       .caption-layer {
         position: absolute;
         inset: 0;
@@ -130,17 +121,6 @@
       data-width="1920"
       data-height="1080"
     >
-      <video
-        id="bg-video"
-        muted
-        playsinline
-        preload="auto"
-        data-start="0"
-        data-duration="8"
-        data-track-index="0"
-        data-has-audio="false"
-      ></video>
-
       <div class="caption-layer" aria-hidden="true">
         <div id="caption-stage" class="safe-zone"></div>
       </div>

registry/components/caption-emoji-pop/caption-emoji-pop.html

@@ -37,15 +37,6 @@
         background: transparent;
       }
 
-      #avatar-video {
-        position: absolute;
-        inset: 0;
-        z-index: 1;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-
       .caption-layer {
         position: absolute;
         inset: 0;
@@ -128,16 +119,6 @@
       data-width="1920"
       data-height="1080"
     >
-      <video
-        id="avatar-video"
-        muted
-        playsinline
-        data-start="0"
-        data-duration="8"
-        data-track-index="0"
-        data-has-audio="false"
-      ></video>
-
       <div class="caption-layer" aria-hidden="true">
         <div id="caption-stage" class="safe-zone"></div>
       </div>

registry/components/caption-emoji-pop/demo.html

@@ -36,15 +36,6 @@
         background: #000000;
       }
 
-      #avatar-video {
-        position: absolute;
-        inset: 0;
-        z-index: 1;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-
       .caption-layer {
         position: absolute;
         inset: 0;
@@ -126,16 +117,6 @@
       data-width="1920"
       data-height="1080"
     >
-      <video
-        id="avatar-video"
-        muted
-        playsinline
-        data-start="0"
-        data-duration="8"
-        data-track-index="0"
-        data-has-audio="false"
-      ></video>
-
       <div class="caption-layer" aria-hidden="true">
         <div id="caption-stage" class="safe-zone"></div>
       </div>

registry/components/caption-glitch-rgb/caption-glitch-rgb.html

@@ -33,14 +33,6 @@
         overflow: hidden;
         background: transparent;
       }
-      #gl-video {
-        position: absolute;
-        inset: 0;
-        z-index: 0;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
       .gl-overlay {
         position: absolute;
         inset: 0;
@@ -112,15 +104,6 @@
       data-width="1920"
       data-height="1080"
     >
-      <video
-        id="gl-video"
-        muted
-        playsinline
-        data-start="0"
-        data-duration="8"
-        data-track-index="0"
-        data-has-audio="false"
-      ></video>
       <div class="gl-overlay"></div>
       <div class="gl-scanlines"></div>
       <div id="gl-container"></div>

registry/components/caption-glitch-rgb/demo.html

@@ -32,14 +32,6 @@
         overflow: hidden;
         background: #0a0a0a;
       }
-      #gl-video {
-        position: absolute;
-        inset: 0;
-        z-index: 0;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
       .gl-overlay {
         position: absolute;
         inset: 0;
@@ -110,15 +102,6 @@
       data-width="1920"
       data-height="1080"
     >
-      <video
-        id="gl-video"
-        muted
-        playsinline
-        data-start="0"
-        data-duration="8"
-        data-track-index="0"
-        data-has-audio="false"
-      ></video>
       <div class="gl-overlay"></div>
       <div class="gl-scanlines"></div>
       <div id="gl-container"></div>

registry/components/caption-gradient-fill/caption-gradient-fill.html

@@ -80,15 +80,6 @@
       data-width="1920"
       data-height="1080"
     >
-      <video
-        id="gr-video"
-        muted
-        playsinline
-        data-start="0"
-        data-duration="8"
-        data-track-index="0"
-        data-has-audio="false"
-      ></video>
       <div id="gr-container"></div>
     </div>
 

registry/components/caption-gradient-fill/demo.html

@@ -78,15 +78,6 @@
       data-width="1920"
       data-height="1080"
     >
-      <video
-        id="gr-video"
-        muted
-        playsinline
-        data-start="0"
-        data-duration="8"
-        data-track-index="0"
-        data-has-audio="false"
-      ></video>
       <div id="gr-container"></div>
     </div>
 

registry/components/caption-kinetic-slam/caption-kinetic-slam.html

@@ -30,14 +30,6 @@
         overflow: hidden;
         background: transparent;
       }
-      #kt-video {
-        position: absolute;
-        inset: 0;
-        z-index: 0;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
       .kt-overlay {
         position: absolute;
         inset: 0;
@@ -79,15 +71,6 @@
       data-width="1920"
       data-height="1080"
     >
-      <video
-        id="kt-video"
-        muted
-        playsinline
-        data-start="0"
-        data-duration="8"
-        data-track-index="0"
-        data-has-audio="false"
-      ></video>
       <div class="kt-overlay"></div>
       <div id="kt-container"></div>
     </div>