mirror of
https://github.com/ngthanhvu/kr-phim.git
synced 2026-08-10 16:07:47 +00:00
feat: implement movie detail page with multi-source support, library features, and responsive layout
This commit is contained in:
thanhvudaynee
+19
-18
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user