✨ Implement episode progression

Open-Webtoon-Reader · Oct 11, 2024 · f0d5da5 · f0d5da5
1 parent 714b807
commit f0d5da5
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 13 deletions.
diff --git a/pages/episode/[id].vue b/pages/episode/[id].vue
@@ -2,7 +2,7 @@
 import * as apiurlMiddleware from "~/middleware/apiurl.middleware";
 import {getEpisodeImages, getEpisodeInfos} from "~/utils/api";
 import VisibilityObserver from "~/components/utils/VisibilityObserver.vue";
-import {startEpisode} from "~/utils/storage";
+import {getEpisodeProgression, startEpisode} from "~/utils/storage";
 
 definePageMeta({
     middleware: [
@@ -30,9 +30,11 @@ onBeforeRouteLeave(() => {
     isCancelled.value = true;
 });
 
+const episodeProgression = getEpisodeProgression(id);
+
 const episodeImages = ref<string[]>([]);
 const episodeInfos = ref<any>({});
-const maxIndex = ref<number>(10);
+const maxIndex = ref<number>(episodeProgression < 10 ? 10 : episodeProgression + 10);
 
 function increaseMaxIndex(){
     maxIndex.value += 10;
@@ -42,11 +44,26 @@ async function loadEpisodeImages(){
     const episodeState: any = useState(`episode-${id}`);
     if (episodeState.value && episodeState.value.length){
         episodeImages.value = episodeState.value;
+        setTimeout(() => {
+            scrollToImage();
+        }, 100);
         return;
     }
     const response = await getEpisodeImages(id);
     episodeImages.value = response.data;
     episodeState.value = episodeImages.value;
+
+    setTimeout(() => {
+        scrollToImage();
+    }, 100);
+}
+
+function scrollToImage(){
+    const imageId = episodeImages.value[episodeProgression];
+    if(imageId < 5) return;
+    const nuxtImg = document.getElementById(imageId);
+    if (nuxtImg)
+        nuxtImg.scrollIntoView({behavior: "smooth"});
 }
 
 async function loadEpisodeInfos(){
@@ -64,6 +81,11 @@ async function loadEpisodeInfos(){
     });
 }
 
+function updateProgression(index: number){
+    if(index > 5 && index > episodeProgression)
+        setEpisodeProgression(id, index - 1);
+}
+
 onMounted(async() => {
     loadEpisodeImages();
     loadEpisodeInfos();
@@ -76,18 +98,9 @@ onMounted(async() => {
             <h3 class="m-2">{{ episodeInfos.title }}</h3>
         </div>
         <div v-for="(image, index) of episodeImages.slice(0, maxIndex)" :key="index" class="w-full">
-            <NuxtImg
-                v-if="index < maxIndex - 1"
-                :id="image"
-                :src="sumToImageUrl(image)"
-                format="webp"
-                alt="Episode Image"
-                class="w-full"
-                width="800"
-                height="1280"
-            />
-            <VisibilityObserver v-else @on-display="increaseMaxIndex">
+            <VisibilityObserver @on-display="updateProgression(index)">
                 <NuxtImg
+                    v-if="index < maxIndex - 1"
                     :id="image"
                     :src="sumToImageUrl(image)"
                     format="webp"
@@ -96,6 +109,17 @@ onMounted(async() => {
                     width="800"
                     height="1280"
                 />
+                <VisibilityObserver v-else @on-display="increaseMaxIndex">
+                    <NuxtImg
+                        :id="image"
+                        :src="sumToImageUrl(image)"
+                        format="webp"
+                        alt="Episode Image"
+                        class="w-full"
+                        width="800"
+                        height="1280"
+                    />
+                </VisibilityObserver>
             </VisibilityObserver>
         </div>
         <div id="footer" class="w-full flex flex-row justify-between py-4 px-8 border-[1px]">

diff --git a/utils/storage.ts b/utils/storage.ts
@@ -43,3 +43,27 @@ export function isEpisodeStarted(episodeId: number): boolean{
     }
     return false;
 }
+
+export function setEpisodeProgression(episodeId: number, progression: number): void{
+    if(import.meta.server)
+        return;
+    let progressions = localStorage.getItem("progression");
+    if(progressions){
+        progressions = JSON.parse(progressions);
+        progressions[episodeId] = progression;
+        localStorage.setItem("progression", JSON.stringify(progressions));
+    } else {
+        localStorage.setItem("progression", JSON.stringify({[episodeId]: progression}));
+    }
+}
+
+export function getEpisodeProgression(episodeId: number): number{
+    if(import.meta.server)
+        return;
+    let progressions = localStorage.getItem("progression");
+    if(progressions){
+        progressions = JSON.parse(progressions);
+        return progressions[episodeId] || 0;
+    }
+    return 0;
+}