fix(layout): make horizontal scroll bar visible in fixed-layout EPUB, closes #3506 (#3512)

And fix some text not shown in fixed-layout EPUB.

apps/readest-app/src/__tests__/utils/replacement.test.ts

@@ -99,6 +99,7 @@ describe('proofreadTransformer', () => {
       viewSettings,
       userLocale: 'en',
       content,
+      isFixedLayout: false,
       sectionHref,
       transformers: ['proofread'],
     };

apps/readest-app/src/app/reader/components/FoliateViewer.tsx

@@ -159,6 +159,7 @@ const FoliateViewer: React.FC<{
               viewSettings,
               width,
               height,
+              isFixedLayout: bookData.isFixedLayout,
               primaryLanguage: bookData.book?.primaryLanguage,
               userLocale: getLocale(),
               content: data,

apps/readest-app/src/app/reader/components/annotator/Annotator.tsx

@@ -175,6 +175,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       viewSettings: getViewSettings(bookKey)!,
       userLocale: getLocale(),
       content: '',
+      isFixedLayout: bookData.isFixedLayout,
       transformers: ['punctuation'],
       reversePunctuationTransform: true,
     }),

apps/readest-app/src/app/reader/hooks/useTTSControl.ts

@@ -225,6 +225,7 @@ export const useTTSControl = ({ bookKey, onRequestHidePanel }: UseTTSControlProp
   };
 
   const viewSettings = getViewSettings(bookKey);
+  const bookData = getBookData(bookKey);
   const ttsTime = useMemo(() => {
     const rate = viewSettings?.ttsRate ?? 1;
     return estimateTTSTime(progress, rate);
@@ -236,7 +237,6 @@ export const useTTSControl = ({ bookKey, onRequestHidePanel }: UseTTSControlProp
     if (vs?.translationEnabled && ttsReadAloudText === 'translated') {
       return vs?.translateTargetLang || getLocale();
     } else if (vs?.translationEnabled && ttsReadAloudText === 'source') {
-      const bookData = getBookData(bookKey);
       return bookData?.book?.primaryLanguage || '';
     }
     return null;
@@ -260,6 +260,7 @@ export const useTTSControl = ({ bookKey, onRequestHidePanel }: UseTTSControlProp
       bookKey,
       viewSettings: getViewSettings(bookKey)!,
       userLocale: getLocale(),
+      isFixedLayout: bookData?.isFixedLayout || false,
       content: '',
       transformers: [],
       reversePunctuationTransform: true,

apps/readest-app/src/services/transformers/style.ts

@@ -6,6 +6,8 @@ export const styleTransformer: Transformer = {
 
   transform: async (ctx) => {
     let result = ctx.content;
+    if (ctx.isFixedLayout) return result;
+
     const styleMatches = [...result.matchAll(/<style[^>]*>([\s\S]*?)<\/style>/gi)];
 
     for (const match of styleMatches) {

apps/readest-app/src/services/transformers/types.ts

@@ -4,6 +4,7 @@ export type TransformContext = {
   bookKey: string;
   viewSettings: ViewSettings;
   userLocale: string;
+  isFixedLayout: boolean;
   primaryLanguage?: string;
   width?: number;
   height?: number;

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

@@ -5,7 +5,7 @@ import { EnvConfigType } from '@/services/environment';
 import { BookDoc } from '@/libs/document';
 import { useLibraryStore } from './libraryStore';
 
-interface BookData {
+export interface BookData {
   /* Persistent data shared with different views of the same book */
   id: string;
   book: Book | null;

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

@@ -18,7 +18,7 @@ import { formatTitle, getMetadataHash, getPrimaryLanguage } from '@/utils/book';
 import { getBaseFilename } from '@/utils/path';
 import { SUPPORTED_LANGNAMES } from '@/services/constants';
 import { useSettingsStore } from './settingsStore';
-import { useBookDataStore } from './bookDataStore';
+import { BookData, useBookDataStore } from './bookDataStore';
 import { useLibraryStore } from './libraryStore';
 import { uniqueId } from '@/utils/misc';
 
@@ -196,11 +196,13 @@ export const useReaderStore = create<ReaderStore>((set, get) => ({
       // book.metaHash = book.metaHash ?? getMetadataHash(bookDoc.metadata);
       book.metaHash = getMetadataHash(bookDoc.metadata);
 
-      const isFixedLayout = FIXED_LAYOUT_FORMATS.has(book.format);
+      const isFixedLayout =
+        bookDoc.rendition?.layout === 'pre-paginated' || FIXED_LAYOUT_FORMATS.has(book.format);
+      const newBookData: BookData = { id, book, file, config, bookDoc, isFixedLayout };
       useBookDataStore.setState((state) => ({
         booksData: {
           ...state.booksData,
-          [id]: { id, book, file, config, bookDoc, isFixedLayout },
+          [id]: newBookData,
         },
       }));
       const configViewSettings = config.viewSettings!;