feat: customize foliate view styles with css, closes #167 (#507)

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);
 

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<HTMLStyleElement | null>(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);
 

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);
 };