feat : update

2026-09-06 17:26:26 +07:00
parent ce126810bb
commit 6dc46ca2a7
10 changed files with 4114 additions and 224 deletions
@@ -2,10 +2,12 @@

 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import { closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, type DragEndEvent } from "@dnd-kit/core";
+import { arrayMove, rectSortingStrategy, SortableContext, sortableKeyboardCoordinates, useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import {
-  ArrowDownIcon,
-  ArrowUpIcon,
  ArrowUpRightIcon,
+  GripVerticalIcon,
  PlusIcon,
 } from "lucide-react";
 import { useState, type ComponentProps } from "react";
@@ -35,9 +37,33 @@ import {
 import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
 import { Spinner } from "@/components/ui/spinner";
+import { cn } from "@/lib/utils";

 type ExtraLink = { id: string; slug: string; title: string };

+function SortableExtraCard({ extra, index, characterKey, disabled }: { extra: ExtraLink; index: number; characterKey: string; disabled: boolean }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: extra.id, disabled });
+  return (
+    <Card ref={setNodeRef} style={{ transform: CSS.Transform.toString(transform), transition }} className={cn(isDragging && "relative z-10 opacity-70 shadow-lg")}>
+      <CardHeader>
+        <CardTitle>{extra.title}</CardTitle>
+        <CardDescription>Extra section {index + 1}</CardDescription>
+        <CardAction>
+          <Button type="button" variant="ghost" size="icon-sm" disabled={disabled} className="touch-none cursor-grab active:cursor-grabbing" aria-label={`จัดลำดับ ${extra.title}`} {...attributes} {...listeners}>
+            <GripVerticalIcon />
+          </Button>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <Button variant="outline" render={<Link href={`/admin/${characterKey}/${extra.slug}`} />} nativeButton={false}>
+          แก้ไข Extra
+          <ArrowUpRightIcon data-icon="inline-end" />
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}
+
 export function AddExtraButton({
  guideId,
  characterKey,
@@ -146,21 +172,23 @@ export function ExtraOverview({
  const router = useRouter();
  const [extras, setExtras] = useState(initialExtras);
  const [version, setVersion] = useState(initialVersion);
-  const [pendingId, setPendingId] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+  const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));

-  const move = async (index: number, direction: -1 | 1) => {
-    const target = index + direction;
-    if (target < 0 || target >= extras.length) return;
+  const reorder = async (event: DragEndEvent) => {
+    if (pending || !event.over || event.active.id === event.over.id) return;
+    const oldIndex = extras.findIndex((extra) => extra.id === event.active.id);
+    const newIndex = extras.findIndex((extra) => extra.id === event.over?.id);
+    if (oldIndex < 0 || newIndex < 0) return;
    const previous = extras;
-    const next = [...extras];
-    [next[index], next[target]] = [next[target], next[index]];
+    const next = arrayMove(extras, oldIndex, newIndex);
    setExtras(next);
-    setPendingId(extras[index].id);
+    setPending(true);
    const result = await reorderGuideExtras(guideId, {
      expectedVersion: version,
      sectionIds: next.map((extra) => extra.id),
    });
-    setPendingId(null);
+    setPending(false);
    if (result.status !== "saved") {
      setExtras(previous);
      toast.error(result.message);
@@ -185,48 +213,13 @@ export function ExtraOverview({
        />
      </div>
      {extras.length ? (
-        <div className="grid gap-4 md:grid-cols-2">
-          {extras.map((extra, index) => (
-            <Card key={extra.id}>
-              <CardHeader>
-                <CardTitle>{extra.title}</CardTitle>
-                <CardDescription>Extra section {index + 1}</CardDescription>
-                <CardAction className="flex items-center gap-1">
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon-sm"
-                    disabled={index === 0 || pendingId !== null}
-                    aria-label={`เลื่อน ${extra.title} ขึ้น`}
-                    onClick={() => void move(index, -1)}
-                  >
-                    <ArrowUpIcon />
-                  </Button>
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon-sm"
-                    disabled={index === extras.length - 1 || pendingId !== null}
-                    aria-label={`เลื่อน ${extra.title} ลง`}
-                    onClick={() => void move(index, 1)}
-                  >
-                    <ArrowDownIcon />
-                  </Button>
-                </CardAction>
-              </CardHeader>
-              <CardContent>
-                <Button
-                  variant="outline"
-                  render={<Link href={`/admin/${characterKey}/${extra.slug}`} />}
-                  nativeButton={false}
-                >
-                  แก้ไข Extra
-                  <ArrowUpRightIcon data-icon="inline-end" />
-                </Button>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
+        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={(event) => void reorder(event)}>
+          <SortableContext items={extras.map((extra) => extra.id)} strategy={rectSortingStrategy}>
+            <div className="grid gap-4 md:grid-cols-2">
+              {extras.map((extra, index) => <SortableExtraCard key={extra.id} extra={extra} index={index} characterKey={characterKey} disabled={pending} />)}
+            </div>
+          </SortableContext>
+        </DndContext>
      ) : (
        <Card>
          <CardHeader>
@@ -4,7 +4,7 @@ import Image from "next/image";
 import { closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, type DragEndEvent } from "@dnd-kit/core";
 import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { GripVerticalIcon, Trash2Icon } from "lucide-react";
+import { GripVerticalIcon, PlusIcon, Trash2Icon } from "lucide-react";
 import { useState } from "react";

 import { saveGuideOverview } from "@/app/admin/actions";
@@ -54,6 +54,11 @@ type BleedingLayer = {
  blendMode: PosterBlendMode;
 };

+type VideoLink = {
+  id: string;
+  url: string;
+};
+
 const blendModes: PosterBlendMode[] = ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"];
 const blendModeItems = blendModes.map((value) => ({
  value,
@@ -68,6 +73,39 @@ function createBleedingLayerId(): string {
  return `bleeding-${Date.now()}-${bleedingLayerIdCounter}`;
 }

+function createVideoLinkId(): string {
+  const browserCrypto = globalThis.crypto;
+  if (typeof browserCrypto?.randomUUID === "function") return `video-${browserCrypto.randomUUID()}`;
+  bleedingLayerIdCounter += 1;
+  return `video-${Date.now()}-${bleedingLayerIdCounter}`;
+}
+
+function SortableVideoLink({ link, index, guideName, onChange, onRemove }: { link: VideoLink; index: number; guideName: string; onChange: (url: string) => void; onRemove: () => void }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: link.id });
+  const video = parseYouTubeUrl(link.url.trim());
+  const invalid = Boolean(link.url.trim() && !video);
+  return (
+    <Field ref={setNodeRef} data-invalid={invalid} style={{ transform: CSS.Transform.toString(transform), transition }} className={cn("rounded-lg border p-3", isDragging && "relative z-10 opacity-70 shadow-lg")}>
+      <div className="flex items-center gap-2">
+        <Button type="button" variant="ghost" size="icon-sm" className="touch-none cursor-grab active:cursor-grabbing" aria-label={`จัดลำดับวิดีโอ ${index + 1}`} {...attributes} {...listeners}>
+          <GripVerticalIcon data-icon="inline-start" />
+        </Button>
+        <FieldLabel htmlFor={`guide-youtube-url-${link.id}`} className="flex-1">YouTube video {index + 1}</FieldLabel>
+        <Button type="button" variant="ghost" size="icon-sm" onClick={onRemove} aria-label={`ลบวิดีโอ ${index + 1}`}>
+          <Trash2Icon data-icon="inline-start" />
+        </Button>
+      </div>
+      <Input id={`guide-youtube-url-${link.id}`} type="url" inputMode="url" value={link.url} maxLength={2_048} placeholder="https://www.youtube.com/watch?v=..." aria-invalid={invalid} onChange={(event) => onChange(event.target.value)} />
+      {invalid ? <FieldError>กรุณาใส่ลิงก์วิดีโอ YouTube ที่ถูกต้อง</FieldError> : null}
+      {video ? (
+        <div className="aspect-video w-full max-w-64 overflow-hidden rounded-lg border bg-muted">
+          <iframe src={video.embedUrl} title={`ตัวอย่างวิดีโอไกด์ ${guideName} ${index + 1}`} loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen className="size-full" />
+        </div>
+      ) : null}
+    </Field>
+  );
+}
+
 function SortableBleedingLayer({ layer, onChange, onRemove }: { layer: BleedingLayer; onChange: (patch: Partial<Pick<BleedingLayer, "amount" | "blendMode">>) => void; onRemove: () => void }) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: layer.id });
  const selectedMode = blendModeItems.find((mode) => mode.value === layer.blendMode);
@@ -109,7 +147,7 @@ export function GuideOverviewForm({
    id: string;
    version: number;
    overview: string;
-    youtubeUrl: string | null;
+    youtubeUrls: string[];
    coverMediaId: string;
    coverUrl: string;
    name: string;
@@ -125,7 +163,7 @@ export function GuideOverviewForm({
  };
 }) {
  const [overview, setOverview] = useState(guide.overview);
-  const [youtubeUrl, setYoutubeUrl] = useState(guide.youtubeUrl ?? "");
+  const [youtubeLinks, setYoutubeLinks] = useState<VideoLink[]>(() => guide.youtubeUrls.map((url) => ({ id: createVideoLinkId(), url })));
  const [cover, setCover] = useState({
    id: guide.coverMediaId,
    url: guide.coverUrl,
@@ -143,12 +181,11 @@ export function GuideOverviewForm({
  const [posterBottomColors, setPosterBottomColors] = useState(guide.posterBottomColors);
  const [bleeding, setBleeding] = useState<BleedingLayer[]>(guide.posterBleeding.map(({ id, mediaId, imageUrl, amount, blendMode }) => ({ id, mediaId, imageUrl, amount, blendMode })));
  const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
-  const youtubeVideo = parseYouTubeUrl(youtubeUrl.trim());
-  const invalidYoutubeUrl = Boolean(youtubeUrl.trim() && !youtubeVideo);
+  const invalidYoutubeLinks = youtubeLinks.some((link) => !parseYouTubeUrl(link.url.trim()));
  const value = {
    coverMediaId: cover.id,
    overview,
-    youtubeUrl,
+    youtubeUrls: youtubeLinks.map((link) => link.url),
    posterArtMediaId: posterArt.id,
    posterArtOffsetX: posterArtOffset.x,
    posterArtOffsetY: posterArtOffset.y,
@@ -160,14 +197,14 @@ export function GuideOverviewForm({
  const incompleteIssues = [
    !cover.id ? "กรุณาอัปโหลด Guide Image" : null,
    !overview.trim() ? "กรุณากรอก Overview" : null,
-    invalidYoutubeUrl ? "กรุณาใส่ลิงก์วิดีโอ YouTube ที่ถูกต้อง" : null,
+    invalidYoutubeLinks ? "กรุณาใส่ลิงก์วิดีโอ YouTube ที่ถูกต้อง" : null,
  ].filter((issue): issue is string => Boolean(issue));
  const invalidCover = !cover.id;
  const invalidOverview = !overview.trim();
-  const localDraft = { overview, youtubeUrl, cover, posterArt, posterArtOffset, posterArtScale, posterTopColors, posterBottomColors, bleeding };
+  const localDraft = { overview, youtubeLinks, cover, posterArt, posterArtOffset, posterArtScale, posterTopColors, posterBottomColors, bleeding };
  const autosave = useAutosave({
    value,
-    valid: Boolean(cover.id && overview.trim() && !invalidYoutubeUrl),
+    valid: Boolean(cover.id && overview.trim() && !invalidYoutubeLinks),
    initialVersion: guide.version,
    persist: (next, expectedVersion) =>
      saveGuideOverview(guide.id, { ...next, expectedVersion }),
@@ -188,15 +225,18 @@ export function GuideOverviewForm({
        typeof draftCover.url !== "string"
      )
        return null;
-      if (
-        draft.youtubeUrl !== undefined &&
-        typeof draft.youtubeUrl !== "string"
-      )
-        return null;
+      const youtubeLinks = Array.isArray(draft.youtubeLinks)
+        ? draft.youtubeLinks.flatMap((item) => {
+            if (!item || typeof item !== "object") return [];
+            const link = item as Record<string, unknown>;
+            return typeof link.id === "string" && typeof link.url === "string" ? [{ id: link.id, url: link.url }] : [];
+          })
+        : typeof draft.youtubeUrl === "string" && draft.youtubeUrl
+          ? [{ id: createVideoLinkId(), url: draft.youtubeUrl }]
+          : guide.youtubeUrls.map((url) => ({ id: createVideoLinkId(), url }));
      return {
        overview: draft.overview,
-        youtubeUrl:
-          typeof draft.youtubeUrl === "string" ? draft.youtubeUrl : "",
+        youtubeLinks,
        cover: { id: draftCover.id, url: draftCover.url },
        posterArt: draft.posterArt && typeof draft.posterArt === "object"
          ? {
@@ -234,7 +274,7 @@ export function GuideOverviewForm({
    },
    restoreLocalDraft: (draft) => {
      setOverview(draft.overview);
-      setYoutubeUrl(draft.youtubeUrl);
+      setYoutubeLinks(draft.youtubeLinks);
      setCover(draft.cover);
      setPosterArt(draft.posterArt);
      setPosterArtOffset(draft.posterArtOffset);
@@ -311,6 +351,15 @@ export function GuideOverviewForm({
    });
  }

+  function handleVideoDragEnd(event: DragEndEvent) {
+    if (!event.over || event.active.id === event.over.id) return;
+    setYoutubeLinks((current) => {
+      const oldIndex = current.findIndex((link) => link.id === event.active.id);
+      const newIndex = current.findIndex((link) => link.id === event.over?.id);
+      return oldIndex < 0 || newIndex < 0 ? current : arrayMove(current, oldIndex, newIndex);
+    });
+  }
+
  return (
    <Card>
      <CardHeader>
@@ -323,99 +372,67 @@ export function GuideOverviewForm({
        <FieldGroup>
          <Field data-invalid={invalidCover}>
            <FieldLabel>Guide Image</FieldLabel>
-            <div className={cn(
-              "relative mx-auto aspect-square w-full max-w-md overflow-hidden rounded-lg border",
-              invalidCover && "border-destructive",
-            )}>
-              <Image
-                src={cover.url}
-                alt={`Guide ${guide.name}`}
-                fill
-                className="object-cover"
-              />
-            </div>
-            <MediaUploader onReady={(asset) => setCover(asset)} />
-          </Field>
-          <Field data-invalid={invalidOverview}>
-            <FieldLabel htmlFor="guide-overview">Overview</FieldLabel>
-            <Textarea
-              id="guide-overview"
-              value={overview}
-              aria-invalid={invalidOverview}
-              maxLength={500}
-              onChange={(event) => setOverview(event.target.value)}
-            />
-            <FieldDescription>{overview.length}/500 ตัวอักษร</FieldDescription>
-          </Field>
-          <Field data-invalid={invalidYoutubeUrl}>
-            <FieldLabel htmlFor="guide-youtube-url">
-              YouTube video link
-            </FieldLabel>
-            <Input
-              id="guide-youtube-url"
-              type="url"
-              inputMode="url"
-              value={youtubeUrl}
-              maxLength={2_048}
-              placeholder="https://www.youtube.com/watch?v=..."
-              aria-invalid={invalidYoutubeUrl}
-              onChange={(event) => setYoutubeUrl(event.target.value)}
-            />
-            <FieldDescription>
-              ไม่บังคับ รองรับลิงก์ YouTube, youtu.be, Shorts และ Live
-            </FieldDescription>
-            {invalidYoutubeUrl ? (
-              <FieldError>กรุณาใส่ลิงก์วิดีโอ YouTube ที่ถูกต้อง</FieldError>
-            ) : null}
-            {youtubeVideo ? (
-              <div className="aspect-video w-full overflow-hidden rounded-xl border bg-muted">
-                <iframe
-                  src={youtubeVideo.embedUrl}
-                  title={`ตัวอย่างวิดีโอไกด์ ${guide.name}`}
-                  loading="lazy"
-                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                  referrerPolicy="strict-origin-when-cross-origin"
-                  allowFullScreen
-                  className="size-full"
+            <div className="grid items-start gap-4 lg:grid-cols-2">
+              <div className={cn(
+                "relative aspect-square w-full overflow-hidden rounded-lg border",
+                invalidCover && "border-destructive",
+              )}>
+                <Image
+                  src={cover.url}
+                  alt={`Guide ${guide.name}`}
+                  fill
+                  className="object-cover"
                />
              </div>
-            ) : null}
+              <div className="rounded-lg border p-4">
+                <FieldGroup>
+                  <Field>
+                    <FieldLabel>Upload Guide Image</FieldLabel>
+                    <FieldDescription>อัปโหลดภาพสี่เหลี่ยมสำหรับหน้าแรกของ Guide</FieldDescription>
+                    <MediaUploader onReady={(asset) => setCover(asset)} />
+                  </Field>
+                  <Field data-invalid={invalidOverview}>
+                    <FieldLabel htmlFor="guide-overview">Overview</FieldLabel>
+                    <Textarea
+                      id="guide-overview"
+                      value={overview}
+                      aria-invalid={invalidOverview}
+                      maxLength={500}
+                      onChange={(event) => setOverview(event.target.value)}
+                    />
+                    <FieldDescription>{overview.length}/500 ตัวอักษร</FieldDescription>
+                  </Field>
+                </FieldGroup>
+              </div>
+            </div>
+          </Field>
+          <Field>
+            <div className="flex items-center justify-between gap-2">
+              <div>
+                <FieldLabel>YouTube videos</FieldLabel>
+                <FieldDescription>ไม่บังคับ รองรับ YouTube, youtu.be, Shorts และ Live · ลากเพื่อจัดลำดับ</FieldDescription>
+              </div>
+              <Button type="button" variant="outline" size="sm" disabled={youtubeLinks.length >= 20} onClick={() => setYoutubeLinks((current) => [...current, { id: createVideoLinkId(), url: "" }])}>
+                <PlusIcon data-icon="inline-start" />
+                เพิ่มลิงก์
+              </Button>
+            </div>
+            {youtubeLinks.length ? (
+              <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleVideoDragEnd}>
+                <SortableContext items={youtubeLinks.map((link) => link.id)} strategy={verticalListSortingStrategy}>
+                  <div className="flex flex-col gap-2">
+                    {youtubeLinks.map((link, index) => (
+                      <SortableVideoLink key={link.id} link={link} index={index} guideName={guide.name} onChange={(url) => setYoutubeLinks((current) => current.map((item) => item.id === link.id ? { ...item, url } : item))} onRemove={() => setYoutubeLinks((current) => current.filter((item) => item.id !== link.id))} />
+                    ))}
+                  </div>
+                </SortableContext>
+              </DndContext>
+            ) : <p className="text-sm text-muted-foreground">ยังไม่มีวิดีโอใน Overview</p>}
          </Field>
          <Field>
            <FieldLabel>Materials Overview</FieldLabel>
-            <div className="mx-auto w-full max-w-md overflow-hidden rounded-lg border">
-              <MaterialPoster
-                character={guide.character}
-                characterArtUrl={posterArt.url}
-                artworkOffsetX={posterArtOffset.x}
-                artworkOffsetY={posterArtOffset.y}
-                artworkScale={posterArtScale}
-                topColors={posterTopColors}
-                bottomColors={posterBottomColors}
-                bleeding={bleeding}
-                interactive
-                onArtworkMove={setPosterArtOffset}
-              />
-            </div>
-            <div className="flex flex-wrap items-center justify-end gap-2">
-              <MediaUploader
-                onReady={setUploadedPoster}
-                onFileSelected={detectPosterColorsFromFile}
-              />
-              {posterArt.id ? (
-                <Button type="button" variant="outline" onClick={removeUploadedPoster}>
-                  <Trash2Icon data-icon="inline-start" />
-                  ลบภาพตัวละคร
-                </Button>
-              ) : null}
-              <GuideImageExport
-                width={1600}
-                height={2000}
-                format="png"
-                disabled={!posterArt.url}
-                fileName={`${guide.name}-materials.png`}
-                captureClassName="p-0"
-              >
+            <div className="grid items-start gap-4 lg:grid-cols-2">
+              <div className="w-full overflow-hidden rounded-lg border">
                <MaterialPoster
                  character={guide.character}
                  characterArtUrl={posterArt.url}
@@ -425,34 +442,69 @@ export function GuideOverviewForm({
                  topColors={posterTopColors}
                  bottomColors={posterBottomColors}
                  bleeding={bleeding}
+                  interactive
+                  onArtworkMove={setPosterArtOffset}
                />
-              </GuideImageExport>
-            </div>
-            <div className="flex flex-col gap-2 rounded-lg border p-3">
-              <div className="flex items-center justify-between gap-2">
-                <div>
-                  <FieldLabel>Bleeding layers</FieldLabel>
-                  <p className="text-xs text-muted-foreground">ใช้ภาพตัวละครเดียวกันด้วย mix-blend-mode · รายการบนสุดจะแสดงก่อน</p>
-                </div>
-                <Button type="button" variant="outline" size="sm" disabled={!posterArt.id || !posterArt.url} onClick={addBleedingEffect}>เพิ่ม effect</Button>
              </div>
-              {bleeding.length ? (
-                <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleBleedingDragEnd}>
-                  <SortableContext items={bleeding.map((layer) => layer.id)} strategy={verticalListSortingStrategy}>
-                    <div className="flex flex-col gap-2">
-                      {bleeding.map((layer) => <SortableBleedingLayer key={layer.id} layer={layer} onChange={(patch) => setBleeding((current) => current.map((item) => item.id === layer.id ? { ...item, ...patch } : item))} onRemove={() => setBleeding((current) => current.filter((item) => item.id !== layer.id))} />)}
+              <div className="flex min-w-0 flex-col gap-3">
+                <div className="flex flex-wrap items-center gap-2 rounded-lg border p-3">
+                  <MediaUploader
+                    onReady={setUploadedPoster}
+                    onFileSelected={detectPosterColorsFromFile}
+                  />
+                  {posterArt.id ? (
+                    <Button type="button" variant="outline" onClick={removeUploadedPoster}>
+                      <Trash2Icon data-icon="inline-start" />
+                      ลบภาพตัวละคร
+                    </Button>
+                  ) : null}
+                  <GuideImageExport
+                    width={1600}
+                    height={2000}
+                    format="png"
+                    disabled={!posterArt.url}
+                    fileName={`${guide.name}-materials.png`}
+                    captureClassName="p-0"
+                  >
+                    <MaterialPoster
+                      character={guide.character}
+                      characterArtUrl={posterArt.url}
+                      artworkOffsetX={posterArtOffset.x}
+                      artworkOffsetY={posterArtOffset.y}
+                      artworkScale={posterArtScale}
+                      topColors={posterTopColors}
+                      bottomColors={posterBottomColors}
+                      bleeding={bleeding}
+                    />
+                  </GuideImageExport>
+                </div>
+                <div className="flex flex-col gap-2 rounded-lg border p-3">
+                  <div className="flex items-center justify-between gap-2">
+                    <div>
+                      <FieldLabel>Bleeding layers</FieldLabel>
+                      <p className="text-xs text-muted-foreground">ใช้ภาพตัวละครเดียวกันด้วย mix-blend-mode · รายการบนสุดจะแสดงก่อน</p>
                    </div>
-                  </SortableContext>
-                </DndContext>
-              ) : <p className="text-sm text-muted-foreground">อัปโหลดภาพเพื่อเพิ่ม Bleeding layer</p>}
+                    <Button type="button" variant="outline" size="sm" disabled={!posterArt.id || !posterArt.url} onClick={addBleedingEffect}>เพิ่ม effect</Button>
+                  </div>
+                  {bleeding.length ? (
+                    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleBleedingDragEnd}>
+                      <SortableContext items={bleeding.map((layer) => layer.id)} strategy={verticalListSortingStrategy}>
+                        <div className="flex flex-col gap-2">
+                          {bleeding.map((layer) => <SortableBleedingLayer key={layer.id} layer={layer} onChange={(patch) => setBleeding((current) => current.map((item) => item.id === layer.id ? { ...item, ...patch } : item))} onRemove={() => setBleeding((current) => current.filter((item) => item.id !== layer.id))} />)}
+                        </div>
+                      </SortableContext>
+                    </DndContext>
+                  ) : <p className="text-sm text-muted-foreground">อัปโหลดภาพเพื่อเพิ่ม Bleeding layer</p>}
+                </div>
+                <Field className="rounded-lg border p-3">
+                  <div className="flex items-center justify-between gap-2"><FieldLabel htmlFor="poster-art-scale">Character image zoom</FieldLabel><span className="text-sm text-muted-foreground">{posterArtScale}%</span></div>
+                  <Slider id="poster-art-scale" min={50} max={500} step={5} value={[posterArtScale]} onValueChange={(value) => setPosterArtScale(typeof value === "number" ? value : value[0] ?? 100)} />
+                </Field>
+                <FieldDescription>
+                  อัปโหลดภาพตัวละคร แล้วลากบนตัวอย่างเพื่อจัดตำแหน่ง สีด้านบนและล่างจะตรวจให้อัตโนมัติ
+                </FieldDescription>
+              </div>
            </div>
-            <Field className="rounded-lg border p-3">
-              <div className="flex items-center justify-between gap-2"><FieldLabel htmlFor="poster-art-scale">Character image zoom</FieldLabel><span className="text-sm text-muted-foreground">{posterArtScale}%</span></div>
-              <Slider id="poster-art-scale" min={50} max={500} step={5} value={[posterArtScale]} onValueChange={(value) => setPosterArtScale(typeof value === "number" ? value : value[0] ?? 100)} />
-            </Field>
-            <FieldDescription>
-              อัปโหลดภาพตัวละคร แล้วลากบนตัวอย่างเพื่อจัดตำแหน่ง สีด้านบนและล่างจะตรวจให้อัตโนมัติ
-            </FieldDescription>
          </Field>
        </FieldGroup>
      </CardContent>
@@ -198,9 +198,10 @@ function GuideOverview({
  guide: PublicGuide;
  sections: ReturnType<typeof publicSections>;
 }) {
-  const youtubeVideo = guide.youtubeUrl
-    ? parseYouTubeUrl(guide.youtubeUrl)
-    : null;
+  const youtubeVideos = guide.youtubeUrls.flatMap((url) => {
+    const video = parseYouTubeUrl(url);
+    return video ? [video] : [];
+  });

  return (
    <div className="flex flex-col gap-8">
@@ -222,7 +223,7 @@ function GuideOverview({
        <div className="order-3 lg:col-start-2 lg:row-start-1">
          <GuideNavigation guide={guide} sections={sections} />
        </div>
-        {guide.posterArtUrl || youtubeVideo ? (
+        {guide.posterArtUrl || youtubeVideos.length ? (
          <>
          {guide.posterArtUrl ? (
            <section className="order-2 flex flex-col items-center gap-3 lg:col-start-1 lg:row-start-2">
@@ -256,34 +257,28 @@ function GuideOverview({
              </GuideImageExport>
            </section>
          ) : null}
-          {youtubeVideo ? (
-            <section className="order-4 flex flex-col items-center gap-3 lg:col-start-2 lg:row-start-2">
-              <div className="aspect-video w-full overflow-hidden rounded-xl border bg-muted">
-                <iframe
-                  src={youtubeVideo.embedUrl}
-                  title={`วิดีโอไกด์ ${guide.name}`}
-                  loading="lazy"
-                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                  referrerPolicy="strict-origin-when-cross-origin"
-                  allowFullScreen
-                  className="size-full"
-                />
-              </div>
-              <Button
-                variant="outline"
-                render={
-                  <a
-                    href={youtubeVideo.watchUrl}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  />
-                }
-                nativeButton={false}
-              >
-                ดูวิดีโอต้นฉบับบน YouTube
-                <ArrowUpRightIcon data-icon="inline-end" />
-              </Button>
-            </section>
+          {youtubeVideos.length ? (
+            <div className="order-4 flex flex-col gap-6 lg:col-start-2 lg:row-start-2">
+              {youtubeVideos.map((youtubeVideo, index) => (
+                <section key={`${youtubeVideo.videoId}-${index}`} className="flex flex-col items-center gap-3">
+                  <div className="aspect-video w-full overflow-hidden rounded-xl border bg-muted">
+                    <iframe
+                      src={youtubeVideo.embedUrl}
+                      title={`วิดีโอไกด์ ${guide.name} ${index + 1}`}
+                      loading="lazy"
+                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                      referrerPolicy="strict-origin-when-cross-origin"
+                      allowFullScreen
+                      className="size-full"
+                    />
+                  </div>
+                  <Button variant="outline" render={<a href={youtubeVideo.watchUrl} target="_blank" rel="noopener noreferrer" />} nativeButton={false}>
+                    ดูวิดีโอต้นฉบับบน YouTube
+                    <ArrowUpRightIcon data-icon="inline-end" />
+                  </Button>
+                </section>
+              ))}
+            </div>
          ) : null}
          </>
        ) : null}