font prop for text and eoub viewers

fekoneko · Oct 22, 2024 · ef6971a · ef6971a
1 parent 9903d47
commit ef6971a
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 11 deletions.
diff --git a/src/components/collection-explorer/work-viewer/NovelWorkViewer.tsx b/src/components/collection-explorer/work-viewer/NovelWorkViewer.tsx
@@ -1,4 +1,4 @@
-import { FC, useCallback, useEffect, useRef } from 'react';
+import { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { useAnimateScroll, useKeyboardEvent } from '@/hooks';
 import { checkTextfieldFocused } from '@/utils/check-textfield-focused';
 import { Work } from '@/types/collection';
@@ -32,6 +32,7 @@ export const NovelWorkViewer: FC<NovelWorkViewerProps> = ({ work }) => {
   const coverImageRef = useRef<SVGSVGElement>(null);
   const scrollContainerRef = useRef<Element>(null);
   const animateScroll = useAnimateScroll(scrollContainerRef);
+  const [fontSrc, setFontSrc] = useState<string | null>(null);
 
   const scrollBy = useCallback(
     (offset: number) => {

diff --git a/src/components/common/EpubView.tsx b/src/components/common/EpubView.tsx
@@ -33,11 +33,12 @@ const getRenditionTheme = (theme: Theme) => ({
 
 export interface EpubViewProps extends HTMLAttributes<HTMLDivElement> {
   src: string;
+  fontSrc?: string;
   onRender?: (document: Document) => void;
 }
 
 export const EpubView = forwardRef<Element, EpubViewProps>(
-  ({ src, onRender, ...divProps }, ref) => {
+  ({ src, fontSrc, onRender, ...divProps }, ref) => {
     const { theme } = useTheme();
     const [rendition, setRendition] = useState<Rendition | null>(null);
     const viewWrapperRef = useRef<HTMLDivElement>(null);
@@ -81,11 +82,22 @@ export const EpubView = forwardRef<Element, EpubViewProps>(
         const iframeDocument = viewWrapper?.getElementsByTagName('iframe')[0]?.contentDocument;
         if (!iframeDocument) return;
 
+        if (fontSrc) {
+          const styleElement = iframeDocument.createElement('style');
+          styleElement.textContent = `
+            @font-face {
+              font-family: 'epub-view-font';
+              src: url(${convertFileSrc(fontSrc)});
+            }`;
+          iframeDocument.head.appendChild(styleElement);
+          iframeDocument.body.style.setProperty('font-family', 'epub-view-font');
+        }
+
         onRender?.(iframeDocument);
       });
 
       return () => abortController.abort();
-    }, [rendition, ref, onRender]);
+    }, [rendition, ref, onRender, fontSrc]);
 
     return (
       <div

diff --git a/src/components/common/TextView.tsx b/src/components/common/TextView.tsx
@@ -4,9 +4,10 @@ import { twMerge } from 'tailwind-merge';
 
 export interface TextViewProps extends HTMLAttributes<HTMLPreElement> {
   src: string;
+  fontSrc?: string;
 }
 
-export const TextView = forwardRef<Element, TextViewProps>(({ src, ...preProps }, ref) => {
+export const TextView = forwardRef<Element, TextViewProps>(({ src, fontSrc, ...preProps }, ref) => {
   const [text, setText] = useState<string | null>(null);
 
   useEffect(() => {
@@ -24,12 +25,26 @@ export const TextView = forwardRef<Element, TextViewProps>(({ src, ...preProps }
   }, [src]);
 
   return (
-    <pre
-      ref={ref as ForwardedRef<HTMLPreElement>}
-      {...preProps}
-      className={twMerge(preProps.className, 'overflow-y-scroll px-[10%] py-8 font-[inherit]')}
-    >
-      {text}
-    </pre>
+    <>
+      {fontSrc && (
+        <style>
+          {`@font-face {
+            font-family: 'text-view-font';
+            src: url(${convertFileSrc(fontSrc)});
+          }`}
+        </style>
+      )}
+
+      <pre
+        ref={ref as ForwardedRef<HTMLPreElement>}
+        {...preProps}
+        className={twMerge(
+          preProps.className,
+          'overflow-y-scroll px-[10%] py-8 font-[text-view-font]',
+        )}
+      >
+        {text}
+      </pre>
+    </>
   );
 });