Use user to launch nuxt app, use bun preset for nitro

.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

@@ -1,32 +1,34 @@
 <script setup lang="ts">
-  import { Icon } from '@iconify/vue'
+import { Icon } from '@iconify/vue'
 
-  const colorMode = useColorMode()
+const colorMode = useColorMode()
 
-  function toggleColorMode(): void {
+function toggleColorMode(): void {
     const currentColorMode = colorMode.value
     if (currentColorMode === 'light') {
-      colorMode.preference = 'dark'
+        colorMode.preference = 'dark'
     }
     if (currentColorMode === 'dark') {
-      colorMode.preference = 'light'
+        colorMode.preference = 'light'
     }
-  }
+}
 </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">
+        <div class="self-start">
-      <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight select-none">
+            <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight select-none">
-        Anyame
+                Anyame
-      </h3>
+            </h3>
+        </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" />
+                <span class="sr-only">Toggle theme</span>
+            </Button>
+        </div>
     </div>
-    <div class="self-end">
+</template>
-      <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" />
-        <span class="sr-only">Toggle theme</span>
-      </Button>
-    </div>
-  </div>
-</template>

nuxt.config.ts

@@ -2,20 +2,30 @@ import tailwindcss from '@tailwindcss/vite'
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  compatibilityDate: '2025-05-15',
+    compatibilityDate: '2025-05-15',
-  devtools: { enabled: true },
+    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'],
-  colorMode: {
+    nitro: {
-    classSuffix: ''
+        preset: 'bun',
-  },
+    },
-  css: ['~/assets/css/tailwind.css'],
+    colorMode: {
-  vite: {
+        classSuffix: ''
-    plugins: [
+    },
-      tailwindcss(),
+    css: [
-    ]
+        '~/assets/css/tailwind.css',
-  },
+        '~/assets/css/main.css',
-  shadcn: {
+    ],
-    prefix: '',
+    vite: {
-    componentDir: './components/ui'
+        plugins: [
-  }
+            tailwindcss(),
+        ]
+    },
+    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

