✨ Implement webtoon reading

Author: Xen0Xys

layouts/FreeNavLayout.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+
+import {Toaster} from "~/components/ui/toast";
+</script>
+
+<template>
+    <div>
+        <Toaster/>
+        <div class="flex flex-col min-h-dvh min-w-vw max-h-dvh max-w-vw">
+            <TopMenu class="w-full bg-background z-10"/>
+            <slot/>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+</style>

pages/episode/[id].vue

@@ -1,17 +1,44 @@
 <script setup lang="ts">
 import * as apiurlMiddleware from "~/middleware/apiurl.middleware";
+import {getEpisodeImages} from "~/utils/api";
+import VisibilityObserver from "~/components/utils/VisibilityObserver.vue";
 
 definePageMeta({
     middleware: [
         apiurlMiddleware.default
     ],
-    layout: "nav-layout"
+    layout: "free-nav-layout"
+});
+
+const id = useRoute().params.id as any as number;
+
+const episodeImages = ref<string[]>([]);
+const maxIndex = ref<number>(10);
+
+function increaseMaxIndex(){
+    maxIndex.value += 10;
+}
+
+onMounted(async() => {
+    const episodeState: any = useState(`episode-${id}`);
+    if (episodeState.value && episodeState.value.length){
+        episodeImages.value = episodeState.value;
+        return;
+    }
+    const response = await getEpisodeImages(id);
+    episodeImages.value = response.data;
+    episodeState.value = episodeImages.value;
 });
 </script>
 
 <template>
-    <div class="flex justify-center h-[calc(theme(height.dvh)-70px)]">
-        <h1>Work in progress</h1>
+    <div class="flex flex-col">
+        <div v-for="image of episodeImages.slice(0, maxIndex)" :key="episodeImages.indexOf(image)" class="flex justify-center">
+            <NuxtImg v-if="episodeImages.indexOf(image) < maxIndex - 1" :src="sumToImageUrl(image)" alt="Episode Image" class="w-full md:w-2/3 lg:w-1/2 xl:w-1/3"/>
+            <VisibilityObserver v-else @on-display="increaseMaxIndex">
+                <NuxtImg :src="sumToImageUrl(image)" alt="Episode Image" class="w-full md:w-2/3 lg:w-1/2 xl:w-1/3"/>
+            </VisibilityObserver>
+        </div>
     </div>
 </template>
 

utils/api.ts

@@ -31,5 +31,9 @@ export function getRandomThumbnail(): Promise<any>{
 }
 
 export function getWebtoon(webtoonId: number): Promise<any>{
-    return axios.get(`/webtoons/${webtoonId}`);
+    return axios.get(`/webtoons/${webtoonId}/raw`);
+}
+
+export function getEpisodeImages(episodeId: number): Promise<any>{
+    return axios.get(`/webtoons/episodes/${episodeId}/images/raw`);
 }