v0.2.3

6 files changed, 23 insertions, 14 deletions

diff --git a/components/Details.vue b/components/Details.vue
index a25ac70..7659c22 100644
--- a/components/Details.vue
+++ b/components/Details.vue
@@ -2,16 +2,21 @@
     <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"
-                    class="w-full h-20 md:h-40 object-cover rounded-sm opacity-75" />
+                <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>
             <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>
             </section>
             <section class="grid grid-cols-[auto,1fr] gap-4">
-                <div class="hidden md:flex">
-                    <NuxtImg :src="information.info.coverImage.large" class="w-full h-72 object-cover rounded-sm" />
+                <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.length > 0"
+                        :to="`/e/${id}/${information.episodes.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">
@@ -22,7 +27,7 @@
                         <p class="text-primary bg-secondary rounded-sm px-2">{{ information.info.episodes ?
                             information.info.episodes : "?" }} Episodes
                         </p>
-                        <p class="text-primary bg-secondary rounded-sm px-2">{{ information.info.score.averageScore }}%</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>
                     </div>
@@ -35,7 +40,7 @@
                 </div>
             </section>
         </section>
-        <section class="space-y-4">
+        <section v-if="information.recommendations.results.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>
@@ -43,7 +48,8 @@
             <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)">
-                    <NuxtImg :src="item.coverImage.large" class="w-full h-44 md:h-56 object-cover rounded-sm" />
+                    <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>
@@ -58,11 +64,12 @@
 <script setup>
 const { id } = defineProps(["id"]);
 const { data: information } = await useAsyncData("information", async () => {
-    const [info, recommendations] = await Promise.all([
+    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, recommendations }
+    return { info, episodes, recommendations }
 });
 </script>
\ No newline at end of file
diff --git a/components/Popular.vue b/components/Popular.vue
index 91a38f9..4b2dbcf 100644
--- a/components/Popular.vue
+++ b/components/Popular.vue
@@ -6,7 +6,8 @@
         </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" class="w-full h-44 md:h-56 object-cover rounded-sm" />
+                <NuxtImg :src="item.cover" :alt="item.title" :title="item.title"
+                    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>
                 <div class="flex items-center gap-1">
                     <p class="text-primary bg-secondary text-sm rounded-sm px-1.5">{{ item.type }}</p>
diff --git a/components/Trending.vue b/components/Trending.vue
index d3982c2..cada286 100644
--- a/components/Trending.vue
+++ b/components/Trending.vue
@@ -6,7 +6,8 @@
         </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" class="w-full h-44 md:h-56 object-cover rounded-sm" />
+                <NuxtImg :src="item.cover" :alt="item.title" :title="item.title"
+                    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>
                 <div class="flex items-center gap-1">
                     <p class="text-primary bg-secondary text-sm rounded-sm px-1.5">{{ item.type }}</p>
diff --git a/package-lock.json b/package-lock.json
index 1d4c069..6d7ca7f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "hiruki",
-    "version": "0.2.2",
+    "version": "0.2.3",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "hiruki",
-            "version": "0.2.2",
+            "version": "0.2.3",
             "hasInstallScript": true,
             "devDependencies": {
                 "@nuxt/image": "^1.1.0",
diff --git a/package.json b/package.json
index 57d985c..85a07a0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "hiruki",
-    "version": "0.2.2",
+    "version": "0.2.3",
     "private": true,
     "type": "module",
     "scripts": {
diff --git a/pages/i/[id].vue b/pages/i/[id]/index.vue
index 41b04c1..41b04c1 100644
--- a/pages/i/[id].vue
+++ b/pages/i/[id]/index.vue