✨ Add episode detail view with image retrieval

Author: Xen0Xys

components/items/EpisodeItem.vue

@@ -2,20 +2,32 @@
 import Image from "~/components/misc/Image.vue";
 
 const props = defineProps<{
-    episode: Episode
+    episode: EpisodeWithProgression
 }>();
 </script>
 
 <template>
-    <NuxtLink class="flex h-20 border border-t-0 hover:cursor-pointer hover:bg-secondary md:h-24 lg:h-28">
-        <Image :sum="episode.thumbnail"/>
+    <NuxtLink
+        class="flex h-20 border border-t-0 transition-colors hover:cursor-pointer md:h-24 lg:h-28"
+        :class="[
+            (episode.progression || 0) > 0 ? 'bg-amber-100/30' : 'hover:bg-secondary',
+        ]"
+        :to="'/episode/' + episode.id"
+    >
+        <Image :sum="episode.thumbnail" />
         <div class="flex grow items-center justify-center p-2">
             <div class="flex grow items-center gap-2 md:w-[25rem] lg:w-[35rem]">
-                <UiBadge v-if="props.episode.isNew" variant="default" class="h-max">New</UiBadge>
-                <h4 class="truncate">{{episode.title}}</h4>
+                <UiBadge
+                    v-if="props.episode.isNew"
+                    variant="default"
+                    class="h-max"
+                >
+                    New
+                </UiBadge>
+                <h4 class="truncate">{{ episode.title }}</h4>
             </div>
             <div>
-                <p class="opacity-50">#{{episode.number}}</p>
+                <p class="opacity-50">#{{ episode.number }}</p>
             </div>
         </div>
     </NuxtLink>

pages/episode/[id].vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import Image from "~/components/misc/Image.vue";
+
+const id = useRoute().params.id;
+const serverUrl = useLocalStorage("serverUrl", "");
+const router = useRouter();
+
+// Récupération de l'épisode
+const {data: episode} = await useAsyncData<EpisodeWithProgression>(
+    "episode",
+    () => $fetch(`${serverUrl.value}/webtoons/episodes/${id}`), {server: false});
+
+// Récupération des images de l'épisode
+const {data: images} = await useAsyncData<string[]>(
+    "episode-images",
+    () => $fetch(`${serverUrl.value}/webtoons/episodes/${id}/images`), {server: false});
+
+</script>
+
+<template>
+    <div class="flex h-screen flex-col bg-background">
+        <div class="flex items-center justify-between p-4 shadow-md">
+            <NuxtLink class="flex items-center gap-2" @click="router.back">
+                <UiButton variant="ghost" size="icon">
+                    <Icon name="iconoir:arrow-left" />
+                </UiButton>
+                <h1 class="text-xl font-semibold">{{ episode?.title }}</h1>
+            </NuxtLink>
+        </div>
+
+        <div class="flex-1 overflow-y-auto">
+            <div class="max-w-3xl">
+                <div
+                    v-for="(image, index) in (images || [])"
+                    :key="index"
+                    class="relative overflow-hidden rounded-lg shadow-xl"
+                >
+                    <Image
+                        :sum="image"
+                        class="w-full object-contain"
+                    />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

pages/webtoon/[id].vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import EpisodeItem from "~/components/items/EpisodeItem.vue";
+import type {EpisodeWithProgression} from "~/utils/types";
 
 definePageMeta({
     layout: "navigation",
@@ -13,14 +14,28 @@ const serverUrl = useLocalStorage("serverUrl", "");
 const {data: webtoon} = await useAsyncData<Webtoon>("webtoon", () => $fetch(`${serverUrl.value}/webtoons/${id}`), {
     server: false,
 });
-const {data: episodes} = await useAsyncData<Episode[]>("episodes", () => $fetch(`${serverUrl.value}/webtoons/${id}/episodes`), {
+const {data: episodes} = await useAsyncData<EpisodeWithProgression[]>("episodes", () => $fetch(`${serverUrl.value}/webtoons/${id}/episodes`), {
     server: false,
 });
+const token = useCookie("token").value;
+const {data: progressions} = await useAsyncData<Progression[]>("progressions", async() => {
+    if(!token) return [];
+    try{
+        return await $fetch(`${serverUrl.value}/user/progression/webtoon/${id}`, {
+            headers: {Authorization: `Bearer ${token}`}
+        });
+    }catch{
+        return [];
+    }
+}, {server: false});
 
 const displayCount = ref(50);
 const displayedEpisodes = computed(() => {
     if(!episodes.value)
         return [];
+    episodes.value.forEach((episode) => {
+        episode.progression = progressions.value?.find((progression) => progression.episodeId === episode.id)?.progression ?? 0;
+    });
     if(isIncreasing.value)
         return episodes.value.slice(-displayCount.value).reverse();
     return episodes.value.slice(0, displayCount.value);

utils/types.ts

@@ -16,3 +16,12 @@ export interface Episode{
     isNew: boolean
     thumbnail: string;
 }
+
+export interface EpisodeWithProgression extends Episode{
+    progression?: number;
+}
+
+export interface Progression{
+    episodeId: string;
+    progression: number;
+}