diff options
Diffstat (limited to 'components/Details.vue')
| -rw-r--r-- | components/Details.vue | 25 |
1 files changed, 16 insertions, 9 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 |