chore (refactoring): cleanup code and ebook reader

public/assets/components/menubar.css

@@ -39,6 +39,7 @@ google-cast-launcher {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    letter-spacing: 0.3px;
 }
 .component_menubar .action-item .component_icon {
     height: 19px;

public/assets/components/menubar.js

@@ -1,4 +1,5 @@
 import { createElement } from "../lib/skeleton/index.js";
+import { basename } from "../lib/path.js";
 import { loadCSS } from "../helpers/loader.js";
 
 export default class ComponentMenubar extends window.HTMLElement {
@@ -9,7 +10,9 @@ export default class ComponentMenubar extends window.HTMLElement {
         this.innerHTML = `
             <div class="component_container">
                 <span>
-                    <div class="titlebar" style="letter-spacing: 0.3px;">getting_started.pdf</div>
+                    <div class="titlebar">
+                        ${basename(decodeURIComponent(location.pathname + location.hash)) || "&nbsp;"}
+                    </div>
                     <div class="action-item no-select"></div>
                 </span>
             </div>

public/assets/lib/rx.js

@@ -1,9 +1,7 @@
 import { onDestroy } from "./skeleton/index.js";
 import assert from "./assert.js";
-import * as rxjs from "./vendor/rxjs.min.js";
-
-// https://github.com/ReactiveX/rxjs/issues/4416#issuecomment-620847759
-import * as ajaxModule from "./vendor/rxjs-ajax.min.js";
+import * as rxjs from "./vendor/rxjs/rxjs.min.js";
+import * as ajaxModule from "./vendor/rxjs/rxjs-ajax.min.js"; // https://github.com/ReactiveX/rxjs/issues/4416#issuecomment-620847759
 
 export default rxjs;
 export const ajax = ajaxModule.ajax;

public/assets/pages/viewerpage/application_ebook.css

@@ -0,0 +1,19 @@
+.component_ebookviewer {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    width: 100%;
+    flex-grow: 1;
+}
+.component_ebookviewer .ebookviewer_container {
+    display: flex;
+    flex-grow: 1;
+    min-height: 0;
+}
+.component_ebookviewer .ebookviewer_container .epub-container {
+    background: var(--super-light);
+    padding-top: 50px;
+    padding-bottom: 50px;
+    box-sizing: border-box;
+    overflow-x: hidden !important;
+}

public/assets/pages/viewerpage/application_ebook.js

@@ -1,13 +1,86 @@
-import { createElement } from "../../lib/skeleton/index.js";
+import { createElement, onDestroy } from "../../lib/skeleton/index.js";
+import rxjs, { effect } from "../../lib/rx.js";
+import { qs } from "../../lib/dom.js";
+import { loadJS, loadCSS } from "../../helpers/loader.js";
+import { createLoader } from "../../components/loader.js";
+import ctrlError from "../ctrl_error.js";
+
+import { getDownloadUrl } from "./common.js";
+
+import "../../components/menubar.js";
 
 export default function(render) {
     const $page = createElement(`
-        <div class="component_formviewer">
+        <div class="component_ebookviewer">
             <component-menubar></component-menubar>
-            <div>
-                EBOOK
-            </div>
+            <div class="ebookviewer_container" data-bind="epub"></div>
         </div>
     `);
     render($page);
+
+    const removeLoader = createLoader($page);
+    const rendition$ = new rxjs.ReplaySubject(1);
+
+    // feature1: setup the dom
+    const setup$ = rxjs.of(qs($page, `[data-bind="epub"]`)).pipe(
+        rxjs.mergeMap(async ($epub) => {
+            const book = new ePub.Book({
+                replacements: "blobUrl",
+            });
+            const rendition = book.renderTo($epub, {
+                width: "100%", height: "100%",
+                flow: "scrolled-doc",
+                method: "continuous",
+                allowScriptedContent: false,
+            });
+            rendition.display();
+            onDestroy(() => {
+                book.destroy();
+                rendition.destroy();
+            });
+            book.open(getDownloadUrl());
+            await new Promise((done) => {
+                rendition.hooks.render.register(() => {
+                    rendition$.next(rendition);
+                    done();
+                });
+            });
+        }),
+        removeLoader,
+        rxjs.catchError(ctrlError()),
+        rxjs.share(),
+    );
+    effect(setup$);
+
+    // feature2: navigation
+    effect(setup$.pipe(
+        rxjs.mergeMap(() => rxjs.merge(
+            rxjs.fromEvent(document, "keydown"),
+            rendition$.pipe(rxjs.mergeMap(() => rxjs.fromEvent(qs(document, "iframe").contentDocument.body, "keydown"))),
+        )),
+        rxjs.tap((a) => console.log(a.code)),
+        rxjs.map((e) => {
+            switch(e.code) {
+            case "Space": return (r) => r.next();
+            case "ArrowRight": return (r) => r.next();
+            case "PageDown": return (r) => r.next();
+            case "ArrowLeft": return (r) => r.prev();
+            case "PageUp": return (r) => r.prev();
+            }
+            return null;
+        }),
+        rxjs.mergeMap((fn) => fn === null ? rxjs.EMPTY : rendition$.asObservable().pipe(
+            rxjs.first(),
+            rxjs.tap((rendition) => fn(rendition))
+        )),
+        rxjs.catchError(ctrlError()),
+    ));
+}
+
+export function init() {
+    return Promise.all([
+        loadJS(import.meta.url, "../../lib/vendor/epub/zip.min.js"),
+        loadJS(import.meta.url, "../../lib/vendor/epub/epub.min.js"),
+        loadCSS(import.meta.url, "./application_ebook.css"),
+    ]);
 }