144 lines
4.1 KiB
TypeScript
144 lines
4.1 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { apiFetch, ApiError } from "@/lib/api";
|
|
import { useItem, useList } from "@/lib/useResource";
|
|
import { useToast } from "@/components/toast";
|
|
import {
|
|
Button,
|
|
Card,
|
|
Field,
|
|
Input,
|
|
PageHeader,
|
|
Select,
|
|
Spinner,
|
|
Switch,
|
|
} from "@/components/ui";
|
|
import { toFa } from "@/lib/utils";
|
|
|
|
interface Scene {
|
|
id: number;
|
|
name: string;
|
|
}
|
|
|
|
interface SceneSettings {
|
|
active_scene_id?: number | string | null;
|
|
scene_volume?: number | string | null;
|
|
background_play_seconds?: number | string | null;
|
|
video_enabled?: boolean;
|
|
}
|
|
|
|
export default function SceneSettingsPage() {
|
|
const { data, loading } = useItem<SceneSettings>("/scene-settings");
|
|
const { data: scenes } = useList<Scene>("/scenes");
|
|
const toast = useToast();
|
|
|
|
const [activeSceneId, setActiveSceneId] = useState("");
|
|
const [sceneVolume, setSceneVolume] = useState("");
|
|
const [backgroundPlaySeconds, setBackgroundPlaySeconds] = useState("");
|
|
const [videoEnabled, setVideoEnabled] = useState(false);
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!data) return;
|
|
setActiveSceneId(
|
|
data.active_scene_id != null ? String(data.active_scene_id) : "",
|
|
);
|
|
setSceneVolume(data.scene_volume != null ? String(data.scene_volume) : "");
|
|
setBackgroundPlaySeconds(
|
|
data.background_play_seconds != null
|
|
? String(data.background_play_seconds)
|
|
: "",
|
|
);
|
|
setVideoEnabled(!!data.video_enabled);
|
|
}, [data]);
|
|
|
|
async function save(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
setSaving(true);
|
|
try {
|
|
await apiFetch("/scene-settings", {
|
|
method: "PUT",
|
|
body: {
|
|
active_scene_id: activeSceneId ? Number(activeSceneId) : null,
|
|
scene_volume: sceneVolume ? Number(sceneVolume) : null,
|
|
background_play_seconds: backgroundPlaySeconds
|
|
? Number(backgroundPlaySeconds)
|
|
: null,
|
|
video_enabled: videoEnabled,
|
|
},
|
|
});
|
|
toast.success("تنظیمات صحنه ذخیره شد.");
|
|
} catch (err) {
|
|
toast.error(err instanceof ApiError ? err.message : "خطا در ذخیرهسازی");
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<PageHeader
|
|
title="تنظیمات صحنه"
|
|
subtitle="پیکربندی صحنه فعال، صدا و پخش پسزمینه"
|
|
/>
|
|
|
|
{loading ? (
|
|
<div className="flex justify-center py-16">
|
|
<Spinner />
|
|
</div>
|
|
) : (
|
|
<Card className="max-w-xl">
|
|
<form onSubmit={save} className="flex flex-col gap-4">
|
|
<Field label="صحنه فعال">
|
|
<Select
|
|
value={activeSceneId}
|
|
onChange={(e) => setActiveSceneId(e.target.value)}
|
|
>
|
|
<option value="">انتخاب صحنه</option>
|
|
{scenes.map((s) => (
|
|
<option key={s.id} value={String(s.id)}>
|
|
{s.name} ({toFa(s.id)})
|
|
</option>
|
|
))}
|
|
</Select>
|
|
</Field>
|
|
|
|
<Field label="میزان صدای صحنه">
|
|
<Input
|
|
type="number"
|
|
value={sceneVolume}
|
|
onChange={(e) => setSceneVolume(e.target.value)}
|
|
placeholder="0"
|
|
dir="ltr"
|
|
/>
|
|
</Field>
|
|
|
|
<Field label="مدت پخش پسزمینه (ثانیه)">
|
|
<Input
|
|
type="number"
|
|
value={backgroundPlaySeconds}
|
|
onChange={(e) => setBackgroundPlaySeconds(e.target.value)}
|
|
placeholder="0"
|
|
dir="ltr"
|
|
/>
|
|
</Field>
|
|
|
|
<Switch
|
|
checked={videoEnabled}
|
|
onChange={setVideoEnabled}
|
|
label="نمایش ویدیو فعال باشد"
|
|
/>
|
|
|
|
<div className="flex justify-end pt-2">
|
|
<Button type="submit" loading={saving}>
|
|
ذخیره تنظیمات
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|