feature/search-prototype (#1)
### Description This pull request migrates to Nuxt 4.0.0, adds docker, and uses Orval and OpenAPI 3.0 specification to interact with backend Reviewed-on: #1 Co-authored-by: bivashy <botyrbojey@gmail.com> Co-committed-by: bivashy <botyrbojey@gmail.com>
This commit is contained in:
24
.dockerignore
Normal file
24
.dockerignore
Normal file
@ -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
|
||||
25
Dockerfile.prod
Normal file
25
Dockerfile.prod
Normal file
@ -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" ]
|
||||
18
app/app.vue
Normal file
18
app/app.vue
Normal file
@ -0,0 +1,18 @@
|
||||
<script setup lang="ts">
|
||||
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>
|
||||
3
app/assets/css/main.css
Normal file
3
app/assets/css/main.css
Normal file
@ -0,0 +1,3 @@
|
||||
.dark img {
|
||||
filter: brightness(1.1) contrast(0.9);
|
||||
}
|
||||
|
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 6.7 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
61
app/components/ui/anime-card/AnimeCard.vue
Normal file
61
app/components/ui/anime-card/AnimeCard.vue
Normal file
@ -0,0 +1,61 @@
|
||||
<script setup lang="ts">
|
||||
import type { Result } from '~/openapi/search';
|
||||
import { Vibrant } from "node-vibrant/browser";
|
||||
import Tooltip from '../tooltip/Tooltip.vue';
|
||||
import TooltipTrigger from '../tooltip/TooltipTrigger.vue';
|
||||
import TooltipContent from '../tooltip/TooltipContent.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>
|
||||
<Tooltip>
|
||||
<TooltipTrigger 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 name="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>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<div class="max-w-96">
|
||||
<span class="break-words">
|
||||
{{ props.item.material_data?.description }}
|
||||
</span>
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</template>
|
||||
1
app/components/ui/anime-card/index.ts
Normal file
1
app/components/ui/anime-card/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { default as AnimeCard } from './AnimeCard.vue'
|
||||
14
app/components/ui/aspect-ratio/AspectRatio.vue
Normal file
14
app/components/ui/aspect-ratio/AspectRatio.vue
Normal file
@ -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>
|
||||
1
app/components/ui/aspect-ratio/index.ts
Normal file
1
app/components/ui/aspect-ratio/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { default as AspectRatio } from './AspectRatio.vue'
|
||||
36
app/components/ui/button/index.ts
Normal file
36
app/components/ui/button/index.ts
Normal file
@ -0,0 +1,36 @@
|
||||
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>
|
||||
17
app/components/ui/dialog/Dialog.vue
Normal file
17
app/components/ui/dialog/Dialog.vue
Normal file
@ -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>
|
||||
14
app/components/ui/dialog/DialogClose.vue
Normal file
14
app/components/ui/dialog/DialogClose.vue
Normal file
@ -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>
|
||||
47
app/components/ui/dialog/DialogContent.vue
Normal file
47
app/components/ui/dialog/DialogContent.vue
Normal file
@ -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>
|
||||
22
app/components/ui/dialog/DialogDescription.vue
Normal file
22
app/components/ui/dialog/DialogDescription.vue
Normal file
@ -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>
|
||||
15
app/components/ui/dialog/DialogFooter.vue
Normal file
15
app/components/ui/dialog/DialogFooter.vue
Normal file
@ -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>
|
||||
17
app/components/ui/dialog/DialogHeader.vue
Normal file
17
app/components/ui/dialog/DialogHeader.vue
Normal file
@ -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>
|
||||
20
app/components/ui/dialog/DialogOverlay.vue
Normal file
20
app/components/ui/dialog/DialogOverlay.vue
Normal file
@ -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>
|
||||
56
app/components/ui/dialog/DialogScrollContent.vue
Normal file
56
app/components/ui/dialog/DialogScrollContent.vue
Normal file
@ -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>
|
||||
22
app/components/ui/dialog/DialogTitle.vue
Normal file
22
app/components/ui/dialog/DialogTitle.vue
Normal file
@ -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>
|
||||
14
app/components/ui/dialog/DialogTrigger.vue
Normal file
14
app/components/ui/dialog/DialogTrigger.vue
Normal file
@ -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>
|
||||
10
app/components/ui/dialog/index.ts
Normal file
10
app/components/ui/dialog/index.ts
Normal file
@ -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'
|
||||
25
app/components/ui/label/Label.vue
Normal file
25
app/components/ui/label/Label.vue
Normal file
@ -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>
|
||||
1
app/components/ui/label/index.ts
Normal file
1
app/components/ui/label/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { default as Label } from './Label.vue'
|
||||
35
app/components/ui/navbar/Navbar.vue
Normal file
35
app/components/ui/navbar/Navbar.vue
Normal file
@ -0,0 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
import Button from '../button/Button.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="flex justify-around items-center p-2 border-b-2 backdrop-blur">
|
||||
<div class="self-start">
|
||||
<h3 class="scroll-m-20 text-2xl font-semibold tracking-tight select-none">
|
||||
Anyame
|
||||
</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>
|
||||
86
app/components/ui/player/Player.vue
Normal file
86
app/components/ui/player/Player.vue
Normal file
@ -0,0 +1,86 @@
|
||||
<script setup lang="ts">
|
||||
import Artplayer from "artplayer";
|
||||
import Hls from "hls.js";
|
||||
|
||||
interface Props {
|
||||
src: string;
|
||||
id: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
});
|
||||
|
||||
const emit = defineEmits(['get-instance'])
|
||||
|
||||
const options = computed(() => {
|
||||
console.log(props.src)
|
||||
return {
|
||||
url: props.src || '',
|
||||
type: 'm3u8',
|
||||
customType: {
|
||||
m3u8: playM3u8,
|
||||
},
|
||||
autoSize: true,
|
||||
autoMini: true,
|
||||
playbackRate: true,
|
||||
fullscreen: true,
|
||||
aspectRatio: true,
|
||||
setting: true,
|
||||
lock: true,
|
||||
autoOrientation: true,
|
||||
autoPlayback: true,
|
||||
id: props.id,
|
||||
}
|
||||
})
|
||||
const artplayerRef = ref();
|
||||
const instance = ref();
|
||||
|
||||
function playM3u8(video: HTMLMediaElement, url: string, art: Artplayer) {
|
||||
if (Hls.isSupported()) {
|
||||
if (art.hls) art.hls.destroy();
|
||||
const hls = new Hls();
|
||||
hls.loadSource(url);
|
||||
hls.attachMedia(video);
|
||||
art.hls = hls;
|
||||
art.on('destroy', () => hls.destroy());
|
||||
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
|
||||
video.src = url;
|
||||
} else {
|
||||
art.notice.show = 'Unsupported playback format: m3u8';
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
instance.value = new Artplayer({
|
||||
container: artplayerRef.value,
|
||||
...options.value,
|
||||
})
|
||||
nextTick(() => {
|
||||
emit('get-instance')
|
||||
})
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (instance.value && instance.value.destroy) {
|
||||
instance.value.destroy(false)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center justify-center">
|
||||
<div class="w-1/2 aspect-video" ref="artplayerRef"></div>
|
||||
</div>
|
||||
<div class="h-lvh">
|
||||
test
|
||||
test
|
||||
ste
|
||||
t
|
||||
|
||||
t
|
||||
|
||||
t
|
||||
</div>
|
||||
<div class="h-lvh">
|
||||
</div>
|
||||
</template>
|
||||
1
app/components/ui/player/index.ts
Normal file
1
app/components/ui/player/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { default as Player } from './Player.vue'
|
||||
17
app/components/ui/tooltip/Tooltip.vue
Normal file
17
app/components/ui/tooltip/Tooltip.vue
Normal file
@ -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>
|
||||
33
app/components/ui/tooltip/TooltipContent.vue
Normal file
33
app/components/ui/tooltip/TooltipContent.vue
Normal file
@ -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>
|
||||
13
app/components/ui/tooltip/TooltipProvider.vue
Normal file
13
app/components/ui/tooltip/TooltipProvider.vue
Normal file
@ -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>
|
||||
14
app/components/ui/tooltip/TooltipTrigger.vue
Normal file
14
app/components/ui/tooltip/TooltipTrigger.vue
Normal file
@ -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>
|
||||
4
app/components/ui/tooltip/index.ts
Normal file
4
app/components/ui/tooltip/index.ts
Normal file
@ -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'
|
||||
1
app/openapi/extractor.json
Normal file
1
app/openapi/extractor.json
Normal file
@ -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"}}}}}}
|
||||
184
app/openapi/extractor.ts
Normal file
184
app/openapi/extractor.ts
Normal file
@ -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
|
||||
}
|
||||
365
app/openapi/search.json
Normal file
365
app/openapi/search.json
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
136
app/openapi/search.ts
Normal file
136
app/openapi/search.ts
Normal file
@ -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
|
||||
}
|
||||
73
app/pages/anime/[slug].vue
Normal file
73
app/pages/anime/[slug].vue
Normal file
@ -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>
|
||||
82
app/pages/index.vue
Normal file
82
app/pages/index.vue
Normal file
@ -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>
|
||||
52
app/pages/search.vue
Normal file
52
app/pages/search.vue
Normal file
@ -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>
|
||||
<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>
|
||||
99
app/pages/watch.vue
Normal file
99
app/pages/watch.vue
Normal file
@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Watch Page</h1>
|
||||
<div v-if="mediaId">
|
||||
<p>Media Type: {{ mediaType }}</p>
|
||||
<p>Media ID: {{ mediaId }}</p>
|
||||
<p>Media Hash: {{ mediaHash }}</p>
|
||||
<p>Episode: {{ episode }}</p>
|
||||
|
||||
<div v-if="hlsUrl">
|
||||
<Player :id="mediaId.toString()" :src="hlsUrl" />
|
||||
</div>
|
||||
|
||||
<!-- Loading and Error States -->
|
||||
<div v-if="isLoading" class="loading">Loading video...</div>
|
||||
<div v-if="error" class="error">Error loading video: {{ error }}</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p>No media selected.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRoute } from 'vue-router'
|
||||
import { Player } from '~/components/ui/player'
|
||||
import { video, type KodikTranslationDTO, type KodikVideoLinks, type VideoParams } from '~/openapi/extractor'
|
||||
|
||||
const route = useRoute()
|
||||
const mediaType = route.query.mediaType
|
||||
const mediaId = route.query.mediaId
|
||||
const mediaHash = route.query.mediaHash
|
||||
const episode = route.query.episode
|
||||
|
||||
const results = ref<KodikVideoLinks | null>(null)
|
||||
const isLoading = ref(false)
|
||||
const error = ref<unknown>(null)
|
||||
const hlsUrl = ref<string | null>(null)
|
||||
|
||||
const playerOptions = ref({
|
||||
autoplay: false,
|
||||
controls: true,
|
||||
responsive: true,
|
||||
fluid: true,
|
||||
sources: [{
|
||||
src: hlsUrl.value,
|
||||
type: 'application/x-mpegURL'
|
||||
}]
|
||||
})
|
||||
|
||||
watchEffect(async () => {
|
||||
if (!mediaType || !mediaId || !mediaHash || !episode) return
|
||||
|
||||
try {
|
||||
isLoading.value = true
|
||||
error.value = null
|
||||
|
||||
const translationDto: KodikTranslationDTO = {
|
||||
mediaType: mediaType as string,
|
||||
mediaId: mediaId as string,
|
||||
mediaHash: mediaHash as string,
|
||||
}
|
||||
|
||||
const videoParams: VideoParams = {
|
||||
translationDTO: translationDto,
|
||||
episode: Number(episode as string),
|
||||
quality: '360',
|
||||
}
|
||||
|
||||
const response = await video(videoParams)
|
||||
results.value = response?.data || null
|
||||
|
||||
if (results.value?.links) {
|
||||
const qualities = Object.keys(results.value.links)
|
||||
const bestQuality = qualities.includes('360') ? '360' :
|
||||
qualities[0]
|
||||
|
||||
const hlsLink = results.value.links[bestQuality ?? '360']?.find(link =>
|
||||
link.type?.includes('hls') || link.src?.includes('.m3u8')
|
||||
)
|
||||
console.log(bestQuality)
|
||||
|
||||
if (hlsLink?.src) {
|
||||
hlsUrl.value = hlsLink.src
|
||||
if (playerOptions.value?.sources[0]) {
|
||||
playerOptions.value.sources[0].src = hlsUrl.value
|
||||
}
|
||||
} 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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
10
compose.yml
Normal file
10
compose.yml
Normal file
@ -0,0 +1,10 @@
|
||||
services:
|
||||
frontend:
|
||||
image: anyame-vue:latest
|
||||
ports:
|
||||
- 3000:3000
|
||||
networks:
|
||||
- anyame
|
||||
networks:
|
||||
anyame:
|
||||
driver: bridge
|
||||
@ -1,5 +1,5 @@
|
||||
// @ts-check
|
||||
import withNuxt from './.nuxt/eslint.config.mjs'
|
||||
import withNuxt from '.nuxt/eslint.config.mjs'
|
||||
|
||||
export default withNuxt(
|
||||
// Your custom configs here
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
import { type ClassValue, clsx } from 'clsx'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
@ -4,11 +4,20 @@ import tailwindcss from '@tailwindcss/vite'
|
||||
export default defineNuxtConfig({
|
||||
compatibilityDate: '2025-05-15',
|
||||
devtools: { enabled: true },
|
||||
modules: ['@nuxt/eslint', '@nuxt/image', 'shadcn-nuxt', '@nuxtjs/color-mode'],
|
||||
modules: ['@nuxt/eslint', '@nuxt/image', 'shadcn-nuxt', '@nuxtjs/color-mode', '@nuxt/icon'],
|
||||
nitro: {
|
||||
preset: 'bun',
|
||||
},
|
||||
routeRules: {
|
||||
'/watch': { ssr: false },
|
||||
},
|
||||
colorMode: {
|
||||
classSuffix: ''
|
||||
},
|
||||
css: ['~/assets/css/tailwind.css'],
|
||||
css: [
|
||||
'~/assets/css/tailwind.css',
|
||||
'~/assets/css/main.css',
|
||||
],
|
||||
vite: {
|
||||
plugins: [
|
||||
tailwindcss(),
|
||||
@ -17,5 +26,9 @@ export default defineNuxtConfig({
|
||||
shadcn: {
|
||||
prefix: '',
|
||||
componentDir: './components/ui'
|
||||
},
|
||||
icon: {
|
||||
mode: 'css',
|
||||
cssLayer: 'base'
|
||||
}
|
||||
})
|
||||
|
||||
17
orval.config.js
Normal file
17
orval.config.js
Normal file
@ -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'
|
||||
},
|
||||
}
|
||||
17
package.json
17
package.json
@ -11,15 +11,20 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@nuxt/eslint": "1.4.1",
|
||||
"@nuxt/icon": "1.15.0",
|
||||
"@nuxt/image": "1.10.0",
|
||||
"@tailwindcss/vite": "^4.1.7",
|
||||
"@vueuse/core": "^13.2.0",
|
||||
"@vueuse/core": "^13.5.0",
|
||||
"artplayer": "^5.2.3",
|
||||
"axios": "^1.10.0",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"eslint": "^9.0.0",
|
||||
"hls.js": "^1.6.7",
|
||||
"lucide-vue-next": "^0.511.0",
|
||||
"nuxt": "^3.17.4",
|
||||
"reka-ui": "^2.2.1",
|
||||
"node-vibrant": "^4.0.3",
|
||||
"nuxt": "^4.0.0",
|
||||
"reka-ui": "^2.3.2",
|
||||
"shadcn-nuxt": "2.1.0",
|
||||
"tailwind-merge": "^3.3.0",
|
||||
"tailwindcss": "^4.1.7",
|
||||
@ -29,8 +34,8 @@
|
||||
"vue-sonner": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify-json/radix-icons": "^1.2.2",
|
||||
"@iconify/vue": "^5.0.0",
|
||||
"@nuxtjs/color-mode": "^3.5.2"
|
||||
"@iconify-json/heroicons": "^1.2.2",
|
||||
"@nuxtjs/color-mode": "^3.5.2",
|
||||
"orval": "^7.10.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
@ -1,11 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
43
server/api/proxy-image.get.ts
Normal file
43
server/api/proxy-image.get.ts
Normal file
@ -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'
|
||||
});
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user