online manga reader

src/pages/[manga]/[chapter]/[page].svelte

@@ -0,0 +1,179 @@
+<script>
+    import { goto, url } from "@roxi/routify/runtime/helpers";
+
+    export var page;
+    export var scoped;
+
+    console.log("scoped", scoped);
+
+    var chapter = scoped.chapter;
+    $: chapter = scoped.chapter;
+    console.log("chapter", chapter);
+    var manga = scoped.manga;
+    $: manga = scoped.manga;
+    var atHome = scoped.atHome;
+    $: atHome = scoped.atHome;
+
+    var quality = "data";
+
+    /**
+     * @param {KeyboardEvent} e
+     */
+    function keydown(e) {
+        switch(e.key) {
+            case "ArrowLeft":
+            case "PageUp":
+            case "ArrowUp":
+                prev();
+                break;
+            case "ArrowRight":
+            case "PageDown":
+            case "ArrowDown":
+                next();
+                break;
+        }
+    }
+
+    function next() {
+        if(page > (chapter.data.attributes[quality].length - 2)) return;
+        $goto("./" + (parseInt(page) + 1));
+    }
+
+    function prev() {
+        if(page < 2) return;
+        $goto("./" + (page - 1));
+    }
+
+    /**
+     * @param {MouseEvent} e
+     */
+    function mouseclick(e) {
+        if(xDown !== null) return;
+        if(e.buttons & 8) {
+            e.preventDefault();
+            prev();
+        }
+        if(e.buttons & 16) {
+            e.preventDefault();
+            next();
+        }
+        if(e.buttons & 1) {
+            e.preventDefault();
+            next();
+        }
+    }
+
+    /**
+     * @param {MouseEvent} e
+     */
+    function preventDefault(e) {
+        if([1, 3, 4].includes(e.button)) {
+            console.log("Preventing default");
+            e.preventDefault();
+        }
+    }
+
+
+    var xDown = null;
+    var yDown = null;                                 
+
+    function handleTouchStart(evt) {
+        const firstTouch = evt.touches[0];
+        xDown = firstTouch.clientX;
+        yDown = firstTouch.clientY;
+    };
+
+    function handleTouchMove(evt) {
+        if ( ! xDown || ! yDown ) {
+            return;
+        }
+
+        var xUp = evt.touches[0].clientX;
+        var yUp = evt.touches[0].clientY;
+
+        var xDiff = xDown - xUp;
+        var yDiff = yDown - yUp;
+
+        if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
+            if ( xDiff > 0 ) {
+                /* left swipe */ 
+                next();
+            } else {
+                /* right swipe */
+                prev();
+            }
+        }
+        /* reset values */
+        xDown = null;
+        yDown = null;  
+    };
+</script>
+
+<svelte:window on:keydown={keydown} />
+
+<svelte:head>
+    <title>{manga.title.en} Chapter {chapter.data.attributes.chapter} Page {page}</title>
+</svelte:head>
+
+<div class="top">
+    <a class="back" href={$url("../..")}>Back to chapter list</a>
+</div>
+
+<img draggable={false} on:touchstart={handleTouchStart} on:touchmove={handleTouchMove} on:mousedown={mouseclick} on:mouseup={preventDefault} src={`${atHome}/${quality}/${chapter.data.attributes.hash}/${chapter.data.attributes[quality][page - 1]}`} alt="Page {page} in chapter {chapter.data.attributes.chapter} of {manga.title.en}">
+
+<div class="bottom">
+    {#if page > 1}
+        <a href={$url("./" + (page - 1))} class="prev">Previous</a>
+    {/if}
+    {#if page < chapter.data.attributes[quality].length - 1}
+        <a href={$url("./" + (parseInt(page) + 1))} class="next">Next</a>
+    {/if}
+</div>
+
+<style>
+    img {
+        width: calc(100vw - 16px);
+        height: calc(100vh - 17px);
+        object-fit: contain;
+    }
+
+    .top {
+        position: fixed;
+        top: 10px;
+        left: 0;
+        width: 100%;
+        height: 30px;
+    }
+
+    .back {
+        padding: 10px;
+        background: white;
+        border-radius: 0 0 5px 0;
+    }
+
+    .bottom {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        height: 30px;
+        width: 100%;
+    }
+
+    .next {
+        position: absolute;
+        padding: 5px;
+        right: 0;
+        bottom: 0;
+        background: white;
+        border-radius: 5px 0 0 0;
+    }
+
+    .prev {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        padding: 5px;
+        background: white;
+        border-radius: 0 5px 0 0;
+    }
+</style>

src/pages/[manga]/[chapter]/_layout.svelte

@@ -1,6 +1,5 @@
 <script>
-import request from "../../../util/request";
-
+    import request from "../../../util/request";
 
     export var scoped;
     export var chapter;
@@ -10,14 +9,28 @@ import request from "../../../util/request";
     var manga = scoped.manga;
     $: manga = scoped.manga;
 
-    function getChapter(id) {
-        const data = request("chapter/" + id);
+    async function getChapter(id) {
+        if(chapterData && chapterData.id === id) return chapterData;
+        const data = await request("chapter/" + id);
         console.log(data);
         return data;
     }
 
     var chapterData = getChapter(chapter);
     $: chapterData = getChapter(chapter);
+
+    async function getAtHome(id) {
+        if(chapterData && chapterData.id === id) return atHome;
+        const { baseUrl } = await request("at-home/server/" + id);
+        return baseUrl;
+    }
+
+    var atHome = getAtHome(chapter);
+    $: atHome = getAtHome(chapter);
 </script>
 
-<slot scoped={({ manga, mangaId, id: chapter, chapter: chapterData })} />
+{#await Promise.all([chapterData, atHome])}
+    Loading data...
+{:then [chapterData, atHome]}
+    <slot scoped={({ manga, mangaId, id: chapter, chapter: chapterData, atHome })} />
+{/await}

src/pages/[manga]/[chapter]/index.svelte

@@ -0,0 +1,5 @@
+<script>
+    import { goto } from "@roxi/routify/runtime/helpers";
+
+    $goto("./1");
+</script>

src/pages/[manga]/index.svelte

@@ -198,6 +198,12 @@
 <main>
     <h1>{manga.title.en}</h1>
 
+    <div class="linklist">
+        <a href={$url("..")}>Go back to search page</a>
+    </div>
+
+    <br>
+
     <div class="state {state}">
         <div class="progress" style="width: {progress * 100}%;"></div>