v0.2.5

4 files changed, 52 insertions, 83 deletions

diff --git a/components/Details.vue b/components/Details.vue
index ae8bce4..7bb5557 100644
--- a/components/Details.vue
+++ b/components/Details.vue
@@ -1,53 +1,53 @@
 <template>
     <section class="space-y-4">
         <section class="space-y-4">
-            <section v-if="information.info.bannerImage" class="flex justify-center items-center">
-                <NuxtImg :src="information.info.bannerImage" :alt="information.info.title.romaji"
-                    :title="information.info.title.romaji" class="w-full h-20 md:h-40 object-cover rounded-sm opacity-75" />
+            <section v-if="info.bannerImage" class="flex justify-center items-center">
+                <NuxtImg :src="info.bannerImage" :alt="info.title.romaji"
+                    :title="info.title.romaji" class="w-full h-20 md:h-40 object-cover rounded-sm opacity-75" />
             </section>
             <section class="flex flex-col">
-                <h2 class="text-secondary text-2xl font-semibold">{{ information.info.title.romaji }}</h2>
-                <p class="text-primary">{{ information.info.title.native }}</p>
+                <h2 class="text-secondary text-2xl font-semibold">{{ info.title.romaji }}</h2>
+                <p class="text-primary">{{ info.title.native }}</p>
             </section>
             <section class="grid grid-cols-[auto,1fr] gap-4">
                 <div class="hidden md:flex flex-col gap-2">
-                    <NuxtImg :src="information.info.coverImage.large" :alt="information.info.title.romaji"
-                        :title="information.info.title.romaji" class="w-full h-72 object-cover rounded-sm" />
-                    <NuxtLink v-if="information.episodes.episodes && information.episodes.episodes.length > 0"
-                        :to="`/e/${id}/${information.episodes.episodes[0].id}`"
+                    <NuxtImg :src="info.coverImage.large" :alt="info.title.romaji"
+                        :title="info.title.romaji" class="w-full h-72 object-cover rounded-sm" />
+                     <NuxtLink v-if="episodes && episodes.length > 0"
+                        :to="`/e/${id}/${episodes[0].id}`"
                         class="text-primary bg-secondary text-center rounded-sm py-1 hover:bg-opacity-75">
                         Watch Now</NuxtLink>
                 </div>
                 <div class="flex flex-col gap-2">
                     <div class="flex items-center gap-1">
-                        <p class="text-primary">{{ information.info.season }}</p>
-                        <p class="text-primary">{{ information.info.year }}</p>
+                        <p class="text-primary">{{ info.season }}</p>
+                        <p class="text-primary">{{ info.seasonYear }}</p>
                     </div>
                     <div class="flex flex-wrap items-center gap-1">
-                        <p class="text-primary bg-secondary rounded-sm px-2">{{ information.info.episodes ?
-                            information.info.episodes : "?" }} Episodes
+                        <p class="text-primary bg-secondary rounded-sm px-2">{{ info.episodes ?
+                            info.episodes : "?" }} Episodes
                         </p>
-                        <p v-if="information.info.score.averageScore" class="text-primary bg-secondary rounded-sm px-2">{{
-                            information.info.score.averageScore }}%</p>
-                        <p class="text-primary bg-secondary rounded-sm px-2">{{ information.info.format }}</p>
-                        <p class="text-primary bg-secondary rounded-sm px-2">{{ information.info.status }}</p>
+                        <p v-if="info.averageScore" class="text-primary bg-secondary rounded-sm px-2">{{
+                            info.averageScore }}%</p>
+                        <p class="text-primary bg-secondary rounded-sm px-2">{{ info.format }}</p>
+                        <p class="text-primary bg-secondary rounded-sm px-2">{{ info.status }}</p>
                     </div>
                     <div class="flex flex-wrap items-center gap-1">
-                        <div v-for="(genre, index) in information.info.genres" :key="index">
+                        <div v-for="(genre, index) in info.genres" :key="index">
                             <p class="text-secondary bg-primary rounded-sm px-2">{{ genre }}</p>
                         </div>
                     </div>
-                    <div v-html="information.info.description" class="text-primary w-full h-48 overflow-y-auto pr-2" />
+                    <div v-html="info.description" class="text-primary w-full h-48 overflow-y-auto pr-2" />
                 </div>
             </section>
             <section class="flex md:hidden justify-center items-center w-full">
