feat(media): add Convex media archive with backfill and mixed-media library

components/canvas/__tests__/asset-browser-panel.test.tsx

@@ -0,0 +1,133 @@
+// @vitest-environment jsdom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { buildFreepikAssetDedupeKey } from "@/lib/media-archive";
+
+const mocks = vi.hoisted(() => ({
+  searchFreepik: vi.fn(async () => ({ results: [], totalPages: 1, currentPage: 1 })),
+  upsertMedia: vi.fn(async () => undefined),
+  getNode: vi.fn(() => ({ id: "node-1", data: {} })),
+  queueNodeDataUpdate: vi.fn(async () => undefined),
+  queueNodeResize: vi.fn(async () => undefined),
+}));
+
+vi.mock("convex/react", () => ({
+  useAction: () => mocks.searchFreepik,
+  useMutation: () => mocks.upsertMedia,
+}));
+
+vi.mock("@xyflow/react", () => ({
+  useReactFlow: () => ({
+    getNode: mocks.getNode,
+  }),
+}));
+
+vi.mock("@/components/canvas/canvas-sync-context", () => ({
+  useCanvasSync: () => ({
+    queueNodeDataUpdate: mocks.queueNodeDataUpdate,
+    queueNodeResize: mocks.queueNodeResize,
+    status: { isOffline: false },
+  }),
+}));
+
+import { AssetBrowserPanel } from "@/components/canvas/asset-browser-panel";
+
+(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("AssetBrowserPanel", () => {
+  let container: HTMLDivElement | null = null;
+  let root: Root | null = null;
+
+  beforeEach(() => {
+    mocks.searchFreepik.mockClear();
+    mocks.upsertMedia.mockClear();
+    mocks.getNode.mockClear();
+    mocks.queueNodeDataUpdate.mockClear();
+    mocks.queueNodeResize.mockClear();
+
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    if (root) {
+      await act(async () => {
+        root?.unmount();
+      });
+    }
+    container?.remove();
+    container = null;
+    root = null;
+  });
+
+  it("upserts selected Freepik asset into media archive", async () => {
+    const onClose = vi.fn();
+    const asset = {
+      id: 123,
+      title: "Forest texture",
+      assetType: "photo" as const,
+      previewUrl: "https://cdn.freepik.test/preview.jpg",
+      intrinsicWidth: 1600,
+      intrinsicHeight: 900,
+      sourceUrl: "https://www.freepik.com/asset/123",
+      license: "freemium" as const,
+      authorName: "Alice",
+      orientation: "landscape",
+    };
+
+    await act(async () => {
+      root?.render(
+        <AssetBrowserPanel
+          nodeId="node-1"
+          canvasId="canvas-1"
+          onClose={onClose}
+          initialState={{
+            term: "forest",
+            assetType: "photo",
+            results: [asset],
+            page: 1,
+            totalPages: 1,
+          }}
+        />,
+      );
+    });
+
+    const selectButton = document.querySelector('[aria-label="Select asset: Forest texture"]');
+    if (!(selectButton instanceof HTMLButtonElement)) {
+      throw new Error("Asset select button not found");
+    }
+
+    await act(async () => {
+      selectButton.click();
+    });
+
+    expect(mocks.upsertMedia).toHaveBeenCalledTimes(1);
+    expect(mocks.upsertMedia).toHaveBeenCalledWith({
+      input: {
+        kind: "asset",
+        source: "freepik-asset",
+        dedupeKey: buildFreepikAssetDedupeKey("photo", 123),
+        title: "Forest texture",
+        previewUrl: "https://cdn.freepik.test/preview.jpg",
+        originalUrl: "https://cdn.freepik.test/preview.jpg",
+        sourceUrl: "https://www.freepik.com/asset/123",
+        providerAssetId: "123",
+        width: 1600,
+        height: 900,
+        metadata: {
+          provider: "freepik",
+          assetId: 123,
+          assetType: "photo",
+          license: "freemium",
+          authorName: "Alice",
+          orientation: "landscape",
+        },
+        firstSourceCanvasId: "canvas-1",
+        firstSourceNodeId: "node-1",
+      },
+    });
+  });
+});

components/canvas/__tests__/use-canvas-drop.test.tsx

@@ -8,6 +8,10 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { Id } from "@/convex/_generated/dataModel";
 import { CANVAS_NODE_DND_MIME } from "@/lib/canvas-connection-policy";
 import { NODE_DEFAULTS } from "@/lib/canvas-utils";
+import {
+  emitDashboardSnapshotCacheInvalidationSignal,
+  invalidateDashboardSnapshotForLastSignedInUser,
+} from "@/lib/dashboard-snapshot-cache";
 import { toast } from "@/lib/toast";
 import { useCanvasDrop } from "@/components/canvas/use-canvas-drop";
 import { createCompressedImagePreview } from "@/components/canvas/canvas-media-utils";
@@ -28,6 +32,11 @@ vi.mock("@/components/canvas/canvas-media-utils", () => ({
   })),
 }));
 
