From 03f7c154457f86c17a78fae4c4522425d8b02413 Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Sun, 12 Apr 2026 20:44:00 -0400
Subject: [PATCH] feat(reader): Add dynamic panel detection loading in frontend

- Add enablePanelDetection, libraryType, formatGroup state
- Add panelDetector instance for dynamic loading
- Update initReader to accept and process configuration
- Conditionally load panel detection only when enabled
- Use dynamic import for foliate-js/panel-detection.js
- Add error handling for panel detection loading
---
 web/src/reader/reader.ts | 43 ++++++++++++++++++++++++++++++++++++----
 1 file changed, 39 insertions(+), 4 deletions(-)

diff --git a/web/src/reader/reader.ts b/web/src/reader/reader.ts
index ee3f989..f2ce993 100644
--- a/web/src/reader/reader.ts
+++ b/web/src/reader/reader.ts
@@ -3,20 +3,55 @@ import { Alpine } from "../alpine";
 
 document.addEventListener("alpine:init", () => {
   Alpine.data("readerShell", () => ({
-    async initReader() {
-      console.log("Reader initialized");
+    enablePanelDetection: false,
+    libraryType: "",
+    formatGroup: "",
+    mangaType: "",
+    readingDirection: "",
+    panelDetector: null,
+
+    initReader(config: any) {
+      this.enablePanelDetection = config.enablePanelDetection;
+      this.libraryType = config.libraryType;
+      this.formatGroup = config.formatGroup;
+      this.mangaType = config.mangaType;
+      this.readingDirection = config.readingDirection;
+
+      console.log("Reader initialized with:", {
+        panelDetection: this.enablePanelDetection,
+        library: this.libraryType,
+        format: this.formatGroup,
+      });
+
+      // Only load panel detection if enabled
+      if (this.enablePanelDetection) {
+        this.loadPanelDetection();
+      }
     },
+
+    async loadPanelDetection() {
+      try {
+        // Dynamic import to only load when needed
+        const { PanelDetector } = await import("foliate-js/panel-detection.js");
+        this.panelDetector = new PanelDetector();
+        console.log("Panel detection loaded successfully");
+      } catch (error) {
+        console.error("Failed to load panel detection:", error);
+      }
+    },
+
     nextPage() {
       const view = document.querySelector("#reader-view");
       // @ts-ignore - foliate custom element
       view?.next?.();
     },
+
     previousPage() {
       const view = document.querySelector("#reader-view");
       // @ts-ignore - foliate custom element
       view?.prev?.();
     },
   }));
-});
 
-Alpine.start();
+  Alpine.start();
+});