wallpaper optimized for wallpaper and thumbnails

Author: developerHub01

src/main/utils/images.ts

@@ -2,6 +2,8 @@ import { access, readdir, stat } from "node:fs/promises";
 import { constants } from "node:fs";
 import path from "node:path";
 import { pathToFileURL } from "node:url";
+import { nativeImage } from "electron";
+import { BackgroundImagesInterface } from "@shared/types/setting.types";
 
 const imageExtensions = new Set<string>([
   ".png",
@@ -19,23 +21,49 @@ export const getImageFilesFromFolder = async ({
 }: {
   folderPath: string;
   limit?: number;
-}) => {
+}): Promise<BackgroundImagesInterface | null> => {
   try {
     await access(folderPath, constants.R_OK);
 
-    const files =
-      (await readdir(folderPath, { withFileTypes: true }))
+    const imageEntries =
+      (
+        await readdir(folderPath, {
+          withFileTypes: true,
+        })
+      )
         ?.filter(
           entry =>
             entry.isFile() &&
             imageExtensions.has(path.extname(entry.name).toLowerCase()),
         )
-        ?.slice(0, limit)
-        ?.map(file => getApiBoltFileProtocolBasedPath(folderPath, file.name)) ??
-      [];
+        ?.slice(0, limit) ?? [];
+
+    const thumbnails = (
+      await Promise.allSettled(
+        imageEntries.map(entry => {
+          const fullPath = path.join(folderPath, entry.name);
+          return nativeImage.createThumbnailFromPath(fullPath, {
+            width: 300,
+            height: 300,
+          });
+        }),
+      )
+    )
+      .filter(res => res.status === "fulfilled")
+      .map(res => res.value.toDataURL());
+
+    const images =
+      imageEntries?.map(file =>
+        getApiBoltFileProtocolBasedPath(folderPath, file.name),
+      ) ?? [];
 
     const folderUrl = path.resolve(folderPath);
-    return [folderUrl, ...files];
+
+    return {
+      folderUrl,
+      thumbnails,
+      images,
+    };
   } catch (error) {
     console.error("getImageFilesFromFolder error:", error);
     return null;

src/renderer/src/components/app/setting/content/background/images/SettingBackgroundImagePreview.tsx

@@ -11,30 +11,44 @@ import { useSettingBackground } from "@/context/setting/background/SettingBackgr
 import ImageWithFallback from "@/components/ui/image-with-fallback";
 
 interface Props {
-  backgroundList: Array<string>;
-  selectedIndex: number | null;
+  selectedBackground: string | null;
   className?: string;
 }
 
 const SettingBackgroundImagePreview = memo(
-  ({ backgroundList, selectedIndex, className = "" }: Props) => {
+  ({ selectedBackground, className = "" }: Props) => {
     const {
       handleChangeSelectedBackgroundImageIndex,
       handleNavigateSelectedBackgroundImageIndex,
     } = useSettingBackground();
 
     return (
       <AnimatePresence mode="wait">
-        {selectedIndex !== null && (
+        {selectedBackground !== null && (
           <motion.div
             className={cn(
               "bg-accent/50 col-span-1 h-90 origin-center overflow-hidden rounded-lg relative flex flex-col p-3",
               className,
             )}
-            initial={{ scale: 0.6, opacity: 0, filter: "blur(10px)" }}
-            animate={{ scale: 1, opacity: 1, filter: "blur(0)" }}
-            exit={{ scale: 0.8, opacity: 0, filter: "blur(10px)" }}
-            transition={{ duration: 0.4, ease: "easeInOut" }}
+            initial={{
+              scale: 0.6,
+              opacity: 0,
+              filter: "blur(10px)",
+            }}
+            animate={{
+              scale: 1,
+              opacity: 1,
+              filter: "blur(0)",
+            }}
+            exit={{
+              scale: 0.8,
+              opacity: 0,
+              filter: "blur(10px)",
+            }}
+            transition={{
+              duration: 0.4,
+              ease: "easeInOut",
+            }}
           >
             {/* Close Button */}
             <Button
@@ -57,8 +71,8 @@ const SettingBackgroundImagePreview = memo(
                 <AnimatePresence mode="wait">
                   <ImageWithFallback
                     isAnimated
-                    key={selectedIndex}
-                    src={backgroundList[selectedIndex]}
+                    key={selectedBackground}
+                    src={selectedBackground}
                     alt="background-preview"
                     className="max-w-full max-h-full w-full h-full object-contain rounded-lg shadow-xl blur-sm"
                     style={{

src/renderer/src/components/app/setting/content/background/images/SettingBackgroundImages.tsx

@@ -24,6 +24,7 @@ const SettingBackgroundContent = memo(() => {
     settingType,
     senitizedValue,
     folderPath,
+    thumbnails,
     isHideMoreData,
     handleChange,
     handleChangeSettingType,
@@ -52,7 +53,7 @@ const SettingBackgroundContent = memo(() => {
           }
           activeTab={activeTab}
           folderPath={folderPath}
-          senitizedValue={senitizedValue as Array<string>}
+          thumbnails={thumbnails}
           settingType={settingType}
         />
         {settingType === "custom" && (

src/renderer/src/components/app/setting/content/background/images/SettingBackgroundImagesContent.tsx

@@ -42,8 +42,11 @@ const SettingBackgroundImagesContent = memo(
                 />
                 {/* RIGHT PREVIEW */}
                 <SettingBackgroundImagePreview
-                  selectedIndex={selectedBackgroundImageIndex}
-                  backgroundList={backgroundList}
+                  selectedBackground={
+                    typeof selectedBackgroundImageIndex === "number"
+                      ? backgroundList[selectedBackgroundImageIndex]
+                      : null
+                  }
                   className={cn({
                     "h-80": height === "short",
                   })}

src/renderer/src/components/app/setting/content/background/images/SettingBackgroundImagesDetails.tsx

@@ -7,15 +7,15 @@ import { AnimatePresence, motion } from "motion/react";
 
 interface Props {
   folderPath: string | null;
-  senitizedValue: Array<string>;
+  thumbnails: Array<string>;
   activeTab: TSettingTab;
   settingType: SettingType;
   isOpen: boolean;
 }
 
 const SettingBackgroundImagesDetails = ({
   folderPath,
-  senitizedValue,
+  thumbnails,
   activeTab,
   settingType,
   isOpen,
@@ -39,7 +39,7 @@ const SettingBackgroundImagesDetails = ({
           <SettingItemHorizontalLayout className="flex-col justify-center items-center gap-4">
             <SettingBackgroundImagesFolderPath path={folderPath} />
             <SettingBackgroundImagesContent
-              backgroundList={senitizedValue}
+              backgroundList={thumbnails}
               /* if images showing from project and global then short height */
               height={
                 activeTab === "project" && settingType === "global"

src/renderer/src/context/setting/background/SettingBackgroundProvider.tsx

@@ -14,6 +14,7 @@ interface SettingBackgroundContext {
   ) => void;
   settingType: SettingType;
   senitizedValue: string | Array<string> | undefined;
+  thumbnails: Array<string>;
   folderPath: string | null;
   handleChange: (
     method?: UpdateBackgroundImagePayloadMethodType | undefined,
@@ -49,6 +50,7 @@ const SettingBackgroundProvider = ({
   const {
     settingType,
     senitizedValue,
+    thumbnails,
     folderPath,
     handleChange,
     isHideMoreData,
@@ -69,11 +71,11 @@ const SettingBackgroundProvider = ({
           ? 0
           : Math.abs(
               direction === "left"
-                ? (senitizedValue?.length ?? 0) + prev - 1
+                ? (thumbnails?.length ?? 0) + prev - 1
                 : prev + 1,
-            ) % (senitizedValue?.length ?? 0),
+            ) % (thumbnails?.length ?? 0),
       ),
-    [senitizedValue?.length],
+    [thumbnails?.length],
   );
 
   return (
@@ -84,6 +86,7 @@ const SettingBackgroundProvider = ({
         handleNavigateSelectedBackgroundImageIndex,
         settingType,
         senitizedValue,
+        thumbnails,
         folderPath,
         handleChange,
         isHideMoreData,

src/renderer/src/hooks/setting/use-check-applying-background.tsx

@@ -5,6 +5,7 @@ import { selectSettingBackground } from "@/context/redux/setting/selectors/setti
 
 const useCheckApplyingBackground = (): {
   backgroundImages: Array<string> | string;
+  backgroundThumbnails: Array<string> | null;
   backgroundOpacity: number;
   backgroundBlur: number;
   slideInterval: number;
@@ -44,10 +45,13 @@ const useCheckApplyingBackground = (): {
       : global.slideInterval) ?? DEFAULT_SETTINGS.slideInterval!;
   if (slideInterval < 0) slideInterval = DEFAULT_SETTINGS.slideInterval!;
 
-  if (!backgroundImages?.length) return null;
+  if (typeof backgroundImages !== "object" || !backgroundImages.images?.length)
+    return null;
 
   return {
-    backgroundImages: backgroundImages.slice(1, maxNumberOfImages),
+    backgroundImages: backgroundImages?.images.slice(1, maxNumberOfImages),
+    backgroundThumbnails:
+      backgroundImages?.thumbnails?.slice(1, maxNumberOfImages) ?? null,
     backgroundOpacity,
     backgroundBlur,
     maxNumberOfImages,

src/renderer/src/hooks/setting/use-check-applying-setting-scope-background-images.tsx

@@ -4,20 +4,27 @@ import {
   selectBackgroundImagesLocal,
 } from "@/context/redux/setting/selectors/setting";
 import { useSetting } from "@/context/setting/SettingProvider";
+import { SettingsInterface } from "@shared/types/setting.types";
 
 const useCheckApplyingSettingScopeBackgroundImages = () => {
   const { activeTab } = useSetting();
   const backgroundImagesGlobal = useAppSelector(selectBackgroundImagesGlobal);
   const backgroundImagesLocal = useAppSelector(selectBackgroundImagesLocal);
 
-  let backgroundImages = (
+  const backgroundImages = (
     activeTab === "project"
       ? (backgroundImagesLocal ?? backgroundImagesGlobal)
       : backgroundImagesGlobal
-  ) as Array<string> | string;
+  ) as SettingsInterface["backgroundImages"];
 
-  if (backgroundImages === "default" || !backgroundImages)
-    backgroundImages = [];
+  if (
+    backgroundImages &&
+    typeof backgroundImages === "object" &&
+    "thumbnails" in backgroundImages
+  )
+    return backgroundImages["thumbnails"];
+
+  if (backgroundImages === "default" || !backgroundImages) return [];
 
   return backgroundImages;
 };

src/renderer/src/hooks/setting/use-check-background-setting-images.tsx

@@ -6,9 +6,9 @@ import {
 import { useSetting } from "@/context/setting/SettingProvider";
 import { DEFAULT_SETTINGS } from "@/constant/settings.constant";
 import { senitizeValue } from "@/utils/settings.utils";
-import type { SettingBackgroundImagesValueType } from "@/hooks/setting/use-global-local-bg-images";
 import useCheckApplyingSettingScopeBackgroundImages from "@/hooks/setting/use-check-applying-setting-scope-background-images";
 import useGlobalLocalBgImages from "@/hooks/setting/use-global-local-bg-images";
+import { SettingsInterface } from "@shared/types/setting.types";
 
 const useCheckBackgroundSettingImages = () => {
   const { activeTab } = useSetting();
@@ -23,24 +23,32 @@ const useCheckBackgroundSettingImages = () => {
       activeTab,
     });
 
-  const senitizedValue = senitizeValue(
-    value,
-    DEFAULT_SETTINGS.backgroundImages,
-  ) as SettingBackgroundImagesValueType;
+  const senitizedValue = senitizeValue<
+    Exclude<SettingsInterface["backgroundImages"], "default">
+  >(value, DEFAULT_SETTINGS.backgroundImages);
+
+  const folderPath =
+    (typeof senitizedValue === "object" ? senitizedValue?.folderUrl : null) ??
+    null;
+
+  const images =
+    (typeof senitizedValue === "object" ? senitizedValue?.images : []) ?? [];
 
-  const folderPath = Array.isArray(senitizedValue) ? senitizedValue[0] : null;
+  const thumbnails =
+    (typeof senitizedValue === "object" ? senitizedValue?.thumbnails : []) ??
+    [];
 
   const isHideMoreData =
     !Array.isArray(backgroundImages) || !backgroundImages.length;
 
   return {
     value,
+    images,
+    thumbnails,
     handleChange,
     handleChangeSettingType,
     settingType,
-    senitizedValue: Array.isArray(senitizedValue)
-      ? senitizedValue?.slice(1)
-      : [],
+    senitizedValue: Array.isArray(senitizedValue) ? senitizedValue : [],
     folderPath,
     activeTab,
     isHideMoreData,

src/renderer/src/hooks/setting/use-global-local-bg-images.tsx

@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import type {
+  BackgroundImagesInterface,
+  SettingsInterface,
   SettingType,
   UpdateBackgroundImagePayloadMethodType,
 } from "@shared/types/setting.types";
@@ -12,23 +14,17 @@ const checkIsDefaultType = (value: unknown) =>
   [-1, "default"].includes(value as number | string);
 
 interface UseGlobalLocalBgImagesProps {
-  globalSetting: SettingBackgroundImagesValueType;
-  localSetting: SettingBackgroundImagesValueType;
+  globalSetting: SettingsInterface["backgroundImages"];
+  localSetting: SettingsInterface["backgroundImages"];
   activeTab: TSettingTab;
 }
 
-export type SettingBackgroundImagesValueType =
-  | Array<string>
-  | string
-  | null
-  | undefined;
-
 const useGlobalLocalBgImages = ({
   globalSetting,
   localSetting,
   activeTab,
 }: UseGlobalLocalBgImagesProps): {
-  value: SettingBackgroundImagesValueType;
+  value: SettingsInterface["backgroundImages"];
   handleChange: (method?: UpdateBackgroundImagePayloadMethodType) => void;
   handleChangeSettingType: (value: SettingType) => void;
   settingType: SettingType;
@@ -67,7 +63,7 @@ const useGlobalLocalBgImages = ({
     if (settingType === "default")
       return localSetting ?? globalSetting ?? DEFAULT_SETTINGS.backgroundImages;
 
-    return localSetting ?? [];
+    return localSetting;
   }, [activeTab, globalSetting, localSetting, settingType]);
 
   const handleChange = useCallback(