mirror of
https://github.com/koel/koel
synced 2024-12-20 01:23:16 +00:00
53 lines
1.5 KiB
Vue
53 lines
1.5 KiB
Vue
<template>
|
|
<a
|
|
data-testid="podcast-item"
|
|
class="flex gap-5 p-5 rounded-lg border border-white/5 hover:bg-white/10 bg-white/5 !text-k-text-primary !hover:text-k-text-primary"
|
|
:href="`#/podcasts/${podcast.id}`"
|
|
>
|
|
<aside class="hidden md:block md:flex-[0_0_128px]">
|
|
<img :src="podcast.image" alt="Podcast image" class="w-[128px] aspect-square object-cover rounded-lg">
|
|
</aside>
|
|
<main class="flex-1">
|
|
<header>
|
|
<h3 class="text-3xl font-bold">{{ podcast.title }}</h3>
|
|
<p class="mt-2">
|
|
{{ podcast.author }}
|
|
<template v-if="lastPlayedAt"> •
|
|
<span class="opacity-70">
|
|
Last played
|
|
<time :datetime="podcast.last_played_at" :title="podcast.last_played_at">{{ lastPlayedAt }}</time>
|
|
</span>
|
|
</template>
|
|
</p>
|
|
</header>
|
|
<div v-koel-new-tab class="description text-k-text-secondary mt-3 line-clamp-3" v-html="description" />
|
|
</main>
|
|
</a>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import DOMPurify from 'dompurify'
|
|
import { formatTimeAgo } from '@vueuse/core'
|
|
|
|
const { podcast } = defineProps<{ podcast: Podcast }>()
|
|
|
|
const description = computed(() => DOMPurify.sanitize(podcast.description))
|
|
|
|
const lastPlayedAt = computed(() => podcast.state.current_episode
|
|
? formatTimeAgo(new Date(podcast.last_played_at))
|
|
: null,
|
|
)
|
|
</script>
|
|
|
|
<style scoped lang="postcss">
|
|
.description {
|
|
:deep(p) {
|
|
@apply mb-3;
|
|
}
|
|
|
|
:deep(a) {
|
|
@apply text-k-text-primary hover:text-k-accent;
|
|
}
|
|
}
|
|
</style>
|