From b98bd3a11d61ce03d17a05d1b2d8d5b839401534 Mon Sep 17 00:00:00 2001
From: glax <johanna@bernloehr.eu>
Date: Mon, 4 Aug 2025 11:48:54 +0200
Subject: [PATCH] Implement ImageCompression API-Setting

---
 .../src/Components/Settings/FlareSolverr.tsx  |  3 +-
 .../Components/Settings/ImageCompression.tsx  | 33 +++++++++++++++++--
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/tranga-website/src/Components/Settings/FlareSolverr.tsx b/tranga-website/src/Components/Settings/FlareSolverr.tsx
index bacb574..ec774a4 100644
--- a/tranga-website/src/Components/Settings/FlareSolverr.tsx
+++ b/tranga-website/src/Components/Settings/FlareSolverr.tsx
@@ -13,9 +13,10 @@ export default function () : ReactNode {
     const timerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
     const uriChanged = (e : React.ChangeEvent<HTMLInputElement>) => {
         clearTimeout(timerRef.current);
+        setUriValue(e.target.value);
         setUriColor("warning");
         timerRef.current = setTimeout(() => {
-            setUriValue(e.target.value);
+            changeUri();
         }, 1000);
     }
 
diff --git a/tranga-website/src/Components/Settings/ImageCompression.tsx b/tranga-website/src/Components/Settings/ImageCompression.tsx
index 60f1504..dcd727f 100644
--- a/tranga-website/src/Components/Settings/ImageCompression.tsx
+++ b/tranga-website/src/Components/Settings/ImageCompression.tsx
@@ -1,14 +1,41 @@
-import {ReactNode, useContext} from "react";
+import {ReactNode, useCallback, useContext, useState} from "react";
 import {SettingsContext} from "./Settings.tsx";
-import {Card, Slider, Typography} from "@mui/joy";
+import {Button, Card, ColorPaletteProp, Slider, Typography} from "@mui/joy";
+import * as React from "react";
+import {ApiContext} from "../../apiClient/ApiContext.tsx";
 
 export default function () : ReactNode {
     const settings = useContext(SettingsContext);
+    const Api = useContext(ApiContext);
+
+    const [value, setValue] = useState(settings?.imageCompression??100);
+    const [color, setColor] = useState<ColorPaletteProp>("neutral");
+    const timerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
+    const valueChanged = (_: Event, val: number | number[]) => {
+        clearTimeout(timerRef.current);
+        setColor("warning");
+        setValue(val as number);
+        timerRef.current = setTimeout(() => {
+            changeUri();
+        }, 1000);
+    }
+
+    const changeUri = useCallback(()  => {
+        Api.settingsImageCompressionLevelPartialUpdate(value)
+            .then(response => {
+                if (response.ok)
+                    setColor("success");
+                else
+                    setColor("danger");
+            })
+            .catch(() => setColor("danger"));
+    }, [value]);
     
     return (
         <Card>
             <Typography>Image Compression</Typography>
-            <Slider sx={{marginTop: "20px"}} valueLabelDisplay={"auto"} defaultValue={settings?.imageCompression}></Slider>
+            <Slider sx={{marginTop: "20px"}} valueLabelDisplay={"auto"} value={value} onChange={valueChanged} color={color} />
+            <Button onClick={changeUri}>Set</Button>
         </Card>
     );
 }
\ No newline at end of file