taDuc
416 lines
16 KiB
TypeScript
416 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import type { CSSProperties } from "react";
|
|
import type {
|
|
ReplayPreviewDialog,
|
|
ReplayPreviewImage,
|
|
ReplayPreviewToast,
|
|
} from "@/uhm/lib/replay/useReplayPreview";
|
|
|
|
type Props = {
|
|
isPreviewMode: boolean;
|
|
isPlaying: boolean;
|
|
title: string;
|
|
descriptions: string;
|
|
subtitle: string | null;
|
|
dialog: ReplayPreviewDialog | null;
|
|
image: ReplayPreviewImage | null;
|
|
toasts: ReplayPreviewToast[];
|
|
sidebarOpen: boolean;
|
|
playbackSpeed: number;
|
|
activeStepLabel: string | null;
|
|
activeStepNumber: number | null;
|
|
totalSteps: number;
|
|
onPlayPreview: () => void;
|
|
onStopPreview: () => void;
|
|
onResetPreview: () => void;
|
|
onExitPreview: () => void;
|
|
};
|
|
|
|
export default function ReplayPreviewOverlay({
|
|
isPreviewMode,
|
|
isPlaying,
|
|
title,
|
|
descriptions,
|
|
subtitle,
|
|
dialog,
|
|
image,
|
|
toasts,
|
|
sidebarOpen,
|
|
playbackSpeed,
|
|
activeStepLabel,
|
|
activeStepNumber,
|
|
totalSteps,
|
|
onPlayPreview,
|
|
onStopPreview,
|
|
onResetPreview,
|
|
onExitPreview,
|
|
}: Props) {
|
|
const hasNarrativeCard = title.trim().length > 0 || descriptions.trim().length > 0;
|
|
const hasWikiPreview = sidebarOpen;
|
|
const shouldRender =
|
|
isPreviewMode ||
|
|
isPlaying ||
|
|
hasNarrativeCard ||
|
|
Boolean(subtitle) ||
|
|
Boolean(dialog) ||
|
|
Boolean(image) ||
|
|
Boolean(toasts.length);
|
|
|
|
if (!shouldRender) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
inset: 0,
|
|
zIndex: 15,
|
|
pointerEvents: "none",
|
|
}}
|
|
>
|
|
{hasNarrativeCard ? (
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
top: 72,
|
|
left: 18,
|
|
maxWidth: 460,
|
|
borderRadius: 18,
|
|
border: "1px solid rgba(148, 163, 184, 0.26)",
|
|
background: "linear-gradient(145deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.88))",
|
|
boxShadow: "0 14px 42px rgba(2, 6, 23, 0.42)",
|
|
padding: "18px 20px",
|
|
}}
|
|
>
|
|
{title.trim().length ? (
|
|
<div
|
|
style={{
|
|
fontSize: 26,
|
|
lineHeight: 1.1,
|
|
fontWeight: 900,
|
|
color: "#f8fafc",
|
|
overflowWrap: "anywhere",
|
|
}}
|
|
>
|
|
{title}
|
|
</div>
|
|
) : null}
|
|
{descriptions.trim().length ? (
|
|
<div
|
|
style={{
|
|
marginTop: title.trim().length ? 12 : 0,
|
|
fontSize: 14,
|
|
lineHeight: 1.55,
|
|
color: "#dbeafe",
|
|
whiteSpace: "pre-wrap",
|
|
}}
|
|
>
|
|
{descriptions}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
|
|
{toasts.length ? (
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
top: 72,
|
|
right: hasWikiPreview ? 454 : 18,
|
|
display: "grid",
|
|
gap: 8,
|
|
width: 280,
|
|
}}
|
|
>
|
|
{toasts.map((toast) => (
|
|
<div
|
|
key={toast.id}
|
|
style={{
|
|
borderRadius: 14,
|
|
border: "1px solid rgba(56, 189, 248, 0.28)",
|
|
background: "rgba(8, 47, 73, 0.9)",
|
|
color: "#e0f2fe",
|
|
padding: "12px 14px",
|
|
fontSize: 13,
|
|
lineHeight: 1.4,
|
|
boxShadow: "0 10px 26px rgba(2, 6, 23, 0.32)",
|
|
}}
|
|
>
|
|
{toast.message}
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
|
|
{image ? (
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
right: 18,
|
|
bottom: 96,
|
|
width: 320,
|
|
borderRadius: 18,
|
|
overflow: "hidden",
|
|
border: "1px solid rgba(148, 163, 184, 0.22)",
|
|
background: "rgba(15, 23, 42, 0.9)",
|
|
boxShadow: "0 16px 44px rgba(2, 6, 23, 0.42)",
|
|
}}
|
|
>
|
|
<img
|
|
src={image.url}
|
|
alt={image.caption || "Historical image"}
|
|
style={{
|
|
width: "100%",
|
|
display: "block",
|
|
maxHeight: 240,
|
|
objectFit: "cover",
|
|
background: "#020617",
|
|
}}
|
|
/>
|
|
{image.caption?.trim() ? (
|
|
<div
|
|
style={{
|
|
padding: "10px 12px",
|
|
fontSize: 12,
|
|
lineHeight: 1.45,
|
|
color: "#cbd5e1",
|
|
}}
|
|
>
|
|
{image.caption}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
|
|
{dialog ? (
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
left: dialog.side === "right" ? "auto" : 18,
|
|
right: dialog.side === "right" ? 18 : "auto",
|
|
bottom: subtitle ? 138 : 96,
|
|
maxWidth: 420,
|
|
display: "grid",
|
|
gap: 10,
|
|
gridTemplateColumns: dialog.avatar.trim().length ? "56px 1fr" : "1fr",
|
|
alignItems: "start",
|
|
}}
|
|
>
|
|
{dialog.avatar.trim().length ? (
|
|
<img
|
|
src={dialog.avatar}
|
|
alt={dialog.speaker || "speaker"}
|
|
style={{
|
|
width: 56,
|
|
height: 56,
|
|
borderRadius: "50%",
|
|
objectFit: "cover",
|
|
border: "2px solid rgba(125, 211, 252, 0.55)",
|
|
background: "#0f172a",
|
|
}}
|
|
/>
|
|
) : null}
|
|
<div
|
|
style={{
|
|
borderRadius: 18,
|
|
border: "1px solid rgba(148, 163, 184, 0.24)",
|
|
background: "rgba(15, 23, 42, 0.92)",
|
|
padding: "14px 16px",
|
|
color: "#f8fafc",
|
|
boxShadow: "0 14px 36px rgba(2, 6, 23, 0.38)",
|
|
}}
|
|
>
|
|
{dialog.speaker?.trim() ? (
|
|
<div
|
|
style={{
|
|
marginBottom: 6,
|
|
fontSize: 11,
|
|
color: "#7dd3fc",
|
|
fontWeight: 900,
|
|
letterSpacing: 0.4,
|
|
}}
|
|
>
|
|
{dialog.speaker}
|
|
</div>
|
|
) : null}
|
|
<div
|
|
style={{
|
|
fontSize: 15,
|
|
lineHeight: 1.5,
|
|
whiteSpace: "pre-wrap",
|
|
}}
|
|
>
|
|
{dialog.text}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{subtitle?.trim() ? (
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
left: "50%",
|
|
bottom: 90,
|
|
transform: "translateX(-50%)",
|
|
maxWidth: 720,
|
|
borderRadius: 999,
|
|
border: "1px solid rgba(148, 163, 184, 0.24)",
|
|
background: "rgba(2, 6, 23, 0.84)",
|
|
color: "#f8fafc",
|
|
padding: "10px 18px",
|
|
fontSize: 14,
|
|
fontWeight: 700,
|
|
lineHeight: 1.45,
|
|
textAlign: "center",
|
|
boxShadow: "0 12px 32px rgba(2, 6, 23, 0.28)",
|
|
}}
|
|
>
|
|
{subtitle}
|
|
</div>
|
|
) : null}
|
|
|
|
{isPreviewMode ? (
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
top: 64,
|
|
left: "50%",
|
|
transform: "translateX(-50%)",
|
|
width: "min(520px, calc(100% - 72px))",
|
|
borderRadius: 18,
|
|
border: "1px solid rgba(148, 163, 184, 0.24)",
|
|
background: "rgba(15, 23, 42, 0.9)",
|
|
color: "#e2e8f0",
|
|
padding: "12px 14px",
|
|
boxShadow: "0 12px 32px rgba(2, 6, 23, 0.3)",
|
|
pointerEvents: "auto",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
gap: 12,
|
|
}}
|
|
>
|
|
<div style={{ display: "grid", gap: 6, minWidth: 0 }}>
|
|
<div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
|
|
<span
|
|
style={{
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
padding: "3px 8px",
|
|
borderRadius: 999,
|
|
background: "rgba(34, 197, 94, 0.2)",
|
|
color: "#86efac",
|
|
fontWeight: 900,
|
|
fontSize: 11,
|
|
letterSpacing: 0.3,
|
|
textTransform: "uppercase",
|
|
}}
|
|
>
|
|
Preview
|
|
</span>
|
|
{activeStepLabel ? (
|
|
<span
|
|
style={{
|
|
fontSize: 13,
|
|
fontWeight: 800,
|
|
color: "#f8fafc",
|
|
overflowWrap: "anywhere",
|
|
}}
|
|
>
|
|
{activeStepLabel}
|
|
</span>
|
|
) : null}
|
|
<span style={{ fontSize: 12, color: "#94a3b8" }}>
|
|
x{playbackSpeed.toFixed(2)}
|
|
</span>
|
|
</div>
|
|
{totalSteps > 0 ? (
|
|
<div style={{ display: "grid", gap: 6 }}>
|
|
<div
|
|
style={{
|
|
width: "100%",
|
|
height: 6,
|
|
borderRadius: 999,
|
|
background: "rgba(51, 65, 85, 0.8)",
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
width: `${Math.max(0, Math.min(100, ((activeStepNumber || 0) / totalSteps) * 100))}%`,
|
|
height: "100%",
|
|
borderRadius: 999,
|
|
background: "linear-gradient(90deg, #22c55e, #38bdf8)",
|
|
transition: "width 180ms ease",
|
|
}}
|
|
/>
|
|
</div>
|
|
<div style={{ fontSize: 11, color: "#94a3b8" }}>
|
|
Step {activeStepNumber || 0}/{totalSteps}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<div style={{ display: "flex", alignItems: "center", gap: 8, flex: "0 0 auto" }}>
|
|
{isPlaying ? (
|
|
<>
|
|
<button
|
|
type="button"
|
|
onClick={onStopPreview}
|
|
style={previewButtonStyle("#7f1d1d")}
|
|
>
|
|
Dừng
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={onResetPreview}
|
|
style={previewButtonStyle("#1e3a8a")}
|
|
>
|
|
Reset
|
|
</button>
|
|
</>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
onClick={onPlayPreview}
|
|
style={previewButtonStyle("#166534")}
|
|
>
|
|
Phát lại
|
|
</button>
|
|
)}
|
|
<button
|
|
type="button"
|
|
onClick={onExitPreview}
|
|
style={previewButtonStyle("#334155")}
|
|
>
|
|
Thoát preview
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function previewButtonStyle(background: string): CSSProperties {
|
|
return {
|
|
border: "none",
|
|
background,
|
|
color: "white",
|
|
borderRadius: 10,
|
|
padding: "8px 12px",
|
|
cursor: "pointer",
|
|
fontSize: 12,
|
|
fontWeight: 800,
|
|
boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.08)",
|
|
};
|
|
}
|