v0.3.0

3 files changed, 129 insertions, 23 deletions

diff --git a/components/Details.vue b/components/Details.vue
index 7bb5557..286e264 100644
--- a/components/Details.vue
+++ b/components/Details.vue
@@ -2,8 +2,8 @@
     <section class="space-y-4">
         <section class="space-y-4">
             <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" />
+                <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">{{ info.title.romaji }}</h2>
@@ -11,17 +11,31 @@
             </section>
             <section class="grid grid-cols-[auto,1fr] gap-4">
                 <div class="hidden md:flex flex-col gap-2">
-                    <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}`"
+                    <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>
+                    <button v-else type="button"
+                        class="text-primary bg-error text-center rounded-sm py-1 hover:bg-opacity-75">Not
+                        Available</button>
+                    <div class="grid grid-cols-2 gap-2">
+                        <NuxtLink :to="`https://anilist.co/anime/${info.id}`" target="_blank" external
+                            class="text-primary bg-secondary text-center rounded-sm py-1 hover:bg-opacity-75">
+                            Anilist</NuxtLink>
+                        <NuxtLink :to="`https://myanimelist.net/anime/${info.idMal}`" target="_blank" external
+                            class="text-primary bg-secondary text-center rounded-sm py-1 hover:bg-opacity-75">
+                            Mal</NuxtLink>
+                    </div>
                 </div>
                 <div class="flex flex-col gap-2">
                     <div class="flex items-center gap-1">
-                        <p class="text-primary">{{ info.season }}</p>
-                        <p class="text-primary">{{ info.seasonYear }}</p>
+                        <p v-if="info.season" class="text-primary">{{ info.season === "WINTER" ? "Winter"
+                            : info.season === "SPRING" ? "Spring"
+                                : info.season === "SUMMER" ? "Summer"
+                                    : info.season === "FALL" ? "Fall"
+                                        : info.season }}</p>
+                        <p v-if="info.seasonYear" 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">{{ info.episodes ?
@@ -30,7 +44,12 @@
                         <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>
+                        <p class="text-primary bg-secondary rounded-sm px-2">{{ info.status === "FINISHED" ? "Finished" :
+                            info.status === "RELEASING" ? "Releasing"
+                                : info.status === "NOT_YET_RELEASED" ? "Not Yet Released"
+                                    : info.status === "CANCELLED" ? "Cancelled"
+                                        : info.status === "HIATUS" ? "Hiatsu"
+                                            : info.status }}</p>
                     </div>
                     <div class="flex flex-wrap items-center gap-1">
                         <div v-for="(genre, index) in info.genres" :key="index">
@@ -40,32 +59,48 @@
                     <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="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 class="flex md:hidden justify-center items-center">
+                <div class="flex flex-col w-full gap-2">
+                    <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>
+                    <button v-else type="button"
+                        class="text-primary bg-error text-center rounded-sm py-1 hover:bg-opacity-75">Not
+                        Available</button>
+                    <div class="grid grid-cols-2 gap-2">
+                        <NuxtLink :to="`https://anilist.co/anime/${info.id}`" target="_blank" external
+                            class="text-primary bg-secondary text-center rounded-sm py-1 hover:bg-opacity-75">
+                            Anilist</NuxtLink>
+                        <NuxtLink :to="`https://myanimelist.net/anime/${info.idMal}`" target="_blank" external
+                            class="text-primary bg-secondary text-center rounded-sm py-1 hover:bg-opacity-75">
+                            Mal</NuxtLink>
+                    </div>
+                </div>
             </section>
         </section>
-        <!-- <section v-if="information.recommendations.results && information.recommendations.results.length > 0"
-            class="space-y-4">
+        <section v-if="recommendations && recommendations.length > 0" class="space-y-4">
             <section class="flex flex-col">
                 <h2 class="text-secondary text-xl font-semibold">Recommendations</h2>
                 <p class="text-primary text-sm">Recommended For You</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 information.recommendations.results.slice(0, 8)">
+                <NuxtLink :to="`/i/${item.id}`" class="w-full space-y-1" v-for="item in recommendations">
                     <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.romaji }}</h6>
                     <div class="flex items-center gap-1">
                         <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.status }}</p>
+                        <p class="text-secondary bg-primary text-sm rounded-sm px-1.5">
+                            {{ item.status === "FINISHED" ? "Finished" :
+                                item.status === "RELEASING" ? "Releasing"
+                                    : item.status === "NOT_YET_RELEASED" ? "Not Yet Released"
+                                        : item.status === "CANCELLED" ? "Cancelled"
+                                            : item.status === "HIATUS" ? "Hiatsu"
+                                                : item.status }}</p>
                     </div>
                 </NuxtLink>
             </section>
-        </section> -->
+        </section>
     </section>
 </template>
 
