@drawnagency/primitives 0.1.71 → 0.1.73

package/src/components/sections/Video/VideoBlock.tsx

@@ -0,0 +1,149 @@
+import { cn } from "../../../lib/cn";
+import { embedUrl } from "../../../lib/video-url";
+import { useResolvedMedia } from "../../../hooks/useResolvedMedia";
+import { useMediaLibrary } from "../../shell/MediaLibraryContext";
+import { ImageDropZone } from "../../primitives/ImageDropZone";
+import { EditablePlainText } from "../../primitives/EditablePlainText";
+
+export type VideoSource =
+  | { type: "library"; ref: { imageId: string }; poster?: { imageId: string; src?: string } }
+  | { type: "external"; provider: "youtube" | "vimeo"; id: string; url: string; width: number; height: number };
+
+interface VideoBlockProps {
+  source: VideoSource;
+  caption?: string;
+  options: { playback?: "ambient" | "click"; showCaption?: boolean };
+  isEditMode?: boolean;
+  onSourceChange?: (source: VideoSource) => void;
+  onCaptionChange?: (caption: string) => void;
+}
+
+export function VideoBlock({ source, caption, options, isEditMode, onSourceChange, onCaptionChange }: VideoBlockProps) {
+  const mediaLibrary = useMediaLibrary();
+
+  // Hooks run unconditionally (rules of hooks): undefined ids resolve to nothing.
+  const imageId = source.type === "library" ? source.ref.imageId : undefined;
+  const posterId = source.type === "library" ? source.poster?.imageId : undefined;
+  const resolved = useResolvedMedia(imageId);
+  const posterOverride = useResolvedMedia(posterId);
+
+  const playback = options.playback ?? "click";
+  const editable = Boolean(isEditMode && onSourceChange);
+  const captionEditable = Boolean(isEditMode && onCaptionChange);
+  // Edit mode: show the (possibly empty) editor whenever the toggle is on, so
+  // the placeholder is typeable. View mode: only render a caption that exists
+  // (mirrors MediaBlock's showCaption gating — no empty figcaption for viewers).
+  const showCaptionBlock = Boolean(options.showCaption && (captionEditable || caption));
+
+  const replaceWithLibraryVideo = editable
+    ? (newImageId: string) => onSourceChange!({ type: "library", ref: { imageId: newImageId } })
+    : undefined;
+
+  let media: React.ReactNode;
+  let aspect: string | undefined;
+
+  if (source.type === "external") {
+    aspect = `${source.width} / ${source.height}`;
+    media = (
+      <iframe
+        src={embedUrl(source)}
+        title={caption || "Embedded video"}
+        loading="lazy"
+        allow="autoplay; fullscreen; picture-in-picture; encrypted-media"
+        allowFullScreen
+        className="absolute inset-0 h-full w-full border-0"
+      />
+    );
+  } else {
+    // The zero-JS viewer has no MediaLibraryContext, so useResolvedMedia() can't
+    // resolve the URL. The SSR pass (resolveManifestReferences) bakes src/poster/
+    // width/height onto the ref — it matches any object structurally by its
+    // `imageId` key, so content.source.ref gets these fields without code changes
+    // there. Forward them here so a real <video> renders (mirrors MediaBlock's
+    // `baked` pattern for the same reason).
+    const baked = source.ref as Record<string, unknown>;
+    const bakedSrc = typeof baked.src === "string" ? baked.src : undefined;
+    const bakedPoster = typeof baked.poster === "string" ? baked.poster : undefined;
+    const bakedWidth = typeof baked.width === "number" ? baked.width : undefined;
+    const bakedHeight = typeof baked.height === "number" ? baked.height : undefined;
+    // The poster OVERRIDE lives as a sibling `{ imageId }` object (not nested
+    // inside `ref`) so the SSR baker resolves it independently instead of
+    // colliding with the video's own auto-generated poster. `source.poster.src`
+    // is the baked field on the viewer path; `posterOverride.src` (below) is
+    // the live-resolved equivalent for the editor path.
+    const bakedPosterOverride = source.poster as Record<string, unknown> | undefined;
+    const bakedPosterOverrideSrc = typeof bakedPosterOverride?.src === "string" ? bakedPosterOverride.src : undefined;
+
+    const src = bakedSrc ?? resolved.src;
+    // An explicit poster-image-id override wins; otherwise fall back to the
+    // baked/auto-generated frame from the video asset itself.
+    const poster = bakedPosterOverrideSrc ?? posterOverride.src ?? bakedPoster ?? resolved.poster;
+    const width = bakedWidth ?? resolved.width;
+    const height = bakedHeight ?? resolved.height;
+    aspect = width && height ? `${width} / ${height}` : undefined;
+
+    const playbackProps =
+      playback === "ambient"
+        ? { autoPlay: true, muted: true, loop: true, playsInline: true }
+        : { controls: true, preload: "metadata" as const };
+
+    const videoEl = imageId ? (
+      <video
+        src={src}
+        poster={poster}
+        width={width}
+        height={height}
+        className="absolute inset-0 h-full w-full object-contain"
+        {...playbackProps}
+      />
+    ) : (
+      <div className="absolute inset-0 flex items-center justify-center bg-base-accent text-base-contrast-light/50">
+        <span className="text-sm">No video selected</span>
+      </div>
+    );
+
+    media = replaceWithLibraryVideo ? (
+      <ImageDropZone onImageSelected={replaceWithLibraryVideo} className="absolute inset-0 h-full w-full">
+        {videoEl}
+      </ImageDropZone>
+    ) : (
+      videoEl
+    );
+  }
+
+  const onSurfaceClick =
+    replaceWithLibraryVideo && mediaLibrary
+      ? () => mediaLibrary.openSelectModal((id) => replaceWithLibraryVideo(id))
+      : undefined;
+
+  return (
+    <figure className="w-full">
+      <div
+        data-testid="video-open-surface"
+        className={cn("relative w-full overflow-hidden", onSurfaceClick && "cursor-pointer")}
+        style={{ aspectRatio: aspect ?? "16 / 9" }}
+        onClick={onSurfaceClick}
+        onPointerDown={onSurfaceClick ? (e) => e.stopPropagation() : undefined}
+      >
+        {media}
+      </div>
+
+      {showCaptionBlock && (
+        <figcaption className="mt-2 min-h-[1em] text-sm text-base-contrast-light/70">
+          {captionEditable ? (
+            <EditablePlainText
+              tag="span"
+              value={caption ?? ""}
+              onChange={onCaptionChange!}
+              isEditMode={true}
+              placeholder="Caption"
+              className="block min-h-[1em]"
+            />
+          ) : (
+            caption
+          )}
+        </figcaption>
+      )}
+    </figure>
+  );
+}

