diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx index e8e0c96..b0040fb 100644 --- a/src/pages/Settings.tsx +++ b/src/pages/Settings.tsx @@ -6,14 +6,7 @@ import type { AppConfigUpdate, MediaMtxConfigView } from "@/types/api"; import { apiJson } from "@/utils/api"; export default function Settings() { - const { - config, - isLoading, - error, - load, - setSchedulerEnabled, - updateSchedule, - } = useConfigStore(); + const { config, isLoading, error, load } = useConfigStore(); const [rtspUrl, setRtspUrl] = useState(""); const [mtx, setMtx] = useState(null); @@ -31,6 +24,8 @@ export default function Settings() { const [recordingsDir, setRecordingsDir] = useState(""); const [apiPort, setApiPort] = useState("8008"); const [recordDeleteAfterDays, setRecordDeleteAfterDays] = useState("7"); + const [recordEnabled, setRecordEnabled] = useState(false); + const [schedulerEnabled, setSchedulerEnabledState] = useState(true); const loadMtx = async () => { setMtxBusy(true); @@ -38,7 +33,9 @@ export default function Settings() { try { const data = await apiJson("/mediamtx/config", { method: "GET" }); setMtx(data); - setRecordDeleteAfterDays(String(data.record_delete_after_days ?? 7)); + setRecordEnabled(Boolean(data.record_enabled)); + const d = data.record_delete_after_days; + setRecordDeleteAfterDays(d === 1 || d === 3 || d === 7 ? String(d) : "7"); } catch (e) { if (typeof e === "object" && e && "status" in e) { const ex = e as { status: number; bodyText?: string }; @@ -61,6 +58,7 @@ export default function Settings() { setWeekdaysFrom(schedule.weekdays_from); setWeekdaysTo(schedule.weekdays_to); setWeekendAllDay(schedule.weekend_all_day); + setSchedulerEnabledState(Boolean(schedule.enabled)); }, [schedule]); useEffect(() => { @@ -100,15 +98,7 @@ export default function Settings() { } }; - const onSaveSchedule = async () => { - await updateSchedule({ - weekdays_from: weekdaysFrom, - weekdays_to: weekdaysTo, - weekend_all_day: weekendAllDay, - }); - }; - - const onSaveBasicConfig = async () => { + const onSaveAll = async () => { setMtxBusy(true); setMtxError(null); setRestartMsg(null); @@ -125,15 +115,35 @@ export default function Settings() { method: "POST", body: JSON.stringify(payload), }); + await apiJson("/mediamtx/record-delete-after", { + method: "POST", + body: JSON.stringify({ days: Number(recordDeleteAfterDays) }), + }); + await apiJson("/scheduler/schedule", { + method: "POST", + body: JSON.stringify({ + weekdays_from: weekdaysFrom, + weekdays_to: weekdaysTo, + weekend_all_day: weekendAllDay, + }), + }); + await apiJson("/scheduler/enabled", { + method: "POST", + body: JSON.stringify({ enabled: schedulerEnabled }), + }); + await apiJson("/mediamtx/recording", { + method: "POST", + body: JSON.stringify({ enabled: recordEnabled }), + }); await load(); await loadMtx(); - setRestartMsg("Lưu config.json thành công"); + setRestartMsg("Lưu config.json và mediamtx.yml thành công"); } catch (e) { if (typeof e === "object" && e && "status" in e) { const ex = e as { status: number; bodyText?: string }; setMtxError(`http_${ex.status}${ex.bodyText ? `: ${ex.bodyText}` : ""}`); } else { - setMtxError("failed_to_save_config"); + setMtxError("failed_to_save_all"); } } finally { setMtxBusy(false); @@ -161,49 +171,6 @@ export default function Settings() { } }; - const onToggleRecord = async (enabled: boolean) => { - setMtxBusy(true); - setMtxError(null); - try { - const data = await apiJson("/mediamtx/recording", { - method: "POST", - body: JSON.stringify({ enabled }), - }); - setMtx(data); - } catch (e) { - if (typeof e === "object" && e && "status" in e) { - const ex = e as { status: number; bodyText?: string }; - setMtxError(`http_${ex.status}${ex.bodyText ? `: ${ex.bodyText}` : ""}`); - } else { - setMtxError("failed_to_toggle_recording"); - } - } finally { - setMtxBusy(false); - } - }; - - const onChangeRecordDeleteAfter = async (days: number) => { - setMtxBusy(true); - setMtxError(null); - try { - const data = await apiJson("/mediamtx/record-delete-after", { - method: "POST", - body: JSON.stringify({ days }), - }); - setMtx(data); - setRecordDeleteAfterDays(String(data.record_delete_after_days ?? days)); - } catch (e) { - if (typeof e === "object" && e && "status" in e) { - const ex = e as { status: number; bodyText?: string }; - setMtxError(`http_${ex.status}${ex.bodyText ? `: ${ex.bodyText}` : ""}`); - } else { - setMtxError("failed_to_update_record_delete_after"); - } - } finally { - setMtxBusy(false); - } - }; - const onRestartDocker = async () => { setMtxBusy(true); setRestartMsg(null); @@ -371,19 +338,19 @@ export default function Settings() {