-                <NuxtLink v-if="information.episodes.episodes && information.episodes.episodes.length > 0"
-                    :to="`/e/${id}/${information.episodes.episodes[0].id}`"
+                <NuxtLink v-if="episodes && episodes.length > 0"
+                    :to="`/e/${id}/${episodes[0].id}`"
                     class="text-primary bg-secondary w-full text-center rounded-sm py-1 hover:bg-opacity-75">
                     Watch Now</NuxtLink>
             </section>
         </section>
-        <section v-if="information.recommendations.results && information.recommendations.results.length > 0"
+        <!-- <section v-if="information.recommendations.results && information.recommendations.results.length > 0"
             class="space-y-4">
             <section class="flex flex-col">
                 <h2 class="text-secondary text-xl font-semibold">Recommendations</h2>
@@ -65,19 +65,12 @@
                     </div>
                 </NuxtLink>
             </section>
-        </section>
+        </section> -->
     </section>
 </template>
 
 <script setup>
 const { id } = defineProps(["id"]);
-const { data: information } = await useAsyncData("information", async () => {
-    const [info, episodes, recommendations] = await Promise.all([
-        $fetch("https://api.amvstr.me/api/v2/info/" + id),
-        $fetch("https://api.amvstr.me/api/v2/episode/" + id),
-        $fetch("https://api.amvstr.me/api/v2/recommendations/" + id)
-    ]);
-
-    return { info, episodes, recommendations }
-});
+const { data: info } = await useFetch("/api/info?id=" + id);
+const { data: episodes } = await useFetch("/api/episodes?id=" + id);
 </script>
\ No newline at end of file
diff --git a/components/Popular.vue b/components/Popular.vue
index 4b2dbcf..a8ac5d7 100644
--- a/components/Popular.vue
+++ b/components/Popular.vue
@@ -5,13 +5,13 @@
             <p class="text-primary text-sm">Most Popular Anime</p>
         </section>
         <section class="grid grid-cols-2 md:grid-cols-8 gap-2">
-            <NuxtLink :to="`/i/${item.id}`" class="w-full space-y-1" v-for="item in popular">
-                <NuxtImg :src="item.cover" :alt="item.title" :title="item.title"
+            <NuxtLink :to="`/i/${item.id}`" class="w-full space-y-1" v-for="item in data">
+                <NuxtImg :src="item.coverImage.large" :alt="item.title.romaji" :title="item.title.romaji"
                     class="w-full h-44 md:h-56 object-cover rounded-sm hover:scale-95" />
-                <h6 class="text-primary text-sm truncate">{{ item.title }}</h6>
+                <h6 class="text-primary text-sm truncate">{{ item.title.romaji }}</h6>
                 <div class="flex items-center gap-1">
-                    <p class="text-primary bg-secondary text-sm rounded-sm px-1.5">{{ item.type }}</p>
-                    <p class="text-secondary bg-primary text-sm rounded-sm px-1.5">{{ item.year }}</p>
+                    <p class="text-primary bg-secondary text-sm rounded-sm px-1.5">{{ item.format }}</p>
+                    <p class="text-secondary bg-primary text-sm rounded-sm px-1.5">{{ item.seasonYear }}</p>
                 </div>
             </NuxtLink>
         </section>
@@ -19,15 +19,5 @@
 </template>
 
 <script setup>
-const { data: popular } = await useFetch("https://api.amvstr.me/api/v2/popular?limit=8", {
-    transform: (popular) => {
-        return popular.results.map((anime) => ({
-            id: anime.id,
-            title: anime.title.romaji,
-            cover: anime.coverImage.large,
-            type: anime.format,
-            year: anime.seasonYear
-        }));
-    }
-});
+const { data } = await useFetch("/api/popular");
 </script>
\ No newline at end of file
diff --git a/components/Stream.vue b/components/Stream.vue
index 393174d..816f8bc 100644
--- a/components/Stream.vue
+++ b/components/Stream.vue
@@ -1,19 +1,20 @@
 <template>
     <section class="space-y-4">
         <section class="flex flex-col">
-            <h2 class="text-secondary text-2xl font-semibold">{{ information.stream.info.title }}</h2>
-            <p class="text-primary">Episode {{ information.stream.info.episode }}</p>
+            <h2 class="text-secondary text-2xl font-semibold">{{ stream.info.title }}</h2>
+            <p class="text-primary">Episode {{ stream.info.episode }}</p>
         </section>
         <section class="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4">
