62 lines
2.4 KiB
Vue
62 lines
2.4 KiB
Vue
<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>
|