@@ -73,4 +108,5 @@
 const { id } = defineProps(["id"]);
 const { data: info } = await useFetch("/api/info?id=" + id);
 const { data: episodes } = await useFetch("/api/episodes?id=" + id);
+const { data: recommendations } = await useFetch("/api/recommendations?id=" + id);
 </script>
\ No newline at end of file
diff --git a/components/Header.vue b/components/Header.vue
index 18113f0..dc33d66 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -1,7 +1,7 @@
 <template>
     <section class="flex justify-between items-center py-4 px-8">
         <NuxtLink to="/">
-            <h1 class="text-secondary text-4xl font-semibold">hiruki</h1>
+            <h1 class="text-secondary text-4xl font-bold">hiruki</h1>
         </NuxtLink>
         <NuxtLink class="text-primary bg-secondary text-xl rounded-sm pb-1 px-1.5 hover:bg-opacity-75">
             <Icon name="heroicons-solid:magnifying-glass" />
diff --git a/components/Stream.vue b/components/Stream.vue
index 816f8bc..76b80a6 100644
--- a/components/Stream.vue
+++ b/components/Stream.vue
@@ -5,7 +5,75 @@
             <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="stream.plyr.default" frameborder="0" class="w-full h-auto md:h-96 rounded-sm" />
+            <div class="flex flex-col gap-2">
+                <iframe :src="stream.plyr.default" frameborder="0" class="w-full h-auto md:h-96 rounded-sm" />
+                <NuxtLink :to="download.link" target="_blank" external
+                    class="text-primary bg-secondary text-center rounded-sm py-1 hover:bg-opacity-75">
+                    Download Episode</NuxtLink>
+            </div>
+            <section class="space-y-4">
+                <section class="flex flex-col">
+                    <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="info.coverImage.large" :alt="info.title.romaji" :title="info.title.romaji"
+                            class="w-full h-60 object-cover rounded-sm" />
+                        <div class="grid grid-cols-2 gap-2">
+                            <NuxtLink :to="`https://anilist.co/anime/${info.id}`" target="_blank" external
+                                class="text-primary bg-secondary text-center rounded-sm py-1 hover:bg-opacity-75">
+                                Anilist</NuxtLink>
+                            <NuxtLink :to="`https://myanimelist.net/anime/${info.idMal}`" target="_blank" external
+                                class="text-primary bg-secondary text-center rounded-sm py-1 hover:bg-opacity-75">
+                                Mal</NuxtLink>
+                        </div>
+                    </div>
+                    <div class="flex flex-col gap-2">
+                        <div class="flex items-center gap-1">
+                            <p v-if="info.season" class="text-primary">{{ info.season === "WINTER" ? "Winter"
+                                : info.season === "SPRING" ? "Spring"
+                                    : info.season === "SUMMER" ? "Summer"
+                                        : info.season === "FALL" ? "Fall"
+                                            : info.season }}</p>
+                            <p v-if="info.seasonYear" 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">{{ info.episodes ?
+                                info.episodes : "?" }} Episodes
+                            </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 === "FINISHED" ? "Finished"
+                                :
+                                info.status === "RELEASING" ? "Releasing"
+                                    : info.status === "NOT_YET_RELEASED" ? "Not Yet Released"
+                                        : info.status === "CANCELLED" ? "Cancelled"
+                                            : info.status === "HIATUS" ? "Hiatsu"
+                                                : info.status }}</p>
+                        </div>
+                        <div class="flex flex-wrap items-center gap-1">
+                            <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="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">
+                    <div class="flex flex-col w-full gap-2">
+                        <div class="grid grid-cols-2 gap-2">
+                            <NuxtLink :to="`https://anilist.co/anime/${info.id}`" target="_blank" external
+                                class="text-primary bg-secondary text-center rounded-sm py-1 hover:bg-opacity-75">
+                                Anilist</NuxtLink>
+                            <NuxtLink :to="`https://myanimelist.net/anime/${info.idMal}`" target="_blank" external
+                                class="text-primary bg-secondary text-center rounded-sm py-1 hover:bg-opacity-75">
+                                Mal</NuxtLink>
+                        </div>
+                    </div>
+                </section>
+            </section>
         </section>
         <section class="space-y-4">
             <h2 class="text-secondary text-2xl font-semibold">Episodes</h2>
@@ -17,12 +85,14 @@
                 </NuxtLink>
             </div>
         </section>
+        <DisqusComments :identifier="`/episode/${episode}`" />
     </section>
 </template>
 
 <script setup>
 const { id, episode } = defineProps(["id", "episode"]);
 const { data: stream } = await useFetch("/api/stream?id=" + episode);
+const { data: info } = await useFetch("/api/info?id=" + id);
+const { data: download } = await useFetch("/api/download?id=" + episode);
 const { data: episodes } = await useFetch("/api/episodes?id=" + id);
-console.log(episodes.value);
 </script>
\ No newline at end of file