fix: load custom texture before applying it (#2219)

apps/readest-app/src/app/library/components/LibraryHeader.tsx

@@ -150,7 +150,7 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
               onChange={handleSearchChange}
               spellCheck='false'
               className={clsx(
-                'input rounded-badge bg-base-300/30 h-9 w-full pl-10 pr-10 sm:h-7',
+                'input rounded-badge bg-base-300/45 h-9 w-full pl-10 pr-10 sm:h-7',
                 'font-sans text-sm font-light',
                 'border-none focus:outline-none focus:ring-0',
               )}

apps/readest-app/src/components/Providers.tsx

@@ -16,10 +16,10 @@ import { useCustomTextureStore } from '@/store/customTextureStore';
 import { getLocale } from '@/utils/misc';
 
 const Providers = ({ children }: { children: React.ReactNode }) => {
-  const { appService } = useEnv();
+  const { envConfig, appService } = useEnv();
   const { applyUILanguage } = useSettingsStore();
   const { setScreenBrightness } = useDeviceControlStore();
-  const { applyTexture } = useCustomTextureStore();
+  const { addTexture, applyTexture } = useCustomTextureStore();
   const iconSize = useDefaultIconSize();
   useSafeAreaInsets(); // Initialize safe area insets
 
@@ -51,7 +51,11 @@ const Providers = ({ children }: { children: React.ReactNode }) => {
         const backgroundOpacity = globalViewSettings.backgroundOpacity;
         const backgroundSize = globalViewSettings.backgroundSize;
         if (backgroundTextureId && backgroundTextureId !== 'none') {
-          applyTexture(backgroundTextureId);
+          const customTexture = settings.customTextures.find((t) => t.id === backgroundTextureId);
+          if (customTexture) {
+            addTexture(customTexture.path);
+          }
+          applyTexture(envConfig, backgroundTextureId);
           document.documentElement.style.setProperty(
             '--bg-texture-opacity',
             backgroundOpacity.toString(),
@@ -60,7 +64,7 @@ const Providers = ({ children }: { children: React.ReactNode }) => {
         }
       });
     }
-  }, [appService, applyUILanguage, applyTexture, setScreenBrightness]);
+  }, [envConfig, appService, applyUILanguage, applyTexture, setScreenBrightness]);
 
   // Make sure appService is available in all children components
   if (!appService) return;

apps/readest-app/src/components/WindowButtons.tsx

@@ -28,7 +28,7 @@ const WindowButton: React.FC<WindowButtonProps> = ({ onClick, label, id, childre
   <button
     id={id}
     onClick={onClick}
-    className='window-button text-base-content/85 hover:text-base-content'
+    className='window-button bg-base-200/35 hover:bg-base-200 text-base-content/85 hover:text-base-content'
     aria-label={label}
   >
     {children}

apps/readest-app/src/components/settings/ColorPanel.tsx

@@ -141,7 +141,7 @@ const ColorPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterReset
   }, [backgroundSize]);
 
   const applyBackgroundTexture = () => {
-    applyTexture(selectedTextureId);
+    applyTexture(envConfig, selectedTextureId);
     document.documentElement.style.setProperty(
       '--bg-texture-opacity',
       backgroundOpacity.toString(),

apps/readest-app/src/store/customTextureStore.ts

@@ -14,10 +14,7 @@ interface TextureStoreState {
   loading: boolean;
 
   setTextures: (textures: CustomTexture[]) => void;
-  addTexture: (
-    path: string,
-    options?: Partial<Omit<CustomTexture, 'id' | 'path'>>,
-  ) => CustomTexture;
+  addTexture: (path: string) => CustomTexture;
   removeTexture: (id: string) => boolean;
   updateTexture: (id: string, updates: Partial<CustomTexture>) => boolean;
   getTexture: (id: string) => CustomTexture | undefined;
@@ -25,7 +22,7 @@ interface TextureStoreState {
   getAvailableTextures: () => CustomTexture[];
   clearAllTextures: () => void;
 
-  applyTexture: (textureId: string) => void;
+  applyTexture: (envConfig: EnvConfigType, textureId: string) => Promise<void>;
   loadTexture: (envConfig: EnvConfigType, textureId: string) => Promise<CustomTexture>;
   loadTextures: (envConfig: EnvConfigType, textureIds: string[]) => Promise<CustomTexture[]>;
   loadAllTextures: (envConfig: EnvConfigType) => Promise<CustomTexture[]>;
@@ -267,16 +264,20 @@ export const useCustomTextureStore = create<TextureStoreState>((set, get) => ({
     return texture?.loaded === true && !texture.error && !texture.deletedAt;
   },
 
-  applyTexture: (textureId: string) => {
+  applyTexture: async (envConfig, textureId) => {
     const customTextures = get().getAvailableTextures();
     const allTextures = [...PREDEFINED_TEXTURES, ...customTextures];
-    const selectedTexture = allTextures.find((t) => t.id === textureId);
+    let selectedTexture = allTextures.find((t) => t.id === textureId);
 
     if (!selectedTexture || selectedTexture.id === 'none') {
       unmountBackgroundTexture(document);
       return;
     }
 
+    if (customTextures.find((t) => t.id === textureId) && !get().isTextureLoaded(textureId)) {
+      selectedTexture = await get().loadTexture(envConfig, textureId);
+    }
+
     mountBackgroundTexture(document, selectedTexture);
   },
 

apps/readest-app/src/styles/globals.css

@@ -79,7 +79,6 @@ foliate-view {
 .window-button {
   @apply inline-flex h-6 w-6 items-center justify-center rounded-full;
   @apply transform transition duration-200 ease-in-out hover:scale-105;
-  @apply bg-base-200/85 hover:bg-base-200;
 }
 
 .rounded-window {

apps/readest-app/src/styles/textures.ts

@@ -56,10 +56,10 @@ const createTextureCSS = (texture: BackgroundTexture) => {
       position: relative;
     }
 
-    html::before, .sidebar-container::before, .notebook-container::before,
+    body::before, .sidebar-container::before, .notebook-container::before,
     .foliate-viewer::before {
       content: "";
-      position: absolute;
+      position: fixed;
       top: 0;
       left: 0;
       right: 0;
@@ -68,12 +68,9 @@ const createTextureCSS = (texture: BackgroundTexture) => {
       z-index: 0;
       background-image: url("${texture.blobUrl || texture.url}");
       background-repeat: repeat;
-      background-size: var(--bg-texture-size);
-      mix-blend-mode: var(--bg-texture-blend-mode);
-      opacity: var(--bg-texture-opacity);
-    }
-    html::before {
-      height: 100vh;
+      background-size: var(--bg-texture-size, auto);
+      mix-blend-mode: var(--bg-texture-blend-mode, normal);
+      opacity: var(--bg-texture-opacity, 0.6);
     }`;
 
   return css;