ngthanhvu/kr-phim
1
0
Fork 0
mirror of https://github.com/ngthanhvu/kr-phim.git synced 2026-08-10 14:27:47 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: implement movie detail page with multi-source support, library features, and responsive layout

Browse Source
This commit is contained in:
thanhvudaynee
2026-05-21 23:07:59 +07:00
parent 4a91b03678
commit 9c52a7927c
18 changed files with 606 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/pages/index.vue
+111 -16
View File
@@ -10,8 +10,9 @@ const { data, pending, error } = await useFetch('/api/movies', {
const movies = computed(() => data.value?.items ?? [])
const heroIndex = ref(0)
const heroSlides = computed(() => movies.value.slice(0, 6))
const heroSlides = computed(() => uniqueHeroMovies(movies.value).slice(0, 6))
const hero = computed(() => heroSlides.value[heroIndex.value] ?? movies.value[0])
const heroDetail = ref<any>(null)
const sourceStatus = computed(() => data.value?.sources ?? [])
const watchHistory = ref<WatchHistoryItem[]>([])
const { user, initAuth } = useSupabaseAuth()
@@ -21,6 +22,48 @@ const {
} = useWatchHistory()
let heroTimer: ReturnType<typeof setInterval> | undefined
const heroDetailCache = new Map<string, any>()
const heroDescription = computed(() => {
const content = String(heroDetail.value?.content || '').trim()
if (content) return content
const fallback = [
hero.value?.originName,
hero.value?.time,
].filter(Boolean)
return fallback.length ? fallback.join('. ') : 'Phim Hàn Quốc Vietsub mới cập nhật.'
})
function comparableMovieText(value?: string) {
return String(value || '')
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
.toLowerCase()
.replace(/[^a-z0-9]+/g, '-')
.replace(/^-+|-+$/g, '')
}
function uniqueHeroMovies(items: any[]) {
const seen = new Set<string>()
const uniqueItems: any[] = []
for (const item of items) {
const keys = [
comparableMovieText(item.slug),
comparableMovieText(item.originName),
comparableMovieText(item.name),
].filter(Boolean)
if (keys.some((key) => seen.has(key))) continue
keys.forEach((key) => seen.add(key))
uniqueItems.push(item)
}
return uniqueItems
}
function selectHero(index: number) {
heroIndex.value = index
@@ -42,6 +85,35 @@ watch(heroSlides, (slides) => {
}
})
watch(hero, async (currentHero) => {
if (!currentHero?.slug) {
heroDetail.value = null
return
}
const cacheKey = `${currentHero.source}:${currentHero.slug}`
if (heroDetailCache.has(cacheKey)) {
heroDetail.value = heroDetailCache.get(cacheKey)
return
}
heroDetail.value = null
try {
const detail = await $fetch(`/api/movies/${currentHero.slug}`, {
query: {
source: currentHero.source,
},
})
heroDetailCache.set(cacheKey, detail)
if (hero.value?.slug === currentHero.slug && hero.value?.source === currentHero.source) {
heroDetail.value = detail
}
} catch {
heroDetail.value = null
}
}, { immediate: true })
onMounted(() => {
initAuth()
heroTimer = setInterval(nextHero, 6500)
@@ -124,6 +196,29 @@ const rows = computed(() => [
},
])
const apiRows = computed(() => [
{
title: 'Mới cập nhật từ tất cả nguồn',
to: '/phim',
items: movies.value.slice(0, 12),
},
{
title: 'OPhim',
to: '/phim?source=ophim',
items: movies.value.filter((movie: any) => movie.source === 'ophim').slice(0, 12),
},
{
title: 'NguonC',
to: '/phim?source=nguonc',
items: movies.value.filter((movie: any) => movie.source === 'nguonc').slice(0, 12),
},
{
title: 'KKPhim',
to: '/phim?source=kkphim',
items: movies.value.filter((movie: any) => movie.source === 'kkphim').slice(0, 12),
},
])
watch(user, () => {
loadWatchHistory()
})
@@ -133,7 +228,7 @@ useHead({
meta: [
{
name: 'description',
content: 'Xem phim Hàn Quốc Vietsub từ OPhim và NguồnC với giao diện xanh da trời kiểu Netflix.',
content: 'Xem phim Hàn Quốc Vietsub từ OPhim, NguồnC và KKPhim với giao diện xanh Nuxt hiện đại.',
},
],
})
@@ -151,24 +246,24 @@ useHead({
</TransitionGroup>
<div class="absolute inset-0 bg-linear-to-r from-slate-950 via-slate-950/76 to-slate-950/10" />
<div class="absolute inset-0 bg-linear-to-t from-slate-950 via-slate-950/20 to-slate-950/30" />
<div class="absolute inset-y-0 right-0 hidden w-1/2 bg-linear-to-l from-sky-950/18 to-transparent lg:block" />
<div class="absolute inset-y-0 right-0 hidden w-1/2 bg-linear-to-l from-emerald-950/18 to-transparent lg:block" />
<div
class="relative mx-auto grid h-full max-w-390 content-center px-4 pb-20 pt-12 sm:px-6 sm:pb-24 sm:pt-16 lg:px-8 lg:pb-28 xl:px-10">
<div class="max-w-5xl">
<p class="mb-2 text-xs font-semibold text-sky-200 sm:mb-3 sm:text-sm">
<p class="mb-2 text-xs font-semibold text-emerald-200 sm:mb-3 sm:text-sm">
Chỉ phim Hàn Quốc
</p>
<h1 class="max-w-5xl text-2xl font-black leading-tight text-white drop-shadow-2xl sm:text-4xl lg:text-6xl">
{{ hero.name }}
</h1>
<p class="mt-2 max-w-2xl text-sm text-sky-100 sm:mt-3 sm:text-lg">
<p class="mt-2 max-w-2xl text-sm text-emerald-100 sm:mt-3 sm:text-lg">
{{ hero.originName || 'Kho phim Hàn Vietsub mới cập nhật' }}
</p>
<div class="mt-3 flex flex-wrap gap-1.5 text-xs font-bold text-slate-100 sm:mt-5 sm:gap-2 sm:text-sm">
<span v-if="hero.rating" class="rounded bg-black/35 px-2 py-1.5 ring-1 ring-white/10 sm:px-3 sm:py-2">IMDb
{{ hero.rating.toFixed(1) }}</span>
<span v-if="hero.quality" class="rounded bg-sky-300 px-2 py-1.5 text-slate-950 sm:px-3 sm:py-2">{{
<span v-if="hero.quality" class="rounded bg-emerald-300 px-2 py-1.5 text-slate-950 sm:px-3 sm:py-2">{{
hero.quality }}</span>
<span v-if="hero.lang" class="rounded bg-white px-2 py-1.5 text-slate-950 sm:px-3 sm:py-2">{{ hero.lang
}}</span>
@@ -184,12 +279,12 @@ useHead({
{{ category }}
</span>
</div>
<p class="mt-3 max-w-2xl text-xs leading-6 text-slate-100 sm:mt-5 sm:text-sm sm:leading-7">
{{ hero.originName ? `${hero.originName}. ` : '' }}{{ hero.time || 'Phim Hàn Quốc Vietsub mới cập nhật.' }}
<p class="mt-3 line-clamp-3 max-w-2xl text-xs leading-6 text-slate-100 sm:mt-5 sm:text-sm sm:leading-7">
{{ heroDescription }}
</p>
<div class="mt-6 flex items-center gap-3 sm:mt-8 sm:gap-4">
<NuxtLink :to="{ path: `/phim/${hero.slug}`, query: { source: hero.source } }"
class="grid size-12 shrink-0 place-items-center rounded-full bg-sky-300 text-slate-950 shadow-2xl shadow-sky-950/50 transition hover:scale-105 hover:bg-white sm:size-16"
class="grid size-12 shrink-0 place-items-center rounded-full bg-emerald-300 text-slate-950 shadow-2xl shadow-emerald-950/50 transition hover:scale-105 hover:bg-white sm:size-16"
aria-label="Xem ngay">
<Play class="size-6 fill-current sm:size-7" />
</NuxtLink>
@@ -222,7 +317,7 @@ useHead({
<div class="no-scrollbar flex gap-2 overflow-x-auto pb-2 sm:gap-3">
<button v-for="(slide, index) in heroSlides" :key="`${slide.source}-${slide.slug}-thumb`" type="button"
class="relative h-12 w-20 shrink-0 overflow-hidden rounded-md border bg-slate-900 shadow-lg shadow-black/30 transition sm:h-16 sm:w-32"
:class="index === heroIndex ? 'border-sky-300 ring-2 ring-sky-300/45' : 'border-white/15 opacity-70 hover:opacity-100'"
:class="index === heroIndex ? 'border-emerald-300 ring-2 ring-emerald-300/45' : 'border-white/15 opacity-70 hover:opacity-100'"
@click="selectHero(index)">
<img :src="slide.thumb || slide.poster" :alt="slide.name" class="h-full w-full object-cover">
<span
@@ -264,7 +359,7 @@ useHead({
<div class="mb-4 flex items-center justify-between gap-4">
<h2 class="text-2xl font-extrabold text-white">Tiếp Tục Xem</h2>
<button type="button"
class="grid size-10 shrink-0 place-items-center rounded-full border border-white/20 bg-white/8 text-white transition hover:border-sky-300/60 hover:bg-white/14"
class="grid size-10 shrink-0 place-items-center rounded-full border border-white/20 bg-white/8 text-white transition hover:border-emerald-300/60 hover:bg-white/14"
aria-label="Xóa lịch sử xem" @click="clearWatchHistory">
<Trash2 class="size-4" />
</button>
@@ -274,14 +369,14 @@ useHead({
<NuxtLink v-for="item in watchHistory" :key="`${item.source}-${item.slug}`" :to="watchHistoryLink(item)"
class="group block w-44 shrink-0 snap-start sm:w-52 xl:w-56">
<div
class="relative aspect-2/3 overflow-hidden rounded-md bg-slate-900 shadow-xl shadow-black/25 ring-1 ring-white/10 transition duration-300 group-hover:-translate-y-1 group-hover:ring-sky-300/60">
class="relative aspect-2/3 overflow-hidden rounded-md bg-slate-900 shadow-xl shadow-black/25 ring-1 ring-white/10 transition duration-300 group-hover:-translate-y-1 group-hover:ring-emerald-300/60">
<img :src="item.thumb || item.poster" :alt="item.name"
class="h-full w-full object-cover transition duration-500 group-hover:scale-105">
<div class="absolute inset-x-0 bottom-0 h-1 bg-white/18">
<span class="block h-full bg-sky-300" :style="{ width: `${watchProgressPercent(item)}%` }" />
<span class="block h-full bg-emerald-300" :style="{ width: `${watchProgressPercent(item)}%` }" />
</div>
<span
class="absolute left-2 top-2 rounded bg-sky-400 px-2 py-1 text-xs font-black text-slate-950">
class="absolute left-2 top-2 rounded bg-emerald-400 px-2 py-1 text-xs font-black text-slate-950">
{{ item.episodeName || `Tập ${(item.episodeIndex || 0) + 1}` }}
</span>
<span
@@ -301,11 +396,11 @@ useHead({
<div v-for="item in 12" :key="item" class="aspect-2/3 animate-pulse rounded-md bg-white/10" />
</div>
<section v-for="(row, index) in rows" v-show="row.items.length"
<section v-for="(row, index) in apiRows" v-show="row.items.length"
:id="index === 0 ? 'latest' : index === 1 ? 'series' : 'movies'" :key="row.title" class="mb-12">
<div class="mb-4 flex items-end justify-between gap-4">
<h2 class="text-2xl font-extrabold text-white">{{ row.title }}</h2>
<NuxtLink :to="row.to" class="text-sm font-semibold text-sky-200 hover:text-white">
<NuxtLink :to="row.to" class="text-sm font-semibold text-emerald-200 hover:text-white">
Xem thêm
</NuxtLink>
</div>
app/pages/lich-su.vue
+46 -12
View File
@@ -24,6 +24,36 @@ function watchHistoryLink(item: WatchHistoryItem) {
}
}
function formatWatchTime(seconds = 0) {
const totalSeconds = Math.max(Math.floor(seconds), 0)
const hours = Math.floor(totalSeconds / 3600)
const minutes = Math.floor((totalSeconds % 3600) / 60)
const remainingSeconds = totalSeconds % 60
if (hours) {
return `${hours}:${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`
}
return `${minutes}:${String(remainingSeconds).padStart(2, '0')}`
}
function watchProgressPercent(item: WatchHistoryItem) {
if (!item.durationSeconds || !item.progressSeconds) return 6
return Math.min(Math.max((item.progressSeconds / item.durationSeconds) * 100, 6), 100)
}
function watchProgressLabel(item: WatchHistoryItem) {
if (item.progressSeconds && item.durationSeconds) {
return `${formatWatchTime(item.progressSeconds)} / ${formatWatchTime(item.durationSeconds)}`
}
if (item.progressSeconds) {
return `${formatWatchTime(item.progressSeconds)} đã xem`
}
return item.episodeName || `Tập ${(item.episodeIndex || 0) + 1}`
}
async function removeHistory() {
await clearWatchHistory()
historyItems.value = []
@@ -46,7 +76,7 @@ useHead({
<section class="mx-auto max-w-390 px-4 pb-16 pt-28 sm:px-6 lg:px-8 lg:pt-32 xl:px-10">
<div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
<div>
<p class="text-sm font-black uppercase text-sky-300">Thành viên</p>
<p class="text-sm font-black uppercase text-emerald-300">Thành viên</p>
<h1 class="mt-2 text-3xl font-black sm:text-4xl">Lịch sử xem</h1>
</div>
<button v-if="historyItems.length" type="button"
@@ -57,43 +87,47 @@ useHead({
</button>
</div>
<div v-if="loading" class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
<div v-if="loading" class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6">
<div v-for="item in 12" :key="item" class="aspect-2/3 animate-pulse rounded-md bg-white/10" />
</div>
<div v-else-if="historyItems.length" class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
<div v-else-if="historyItems.length" class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6">
<NuxtLink v-for="item in historyItems" :key="`${item.source}-${item.slug}`" :to="watchHistoryLink(item)"
class="group block min-w-0">
<div
class="relative aspect-2/3 overflow-hidden rounded-md bg-slate-900 shadow-xl shadow-black/25 ring-1 ring-white/10 transition duration-300 group-hover:-translate-y-1 group-hover:ring-sky-300/60">
class="relative aspect-2/3 overflow-hidden rounded-md bg-slate-900 shadow-xl shadow-black/25 ring-1 ring-white/10 transition duration-300 group-hover:-translate-y-1 group-hover:ring-emerald-300/60">
<img v-if="item.thumb || item.poster" :src="item.thumb || item.poster" :alt="item.name"
class="h-full w-full object-cover transition duration-500 group-hover:scale-105">
<div v-else class="grid h-full w-full place-items-center bg-white/8">
<Clock3 class="size-10 text-sky-300" />
<Clock3 class="size-10 text-emerald-300" />
</div>
<div class="absolute inset-x-0 bottom-0 h-1 bg-white/18">
<span class="block h-full w-1/3 bg-sky-300" />
<span class="block h-full bg-emerald-300" :style="{ width: `${watchProgressPercent(item)}%` }" />
</div>
<span class="absolute left-2 top-2 rounded bg-sky-400 px-2 py-1 text-xs font-black text-slate-950">
<span
class="absolute bottom-3 right-3 rounded bg-black/70 px-2 py-1 text-[11px] font-black text-white opacity-0 transition group-hover:opacity-100">
Xem tiếp
</span>
<span class="absolute left-2 top-2 rounded bg-emerald-400 px-2 py-1 text-xs font-black text-slate-950">
{{ item.episodeName || `Tập ${(item.episodeIndex || 0) + 1}` }}
</span>
</div>
<h2 class="mt-3 truncate text-sm font-black">{{ item.name }}</h2>
<p class="mt-1 truncate text-xs font-semibold text-slate-400">
{{ item.episodeName || `Tập ${(item.episodeIndex || 0) + 1}` }}
<h2 class="mt-3 line-clamp-1 text-center text-sm font-black text-white">{{ item.name }}</h2>
<p class="mt-1 truncate text-center text-xs font-semibold text-slate-400">
{{ watchProgressLabel(item) }}
</p>
</NuxtLink>
</div>
<div v-else
class="flex min-h-80 flex-col items-center justify-center rounded-lg border border-white/10 bg-white/6 p-6 text-center">
<Clock3 class="size-12 text-sky-300" />
<Clock3 class="size-12 text-emerald-300" />
<h2 class="mt-4 text-xl font-black">Chưa có lịch sử xem</h2>
<p class="mt-2 max-w-md text-sm leading-6 text-slate-300">
Phim bạn đã xem sẽ xuất hiện ở đây để bạn có thể xem tiếp nhanh hơn.
</p>
<NuxtLink to="/phim"
class="mt-5 inline-flex h-11 items-center justify-center rounded-md bg-sky-300 px-5 text-sm font-black text-slate-950 transition hover:bg-white">
class="mt-5 inline-flex h-11 items-center justify-center rounded-md bg-emerald-300 px-5 text-sm font-black text-slate-950 transition hover:bg-white">
Duyệt phim
</NuxtLink>
</div>
app/pages/phim/[slug].vue
+19 -18
View File
@@ -19,6 +19,7 @@ const {
const sourceOptions = [
{ label: 'OPhim', value: 'ophim' },
{ label: 'NguonC', value: 'nguonc' },
{ label: 'KKPhim', value: 'kkphim' },
]
const { data: movie, pending, error } = await useFetch(() => `/api/movies/${route.params.slug}`, {
@@ -199,7 +200,7 @@ useHead(() => ({
class="mx-auto aspect-2/3 w-29 rounded-md object-cover shadow-xl shadow-black/40 sm:w-52 lg:w-full">
<h1 class="mt-4 text-[1.35rem] font-black leading-tight sm:text-2xl lg:mt-5">{{ movie.name }}</h1>
<p v-if="movie.originName" class="mt-1 text-sm font-bold text-slate-100 sm:text-sky-200">{{
<p v-if="movie.originName" class="mt-1 text-sm font-bold text-slate-100 sm:text-emerald-200">{{
movie.originName }}</p>
<div class="mt-3 hidden flex-wrap justify-center gap-2 text-xs font-black sm:flex lg:justify-start">
@@ -207,7 +208,7 @@ useHead(() => ({
<span v-if="movie.episode" class="rounded bg-white/12 px-2 py-1">{{ movie.episode }}</span>
<span v-if="movie.time" class="rounded bg-white/12 px-2 py-1">{{ movie.time }}</span>
<span v-if="movie.rating" class="inline-flex items-center gap-1 rounded bg-white/12 px-2 py-1">
<Star class="size-3 fill-sky-300 text-sky-300" />
<Star class="size-3 fill-emerald-300 text-emerald-300" />
{{ movie.rating.toFixed(1) }}
</span>
</div>
@@ -234,7 +235,7 @@ useHead(() => ({
<section
class="mt-0 rounded-none border-y border-white/10 bg-transparent px-0 pb-0 pt-3 shadow-none sm:mt-0 sm:rounded-md sm:border sm:bg-[#15161b]/95 sm:p-5 sm:shadow-2xl sm:shadow-black/40 lg:p-5">
<button type="button"
class="mx-auto flex items-center gap-1 pb-3 text-sm font-bold text-sky-200 sm:hidden"
class="mx-auto flex items-center gap-1 pb-3 text-sm font-bold text-emerald-200 sm:hidden"
:aria-expanded="movieInfoOpen" @click="movieInfoOpen = !movieInfoOpen">
<span>Thông tin phim</span>
<ChevronDown class="size-4 transition" :class="movieInfoOpen ? 'rotate-180' : ''" />
@@ -260,7 +261,7 @@ useHead(() => ({
<div class="flex gap-2 overflow-x-auto pb-1 sm:pb-0">
<NuxtLink v-for="source in sourceOptions" :key="source.value" :to="sourceLink(source.value)"
class="shrink-0 rounded-md px-4 py-2 text-sm font-black transition"
:class="activeSource === source.value ? 'bg-sky-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'">
:class="activeSource === source.value ? 'bg-emerald-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'">
{{ source.label }}
</NuxtLink>
</div>
@@ -270,7 +271,7 @@ useHead(() => ({
class="flex flex-col gap-4 border-b border-white/10 py-4 sm:flex-row sm:items-center sm:justify-between sm:py-5">
<div class="flex flex-wrap justify-center gap-3 sm:justify-start">
<NuxtLink :to="firstWatchLink"
class="inline-flex h-12 w-full items-center justify-center gap-2 rounded-full bg-linear-to-r from-sky-400 to-sky-300 px-7 text-sm font-black text-slate-950 transition hover:from-sky-300 hover:to-white sm:w-auto">
class="inline-flex h-12 w-full items-center justify-center gap-2 rounded-full bg-linear-to-r from-emerald-400 to-emerald-300 px-7 text-sm font-black text-slate-950 transition hover:from-emerald-300 hover:to-white sm:w-auto">
<Play class="size-4 fill-current" />
Xem Ngay
</NuxtLink>
@@ -281,39 +282,39 @@ useHead(() => ({
<span class="text-xs font-black text-slate-300">Nguồn API</span>
<NuxtLink v-for="source in sourceOptions" :key="source.value" :to="sourceLink(source.value)"
class="shrink-0 rounded-md px-4 py-2 text-sm font-black transition"
:class="activeSource === source.value ? 'bg-sky-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'">
:class="activeSource === source.value ? 'bg-emerald-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'">
{{ source.label }}
</NuxtLink>
</div>
<div class="flex items-center justify-between gap-3 px-8 sm:justify-center sm:px-0">
<button type="button"
class="flex cursor-pointer flex-col items-center gap-1 text-xs font-bold transition hover:text-sky-200 disabled:cursor-not-allowed disabled:opacity-70"
:class="isFavoriteMovie ? 'text-sky-300' : 'text-white'" aria-label="Yêu thích"
class="flex cursor-pointer flex-col items-center gap-1 text-xs font-bold transition hover:text-emerald-200 disabled:cursor-not-allowed disabled:opacity-70"
:class="isFavoriteMovie ? 'text-emerald-300' : 'text-white'" aria-label="Yêu thích"
:disabled="actionBusy" @click="toggleFavorite">
<Heart class="size-5" :class="isFavoriteMovie ? 'fill-current' : ''" />
<span>{{ isFavoriteMovie ? 'Đã thích' : 'Yêu thích' }}</span>
</button>
<button type="button"
class="flex cursor-pointer flex-col items-center gap-1 text-xs font-bold text-white transition hover:text-sky-200 disabled:cursor-not-allowed disabled:opacity-70"
class="flex cursor-pointer flex-col items-center gap-1 text-xs font-bold text-white transition hover:text-emerald-200 disabled:cursor-not-allowed disabled:opacity-70"
aria-label="Thêm vào" :disabled="actionBusy" @click="addToWatchLater">
<Plus class="size-5" />
<span>Thêm vào</span>
</button>
<button type="button"
class="flex cursor-pointer flex-col items-center gap-1 text-xs font-bold text-white transition hover:text-sky-200"
class="flex cursor-pointer flex-col items-center gap-1 text-xs font-bold text-white transition hover:text-emerald-200"
aria-label="Chia sẻ" @click="shareMovie">
<Share2 class="size-5" />
<span>Chia sẻ</span>
</button>
<div v-if="movie.rating"
class="inline-flex items-center gap-1.5 rounded-full bg-sky-400 px-3 py-1.5 text-sm font-black text-slate-950">
class="inline-flex items-center gap-1.5 rounded-full bg-emerald-400 px-3 py-1.5 text-sm font-black text-slate-950">
<Star class="size-3.5 fill-current" />
{{ movie.rating.toFixed(1) }}
</div>
</div>
<p v-if="actionMessage"
class="mt-2 text-center text-xs font-bold text-sky-200 sm:text-right">
class="mt-2 text-center text-xs font-bold text-emerald-200 sm:text-right">
{{ actionMessage }}
</p>
</div>
@@ -322,10 +323,10 @@ useHead(() => ({
<div
class="mt-3 flex justify-between gap-6 border-b border-white/10 px-6 text-sm font-black sm:mt-0 sm:justify-center sm:px-0 sm:pt-5">
<button type="button" class="px-5 pb-3 sm:px-0"
:class="activeTab === 'episodes' ? 'border-b-2 border-sky-300 text-sky-200' : 'text-slate-300'"
:class="activeTab === 'episodes' ? 'border-b-2 border-emerald-300 text-emerald-200' : 'text-slate-300'"
@click="activeTab = 'episodes'">Tập phim</button>
<button type="button" class="px-5 pb-3 sm:px-0"
:class="activeTab === 'actors' ? 'border-b-2 border-sky-300 text-sky-200' : 'text-slate-300'"
:class="activeTab === 'actors' ? 'border-b-2 border-emerald-300 text-emerald-200' : 'text-slate-300'"
@click="activeTab = 'actors'">Diễn viên</button>
</div>
@@ -335,7 +336,7 @@ useHead(() => ({
<div v-if="servers.length > 1" class="mt-3 flex gap-2 overflow-x-auto pb-2">
<button v-for="(server, index) in servers" :key="server.name" type="button"
class="shrink-0 rounded px-4 py-2 text-sm font-black"
:class="selectedServer === index ? 'bg-sky-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'"
:class="selectedServer === index ? 'bg-emerald-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'"
@click="selectedServer = index">
{{ server.name }}
</button>
@@ -345,7 +346,7 @@ useHead(() => ({
class="mt-3 grid grid-cols-3 gap-2 rounded-md border border-white/10 p-3 sm:grid-cols-3 lg:grid-cols-6">
<NuxtLink v-for="(episode, index) in activeServer.episodes" :key="`${episode.name}-${index}`"
:to="episodeLink(index)"
class="rounded-md bg-white/10 px-4 py-3 text-center text-sm font-black text-white transition first:bg-sky-400 first:text-slate-950 hover:bg-sky-400 hover:text-slate-950">
class="rounded-md bg-white/10 px-4 py-3 text-center text-sm font-black text-white transition first:bg-emerald-400 first:text-slate-950 hover:bg-emerald-400 hover:text-slate-950">
{{ formatEpisodeName(episode.name, index) }}
</NuxtLink>
</div>
@@ -364,13 +365,13 @@ useHead(() => ({
<img v-if="actor.avatar" :src="actor.avatar" :alt="actor.name"
class="size-14 shrink-0 rounded-md object-cover">
<div v-else
class="grid size-14 shrink-0 place-items-center rounded-md bg-sky-400/18 text-lg font-black text-sky-100 ring-1 ring-sky-300/20">
class="grid size-14 shrink-0 place-items-center rounded-md bg-emerald-400/18 text-lg font-black text-emerald-100 ring-1 ring-emerald-300/20">
{{ actorInitial(actor.name) }}
</div>
<div class="min-w-0">
<p class="truncate text-sm font-black text-white">{{ actor.name }}</p>
<p class="mt-1 truncate text-xs font-semibold text-sky-200">
<p class="mt-1 truncate text-xs font-semibold text-emerald-200">
{{ actor.originalName || 'Tên quốc tế đang cập nhật' }}
</p>
<p class="mt-1 truncate text-xs font-semibold text-slate-400">
app/pages/phim/index.vue
+33 -11
View File
@@ -8,6 +8,13 @@ const page = ref(Math.max(Number(route.query.page || 1), 1))
const keyword = ref(typeof route.query.q === 'string' ? route.query.q : '')
const debouncedKeyword = ref(keyword.value.trim())
const type = ref(typeof route.query.type === 'string' ? route.query.type : 'all')
const source = ref(typeof route.query.source === 'string' ? route.query.source : 'all')
const sourceOptions = [
{ label: 'Tất cả API', value: 'all' },
{ label: 'OPhim', value: 'ophim' },
{ label: 'NguonC', value: 'nguonc' },
{ label: 'KKPhim', value: 'kkphim' },
]
let searchTimer: ReturnType<typeof setTimeout> | undefined
@@ -23,12 +30,17 @@ watch(type, () => {
page.value = 1
})
watch([page, debouncedKeyword, type], () => {
watch(source, () => {
page.value = 1
})
watch([page, debouncedKeyword, type, source], () => {
router.replace({
query: {
page: page.value > 1 ? page.value : undefined,
q: debouncedKeyword.value || undefined,
type: type.value !== 'all' ? type.value : undefined,
source: source.value !== 'all' ? source.value : undefined,
},
})
})
@@ -37,6 +49,7 @@ const { data, pending, error } = await useFetch('/api/movies', {
query: computed(() => ({
page: page.value,
keyword: debouncedKeyword.value || undefined,
source: source.value !== 'all' ? source.value : undefined,
})),
})
@@ -87,7 +100,7 @@ useHead({
<section class="mx-auto max-w-390 px-4 pb-16 pt-36 sm:px-6 lg:px-8 lg:pt-28 xl:px-10">
<div class="mb-8 flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
<div>
<p class="text-sm font-semibold text-sky-200">Kho phim Hàn Quốc</p>
<p class="text-sm font-semibold text-emerald-200">Kho phim Hàn Quốc</p>
<h1 class="mt-2 text-3xl font-black text-white sm:text-5xl">
Duyệt phim
</h1>
@@ -95,8 +108,8 @@ useHead({
<div class="flex w-full flex-col gap-3 sm:flex-row lg:max-w-3xl">
<div
class="flex min-w-0 flex-1 items-center rounded-full border border-white/10 bg-white/8 px-4 py-3 shadow-2xl shadow-sky-950/20">
<Search class="mr-3 size-4 shrink-0 text-sky-200" />
class="flex min-w-0 flex-1 items-center rounded-full border border-white/10 bg-white/8 px-4 py-3 shadow-2xl shadow-emerald-950/20">
<Search class="mr-3 size-4 shrink-0 text-emerald-200" />
<input v-model="keyword" type="search" placeholder="Tìm phim Hàn Quốc..."
class="w-full bg-transparent text-sm text-white outline-none placeholder:text-slate-400">
</div>
@@ -104,21 +117,30 @@ useHead({
<div
class="grid grid-cols-3 rounded-full border border-white/10 bg-white/8 p-1 text-sm font-bold text-slate-200">
<button type="button" class="rounded-full px-4 py-2 transition"
:class="type === 'all' ? 'bg-sky-300 text-slate-950' : 'hover:text-white'" @click="type = 'all'">
:class="type === 'all' ? 'bg-emerald-300 text-slate-950' : 'hover:text-white'" @click="type = 'all'">
Tất cả
</button>
<button type="button" class="rounded-full px-4 py-2 transition"
:class="type === 'series' ? 'bg-sky-300 text-slate-950' : 'hover:text-white'" @click="type = 'series'">
:class="type === 'series' ? 'bg-emerald-300 text-slate-950' : 'hover:text-white'" @click="type = 'series'">
Phim bộ
</button>
<button type="button" class="rounded-full px-4 py-2 transition"
:class="type === 'single' ? 'bg-sky-300 text-slate-950' : 'hover:text-white'" @click="type = 'single'">
:class="type === 'single' ? 'bg-emerald-300 text-slate-950' : 'hover:text-white'" @click="type = 'single'">
Phim lẻ
</button>
</div>
</div>
</div>
<div class="mb-6 flex flex-wrap gap-2 text-sm font-black text-slate-200">
<button v-for="option in sourceOptions" :key="option.value" type="button"
class="rounded-full border border-white/10 px-4 py-2 transition"
:class="source === option.value ? 'bg-emerald-300 text-slate-950' : 'bg-white/8 hover:bg-white/14 hover:text-white'"
@click="source = option.value">
{{ option.label }}
</button>
</div>
<div v-if="sourceStatus.length" class="mb-8 flex flex-wrap gap-2 text-xs text-slate-300">
<span v-for="source in sourceStatus" :key="source.name"
class="rounded-full border border-white/10 bg-white/8 px-3 py-1">
@@ -138,14 +160,14 @@ useHead({
<NuxtLink v-for="movie in filteredMovies" :key="`${movie.source}-${movie.slug}`"
:to="{ path: `/phim/${movie.slug}`, query: { source: movie.source } }" class="group">
<div
class="relative aspect-2/3 overflow-hidden rounded-md bg-slate-900 shadow-xl shadow-black/25 ring-1 ring-white/10 transition duration-300 group-hover:-translate-y-1 group-hover:ring-sky-300/60">
class="relative aspect-2/3 overflow-hidden rounded-md bg-slate-900 shadow-xl shadow-black/25 ring-1 ring-white/10 transition duration-300 group-hover:-translate-y-1 group-hover:ring-emerald-300/60">
<img :src="movie.thumb || movie.poster" :alt="movie.name"
class="h-full w-full object-cover transition duration-500 group-hover:scale-105">
<div class="absolute inset-x-0 bottom-0 bg-linear-to-t from-slate-950 via-slate-950/70 to-transparent p-3">
<p class="line-clamp-2 text-sm font-bold leading-snug text-white">{{ movie.name }}</p>
<p class="mt-1 truncate text-xs text-sky-100">{{ movie.episode || movie.year || movie.quality }}</p>
<p class="mt-1 truncate text-xs text-emerald-100">{{ movie.episode || movie.year || movie.quality }}</p>
</div>
<span class="absolute left-2 top-2 rounded bg-sky-400 px-2 py-1 text-xs font-black text-slate-950">
<span class="absolute left-2 top-2 rounded bg-emerald-400 px-2 py-1 text-xs font-black text-slate-950">
{{ movie.source }}
</span>
</div>
@@ -166,7 +188,7 @@ useHead({
<span class="text-sm text-slate-300">Trang {{ page }}<template v-if="totalPages"> / {{ totalPages
}}</template></span>
<button type="button"
class="grid size-11 place-items-center rounded-full bg-sky-300 text-slate-950 hover:bg-white"
class="grid size-11 place-items-center rounded-full bg-emerald-300 text-slate-950 hover:bg-white"
aria-label="Trang sau" @click="nextPage">
<ChevronRight class="size-5" />
</button>
app/pages/thanh-vien.vue
+6 -6
View File
@@ -31,7 +31,7 @@ useHead({
<section class="mx-auto max-w-390 px-4 pb-16 pt-28 sm:px-6 lg:px-8 lg:pt-32 xl:px-10">
<div class="mb-6">
<p class="text-sm font-black uppercase text-sky-300">Thành viên</p>
<p class="text-sm font-black uppercase text-emerald-300">Thành viên</p>
<h1 class="mt-2 text-3xl font-black sm:text-4xl">Trang cá nhân</h1>
</div>
@@ -43,11 +43,11 @@ useHead({
<section class="rounded-lg border border-white/10 bg-white/6 p-5 sm:p-6">
<div class="flex flex-col gap-5 sm:flex-row sm:items-center">
<img :src="memberAvatar" :alt="memberName"
class="size-24 shrink-0 rounded-full object-cover ring-4 ring-sky-300/30">
class="size-24 shrink-0 rounded-full object-cover ring-4 ring-emerald-300/30">
<div class="min-w-0">
<h2 class="truncate text-2xl font-black">{{ memberName }}</h2>
<p class="mt-2 inline-flex items-center gap-2 text-sm font-semibold text-slate-300">
<Mail class="size-4 text-sky-300" />
<Mail class="size-4 text-emerald-300" />
{{ user.email }}
</p>
<p class="mt-4 max-w-2xl text-sm leading-6 text-slate-400">
@@ -60,7 +60,7 @@ useHead({
<aside class="grid gap-3 sm:grid-cols-2 lg:grid-cols-1">
<NuxtLink to="/lich-su"
class="flex items-center gap-3 rounded-lg border border-white/10 bg-white/6 p-4 transition hover:bg-white/10">
<span class="grid size-10 place-items-center rounded-md bg-sky-300 text-slate-950">
<span class="grid size-10 place-items-center rounded-md bg-emerald-300 text-slate-950">
<Clock3 class="size-5" />
</span>
<span>
@@ -70,7 +70,7 @@ useHead({
</NuxtLink>
<NuxtLink to="/yeu-thich"
class="flex items-center gap-3 rounded-lg border border-white/10 bg-white/6 p-4 transition hover:bg-white/10">
<span class="grid size-10 place-items-center rounded-md bg-white/10 text-sky-300">
<span class="grid size-10 place-items-center rounded-md bg-white/10 text-emerald-300">
<Heart class="size-5 fill-current" />
</span>
<span>
@@ -82,7 +82,7 @@ useHead({
</div>
<div v-else class="rounded-lg border border-white/10 bg-white/6 p-6">
<UserRound class="size-10 text-sky-300" />
<UserRound class="size-10 text-emerald-300" />
<h2 class="mt-4 text-xl font-black">Bạn chưa đăng nhập</h2>
<p class="mt-2 text-sm leading-6 text-slate-300">
Bấm nút Thành viên trên header để đăng nhập hoặc đăng ký tài khoản.
app/pages/xem/[slug].vue
+30 -30
View File
@@ -646,7 +646,7 @@ useHead(() => ({
<template v-else>
<section class="mx-auto max-w-390 px-3 pb-16 pt-24 sm:px-6 sm:pt-36 lg:px-8 lg:pt-28 xl:px-10">
<NuxtLink :to="{ path: `/phim/${route.params.slug}`, query: { source: route.query.source } }"
class="text-sm font-bold text-slate-100 hover:text-sky-200">
class="text-sm font-bold text-slate-100 hover:text-emerald-200">
‹ Chi tiết phim
</NuxtLink>
@@ -654,13 +654,13 @@ useHead(() => ({
<div class="grid grid-cols-2 gap-2 border-b border-white/10 bg-slate-950/92 p-2 sm:hidden">
<button type="button"
class="rounded-md px-3 py-2 text-sm font-black transition disabled:cursor-not-allowed disabled:opacity-40"
:class="playerMode === 'embed' ? 'bg-sky-400 text-slate-950' : 'bg-white/10 text-slate-100'"
:class="playerMode === 'embed' ? 'bg-emerald-400 text-slate-950' : 'bg-white/10 text-slate-100'"
:disabled="!canUseEmbed" @click="selectPlayerMode('embed')">
Nhúng
</button>
<button type="button"
class="rounded-md px-3 py-2 text-sm font-black transition disabled:cursor-not-allowed disabled:opacity-40"
:class="playerMode === 'hls' ? 'bg-sky-400 text-slate-950' : 'bg-white/10 text-slate-100'"
:class="playerMode === 'hls' ? 'bg-emerald-400 text-slate-950' : 'bg-white/10 text-slate-100'"
:disabled="!canUseHls" @click="selectPlayerMode('hls')">
HLS
</button>
@@ -670,12 +670,12 @@ useHead(() => ({
<div
class="absolute left-3 top-3 z-20 hidden rounded-md border border-white/10 bg-black/65 p-1 text-xs font-black text-white backdrop-blur sm:inline-flex">
<button type="button" class="rounded px-3 py-1.5 transition disabled:cursor-not-allowed disabled:opacity-40"
:class="playerMode === 'embed' ? 'bg-sky-400 text-slate-950' : 'text-slate-200 hover:bg-white/10'"
:class="playerMode === 'embed' ? 'bg-emerald-400 text-slate-950' : 'text-slate-200 hover:bg-white/10'"
:disabled="!canUseEmbed" @click="selectPlayerMode('embed')">
Nhúng
</button>
<button type="button" class="rounded px-3 py-1.5 transition disabled:cursor-not-allowed disabled:opacity-40"
:class="playerMode === 'hls' ? 'bg-sky-400 text-slate-950' : 'text-slate-200 hover:bg-white/10'"
:class="playerMode === 'hls' ? 'bg-emerald-400 text-slate-950' : 'text-slate-200 hover:bg-white/10'"
:disabled="!canUseHls" @click="selectPlayerMode('hls')">
HLS
</button>
@@ -698,7 +698,7 @@ useHead(() => ({
<div class="pointer-events-none absolute inset-0 bg-linear-to-t from-black/70 via-transparent to-black/35" />
<div v-if="isVideoBuffering"
class="pointer-events-none absolute inset-0 z-10 grid place-items-center bg-black/20 text-sky-200">
class="pointer-events-none absolute inset-0 z-10 grid place-items-center bg-black/20 text-emerald-200">
<Loader2 class="size-10 animate-spin" />
</div>
@@ -708,13 +708,13 @@ useHead(() => ({
</div>
<button v-if="videoCurrentTime < skipIntroSeconds && durationSeconds > 180" type="button"
class="absolute bottom-24 right-4 z-20 rounded-md bg-sky-400 px-4 py-2 text-xs font-black text-slate-950 shadow-lg transition hover:bg-white"
class="absolute bottom-24 right-4 z-20 rounded-md bg-emerald-400 px-4 py-2 text-xs font-black text-slate-950 shadow-lg transition hover:bg-white"
@click="skipIntro">
Bỏ intro
</button>
<button v-if="skipOutroSeconds && videoCurrentTime > skipOutroSeconds - 45 && hasNextEpisode" type="button"
class="absolute bottom-24 right-4 z-20 inline-flex items-center gap-2 rounded-md bg-sky-400 px-4 py-2 text-xs font-black text-slate-950 shadow-lg transition hover:bg-white"
class="absolute bottom-24 right-4 z-20 inline-flex items-center gap-2 rounded-md bg-emerald-400 px-4 py-2 text-xs font-black text-slate-950 shadow-lg transition hover:bg-white"
@click="playNextEpisode(true)">
<SkipForward class="size-4" /> Tập tiếp
</button>
@@ -724,7 +724,7 @@ useHead(() => ({
:class="isVideoPlaying && !controlsVisible ? 'opacity-0' : 'opacity-100'"
:aria-label="isVideoPlaying ? 'Tạm dừng' : 'Phát phim'" @click="toggleHlsPlayback">
<span
class="grid size-12 place-items-center rounded-full bg-sky-400 text-slate-950 shadow-xl shadow-sky-950/30 sm:size-16">
class="grid size-12 place-items-center rounded-full bg-emerald-400 text-slate-950 shadow-xl shadow-emerald-950/30 sm:size-16">
<Pause v-if="isVideoPlaying" class="size-5 fill-current sm:size-7" />
<Play v-else class="size-5 fill-current sm:size-7" />
</span>
@@ -737,23 +737,23 @@ useHead(() => ({
<div class="mt-2 flex items-center justify-between gap-2 sm:mt-3 sm:gap-3">
<div class="flex min-w-0 items-center gap-1.5 sm:gap-3">
<button type="button"
class="grid size-8 cursor-pointer place-items-center rounded-full bg-white/12 text-white transition hover:bg-sky-400 hover:text-slate-950 sm:size-9"
class="grid size-8 cursor-pointer place-items-center rounded-full bg-white/12 text-white transition hover:bg-emerald-400 hover:text-slate-950 sm:size-9"
:aria-label="isVideoPlaying ? 'Tạm dừng' : 'Phát phim'" @click="toggleHlsPlayback">
<Pause v-if="isVideoPlaying" class="size-3.5 fill-current sm:size-4" />
<Play v-else class="size-3.5 fill-current sm:size-4" />
</button>
<button type="button"
class="grid size-8 cursor-pointer place-items-center rounded-full bg-white/12 text-white transition hover:bg-sky-400 hover:text-slate-950 sm:size-9"
class="grid size-8 cursor-pointer place-items-center rounded-full bg-white/12 text-white transition hover:bg-emerald-400 hover:text-slate-950 sm:size-9"
aria-label="Lùi 10 giây" @click="seekBy(-10)">
<Rewind class="size-3.5 sm:size-4" />
</button>
<button type="button"
class="grid size-8 cursor-pointer place-items-center rounded-full bg-white/12 text-white transition hover:bg-sky-400 hover:text-slate-950 sm:size-9"
class="grid size-8 cursor-pointer place-items-center rounded-full bg-white/12 text-white transition hover:bg-emerald-400 hover:text-slate-950 sm:size-9"
aria-label="Tua 10 giây" @click="seekBy(10)">
<FastForward class="size-3.5 sm:size-4" />
</button>
<button type="button"
class="grid size-8 cursor-pointer place-items-center rounded-full bg-white/12 text-white transition hover:bg-sky-400 hover:text-slate-950 sm:size-9"
class="grid size-8 cursor-pointer place-items-center rounded-full bg-white/12 text-white transition hover:bg-emerald-400 hover:text-slate-950 sm:size-9"
:aria-label="isVideoMuted ? 'Bật âm' : 'Tắt âm'" @click="toggleMute">
<VolumeX v-if="isVideoMuted" class="size-3.5 sm:size-4" />
<Volume2 v-else class="size-3.5 sm:size-4" />
@@ -768,8 +768,8 @@ useHead(() => ({
<div class="flex shrink-0 items-center gap-1.5 sm:gap-2">
<div class="relative">
<button type="button"
class="grid size-8 cursor-pointer place-items-center rounded-full bg-white/12 text-white transition hover:bg-sky-400 hover:text-slate-950 sm:size-9"
:class="isSettingsOpen ? 'bg-sky-400 text-slate-950' : ''" aria-label="Cài đặt player"
class="grid size-8 cursor-pointer place-items-center rounded-full bg-white/12 text-white transition hover:bg-emerald-400 hover:text-slate-950 sm:size-9"
:class="isSettingsOpen ? 'bg-emerald-400 text-slate-950' : ''" aria-label="Cài đặt player"
@click="isSettingsOpen = !isSettingsOpen; controlsVisible = true">
<Settings class="size-3.5 sm:size-4" />
</button>
@@ -804,17 +804,17 @@ useHead(() => ({
</div>
</div>
<button type="button"
class="hidden size-9 cursor-pointer place-items-center rounded-full bg-white/12 text-white transition hover:bg-sky-400 hover:text-slate-950 sm:grid"
class="hidden size-9 cursor-pointer place-items-center rounded-full bg-white/12 text-white transition hover:bg-emerald-400 hover:text-slate-950 sm:grid"
aria-label="Picture in Picture" @click="togglePictureInPicture">
<PictureInPicture2 class="size-4" />
</button>
<button v-if="hasNextEpisode" type="button"
class="hidden size-9 cursor-pointer place-items-center rounded-full bg-white/12 text-white transition hover:bg-sky-400 hover:text-slate-950 sm:grid"
class="hidden size-9 cursor-pointer place-items-center rounded-full bg-white/12 text-white transition hover:bg-emerald-400 hover:text-slate-950 sm:grid"
aria-label="Tập tiếp theo" @click="playNextEpisode(true)">
<SkipForward class="size-4" />
</button>
<button type="button"
class="grid size-8 cursor-pointer place-items-center rounded-full bg-white/12 text-white transition hover:bg-sky-400 hover:text-slate-950 sm:size-9"
class="grid size-8 cursor-pointer place-items-center rounded-full bg-white/12 text-white transition hover:bg-emerald-400 hover:text-slate-950 sm:size-9"
aria-label="Toàn màn hình" @click="toggleFullscreen">
<Maximize class="size-3.5 sm:size-4" />
</button>
@@ -828,7 +828,7 @@ useHead(() => ({
<div class="absolute inset-0 bg-black/45" />
<div class="absolute inset-0 grid place-items-center">
<span
class="grid size-16 place-items-center rounded-full bg-sky-400 text-slate-950 shadow-xl shadow-sky-950/30">
class="grid size-16 place-items-center rounded-full bg-emerald-400 text-slate-950 shadow-xl shadow-emerald-950/30">
<Play class="size-7 fill-current" />
</span>
<span v-if="playerMode === 'hls' && !canUseHls"
@@ -842,25 +842,25 @@ useHead(() => ({
<div
class="flex items-center justify-center gap-7 border-t border-white/10 px-4 py-4 text-xs font-bold text-slate-100 sm:justify-start sm:gap-4 sm:py-3">
<button type="button"
class="inline-flex cursor-pointer items-center gap-2 hover:text-sky-200 disabled:cursor-not-allowed disabled:opacity-70"
:class="isFavoriteMovie ? 'text-sky-300' : ''" :disabled="actionBusy" @click="toggleFavorite">
class="inline-flex cursor-pointer items-center gap-2 hover:text-emerald-200 disabled:cursor-not-allowed disabled:opacity-70"
:class="isFavoriteMovie ? 'text-emerald-300' : ''" :disabled="actionBusy" @click="toggleFavorite">
<Heart class="size-4 sm:size-3" :class="isFavoriteMovie ? 'fill-current' : ''" />
{{ isFavoriteMovie ? 'Đã thích' : 'Yêu thích' }}
</button>
<button type="button"
class="inline-flex cursor-pointer items-center gap-2 hover:text-sky-200 disabled:cursor-not-allowed disabled:opacity-70"
class="inline-flex cursor-pointer items-center gap-2 hover:text-emerald-200 disabled:cursor-not-allowed disabled:opacity-70"
:disabled="actionBusy" @click="addToWatchLater">
<Plus class="size-4 sm:size-3" /> Thêm vào
</button>
<button type="button" class="inline-flex cursor-pointer items-center gap-2 hover:text-sky-200"
<button type="button" class="inline-flex cursor-pointer items-center gap-2 hover:text-emerald-200"
@click="shareMovie">
<Share2 class="size-4 sm:size-3" /> Chia sẻ
</button>
<span v-if="actionMessage" class="hidden text-xs font-bold text-sky-200 sm:inline">
<span v-if="actionMessage" class="hidden text-xs font-bold text-emerald-200 sm:inline">
{{ actionMessage }}
</span>
</div>
<p v-if="actionMessage" class="border-t border-white/10 px-4 pb-3 text-center text-xs font-bold text-sky-200 sm:hidden">
<p v-if="actionMessage" class="border-t border-white/10 px-4 pb-3 text-center text-xs font-bold text-emerald-200 sm:hidden">
{{ actionMessage }}
</p>
</div>
@@ -872,13 +872,13 @@ useHead(() => ({
class="hidden h-28 w-20 rounded-md object-cover sm:block">
<div>
<h1 class="text-[1.35rem] font-black leading-tight sm:text-2xl">{{ movie.name }}</h1>
<p v-if="movie.originName" class="mt-1 text-sm font-bold text-sky-200">{{ movie.originName }}</p>
<p v-if="movie.originName" class="mt-1 text-sm font-bold text-emerald-200">{{ movie.originName }}</p>
<div class="mt-3 flex flex-wrap gap-2 text-xs font-black">
<span v-if="movie.quality" class="rounded bg-white/12 px-2 py-1">{{ movie.quality }}</span>
<span v-if="movie.episode" class="rounded bg-white/12 px-2 py-1">{{ movie.episode }}</span>
<span v-if="movie.time" class="rounded bg-white/12 px-2 py-1">{{ movie.time }}</span>
<span v-if="movie.rating"
class="inline-flex items-center gap-1 rounded bg-sky-400 px-2 py-1 text-slate-950">
class="inline-flex items-center gap-1 rounded bg-emerald-400 px-2 py-1 text-slate-950">
<Star class="size-3 fill-current" />
{{ movie.rating.toFixed(1) }}
</span>
@@ -888,14 +888,14 @@ useHead(() => ({
<p v-if="movie.content" class="mt-4 text-sm leading-7 text-slate-200">{{ movie.content }}</p>
<div class="mt-5 rounded-md bg-sky-400 px-4 py-3 text-sm font-black text-slate-950">
<div class="mt-5 rounded-md bg-emerald-400 px-4 py-3 text-sm font-black text-slate-950">
Đang xem {{ activeEpisode?.name || 'Tập 1' }}
</div>
<div v-if="servers.length > 1" class="mt-4 flex gap-2 overflow-x-auto pb-2">
<button v-for="(server, index) in servers" :key="server.name" type="button"
class="shrink-0 rounded px-4 py-2 text-sm font-black"
:class="selectedServer === index ? 'bg-sky-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'"
:class="selectedServer === index ? 'bg-emerald-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'"
@click="selectServer(index)">
{{ server.name }}
</button>
@@ -906,7 +906,7 @@ useHead(() => ({
<NuxtLink v-for="(episode, index) in activeServer.episodes" :key="`${episode.name}-${index}`"
:to="episodeLink(index)"
class="inline-flex items-center justify-center gap-2 rounded-md px-3 py-3 text-center text-sm font-black transition"
:class="selectedEpisode === index ? 'bg-sky-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'">
:class="selectedEpisode === index ? 'bg-emerald-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'">
<Play class="size-3 fill-current" />
{{ episode.name }}
</NuxtLink>
app/pages/yeu-thich.vue
+7 -7
View File
@@ -42,7 +42,7 @@ useHead({
<section class="mx-auto max-w-390 px-4 pb-16 pt-28 sm:px-6 lg:px-8 lg:pt-32 xl:px-10">
<div class="mb-6">
<p class="text-sm font-black uppercase text-sky-300">Thư viện</p>
<p class="text-sm font-black uppercase text-emerald-300">Thư viện</p>
<h1 class="mt-2 text-3xl font-black sm:text-4xl">Yêu thích</h1>
</div>
@@ -54,13 +54,13 @@ useHead({
<NuxtLink v-for="item in favoriteItems" :key="`${item.source}-${item.slug}`" :to="movieLink(item)"
class="group block min-w-0">
<div
class="relative aspect-2/3 overflow-hidden rounded-md bg-slate-900 shadow-xl shadow-black/25 ring-1 ring-white/10 transition duration-300 group-hover:-translate-y-1 group-hover:ring-sky-300/60">
class="relative aspect-2/3 overflow-hidden rounded-md bg-slate-900 shadow-xl shadow-black/25 ring-1 ring-white/10 transition duration-300 group-hover:-translate-y-1 group-hover:ring-emerald-300/60">
<img v-if="item.thumb || item.poster" :src="item.thumb || item.poster" :alt="item.name"
class="h-full w-full object-cover transition duration-500 group-hover:scale-105">
<div v-else class="grid h-full w-full place-items-center bg-white/8">
<Heart class="size-10 text-sky-300" />
<Heart class="size-10 text-emerald-300" />
</div>
<span class="absolute left-2 top-2 rounded bg-sky-400 px-2 py-1 text-xs font-black text-slate-950">
<span class="absolute left-2 top-2 rounded bg-emerald-400 px-2 py-1 text-xs font-black text-slate-950">
Yêu thích
</span>
</div>
@@ -71,19 +71,19 @@ useHead({
<div v-else-if="user"
class="flex min-h-80 flex-col items-center justify-center rounded-lg border border-white/10 bg-white/6 p-6 text-center">
<Heart class="size-12 text-sky-300" />
<Heart class="size-12 text-emerald-300" />
<h2 class="mt-4 text-xl font-black">Chưa có phim yêu thích</h2>
<p class="mt-2 max-w-md text-sm leading-6 text-slate-300">
Bấm nút Yêu thích ở trang phim để lưu phim vào đây.
</p>
<NuxtLink to="/phim"
class="mt-5 inline-flex h-11 items-center justify-center rounded-md bg-sky-300 px-5 text-sm font-black text-slate-950 transition hover:bg-white">
class="mt-5 inline-flex h-11 items-center justify-center rounded-md bg-emerald-300 px-5 text-sm font-black text-slate-950 transition hover:bg-white">
Duyệt phim
</NuxtLink>
</div>
<div v-else class="rounded-lg border border-white/10 bg-white/6 p-6">
<UserRound class="size-10 text-sky-300" />
<UserRound class="size-10 text-emerald-300" />
<h2 class="mt-4 text-xl font-black">Bạn chưa đăng nhập</h2>
<p class="mt-2 text-sm leading-6 text-slate-300">
Đăng nhập để đồng bộ danh sách yêu thích, hoặc vẫn có thể lưu tạm trên thiết bị này.