handle pdf versions & fix reader page bugs

seemorg · Dec 12, 2024 · d5c3144 · d5c3144
1 parent 2ae94c9
commit d5c3144
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 24 deletions.
diff --git a/src/app/[locale]/t/[bookId]/[pageNumber]/page.tsx b/src/app/[locale]/t/[bookId]/[pageNumber]/page.tsx
@@ -44,7 +44,7 @@ export const generateMetadata = async ({
     title: book.primaryName,
     pagePath: navigation.books.reader(bookId),
     keywords: [
-      ...book.otherNames,
+      ...(book.otherNames ? book.otherNames : []),
       ...(book.secondaryName ? [book.secondaryName] : []),
       ...(book.secondaryOtherNames ?? []),
     ],

diff --git a/src/app/[locale]/t/[bookId]/_components/reader-navigation/index.tsx b/src/app/[locale]/t/[bookId]/_components/reader-navigation/index.tsx
@@ -19,6 +19,18 @@ import { tabs } from "../sidebar/tabs";
 import { useState } from "react";
 import { Drawer, DrawerContent } from "@/components/ui/drawer";
 
+const getPdfUrl = (bookResponse: ApiBookResponse) => {
+  if (bookResponse.content.source === "pdf") {
+    return bookResponse.content.url;
+  }
+
+  if ("pdfUrl" in bookResponse.content) {
+    return bookResponse.content.pdfUrl;
+  }
+
+  return undefined;
+};
+
 export default function ReaderNavigation({
   bookResponse,
   isSinglePage,
@@ -35,9 +47,7 @@ export default function ReaderNavigation({
   >(null);
 
   const versionId = bookResponse.content.id;
-
-  const pdf =
-    "pdfUrl" in bookResponse.content ? bookResponse.content.pdfUrl : undefined;
+  const pdf = getPdfUrl(bookResponse);
 
   return (
     <>
@@ -64,21 +74,30 @@ export default function ReaderNavigation({
           </div>
 
           <div className="flex flex-1 justify-center">
-            <ViewTabs hasPdf={!!pdf} />
+            <ViewTabs
+              hasPdf={!!pdf}
+              contentSource={bookResponse.content.source}
+            />
           </div>
 
           <div className="hidden flex-1 items-center gap-2 md:flex md:justify-end">
             <DownloadButton pdf={pdf} slug={bookSlug} />
 
-            <ReaderNavigationButton
-              tooltip={t(isSinglePage ? "all-pages" : "single-page")}
-              tooltipProps={{ side: "bottom" }}
-              asChild
-            >
-              <Link href={bookUrl}>
+            {bookResponse.content.source === "pdf" ||
+            bookResponse.content.source === "external" ? (
+              <ReaderNavigationButton disabled>
                 <SinglePageIcon />
+              </ReaderNavigationButton>
+            ) : (
+              <Link href={bookUrl}>
+                <ReaderNavigationButton
+                  tooltip={t(isSinglePage ? "all-pages" : "single-page")}
+                  tooltipProps={{ side: "bottom" }}
+                >
+                  <SinglePageIcon />
+                </ReaderNavigationButton>
               </Link>
-            </ReaderNavigationButton>
+            )}
           </div>
 
           <div className="flex flex-row-reverse items-center gap-1 md:hidden">

diff --git a/src/app/[locale]/t/[bookId]/_components/reader-navigation/view-tabs.tsx b/src/app/[locale]/t/[bookId]/_components/reader-navigation/view-tabs.tsx
@@ -1,20 +1,30 @@
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useTranslations } from "next-intl";
 import { useReaderView } from "./utils";
+import type { ApiBookResponse } from "@/types/api/book";
 
-export default function ViewTabs({ hasPdf }: { hasPdf?: boolean }) {
+export default function ViewTabs({
+  hasPdf,
+  contentSource,
+}: {
+  hasPdf: boolean;
+  contentSource: ApiBookResponse["content"]["source"];
+}) {
   const t = useTranslations("reader");
   const { view, setView } = useReaderView();
+  const isPdfSource = contentSource === "pdf";
 
   return (
     <Tabs
-      defaultValue="ebook"
-      value={view === "pdf" ? "pdf" : "ebook"}
+      value={isPdfSource || view === "pdf" ? "pdf" : "ebook"}
       onValueChange={setView as any}
       className="hidden md:inline-flex"
     >
       <TabsList>
-        <TabsTrigger value="ebook">{t("e-book")}</TabsTrigger>
+        <TabsTrigger value="ebook" disabled={isPdfSource}>
+          {t("e-book")}
+        </TabsTrigger>
+
         <TabsTrigger value="pdf" disabled={!hasPdf}>
           {t("pdf")}
         </TabsTrigger>

diff --git a/src/app/[locale]/t/[bookId]/_components/usePageNavigation.tsx b/src/app/[locale]/t/[bookId]/_components/usePageNavigation.tsx
@@ -2,9 +2,8 @@ import type { TabProps } from "./sidebar/tabs";
 
 export const usePageNavigation = (bookResponse: TabProps["bookResponse"]) => {
   const source = bookResponse.content.source;
-  const total = bookResponse.pagination.total;
 
-  if (source === "external") {
+  if (source === "external" || source === "pdf") {
     return {
       pagesRange: {
         start: 0,
@@ -18,6 +17,8 @@ export const usePageNavigation = (bookResponse: TabProps["bookResponse"]) => {
     };
   }
 
+  const total = bookResponse.pagination.total;
+
   const firstPage = 1;
   const lastPage = total;
 

diff --git a/src/app/[locale]/t/[bookId]/page.tsx b/src/app/[locale]/t/[bookId]/page.tsx
@@ -47,7 +47,7 @@ export const generateMetadata = async ({
     title: book.primaryName,
     pagePath: navigation.books.reader(bookId),
     keywords: [
-      ...book.otherNames,
+      ...(book.otherNames ? book.otherNames : []),
       ...(book.secondaryName ? [book.secondaryName] : []),
       ...(book.secondaryOtherNames ?? []),
     ],
@@ -90,6 +90,7 @@ export default async function SidebarContent({
     notFound();
   }
 
+  // if it's an alternate slug, redirect to the primary slug
   if ("type" in response) {
     const params = new URLSearchParams(searchParams);
     const paramsString = params.size > 0 ? `?${params.toString()}` : "";
@@ -126,11 +127,7 @@ export default async function SidebarContent({
       </div>
     );
   } else if (response.content.source === "pdf") {
-    readerContent = (
-      <article>
-        <h1>Coming Soon</h1>
-      </article>
-    );
+    readerContent = <PdfView pdf={response.content.url} />;
   } else if (view === "pdf") {
     if (!("pdfUrl" in response.content) || !response.content.pdfUrl) {
       notFound();