diff --git a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx index c264f6df..9be3f7ca 100644 --- a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx +++ b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx @@ -45,7 +45,7 @@ const FoliateViewer: React.FC<{ return () => clearTimeout(timer); }, [toastMessage]); - useUICSS(viewSettings); + useUICSS(bookKey, viewSettings); useProgressSync(bookKey); useProgressAutoSave(bookKey); @@ -138,6 +138,7 @@ const FoliateViewer: React.FC<{ console.log('Opening book', bookKey); await import('foliate-js/view.js'); const view = wrappedFoliateView(document.createElement('foliate-view') as FoliateView); + view.id = `foliate-view-${bookKey}`; document.body.append(view); containerRef.current?.appendChild(view); diff --git a/apps/readest-app/src/hooks/useUICSS.ts b/apps/readest-app/src/hooks/useUICSS.ts index 88e3bcca..1a481906 100644 --- a/apps/readest-app/src/hooks/useUICSS.ts +++ b/apps/readest-app/src/hooks/useUICSS.ts @@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'; // This hook allows you to inject custom CSS into the reader UI. // Note that the book content is rendered in an iframe, so UI CSS won't affect book rendering. -export const useUICSS = (viewSettings: ViewSettings) => { +export const useUICSS = (bookKey: string, viewSettings: ViewSettings) => { const [styleElement, setStyleElement] = useState(null); useEffect(() => { @@ -12,8 +12,9 @@ export const useUICSS = (viewSettings: ViewSettings) => { styleElement.remove(); } + const rawCSS = viewSettings.userStylesheet; const newStyleEl = document.createElement('style'); - newStyleEl.textContent = viewSettings.userStylesheet; + newStyleEl.textContent = rawCSS.replace('foliate-view', `#foliate-view-${bookKey}`); document.head.appendChild(newStyleEl); setStyleElement(newStyleEl); diff --git a/apps/readest-app/src/utils/config.ts b/apps/readest-app/src/utils/config.ts index b3841624..f1dfee33 100644 --- a/apps/readest-app/src/utils/config.ts +++ b/apps/readest-app/src/utils/config.ts @@ -13,7 +13,7 @@ export const getDefaultMaxInlineSize = () => { const screenWidth = window.innerWidth; const screenHeight = window.innerHeight; - return screenWidth < screenHeight ? screenWidth : 720; + return screenWidth < screenHeight ? Math.max(screenWidth, 720) : 720; }; export const getDefaultMaxBlockSize = () => { @@ -21,5 +21,5 @@ export const getDefaultMaxBlockSize = () => { const screenWidth = window.innerWidth; const screenHeight = window.innerHeight; - return Math.max(screenWidth, screenHeight); + return Math.max(screenWidth, screenHeight, 1440); };