Merge pull request '[feature] Next episode button' (#4) from feature/next-episode-button into main

Reviewed-on: #4

app.vue

@@ -1,11 +0,0 @@
-<template>
-    <div class="relative flex flex-col min-h-svh">
-        <header class="w-full sticky top-0 z-50">
-            <Navbar />
-        </header>
-        <main class="flex flex-1 flex-col">
-            <NuxtPage />
-        </main>
-        <Toaster />
-    </div>
-</template>

app/app.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { Toaster } from 'vue-sonner';
+import TooltipProvider from './components/ui/tooltip/TooltipProvider.vue';
+
+</script>
+
+<template>
+    <div class="relative flex flex-col min-h-svh">
+        <header class="w-full sticky top-0 z-50">
+            <UiNavbar />
+        </header>
+        <main class="flex flex-1 flex-col">
+            <TooltipProvider disableHoverableContent :delay-duration="200">
+                <NuxtPage />
+            </TooltipProvider>
+        </main>
+        <Toaster />
+    </div>
+</template>

app/components/ui/anime-card/AnimeCard.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { Result } from '~/openapi/search';
+import { Vibrant } from "node-vibrant/browser";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '../hover-card';
+import { Icon } from '@iconify/vue'
+
+
+interface AnimeItemProp {
+    item: Result
+}
+const props = withDefaults(defineProps<AnimeItemProp>(), {
+})
+
+const vibrantColor = ref<string | null>(null);
+
+onMounted(async () => {
+    const posterUrl = props.item.material_data?.anime_poster_url;
+    if (!posterUrl) return;
+    try {
+        const proxiedPosterUrl = `/api/proxy-image?url=${encodeURIComponent(posterUrl)}`
+        const palette = await Vibrant.from(proxiedPosterUrl).getPalette();
+        const rgbColor = palette.LightVibrant?.rgb ?? [0, 0, 0]
+        vibrantColor.value = rgbColor.join(',') || null;
+        console.log(vibrantColor.value)
+    } catch (error) {
+        console.error("Failed to extract vibrant color:", error);
+    }
+});
+</script>
+
+<template>
+    <HoverCard>
+        <HoverCardTrigger as-child>
+            <NuxtLink :to="`/anime/${props.item.id}`" class="w-full group">
+                <div v-if="props.item.material_data?.anime_poster_url"
+                    :style="{ 'background-image': 'url(' + props.item.material_data.anime_poster_url + ')', '--tw-shadow-color': 'rgb(' + vibrantColor + ')' }"
+                    :alt="item.title"
+                    class="flex items-end justify-end p-2 rounded-md bg-cover bg-center bg-no-repeat h-96 group-hover:shadow transition-shadow">
+                    <div
+                        class="flex items-center px-2 py-0.5 backdrop-blur-none bg-primary/75 text-background/80 rounded-sm text-xs ">
+                        <Icon icon="gg:play-list" />
+                        {{ props.item.material_data?.episodes_total }}
+                        episode
+                    </div>
+                </div>
+                <div>
+                    <h3 className="text-xl font-semibold tracking-tight">
+                        {{ props.item.title }}
+                    </h3>
+                </div>
+            </NuxtLink>
+        </HoverCardTrigger>
+        <HoverCardContent>
+            <div class="flex justify-between space-x-4">
+                <div class="space-y-1">
+                    <h3 class="text-2xl font-semibold tracking-tight">
+                        {{ props.item.title }}
+                    </h3>
+                    <p class="text-sm line-clamp-5">
+                        {{ props.item.material_data?.description }}
+                    </p>
+                    <div class="flex items-center pt-2">
+                        <Icon icon="lucide:calendar" class="mr-2 h-4 w-4 opacity-70" />
+                        <span class="text-xs text-muted-foreground">
+                            {{ props.item.material_data?.aired_at }}
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </HoverCardContent>
+    </HoverCard>
+</template>

app/components/ui/anime-card/index.ts

@@ -0,0 +1 @@
+export { default as AnimeCard } from './AnimeCard.vue'

app/components/ui/button/index.ts

@@ -0,0 +1,37 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export { default as Button } from './Button.vue'
+
+export const buttonVariants = cva(
+    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+    {
+        variants: {
+            variant: {
+                default:
+                    'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+                destructive:
+                    'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+                outline:
+                    'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+                secondary:
+                    'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+                ghost:
+                    'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+                link: 'text-primary underline-offset-4 hover:underline',
+                borderless: 'border-0 cursor-pointer size-20'
+            },
+            size: {
+                default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+                sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+                lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+                icon: 'size-9',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'default',
+        },
+    },
+)
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>

app/components/ui/hover-card/HoverCard.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { HoverCardRoot, type HoverCardRootEmits, type HoverCardRootProps, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<HoverCardRootProps>()
+const emits = defineEmits<HoverCardRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <HoverCardRoot
+    data-slot="hover-card"
+    v-bind="forwarded"
+  >
+    <slot />
+  </HoverCardRoot>
+</template>

app/components/ui/hover-card/HoverCardContent.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import {
+  HoverCardContent,
+  type HoverCardContentProps,
+  HoverCardPortal,
+  useForwardProps,
+} from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    sideOffset: 4,
+  },
+)
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <HoverCardPortal>
+    <HoverCardContent
+      data-slot="hover-card-content"
+      v-bind="forwardedProps"
+      :class="
+        cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-hidden',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </HoverCardContent>
+  </HoverCardPortal>
+</template>

app/components/ui/hover-card/HoverCardTrigger.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { HoverCardTrigger, type HoverCardTriggerProps } from 'reka-ui'
+
+const props = defineProps<HoverCardTriggerProps>()
+</script>
+
+<template>
+  <HoverCardTrigger
+    data-slot="hover-card-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </HoverCardTrigger>
+</template>

app/components/ui/hover-card/index.ts

@@ -0,0 +1,3 @@
+export { default as HoverCard } from './HoverCard.vue'
+export { default as HoverCardContent } from './HoverCardContent.vue'
+export { default as HoverCardTrigger } from './HoverCardTrigger.vue'

app/components/ui/navbar/Navbar.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
+import Button from '../button/Button.vue'
+import { NuxtLink } from '#components'
 
 const colorMode = useColorMode()
 
@@ -16,11 +18,11 @@ function toggleColorMode(): void {
 
 <template>
     <div class="flex justify-around items-center p-2 border-b-2 backdrop-blur">
-        <div class="self-start">
+        <NuxtLink to="/" class="self-start">
             <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight select-none">
                 Anyame
             </h3>
-        </div>
+        </NuxtLink>
         <div class="self-end">
             <Button variant="outline" @click="toggleColorMode()">
                 <Icon icon="radix-icons:moon"

app/components/ui/player/ChangeEpisodeButton.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import type { RouteLocationNormalized } from 'vue-router'
+import { updateUrlParameter } from '~/components/util/route'
+
+const props = defineProps<Props>();
+const route = useRoute()
+const currentEpisode = computed(() => Number(route.query.episode as string))
+</script>
+
+<script lang="ts">
+function changeEpisode(route: RouteLocationNormalized, props: Props, currentEpisode: number) {
+    let episodeOffset = 0
+    if (props.type == EpisodeChangeType.NEXT) {
+        episodeOffset = 1
+    }
+    if (props.type == EpisodeChangeType.PREVIOUS) {
+        episodeOffset = -1
+    }
+    updateUrlParameter(route, 'episode', String(currentEpisode + episodeOffset))
+}
+
+interface Props {
+    type: EpisodeChangeType;
+}
+
+export enum EpisodeChangeType {
+    NEXT = "mage:next-fill",
+    PREVIOUS = "mage:previous-fill",
+}
+</script>
+
+<template>
+    <UiButton v-on:click="changeEpisode(route, props, currentEpisode)" variant="borderless" size="icon">
+        <Icon :icon="props.type" class="size-5" />
+    </UiButton>
+</template>

app/components/ui/player/Player.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import Artplayer from "artplayer";
+import Hls from "hls.js";
+import { createVueControlSmart } from "~/components/util/player-control";
+import { EpisodeChangeType } from "./ChangeEpisodeButton.vue";
+import { UiPlayerChangeEpisodeButton } from "#components";
+
+interface Props {
+    urls: any[];
+    episodeButton: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+});
+
+const emit = defineEmits(['get-instance'])
+
+const options = computed(() => {
+    return {
+        url: props.urls[0].url || '',
+        type: 'm3u8',
+        customType: {
+            m3u8: playM3u8,
+        },
+        autoSize: true,
+        autoMini: true,
+        playbackRate: true,
+        fullscreen: true,
+        aspectRatio: true,
+        setting: true,
+        lock: true,
+        autoOrientation: true,
+        autoPlayback: true,
+    }
+})
+const artplayerRef = ref();
+const instance = ref();
+
+function playM3u8(video: HTMLMediaElement, url: string, art: Artplayer) {
+    if (Hls.isSupported()) {
+        if (art.hls) art.hls.destroy();
+        const hls = new Hls();
+        hls.loadSource(url);
+        hls.attachMedia(video);
+        art.hls = hls;
+        art.on('destroy', () => hls.destroy());
+    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+        video.src = url;
+    } else {
+        art.notice.show = 'Unsupported playback format: m3u8';
+    }
+}
+
+onMounted(() => {
+    instance.value = new Artplayer({
+        container: artplayerRef.value,
+        ...options.value,
+    })
+    if (props.episodeButton) {
+        instance.value.controls.add(
+            createVueControlSmart(UiPlayerChangeEpisodeButton, {
+                name: "next-episode",
+                index: 50,
+                tooltip: "Next episode",
+                type: EpisodeChangeType.NEXT,
+            })
+        )
+        instance.value.controls.add(
+            createVueControlSmart(UiPlayerChangeEpisodeButton, {
+                name: "previous-episode",
+                index: 50,
+                tooltip: "Previous episode",
+                type: EpisodeChangeType.PREVIOUS,
+            })
+        )
+    }
+    nextTick(() => {
+        emit('get-instance')
+    })
+})
+
+onBeforeUnmount(() => {
+    if (instance.value && instance.value.destroy) {
+        instance.value.destroy(false)
+    }
+})
+
+watch([instance, () => props.urls], async ([artplayer, urls]) => {
+    if (!artplayer) return;
+    urls = urls.reverse()
+    artplayer.quality = urls;
+    artplayer.switch = urls[0].url;
+    instance.value = artplayer;
+})
+</script>
+
+<template>
+    <div class="flex items-center justify-center">
+        <div class="w-2/3 aspect-video" ref="artplayerRef"></div>
+    </div>
+</template>

app/components/ui/player/index.ts

@@ -0,0 +1 @@
+export { default as Player } from './Player.vue'

app/components/ui/tooltip/Tooltip.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<TooltipRootProps>()
+const emits = defineEmits<TooltipRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TooltipRoot
+    data-slot="tooltip"
+    v-bind="forwarded"
+  >
+    <slot />
+  </TooltipRoot>
+</template>

app/components/ui/tooltip/TooltipContent.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { TooltipArrow, TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {
+  sideOffset: 4,
+})
+
+const emits = defineEmits<TooltipContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent
+      data-slot="tooltip-content"
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="cn('bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance', props.class)"
+    >
+      <slot />
+
+      <TooltipArrow class="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+    </TooltipContent>
+  </TooltipPortal>
+</template>

app/components/ui/tooltip/TooltipProvider.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { TooltipProvider, type TooltipProviderProps } from 'reka-ui'
+
+const props = withDefaults(defineProps<TooltipProviderProps>(), {
+  delayDuration: 0,
+})
+</script>
+
+<template>
+  <TooltipProvider v-bind="props">
+    <slot />
+  </TooltipProvider>
+</template>

app/components/ui/tooltip/TooltipTrigger.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { TooltipTrigger, type TooltipTriggerProps } from 'reka-ui'
+
+const props = defineProps<TooltipTriggerProps>()
+</script>
+
+<template>
+  <TooltipTrigger
+    data-slot="tooltip-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </TooltipTrigger>
+</template>

app/components/ui/tooltip/index.ts

@@ -0,0 +1,4 @@
+export { default as Tooltip } from './Tooltip.vue'
+export { default as TooltipContent } from './TooltipContent.vue'
+export { default as TooltipProvider } from './TooltipProvider.vue'
+export { default as TooltipTrigger } from './TooltipTrigger.vue'

app/components/util/player-control.js

@@ -0,0 +1,42 @@
+import { createApp, h } from 'vue'
+
+export function createVueControlSmart(component, props = {}, events = {}) {
+    let vueApp = null
+
+    return {
+        name: props.name || 'vue-control',
+        index: props.index || 0,
+        position: props.position || 'left',
+        html: `<div class="vue-control-wrapper" data-vue-control="${component.name}"></div>`,
+        tooltip: props.tooltip || '',
+
+        mounted: function ($control) {
+            const container = $control.querySelector('.vue-control-wrapper')
+
+            if (container && !vueApp) {
+                vueApp = createApp({
+                    render() {
+                        return h(component, {
+                            ...props,
+                            ...Object.entries(events).reduce((acc, [eventName, handler]) => {
+                                acc[`on${eventName.charAt(0).toUpperCase() + eventName.slice(1)}`] = handler
+                                return acc
+                            }, {})
+                        })
+                    }
+                })
+
+                vueApp.mount(container)
+                $control._vueApp = vueApp
+            }
+        },
+
+        destroy: function ($control) {
+            if ($control._vueApp) {
+                $control._vueApp.unmount()
+                $control._vueApp = null
+                vueApp = null
+            }
+        }
+    }
+}

app/components/util/route.js

@@ -0,0 +1,9 @@
+export const updateUrlParameter = async (route, paramName, newValue) => {
+    await navigateTo({
+        path: route.path,
+        query: {
+            ...route.query,
+            [paramName]: newValue
+        }
+    }, { replace: true })
+}

app/openapi/extractor.ts

@@ -0,0 +1,184 @@
+/**
+ * Generated by orval v7.10.0 🍺
+ * Do not edit manually.
+ * OpenAPI definition
+ * OpenAPI spec version: v0
+ */
+export interface KodikMetadata {
+  title?: string;
+  translations?: KodikTranslation[];
+}
+
+export interface KodikTranslation {
+  id?: string;
+  title?: string;
+  mediaId?: string;
+  mediaHash?: string;
+  mediaType?: string;
+  translationType?: string;
+  episodeCount?: number;
+}
+
+export interface KodikTranslationDTO {
+  mediaType?: string;
+  mediaId?: string;
+  mediaHash?: string;
+}
+
+export type KodikVideoLinksLinks = {[key: string]: Link[]};
+
+export interface KodikVideoLinks {
+  links?: KodikVideoLinksLinks;
+}
+
+export interface Link {
+  type?: string;
+  src?: string;
+}
+
+export type ShikimoriParams = {
+id: string;
+};
+
+export type KodikParams = {
+id: string;
+};
+
+export type VideoParams = {
+translationDTO: KodikTranslationDTO;
+quality: string;
+episode: number;
+};
+
+export type shikimoriResponse200 = {
+  data: KodikMetadata
+  status: 200
+}
+    
+export type shikimoriResponseComposite = shikimoriResponse200;
+    
+export type shikimoriResponse = shikimoriResponseComposite & {
+  headers: Headers;
+}
+
+export const getShikimoriUrl = (params: ShikimoriParams,) => {
+  const normalizedParams = new URLSearchParams();
+
+  Object.entries(params || {}).forEach(([key, value]) => {
+    
+    if (value !== undefined) {
+      normalizedParams.append(key, value === null ? 'null' : value.toString())
+    }
+  });
+
+  const stringifiedParams = normalizedParams.toString();
+
+  return stringifiedParams.length > 0 ? `http://localhost:8081/metadata/shikimori?${stringifiedParams}` : `http://localhost:8081/metadata/shikimori`
+}
+
+export const shikimori = async (params: ShikimoriParams, options?: RequestInit): Promise<shikimoriResponse> => {
+  
+  const res = await fetch(getShikimoriUrl(params),
+  {      
+    ...options,
+    method: 'GET'
+    
+    
+  }
+)
+
+  const body = [204, 205, 304].includes(res.status) ? null : await res.text()
+  const data: shikimoriResponse['data'] = body ? JSON.parse(body) : {}
+
+  return { data, status: res.status, headers: res.headers } as shikimoriResponse
+}
+
+
+
+export type kodikResponse200 = {
+  data: KodikMetadata
+  status: 200
+}
+    
+export type kodikResponseComposite = kodikResponse200;
+    
+export type kodikResponse = kodikResponseComposite & {
+  headers: Headers;
+}
+
+export const getKodikUrl = (params: KodikParams,) => {
+  const normalizedParams = new URLSearchParams();
+
+  Object.entries(params || {}).forEach(([key, value]) => {
+    
+    if (value !== undefined) {
+      normalizedParams.append(key, value === null ? 'null' : value.toString())
+    }
+  });
+
+  const stringifiedParams = normalizedParams.toString();
+
+  return stringifiedParams.length > 0 ? `http://localhost:8081/metadata/kodik?${stringifiedParams}` : `http://localhost:8081/metadata/kodik`
+}
+
+export const kodik = async (params: KodikParams, options?: RequestInit): Promise<kodikResponse> => {
+  
+  const res = await fetch(getKodikUrl(params),
+  {      
+    ...options,
+    method: 'GET'
+    
+    
+  }
+)
+
+  const body = [204, 205, 304].includes(res.status) ? null : await res.text()
+  const data: kodikResponse['data'] = body ? JSON.parse(body) : {}
+
+  return { data, status: res.status, headers: res.headers } as kodikResponse
+}
+
+
+
+export type videoResponse200 = {
+  data: KodikVideoLinks
+  status: 200
+}
+    
+export type videoResponseComposite = videoResponse200;
+    
+export type videoResponse = videoResponseComposite & {
+  headers: Headers;
+}
+
+export const getVideoUrl = (params: VideoParams,) => {
+  const normalizedParams = new URLSearchParams();
+
+  Object.entries(params || {}).forEach(([key, value]) => {
+    
+    if (value !== undefined) {
+      normalizedParams.append(key, value === null ? 'null' : value.toString())
+    }
+  });
+
+  const stringifiedParams = normalizedParams.toString();
+
+  return stringifiedParams.length > 0 ? `http://localhost:8081/extract/video?${stringifiedParams}` : `http://localhost:8081/extract/video`
+}
+
+export const video = async (params: VideoParams, options?: RequestInit): Promise<videoResponse> => {
+  
+  const res = await fetch(getVideoUrl(params),
+  {      
+    ...options,
+    method: 'GET'
+    
+    
+  }
+)
+
+  const body = [204, 205, 304].includes(res.status) ? null : await res.text()
+  const data: videoResponse['data'] = body ? JSON.parse(body) : {}
+
+  return { data, status: res.status, headers: res.headers } as videoResponse
+}

app/openapi/search.ts

@@ -4,12 +4,6 @@
  * OpenAPI definition
  * OpenAPI spec version: v0
  */
-import axios from 'axios';
-import type {
-  AxiosRequestConfig,
-  AxiosResponse
-} from 'axios';
-
 export interface KodikResponse {
   total?: number;
   results?: Result[];
@@ -98,14 +92,45 @@ export type SearchParams = {
 title: string;
 };
 
-export const search = <TData = AxiosResponse<KodikResponse>>(
-    params: SearchParams, options?: AxiosRequestConfig
- ): Promise<TData> => {
-    return axios.get(
-      `http://localhost:8080/search`,{
-    ...options,
-        params: {...params, ...options?.params},}
-    );
-  }
+export type searchResponse200 = {
+  data: KodikResponse
+  status: 200
+}
+    
+export type searchResponseComposite = searchResponse200;
+    
+export type searchResponse = searchResponseComposite & {
+  headers: Headers;
+}
 
-export type SearchResult = AxiosResponse<KodikResponse>
+export const getSearchUrl = (params: SearchParams,) => {
+  const normalizedParams = new URLSearchParams();
+
+  Object.entries(params || {}).forEach(([key, value]) => {
+    
+    if (value !== undefined) {
+      normalizedParams.append(key, value === null ? 'null' : value.toString())
+    }
+  });
+
+  const stringifiedParams = normalizedParams.toString();
+
+  return stringifiedParams.length > 0 ? `http://localhost:8080/search?${stringifiedParams}` : `http://localhost:8080/search`
+}
+
+export const search = async (params: SearchParams, options?: RequestInit): Promise<searchResponse> => {
+  
+  const res = await fetch(getSearchUrl(params),
+  {      
+    ...options,
+    method: 'GET'
+    
+    
+  }
+)
+
+  const body = [204, 205, 304].includes(res.status) ? null : await res.text()
+  const data: searchResponse['data'] = body ? JSON.parse(body) : {}
+
+  return { data, status: res.status, headers: res.headers } as searchResponse
+}

app/pages/anime/[slug].vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { Button } from '~/components/ui/button';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '~/components/ui/dialog';
 import { kodik, type KodikTranslation } from '~/openapi/extractor';
 
 const route = useRoute();
@@ -44,7 +46,7 @@ function closeDialog() {
             <span>{{ item.episodeCount }}</span>
         </div>
     </div>
-    <p>{{ $route.params.slug }}</p>
+    <p>{{ route.params.slug }}</p>
     <Dialog v-bind:open="isSelectingEpisode">
         <DialogTrigger as-child>
             <Button variant="outline">

app/pages/index.vue

@@ -14,6 +14,8 @@ import {
 import { toast } from "vue-sonner";
 import 'vue-sonner/style.css'
 import { Icon } from "#components";
+import { Input } from "~/components/ui/input";
+import { Button } from "~/components/ui/button";
 
 const router = useRouter()
 const searchProvider = ref('kodik')

app/pages/search.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { AnimeCard } from '~/components/ui/anime-card'
 import { search, type Result } from '~/openapi/search'
 
 const route = useRoute()
@@ -22,11 +23,13 @@ watchEffect(async () => {
     } finally {
         isLoading.value = false
     }
+}, {
+    flush: 'post'
 })
 </script>
 
 <template>
-    <div>
+    <div class="py-4 px-32">
         <div v-if="isLoading">
             Loading results...
         </div>
@@ -38,19 +41,7 @@ watchEffect(async () => {
         <div v-if="results.length > 0"
             class="grid grid-cols-[repeat(auto-fill,16rem)] justify-around gap-8 grid-flow-row">
             <div v-for="item in results" :key="item.id" class="flex w-[16rem]">
-                <NuxtLink :to="`/anime/${item.id}`" class="w-full">
-                    <div v-if="item.material_data?.anime_poster_url" :style="{ 'background-image': 'url('+item.material_data.anime_poster_url+')' }"
-                        :alt="item.title" class="flex items-end justify-end p-2 rounded-md bg-cover bg-center bg-no-repeat h-96">
-                        <Button class="backdrop-blur-none bg-primary/80">2 episodes</Button>
-                    </div>
-                    <div>
-                        <h3 className="text-2xl font-semibold tracking-tight">{{ item.title }}</h3>
-                        <p v-if="item.material_data?.year">Year: {{ item.material_data.year }}</p>
-                        <p v-if="item.material_data?.anime_kind">Type: {{ item.material_data.anime_kind }}</p>
-                        <p v-if="item.material_data?.episodes_total">Episodes: {{ item.material_data.episodes_total }}
-                        </p>
-                    </div>
-                </NuxtLink>
+                <AnimeCard :item="item" />
             </div>
         </div>
 

app/pages/watch.vue

@@ -0,0 +1,75 @@
+<template>
+    <div>
+        <h1>Watch Page</h1>
+        <div v-if="mediaId">
+            <p>Media Type: {{ mediaType }}</p>
+            <p>Media ID: {{ mediaId }}</p>
+            <p>Media Hash: {{ mediaHash }}</p>
+            <p>Episode: {{ episode }}</p>
+
+            <div v-if="hlsUrls">
+                <Player :urls="hlsUrls" :episode="episode" :episodeButton="true" />
+            </div>
+
+            <!-- Loading and Error States -->
+            <div v-if="isLoading" class="loading">Loading video...</div>
+            <div v-if="error" class="error">Error loading video: {{ error }}</div>
+        </div>
+        <div v-else>
+            <p>No media selected.</p>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+import { Player } from '~/components/ui/player'
+import { video, type KodikVideoLinks } from '~/openapi/extractor'
+
+const route = useRoute()
+const mediaType = computed(() => route.query.mediaType as string)
+const mediaId = computed(() => route.query.mediaId as string)
+const mediaHash = computed(() => route.query.mediaHash as string)
+const episode = computed(() => Number(route.query.episode as string))
+
+const results = ref<KodikVideoLinks | null>(null)
+const isLoading = ref(false)
+const error = ref<unknown>(null)
+const hlsUrls = ref<any>(null)
+
+watchEffect(async () => {
+    try {
+        isLoading.value = true
+        error.value = null
+
+        const videoParams: any = {
+            mediaType: mediaType.value,
+            mediaId: mediaId.value,
+            mediaHash: mediaHash.value,
+            episode: episode.value,
+            quality: '360',
+        }
+
+        const response = await video(videoParams)
+        results.value = response?.data || null
+
+        if (results.value?.links) {
+            console.log(results.value.links)
+            hlsUrls.value = Object.entries(results.value.links).map(([quality, links], index, arr) => {
+                const isLatest = index === arr.length - 1
+                return {
+                    html: quality,
+                    url: links.find(link => link.src?.includes('.m3u8') || link.type?.includes('hls'))?.src,
+                    default: isLatest
+                }
+            })
+
+        }
+    } catch (err) {
+        error.value = err
+        console.error('Failed to fetch video:', err)
+    } finally {
+        isLoading.value = false
+    }
+})
+</script>

components/ui/button/index.ts

@@ -1,36 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority'
-
-export { default as Button } from './Button.vue'
-
-export const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-  {
-    variants: {
-      variant: {
-        default:
-          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
-        destructive:
-          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-        outline:
-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
-        secondary:
-          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
-        ghost:
-          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-        icon: 'size-9',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-)
-
-export type ButtonVariants = VariantProps<typeof buttonVariants>

compose.yml

@@ -0,0 +1,11 @@
+services:
+  frontend:
+    image: anyame-vue:latest
+    ports:
+      - 3000:3000
+    networks:
+      - anyame-shared
+
+networks:
+  anyame-shared:
+    external: true

eslint.config.mjs

@@ -2,5 +2,5 @@
 import withNuxt from './.nuxt/eslint.config.mjs'
 
 export default withNuxt(
-  // Your custom configs here
+    // Your custom configs here
 )

lib/utils.ts

@@ -1,6 +0,0 @@
-import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}

nuxt.config.ts

@@ -8,6 +8,9 @@ export default defineNuxtConfig({
     nitro: {
         preset: 'bun',
     },
+    routeRules: {
+        '/watch': { ssr: false },
+    },
     colorMode: {
         classSuffix: ''
     },

openapi/extractor.ts

@@ -1,96 +0,0 @@
-/**
- * Generated by orval v7.10.0 🍺
- * Do not edit manually.
- * OpenAPI definition
- * OpenAPI spec version: v0
- */
-import axios from 'axios';
-import type {
-    AxiosRequestConfig,
-    AxiosResponse
-} from 'axios';
-
-export interface KodikMetadata {
-    title?: string;
-    translations?: KodikTranslation[];
-}
-
-export interface KodikTranslation {
-    id?: string;
-    title?: string;
-    mediaId?: string;
-    mediaHash?: string;
-    mediaType?: string;
-    translationType?: string;
-    episodeCount?: number;
-}
-
-export interface KodikTranslationDTO {
-    mediaType?: string;
-    mediaId?: string;
-    mediaHash?: string;
-}
-
-export type KodikVideoLinksLinks = { [key: string]: Link[] };
-
-export interface KodikVideoLinks {
-    links?: KodikVideoLinksLinks;
-}
-
-export interface Link {
-    type?: string;
-    src?: string;
-}
-
-export type ShikimoriParams = {
-    id: string;
-};
-
-export type KodikParams = {
-    id: string;
-};
-
-export type VideoParams = {
-    mediaType: string;
-    mediaId: string;
-    mediaHash: string;
-    quality: string;
-    episode: number;
-};
-
-export const shikimori = <TData = AxiosResponse<KodikMetadata>>(
-    params: ShikimoriParams, options?: AxiosRequestConfig
-): Promise<TData> => {
-    return axios.get(
-        `http://localhost:8081/metadata/shikimori`, {
-        ...options,
-        params: { ...params, ...options?.params },
-    }
-    );
-}
-
-export const kodik = <TData = AxiosResponse<KodikMetadata>>(
-    params: KodikParams, options?: AxiosRequestConfig
-): Promise<TData> => {
-    return axios.get(
-        `http://localhost:8081/metadata/kodik`, {
-        ...options,
-        params: { ...params, ...options?.params },
-    }
-    );
-}
-
-export const video = <TData = AxiosResponse<KodikVideoLinks>>(
-    params: VideoParams, options?: AxiosRequestConfig
-): Promise<TData> => {
-    return axios.get(
-        `http://localhost:8081/extract/video`, {
-        ...options,
-        params: { ...params, ...options?.params },
-    }
-    );
-}
-
-export type ShikimoriResult = AxiosResponse<KodikMetadata>
-export type KodikResult = AxiosResponse<KodikMetadata>
-export type VideoResult = AxiosResponse<KodikVideoLinks>

orval.config.js

@@ -1,15 +1,17 @@
 export const search = {
-    input: './openapi/search.json',
+    input: './app/openapi/search.json',
     output: {
-        target: './openapi/search.ts',
-        baseUrl: 'http://localhost:8080'
+        target: './app/openapi/search.ts',
+        baseUrl: 'http://localhost:8080',
+        client: 'fetch'
     },
 };
 
 export const extractor = {
-    input: './openapi/extractor.json',
+    input: './app/openapi/extractor.json',
     output: {
-        target: './openapi/extractor.ts',
-        baseUrl: 'http://localhost:8081'
+        target: './app/openapi/extractor.ts',
+        baseUrl: 'http://localhost:8081',
+        client: 'fetch'
     },
 }

package.json

@@ -14,27 +14,28 @@
         "@nuxt/icon": "1.15.0",
         "@nuxt/image": "1.10.0",
         "@tailwindcss/vite": "^4.1.7",
-        "@vime/core": "^5.4.1",
-        "@vime/vue-next": "^5.4.1",
-        "@vueuse/core": "^13.4.0",
+        "@vueuse/core": "^13.5.0",
+        "artplayer": "^5.2.3",
         "axios": "^1.10.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "eslint": "^9.0.0",
+        "hls.js": "^1.6.7",
         "lucide-vue-next": "^0.511.0",
-        "nuxt": "^3.17.4",
-        "reka-ui": "^2.3.1",
+        "node-vibrant": "^4.0.3",
+        "nuxt": "^4.0.0",
+        "reka-ui": "^2.3.2",
         "shadcn-nuxt": "2.1.0",
         "tailwind-merge": "^3.3.0",
         "tailwindcss": "^4.1.7",
         "tw-animate-css": "^1.3.0",
-        "video.js": "^8.23.3",
         "vue": "^3.5.14",
         "vue-router": "^4.5.1",
         "vue-sonner": "^2.0.0"
     },
     "devDependencies": {
         "@iconify-json/heroicons": "^1.2.2",
+        "@iconify-json/mage": "^1.2.4",
         "@nuxtjs/color-mode": "^3.5.2",
         "orval": "^7.10.0"
     }

pages/watch.vue

@@ -1,125 +0,0 @@
-<template>
-    <div>
-        <h1>Watch Page</h1>
-        <div v-if="mediaId">
-            <p>Media Type: {{ mediaType }}</p>
-            <p>Media ID: {{ mediaId }}</p>
-            <p>Media Hash: {{ mediaHash }}</p>
-            <p>Episode: {{ episode }}</p>
-
-            <!-- Video Player Container -->
-            <div class="video-container">
-                <video-player v-if="hlsUrl" ref="videoPlayer" :options="playerOptions" class="vjs-big-play-centered" />
-            </div>
-
-            <!-- Loading and Error States -->
-            <div v-if="isLoading" class="loading">Loading video...</div>
-            <div v-if="error" class="error">Error loading video: {{ error }}</div>
-        </div>
-        <div v-else>
-            <p>No media selected.</p>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { useRoute } from 'vue-router'
-import { video, type KodikTranslationDTO, type KodikVideoLinks, type VideoParams } from '~/openapi/extractor'
-import { VideoPlayer } from '@videojs-player/vue'
-import 'video.js/dist/video-js.css'
-
-const route = useRoute()
-const mediaType = route.query.mediaType
-const mediaId = route.query.mediaId
-const mediaHash = route.query.mediaHash
-const episode = route.query.episode
-
-const results = ref<KodikVideoLinks | null>(null)
-const isLoading = ref(false)
-const error = ref<unknown>(null)
-const hlsUrl = ref<string | null>(null)
-
-const playerOptions = ref({
-    autoplay: false,
-    controls: true,
-    responsive: true,
-    fluid: true,
-    sources: [{
-        src: hlsUrl.value,
-        type: 'application/x-mpegURL'
-    }]
-})
-
-watchEffect(async () => {
-    if (!mediaType || !mediaId || !mediaHash || !episode) return
-
-    try {
-        isLoading.value = true
-        error.value = null
-
-        const translationDto: KodikTranslationDTO = {
-            mediaType: mediaType as string,
-            mediaId: mediaId as string,
-            mediaHash: mediaHash as string,
-        }
-
-        const videoParams: VideoParams = {
-            mediaType: mediaType as string,
-            mediaId: mediaId as string,
-            mediaHash: mediaHash as string,
-            episode: Number(episode as string),
-            quality: '720',
-        }
-
-        const response = await video(videoParams)
-        results.value = response?.data || null
-
-        // Extract HLS URL from response
-        if (results.value?.links) {
-            // Find the first available quality
-            const qualities = Object.keys(results.value.links)
-            const bestQuality = qualities.includes('720') ? '720' :
-                qualities.includes('480') ? '480' :
-                    qualities[0]
-
-            // Find the first HLS link
-            const hlsLink = results.value.links[bestQuality]?.find(link =>
-                link.type?.includes('hls') || link.src?.includes('.m3u8')
-            )
-
-            if (hlsLink?.src) {
-                hlsUrl.value = hlsLink.src
-                playerOptions.value.sources[0].src = hlsLink.src
-            } else {
-                throw new Error('No HLS stream found in response')
-            }
-        }
-    } catch (err) {
-        error.value = err
-        console.error('Failed to fetch video:', err)
-    } finally {
-        isLoading.value = false
-    }
-})
-</script>
-
-<style scoped>
-.video-container {
-    max-width: 800px;
-    margin: 20px auto;
-}
-
-.loading,
-.error {
-    padding: 20px;
-    text-align: center;
-    background: #f8f8f8;
-    margin: 20px 0;
-    border-radius: 4px;
-}
-
-.error {
-    color: #d32f2f;
-    background: #ffebee;
-}
-</style>

server/api/proxy-image.get.ts

@@ -0,0 +1,43 @@
+export default defineEventHandler(async (event) => {
+    const query = getQuery(event);
+    const imageUrl = query.url as string;
+
+    if (!imageUrl) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: 'URL parameter is required'
+        });
+    }
+
+    try {
+        const response = await fetch(imageUrl, {
+            headers: {
+                'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'
+            }
+        });
+
+        if (!response.ok) {
+            throw createError({
+                statusCode: response.status,
+                statusMessage: 'Failed to fetch image'
+            });
+        }
+
+        const imageBuffer = await response.arrayBuffer();
+        const contentType = response.headers.get('content-type') || 'image/jpeg';
+
+        // Set CORS headers
+        setHeader(event, 'Access-Control-Allow-Origin', '*');
+        setHeader(event, 'Access-Control-Allow-Methods', 'GET');
+        setHeader(event, 'Content-Type', contentType);
+        setHeader(event, 'Cache-Control', 'public, max-age=86400');
+
+        return new Uint8Array(imageBuffer);
+    } catch (error) {
+        console.error('Proxy error:', error);
+        throw createError({
+            statusCode: 500,
+            statusMessage: 'Failed to proxy image'
+        });
+    }
+});