Improve search page, prevent double request to the backend

.dockerignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

Dockerfile.prod

@@ -0,0 +1,25 @@
+# Build
+FROM oven/bun:1 AS build
+WORKDIR /app
+
+COPY package.json bun.lock ./
+
+RUN bun install --frozen-lockfile --ignore-scripts
+
+COPY . .
+
+RUN bun --bun run build
+
+# Launch
+FROM oven/bun:1 AS production
+RUN groupadd --gid 1001 nuxt-app \
+  && useradd --uid 1001 --gid nuxt-app \
+  --shell /bin/bash --create-home nuxt-app
+
+USER nuxt-app:nuxt-app
+WORKDIR /app
+
+COPY --from=build /app/.output /app
+
+EXPOSE 3000/tcp
+ENTRYPOINT [ "bun", "--bun", "run", "/app/server/index.mjs" ]

app.vue

@@ -0,0 +1,11 @@
+<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>

assets/css/main.css

@@ -0,0 +1,3 @@
+.dark img {
+    filter: brightness(1.1) contrast(0.9);
+}

components/ui/aspect-ratio/AspectRatio.vue

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

components/ui/aspect-ratio/index.ts

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

components/ui/dialog/Dialog.vue

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

components/ui/dialog/DialogClose.vue

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

components/ui/dialog/DialogContent.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { X } from 'lucide-vue-next'
+import {
+    DialogClose,
+    DialogContent,
+    type DialogContentEmits,
+    type DialogContentProps,
+    DialogPortal,
+    useForwardPropsEmits,
+} from 'reka-ui'
+import { cn } from '@/lib/utils'
+import DialogOverlay from './DialogOverlay.vue'
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'], close?: () => void }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class', 'close')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const handleClose = () => {
+    if (props.close) {
+        props.close()
+    }
+}
+</script>
+
+<template>
+    <DialogPortal>
+        <DialogOverlay />
+        <DialogContent data-slot="dialog-content" @escape-key-down="handleClose" @interact-outside="handleClose"
+            @pointer-down-outside="handleClose" v-bind="forwarded" :class="cn(
+                'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+                props.class,
+            )">
+            <slot />
+
+            <DialogClose @click="handleClose"
+                class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+                <X />
+                <span class="sr-only">Close</span>
+            </DialogClose>
+        </DialogContent>
+    </DialogPortal>
+</template>

components/ui/dialog/DialogDescription.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogDescription
+    data-slot="dialog-description"
+    v-bind="forwardedProps"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </DialogDescription>
+</template>

components/ui/dialog/DialogFooter.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div
+    data-slot="dialog-footer"
+    :class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)"
+  >
+    <slot />
+  </div>
+</template>

components/ui/dialog/DialogHeader.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="dialog-header"
+    :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>

components/ui/dialog/DialogOverlay.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogOverlay, type DialogOverlayProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <DialogOverlay
+    data-slot="dialog-overlay"
+    v-bind="delegatedProps"
+    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
+  >
+    <slot />
+  </DialogOverlay>
+</template>

components/ui/dialog/DialogScrollContent.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { X } from 'lucide-vue-next'
+import {
+  DialogClose,
+  DialogContent,
+  type DialogContentEmits,
+  type DialogContentProps,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    >
+      <DialogContent
+        :class="
+          cn(
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            props.class,
+          )
+        "
+        v-bind="forwarded"
+        @pointer-down-outside="(event) => {
+          const originalEvent = event.detail.originalEvent;
+          const target = originalEvent.target as HTMLElement;
+          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+            event.preventDefault();
+          }
+        }"
+      >
+        <slot />
+
+        <DialogClose
+          class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
+        >
+          <X class="w-4 h-4" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
+</template>

components/ui/dialog/DialogTitle.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogTitle
+    data-slot="dialog-title"
+    v-bind="forwardedProps"
+    :class="cn('text-lg leading-none font-semibold', props.class)"
+  >
+    <slot />
+  </DialogTitle>
+</template>

