Merge branch 'main' into feature/next-episode-button

Reviewed-on: #3
Co-authored-by: bivashy <botyrbojey@gmail.com>
Co-committed-by: bivashy <botyrbojey@gmail.com>

.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/app.vue

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

app/assets/css/main.css

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

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

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

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

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

app/components/ui/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>

app/components/ui/aspect-ratio/index.ts

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

app/components/ui/button/index.ts

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

app/components/ui/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>

app/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>

app/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>

app/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>

app/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>

app/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>

app/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>

app/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>

app/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>

app/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>

app/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'

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

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

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

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

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

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

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

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

app/components/ui/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>

app/components/ui/label/index.ts

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

app/components/ui/navbar/Navbar.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import Button from '../button/Button.vue'
+import { NuxtLink } from '#components'
+
+const colorMode = useColorMode()
+
+function toggleColorMode(): void {
+    const currentColorMode = colorMode.value
+    if (currentColorMode === 'light') {
+        colorMode.preference = 'dark'
+    }
+    if (currentColorMode === 'dark') {
+        colorMode.preference = 'light'
+    }
+}
+</script>
+
+<template>
+    <div class="flex justify-around items-center p-2 border-b-2 backdrop-blur">
+        <NuxtLink to="/" class="self-start">
+            <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight select-none">
+                Anyame
+            </h3>
+        </NuxtLink>
+        <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>
+</template>

app/components/ui/player/ChangeEpisodeButton.vue

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

app/components/ui/player/Player.vue

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

app/components/ui/player/index.ts

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

app/components/ui/tooltip/Tooltip.vue

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

app/components/ui/tooltip/TooltipContent.vue

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

app/components/ui/tooltip/TooltipProvider.vue

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

app/components/ui/tooltip/TooltipTrigger.vue

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

app/components/ui/tooltip/index.ts

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

app/components/util/player-control.js

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

app/components/util/route.js

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

app/openapi/extractor.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"}}}}}}

app/openapi/extractor.ts

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

app/openapi/search.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"
+                    }
+                }
+            }
+        }
+    }
+}

app/openapi/search.ts

@@ -0,0 +1,136 @@
+/**
+ * Generated by orval v7.10.0 🍺
+ * Do not edit manually.
+ * OpenAPI definition
+ * OpenAPI spec version: v0
+ */
+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 type searchResponse200 = {
+  data: KodikResponse
+  status: 200
+}
+    
+export type searchResponseComposite = searchResponse200;
+    
+export type searchResponse = searchResponseComposite & {
+  headers: Headers;
+}
+
+export const getSearchUrl = (params: SearchParams,) => {
+  const normalizedParams = new URLSearchParams();
+
+  Object.entries(params || {}).forEach(([key, value]) => {
+    
+    if (value !== undefined) {
+      normalizedParams.append(key, value === null ? 'null' : value.toString())
+    }
+  });
+
+  const stringifiedParams = normalizedParams.toString();
+
+  return stringifiedParams.length > 0 ? `http://localhost:8080/search?${stringifiedParams}` : `http://localhost:8080/search`
+}
+
+export const search = async (params: SearchParams, options?: RequestInit): Promise<searchResponse> => {
+  
+  const res = await fetch(getSearchUrl(params),
+  {      
+    ...options,
+    method: 'GET'
+    
+    
+  }
+)
+
+  const body = [204, 205, 304].includes(res.status) ? null : await res.text()
+  const data: searchResponse['data'] = body ? JSON.parse(body) : {}
+
+  return { data, status: res.status, headers: res.headers } as searchResponse
+}

app/pages/anime/[slug].vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { Button } from '~/components/ui/button';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '~/components/ui/dialog';
+import { kodik, type KodikTranslation } from '~/openapi/extractor';
+
+const route = useRoute();
+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>

app/pages/index.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+
+import kodikImage from "assets/img/kodik.png";
+import shikimoriImage from "assets/img/shikimori.png";
+import {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectLabel,
+    SelectTrigger,
+    SelectValue
+} from "~/components/ui/select";
+import { toast } from "vue-sonner";
+import 'vue-sonner/style.css'
+import { Icon } from "#components";
+import { Input } from "~/components/ui/input";
+import { Button } from "~/components/ui/button";
+
+const router = useRouter()
+const searchProvider = ref('kodik')
+const displaySearchProvider = computed(() => {
+    let label = '';
+    let image;
+    if (searchProvider.value === 'kodik') {
+        label = 'Kodik';
+        image = kodikImage;
+    }
+    if (searchProvider.value === 'shikimori') {
+        label = 'Shikimori';
+        image = shikimoriImage;
+    }
+    return {
+        label,
+        image
+    }
+})
+const search = defineModel<string>("")
+function querySearch() {
+    if (!search.value || search.value.trim() === "") {
+        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 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">
+                        <span>{{ displaySearchProvider.label }}</span>
+                    </SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                    <SelectGroup>
+                        <SelectLabel>Providers</SelectLabel>
+                        <SelectItem value="kodik">
+                            <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">
+                            Shikimori
+                        </SelectItem>
+                    </SelectGroup>
+                </SelectContent>
+            </Select>
+            <Input v-model="search" class="w-64" type="text" placeholder="Search anime..." />
+            <Button type="submit">
+                <Icon name="heroicons:magnifying-glass-16-solid" class="w-6 h-6" />
+            </Button>
+        </form>
+    </div>
+</template>

app/pages/search.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { AnimeCard } from '~/components/ui/anime-card'
+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
+    }
+}, {
+    flush: 'post'
+})
+</script>
+
+<template>
+    <div class="py-4 px-32">
+        <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]">
+                <AnimeCard :item="item" />
+            </div>
+        </div>
+
+        <div v-if="!isLoading && !error && results.length === 0 && searchQuery">
+            No results found for "{{ searchQuery }}"
+        </div>
+    </div>
+</template>

