diff --git a/src/components/CameraSettings/CameraSettingFields.tsx b/src/components/CameraSettings/CameraSettingFields.tsx index 2d1b0d7..90a91e4 100644 --- a/src/components/CameraSettings/CameraSettingFields.tsx +++ b/src/components/CameraSettings/CameraSettingFields.tsx @@ -22,7 +22,6 @@ const CameraSettingFields = ({ onZoomLevelChange, }: CameraSettingsProps) => { const [showPwd, setShowPwd] = useState(false); - const cameraControllerSide = initialData?.id === "CameraA" ? "CameraControllerA" : "CameraControllerB"; const { mutation, query } = useCameraZoom({ camera: cameraControllerSide }); const { cameraModeQuery, cameraModeMutation } = useCameraMode({ camera: cameraControllerSide }); diff --git a/src/components/SettingForms/Sound/SoundUpload.tsx b/src/components/SettingForms/Sound/SoundUpload.tsx index 4122383..09df9d8 100644 --- a/src/components/SettingForms/Sound/SoundUpload.tsx +++ b/src/components/SettingForms/Sound/SoundUpload.tsx @@ -5,13 +5,13 @@ import { useSoundContext } from "../../../context/SoundContext"; import { toast } from "sonner"; import { useCameraBlackboard } from "../../../hooks/useCameraBlackboard"; import { useFileUpload } from "../../../hooks/useFileUpload"; +import { useEffect, useRef } from "react"; const SoundUpload = () => { const { state, dispatch } = useSoundContext(); const { mutation } = useCameraBlackboard(); - const { mutation: fileMutation } = useFileUpload({ - queryKey: state.sightingSound ? [state.sightingSound] : undefined, - }); + const currentUrlRef = useRef(null); + const { mutation: fileMutation } = useFileUpload(); const initialValues: SoundUploadValue = { name: "", @@ -43,6 +43,10 @@ const SoundUpload = () => { value: updatedValues, }); await fileMutation.mutateAsync(values.soundFile); + if (currentUrlRef.current) { + URL.revokeObjectURL(currentUrlRef.current); + currentUrlRef.current = null; + } if (result.reason !== "OK") { toast.error("Cannot update sound settings"); } @@ -54,6 +58,14 @@ const SoundUpload = () => { dispatch({ type: "ADD", payload: values }); }; + useEffect(() => { + return () => { + if (currentUrlRef.current) { + URL.revokeObjectURL(currentUrlRef.current); + } + }; + }, []); + return ( {({ setFieldValue, errors, setFieldError }) => ( @@ -69,8 +81,12 @@ const SoundUpload = () => { accept="audio/mpeg" className="mt-4 w-full flex flex-col items-center justify-center rounded-2xl border border-slate-800 bg-slate-900/40 p-10 text-center file:px-3 file:border file:border-gray-500 file:rounded-lg file:bg-blue-800 file:mr-5" onChange={(e) => { + if (currentUrlRef.current) { + URL.revokeObjectURL(currentUrlRef.current); + } if (e.target?.files && e.target?.files[0]?.type === "audio/mpeg") { - const url = URL.createObjectURL(e.target.files[0]); + currentUrlRef.current = URL.createObjectURL(e.target.files[0]); + const url = currentUrlRef.current; setFieldValue("soundUrl", url); setFieldValue("name", e.target.files[0].name); setFieldValue("soundFileName", e.target.files[0].name); diff --git a/src/components/SettingForms/System/SystemConfigFields.tsx b/src/components/SettingForms/System/SystemConfigFields.tsx index e58709d..225c9c9 100644 --- a/src/components/SettingForms/System/SystemConfigFields.tsx +++ b/src/components/SettingForms/System/SystemConfigFields.tsx @@ -7,19 +7,23 @@ import type { SystemValues, SystemValuesErrors } from "../../../types/types"; import { useDNSSettings, useSystemConfig } from "../../../hooks/useSystemConfig"; import { ValidateIPaddress } from "../../../utils/utils"; import { toast } from "sonner"; +// import { useSystemStatus } from "../../../hooks/useSystemStatus"; const SystemConfigFields = () => { const { saveSystemSettings, systemSettingsData, saveSystemSettingsLoading } = useSystemConfig(); + // const { systemStatusQuery } = useSystemStatus(); const { hardRebootMutation } = useReboots(); const { dnsQuery, dnsMutation } = useDNSSettings(); + const sntpInterval = systemSettingsData?.sntpInterval; const dnsPrimary = dnsQuery?.data?.propNameServerPrimary?.value; const dnsSecondary = dnsQuery?.data?.propNameServerSecondary?.value; + const initialvalues: SystemValues = { deviceName: systemSettingsData?.deviceName ?? "", timeZone: systemSettingsData?.timeZone ?? "", sntpServer: systemSettingsData?.sntpServer ?? "", - sntpInterval: systemSettingsData?.sntpInterval ?? 60, + sntpInterval: sntpInterval ?? 60, serverPrimary: dnsPrimary ?? "", serverSecondary: dnsSecondary ?? "", softwareUpdate: null, diff --git a/src/components/SettingForms/System/SystemFileUpload.tsx b/src/components/SettingForms/System/SystemFileUpload.tsx index cb7f00b..a7c63cc 100644 --- a/src/components/SettingForms/System/SystemFileUpload.tsx +++ b/src/components/SettingForms/System/SystemFileUpload.tsx @@ -19,7 +19,7 @@ const SystemFileUpload = ({ name, selectedFile }: SystemFileUploadProps) => { opts: { timeoutMs: 30000, fieldName: "upload", - uploadUrl: "http://192.168.75.11/upload/software-update/2", + uploadUrl: "http://192.168.75.11/upload/software-update/4", }, }; uploadSettings(settings); diff --git a/src/hooks/useFileUpload.ts b/src/hooks/useFileUpload.ts index 7bab593..97e009f 100644 --- a/src/hooks/useFileUpload.ts +++ b/src/hooks/useFileUpload.ts @@ -1,12 +1,9 @@ -import { useMutation, useQuery } from "@tanstack/react-query"; +import { useMutation } from "@tanstack/react-query"; import { CAM_BASE } from "../utils/config"; import { toast } from "sonner"; -import { getOrCacheBlob } from "../utils/cacheSound"; -const camBase = import.meta.env.MODE !== "development" ? CAM_BASE : CAM_BASE; -type UseFileUploadProps = { - queryKey?: string[]; -}; +const camBase = import.meta.env.MODE !== "development" ? CAM_BASE : CAM_BASE; +console.log(camBase); const uploadFile = async (file: File) => { const form = new FormData(); @@ -21,19 +18,7 @@ const uploadFile = async (file: File) => { return response.text(); }; -const getUploadFiles = async ({ queryKey }: { queryKey: string[] }) => { - const [, fileName] = queryKey; - const url = fileName; - return getOrCacheBlob(url); -}; - -export const useFileUpload = ({ queryKey }: UseFileUploadProps) => { - const query = useQuery({ - queryKey: ["getUploadFiles", ...(queryKey ?? [])], - queryFn: () => getUploadFiles({ queryKey: ["getUploadFiles", ...(queryKey ?? [])] }), - enabled: !!queryKey, - }); - +export const useFileUpload = () => { const mutation = useMutation({ mutationFn: (file: File) => uploadFile(file), mutationKey: ["uploadFile"], @@ -41,5 +26,5 @@ export const useFileUpload = ({ queryKey }: UseFileUploadProps) => { onSuccess: async (msg) => toast.success(msg), }); - return { query: queryKey ? query : undefined, mutation }; + return { mutation }; }; diff --git a/src/hooks/useGetUploadedFiles.ts b/src/hooks/useGetUploadedFiles.ts new file mode 100644 index 0000000..0797ddc --- /dev/null +++ b/src/hooks/useGetUploadedFiles.ts @@ -0,0 +1,22 @@ +import { useQuery } from "@tanstack/react-query"; +import { getOrCacheBlob } from "../utils/cacheSound"; + +type UseFileUploadProps = { + queryKey?: string[]; +}; + +const getUploadFiles = async ({ queryKey }: { queryKey: string[] }) => { + const [, fileName] = queryKey; + const url = fileName; + return getOrCacheBlob(url); +}; + +export const useGetUploadedFiles = ({ queryKey }: UseFileUploadProps) => { + const query = useQuery({ + queryKey: ["getUploadFiles", ...(queryKey ?? [])], + queryFn: () => getUploadFiles({ queryKey: ["getUploadFiles", ...(queryKey ?? [])] }), + enabled: !!queryKey, + }); + + return { query: queryKey ? query : undefined }; +}; diff --git a/src/hooks/useSystemStatus.ts b/src/hooks/useSystemStatus.ts new file mode 100644 index 0000000..33cfad7 --- /dev/null +++ b/src/hooks/useSystemStatus.ts @@ -0,0 +1,20 @@ +import { useQuery } from "@tanstack/react-query"; +import { CAM_BASE } from "../utils/config"; + +const fetchSystemStatus = async () => { + const response = await fetch(`${CAM_BASE}/sysstatus?func=getstatus`); + if (!response.ok) { + throw new Error("Network response was not ok"); + } + return response.json(); +}; + +export const useSystemStatus = () => { + const systemStatusQuery = useQuery({ + queryKey: ["get systemStatus"], + queryFn: fetchSystemStatus, + refetchInterval: 60000, + }); + + return { systemStatusQuery }; +};