🐛 Improve episode image management

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

Hide file tree

Showing 2 changed files with 14 additions and 12 deletions.
diff --git a/pages/episode/[id].vue b/pages/episode/[id].vue
@@ -64,11 +64,6 @@ async function loadEpisodeInfos(){
     });
 }
 
-function removeLoadingClass(event: Event){
-    const target = event.target as HTMLImageElement;
-    target.classList.remove("loading-episode");
-}
-
 onMounted(async() => {
     loadEpisodeImages();
     loadEpisodeInfos();
@@ -83,18 +78,23 @@ onMounted(async() => {
         <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 loading-episode"
-                @load="removeLoadingClass"
+                class="w-full"
+                width="800"
+                height="1280"
             />
             <VisibilityObserver v-else @on-display="increaseMaxIndex">
                 <NuxtImg
+                    :id="image"
                     :src="sumToImageUrl(image)"
+                    format="webp"
                     alt="Episode Image"
-                    class="w-full loading-episode"
-                    @load="removeLoadingClass"
+                    class="w-full"
+                    width="800"
+                    height="1280"
                 />
             </VisibilityObserver>
         </div>
@@ -110,7 +110,5 @@ onMounted(async() => {
 </template>
 
 <style scoped>
-.loading-episode{
-    @apply h-96;
-}
+
 </style>
diff --git a/utils/storage.ts b/utils/storage.ts
@@ -19,6 +19,8 @@ export function getOrder(webtoonId: number): boolean{
 }
 
 export function startEpisode(episodeId: number): void{
+    if(import.meta.server)
+        return;
     let episodes = localStorage.getItem("episode");
     if(episodes){
         episodes = JSON.parse(episodes);
@@ -32,6 +34,8 @@ export function startEpisode(episodeId: number): void{
 }
 
 export function isEpisodeStarted(episodeId: number): boolean{
+    if(import.meta.server)
+        return;
     let episodes = localStorage.getItem("episode");
     if(episodes){
         episodes = JSON.parse(episodes);