feat: add pdf preview & env

.env.example

@@ -12,3 +12,4 @@ DATABASE_URL=postgresql://${DATABASE_USER}:${DATABASE_PASSWORD}@${DATABASE_HOST}
 # Redis
 REDIS_HOST=localhost
 REDIS_PORT=6379
+ENABLE_PDF=true

docker/root/etc/services.d/kaizoku/run

@@ -9,7 +9,13 @@ umask 022
 mangal config set -k metadata.comic_info_xml --value true
 mangal config set -k metadata.fetch_anilist --value true
 mangal config set -k metadata.series_json --value true
-mangal config set -k formats.use --value "cbz"
+
+if [[ -z "${ENABLE_PDF}" ]]; then
+  mangal config set -k formats.use --value "cbz"
+else
+  mangal config set -k formats.use --value "pdf"
+fi
+
 mangal config set -k downloader.download_cover --value true
 mangal config set -k downloader.redownload_existing --value true
 mangal config set -k downloader.chapter_name_template --value "[{padded-index}] {chapter}"

src/components/chaptersTable.tsx

@@ -7,6 +7,8 @@ import { Center, Tooltip } from '@mantine/core';
 import { IconAlertTriangle, IconCheck } from '@tabler/icons-react';
 import prettyBytes from 'pretty-bytes';
 import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import { sanitizer } from '../utils';
 
 const mangaWithMetadataAndChaptersAndOutOfSyncChaptersAndLibrary = Prisma.validator<Prisma.MangaArgs>()({
   include: { metadata: true, chapters: true, library: true, outOfSyncChapters: true },
@@ -22,6 +24,11 @@ export function ChaptersTable({ manga }: { manga: MangaWithMetadataAndChaptersAn
   const [page, setPage] = useState(1);
   const [records, setRecords] = useState(manga.chapters.slice(0, PAGE_SIZE));
 
+  const Router = useRouter();
+  const origin =
+    typeof window !== 'undefined' && window.location.origin ? window.location.origin : 'http://localhost:3000';
+  const sanitizedTitle = `${sanitizer(manga.title)}`;
+
   useEffect(() => {
     const from = (page - 1) * PAGE_SIZE;
     const to = from + PAGE_SIZE;
@@ -30,6 +37,9 @@ export function ChaptersTable({ manga }: { manga: MangaWithMetadataAndChaptersAn
 
   return (
     <DataTable
+      onCellClick={({ record }) => {
+        Router.push(`${origin}/api/read/title=${sanitizedTitle}&fileName=${record.fileName}`);
+      }}
       withBorder
       withColumnBorders
       striped

src/pages/api/read/[...slug].ts

@@ -0,0 +1,23 @@
+import { readFileSync } from 'fs';
+import { NextApiRequest, NextApiResponse } from 'next';
+import path from 'path';
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  // const imagePath = req;
+  if (process.env.ENABLE_PDF) {
+    const { slug } = req.query;
+    if (slug) {
+      const title = slug[0].split('&')[0].split('=')[1];
+      const fileName = slug[0].split('&')[1].split('=')[1];
+
+      if (fileName.split('.')[1] !== 'pdf') res.send('ERR: Incorrect File type. File is not of type application/pdf');
+
+      const filePath = path.resolve(`/data/${title}/${fileName}`);
+      const pdfBuffer = readFileSync(filePath);
+      res.setHeader('Content-Type', 'application/pdf');
+      return res.send(pdfBuffer);
+    }
+  }
+
+  return res.send('PDF Preview not enabled, set ENABLE_PDF=true in your ENV and relaunch the container!');
+}