+vi.mock("@/lib/dashboard-snapshot-cache", () => ({
+  invalidateDashboardSnapshotForLastSignedInUser: vi.fn(),
+  emitDashboardSnapshotCacheInvalidationSignal: vi.fn(),
+}));
+
 const latestHandlersRef: {
   current: ReturnType<typeof useCanvasDrop> | null;
 } = { current: null };
@@ -245,6 +254,62 @@ describe("useCanvasDrop", () => {
       width: 1600,
       height: 900,
     });
+    expect(invalidateDashboardSnapshotForLastSignedInUser).toHaveBeenCalledTimes(1);
+    expect(emitDashboardSnapshotCacheInvalidationSignal).toHaveBeenCalledTimes(1);
+  });
+
+  it("registers dropped image media when node creation fails", async () => {
+    const registerUploadedImageMedia = vi.fn(async () => ({ ok: true as const }));
+    const runCreateNodeOnlineOnly = vi.fn(async () => {
+      throw new Error("create failed");
+    });
+    const syncPendingMoveForClientRequest = vi.fn(async () => undefined);
+    const file = new File(["image-bytes"], "photo.png", { type: "image/png" });
+
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+
+    await act(async () => {
+      root?.render(
+        <HookHarness
+          registerUploadedImageMedia={registerUploadedImageMedia}
+          runCreateNodeOnlineOnly={runCreateNodeOnlineOnly}
+          syncPendingMoveForClientRequest={syncPendingMoveForClientRequest}
+        />,
+      );
+    });
+
+    await act(async () => {
+      await latestHandlersRef.current?.onDrop({
+        preventDefault: vi.fn(),
+        clientX: 240,
+        clientY: 180,
+        dataTransfer: {
+          getData: vi.fn(() => ""),
+          files: [file],
+        },
+      } as unknown as React.DragEvent);
+    });
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(syncPendingMoveForClientRequest).not.toHaveBeenCalled();
+    expect(registerUploadedImageMedia).toHaveBeenCalledWith({
+      canvasId: "canvas-1",
+      storageId: "storage-1",
+      filename: "photo.png",
+      mimeType: "image/png",
+      width: 1600,
+      height: 900,
+    });
+    expect(registerUploadedImageMedia).not.toHaveBeenCalledWith(
+      expect.objectContaining({ nodeId: expect.anything() }),
+    );
+    expect(invalidateDashboardSnapshotForLastSignedInUser).toHaveBeenCalledTimes(1);
+    expect(emitDashboardSnapshotCacheInvalidationSignal).toHaveBeenCalledTimes(1);
   });
 
   it("creates a node from a JSON payload drop", async () => {

components/canvas/__tests__/video-browser-panel.test.tsx

@@ -0,0 +1,182 @@
+// @vitest-environment jsdom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { buildPexelsVideoDedupeKey } from "@/lib/media-archive";
+
+vi.mock("react", async () => {
+  const actual = await vi.importActual<typeof import("react")>("react");
+  let promotedInitialFalseState = false;
+  return {
+    ...actual,
+    useState<T>(initial: T | (() => T)) {
+      if (!promotedInitialFalseState && initial === false) {
+        promotedInitialFalseState = true;
+        return actual.useState(true as T);
+      }
+      return actual.useState(initial);
+    },
+  };
+});
+
+const mocks = vi.hoisted(() => ({
+  searchVideos: vi.fn(async () => ({ videos: [], total_results: 0, per_page: 20 })),
+  popularVideos: vi.fn(async () => ({ videos: [], total_results: 0, per_page: 20 })),
+  upsertMedia: vi.fn(async () => undefined),
+  getNode: vi.fn(() => ({ id: "node-1", data: {} })),
+  queueNodeDataUpdate: vi.fn(async () => undefined),
+  queueNodeResize: vi.fn(async () => undefined),
+}));
+
+vi.mock("convex/react", () => ({
+  useAction: (() => {
+    let callIndex = 0;
+    return () => {
+      callIndex += 1;
+      return callIndex === 1 ? mocks.searchVideos : mocks.popularVideos;
+    };
+  })(),
+  useMutation: () => mocks.upsertMedia,
+}));
+
+vi.mock("@xyflow/react", () => ({
+  useReactFlow: () => ({
+    getNode: mocks.getNode,
+  }),
+}));
+
+vi.mock("@/components/canvas/canvas-sync-context", () => ({
+  useCanvasSync: () => ({
+    queueNodeDataUpdate: mocks.queueNodeDataUpdate,
+    queueNodeResize: mocks.queueNodeResize,
+    status: { isOffline: false },
+  }),
+}));
+
+import { VideoBrowserPanel } from "@/components/canvas/video-browser-panel";
+
+(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("VideoBrowserPanel", () => {
+  let container: HTMLDivElement | null = null;
+  let root: Root | null = null;
+
+  beforeEach(() => {
+    mocks.searchVideos.mockClear();
+    mocks.popularVideos.mockClear();
+    mocks.upsertMedia.mockClear();
+    mocks.getNode.mockClear();
+    mocks.queueNodeDataUpdate.mockClear();
+    mocks.queueNodeResize.mockClear();
+
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    if (root) {
+      await act(async () => {
+        root?.unmount();
+      });
+    }
+    container?.remove();
+    container = null;
+    root = null;
+  });
+
+  it("upserts selected Pexels video into media archive", async () => {
+    const onClose = vi.fn();
+    const video = {
+      id: 987,
+      width: 1920,
+      height: 1080,
+      url: "https://www.pexels.com/video/987/",
+      image: "https://images.pexels.test/987.jpeg",
+      duration: 42,
+      user: {
+        id: 777,
+        name: "Filmmaker",
+        url: "https://www.pexels.com/@filmmaker",
+      },
+      video_files: [
+        {
+          id: 501,
+          quality: "hd" as const,
+          file_type: "video/mp4",
+          width: 1920,
+          height: 1080,
+          fps: 30,
+          link: "https://player.pexels.test/987-hd.mp4",
+        },
+      ],
+    };
+
+    await act(async () => {
+      root?.render(
+        <VideoBrowserPanel
+          nodeId="node-1"
+          canvasId="canvas-1"
+          onClose={onClose}
+          initialState={{
+            term: "nature",
+            orientation: "",
+            durationFilter: "all",
+            results: [video],
+            page: 1,
+            totalPages: 1,
+          }}
+        />,
+      );
+    });
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 20));
+    });
+
+    const selectButton = Array.from(document.querySelectorAll("button")).find((button) =>
+      button.getAttribute("aria-label")?.includes("auswählen"),
+    );
+    if (!(selectButton instanceof HTMLButtonElement)) {
+      throw new Error("Video select button not found");
+    }
+
+    await act(async () => {
+      selectButton.click();
+    });
+
+    expect(mocks.upsertMedia).toHaveBeenCalledTimes(1);
+    expect(mocks.upsertMedia).toHaveBeenCalledWith({
+      input: {
+        kind: "video",
+        source: "pexels-video",
+        dedupeKey: buildPexelsVideoDedupeKey(987),
+        providerAssetId: "987",
+        originalUrl: "https://player.pexels.test/987-hd.mp4",
+        previewUrl: "https://images.pexels.test/987.jpeg",
+        sourceUrl: "https://www.pexels.com/video/987/",
+        width: 1920,
+        height: 1080,
+        durationSeconds: 42,
+        metadata: {
+          provider: "pexels",
+          videoId: 987,
+          userId: 777,
+          userName: "Filmmaker",
+          userUrl: "https://www.pexels.com/@filmmaker",
+          selectedFile: {
+            id: 501,
+            quality: "hd",
+            fileType: "video/mp4",
+            width: 1920,
+            height: 1080,
+            fps: 30,
+          },
+        },
+        firstSourceCanvasId: "canvas-1",
+        firstSourceNodeId: "node-1",
+      },
+    });
+  });
+});