mirror of
https://github.com/ngthanhvu/kr-phim.git
synced 2026-08-10 16:07:47 +00:00
Refactor code structure for improved readability and maintainability
This commit is contained in:
ngthanhvu
+279
-210
@@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ChevronDown, Heart, Play, Plus, Share2, Star } from 'lucide-vue-next'
|
import { ChevronDown, Heart, MessageCircle, Play, Plus, Server, Share2, Star, Video } from 'lucide-vue-next'
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const requestedSource = computed(() => String(route.query.source || 'nguonc'))
|
const requestedSource = computed(() => String(route.query.source || 'nguonc'))
|
||||||
@@ -51,10 +51,12 @@ const firstWatchLink = computed(() => ({
|
|||||||
ep: 1,
|
ep: 1,
|
||||||
},
|
},
|
||||||
}))
|
}))
|
||||||
const episodeCount = computed(() => servers.value.reduce((total: number, server: any) => total + (server.episodes?.length || 0), 0))
|
const episodeCount = computed(() => {
|
||||||
|
const total = servers.value.reduce((t: number, s: any) => t + (s.episodes?.length || 0), 0)
|
||||||
|
return total || undefined
|
||||||
|
})
|
||||||
const libraryItem = computed(() => {
|
const libraryItem = computed(() => {
|
||||||
if (!movie.value) return null
|
if (!movie.value) return null
|
||||||
|
|
||||||
return {
|
return {
|
||||||
source: activeSource.value,
|
source: activeSource.value,
|
||||||
slug: activeSourceSlug.value,
|
slug: activeSourceSlug.value,
|
||||||
@@ -78,15 +80,16 @@ function episodeLink(index: number) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function sourceLink(source: string) {
|
function getEpisodeDisplay() {
|
||||||
const ref = sourceOptions.value.find((item: any) => item.value === source)
|
const ep = movie.value?.episode
|
||||||
return {
|
const total = movie.value?.episodeTotal
|
||||||
path: `/phim/${ref?.slug || route.params.slug}`,
|
if (!ep) return undefined
|
||||||
query: {
|
const totalNum = total ? total.replace(/[^0-9]/g, '') : ''
|
||||||
source,
|
const epNum = ep.replace(/[^0-9]/g, '')
|
||||||
srcs: requestedSources.value || undefined,
|
if (epNum && totalNum && epNum !== totalNum) {
|
||||||
},
|
return `Tập ${epNum}/${totalNum}`
|
||||||
}
|
}
|
||||||
|
return ep
|
||||||
}
|
}
|
||||||
|
|
||||||
function serverLabel(server: any, index: number) {
|
function serverLabel(server: any, index: number) {
|
||||||
@@ -117,7 +120,6 @@ async function refreshFavoriteState() {
|
|||||||
|
|
||||||
async function toggleFavorite() {
|
async function toggleFavorite() {
|
||||||
if (!libraryItem.value || actionBusy.value) return
|
if (!libraryItem.value || actionBusy.value) return
|
||||||
|
|
||||||
actionBusy.value = true
|
actionBusy.value = true
|
||||||
if (isFavoriteMovie.value) {
|
if (isFavoriteMovie.value) {
|
||||||
await removeFavorite(libraryItem.value)
|
await removeFavorite(libraryItem.value)
|
||||||
@@ -133,7 +135,6 @@ async function toggleFavorite() {
|
|||||||
|
|
||||||
async function addToWatchLater() {
|
async function addToWatchLater() {
|
||||||
if (!libraryItem.value || actionBusy.value) return
|
if (!libraryItem.value || actionBusy.value) return
|
||||||
|
|
||||||
actionBusy.value = true
|
actionBusy.value = true
|
||||||
await saveWatchLater(libraryItem.value)
|
await saveWatchLater(libraryItem.value)
|
||||||
actionBusy.value = false
|
actionBusy.value = false
|
||||||
@@ -142,20 +143,13 @@ async function addToWatchLater() {
|
|||||||
|
|
||||||
async function shareMovie() {
|
async function shareMovie() {
|
||||||
if (!import.meta.client || !movie.value) return
|
if (!import.meta.client || !movie.value) return
|
||||||
|
|
||||||
const shareUrl = window.location.href
|
const shareUrl = window.location.href
|
||||||
const shareTitle = `${movie.value.name} - CineK`
|
const shareTitle = `${movie.value.name} - CineK`
|
||||||
|
|
||||||
try {
|
try {
|
||||||
if (navigator.share) {
|
if (navigator.share) {
|
||||||
await navigator.share({
|
await navigator.share({ title: shareTitle, text: movie.value.originName || movie.value.name, url: shareUrl })
|
||||||
title: shareTitle,
|
|
||||||
text: movie.value.originName || movie.value.name,
|
|
||||||
url: shareUrl,
|
|
||||||
})
|
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
await navigator.clipboard.writeText(shareUrl)
|
await navigator.clipboard.writeText(shareUrl)
|
||||||
flashActionMessage('Đã copy link phim.')
|
flashActionMessage('Đã copy link phim.')
|
||||||
} catch {
|
} catch {
|
||||||
@@ -171,276 +165,351 @@ onMounted(async () => {
|
|||||||
}).catch(() => {})
|
}).catch(() => {})
|
||||||
})
|
})
|
||||||
|
|
||||||
watch(requestedSource, () => {
|
watch(requestedSource, () => { selectedServer.value = 0 })
|
||||||
selectedServer.value = 0
|
watch(requestedSources, () => { selectedServer.value = 0 })
|
||||||
})
|
watch(libraryItem, () => { refreshFavoriteState() })
|
||||||
|
|
||||||
watch(requestedSources, () => {
|
|
||||||
selectedServer.value = 0
|
|
||||||
})
|
|
||||||
|
|
||||||
watch(libraryItem, () => {
|
|
||||||
refreshFavoriteState()
|
|
||||||
})
|
|
||||||
|
|
||||||
useHead(() => ({
|
useHead(() => ({
|
||||||
title: movie.value ? `${movie.value.name} - Xem phim online - CineK` : 'Đang tải phim - CineK',
|
title: movie.value ? `${movie.value.name} - Xem phim online - CineK` : 'Đang tải phim - CineK',
|
||||||
meta: [
|
meta: [
|
||||||
{
|
{ name: 'description', content: movie.value ? `Xem ${movie.value.name} online` : 'Xem phim Hàn Quốc online' },
|
||||||
name: 'description',
|
{ property: 'og:title', content: movie.value ? `${movie.value.name} - CineK` : 'CineK' },
|
||||||
content: movie.value
|
{ property: 'og:description', content: movie.value?.content || '' },
|
||||||
? `Xem thông tin phim ${movie.value.name}${movie.value.originName ? ` (${movie.value.originName})` : ''}, danh sách tập, diễn viên và các server xem phim tại CineK.`
|
{ property: 'og:image', content: movie.value?.poster || movie.value?.thumb || '/icon.png' },
|
||||||
: 'Xem phim Hàn Quốc online tại CineK với Vietsub, thuyết minh và lồng tiếng.',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
property: 'og:title',
|
|
||||||
content: movie.value ? `${movie.value.name} - CineK` : 'CineK - Xem phim Hàn Quốc online',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
property: 'og:description',
|
|
||||||
content: movie.value?.content || 'Xem thông tin phim, trailer, diễn viên và danh sách tập mới trên CineK.',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
property: 'og:image',
|
|
||||||
content: movie.value?.poster || movie.value?.thumb || '/icon.png',
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
}))
|
}))
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<main class="min-h-screen bg-[#08090d] text-white">
|
<main class="min-h-screen bg-[#0f111a] text-white">
|
||||||
<AppHeader />
|
<AppHeader />
|
||||||
|
|
||||||
<div v-if="pending"
|
<!-- Loading -->
|
||||||
class="mx-auto grid min-h-screen max-w-390 gap-6 px-4 pt-36 sm:px-6 lg:grid-cols-[22rem_minmax(0,1fr)] lg:px-8 lg:pt-40 xl:px-10">
|
<div v-if="pending" class="mx-auto max-w-[1400px] px-4 pt-36 sm:px-6 lg:px-8 xl:px-10">
|
||||||
<div class="h-114 animate-pulse rounded-md bg-white/10" />
|
<div class="grid gap-6 lg:grid-cols-[22rem_minmax(0,1fr)]">
|
||||||
<div class="h-80 animate-pulse rounded-md bg-white/10" />
|
<div class="h-[28rem] animate-pulse rounded-xl bg-white/10" />
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="h-10 w-3/4 animate-pulse rounded bg-white/10" />
|
||||||
|
<div class="h-6 w-1/2 animate-pulse rounded bg-white/10" />
|
||||||
|
<div class="h-40 animate-pulse rounded bg-white/10" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-else-if="error || !movie" class="mx-auto flex min-h-screen max-w-4xl items-center px-4 pt-36 lg:pt-24">
|
<!-- Error -->
|
||||||
|
<div v-else-if="error || !movie" class="mx-auto flex min-h-screen max-w-4xl items-center px-4 pt-36">
|
||||||
<div>
|
<div>
|
||||||
<h1 class="text-3xl font-black">Không mở được phim</h1>
|
<h1 class="text-3xl font-black">Không mở được phim</h1>
|
||||||
<p class="mt-3 text-slate-300">Phim có thể đang được cập nhật hoặc hiện chưa có tập xem.</p>
|
<p class="mt-3 text-slate-300">Phim có thể đang được cập nhật hoặc chưa có tập xem.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Movie Detail -->
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<section class="relative overflow-hidden pt-20 lg:pt-16">
|
<!-- Hero Backdrop -->
|
||||||
<div class="absolute inset-x-0 top-0 h-96 overflow-hidden sm:h-112">
|
<section class="relative h-[210px] md:h-[600px] lg:h-[70vh] xl:max-h-[800px] overflow-hidden bg-[#0f111a]">
|
||||||
<img :src="movie.poster || movie.thumb" :alt="movie.name" class="h-full w-full object-cover opacity-45">
|
<img :src="movie.poster || movie.thumb" :alt="movie.name"
|
||||||
<div class="absolute inset-0 bg-linear-to-b from-slate-950/25 via-[#08090d]/75 to-[#08090d]" />
|
class="absolute inset-0 h-full w-full object-cover object-center scale-105 opacity-70 md:opacity-80">
|
||||||
<div class="absolute inset-0 bg-linear-to-r from-[#08090d] via-transparent to-[#08090d]" />
|
<div class="absolute inset-0 hidden md:block"
|
||||||
|
style="mask-image:radial-gradient(ellipse at center, transparent 50%, black 100%)" />
|
||||||
|
<img :src="movie.poster || movie.thumb" :alt="movie.name"
|
||||||
|
class="absolute inset-0 h-full w-full object-cover object-center blur-sm md:blur-md scale-110 opacity-90 md:hidden">
|
||||||
|
<div class="absolute inset-0 pointer-events-none opacity-20 md:opacity-30"
|
||||||
|
style="background-image:radial-gradient(rgba(250,204,21,0.3) 0.5px, transparent 1px);background-size:2px 2px" />
|
||||||
|
<div class="absolute bottom-0 inset-x-0 h-[80%] pointer-events-none md:hidden"
|
||||||
|
style="background:linear-gradient(to top, #0f111a, transparent)" />
|
||||||
|
<div class="absolute inset-0 pointer-events-none hidden md:block"
|
||||||
|
style="background:linear-gradient(to top, #0f111a 0%, transparent 40%)" />
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Content overlaps hero -->
|
||||||
|
<div class="max-w-[1400px] mx-auto px-4 -mt-24 md:-mt-48 lg:-mt-64 relative z-10 mb-20">
|
||||||
|
<div class="flex flex-col md:flex-row gap-6 md:gap-10 items-start">
|
||||||
|
<!-- Poster Column -->
|
||||||
|
<div class="shrink-0 w-40 md:w-56 lg:w-64 max-w-[280px] mx-auto md:mx-0 flex flex-col gap-8">
|
||||||
|
<div class="relative rounded-xl overflow-hidden shadow-2xl shadow-[#0f111a]/50 ring-1 ring-white/10 bg-[#16161e] w-full aspect-[2/3]">
|
||||||
|
<img :src="movie.poster || movie.thumb" :alt="movie.name"
|
||||||
|
class="w-full h-full object-cover relative z-10">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="relative mx-auto max-w-390 px-3 pb-8 pt-40 sm:px-6 sm:pb-12 sm:pt-52 lg:px-8 lg:pt-56 xl:px-10">
|
<!-- Synopsis (desktop) -->
|
||||||
<div class="lg:grid lg:grid-cols-[22rem_minmax(0,1fr)] lg:gap-6">
|
<div class="hidden md:block">
|
||||||
<aside class="mb-3 flex flex-col items-center text-center lg:mb-6 lg:items-start lg:text-left">
|
<h3 class="text-[16px] font-semibold text-white mb-3">Nội dung phim</h3>
|
||||||
<img :src="movie.poster || movie.thumb" :alt="movie.name"
|
<p class="text-sm text-slate-300 leading-relaxed" :class="contentExpanded ? '' : 'line-clamp-4'">
|
||||||
class="mx-auto aspect-2/3 w-29 rounded-md object-cover shadow-xl shadow-black/40 sm:w-52 lg:w-full">
|
{{ movie.content || 'Đang cập nhật nội dung phim.' }}
|
||||||
|
</p>
|
||||||
|
<button v-if="movie.content" type="button"
|
||||||
|
class="mt-2 text-xs font-semibold text-yellow-300 transition hover:text-yellow-200"
|
||||||
|
@click="contentExpanded = !contentExpanded">
|
||||||
|
{{ contentExpanded ? 'Thu gọn' : 'Xem thêm' }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h1 class="mt-4 text-[1.35rem] font-black leading-tight sm:text-2xl lg:mt-5">{{ movie.name }}</h1>
|
<!-- Info Column -->
|
||||||
<p v-if="movie.originName" class="mt-1 text-sm font-bold text-slate-100 sm:text-yellow-200">{{
|
<div class="flex-1 md:pt-12 min-w-0">
|
||||||
movie.originName }}</p>
|
<!-- Title -->
|
||||||
|
<h1 class="text-[22px] md:text-3xl font-bold text-white mb-1 text-center md:text-left leading-tight">
|
||||||
|
{{ movie.name }}
|
||||||
|
</h1>
|
||||||
|
<p v-if="movie.originName" class="text-[13px] md:text-sm text-slate-400 mb-4 text-center md:text-left">
|
||||||
|
{{ movie.originName }}
|
||||||
|
</p>
|
||||||
|
|
||||||
<div class="mt-3 hidden flex-wrap justify-center gap-2 text-xs font-black sm:flex lg:justify-start">
|
<!-- Badges -->
|
||||||
<span v-if="movie.quality" class="rounded bg-white/12 px-2 py-1">{{ movie.quality }}</span>
|
<div class="hidden md:flex flex-wrap items-center gap-2 text-white/90 mb-4 text-[10px] md:text-xs">
|
||||||
<span v-if="movie.episode" class="rounded bg-white/12 px-2 py-1">{{ movie.episode }}</span>
|
<span v-if="movie.quality"
|
||||||
<span v-if="movie.time" class="rounded bg-white/12 px-2 py-1">{{ movie.time }}</span>
|
class="inline-flex items-center justify-center rounded-[4px] font-black leading-none tracking-normal h-[22px] px-2 text-[11px]"
|
||||||
<span v-if="movie.rating" class="inline-flex items-center gap-1 rounded bg-white/12 px-2 py-1">
|
style="background-color:#ffd875;background-image:linear-gradient(220deg, #ffd875 0%, #ffe7a8 45%, #ffffff 100%);color:#141414">
|
||||||
<Star class="size-3 fill-yellow-300 text-yellow-300" />
|
{{ movie.quality }}
|
||||||
{{ movie.rating.toFixed(1) }}
|
</span>
|
||||||
|
<span v-if="movie.lang" class="px-2 py-[3px] rounded border border-white bg-black/20 backdrop-blur-sm font-medium">
|
||||||
|
{{ movie.lang }}
|
||||||
|
</span>
|
||||||
|
<span v-if="getEpisodeDisplay()" class="px-2 py-[3px] rounded border border-white bg-black/20 backdrop-blur-sm font-medium">
|
||||||
|
{{ getEpisodeDisplay() }}
|
||||||
|
</span>
|
||||||
|
<span v-if="movie.rating"
|
||||||
|
class="inline-flex items-center rounded overflow-hidden border border-solid border-[rgba(1,180,228,0.5)]">
|
||||||
|
<span class="bg-[#01B4E4] text-white px-1.5 py-0.5 font-bold">TMDb</span>
|
||||||
|
<span class="bg-[rgba(1,180,228,0.1)] text-white px-1.5 py-0.5">{{ movie.rating.toFixed(1) }}</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="movie.categories?.length" class="mt-3 hidden sm:block lg:mt-4">
|
<!-- Action Buttons -->
|
||||||
<span class="rounded bg-white/12 px-3 py-1 text-xs font-bold">{{ movie.categories[0] }}</span>
|
<div class="flex flex-col md:flex-row md:items-center gap-4 mb-6">
|
||||||
</div>
|
<NuxtLink :to="firstWatchLink"
|
||||||
|
class="inline-flex justify-center items-center gap-2 md:gap-2.5 px-6 md:px-8 py-3.5 md:py-3 text-[#0f1115] text-[15px] md:text-base font-bold rounded-full transition-all hover:scale-105 shadow-lg shadow-[#F5C518]/20 hover:shadow-[#F5C518]/40"
|
||||||
|
style="background:linear-gradient(135deg, #F5C518 0%, #FFD700 50%, #FFC107 100%)">
|
||||||
|
<Play class="w-5 h-5 md:w-6 md:h-6 shrink-0 fill-current" />
|
||||||
|
Xem ngay
|
||||||
|
</NuxtLink>
|
||||||
|
|
||||||
<div class="mt-4 hidden space-y-3 text-sm leading-6 text-slate-300 sm:block lg:mt-5">
|
<div class="hidden md:flex items-center">
|
||||||
<div v-if="movie.content">
|
<div class="w-px h-8 bg-white/10 mx-1" />
|
||||||
<span class="block font-black text-white">Giới thiệu:</span>
|
|
||||||
<p class="mt-1" :class="contentExpanded ? '' : 'line-clamp-3'">{{ movie.content }}</p>
|
|
||||||
<button type="button"
|
<button type="button"
|
||||||
class="mt-1 inline-flex items-center gap-1 text-xs font-semibold text-yellow-300 transition hover:text-yellow-200"
|
class="flex flex-col items-center justify-center gap-1 transition-all hover:-translate-y-0.5 active:scale-95 px-3"
|
||||||
@click="contentExpanded = !contentExpanded">
|
:class="isFavoriteMovie ? 'text-yellow-300' : 'text-white/90'"
|
||||||
{{ contentExpanded ? 'Thu gọn' : 'Xem thêm' }}
|
:disabled="actionBusy" @click="toggleFavorite">
|
||||||
<ChevronDown class="size-3 transition" :class="contentExpanded ? 'rotate-180' : ''" />
|
<Heart class="size-5" :class="isFavoriteMovie ? 'fill-current' : ''" />
|
||||||
|
<span class="text-[11px]">{{ isFavoriteMovie ? 'Đã thích' : 'Yêu thích' }}</span>
|
||||||
|
</button>
|
||||||
|
<div class="w-px h-8 bg-white/10 mx-1" />
|
||||||
|
<button type="button"
|
||||||
|
class="flex flex-col items-center justify-center gap-1 transition-all hover:-translate-y-0.5 active:scale-95 px-3 text-white/90"
|
||||||
|
:disabled="actionBusy" @click="addToWatchLater">
|
||||||
|
<Plus class="size-5" />
|
||||||
|
<span class="text-[11px]">Thêm vào</span>
|
||||||
|
</button>
|
||||||
|
<div class="w-px h-8 bg-white/10 mx-1" />
|
||||||
|
<button type="button"
|
||||||
|
class="flex flex-col items-center justify-center gap-1 transition-all hover:-translate-y-0.5 active:scale-95 px-3 text-white/90"
|
||||||
|
@click="shareMovie">
|
||||||
|
<Share2 class="size-5" />
|
||||||
|
<span class="text-[11px]">Chia sẻ</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<p><span class="font-black text-white">Số tập:</span> {{
|
|
||||||
episodeCount || movie.episode || 'Đang cập nhật'
|
|
||||||
}}</p>
|
|
||||||
<p v-if="movie.countries?.length"><span class="font-black text-white">Quốc gia:</span> {{
|
|
||||||
movie.countries.join(', ') }}</p>
|
|
||||||
<p v-if="actorSummary"><span class="font-black text-white">Diễn viên:</span> {{
|
|
||||||
actorSummary }}</p>
|
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
|
||||||
|
|
||||||
<section
|
<!-- Mobile action buttons -->
|
||||||
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">
|
<div class="flex md:hidden gap-5 justify-center pt-2 mb-4">
|
||||||
<button type="button"
|
<button type="button"
|
||||||
class="mx-auto flex items-center gap-1 pb-3 text-sm font-bold text-yellow-200 sm:hidden"
|
class="flex flex-col items-center justify-center gap-1 transition-all active:scale-95"
|
||||||
:aria-expanded="movieInfoOpen" @click="movieInfoOpen = !movieInfoOpen">
|
:class="isFavoriteMovie ? 'text-yellow-300' : 'text-white/90'"
|
||||||
|
:disabled="actionBusy" @click="toggleFavorite">
|
||||||
|
<Heart class="size-6" :class="isFavoriteMovie ? 'fill-current' : ''" />
|
||||||
|
<span class="text-[11px]">Yêu thích</span>
|
||||||
|
</button>
|
||||||
|
<button type="button"
|
||||||
|
class="flex flex-col items-center justify-center gap-1 transition-all active:scale-95 text-white/90"
|
||||||
|
:disabled="actionBusy" @click="addToWatchLater">
|
||||||
|
<Plus class="size-6" />
|
||||||
|
<span class="text-[11px]">Thêm vào</span>
|
||||||
|
</button>
|
||||||
|
<button type="button"
|
||||||
|
class="flex flex-col items-center justify-center gap-1 transition-all active:scale-95 text-white/90"
|
||||||
|
@click="shareMovie">
|
||||||
|
<Share2 class="size-6" />
|
||||||
|
<span class="text-[11px]">Chia sẻ</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p v-if="actionMessage" class="mb-4 text-center text-xs font-bold text-yellow-200">
|
||||||
|
{{ actionMessage }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- Info Table (Desktop) -->
|
||||||
|
<div class="hidden md:grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm mb-5">
|
||||||
|
<div class="flex items-start gap-2">
|
||||||
|
<span class="text-slate-500 shrink-0 w-20">Trạng thái:</span>
|
||||||
|
<span class="text-slate-200">{{ getEpisodeDisplay() || movie.episode || 'Đang cập nhật' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-2">
|
||||||
|
<span class="text-slate-500 shrink-0 w-20">Loại:</span>
|
||||||
|
<span class="text-slate-200">{{ movie.type === 'single' ? 'Phim lẻ' : movie.type === 'series' ? 'Phim bộ' : movie.type || 'Đang cập nhật' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-2">
|
||||||
|
<span class="text-slate-500 shrink-0 w-20">Năm:</span>
|
||||||
|
<span class="text-slate-200">{{ movie.year || 'Đang cập nhật' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-2">
|
||||||
|
<span class="text-slate-500 shrink-0 w-20">Thể loại:</span>
|
||||||
|
<span class="text-slate-200">{{ movie.categories?.join(', ') || 'Đang cập nhật' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-2">
|
||||||
|
<span class="text-slate-500 shrink-0 w-20">Quốc gia:</span>
|
||||||
|
<span class="text-slate-200">{{ movie.countries?.join(', ') || 'Đang cập nhật' }}</span>
|
||||||
|
</div>
|
||||||
|
<div v-if="actors.length" class="flex items-start gap-2">
|
||||||
|
<span class="text-slate-500 shrink-0 w-20">Diễn viên:</span>
|
||||||
|
<span class="text-slate-200">{{ actorSummary }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Mobile collapsible info -->
|
||||||
|
<div class="md:hidden mb-4">
|
||||||
|
<button type="button"
|
||||||
|
class="w-full flex items-center justify-between text-sm font-semibold text-yellow-200 py-2"
|
||||||
|
@click="movieInfoOpen = !movieInfoOpen">
|
||||||
<span>Thông tin phim</span>
|
<span>Thông tin phim</span>
|
||||||
<ChevronDown class="size-4 transition" :class="movieInfoOpen ? 'rotate-180' : ''" />
|
<ChevronDown class="size-4 transition" :class="movieInfoOpen ? 'rotate-180' : ''" />
|
||||||
</button>
|
</button>
|
||||||
|
<div v-if="movieInfoOpen" class="space-y-2 text-sm text-slate-300">
|
||||||
|
<div class="flex flex-wrap gap-2 text-[10px] mb-3">
|
||||||
|
<span v-if="movie.quality"
|
||||||
|
class="inline-flex items-center justify-center rounded-[4px] font-black h-[22px] px-2 text-[11px]"
|
||||||
|
style="background-color:#ffd875;background-image:linear-gradient(220deg, #ffd875 0%, #ffe7a8 45%, #ffffff 100%);color:#141414">
|
||||||
|
{{ movie.quality }}
|
||||||
|
</span>
|
||||||
|
<span v-if="movie.lang" class="px-2 py-[3px] rounded border border-white bg-black/20 backdrop-blur-sm font-medium">
|
||||||
|
{{ movie.lang }}
|
||||||
|
</span>
|
||||||
|
<span v-if="getEpisodeDisplay()" class="px-2 py-[3px] rounded border border-white bg-black/20 backdrop-blur-sm font-medium">
|
||||||
|
{{ getEpisodeDisplay() }}
|
||||||
|
</span>
|
||||||
|
<span v-if="movie.rating"
|
||||||
|
class="inline-flex items-center rounded overflow-hidden border border-solid border-[rgba(1,180,228,0.5)]">
|
||||||
|
<span class="bg-[#01B4E4] text-white px-1.5 py-0.5 font-bold">TMDb</span>
|
||||||
|
<span class="bg-[rgba(1,180,228,0.1)] text-white px-1.5 py-0.5">{{ movie.rating.toFixed(1) }}</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div v-if="movieInfoOpen"
|
<div class="flex gap-2"><span class="text-slate-500 shrink-0 w-20">Trạng thái:</span><span>{{ getEpisodeDisplay() || movie.episode || 'Đang cập nhật' }}</span></div>
|
||||||
class="mb-4 space-y-3 border-b border-white/10 pb-4 text-sm leading-6 text-slate-300 sm:hidden">
|
<div class="flex gap-2"><span class="text-slate-500 shrink-0 w-20">Loại:</span><span>{{ movie.type === 'single' ? 'Phim lẻ' : movie.type === 'series' ? 'Phim bộ' : movie.type || 'Đang cập nhật' }}</span></div>
|
||||||
<div v-if="movie.content">
|
<div class="flex gap-2"><span class="text-slate-500 shrink-0 w-20">Năm:</span><span>{{ movie.year || 'Đang cập nhật' }}</span></div>
|
||||||
<span class="block font-black text-white">Giới thiệu:</span>
|
<div class="flex gap-2"><span class="text-slate-500 shrink-0 w-20">Thể loại:</span><span>{{ movie.categories?.join(', ') || 'Đang cập nhật' }}</span></div>
|
||||||
<p class="mt-1" :class="contentExpanded ? '' : 'line-clamp-3'">{{ movie.content }}</p>
|
<div class="flex gap-2"><span class="text-slate-500 shrink-0 w-20">Quốc gia:</span><span>{{ movie.countries?.join(', ') || 'Đang cập nhật' }}</span></div>
|
||||||
<button type="button"
|
|
||||||
class="mt-1 inline-flex items-center gap-1 text-xs font-semibold text-yellow-300 transition hover:text-yellow-200"
|
<div v-if="movie.content" class="pt-3 border-t border-white/10">
|
||||||
|
<h3 class="text-[14px] font-semibold text-white mb-2">Nội dung phim</h3>
|
||||||
|
<p class="text-sm text-slate-300 leading-relaxed" :class="contentExpanded ? '' : 'line-clamp-3'">
|
||||||
|
{{ movie.content }}
|
||||||
|
</p>
|
||||||
|
<button type="button" class="mt-1 text-xs font-semibold text-yellow-300"
|
||||||
@click="contentExpanded = !contentExpanded">
|
@click="contentExpanded = !contentExpanded">
|
||||||
{{ contentExpanded ? 'Thu gọn' : 'Xem thêm' }}
|
{{ contentExpanded ? 'Thu gọn' : 'Xem thêm' }}
|
||||||
<ChevronDown class="size-3 transition" :class="contentExpanded ? 'rotate-180' : ''" />
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<p><span class="font-black text-white">Số tập:</span> {{
|
|
||||||
episodeCount || movie.episode || 'Đang cập nhật'
|
|
||||||
}}</p>
|
|
||||||
<p v-if="movie.countries?.length"><span class="font-black text-white">Quốc gia:</span> {{
|
|
||||||
movie.countries.join(', ') }}</p>
|
|
||||||
<p v-if="actorSummary"><span class="font-black text-white">Diễn viên:</span> {{
|
|
||||||
actorSummary }}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="hidden">
|
|
||||||
<p class="text-sm font-black text-white">Nguồn xem</p>
|
|
||||||
<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-yellow-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'">
|
|
||||||
{{ source.label }}
|
|
||||||
</NuxtLink>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<!-- Tabs: Episodes / Actors (inside info column) -->
|
||||||
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="mt-6 border-t border-white/10 pt-6">
|
||||||
<div class="flex flex-wrap justify-center gap-3 sm:justify-start">
|
<div class="flex items-center gap-6 border-b border-white/10 mb-6 overflow-x-auto">
|
||||||
<NuxtLink :to="firstWatchLink"
|
|
||||||
class="inline-flex h-12 w-full items-center justify-center gap-2 rounded-full bg-linear-to-r from-yellow-400 to-yellow-300 px-7 text-sm font-black text-slate-950 transition hover:from-yellow-300 hover:to-white sm:w-auto">
|
|
||||||
<Play class="size-4 fill-current" />
|
|
||||||
Xem Ngay
|
|
||||||
</NuxtLink>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-col gap-3 sm:items-end">
|
|
||||||
<div class="hidden">
|
|
||||||
<span class="text-xs font-black text-slate-300">Nguồn xem</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-yellow-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"
|
<button type="button"
|
||||||
class="flex cursor-pointer flex-col items-center gap-1 text-xs font-bold transition hover:text-yellow-200 disabled:cursor-not-allowed disabled:opacity-70"
|
class="pb-3 text-[13px] md:text-[15px] font-semibold transition-colors relative whitespace-nowrap"
|
||||||
:class="isFavoriteMovie ? 'text-yellow-300' : 'text-white'" aria-label="Yêu thích"
|
:class="activeTab === 'episodes' ? 'text-[#F5C518]' : 'text-slate-400 hover:text-white'"
|
||||||
:disabled="actionBusy" @click="toggleFavorite">
|
@click="activeTab = 'episodes'">
|
||||||
<Heart class="size-5" :class="isFavoriteMovie ? 'fill-current' : ''" />
|
Tập phim
|
||||||
<span>{{ isFavoriteMovie ? 'Đã thích' : 'Yêu thích' }}</span>
|
<span v-if="activeTab === 'episodes'" class="absolute bottom-0 left-0 w-full h-[2px] bg-[#F5C518] rounded-t-md" />
|
||||||
</button>
|
</button>
|
||||||
<button type="button"
|
<button type="button"
|
||||||
class="flex cursor-pointer flex-col items-center gap-1 text-xs font-bold text-white transition hover:text-yellow-200 disabled:cursor-not-allowed disabled:opacity-70"
|
class="pb-3 text-[13px] md:text-[15px] font-semibold transition-colors relative whitespace-nowrap"
|
||||||
aria-label="Thêm vào" :disabled="actionBusy" @click="addToWatchLater">
|
:class="activeTab === 'actors' ? 'text-[#F5C518]' : 'text-slate-400 hover:text-white'"
|
||||||
<Plus class="size-5" />
|
@click="activeTab = 'actors'">
|
||||||
<span>Thêm vào</span>
|
Diễn viên
|
||||||
|
<span v-if="activeTab === 'actors'" class="absolute bottom-0 left-0 w-full h-[2px] bg-[#F5C518] rounded-t-md" />
|
||||||
</button>
|
</button>
|
||||||
<button type="button"
|
|
||||||
class="flex cursor-pointer flex-col items-center gap-1 text-xs font-bold text-white transition hover:text-yellow-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-yellow-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-yellow-200 sm:text-right">
|
|
||||||
{{ actionMessage }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<!-- Episodes Tab -->
|
||||||
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">
|
<div v-if="activeTab === 'episodes'">
|
||||||
<button type="button" class="px-5 pb-3 sm:px-0"
|
<!-- Server Selector -->
|
||||||
:class="activeTab === 'episodes' ? 'border-b-2 border-yellow-300 text-yellow-200' : 'text-slate-300'"
|
<div v-if="servers.length > 1" class="flex flex-wrap items-center gap-x-3 gap-y-2 mb-4">
|
||||||
@click="activeTab = 'episodes'">Tập phim</button>
|
<div class="flex items-center gap-1.5 text-[13px] font-semibold text-white/50 mr-1">
|
||||||
<button type="button" class="px-5 pb-3 sm:px-0"
|
<Server class="size-4" />
|
||||||
:class="activeTab === 'actors' ? 'border-b-2 border-yellow-300 text-yellow-200' : 'text-slate-300'"
|
Máy chủ:
|
||||||
@click="activeTab = 'actors'">Diễn viên</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="activeTab === 'episodes'" class="px-0 pt-6 sm:px-0 sm:pt-5">
|
|
||||||
<h2 class="text-[1.08rem] font-black sm:text-xl">Danh sách tập</h2>
|
|
||||||
|
|
||||||
<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"
|
<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="group flex items-center gap-1.5 text-[13px] transition-colors rounded-md px-3.5 py-2 border font-medium"
|
||||||
:class="selectedServer === index ? 'bg-yellow-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'"
|
:class="selectedServer === index
|
||||||
|
? 'border-white/30 text-white bg-white/5'
|
||||||
|
: 'border-transparent text-white/60 hover:text-white'"
|
||||||
@click="selectedServer = index">
|
@click="selectedServer = index">
|
||||||
{{ serverLabel(server, index) }}
|
<span>{{ serverLabel(server, index) }}</span>
|
||||||
|
<span class="w-[20px] h-[20px] rounded-full font-bold text-[10px]"
|
||||||
|
:class="selectedServer === index ? 'bg-white text-black' : 'bg-white/20 text-white'">
|
||||||
|
{{ server.episodes?.length || 0 }}
|
||||||
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Episode Grid -->
|
||||||
<div v-if="activeServer?.episodes?.length"
|
<div v-if="activeServer?.episodes?.length"
|
||||||
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">
|
class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-x-2.5 gap-y-2.5">
|
||||||
<NuxtLink v-for="(episode, index) in activeServer.episodes" :key="`${episode.name}-${index}`"
|
<NuxtLink v-for="(episode, index) in activeServer.episodes" :key="`${episode.name}-${index}`"
|
||||||
:to="episodeLink(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-yellow-400 first:text-slate-950 hover:bg-yellow-400 hover:text-slate-950">
|
class="group flex items-center justify-center gap-1.5 rounded-lg transition-all py-2.5 px-2 text-[13px] bg-[#191b24] text-white/90 hover:text-[#FFD166] hover:bg-[#1f2130] shadow-sm">
|
||||||
|
<Play class="size-3 fill-current opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||||
{{ formatEpisodeName(episode.name, index) }}
|
{{ formatEpisodeName(episode.name, index) }}
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p v-else class="mt-4 rounded-md border border-white/10 bg-slate-900/70 p-4 text-sm text-slate-300">
|
<p v-else class="mt-2 rounded-lg border border-white/10 bg-[#191b24] p-6 text-center text-sm text-slate-400">
|
||||||
Chưa có tập xem từ server này.
|
Chưa có tập xem từ server này.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-else class="px-0 pt-6 sm:px-0 sm:pt-5">
|
<!-- Actors Tab -->
|
||||||
<h2 class="text-[1.08rem] font-black sm:text-xl">Diễn viên</h2>
|
<div v-if="activeTab === 'actors'">
|
||||||
|
<div v-if="actors.length" class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||||
<div v-if="actors.length" class="mt-4 grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
|
|
||||||
<div v-for="actor in actors" :key="actor.name"
|
<div v-for="actor in actors" :key="actor.name"
|
||||||
class="flex min-w-0 items-center gap-3 rounded-md border border-white/10 bg-white/5 p-3">
|
class="flex min-w-0 items-center gap-3 rounded-xl border border-white/10 bg-[#191b24] p-3 transition hover:border-white/20">
|
||||||
<img v-if="actor.avatar" :src="actor.avatar" :alt="actor.name"
|
<img v-if="actor.avatar" :src="actor.avatar" :alt="actor.name"
|
||||||
class="size-14 shrink-0 rounded-md object-cover">
|
class="size-14 shrink-0 rounded-lg object-cover">
|
||||||
<div v-else
|
<div v-else
|
||||||
class="grid size-14 shrink-0 place-items-center rounded-md bg-yellow-400/18 text-lg font-black text-yellow-100 ring-1 ring-yellow-300/20">
|
class="grid size-14 shrink-0 place-items-center rounded-lg bg-yellow-400/18 text-lg font-black text-yellow-100">
|
||||||
{{ actorInitial(actor.name) }}
|
{{ actorInitial(actor.name) }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="min-w-0">
|
<div class="min-w-0">
|
||||||
<p class="truncate text-sm font-black text-white">{{ actor.name }}</p>
|
<p class="truncate text-sm font-semibold text-white">{{ actor.name }}</p>
|
||||||
<p class="mt-1 truncate text-xs font-semibold text-yellow-200">
|
<p v-if="actor.originalName" class="mt-0.5 truncate text-xs text-yellow-200/70">{{ actor.originalName }}</p>
|
||||||
{{ actor.originalName || 'Tên quốc tế đang cập nhật' }}
|
<p v-if="actor.role" class="mt-0.5 truncate text-xs text-slate-400">{{ actor.role }}</p>
|
||||||
</p>
|
</div>
|
||||||
<p class="mt-1 truncate text-xs font-semibold text-slate-400">
|
</div>
|
||||||
{{ actor.role || 'Vai diễn đang cập nhật' }}
|
</div>
|
||||||
|
<p v-else class="mt-4 rounded-lg border border-white/10 bg-[#191b24] p-6 text-center text-sm text-slate-400">
|
||||||
|
Chưa có thông tin diễn viên.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<p v-else class="mt-4 rounded-md border border-white/10 bg-slate-900/70 p-4 text-sm text-slate-300">
|
<!-- Comment Section -->
|
||||||
Mục này chưa có dữ liệu diễn viên.
|
<div class="mt-10 border-t border-white/10 pt-8">
|
||||||
</p>
|
<div class="flex items-center gap-3 mb-6">
|
||||||
|
<MessageCircle class="size-5 text-yellow-300" />
|
||||||
|
<h2 class="text-xl font-bold text-white">Bình luận</h2>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-center justify-center py-10 text-center border border-white/10 rounded-xl bg-[#191b24]">
|
||||||
|
<MessageCircle class="size-10 text-slate-500 mb-3" />
|
||||||
|
<p class="text-sm text-slate-400">Tính năng bình luận đang được phát triển.</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<AppFooter />
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
+412
-1117
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user