package/src/components/sections/Video/index.tsx

@@ -0,0 +1,111 @@
+import { defineSection } from "../../../lib/registry";
+import { z } from "zod";
+import { Clapperboard } from "lucide-react";
+import { VideoBlock, type VideoSource } from "./VideoBlock";
+
+const LibrarySource = z.object({
+  type: z.literal("library"),
+  ref: z.object({
+    imageId: z.string().default("").describe("Media-library id of the video asset. Required for library videos."),
+  }),
+  // Kept as a SIBLING of `ref` (not nested inside it): the SSR ref-baker
+  // (resolveManifestReferences) matches objects structurally by a top-level
+  // `imageId` key and merges the resolved video's own poster onto that same
+  // object. Nesting the override inside `ref` would collide with that bake
+  // and get silently overwritten on the published viewer. As a sibling with
+  // its own `imageId`, it gets baked independently.
+  poster: z
+    .object({
+      imageId: z.string().describe("Media-library image id used as the poster frame instead of the auto-generated one."),
+    })
+    .optional()
+    .describe("Optional poster-image override for a library video."),
+});
+
+const ExternalSource = z.object({
+  type: z.literal("external"),
+  provider: z.enum(["youtube", "vimeo"]).describe("Hosting provider, derived from the pasted URL."),
+  id: z.string().describe("Provider video id parsed from the pasted URL."),
+  url: z.string().describe("The original video page URL as pasted."),
+  width: z.number().positive().describe("Native width used for the aspect-ratio box (from oEmbed; 16 when unknown)."),
+  height: z.number().positive().describe("Native height used for the aspect-ratio box (from oEmbed; 9 when unknown)."),
+});
+
+const schema = z.object({
+  type: z.literal("video"),
+  content: z.object({
+    source: z
+      .discriminatedUnion("type", [LibrarySource, ExternalSource])
+      .describe("Where the video comes from: a media-library upload or an external YouTube/Vimeo URL."),
+    caption: z.string().optional().describe("Optional caption rendered beneath the player when Show caption is on."),
+  }),
+  options: z
+    .object({
+      playback: z
+        .enum(["ambient", "click"])
+        .describe("'click' (default): poster + native controls with audio. 'ambient': autoplays muted in a loop with no controls.")
+        .optional(),
+      showCaption: z.boolean().describe("When true, render the caption beneath the player.").optional(),
+    })
+    .default({}),
+});
+
+export default defineSection({
+  type: "video",
+  label: "Video",
+  icon: <Clapperboard size={18} />,
+  schema,
+  authoringNote:
+    "A watchable video player — self-hosted from the media library or embedded from YouTube/Vimeo. " +
+    "Use playback 'click' for content viewers press play on (controls + audio) and 'ambient' for silent looping footage. " +
+    "For decorative loops inside grids prefer the Media block; large self-hosted files require the site's asset storage.",
+  component: ({ content, options, onChange }) => (
+    <VideoBlock
+      source={content.content.source as VideoSource}
+      caption={content.content.caption}
+      options={(options ?? {}) as { playback?: "ambient" | "click"; showCaption?: boolean }}
+      isEditMode={!!onChange}
+      onSourceChange={
+        onChange ? (source) => onChange({ ...content, content: { ...content.content, source } }) : undefined
+      }
+      onCaptionChange={
+        onChange
+          ? (caption) => onChange({ ...content, content: { ...content.content, caption: caption || undefined } })
+          : undefined
+      }
+    />
+  ),
+  defaults: () => ({
+    type: "video" as const,
+    content: { source: { type: "library" as const, ref: { imageId: "" } } },
+    options: {},
+  }),
+  getLabel: () => "Video",
+  getThumbnails: (content) =>
+    content.content.source.type === "library" && content.content.source.ref.imageId
+      ? [{ type: "image" as const, src: content.content.source.ref.imageId }]
+      : [],
+  settings: {
+    source: {
+      type: "video-source",
+      label: "Source",
+      target: "content",
+      default: { type: "library" as const, ref: { imageId: "" } },
+    },
+    playback: {
+      type: "select",
+      label: "Playback",
+      default: "click",
+      options: [
+        { label: "Click to play (controls + audio)", value: "click" },
+        { label: "Ambient loop (muted, no controls)", value: "ambient" },
+      ],
+    },
+    showCaption: { type: "checkbox", label: "Show caption", default: false },
+  },
+  inheritableSettings: ["playback", "showCaption"],
+  settingsTabs: [
+    { label: "Source", fields: ["source"] },
+    { label: "Display", fields: ["playback", "showCaption"] },
+  ],
+});