components/ui/dialog/DialogTrigger.vue

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

components/ui/dialog/index.ts

@@ -0,0 +1,10 @@
+export { default as Dialog } from './Dialog.vue'
+export { default as DialogClose } from './DialogClose.vue'
+export { default as DialogContent } from './DialogContent.vue'
+export { default as DialogDescription } from './DialogDescription.vue'
+export { default as DialogFooter } from './DialogFooter.vue'
+export { default as DialogHeader } from './DialogHeader.vue'
+export { default as DialogOverlay } from './DialogOverlay.vue'
+export { default as DialogScrollContent } from './DialogScrollContent.vue'
+export { default as DialogTitle } from './DialogTitle.vue'
+export { default as DialogTrigger } from './DialogTrigger.vue'

components/ui/label/Label.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { Label, type LabelProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <Label
+    data-slot="label"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>

components/ui/label/index.ts

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

components/ui/navbar/Navbar.vue

@@ -15,7 +15,7 @@
 </script>
 
 <template>
-  <div class="absolute w-screen flex justify-around items-center p-2 border-b-2">
+    <div class="flex justify-around items-center p-2 border-b-2 backdrop-blur">
         <div class="self-start">
             <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight select-none">
                 Anyame
@@ -23,8 +23,10 @@
         </div>
         <div class="self-end">
             <Button variant="outline" @click="toggleColorMode()">
-        <Icon icon="radix-icons:moon" class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-        <Icon icon="radix-icons:sun" class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+                <Icon icon="radix-icons:moon"
+                    class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+                <Icon icon="radix-icons:sun"
+                    class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
                 <span class="sr-only">Toggle theme</span>
             </Button>
         </div>

components/ui/player/Player.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import Artplayer from "artplayer";
+import Hls from "hls.js";
+
+interface Props {
+    src: string;
+    id: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+});
+
+const emit = defineEmits(['get-instance'])
+
+const options = computed(() => {
+    console.log(props.src)
+    return {
+        url: props.src || '',
+        type: 'm3u8',
+        customType: {
+            m3u8: playM3u8,
+        },
+        autoSize: true,
+        autoMini: true,
+        playbackRate: true,
+        fullscreen: true,
+        aspectRatio: true,
+        setting: true,
+        lock: true,
+        autoOrientation: true,
+        autoPlayback: true,
+        id: props.id,
+    }
+})
+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,
+    })
+    nextTick(() => {
+        emit('get-instance')
+    })
+})
+
+onBeforeUnmount(() => {
+    if (instance.value && instance.value.destroy) {
+        instance.value.destroy(false)
+    }
+})
+</script>
+
+<template>
+    <div class="flex items-center justify-center">
+        <div class="w-1/2 aspect-video" ref="artplayerRef"></div>
+    </div>
+    <div class="h-lvh">
+        test
+        test
+        ste
+        t
+
+        t
+
+        t
+    </div>
+    <div class="h-lvh">
+    </div>
+</template>

components/ui/player/index.ts

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

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

