v0.3.0

10 files changed, 173 insertions, 31 deletions

diff --git a/app.vue b/app.vue
index 66ade36..f62a4c7 100644
--- a/app.vue
+++ b/app.vue
@@ -1,5 +1,5 @@
 <template>
-    <NuxtLoadingIndicator color="#0A8754" />
+    <NuxtLoadingIndicator color="#16A34A" />
     <NuxtLayout>
         <NuxtPage />
     </NuxtLayout>
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
diff --git a/nuxt.config.ts b/nuxt.config.ts
index a05f077..6461947 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,5 +1,5 @@
 export default defineNuxtConfig({
-    modules: ["@nuxtjs/tailwindcss", "@nuxt/image", "@nuxtjs/google-fonts", "nuxt-icon"],
+    modules: ["@nuxtjs/tailwindcss", "@nuxt/image", "@nuxtjs/google-fonts", "nuxt-icon", "nuxt-disqus"],
     devtools: { enabled: false },
     tailwindcss: { viewer: false },
     googleFonts: {
@@ -8,6 +8,9 @@ export default defineNuxtConfig({
             Poppins: [400, 500, 600, 700]
         }
     },
+    disqus: {
+        shortname: "hiruki"
+    },
     app: {
         head: {
             title: "Hiruki - Online Anime Streaming Without Ads",
diff --git a/package-lock.json b/package-lock.json
index 28e84e4..0bc0424 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,18 +1,20 @@
 {
     "name": "hiruki",
-    "version": "0.2.5",
+    "version": "0.3.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "hiruki",
-            "version": "0.2.5",
+            "version": "0.3.0",
             "hasInstallScript": true,
+            "license": "MIT",
             "devDependencies": {
                 "@nuxt/image": "^1.1.0",
                 "@nuxtjs/google-fonts": "^3.1.3",
                 "@nuxtjs/tailwindcss": "^6.10.3",
                 "nuxt": "^3.9.0",
+                "nuxt-disqus": "^1.0.1",
                 "nuxt-icon": "^0.6.8",
                 "sass": "^1.69.7",
                 "vue": "^3.4.5",
@@ -7626,6 +7628,17 @@
                 }
             }
         },
+        "node_modules/nuxt-disqus": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/nuxt-disqus/-/nuxt-disqus-1.0.1.tgz",
+            "integrity": "sha512-audsnAo2fXuhZFCOAcoYogwpIAs/xTfi+pUK0aarnEbiV5cFIFnITtN6u0KAqntISZBvZUzOqxoqzPjodYoMjA==",
+            "dev": true,
+            "dependencies": {
+                "@nuxt/kit": "^3.6.2",
+                "defu": "^6.1.2",
+                "vue3-disqus": "^1.0.6"
+            }
+        },
         "node_modules/nuxt-icon": {
             "version": "0.6.8",
             "resolved": "https://registry.npmjs.org/nuxt-icon/-/nuxt-icon-0.6.8.tgz",
@@ -11617,6 +11630,15 @@
                 "vue": "^3.2.0"
             }
         },
+        "node_modules/vue3-disqus": {
+            "version": "1.0.6",
+            "resolved": "https://registry.npmjs.org/vue3-disqus/-/vue3-disqus-1.0.6.tgz",
+            "integrity": "sha512-IfYHMqVklVEZVOUuQo3pjD/+I40ajph4mMfiBZdxHnGvuFO+ZEB3QjSF8e6VVVYcMWf5Tvbl6AfdLdwwRzdW5w==",
+            "dev": true,
+            "dependencies": {
+                "vue": "^3.3.4"
+            }
+        },
         "node_modules/webidl-conversions": {
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
diff --git a/package.json b/package.json
index 8d15942..d7e3b96 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "hiruki",
-    "version": "0.2.5",
+    "version": "0.3.0",
     "private": true,
     "type": "module",
     "scripts": {
@@ -15,6 +15,7 @@
         "@nuxtjs/google-fonts": "^3.1.3",
         "@nuxtjs/tailwindcss": "^6.10.3",
         "nuxt": "^3.9.0",
+        "nuxt-disqus": "^1.0.1",
         "nuxt-icon": "^0.6.8",
         "sass": "^1.69.7",
         "vue": "^3.4.5",
diff --git a/server/api/download.js b/server/api/download.js
new file mode 100644
index 0000000..219bc8e
--- /dev/null
+++ b/server/api/download.js
@@ -0,0 +1,5 @@
+export default defineEventHandler(async (event) => {
+    const { id } = getQuery(event);
+    const { API } = useRuntimeConfig();
+    return await $fetch(API + "/download/" + id);
+});
\ No newline at end of file
diff --git a/server/api/recommendations.js b/server/api/recommendations.js
new file mode 100644
index 0000000..b932e0e
--- /dev/null
+++ b/server/api/recommendations.js
@@ -0,0 +1,5 @@
+export default defineEventHandler(async (event) => {
+    const { id } = getQuery(event);
+    const { API } = useRuntimeConfig();
+    return await $fetch(API + "/recommendations/" + id);
+});
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 62d4b27..6fede2e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,9 +10,9 @@ export default {
             colors: {
                 "background": "#121212",
                 "sub": "#272727",
-                "extra": "#454545",
-                "primary": "#F7FFF6",
-                "secondary": "#0A8754"
+                "primary": "#FFFFFF",
+                "secondary": "#16A34A",
+                "error": "#DC2626"
             }
         },
     },