package/src/components/sections/core-sections.ts

@@ -3,6 +3,7 @@ import subHeading from "./SubHeading";
 import subSubHeading from "./SubSubHeading";
 import prose from "./Prose";
 import media from "./Media";
+import video from "./Video";
 import button from "./Button";
 import container from "./Container";
 import spacer from "./Spacer";
@@ -20,6 +21,7 @@ export const coreSectionDefs = [
   subSubHeading,
   prose,
   media,
+  video,
   button,
   container,
   spacer,

package/src/components/shared/Tabs.tsx

@@ -17,7 +17,7 @@ interface TabsProps {
   /**
    * When true, the tab-bar row uses -mx-6 to break out of the parent's px-6 padding
    * (e.g. EditorModal's content wrapper) and re-pads with px-6 so buttons stay aligned.
-   * The tab panel inherits the parent's padding unchanged.
+   * The tab panel also gets a top `pt-4` for spacing under the tab bar.
    * Use only when the parent container has px-6; leave false for noPadding contexts.
    */
   fullBleedTabBar?: boolean;
@@ -57,7 +57,7 @@ export function Tabs({ tabs, defaultTabId, activeTabId, onTabChange, fullBleedTa
           ))}
         </div>
       </div>
-      <div role="tabpanel">{activeTab?.content}</div>
+      <div role="tabpanel" className={cn(fullBleedTabBar && "pt-4")}>{activeTab?.content}</div>
     </div>
   );
 }

