Initial OSS scaffold from Songs2VID (pre-strip)

components/WatermarkPreview.tsx

@@ -0,0 +1,417 @@
+"use client";
+
+import {
+  useEffect,
+  useMemo,
+  useState,
+  type CSSProperties,
+  type ChangeEvent,
+} from "react";
+import { getVideoAttributionText } from "@/lib/branding";
+import {
+  CURATED_FONTS,
+  googleFontsStylesheetUrl,
+  type CuratedFontKey,
+  type WatermarkFontKey,
+} from "@/lib/fonts";
+import {
+  WATERMARK_OFFSET_MAX,
+  WATERMARK_OFFSET_MIN,
+  WATERMARK_POSITIONS,
+  WATERMARK_TEXT_MAX,
+  type WatermarkMode,
+  type WatermarkPosition,
+  type WatermarkSettings,
+} from "@/lib/watermark";
+import { UpgradeProButton } from "./UpgradeProButton";
+
+type Props = {
+  enabled: boolean;
+  locked: boolean;
+  previewImageUrl: string | null;
+  value: WatermarkSettings;
+  onChange: (next: WatermarkSettings) => void;
+  onUploadLogo: (file: File) => Promise<string>;
+  onUploadFont: (file: File) => Promise<string>;
+  logoPreviewUrl?: string | null;
+};
+
+const POSITION_LABELS: Record<WatermarkPosition, string> = {
+  "top-left": "Top left",
+  "top-right": "Top right",
+  "bottom-left": "Bottom left",
+  "bottom-right": "Bottom right",
+  center: "Center",
+};
+
+const CUSTOM_PREVIEW_FAMILY = "S2VIDCustomWm";
+
+function previewStyle(
+  position: WatermarkPosition,
+  offsetX: number,
+  offsetY: number,
+): CSSProperties {
+  const base: CSSProperties = {
+    position: "absolute",
+    maxWidth: "32%",
+    pointerEvents: "none",
+  };
+  const ox = `${offsetX}px`;
+  const oy = `${offsetY}px`;
+  switch (position) {
+    case "top-left":
+      return { ...base, top: oy, left: ox };
+    case "top-right":
+      return { ...base, top: oy, right: ox };
+    case "bottom-left":
+      return { ...base, bottom: oy, left: ox };
+    case "center":
+      return {
+        ...base,
+        top: "50%",
+        left: "50%",
+        transform: `translate(calc(-50% + ${offsetX}px), calc(-50% + ${offsetY}px))`,
+      };
+    case "bottom-right":
+    default:
+      return { ...base, bottom: oy, right: ox };
+  }
+}
+
+function previewFontFamily(fontKey: WatermarkFontKey | undefined): string {
+  if (!fontKey || fontKey === "system") return "ui-sans-serif, system-ui, sans-serif";
+  if (fontKey === "custom") return `'${CUSTOM_PREVIEW_FAMILY}', sans-serif`;
+  const meta = CURATED_FONTS.find((f) => f.key === fontKey);
+  return meta ? `'${meta.cssFamily}', sans-serif` : "sans-serif";
+}
+
+export function WatermarkPreview({
+  enabled,
+  locked,
+  previewImageUrl,
+  value,
+  onChange,
+  onUploadLogo,
+  onUploadFont,
+  logoPreviewUrl,
+}: Props) {
+  const [logoUploading, setLogoUploading] = useState(false);
+  const [logoError, setLogoError] = useState<string | null>(null);
+  const [fontUploading, setFontUploading] = useState(false);
+  const [fontError, setFontError] = useState<string | null>(null);
+  const [customFontObjectUrl, setCustomFontObjectUrl] = useState<string | null>(null);
+
+  const overlay = useMemo(
+    () => previewStyle(value.position, value.offsetX, value.offsetY),
+    [value.position, value.offsetX, value.offsetY],
+  );
+
+  const textFontStyle = useMemo(
+    () => ({ fontFamily: previewFontFamily(value.fontKey) }),
+    [value.fontKey],
+  );
+
+  // Load curated Google Fonts for live canvas preview
+  useEffect(() => {
+    const id = "s2vid-watermark-google-fonts";
+    if (document.getElementById(id)) return;
+    const link = document.createElement("link");
+    link.id = id;
+    link.rel = "stylesheet";
+    link.href = googleFontsStylesheetUrl(CURATED_FONTS.map((f) => f.key));
+    document.head.appendChild(link);
+  }, []);
+
+  // @font-face for uploaded custom font (browser preview only)
+  useEffect(() => {
+    if (!customFontObjectUrl) return;
+    const styleId = "s2vid-watermark-custom-font";
+    let el = document.getElementById(styleId) as HTMLStyleElement | null;
+    if (!el) {
+      el = document.createElement("style");
+      el.id = styleId;
+      document.head.appendChild(el);
+    }
+    el.textContent = `
+@font-face {
+  font-family: '${CUSTOM_PREVIEW_FAMILY}';
+  src: url('${customFontObjectUrl}');
+  font-display: swap;
+}`;
+    return () => {
+      /* keep style until next custom font replaces it */
+    };
+  }, [customFontObjectUrl]);
+
+  useEffect(() => {
+    return () => {
+      if (customFontObjectUrl) URL.revokeObjectURL(customFontObjectUrl);
+    };
+  }, [customFontObjectUrl]);
+
+  function patch(partial: Partial<WatermarkSettings>) {
+    if (locked) return;
+    onChange({ ...value, ...partial });
+  }
+
+  async function handleLogo(e: ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    e.target.value = "";
+    if (!file || locked) return;
+    setLogoError(null);
+    setLogoUploading(true);
+    try {
+      const path = await onUploadLogo(file);
+      patch({ mode: "logo", logoPath: path });
+    } catch (err) {
+      setLogoError(err instanceof Error ? err.message : "Logo upload failed");
+    } finally {
+      setLogoUploading(false);
+    }
+  }
+
+  async function handleFont(e: ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    e.target.value = "";
+    if (!file || locked) return;
+    setFontError(null);
+    setFontUploading(true);
+    try {
+      const objectUrl = URL.createObjectURL(file);
+      if (customFontObjectUrl) URL.revokeObjectURL(customFontObjectUrl);
+      setCustomFontObjectUrl(objectUrl);
+      const path = await onUploadFont(file);
+      patch({ mode: "text", fontKey: "custom", fontPath: path });
+    } catch (err) {
+      setFontError(err instanceof Error ? err.message : "Font upload failed");
+    } finally {
+      setFontUploading(false);
+    }
+  }
+
+  function setFontKey(key: WatermarkFontKey) {
+    if (key === "custom") {
+      patch({ fontKey: "custom", fontPath: value.fontPath ?? null });
+      return;
+    }
+    patch({ fontKey: key, fontPath: null });
+  }
+
+  return (
+    <div
+      className={`relative rounded-lg border border-gray-700 bg-surface p-6 ${
+        locked ? "opacity-80" : ""
+      }`}
+    >
+      {locked && (
+        <div className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-3 rounded-lg bg-black/55 px-4 text-center backdrop-blur-[1px]">
+          <span className="rounded border border-accent/50 bg-accent/15 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-accent">
+            Pro
+          </span>
+          <p className="max-w-sm text-sm text-gray-200">
+            Custom branding, typography, logo overlay, and position controls are Pro features.
+          </p>
+          <UpgradeProButton
+            label="Unlock watermark studio"
+            className="rounded bg-accent px-4 py-2 text-sm font-medium text-white hover:bg-accent-hover"
+          />
+        </div>
+      )}
+
+      <div className="mb-4 flex flex-wrap items-center gap-2">
+        <h3 className="text-lg font-medium text-white">Watermark layout</h3>
+        <span className="rounded border border-accent/40 bg-accent/10 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-accent">
+          Pro / B2B
+        </span>
+      </div>
+
+      <div
+        className="relative mx-auto aspect-video w-full max-w-xl overflow-hidden rounded border border-gray-800 bg-black"
+        aria-hidden={locked}
+      >
+        {previewImageUrl ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img src={previewImageUrl} alt="" className="h-full w-full object-contain" />
+        ) : (
+          <div className="flex h-full items-center justify-center text-sm text-gray-600">
+            Upload a cover image to preview
+          </div>
+        )}
+
+        {enabled && value.mode !== "none" && (
+          <div style={overlay} className="rounded bg-black/40 px-2 py-1">
+            {value.mode === "logo" && logoPreviewUrl ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img src={logoPreviewUrl} alt="" className="max-h-16 w-auto object-contain" />
+            ) : (
+              <span
+                className="text-[11px] font-medium text-white/90 drop-shadow"
+                style={value.mode === "text" ? textFontStyle : undefined}
+              >
+                {value.mode === "text" && value.text?.trim()
+                  ? value.text.trim().slice(0, WATERMARK_TEXT_MAX)
+                  : getVideoAttributionText()}
+              </span>
+            )}
+          </div>
+        )}
+      </div>
+
+      <div className="mt-4 space-y-4" aria-disabled={locked}>
+        <div className="flex flex-wrap gap-2">
+          {(
+            [
+              ["none", "No watermark"],
+              ["default", "Songs2VID badge"],
+              ["text", "Custom text"],
+              ["logo", "PNG logo"],
+            ] as const
+          ).map(([mode, label]) => (
+            <button
+              key={mode}
+              type="button"
+              disabled={locked}
+              onClick={() => patch({ mode: mode as WatermarkMode })}
+              className={`rounded border px-3 py-1.5 text-xs font-medium transition-colors ${
+                value.mode === mode
+                  ? "border-accent bg-accent/15 text-accent"
+                  : "border-gray-700 text-gray-400 hover:border-gray-500"
+              } disabled:cursor-not-allowed`}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+
+        {value.mode === "text" && (
+          <>
+            <label className="block text-sm text-gray-400">
+              Watermark text
+              <input
+                type="text"
+                maxLength={WATERMARK_TEXT_MAX}
+                disabled={locked}
+                value={value.text ?? ""}
+                onChange={(e) => patch({ text: e.target.value })}
+                className="input-field mt-1"
+                placeholder="Your brand name"
+              />
+            </label>
+
+            <label className="block text-sm text-gray-400">
+              Font
+              <select
+                disabled={locked}
+                value={value.fontKey ?? "system"}
+                onChange={(e) => setFontKey(e.target.value as WatermarkFontKey)}
+                className="input-field mt-1"
+              >
+                <option value="system">System default</option>
+                {CURATED_FONTS.map((f) => (
+                  <option key={f.key} value={f.key} style={{ fontFamily: f.cssFamily }}>
+                    {f.label}
+                  </option>
+                ))}
+                <option value="custom">Custom upload (.ttf / .otf)</option>
+              </select>
+            </label>
+
+            {(value.fontKey === "custom" ||
+              (value.fontKey &&
+                value.fontKey !== "system" &&
+                CURATED_FONTS.some((f) => f.key === (value.fontKey as CuratedFontKey)))) && (
+              <p className="text-xs text-gray-500" style={textFontStyle}>
+                Preview: The quick brown fox jumps over the lazy dog
+              </p>
+            )}
+
+            {value.fontKey === "custom" && (
+              <div>
+                <label className="mb-1 block text-sm text-gray-400">
+                  Upload font (.ttf or .otf, max 10 MB)
+                </label>
+                <input
+                  type="file"
+                  accept=".ttf,.otf,font/ttf,font/otf"
+                  disabled={locked || fontUploading}
+                  onChange={(e) => void handleFont(e)}
+                  className="block w-full text-sm text-gray-300 file:mr-4 file:rounded file:border-0 file:bg-accent file:px-4 file:py-2 file:text-sm file:text-white"
+                />
+                {fontUploading && (
+                  <p className="mt-1 text-xs text-yellow-400">Uploading font…</p>
+                )}
+                {fontError && <p className="mt-1 text-xs text-red-400">{fontError}</p>}
+                {value.fontPath && !fontError && (
+                  <p className="mt-1 text-xs text-green-400">Custom font ready for render</p>
+                )}
+              </div>
+            )}
+          </>
+        )}
+
+        {value.mode === "logo" && (
+          <div>
+            <label className="mb-1 block text-sm text-gray-400">PNG logo</label>
+            <input
+              type="file"
+              accept="image/png,.png"
+              disabled={locked || logoUploading}
+              onChange={(e) => void handleLogo(e)}
+              className="block w-full text-sm text-gray-300 file:mr-4 file:rounded file:border-0 file:bg-accent file:px-4 file:py-2 file:text-sm file:text-white"
+            />
+            {logoUploading && <p className="mt-1 text-xs text-yellow-400">Uploading logo…</p>}
+            {logoError && <p className="mt-1 text-xs text-red-400">{logoError}</p>}
+          </div>
+        )}
+
+        <div>
+          <p className="mb-2 text-sm text-gray-400">Position</p>
+          <div className="grid grid-cols-3 gap-2 sm:grid-cols-5">
+            {WATERMARK_POSITIONS.map((pos) => (
+              <button
+                key={pos}
+                type="button"
+                disabled={locked || value.mode === "none"}
+                onClick={() => patch({ position: pos })}
+                className={`rounded border px-2 py-2 text-[11px] font-medium ${
+                  value.position === pos
+                    ? "border-accent bg-accent/15 text-accent"
+                    : "border-gray-700 text-gray-400"
+                } disabled:opacity-40`}
+              >
+                {POSITION_LABELS[pos]}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div className="grid gap-3 sm:grid-cols-2">
+          <label className="text-sm text-gray-400">
+            Offset X ({value.offsetX}px)
+            <input
+              type="range"
+              min={WATERMARK_OFFSET_MIN}
+              max={WATERMARK_OFFSET_MAX}
+              disabled={locked || value.mode === "none"}
+              value={value.offsetX}
+              onChange={(e) => patch({ offsetX: Number(e.target.value) })}
+              className="mt-1 w-full"
+            />
+          </label>
+          <label className="text-sm text-gray-400">
+            Offset Y ({value.offsetY}px)
+            <input
+              type="range"
+              min={WATERMARK_OFFSET_MIN}
+              max={WATERMARK_OFFSET_MAX}
+              disabled={locked || value.mode === "none"}
+              value={value.offsetY}
+              onChange={(e) => patch({ offsetY: Number(e.target.value) })}
+              className="mt-1 w-full"
+            />
+          </label>
+        </div>
+      </div>
+    </div>
+  );
+}