-            <iframe :src="information.stream.plyr.main" frameborder="0" class="w-full h-auto md:h-96 rounded-sm" />
-            <div class="flex flex-col gap-2">
-                <h2 class="text-secondary text-2xl font-semibold">Episodes</h2>
-                <div class="flex flex-col w-full h-80 overflow-y-auto gap-2 pr-2">
-                    <NuxtLink :to="`/e/${id}/${episode.id}`" v-for="episode in information.episodes.episodes" class="bg-sub rounded-sm py-2 px-4">
-                        <h6 class="text-secondary text-lg font-semibold">{{ episode.title }}</h6>
-                        <p class="text-primary">Episode {{ episode.number }}</p>
-                    </NuxtLink>
-                </div>
+            <iframe :src="stream.plyr.default" frameborder="0" class="w-full h-auto md:h-96 rounded-sm" />
+        </section>
+        <section class="space-y-4">
+            <h2 class="text-secondary text-2xl font-semibold">Episodes</h2>
+            <div class="grid grid-cols-1 md:grid-cols-6 w-full overflow-y-auto gap-2 pr-2">
+                <NuxtLink :to="`/e/${id}/${episode.id}`" v-for="episode in episodes" :title="episode.title"
+                    class="bg-sub rounded-sm py-2 px-4">
+                    <h6 class="text-secondary text-base font-semibold">Episode {{ episode.number }}</h6>
+                    <p class="text-primary truncate">{{ episode.title }}</p>
+                </NuxtLink>
             </div>
         </section>
     </section>
@@ -21,12 +22,7 @@
 
 <script setup>
 const { id, episode } = defineProps(["id", "episode"]);
-const { data: information } = await useAsyncData("information", async () => {
-    const [episodes, stream] = await Promise.all([
-        $fetch("https://api.amvstr.me/api/v2/episode/" + id),
-        $fetch("https://api.amvstr.me/api/v2/stream/" + episode)
-    ]);
-
-    return { episodes, stream }
-});
+const { data: stream } = await useFetch("/api/stream?id=" + episode);
+const { data: episodes } = await useFetch("/api/episodes?id=" + id);
+console.log(episodes.value);
 </script>
\ No newline at end of file
diff --git a/components/Trending.vue b/components/Trending.vue
index cada286..19477e0 100644
--- a/components/Trending.vue
+++ b/components/Trending.vue
@@ -5,13 +5,13 @@
             <p class="text-primary text-sm">Currently Trending Anime</p>
         </section>
         <section class="grid grid-cols-2 md:grid-cols-8 gap-2">
-            <NuxtLink :to="`/i/${item.id}`" class="w-full space-y-1" v-for="item in trending">
-                <NuxtImg :src="item.cover" :alt="item.title" :title="item.title"
+            <NuxtLink :to="`/i/${item.id}`" class="w-full space-y-1" v-for="item in data">
+                <NuxtImg :src="item.coverImage.large" :alt="item.title.romaji" :title="item.title.romaji"
                     class="w-full h-44 md:h-56 object-cover rounded-sm hover:scale-95" />
-                <h6 class="text-primary text-sm truncate">{{ item.title }}</h6>
+                <h6 class="text-primary text-sm truncate">{{ item.title.romaji }}</h6>
                 <div class="flex items-center gap-1">
-                    <p class="text-primary bg-secondary text-sm rounded-sm px-1.5">{{ item.type }}</p>
-                    <p class="text-secondary bg-primary text-sm rounded-sm px-1.5">{{ item.year }}</p>
+                    <p class="text-primary bg-secondary text-sm rounded-sm px-1.5">{{ item.format }}</p>
+                    <p class="text-secondary bg-primary text-sm rounded-sm px-1.5">{{ item.seasonYear }}</p>
                 </div>
             </NuxtLink>
         </section>
@@ -19,15 +19,5 @@
 </template>
 
 <script setup>
-const { data: trending } = await useFetch("https://api.amvstr.me/api/v2/trending?limit=8", {
-    transform: (trending) => {
-        return trending.results.map((anime) => ({
-            id: anime.id,
-            title: anime.title.romaji,
-            cover: anime.coverImage.large,
-            type: anime.format,
-            year: anime.seasonYear
-        }));
-    }
-});
+const { data } = await useFetch("/api/trending");
 </script>
\ No newline at end of file