package/src/components/shared/VideoSourceField.tsx

@@ -0,0 +1,144 @@
+import { useState } from "react";
+import { FormLabel } from "./FormLabel";
+import { Button } from "./Button";
+import { useMediaLibrary } from "../shell/MediaLibraryContext";
+import { useResolvedMedia } from "../../hooks/useResolvedMedia";
+import type { VideoSource } from "../sections/Video/VideoBlock";
+import { cn } from "../../lib/cn";
+
+interface Props {
+  value: VideoSource | undefined;
+  onChange: (source: VideoSource) => void;
+}
+
+type Mode = "library" | "embed";
+
+export function VideoSourceField({ value, onChange }: Props) {
+  const mediaLibrary = useMediaLibrary();
+  const [mode, setMode] = useState<Mode>(value?.type === "external" ? "embed" : "library");
+  const [url, setUrl] = useState(value?.type === "external" ? value.url : "");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [fallback, setFallback] = useState(false);
+
+  const libraryImageId = value?.type === "library" ? value.ref.imageId : undefined;
+  const resolved = useResolvedMedia(libraryImageId);
+
+  async function submitEmbed() {
+    if (loading) return;
+    const trimmed = url.trim();
+    if (!trimmed) return;
+    setLoading(true);
+    setError(null);
+    setFallback(false);
+    try {
+      const res = await fetch(`/api/media/oembed?url=${encodeURIComponent(trimmed)}`);
+      const body = await res.json();
+      if (!res.ok) {
+        setError(body?.message ?? "Couldn't load that video.");
+        return;
+      }
+      onChange({
+        type: "external",
+        provider: body.provider,
+        id: body.id,
+        url: body.url,
+        width: body.width,
+        height: body.height,
+      });
+      if (body.fallback) {
+        setFallback(true);
+      } else {
+        setUrl("");
+      }
+    } catch {
+      setError("Couldn't reach the video service.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      <FormLabel>Source</FormLabel>
+      <div className="flex gap-2" role="tablist">
+        {(["library", "embed"] as const).map((m) => (
+          <button
+            key={m}
+            type="button"
+            role="tab"
+            aria-selected={mode === m}
+            onClick={() => setMode(m)}
+            className={cn(
+              "cursor-pointer rounded border px-3 py-1 text-sm",
+              mode === m ? "border-primary bg-primary text-primary-contrast" : "border-base-200 text-base-contrast",
+            )}
+          >
+            {m === "library" ? "Choose from library" : "Paste embed URL"}
+          </button>
+        ))}
+      </div>
+
+      {mode === "library" ? (
+        <div className="flex items-center gap-3">
+          {libraryImageId ? (
+            resolved.poster ? (
+              <img src={resolved.poster} alt="" className="h-12 w-20 rounded object-cover" />
+            ) : (
+              <span className="text-sm text-base-contrast-light">Video selected</span>
+            )
+          ) : (
+            <span className="text-sm text-base-contrast-light">No video selected</span>
+          )}
+          <Button
+            type="button"
+            variant="secondary"
+            size="sm"
+            onClick={() =>
+              mediaLibrary?.openSelectModal((id) => onChange({ type: "library", ref: { imageId: id } }))
+            }
+          >
+            Choose video
+          </Button>
+        </div>
+      ) : (
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center gap-2">
+            <input
+              type="text"
+              value={url}
+              onChange={(e) => {
+                setUrl(e.target.value);
+                setError(null);
+                setFallback(false);
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  void submitEmbed();
+                }
+              }}
+              placeholder="Paste a YouTube or Vimeo URL…"
+              className="flex-1 rounded border border-base-200 bg-base px-2 py-1 text-sm text-base-contrast placeholder:text-base-contrast-light focus:outline-none focus:ring-1 focus:ring-primary"
+            />
+            <Button
+              type="button"
+              variant="primary"
+              size="sm"
+              onClick={() => void submitEmbed()}
+              disabled={loading || !url.trim()}
+            >
+              {loading ? "Loading…" : "Use link"}
+            </Button>
+          </div>
+          {error ? <p className="text-xs text-red-600">{error}</p> : null}
+          {!error && fallback ? (
+            <p className="text-xs text-base-contrast-light/70">
+              Added — couldn't fetch exact dimensions, using 16:9.
+            </p>
+          ) : null}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/shell/EditorShell.tsx

@@ -153,6 +153,10 @@ export default function EditorShell({
   const [showChatbotConfig, setShowChatbotConfig] = useState(false);
   const [isRestoring, setIsRestoring] = useState(false);
   const [rejectedUploads, setRejectedUploads] = useState<{ name: string; reason: "size" | "type" }[]>([]);
+  // Surfaces useMediaPipeline's onUploadError (oversized/disallowed files,
+  // upload-intent failures, direct-to-bucket PUT failures) in the media
+  // library modal, alongside its existing client-side rejection banner.
+  const [uploadErrorMessage, setUploadErrorMessage] = useState<string | null>(null);
   const [activePageId, setActivePageId] = useState<string | null>(null);
   const [movingSectionId, setMovingSectionId] = useState<string | null>(null);
 
@@ -223,11 +227,12 @@ export default function EditorShell({
     setLocalChangesExist,
     setDirtySectionIds,
     markSectionDirty: persistence.markSectionDirty,
+    onUploadError: (message) => setUploadErrorMessage(message),
   });
 
   const buildStatus = useBuildStatus();
 
-  const { publishAction, publishFeedback, handleSave, handlePublish, handleSaveAndPublish } = useEditorPublish({
+  const { publishAction, publishFeedback, saveProgress, handleSave, handlePublish, handleSaveAndPublish } = useEditorPublish({
     flushNow: persistence.flushNow,
     cancelPendingFlush: persistence.cancelPendingFlush,
     isConfigDirty: persistence.isConfigDirty,
@@ -879,6 +884,7 @@ export default function EditorShell({
             localChangesExist={localChangesExist}
             publishAction={publishAction}
             publishFeedback={publishFeedback}
+            saveProgress={saveProgress}
             onSave={handleSave}
             onPublish={handlePublish}
             onSaveAndPublish={handleSaveAndPublish}
@@ -1032,6 +1038,9 @@ export default function EditorShell({
               referenceCountMap={mediaPipeline.referenceCountMap}
               localUrlMap={mediaPipeline.pendingLocalUrls}
               maxFileSize={siteConfig?.media.maxFileSize}
+              uploadProgress={mediaPipeline.uploadProgress}
+              uploadError={uploadErrorMessage}
+              onDismissUploadError={() => setUploadErrorMessage(null)}
             />
           </EditorModal>
           <EditorModal
@@ -1481,12 +1490,14 @@ function DismissButton({ onClick }: { onClick: () => void }) {
 function StatusText({
   publishAction,
   publishFeedback,
+  saveProgress,
   buildState,
   buildElapsed,
   onDismiss,
 }: {
   publishAction: "idle" | "saving" | "publishing";
   publishFeedback: string | null;
+  saveProgress: string | null;
   buildState: "idle" | "building" | "ready" | "error" | "fading";
   buildElapsed: number;
   onDismiss: () => void;
@@ -1494,7 +1505,7 @@ function StatusText({
   if (publishAction === "saving") {
     return (
       <span className="relative text-xs font-medium text-base-content/60">
-        Saving changes<LoadingEllipsis />
+        {saveProgress ?? <>Saving changes<LoadingEllipsis /></>}
       </span>
     );
   }
@@ -1542,6 +1553,7 @@ function EditorToolbar({
   localChangesExist,
   publishAction,
   publishFeedback,
+  saveProgress,
   onSave,
   onPublish,
   onSaveAndPublish,
@@ -1561,6 +1573,7 @@ function EditorToolbar({
   localChangesExist: boolean;
   publishAction: "idle" | "saving" | "publishing";
   publishFeedback: string | null;
+  saveProgress: string | null;
   onSave: () => void;
   onPublish: () => void;
   onSaveAndPublish: () => void;
@@ -1632,6 +1645,7 @@ function EditorToolbar({
               <StatusText
                 publishAction={publishAction}
                 publishFeedback={publishFeedback}
+                saveProgress={saveProgress}
                 buildState={buildState}
                 buildElapsed={buildElapsed}
                 onDismiss={onBuildDismiss}

package/src/components/shell/MediaLibraryModal.tsx

@@ -17,6 +17,13 @@ export interface MediaLibraryModalProps {
   referenceCountMap: Record<string, number>;
   localUrlMap?: Record<string, string>;
   maxFileSize?: number;
+  // Direct-to-bucket large-video upload progress, keyed by content hash (0..1).
+  uploadProgress?: Record<string, number>;
+  // Async upload failure from the pipeline (oversized/disallowed file,
+  // upload-intent error, direct-to-bucket PUT failure) — distinct from the
+  // client-side size pre-check below, which never reaches the pipeline.
+  uploadError?: string | null;
+  onDismissUploadError?: () => void;
 }
 
 type KindFilter = "all" | MediaKind;
@@ -97,6 +104,9 @@ export function MediaLibraryModal({
   referenceCountMap,
   localUrlMap = {},
   maxFileSize,
+  uploadProgress = {},
+  uploadError = null,
+  onDismissUploadError,
 }: MediaLibraryModalProps) {
   const [search, setSearch] = useState("");
   const [kindFilter, setKindFilter] = useState<KindFilter>("all");
@@ -111,7 +121,11 @@ export function MediaLibraryModal({
     const valid: File[] = [];
     const rejected: string[] = [];
     for (const file of files) {
-      if (file.size > maxFileSize) {
+      // MP4/WebM videos over the git-path cap route through the pipeline's
+      // direct-to-bucket upload instead of being rejected here — it applies
+      // its own (much larger) asset cap and reports its own errors.
+      const isBucketEligibleVideo = file.type === "video/mp4" || file.type === "video/webm";
+      if (file.size > maxFileSize && !isBucketEligibleVideo) {
         rejected.push(file.name);
       } else {
         valid.push(file);
@@ -161,10 +175,33 @@ export function MediaLibraryModal({
     setConfirmDelete(false);
   }
 
+  const uploadingHashes = Object.keys(uploadProgress);
+
   return (
     <div className="flex flex-col gap-4">
       <UploadZone onUpload={handleUpload} />
 
+      {/* Direct-to-bucket large-video upload progress */}
+      {uploadingHashes.length > 0 && (
+        <div className="space-y-1.5">
+          {uploadingHashes.map((hash) => {
+            const pct = Math.round((uploadProgress[hash] ?? 0) * 100);
+            return (
+              <div key={hash} className="flex items-center gap-2">
+                <span className="shrink-0 text-xs text-base-contrast-light">Uploading video…</span>
+                <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-base-200">
+                  <div
+                    className="h-full rounded-full bg-primary transition-[width]"
+                    style={{ width: `${pct}%` }}
+                  />
+                </div>
+                <span className="w-9 shrink-0 text-right text-xs text-base-contrast-light">{pct}%</span>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
       {/* Sticky toolbar + confirmation */}
       <div className="sticky top-[-16px] z-10 -mx-6 space-y-3 bg-base px-6 pb-3 pt-4">
         <div className="flex items-center gap-2">
@@ -235,6 +272,15 @@ export function MediaLibraryModal({
             onDismiss={() => setRejectedFiles([])}
           />
         )}
+
+        {/* Async upload failure (oversized/disallowed file, upload-intent error,
+            direct-to-bucket PUT failure) — distinct from the client-side check above. */}
+        {uploadError && (
+          <UploadRejectionAlert
+            message={uploadError}
+            onDismiss={() => onDismissUploadError?.()}
+          />
+        )}
       </div>
 
       {/* Grid */}