@@ -1,36 +1,41 @@
 {
-  "name": "nuxt-app",
+    "name": "nuxt-app",
-  "private": true,
+    "private": true,
-  "type": "module",
+    "type": "module",
-  "scripts": {
+    "scripts": {
-    "build": "nuxt build",
+        "build": "nuxt build",
-    "dev": "nuxt dev",
+        "dev": "nuxt dev",
-    "generate": "nuxt generate",
+        "generate": "nuxt generate",
-    "preview": "nuxt preview",
+        "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+        "postinstall": "nuxt prepare"
-  },
+    },
-  "dependencies": {
+    "dependencies": {
-    "@nuxt/eslint": "1.4.1",
+        "@nuxt/eslint": "1.4.1",
-    "@nuxt/image": "1.10.0",
+        "@nuxt/icon": "1.15.0",
-    "@tailwindcss/vite": "^4.1.7",
+        "@nuxt/image": "1.10.0",
-    "@vueuse/core": "^13.2.0",
+        "@tailwindcss/vite": "^4.1.7",
-    "class-variance-authority": "^0.7.1",
+        "@vime/core": "^5.4.1",
-    "clsx": "^2.1.1",
+        "@vime/vue-next": "^5.4.1",
-    "eslint": "^9.0.0",
+        "@vueuse/core": "^13.4.0",
-    "lucide-vue-next": "^0.511.0",
+        "axios": "^1.10.0",
-    "nuxt": "^3.17.4",
+        "class-variance-authority": "^0.7.1",
-    "reka-ui": "^2.2.1",
+        "clsx": "^2.1.1",
-    "shadcn-nuxt": "2.1.0",
+        "eslint": "^9.0.0",
-    "tailwind-merge": "^3.3.0",
+        "lucide-vue-next": "^0.511.0",
-    "tailwindcss": "^4.1.7",
+        "nuxt": "^3.17.4",
-    "tw-animate-css": "^1.3.0",
+        "reka-ui": "^2.3.1",
-    "vue": "^3.5.14",
+        "shadcn-nuxt": "2.1.0",
-    "vue-router": "^4.5.1",
+        "tailwind-merge": "^3.3.0",
-    "vue-sonner": "^2.0.0"
+        "tailwindcss": "^4.1.7",
-  },
+        "tw-animate-css": "^1.3.0",
-  "devDependencies": {
+        "video.js": "^8.23.3",
-    "@iconify-json/radix-icons": "^1.2.2",
+        "vue": "^3.5.14",
-    "@iconify/vue": "^5.0.0",
+        "vue-router": "^4.5.1",
-    "@nuxtjs/color-mode": "^3.5.2"
+        "vue-sonner": "^2.0.0"
-  }
+    },
+    "devDependencies": {
+        "@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

@@ -3,86 +3,78 @@
 import kodikImage from "assets/img/kodik.png";
 import shikimoriImage from "assets/img/shikimori.png";
 import {
-  Select,
+    Select,
-  SelectContent,
+    SelectContent,
-  SelectGroup,
+    SelectGroup,
-  SelectItem,
+    SelectItem,
-  SelectLabel,
+    SelectLabel,
-  SelectTrigger,
+    SelectTrigger,
-  SelectValue
+    SelectValue
 } from "~/components/ui/select";
-import {toast} from "vue-sonner";
+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 = '';
+    let label = '';
-  let image;
+    let image;
-  if (searchProvider.value === 'kodik') {
+    if (searchProvider.value === 'kodik') {
-    label = 'Kodik';
+        label = 'Kodik';
-    image = kodikImage;
+        image = kodikImage;
-  }
+    }
-  if (searchProvider.value === 'shikimori') {
+    if (searchProvider.value === 'shikimori') {
-    label = 'Shikimori';
+        label = 'Shikimori';
-    image = shikimoriImage;
+        image = shikimoriImage;
-  }
+    }
-  return {
+    return {
-    label,
+        label,
-    image
+        image
-  }
+    }
 })
 const search = defineModel<string>("")
 function querySearch() {
-  if (!search.value || search.value.trim() === "") {
+    if (!search.value || search.value.trim() === "") {
-    toast('Please enter a value');
+        toast('Please enter a value');
-    return;
+        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>
+    <div class="bg-background flex-1 w-screen flex justify-center items-center gap-1">
-    <Toaster/>
+        <form @submit.prevent="querySearch" class="flex items-center gap-2">
-    <Navbar/>
+            <Select v-model="searchProvider">
-    <div class="bg-background h-lvh w-screen flex justify-center items-center gap-1">
+                <SelectTrigger>
-      <Select v-model="searchProvider">
+                    <SelectValue placeholder="Select an provider">
-        <SelectTrigger>
+                        <img :src="displaySearchProvider.image" alt="" class="w-5 h-5 rounded border border-gray-300">
-          <SelectValue placeholder="Select an provider">
+                        <span>{{ displaySearchProvider.label }}</span>
-            <img
+                    </SelectValue>
-                :src="displaySearchProvider.image"
+                </SelectTrigger>
-                alt=""
+                <SelectContent>
-                class="w-5 h-5 rounded border border-gray-300"
+                    <SelectGroup>
-            />
+                        <SelectLabel>Providers</SelectLabel>
-            <span>{{displaySearchProvider.label}}</span>
+                        <SelectItem value="kodik">
-          </SelectValue>
+                            <img :src="kodikImage" alt="" class="w-5 h-5 rounded border border-gray-300">
-        </SelectTrigger>
+                            <span>Kodik</span>
-        <SelectContent>
+                        </SelectItem>
-          <SelectGroup>
+                        <SelectItem value="shikimori">
-            <SelectLabel>Providers</SelectLabel>
+                            <img :src="shikimoriImage" alt="" class="w-5 h-5 rounded border border-gray-300">
-            <SelectItem value="kodik">
+                            Shikimori
-              <img
+                        </SelectItem>
-                  :src="kodikImage"
+                    </SelectGroup>
-                  alt=""
+                </SelectContent>
-                  class="w-5 h-5 rounded border border-gray-300"
+            </Select>
-              />
+            <Input v-model="search" class="w-64" type="text" placeholder="Search anime..." />
-              <span>Kodik</span>
+            <Button type="submit">
-            </SelectItem>
+                <Icon name="heroicons:magnifying-glass-16-solid" class="w-6 h-6" />
-            <SelectItem value="shikimori">
+            </Button>
-              <img
+        </form>
-                  :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>
-  </div>
+</template>
-</template>

pages/search.vue

@@ -1,11 +1,61 @@
 <script setup lang="ts">
+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
+        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
+    }
+})
 </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">
+                        <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>
+            </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,125 @@
+<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>