mirror of
https://github.com/randyjc/Rahoot.git
synced 2026-03-13 20:15:35 +01:00
292 lines
10 KiB
TypeScript
292 lines
10 KiB
TypeScript
"use client"
|
|
|
|
import background from "@rahoot/web/assets/background.webp"
|
|
import Button from "@rahoot/web/components/Button"
|
|
import { useThemeStore } from "@rahoot/web/stores/theme"
|
|
import clsx from "clsx"
|
|
import Image from "next/image"
|
|
import { useEffect, useMemo, useState } from "react"
|
|
|
|
type MediaItem = {
|
|
fileName: string
|
|
url: string
|
|
size: number
|
|
mime: string
|
|
type: string
|
|
}
|
|
|
|
type Props = {
|
|
onBack: () => void
|
|
}
|
|
|
|
const ThemeEditor = ({ onBack }: Props) => {
|
|
const { backgroundUrl, brandName, setBackground, setBrandName, reset } = useThemeStore()
|
|
const [customUrl, setCustomUrl] = useState("")
|
|
const [items, setItems] = useState<MediaItem[]>([])
|
|
const [loading, setLoading] = useState(false)
|
|
const [uploading, setUploading] = useState(false)
|
|
const [uploadError, setUploadError] = useState<string | null>(null)
|
|
const [savingTheme, setSavingTheme] = useState(false)
|
|
const [saveError, setSaveError] = useState<string | null>(null)
|
|
const [initializing, setInitializing] = useState(true)
|
|
|
|
const previewUrl = useMemo(
|
|
() => backgroundUrl || customUrl || background.src,
|
|
[backgroundUrl, customUrl],
|
|
)
|
|
|
|
const load = async () => {
|
|
setLoading(true)
|
|
try {
|
|
const [mediaRes, themeRes] = await Promise.all([
|
|
fetch("/api/media", { cache: "no-store" }),
|
|
fetch("/api/theme", { cache: "no-store" }),
|
|
])
|
|
|
|
const mediaData = await mediaRes.json()
|
|
const themeData = await themeRes.json()
|
|
|
|
if (!mediaRes.ok) throw new Error(mediaData.error || "Failed to load media")
|
|
if (!themeRes.ok) throw new Error(themeData.error || "Failed to load theme")
|
|
|
|
const onlyImages = (mediaData.media || []).filter(
|
|
(item: MediaItem) => item.mime?.startsWith("image/"),
|
|
)
|
|
setItems(onlyImages)
|
|
|
|
if (themeData.theme) {
|
|
if (typeof themeData.theme.backgroundUrl === "string") {
|
|
setBackground(themeData.theme.backgroundUrl || null)
|
|
setCustomUrl(themeData.theme.backgroundUrl || "")
|
|
}
|
|
if (typeof themeData.theme.brandName === "string") {
|
|
setBrandName(themeData.theme.brandName)
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error(error)
|
|
} finally {
|
|
setLoading(false)
|
|
setInitializing(false)
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
load()
|
|
}, [])
|
|
|
|
const persistTheme = async (next: { backgroundUrl?: string | null; brandName?: string }) => {
|
|
setSavingTheme(true)
|
|
setSaveError(null)
|
|
try {
|
|
const res = await fetch("/api/theme", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(next),
|
|
})
|
|
const data = await res.json()
|
|
if (!res.ok) throw new Error(data.error || "Failed to save theme")
|
|
} catch (error) {
|
|
const message = error instanceof Error ? error.message : "Failed to save theme"
|
|
setSaveError(message)
|
|
} finally {
|
|
setSavingTheme(false)
|
|
}
|
|
}
|
|
|
|
const handleSet = (url: string) => {
|
|
if (!url) return
|
|
setBackground(url)
|
|
persistTheme({ backgroundUrl: url })
|
|
}
|
|
|
|
const handleApplyCustom = () => {
|
|
if (!customUrl.trim()) return
|
|
handleSet(customUrl.trim())
|
|
}
|
|
|
|
const handleUpload = async (file?: File | null) => {
|
|
if (!file) return
|
|
setUploading(true)
|
|
setUploadError(null)
|
|
try {
|
|
const form = new FormData()
|
|
form.append("file", file)
|
|
const res = await fetch("/api/media", {
|
|
method: "POST",
|
|
body: form,
|
|
})
|
|
const data = await res.json()
|
|
if (!res.ok) {
|
|
throw new Error(data.error || "Upload failed")
|
|
}
|
|
if (data.media?.url) {
|
|
handleSet(data.media.url)
|
|
setCustomUrl(data.media.url)
|
|
}
|
|
load()
|
|
} catch (error) {
|
|
const message = error instanceof Error ? error.message : "Upload failed"
|
|
setUploadError(message)
|
|
} finally {
|
|
setUploading(false)
|
|
}
|
|
}
|
|
|
|
const handleReset = () => {
|
|
reset()
|
|
setCustomUrl("")
|
|
persistTheme({ backgroundUrl: null, brandName: "Rahoot" })
|
|
}
|
|
|
|
return (
|
|
<div className="flex w-full max-w-6xl flex-col gap-4 rounded-md bg-white p-4 shadow-sm">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<Button onClick={onBack} className="bg-gray-700">
|
|
Back
|
|
</Button>
|
|
<div className="flex flex-col leading-tight">
|
|
<h2 className="text-lg font-semibold text-gray-900">Theme editor</h2>
|
|
<p className="text-xs text-gray-500">
|
|
Set the game background from uploads or a custom URL.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-4 lg:grid-cols-2">
|
|
<div className="space-y-3 rounded-md border border-gray-200 bg-white p-4 shadow-sm">
|
|
<h3 className="text-lg font-semibold text-gray-800">Branding</h3>
|
|
<label className="flex flex-col gap-2">
|
|
<span className="text-sm font-semibold text-gray-600">
|
|
Brand name
|
|
</span>
|
|
<input
|
|
value={brandName}
|
|
onChange={(e) => {
|
|
setBrandName(e.target.value)
|
|
persistTheme({ brandName: e.target.value })
|
|
}}
|
|
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
|
placeholder="e.g., Kwalitaria Pub Quiz"
|
|
/>
|
|
<span className="text-xs text-gray-500">
|
|
Appears in the browser title bar and elsewhere we surface the brand.
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="space-y-3 rounded-md border border-gray-200 bg-white p-4 shadow-sm">
|
|
<h3 className="text-lg font-semibold text-gray-800">Preview</h3>
|
|
<div className="relative h-60 w-full overflow-hidden rounded-md border border-gray-100 bg-gray-50">
|
|
<Image
|
|
src={previewUrl}
|
|
alt="Background preview"
|
|
fill
|
|
className="object-cover"
|
|
sizes="100vw"
|
|
unoptimized
|
|
/>
|
|
<div className="absolute inset-0 bg-black/20" />
|
|
<div className="absolute inset-0 flex items-center justify-center text-white">
|
|
<span className="rounded bg-black/50 px-3 py-1 text-sm font-semibold">
|
|
Current background
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button className="bg-gray-700" onClick={handleReset}>
|
|
Reset to default
|
|
</Button>
|
|
<Button className="bg-primary" onClick={handleApplyCustom}>
|
|
Apply custom URL
|
|
</Button>
|
|
</div>
|
|
<input
|
|
value={customUrl}
|
|
onChange={(e) => setCustomUrl(e.target.value)}
|
|
placeholder="https://example.com/background.webp or /media/your-file"
|
|
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
|
/>
|
|
<p className="text-sm text-gray-600">
|
|
Paste any reachable image URL (including your uploaded media path). Changes apply immediately to the game background.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-3 rounded-md border border-gray-200 bg-white p-4 shadow-sm">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-gray-800">Images from media library</h3>
|
|
<p className="text-sm text-gray-500">Pick any uploaded image as the background.</p>
|
|
</div>
|
|
<Button className="bg-gray-700" onClick={load} disabled={loading}>
|
|
{loading ? "Refreshing..." : "Refresh"}
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="rounded-md border border-dashed border-gray-300 p-3">
|
|
<label className="flex items-center gap-3 text-sm font-semibold text-gray-800">
|
|
<input
|
|
type="file"
|
|
accept="image/*"
|
|
className="text-sm"
|
|
onChange={(e) => handleUpload(e.target.files?.[0])}
|
|
disabled={uploading}
|
|
/>
|
|
{uploading ? "Uploading..." : "Upload image"}
|
|
</label>
|
|
<p className="mt-1 text-xs text-gray-500">
|
|
Upload a background image (webp/png/jpg). It will be available immediately and selected as the current background.
|
|
</p>
|
|
{uploadError && (
|
|
<p className="mt-1 text-xs font-semibold text-red-600">{uploadError}</p>
|
|
)}
|
|
{saveError && (
|
|
<p className="mt-1 text-xs font-semibold text-red-600">{saveError}</p>
|
|
)}
|
|
{(savingTheme || initializing) && !uploading && (
|
|
<p className="mt-1 text-xs text-gray-500">
|
|
{initializing ? "Loading theme…" : "Saving theme…"}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
{items.map((item) => (
|
|
<button
|
|
key={item.fileName}
|
|
className={clsx(
|
|
"relative h-32 overflow-hidden rounded-md border border-gray-200 bg-gray-50 text-left shadow-sm transition hover:border-primary",
|
|
backgroundUrl === item.url && "ring-2 ring-primary",
|
|
)}
|
|
onClick={() => handleSet(item.url)}
|
|
>
|
|
<Image
|
|
src={item.url}
|
|
alt={item.fileName}
|
|
fill
|
|
className="object-cover"
|
|
sizes="200px"
|
|
unoptimized
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/0" />
|
|
<div className="absolute bottom-2 left-2 right-2 text-xs font-semibold text-white drop-shadow">
|
|
{item.fileName}
|
|
</div>
|
|
</button>
|
|
))}
|
|
{!loading && items.length === 0 && (
|
|
<div className="rounded-md border border-dashed border-gray-300 p-4 text-sm text-gray-500">
|
|
No images uploaded yet. Upload an image in the Media page, then pick it here.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ThemeEditor
|