update

reader/src/main.jsx

@@ -146,16 +146,16 @@ export function TopicListView() {
                   <CloseIcon className="fill-gray-600" />
                 </button>
                 <div className="absolute bottom-full right-0 p-2 flex space-x-1">
-                  {SUBJECTS.map((subject, vIndex) => (
+                  {SUBJECTS.map((subject) => (
                     <button
                       key={subject.id}
                       className={`flex-1 shadow-xl cursor-pointer px-2 py-1 rounded-md text-xs whitespace-nowrap h-[44px] ${
-                        selectedSubjectIndex === vIndex
+                        selectedSubjectIndex === subject.id
                           ? "bg-blue-100 text-blue-800 font-medium border border-blue-400"
                           : "bg-gray-100 hover:bg-gray-200 border border-gray-400"
                       }`}
                       onClick={() => {
-                        setSelectedSubjectIndex(vIndex);
+                        setSelectedSubjectIndex(subject.id);
                         setIsSelectingSubject(false);
                       }}
                     >
@@ -218,6 +218,7 @@ export function Reader({ topic }) {
           file={topic.files[selectedVersion]}
           compact={config.narrowMode}
           justifyText={config.justifyText}
+          zoomFactor={config.contentZoomFactor}
         />
         <div className="absolute bottom-10 flex justify-between px-4 py-2 w-full z-999">
           <div className="flex w-full space-x-2">
@@ -349,7 +350,7 @@ export function Reader({ topic }) {
   );
 }
 
-export function PDFViewer({ file, compact, justifyText }) {
+export function PDFViewer({ file, compact, zoomFactor, justifyText }) {
   const iframeRef = useRef(null);
   const [content, setContent] = useState(null);
   const htmlContent = useMemo(() => {
@@ -370,7 +371,7 @@ export function PDFViewer({ file, compact, justifyText }) {
                   -moz-osx-font-smoothing: grayscale;
                   margin: 0;
                   padding: 0 12px 40px;
-                  ${compact ? "max-width: 36rem; margin: 0 auto;" : ""}
+                  ${compact ? `max-width: calc(36rem / ${zoomFactor}); margin: 0 auto;` : ""}
                 }
                 ${
                   justifyText
@@ -393,7 +394,7 @@ export function PDFViewer({ file, compact, justifyText }) {
             </html>
           `;
     return fileContent;
-  }, [content, compact, justifyText]);
+  }, [content, compact, justifyText, zoomFactor]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
 
@@ -417,6 +418,9 @@ export function PDFViewer({ file, compact, justifyText }) {
         }
 
         let fileContent = await response.text();
+        if (fileContent === "") {
+          fileContent = "**No Data!**";
+        }
         fileContent = marked.parse(fileContent);
 
         setContent(fileContent);

reader/src/store.js

@@ -1,7 +1,11 @@
 import { create } from "zustand";
 import structure from "./topics.json";
 
-const localSubject = localStorage.getItem("subject") || 0;
+const localSubject = (() => {
+  let subject = localStorage.getItem("subject");
+  subject = typeof subject !== "undefined" ? Number(subject) : 0;
+  return subject;
+})();
 
 export const useStore = create((set, get) => ({
   subject: localSubject,
@@ -30,6 +34,11 @@ export const useStore = create((set, get) => ({
   config: getLocalConfig(),
   changeConfig: (config) => {
     const newConfig = { ...get().config, ...config };
+
+    if ("contentZoomLevel" in config) {
+      newConfig.contentZoomFactor = config.contentZoomLevel / 100;
+    }
+
     set({ config: newConfig });
 
     localStorage.setItem("config", JSON.stringify(newConfig));