Merge pull request #59 from AlexSciFier/image-optimisation

Image optimisation

.gitignore

@@ -1,3 +1,7 @@
 node_modules
+server/data
+server/db
+data
+background
 .vscode
 .idea

frontend/src/components/PrivateWrapper.jsx

@@ -23,13 +23,13 @@ export default function PrivateWrapper() {
   const [ authenticationEnabled, ] = useAppSettingsStore(appSettingsKeys.AuthenticationEnabled);
   const [ forceRegistration, ] = useAppSettingsStore(appSettingsKeys.ForceRegistration);
   const [ authenticated, ] = useUserCurrentStore(userCurrentKeys.Authenticated); 
-  const { pathname } = useLocation();
+  const { pathname,search } = useLocation();
   const navigate = useNavigate();
 
   useEffect(() => {
     if (forceRegistration) navigate("/register");
     else if (authenticationEnabled && !authenticated) navigate("/login");
-    else navigate("/");
+    else navigate(pathname+search);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [authenticated, authenticationEnabled, forceRegistration]);
 

frontend/src/helpers/constants.js

@@ -1,5 +1,5 @@
 export const APP_NAME = "NeonLink";
-export const VERSION = "1.4.2";
+export const VERSION = "1.4.3";
 export const DEF_MAX_ITEMS = 20;
 export const DEF_COLUMNS = 3;
 export const CARD_HEADER_STYLE = [

frontend/src/pages/settings/tabs/interfaceTab/BackgroundImageSettings.jsx

@@ -79,6 +79,8 @@ export default function BackgroundImageSettings() {
           let resBody = await res.json();
           setImages((prev) => [...prev, { id: resBody.id, url: resBody.url }]);
           setShow(false);
+          setFile(undefined);
+          setUrl(undefined);
         } else {
           setError((await res.json())?.message);
         }
@@ -184,19 +186,21 @@ export default function BackgroundImageSettings() {
             key={image.id}
             className="flex relative justify-center items-center"
           >
-            <img
-              width={20}
-              height={20}
-              onClick={() => {
-                handleSelect(image);
-              }}
-              className={`rounded w-20 h-20 object-cover object-center cursor-pointer ${
-                selectedId === image.id ? "border-2 border-cyan-500" : ""
-              }`}
-              alt={`bg-img-${image.id}`}
-              src={fixBgUrl(image.url)}
-            />
-
+            <label>
+              <img
+                width={20}
+                height={20}
+                onClick={() => {
+                  handleSelect(image);
+                }}
+                className={`rounded w-20 h-20 object-cover object-center cursor-pointer ${
+                  selectedId === image.id ? "border-2 border-cyan-500" : ""
+                }`}
+                alt={`bg-img-${image.id}`}
+                src={fixBgUrl(image?.thumbs?.small || image.url)}
+              />
+              <input className="hidden" type="radio" name={userSettingsKeys.BackgroundImage}></input>
+            </label>
             {selectedId === image.id && (
               <div className="w-6 h-6 rounded-full bg-cyan-500 absolute cursor-pointer">
                 <CheckIcon className="text-white p-1" />

server/logics/backgrounds.js

@@ -1,6 +1,7 @@
-import { basename, join } from "path";
+import path, { basename, join } from "path";
 import { rootPath, saveFileStream, deleteFile } from "../helpers/fileSystem.js";
 import { appContext } from "../contexts/appContext.js";
+import { URLSearchParams } from "url";
 
 const backgroundsPath = join(rootPath, "public/static/media/background");
 
@@ -15,7 +16,7 @@ export async function addBackground(fileName, sourceStream, userId) {
   }
   try {
     let lastRow = appContext.stores.backgrounds.addItem(fileUrl, userId);
-    return { id: lastRow, url: fileUrl };
+    return { id: lastRow, url: fileUrl, thumbs:getThumbnails(fileName) };
   } catch (error) {
     await deleteFile(backgroundsPath, fileName);
     console.error(error);
@@ -41,15 +42,47 @@ export async function deleteBackground(id, userId) {
 }
 
 export function getAllBackgrounds(userId) {
-  return appContext.stores.backgrounds.getAll(userId);
+  let items = appContext.stores.backgrounds.getAll(userId);
+  return items.map((item) => {
+    if (item.url.startsWith("/")) {
+      const imageName = path.basename(item.url);
+      return { ...item, thumbs:getThumbnails(imageName) };
+    }
+    return item;
+  });
+}
+
+function getThumbnails(imageName) {
+  return {
+    small: getThumbnailUrl(imageName, 150, 150),
+    medium: getThumbnailUrl(imageName, 300, 300),
+    large: getThumbnailUrl(imageName, 600, 600),
+  };
+}
+
+function getThumbnailUrl(imageName, w, h) {
+  const urlEndpoint = "/api/image/" + imageName;
+  const urlParams = new URLSearchParams();
+  urlParams.append("w", w);
+  urlParams.append("h", h);
+  return urlEndpoint + "?" + urlParams.toString();
 }
 
 export function getBackgroundById(id, userId) {
-  return appContext.stores.backgrounds.getItemById(id, userId);
+  const item = appContext.stores.backgrounds.getItemById(id, userId)[0];
+  if (item.url.startsWith("/")) {
+    const imageName = path.basename(item.url);
+    const thumbs = {
+      small: getThumbnailUrl(imageName, 150, 150),
+      medium: getThumbnailUrl(imageName, 300, 300),
+      large: getThumbnailUrl(imageName, 600, 600),
+    };
+    return { ...item, thumbs };
+  }
+  return item;
 }
 
-export function getBackgroundByUrl(url, userId) {
-  if (appContext.stores.backgrounds.getItemByUrl(url).length > 0) return false;
-  let lastRow = appContext.stores.backgrounds.addItem(url, userId);
-  return { id: lastRow, url };
+export function isBackgroundExist(url, userId) {
+  if (appContext.stores.backgrounds.getItemByUrl(url).length > 0) return true;
+  return false
 }

server/package.json

@@ -31,6 +31,7 @@
     "fastify-plugin": "^4.5.0",
     "fastify-session": "^5.2.1",
     "node-html-parser": "^6.1.5",
+    "sharp": "^0.32.5",
     "webpack": "^5.88.1"
   },
   "devDependencies": {