Merge pull request #521 from xendke/recursive-epub-toc

Resolves #334
stumpapp · Dec 11, 2024 · ab52b2a · ab52b2a
2 parents 312f5b3 + 2786af4
commit ab52b2a
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 9 deletions.
diff --git a/core/src/db/entity/epub.rs b/core/src/db/entity/epub.rs
@@ -14,6 +14,7 @@ use super::{media::Media, MediaAnnotation};
 pub struct EpubContent {
 	label: String,
 	content: PathBuf,
+	children: Vec<EpubContent>,
 	play_order: u32,
 }
 
@@ -22,6 +23,11 @@ impl From<NavPoint> for EpubContent {
 		EpubContent {
 			label: nav_point.label,
 			content: nav_point.content,
+			children: nav_point
+				.children
+				.into_iter()
+				.map(EpubContent::from)
+				.collect(),
 			play_order: nav_point.play_order as u32,
 		}
 	}
@@ -46,7 +52,7 @@ TODO: convert spine into this structure to match epub.js
 pub struct Epub {
 	/// This is the epub's record in Stump's database
 	pub media_entity: Media,
-	/// A list of spine IDs. See https://www.w3.org/publishing/epub3/epub-ocf.html
+	/// A list of spine IDs. See https://www.w3.org/TR/epub-33/#sec-ocf
 	pub spine: Vec<String>,
 	/// A hashmap of all the resources in the epub. A resource ID maps to a tuple containing the
 	/// path and mime type of the resource.

diff --git a/packages/browser/src/components/readers/epub/locations/TableOfContents.tsx b/packages/browser/src/components/readers/epub/locations/TableOfContents.tsx
@@ -1,11 +1,34 @@
 import { Text } from '@stump/components'
+import { EpubContent } from '@stump/sdk/types'
 import { useCallback } from 'react'
 
 import { useEpubReaderContext } from '../context'
 
 type Props = {
 	onLocationChanged?: () => void
 }
+
+type ItemProps = {
+	item: EpubContent
+	handleSelect: (href: string) => void
+}
+
+function TableOfContentsItem({ item, handleSelect }: ItemProps) {
+	return (
+		<>
+			<button
+				className="justify-start px-1 py-1.5 text-left hover:bg-background-surface"
+				onClick={() => handleSelect(item.content)}
+			>
+				<Text className="line-clamp-1">{item.label}</Text>
+			</button>
+			{item.children.map((childItem) => (
+				<TableOfContentsItem key={childItem.label} item={childItem} handleSelect={handleSelect} />
+			))}
+		</>
+	)
+}
+
 export default function TableOfContents({ onLocationChanged }: Props) {
 	const { readerMeta, controls } = useEpubReaderContext()
 	const { toc } = readerMeta.bookMeta || {}
@@ -24,13 +47,7 @@ export default function TableOfContents({ onLocationChanged }: Props) {
 			aria-label="Table of Contents"
 		>
 			{toc?.map((item) => (
-				<button
-					key={item.label}
-					className="justify-start px-1 py-1.5 text-left hover:bg-background-surface"
-					onClick={() => handleSelect(item.content)}
-				>
-					<Text className="line-clamp-1">{item.label}</Text>
-				</button>
+				<TableOfContentsItem key={item.label} item={item} handleSelect={handleSelect} />
 			))}
 		</div>
 	)

diff --git a/packages/sdk/src/types/generated.ts b/packages/sdk/src/types/generated.ts
@@ -271,7 +271,7 @@ export type Epub = { media_entity: Media; spine: string[]; resources: { [key: st
 
 export type UpdateEpubProgress = { epubcfi: string; percentage: number; is_complete: boolean | null }
 
-export type EpubContent = { label: string; content: string; play_order: number }
+export type EpubContent = { label: string; content: string; children: EpubContent[]; play_order: number }
 
 export type JobStatus = "RUNNING" | "PAUSED" | "COMPLETED" | "CANCELLED" | "FAILED" | "QUEUED"