app/pages/watch.vue

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

components/ui/button/index.ts

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

components/ui/navbar/Navbar.vue

@@ -1,32 +0,0 @@
-<script setup lang="ts">
-  import { Icon } from '@iconify/vue'
-
-  const colorMode = useColorMode()
-
-  function toggleColorMode(): void {
-    const currentColorMode = colorMode.value
-    if (currentColorMode === 'light') {
-      colorMode.preference = 'dark'
-    }
-    if (currentColorMode === 'dark') {
-      colorMode.preference = 'light'
-    }
-  }
-</script>
-
-<template>
-  <div class="absolute w-screen flex justify-around items-center p-2 border-b-2">
-    <div class="self-start">
-      <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight select-none">
-        Anyame
-      </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>
-</template>

compose.yml

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

eslint.config.mjs

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

lib/utils.ts

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

nuxt.config.ts

@@ -2,20 +2,33 @@ 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'],
+    routeRules: {
-  vite: {
+        '/watch': { ssr: false },
-    plugins: [
+    },
-      tailwindcss(),
+    colorMode: {
-    ]
+        classSuffix: ''
-  },
+    },
-  shadcn: {
+    css: [
-    prefix: '',
+        '~/assets/css/tailwind.css',
-    componentDir: './components/ui'
+        '~/assets/css/main.css',
-  }
+    ],
+    vite: {
+        plugins: [
+            tailwindcss(),
+        ]
+    },
+    shadcn: {
+        prefix: '',
+        componentDir: './components/ui'
+    },
+    icon: {
+        mode: 'css',
+        cssLayer: 'base'
+    }
 })

orval.config.js

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

package.json

@@ -1,36 +1,42 @@
 {
-  "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",
+        "@vueuse/core": "^13.5.0",
-    "clsx": "^2.1.1",
+        "artplayer": "^5.2.3",
-    "eslint": "^9.0.0",
+        "axios": "^1.10.0",
-    "lucide-vue-next": "^0.511.0",
+        "class-variance-authority": "^0.7.1",
-    "nuxt": "^3.17.4",
+        "clsx": "^2.1.1",
-    "reka-ui": "^2.2.1",
+        "eslint": "^9.0.0",
-    "shadcn-nuxt": "2.1.0",
+        "hls.js": "^1.6.7",
-    "tailwind-merge": "^3.3.0",
+        "lucide-vue-next": "^0.511.0",
-    "tailwindcss": "^4.1.7",
+        "node-vibrant": "^4.0.3",
-    "tw-animate-css": "^1.3.0",
+        "nuxt": "^4.0.0",
-    "vue": "^3.5.14",
+        "reka-ui": "^2.3.2",
-    "vue-router": "^4.5.1",
+        "shadcn-nuxt": "2.1.0",
-    "vue-sonner": "^2.0.0"
+        "tailwind-merge": "^3.3.0",
-  },
+        "tailwindcss": "^4.1.7",
-  "devDependencies": {
+        "tw-animate-css": "^1.3.0",
-    "@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",
+        "@iconify-json/mage": "^1.2.4",
+        "@nuxtjs/color-mode": "^3.5.2",
+        "orval": "^7.10.0"
+    }
 }

pages/index.vue

@@ -1,88 +0,0 @@
-<script setup lang="ts">
-
-import kodikImage from "assets/img/kodik.png";
-import shikimoriImage from "assets/img/shikimori.png";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  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'
-
-const searchProvider = ref('kodik')
-const displaySearchProvider = computed(() => {
-  let label = '';
-  let image;
-  if (searchProvider.value === 'kodik') {
-    label = 'Kodik';
-    image = kodikImage;
-  }
-  if (searchProvider.value === 'shikimori') {
-    label = 'Shikimori';
-    image = shikimoriImage;
-  }
-  return {
-    label,
-    image
-  }
-})
-const search = defineModel<string>("")
-function querySearch() {
-  if (!search.value || search.value.trim() === "") {
-    toast('Please enter a value');
-    return;
-  }
-
-}
-</script>
-
-<template>
-  <div>
-    <Toaster/>
-    <Navbar/>
-    <div class="bg-background h-lvh w-screen flex justify-center items-center gap-1">
-      <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"
-            />
-            <span>{{displaySearchProvider.label}}</span>
-          </SelectValue>
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Providers</SelectLabel>
-            <SelectItem value="kodik">
-              <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"
-              />
-              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>

pages/search.vue

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-  <div></div>
-</template>
-
-<style scoped>
-
-</style>

server/api/proxy-image.get.ts

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