@@ -4,11 +4,20 @@ import tailwindcss from '@tailwindcss/vite'
 export default defineNuxtConfig({
     compatibilityDate: '2025-05-15',
     devtools: { enabled: true },
-  modules: ['@nuxt/eslint', '@nuxt/image', 'shadcn-nuxt', '@nuxtjs/color-mode'],
+    modules: ['@nuxt/eslint', '@nuxt/image', 'shadcn-nuxt', '@nuxtjs/color-mode', '@nuxt/icon'],
+    nitro: {
+        preset: 'bun',
+    },
+    routeRules: {
+        '/watch': { ssr: false },
+    },
     colorMode: {
         classSuffix: ''
     },
-  css: ['~/assets/css/tailwind.css'],
+    css: [
+        '~/assets/css/tailwind.css',
+        '~/assets/css/main.css',
+    ],
     vite: {
         plugins: [
             tailwindcss(),
@@ -17,5 +26,9 @@ export default defineNuxtConfig({
     shadcn: {
         prefix: '',
         componentDir: './components/ui'
+    },
+    icon: {
+        mode: 'css',
+        cssLayer: 'base'
     }
 })

openapi/extractor.json

@@ -0,0 +1 @@
+{"openapi":"3.1.0","info":{"title":"OpenAPI definition","version":"v0"},"servers":[{"url":"http://localhost:8081","description":"Generated server url"}],"paths":{"/metadata/shikimori":{"get":{"tags":["metadata-controller"],"operationId":"shikimori","parameters":[{"name":"id","in":"query","required":true,"schema":{"type":"string"}}],"responses":{"200":{"description":"OK","content":{"*/*":{"schema":{"$ref":"#/components/schemas/KodikMetadata"}}}}}}},"/metadata/kodik":{"get":{"tags":["metadata-controller"],"operationId":"kodik","parameters":[{"name":"id","in":"query","required":true,"schema":{"type":"string"}}],"responses":{"200":{"description":"OK","content":{"*/*":{"schema":{"$ref":"#/components/schemas/KodikMetadata"}}}}}}},"/extract/video":{"get":{"tags":["extract-controller"],"operationId":"video","parameters":[{"name":"translationDTO","in":"query","required":true,"schema":{"$ref":"#/components/schemas/KodikTranslationDTO"}},{"name":"quality","in":"query","required":true,"schema":{"type":"string"}},{"name":"episode","in":"query","required":true,"schema":{"type":"integer","format":"int32"}}],"responses":{"200":{"description":"OK","content":{"*/*":{"schema":{"$ref":"#/components/schemas/KodikVideoLinks"}}}}}}}},"components":{"schemas":{"KodikMetadata":{"type":"object","properties":{"title":{"type":"string"},"translations":{"type":"array","items":{"$ref":"#/components/schemas/KodikTranslation"}}}},"KodikTranslation":{"type":"object","properties":{"id":{"type":"string"},"title":{"type":"string"},"mediaId":{"type":"string"},"mediaHash":{"type":"string"},"mediaType":{"type":"string"},"translationType":{"type":"string"},"episodeCount":{"type":"integer","format":"int32"}}},"KodikTranslationDTO":{"type":"object","properties":{"mediaType":{"type":"string"},"mediaId":{"type":"string"},"mediaHash":{"type":"string"}}},"KodikVideoLinks":{"type":"object","properties":{"links":{"type":"object","additionalProperties":{"type":"array","items":{"$ref":"#/components/schemas/Link"}}}}},"Link":{"type":"object","properties":{"type":{"type":"string"},"src":{"type":"string"}}}}}}

openapi/extractor.ts

@@ -0,0 +1,96 @@
+/**
+ * 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>

openapi/search.json

@@ -0,0 +1,365 @@
+{
+    "openapi": "3.1.0",
+    "info": {
+        "title": "OpenAPI definition",
+        "version": "v0"
+    },
+    "servers": [
+        {
+            "url": "http://localhost:8080",
+            "description": "Generated server url"
+        }
+    ],
+    "paths": {
+        "/search": {
+            "get": {
+                "tags": [
+                    "search-controller"
+                ],
+                "operationId": "search",
+                "parameters": [
+                    {
+                        "name": "title",
+                        "in": "query",
+                        "required": true,
+                        "schema": {
+                            "type": "string"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "content": {
+                            "*/*": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/KodikResponse"
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    },
+    "components": {
+        "schemas": {
+            "KodikResponse": {
+                "type": "object",
+                "properties": {
+                    "total": {
+                        "type": "integer",
+                        "format": "int32"
+                    },
+                    "results": {
+                        "type": "array",
+                        "items": {
+                            "$ref": "#/components/schemas/Result"
+                        }
+                    }
+                }
+            },
+            "MaterialData": {
+                "type": "object",
+                "properties": {
+                    "title": {
+                        "type": "string"
+                    },
+                    "year": {
+                        "type": "integer",
+                        "format": "int32"
+                    },
+                    "description": {
+                        "type": "string"
+                    },
+                    "screenshots": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "duration": {
+                        "type": "integer",
+                        "format": "int32"
+                    },
+                    "countries": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "genres": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "actors": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "directors": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "producers": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "writers": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "composers": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "editors": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "designers": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "operators": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "anime_title": {
+                        "type": "string"
+                    },
+                    "title_en": {
+                        "type": "string"
+                    },
+                    "other_titles": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "other_titles_en": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "other_titles_jp": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "anime_license_name": {
+                        "type": "string"
+                    },
+                    "anime_licensed_by": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "anime_kind": {
+                        "type": "string"
+                    },
+                    "all_status": {
+                        "type": "string"
+                    },
+                    "anime_status": {
+                        "type": "string"
+                    },
+                    "anime_description": {
+                        "type": "string"
+                    },
+                    "poster_url": {
+                        "type": "string"
+                    },
+                    "anime_poster_url": {
+                        "type": "string"
+                    },
+                    "all_genres": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "anime_genres": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "anime_studios": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "kinopoisk_rating": {
+                        "type": "number",
+                        "format": "double"
+                    },
+                    "kinopoisk_votes": {
+                        "type": "integer",
+                        "format": "int32"
+                    },
+                    "imdb_rating": {
+                        "type": "number",
+                        "format": "double"
+                    },
+                    "imdb_votes": {
+                        "type": "integer",
+                        "format": "int32"
+                    },
+                    "shikimori_rating": {
+                        "type": "number",
+                        "format": "double"
+                    },
+                    "shikimori_votes": {
+                        "type": "integer",
+                        "format": "int32"
+                    },
+                    "premiere_world": {
+                        "type": "string"
+                    },
+                    "aired_at": {
+                        "type": "string"
+                    },
+                    "released_at": {
+                        "type": "string"
+                    },
+                    "rating_mpaa": {
+                        "type": "string"
+                    },
+                    "minimal_age": {
+                        "type": "integer",
+                        "format": "int32"
+                    },
+                    "episodes_total": {
+                        "type": "integer",
+                        "format": "int32"
+                    },
+                    "episodes_aired": {
+                        "type": "integer",
+                        "format": "int32"
+                    }
+                }
+            },
+            "Result": {
+                "type": "object",
+                "properties": {
+                    "id": {
+                        "type": "string"
+                    },
+                    "type": {
+                        "type": "string"
+                    },
+                    "link": {
+                        "type": "string"
+                    },
+                    "title": {
+                        "type": "string"
+                    },
+                    "translation": {
+                        "$ref": "#/components/schemas/Translation"
+                    },
+                    "year": {
+                        "type": "integer",
+                        "format": "int32"
+                    },
+                    "quality": {
+                        "type": "string"
+                    },
+                    "camrip": {
+                        "type": "boolean"
+                    },
+                    "lgbt": {
+                        "type": "boolean"
+                    },
+                    "screenshots": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "title_orig": {
+                        "type": "string"
+                    },
+                    "other_title": {
+                        "type": "string"
+                    },
+                    "last_season": {
+                        "type": "integer",
+                        "format": "int32"
+                    },
+                    "last_episode": {
+                        "type": "integer",
+                        "format": "int32"
+                    },
+                    "episodes_count": {
+                        "type": "integer",
+                        "format": "int32"
+                    },
+                    "kinopoisk_id": {
+                        "type": "string"
+                    },
+                    "imdb_id": {
+                        "type": "string"
+                    },
+                    "worldart_link": {
+                        "type": "string"
+                    },
+                    "shikimori_id": {
+                        "type": "string"
+                    },
+                    "blocked_countries": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "created_at": {
+                        "type": "string"
+                    },
+                    "updated_at": {
+                        "type": "string"
+                    },
+                    "material_data": {
+                        "$ref": "#/components/schemas/MaterialData"
+                    }
+                }
+            },
+            "Translation": {
+                "type": "object",
+                "properties": {
+                    "id": {
+                        "type": "integer",
+                        "format": "int32"
+                    },
+                    "title": {
+                        "type": "string"
+                    },
+                    "type": {
+                        "type": "string"
+                    }
+                }
+            }
+        }
+    }
+}

openapi/search.ts

@@ -0,0 +1,111 @@
+/**
+ * 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 KodikResponse {
+  total?: number;
+  results?: Result[];
+}
+
+export interface MaterialData {
+  title?: string;
+  year?: number;
+  description?: string;
+  screenshots?: string[];
+  duration?: number;
+  countries?: string[];
+  genres?: string[];
+  actors?: string[];
+  directors?: string[];
+  producers?: string[];
+  writers?: string[];
+  composers?: string[];
+  editors?: string[];
+  designers?: string[];
+  operators?: string[];
+  anime_title?: string;
+  title_en?: string;
+  other_titles?: string[];
+  other_titles_en?: string[];
+  other_titles_jp?: string[];
+  anime_license_name?: string;
+  anime_licensed_by?: string[];
+  anime_kind?: string;
+  all_status?: string;
+  anime_status?: string;
+  anime_description?: string;
+  poster_url?: string;
+  anime_poster_url?: string;
+  all_genres?: string[];
+  anime_genres?: string[];
+  anime_studios?: string[];
+  kinopoisk_rating?: number;
+  kinopoisk_votes?: number;
+  imdb_rating?: number;
+  imdb_votes?: number;
+  shikimori_rating?: number;
+  shikimori_votes?: number;
+  premiere_world?: string;
+  aired_at?: string;
+  released_at?: string;
+  rating_mpaa?: string;
+  minimal_age?: number;
+  episodes_total?: number;
+  episodes_aired?: number;
+}
+
+export interface Result {
+  id?: string;
+  type?: string;
+  link?: string;
+  title?: string;
+  translation?: Translation;
+  year?: number;
+  quality?: string;
+  camrip?: boolean;
+  lgbt?: boolean;
+  screenshots?: string[];
+  title_orig?: string;
+  other_title?: string;
+  last_season?: number;
+  last_episode?: number;
+  episodes_count?: number;
+  kinopoisk_id?: string;
+  imdb_id?: string;
+  worldart_link?: string;
+  shikimori_id?: string;
+  blocked_countries?: string[];
+  created_at?: string;
+  updated_at?: string;
+  material_data?: MaterialData;
+}
+
+export interface Translation {
+  id?: number;
+  title?: string;
+  type?: string;
+}
+
+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 SearchResult = AxiosResponse<KodikResponse>

orval.config.js

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

package.json

@@ -11,15 +11,19 @@
     },
     "dependencies": {
         "@nuxt/eslint": "1.4.1",
+        "@nuxt/icon": "1.15.0",
         "@nuxt/image": "1.10.0",
         "@tailwindcss/vite": "^4.1.7",
-    "@vueuse/core": "^13.2.0",
+        "@vueuse/core": "^13.4.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.2.1",
+        "reka-ui": "^2.3.1",
         "shadcn-nuxt": "2.1.0",
         "tailwind-merge": "^3.3.0",
         "tailwindcss": "^4.1.7",
@@ -29,8 +33,8 @@
         "vue-sonner": "^2.0.0"
     },
     "devDependencies": {
-    "@iconify-json/radix-icons": "^1.2.2",
-    "@iconify/vue": "^5.0.0",
-    "@nuxtjs/color-mode": "^3.5.2"
+        "@iconify-json/heroicons": "^1.2.2",
+        "@nuxtjs/color-mode": "^3.5.2",
+        "orval": "^7.10.0"
     }
 }

pages/anime/[slug].vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { kodik, type KodikTranslation } from '~/openapi/extractor';
+
+const route = useRoute();
+const animeId = ref(route.params.slug as string)
+
+const results = ref<KodikTranslation[]>([])
+const isLoading = ref(false)
+const error = ref<unknown>(null)
+
+const isSelectingEpisode = ref(false)
+const currentSelectionItem = ref<KodikTranslation | null>(null)
+
+watchEffect(async () => {
+    if (!animeId.value) return
+    try {
+        isLoading.value = true
+        error.value = null
+        const response = await kodik({ id: animeId.value })
+        results.value = response?.data?.translations || []
+    } catch (err) {
+        error.value = err
+        console.error('Failed to fetch anime details:', err)
+    } finally {
+        isLoading.value = false
+    }
+})
+
+function episodesSelect(item: KodikTranslation) {
+    currentSelectionItem.value = item
+    isSelectingEpisode.value = true
+}
+
+function closeDialog() {
+    console.log('Dialog closed')
+    isSelectingEpisode.value = false
+}
+</script>
+
+<template>
+    <div v-for="item in results" :key="item.id" class="flex w-[32rem]">
+        <div @click="episodesSelect(item)">
+            <span>{{ item.title }}</span>
+            <span>{{ item.episodeCount }}</span>
+        </div>
+    </div>
+    <p>{{ $route.params.slug }}</p>
+    <Dialog v-bind:open="isSelectingEpisode">
+        <DialogTrigger as-child>
+            <Button variant="outline">
+                Select episode
+            </Button>
+        </DialogTrigger>
+        <DialogContent class="sm:max-w-[425px] max-h-[90dvh] overflow-y-auto" :close="closeDialog">
+            <DialogHeader>
+                <DialogTitle>Select episode</DialogTitle>
+            </DialogHeader>
+            <div class="grid gap-4 py-4">
+                <div v-for="n in currentSelectionItem?.episodeCount || 0" :key="n"
+                    class="flex items-center justify-between">
+                    <NuxtLink
+                        :to="{ path: '/watch', query: { mediaType: currentSelectionItem?.mediaType, mediaId: currentSelectionItem?.mediaId, mediaHash: currentSelectionItem?.mediaHash, episode: n } }"
+                        class="flex items-center justify-between gap-2 w-full">
+                        <span>Episode {{ n }}</span>
+                        <Button variant="outline" @click="closeDialog">Watch</Button>
+                    </NuxtLink>
+                </div>
+            </div>
+        </DialogContent>
+    </Dialog>
+</template>

pages/index.vue

@@ -12,10 +12,10 @@ import {
     SelectValue
 } from "~/components/ui/select";
 import { toast } from "vue-sonner";
-import {Toaster} from "~/components/ui/sonner";
-import {Navbar} from "~/components/ui/navbar";
 import 'vue-sonner/style.css'
+import { Icon } from "#components";
 
+const router = useRouter()
 const searchProvider = ref('kodik')
 const displaySearchProvider = computed(() => {
     let label = '';
@@ -39,23 +39,21 @@ function querySearch() {
         toast('Please enter a value');
         return;
     }
-
+    router.push({ path: '/search', query: { title: search.value, provider: searchProvider.value } })
+        .catch(err => {
+            console.error('Navigation error:', err);
+            toast.error('Failed to navigate to search results');
+        });
 }
 </script>
 
 <template>
-  <div>
-    <Toaster/>
-    <Navbar/>
-    <div class="bg-background h-lvh w-screen flex justify-center items-center gap-1">
+    <div class="bg-background flex-1 w-screen flex justify-center items-center gap-1">
+        <form @submit.prevent="querySearch" class="flex items-center gap-2">
             <Select v-model="searchProvider">
                 <SelectTrigger>
                     <SelectValue placeholder="Select an provider">
-            <img
-                :src="displaySearchProvider.image"
-                alt=""
-                class="w-5 h-5 rounded border border-gray-300"
-            />
+                        <img :src="displaySearchProvider.image" alt="" class="w-5 h-5 rounded border border-gray-300">
                         <span>{{ displaySearchProvider.label }}</span>
                     </SelectValue>
                 </SelectTrigger>
@@ -63,26 +61,20 @@ function querySearch() {
                     <SelectGroup>
                         <SelectLabel>Providers</SelectLabel>
                         <SelectItem value="kodik">
-              <img
-                  :src="kodikImage"
-                  alt=""
-                  class="w-5 h-5 rounded border border-gray-300"
-              />
+                            <img :src="kodikImage" alt="" class="w-5 h-5 rounded border border-gray-300">
                             <span>Kodik</span>
                         </SelectItem>
                         <SelectItem value="shikimori">
-              <img
-                  :src="shikimoriImage"
-                  alt=""
-                  class="w-5 h-5 rounded border border-gray-300"
-              />
+                            <img :src="shikimoriImage" alt="" class="w-5 h-5 rounded border border-gray-300">
                             Shikimori
                         </SelectItem>
                     </SelectGroup>
                 </SelectContent>
             </Select>
             <Input v-model="search" class="w-64" type="text" placeholder="Search anime..." />
-      <Button @click="querySearch"><Icon icon="radix-icons:magnifying-glass" class="h-[1.2rem] w-[1.2rem]" /></Button>
-    </div>
+            <Button type="submit">
+                <Icon name="heroicons:magnifying-glass-16-solid" class="w-6 h-6" />
+            </Button>
+        </form>
     </div>
 </template>

pages/search.vue

@@ -1,11 +1,68 @@
 <script setup lang="ts">
+import { Icon } from '#components'
+import { search, type Result } from '~/openapi/search'
 
+const route = useRoute()
+const searchQuery = ref(route.query.title as string || '')
+
+const results = ref<Result[]>([])
+const isLoading = ref(false)
+const error = ref<unknown>(null)
+
+watchEffect(async () => {
+    if (!searchQuery.value) return
+
+    try {
+        isLoading.value = true
+        error.value = null
+        console.log("SEARCHING")
+        const response = await search({ title: searchQuery.value })
+        results.value = response.data.results || []
+    } catch (err) {
+        error.value = err
+        console.error('Search failed:', err)
+    } finally {
+        isLoading.value = false
+    }
+}, {
+    flush: 'post'
+})
 </script>
 
 <template>
-  <div></div>
+    <div>
+        <div v-if="isLoading">
+            Loading results...
+        </div>
+
+        <div v-if="error">
+            Error loading results: {{ error }}
+        </div>
+
+        <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">
+                        <div
+                            class="flex items-center px-2 py-0.5 backdrop-blur-none bg-primary/75 text-background/80 rounded-sm text-xs">
+                            <Icon name="gg:play-list" />
+                            {{ item.material_data?.episodes_total }}
+                            episode
+                        </div>
+                    </div>
+                    <div>
+                        <h3 className="text-xl font-semibold tracking-tight">{{ item.title }}</h3>
+                    </div>
+                </NuxtLink>
+            </div>
+        </div>
+
+        <div v-if="!isLoading && !error && results.length === 0 && searchQuery">
+            No results found for "{{ searchQuery }}"
+        </div>
+    </div>
 </template>
-
-<style scoped>
-
-</style>

pages/watch.vue

@@ -0,0 +1,100 @@
+<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="hlsUrl">
+                <Player :id="mediaId.toString()" :src="hlsUrl" />
+            </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/Player.vue'
+import { video, type KodikTranslationDTO, type KodikVideoLinks, type VideoParams } from '~/openapi/extractor'
+
+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: '360',
+        }
+
+        const response = await video(videoParams)
+        results.value = response?.data || null
+
+        if (results.value?.links) {
+            const qualities = Object.keys(results.value.links)
+            const bestQuality = qualities.includes('360') ? '360' :
+                qualities[0]
+
+            const hlsLink = results.value.links[bestQuality]?.find(link =>
+                link.type?.includes('hls') || link.src?.includes('.m3u8')
+            )
+            console.log(bestQuality)
+
+            if (hlsLink?.src) {
+                hlsUrl.value = hlsLink.src
+                console.log("UPDATE hls url")
+                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>