v0.3.1

6 files changed, 31 insertions, 43 deletions

diff --git a/components/Details.vue b/components/Details.vue
index 286e264..a942c1f 100644
--- a/components/Details.vue
+++ b/components/Details.vue
@@ -85,18 +85,12 @@
             </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 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" />
+                    <NuxtImg :src="item.coverImage.large" :alt="item.title.romaji" :title="item.title.romaji" 
+                    class="w-full h-44 ms:h-48 mm:h-60 ml:h-64 tb:h-32 lp:h-56 ll:h-60 4k:h-96 
+                        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 === "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>
diff --git a/components/Footer.vue b/components/Footer.vue
index 5bd4016..ac4fb03 100644
--- a/components/Footer.vue
+++ b/components/Footer.vue
@@ -1,8 +1,8 @@
 <template>
-    <section class="flex justify-between items-center py-4 px-8">
+    <section class="flex justify-between items-center p-4">
         <p class="text-primary">©{{ currentYear }}. Hiruki</p>
         <div class="flex items-center gap-2">
-            <NuxtLink to="https://github.com/Kenimarru/hiruki" target="_blank"
+            <NuxtLink to="https://github.com/Kenimarru/hiruki" target="_blank" external
                 class="text-primary bg-secondary text-xl rounded-sm pb-1 px-1.5 hover:bg-opacity-75">
                 <Icon name="eva:github-fill" />
             </NuxtLink>
diff --git a/components/Header.vue b/components/Header.vue
index dc33d66..7789caf 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -1,5 +1,5 @@
 <template>
-    <section class="flex justify-between items-center py-4 px-8">
+    <section class="flex justify-between items-center p-4">
         <NuxtLink to="/">
             <h1 class="text-secondary text-4xl font-bold">hiruki</h1>
         </NuxtLink>
diff --git a/components/Popular.vue b/components/Popular.vue
index a8ac5d7..670e944 100644
--- a/components/Popular.vue
+++ b/components/Popular.vue
@@ -6,8 +6,9 @@
         </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 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" />
+                <NuxtImg :src="item.coverImage.large" :alt="item.title.romaji" :title="item.title.romaji" 
+                class="w-full h-44 ms:h-48 mm:h-60 ml:h-64 tb:h-32 lp:h-56 ll:h-60 4k:h-96 
+                    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>
diff --git a/components/Stream.vue b/components/Stream.vue
index 76b80a6..bdc19e1 100644
--- a/components/Stream.vue
+++ b/components/Stream.vue
@@ -1,5 +1,5 @@
 <template>
-    <section class="space-y-4">
+    <section class="space-y-8">
         <section class="flex flex-col">
             <h2 class="text-secondary text-2xl font-semibold">{{ stream.info.title }}</h2>
             <p class="text-primary">Episode {{ stream.info.episode }}</p>
@@ -12,23 +12,7 @@
                     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"
@@ -59,6 +43,16 @@
                             </div>
                         </div>
                         <div v-html="info.description" class="text-primary w-full h-48 overflow-y-auto pr-2" />
+                        <section class="space-y-4">
+                            <h2 class="text-secondary text-2xl font-semibold">Episodes</h2>
+                            <select class="text-primary bg-sub w-full rounded-sm py-2 px-1" v-model="selected"
+                                @change="getEpisode">
+                                <option value="" selected disabled>Select an episode</option>
+                                <option :value="episode.id" v-for="episode in episodes" :key="episode.number">
+                                    Episode {{ episode.number }}
+                                </option>
+                            </select>
+                        </section>
                     </div>
                 </section>
                 <section class="flex md:hidden justify-center items-center">
@@ -75,16 +69,6 @@
                 </section>
             </section>
         </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>
         <DisqusComments :identifier="`/episode/${episode}`" />
     </section>
 </template>
@@ -95,4 +79,12 @@ 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);
+const selected = ref("");
+const router = useRouter();
+const getEpisode = (event) => {
+    const value = event.target.value
+    if (value) {
+        router.push(`/e/${id}/${value}`)
+    }
+}
 </script>
\ No newline at end of file
diff --git a/components/Trending.vue b/components/Trending.vue
index 19477e0..823782c 100644
--- a/components/Trending.vue
+++ b/components/Trending.vue
@@ -6,8 +6,9 @@
         </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 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" />
+                <NuxtImg :src="item.coverImage.large" :alt="item.title.romaji" :title="item.title.romaji" 
+                class="w-full h-44 ms:h-48 mm:h-60 ml:h-64 tb:h-32 lp:h-56 ll:h-60 4k:h-96 
+                    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>