875 lines
28 KiB
TypeScript
875 lines
28 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
useEffect,
|
|
useMemo,
|
|
useState,
|
|
type CSSProperties,
|
|
type ChangeEvent,
|
|
} from "react";
|
|
import { getVideoAttributionText } from "@/lib/branding";
|
|
import {
|
|
CURATED_FONTS,
|
|
type CuratedFontKey,
|
|
type WatermarkFontKey,
|
|
} from "@/lib/fonts";
|
|
import {
|
|
BLUR_AMOUNT_MAX,
|
|
BLUR_AMOUNT_MIN,
|
|
BLUR_OPACITY_DEFAULT,
|
|
BLUR_OPACITY_MAX,
|
|
BLUR_OPACITY_MIN,
|
|
DEFAULT_LAYOUT,
|
|
LAYOUT_TEMPLATE_LABELS,
|
|
LAYOUT_TEMPLATES,
|
|
TEXT_OFFSET_MAX,
|
|
TEXT_OFFSET_MIN,
|
|
TEXT_PADDING_MAX,
|
|
TEXT_PADDING_MIN,
|
|
TITLE_ARTIST_GAP_MAX,
|
|
TITLE_ARTIST_GAP_MIN,
|
|
type LayoutSettings,
|
|
type LayoutTemplate,
|
|
} from "@/lib/layout";
|
|
import {
|
|
WATERMARK_WIDTH_FRACTION,
|
|
artistFontSizeForWidth,
|
|
curatedFontApiUrl,
|
|
previewFontFamilyCss,
|
|
scaleFontToPreview,
|
|
titleFontSizeForWidth,
|
|
watermarkFontSizeForWidth,
|
|
} from "@/lib/preview-typography";
|
|
import {
|
|
DEFAULT_WATERMARK,
|
|
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 = {
|
|
locked: boolean;
|
|
previewImageUrl: string | null;
|
|
/** On-video song title (art-track layouts). */
|
|
songTitle: string;
|
|
artist: string;
|
|
/** Encode width from selected resolution (e.g. 1280). */
|
|
encodeWidth?: number;
|
|
layout: LayoutSettings;
|
|
onLayoutChange: (next: LayoutSettings) => void;
|
|
watermark: WatermarkSettings;
|
|
onWatermarkChange: (next: WatermarkSettings) => void;
|
|
onUploadLogo: (file: File) => Promise<string>;
|
|
onUploadFont: (file: File) => Promise<string>;
|
|
logoPreviewUrl?: string | null;
|
|
};
|
|
|
|
const WM_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 previewFontFamily(fontKey: WatermarkFontKey | undefined): string {
|
|
return previewFontFamilyCss(fontKey);
|
|
}
|
|
|
|
function watermarkOverlayStyle(
|
|
position: WatermarkPosition,
|
|
offsetX: number,
|
|
offsetY: number,
|
|
sizedBox = false,
|
|
): CSSProperties {
|
|
const base: CSSProperties = {
|
|
position: "absolute",
|
|
maxWidth: `${WATERMARK_WIDTH_FRACTION * 100}%`,
|
|
pointerEvents: "none",
|
|
zIndex: 5,
|
|
...(sizedBox
|
|
? { width: `${WATERMARK_WIDTH_FRACTION * 100}%` }
|
|
: null),
|
|
};
|
|
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 MiniThumb({
|
|
template,
|
|
active,
|
|
onClick,
|
|
disabled,
|
|
}: {
|
|
template: LayoutTemplate | null;
|
|
active: boolean;
|
|
onClick: () => void;
|
|
disabled: boolean;
|
|
}) {
|
|
const isClassic = template === null;
|
|
return (
|
|
<button
|
|
type="button"
|
|
disabled={disabled}
|
|
onClick={onClick}
|
|
className={`overflow-hidden rounded border text-left transition-colors ${
|
|
active
|
|
? "border-accent bg-accent/10"
|
|
: "border-gray-700 bg-black/40 hover:border-gray-500"
|
|
} disabled:cursor-not-allowed disabled:opacity-50`}
|
|
>
|
|
<div className="relative aspect-video w-full overflow-hidden bg-gradient-to-br from-gray-800 to-gray-950 p-1">
|
|
{isClassic ? (
|
|
<div className="flex h-full items-center justify-center">
|
|
<div className="h-[70%] w-[45%] rounded-sm bg-gray-600" />
|
|
</div>
|
|
) : (
|
|
<div className="relative h-full w-full overflow-hidden bg-gray-700/50">
|
|
<div className="absolute inset-0 scale-110 bg-gray-600/40 blur-[3px]" />
|
|
{template === "COVER_LEFT_TEXT_RIGHT" && (
|
|
<>
|
|
<div className="absolute left-[6%] top-[18%] h-[64%] w-[38%] bg-gray-300" />
|
|
<div className="absolute right-[8%] top-[38%] h-1 w-[40%] rounded bg-white/80" />
|
|
<div className="absolute right-[8%] top-[52%] h-0.5 w-[28%] rounded bg-white/50" />
|
|
</>
|
|
)}
|
|
{template === "COVER_RIGHT_TEXT_LEFT" && (
|
|
<>
|
|
<div className="absolute right-[6%] top-[18%] h-[64%] w-[38%] bg-gray-300" />
|
|
<div className="absolute left-[8%] top-[38%] h-1 w-[40%] rounded bg-white/80" />
|
|
<div className="absolute left-[8%] top-[52%] h-0.5 w-[28%] rounded bg-white/50" />
|
|
</>
|
|
)}
|
|
{template === "COVER_TOP_TEXT_BOTTOM" && (
|
|
<>
|
|
<div className="absolute left-[8%] top-[6%] h-[52%] w-[84%] bg-gray-300" />
|
|
<div className="absolute left-[20%] bottom-[18%] h-1 w-[60%] rounded bg-white/80" />
|
|
<div className="absolute left-[28%] bottom-[8%] h-0.5 w-[44%] rounded bg-white/50" />
|
|
</>
|
|
)}
|
|
{template === "CENTERED_COMPACT" && (
|
|
<>
|
|
<div className="absolute left-[32%] top-[14%] h-[42%] w-[36%] bg-gray-300" />
|
|
<div className="absolute left-[28%] bottom-[22%] h-1 w-[44%] rounded bg-white/80" />
|
|
<div className="absolute left-[34%] bottom-[12%] h-0.5 w-[32%] rounded bg-white/50" />
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<p className="px-2 py-1.5 text-[10px] font-medium text-gray-300">
|
|
{isClassic ? "Classic letterbox" : LAYOUT_TEMPLATE_LABELS[template]}
|
|
</p>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
function previewCoverStyle(
|
|
template: LayoutTemplate,
|
|
padPct: number,
|
|
): CSSProperties {
|
|
const p = `${padPct}%`;
|
|
switch (template) {
|
|
case "COVER_LEFT_TEXT_RIGHT":
|
|
return {
|
|
position: "absolute",
|
|
left: p,
|
|
top: "50%",
|
|
transform: "translateY(-50%)",
|
|
width: "38%",
|
|
maxHeight: "72%",
|
|
objectFit: "contain",
|
|
};
|
|
case "COVER_RIGHT_TEXT_LEFT":
|
|
return {
|
|
position: "absolute",
|
|
right: p,
|
|
top: "50%",
|
|
transform: "translateY(-50%)",
|
|
width: "38%",
|
|
maxHeight: "72%",
|
|
objectFit: "contain",
|
|
};
|
|
case "COVER_TOP_TEXT_BOTTOM":
|
|
return {
|
|
position: "absolute",
|
|
left: "50%",
|
|
top: p,
|
|
transform: "translateX(-50%)",
|
|
width: `calc(100% - ${padPct * 2}%)`,
|
|
maxHeight: "56%",
|
|
objectFit: "contain",
|
|
};
|
|
case "CENTERED_COMPACT":
|
|
return {
|
|
position: "absolute",
|
|
left: "50%",
|
|
top: "16%",
|
|
transform: "translateX(-50%)",
|
|
width: "38%",
|
|
maxHeight: "38%",
|
|
objectFit: "contain",
|
|
};
|
|
}
|
|
}
|
|
|
|
function previewTextStyle(
|
|
template: LayoutTemplate,
|
|
padPct: number,
|
|
textOffsetX: number,
|
|
textOffsetY: number,
|
|
titleArtistGap: number,
|
|
): CSSProperties {
|
|
const p = `${padPct}%`;
|
|
const shift = {
|
|
transform: undefined as string | undefined,
|
|
};
|
|
|
|
const baseGap = { display: "flex", flexDirection: "column" as const, gap: `${titleArtistGap}px` };
|
|
|
|
switch (template) {
|
|
case "COVER_LEFT_TEXT_RIGHT":
|
|
return {
|
|
...baseGap,
|
|
position: "absolute",
|
|
left: `calc(48% + ${textOffsetX}px)`,
|
|
right: p,
|
|
top: "50%",
|
|
transform: `translateY(calc(-50% + ${textOffsetY}px))`,
|
|
textAlign: "left",
|
|
};
|
|
case "COVER_RIGHT_TEXT_LEFT":
|
|
return {
|
|
...baseGap,
|
|
position: "absolute",
|
|
left: p,
|
|
right: `calc(48% - ${textOffsetX}px)`,
|
|
top: "50%",
|
|
transform: `translateY(calc(-50% + ${textOffsetY}px))`,
|
|
textAlign: "left",
|
|
};
|
|
case "COVER_TOP_TEXT_BOTTOM":
|
|
return {
|
|
...baseGap,
|
|
position: "absolute",
|
|
left: p,
|
|
right: p,
|
|
bottom: `calc(10% - ${textOffsetY}px)`,
|
|
transform: textOffsetX ? `translateX(${textOffsetX}px)` : undefined,
|
|
textAlign: "center",
|
|
alignItems: "center",
|
|
};
|
|
case "CENTERED_COMPACT":
|
|
return {
|
|
...baseGap,
|
|
position: "absolute",
|
|
left: p,
|
|
right: p,
|
|
top: `calc(58% + ${textOffsetY}px)`,
|
|
transform: textOffsetX ? `translateX(${textOffsetX}px)` : undefined,
|
|
textAlign: "center",
|
|
alignItems: "center",
|
|
};
|
|
}
|
|
void shift;
|
|
}
|
|
|
|
export function LayoutStudio({
|
|
locked,
|
|
previewImageUrl,
|
|
songTitle,
|
|
artist,
|
|
encodeWidth = 1280,
|
|
layout,
|
|
onLayoutChange,
|
|
watermark,
|
|
onWatermarkChange,
|
|
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);
|
|
|
|
// Always coalesce HMR / older session state may omit newly added fields
|
|
const L: LayoutSettings = {
|
|
...DEFAULT_LAYOUT,
|
|
...layout,
|
|
blurAmount: layout.blurAmount ?? DEFAULT_LAYOUT.blurAmount,
|
|
blurOpacity: layout.blurOpacity ?? BLUR_OPACITY_DEFAULT,
|
|
textPadding: layout.textPadding ?? DEFAULT_LAYOUT.textPadding,
|
|
titleArtistGap: layout.titleArtistGap ?? DEFAULT_LAYOUT.titleArtistGap,
|
|
textOffsetX: layout.textOffsetX ?? DEFAULT_LAYOUT.textOffsetX,
|
|
textOffsetY: layout.textOffsetY ?? DEFAULT_LAYOUT.textOffsetY,
|
|
};
|
|
const W: WatermarkSettings = {
|
|
...DEFAULT_WATERMARK,
|
|
...watermark,
|
|
text: watermark.text ?? "",
|
|
offsetX: watermark.offsetX ?? DEFAULT_WATERMARK.offsetX,
|
|
offsetY: watermark.offsetY ?? DEFAULT_WATERMARK.offsetY,
|
|
fontKey: watermark.fontKey ?? "system",
|
|
};
|
|
|
|
const blurPx = useMemo(
|
|
() => Math.round((L.blurAmount / 100) * 28),
|
|
[L.blurAmount],
|
|
);
|
|
const padPct = useMemo(
|
|
() =>
|
|
3 +
|
|
((L.textPadding - TEXT_PADDING_MIN) / (TEXT_PADDING_MAX - TEXT_PADDING_MIN)) * 5,
|
|
[L.textPadding],
|
|
);
|
|
|
|
const wmOverlay = useMemo(
|
|
() =>
|
|
watermarkOverlayStyle(
|
|
W.position,
|
|
W.offsetX,
|
|
W.offsetY,
|
|
W.mode === "default" || W.mode === "logo",
|
|
),
|
|
[W.position, W.offsetX, W.offsetY, W.mode],
|
|
);
|
|
|
|
const textFontStyle = useMemo(
|
|
() => ({ fontFamily: previewFontFamily(W.fontKey) }),
|
|
[W.fontKey],
|
|
);
|
|
|
|
const titlePreviewPx = useMemo(
|
|
() => scaleFontToPreview(titleFontSizeForWidth(encodeWidth), encodeWidth),
|
|
[encodeWidth],
|
|
);
|
|
const artistPreviewPx = useMemo(
|
|
() => scaleFontToPreview(artistFontSizeForWidth(encodeWidth), encodeWidth),
|
|
[encodeWidth],
|
|
);
|
|
const wmTextPreviewPx = useMemo(
|
|
() => scaleFontToPreview(watermarkFontSizeForWidth(encodeWidth), encodeWidth),
|
|
[encodeWidth],
|
|
);
|
|
|
|
useEffect(() => {
|
|
const styleId = "s2vid-preview-curated-fonts";
|
|
let el = document.getElementById(styleId) as HTMLStyleElement | null;
|
|
if (!el) {
|
|
el = document.createElement("style");
|
|
el.id = styleId;
|
|
document.head.appendChild(el);
|
|
}
|
|
el.textContent = CURATED_FONTS.map(
|
|
(f) => `@font-face {
|
|
font-family: 'S2VIDPreview-${f.key}';
|
|
src: url('${curatedFontApiUrl(f.key)}') format('truetype');
|
|
font-display: swap;
|
|
}`,
|
|
).join("\n");
|
|
}, []);
|
|
|
|
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;
|
|
}`;
|
|
}, [customFontObjectUrl]);
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
if (customFontObjectUrl) URL.revokeObjectURL(customFontObjectUrl);
|
|
};
|
|
}, [customFontObjectUrl]);
|
|
|
|
function patchLayout(partial: Partial<LayoutSettings>) {
|
|
if (locked) return;
|
|
onLayoutChange({ ...DEFAULT_LAYOUT, ...layout, ...partial });
|
|
}
|
|
|
|
function patchWm(partial: Partial<WatermarkSettings>) {
|
|
if (locked) return;
|
|
onWatermarkChange({ ...DEFAULT_WATERMARK, ...watermark, ...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);
|
|
patchWm({ 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);
|
|
patchWm({ 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") {
|
|
patchWm({ fontKey: "custom", fontPath: watermark.fontPath ?? null });
|
|
return;
|
|
}
|
|
patchWm({ fontKey: key, fontPath: null });
|
|
}
|
|
|
|
const artTrack = Boolean(L.template);
|
|
|
|
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">
|
|
Art-track layouts, blur backgrounds, typography, and watermark studio are Pro features.
|
|
</p>
|
|
<UpgradeProButton
|
|
label="Unlock video layout 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">Video 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
|
|
</span>
|
|
</div>
|
|
|
|
{/* Single live preview: art-track + watermark */}
|
|
<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 ? (
|
|
<>
|
|
{artTrack ? (
|
|
<>
|
|
<div className="absolute inset-0 bg-black" />
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={previewImageUrl}
|
|
alt=""
|
|
className="absolute inset-0 h-full w-full object-cover"
|
|
style={{
|
|
filter: L.blurAmount > 0 ? `blur(${blurPx}px)` : undefined,
|
|
transform: "scale(1.15)",
|
|
opacity: L.blurOpacity / 100,
|
|
}}
|
|
/>
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={previewImageUrl}
|
|
alt=""
|
|
style={previewCoverStyle(L.template!, padPct)}
|
|
className="pointer-events-none"
|
|
/>
|
|
<div
|
|
style={previewTextStyle(
|
|
L.template!,
|
|
padPct,
|
|
L.textOffsetX,
|
|
L.textOffsetY,
|
|
L.titleArtistGap,
|
|
)}
|
|
>
|
|
<p
|
|
className="max-w-full truncate font-semibold text-white drop-shadow"
|
|
style={{
|
|
...textFontStyle,
|
|
fontSize: `${titlePreviewPx}px`,
|
|
lineHeight: 1.15,
|
|
}}
|
|
>
|
|
{songTitle.trim() || "Track title"}
|
|
</p>
|
|
<p
|
|
className="max-w-full truncate text-white/75 drop-shadow"
|
|
style={{
|
|
...textFontStyle,
|
|
fontSize: `${artistPreviewPx}px`,
|
|
lineHeight: 1.15,
|
|
}}
|
|
>
|
|
{artist.trim() || "Artist"}
|
|
</p>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="absolute inset-0 flex items-center justify-center bg-black">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={previewImageUrl}
|
|
alt=""
|
|
className="max-h-full max-w-full object-contain"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{W.mode !== "none" && (
|
|
<div style={wmOverlay}>
|
|
{W.mode === "default" ? (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src="/api/branding/watermark"
|
|
alt=""
|
|
className="h-auto w-full object-contain"
|
|
/>
|
|
) : W.mode === "logo" && logoPreviewUrl ? (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={logoPreviewUrl}
|
|
alt=""
|
|
className="h-auto w-full object-contain"
|
|
/>
|
|
) : W.mode === "text" ? (
|
|
<span
|
|
className="font-medium text-white/90 drop-shadow"
|
|
style={{
|
|
...textFontStyle,
|
|
fontSize: `${wmTextPreviewPx}px`,
|
|
}}
|
|
>
|
|
{W.text?.trim()
|
|
? W.text.trim().slice(0, WATERMARK_TEXT_MAX)
|
|
: getVideoAttributionText()}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<div className="flex h-full items-center justify-center text-sm text-gray-600">
|
|
Upload a cover image to preview
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Art-track templates */}
|
|
<p className="mb-2 mt-5 text-sm font-medium text-gray-300">Composition</p>
|
|
<div className="grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-5">
|
|
<MiniThumb
|
|
template={null}
|
|
active={L.template === null}
|
|
disabled={locked}
|
|
onClick={() => patchLayout({ template: null })}
|
|
/>
|
|
{LAYOUT_TEMPLATES.map((t) => (
|
|
<MiniThumb
|
|
key={t}
|
|
template={t}
|
|
active={L.template === t}
|
|
disabled={locked}
|
|
onClick={() => patchLayout({ template: t })}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-4 grid gap-3 sm:grid-cols-2">
|
|
<label className="text-sm text-gray-400">
|
|
Background blur ({L.blurAmount}%)
|
|
<input
|
|
type="range"
|
|
min={BLUR_AMOUNT_MIN}
|
|
max={BLUR_AMOUNT_MAX}
|
|
disabled={locked || !artTrack}
|
|
value={L.blurAmount}
|
|
onChange={(e) => patchLayout({ blurAmount: Number(e.target.value) })}
|
|
className="mt-1 w-full disabled:opacity-40"
|
|
/>
|
|
</label>
|
|
<label className="text-sm text-gray-400">
|
|
Background opacity ({L.blurOpacity}%)
|
|
<input
|
|
type="range"
|
|
min={BLUR_OPACITY_MIN}
|
|
max={BLUR_OPACITY_MAX}
|
|
disabled={locked || !artTrack}
|
|
value={L.blurOpacity}
|
|
onChange={(e) => patchLayout({ blurOpacity: Number(e.target.value) })}
|
|
className="mt-1 w-full disabled:opacity-40"
|
|
/>
|
|
</label>
|
|
<label className="text-sm text-gray-400">
|
|
Cover / edge padding ({L.textPadding}px)
|
|
<input
|
|
type="range"
|
|
min={TEXT_PADDING_MIN}
|
|
max={TEXT_PADDING_MAX}
|
|
disabled={locked || !artTrack}
|
|
value={L.textPadding}
|
|
onChange={(e) => patchLayout({ textPadding: Number(e.target.value) })}
|
|
className="mt-1 w-full disabled:opacity-40"
|
|
/>
|
|
</label>
|
|
<label className="text-sm text-gray-400">
|
|
Title ↔ artist gap ({L.titleArtistGap}px)
|
|
<input
|
|
type="range"
|
|
min={TITLE_ARTIST_GAP_MIN}
|
|
max={TITLE_ARTIST_GAP_MAX}
|
|
disabled={locked || !artTrack}
|
|
value={L.titleArtistGap}
|
|
onChange={(e) =>
|
|
patchLayout({ titleArtistGap: Number(e.target.value) })
|
|
}
|
|
className="mt-1 w-full disabled:opacity-40"
|
|
/>
|
|
</label>
|
|
<label className="text-sm text-gray-400">
|
|
Text horizontal ({L.textOffsetX}px)
|
|
<input
|
|
type="range"
|
|
min={TEXT_OFFSET_MIN}
|
|
max={TEXT_OFFSET_MAX}
|
|
disabled={locked || !artTrack}
|
|
value={L.textOffsetX}
|
|
onChange={(e) => patchLayout({ textOffsetX: Number(e.target.value) })}
|
|
className="mt-1 w-full disabled:opacity-40"
|
|
/>
|
|
</label>
|
|
<label className="text-sm text-gray-400 sm:col-span-2">
|
|
Text vertical ({L.textOffsetY}px)
|
|
<input
|
|
type="range"
|
|
min={TEXT_OFFSET_MIN}
|
|
max={TEXT_OFFSET_MAX}
|
|
disabled={locked || !artTrack}
|
|
value={L.textOffsetY}
|
|
onChange={(e) => patchLayout({ textOffsetY: Number(e.target.value) })}
|
|
className="mt-1 w-full disabled:opacity-40"
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
{/* Typography (matches FFmpeg art-track + watermark text fonts) */}
|
|
<div className="mt-6 border-t border-gray-800 pt-5">
|
|
<p className="mb-3 text-sm font-medium text-gray-300">Typography</p>
|
|
<label className="block text-sm text-gray-400">
|
|
Font
|
|
<select
|
|
disabled={locked}
|
|
value={W.fontKey ?? "system"}
|
|
onChange={(e) => setFontKey(e.target.value as WatermarkFontKey)}
|
|
className="input-field mt-1"
|
|
>
|
|
<option value="system">Arial (system default)</option>
|
|
{CURATED_FONTS.map((f) => (
|
|
<option key={f.key} value={f.key}>
|
|
{f.label}
|
|
</option>
|
|
))}
|
|
<option value="custom">Custom upload (.ttf / .otf)</option>
|
|
</select>
|
|
</label>
|
|
{W.fontKey === "custom" && (
|
|
<div className="mt-3">
|
|
<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>}
|
|
</div>
|
|
)}
|
|
{(W.fontKey === "custom" ||
|
|
(W.fontKey &&
|
|
W.fontKey !== "system" &&
|
|
CURATED_FONTS.some((f) => f.key === (W.fontKey as CuratedFontKey)))) && (
|
|
<p
|
|
className="mt-2 text-xs text-gray-500"
|
|
style={{ ...textFontStyle, fontSize: `${scaleFontToPreview(16, encodeWidth)}px` }}
|
|
>
|
|
Preview: The quick brown fox jumps over the lazy dog
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Watermark section */}
|
|
<div className="mt-6 border-t border-gray-800 pt-5">
|
|
<p className="mb-3 text-sm font-medium text-gray-300">Watermark</p>
|
|
<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={() => patchWm({ mode: mode as WatermarkMode })}
|
|
className={`rounded border px-3 py-1.5 text-xs font-medium transition-colors ${
|
|
W.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>
|
|
|
|
{W.mode === "text" && (
|
|
<div className="mt-3 space-y-3">
|
|
<label className="block text-sm text-gray-400">
|
|
Watermark text
|
|
<input
|
|
type="text"
|
|
maxLength={WATERMARK_TEXT_MAX}
|
|
disabled={locked}
|
|
value={W.text ?? ""}
|
|
onChange={(e) => patchWm({ text: e.target.value })}
|
|
className="input-field mt-1"
|
|
placeholder="Your brand name"
|
|
/>
|
|
</label>
|
|
</div>
|
|
)}
|
|
|
|
{W.mode === "logo" && (
|
|
<div className="mt-3">
|
|
<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 className="mt-4">
|
|
<p className="mb-2 text-sm text-gray-400">Watermark 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 || W.mode === "none"}
|
|
onClick={() => patchWm({ position: pos })}
|
|
className={`rounded border px-2 py-2 text-[11px] font-medium ${
|
|
W.position === pos
|
|
? "border-accent bg-accent/15 text-accent"
|
|
: "border-gray-700 text-gray-400"
|
|
} disabled:opacity-40`}
|
|
>
|
|
{WM_POSITION_LABELS[pos]}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-3 grid gap-3 sm:grid-cols-2">
|
|
<label className="text-sm text-gray-400">
|
|
Watermark offset X ({W.offsetX}px)
|
|
<input
|
|
type="range"
|
|
min={WATERMARK_OFFSET_MIN}
|
|
max={WATERMARK_OFFSET_MAX}
|
|
disabled={locked || W.mode === "none"}
|
|
value={W.offsetX}
|
|
onChange={(e) => patchWm({ offsetX: Number(e.target.value) })}
|
|
className="mt-1 w-full"
|
|
/>
|
|
</label>
|
|
<label className="text-sm text-gray-400">
|
|
Watermark offset Y ({W.offsetY}px)
|
|
<input
|
|
type="range"
|
|
min={WATERMARK_OFFSET_MIN}
|
|
max={WATERMARK_OFFSET_MAX}
|
|
disabled={locked || W.mode === "none"}
|
|
value={W.offsetY}
|
|
onChange={(e) => patchWm({ offsetY: Number(e.target.value) })}
|
|
className="mt-1 w-full"
|
|
/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|