From 2ab5766e02b26d7135341a83fcc7ea162982e042 Mon Sep 17 00:00:00 2001
From: ngthanhvu <nguyenthanhvudvfb@gmail.com>
Date: Thu, 30 Jul 2026 21:38:01 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20s=E1=BB=ADa=20poster=20d=E1=BB=8Dc=20ng?=
 =?UTF-8?q?ang=20=E1=BB=9F=20home?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/HeroSlider.vue    |   2 +-
 app/components/HomeMovieCard.vue | 308 ++++++++++++++++++-------------
 app/pages/index.vue              |   8 +-
 app/utils/episode.ts             |  28 ++-
 4 files changed, 210 insertions(+), 136 deletions(-)

diff --git a/app/components/HeroSlider.vue b/app/components/HeroSlider.vue
index c64601b..d5ea3ba 100644
--- a/app/components/HeroSlider.vue
+++ b/app/components/HeroSlider.vue
@@ -49,7 +49,7 @@ defineExpose({ goTo })
     <SwiperSlide v-for="(slide, index) in props.slides" :key="`${slide.source}-${slide.slug}-${index}`"
       class="h-full w-full">
       <img :src="slide.poster || slide.thumb" :alt="slide.name"
-        class="absolute inset-[-1px] h-[calc(100%+2px)] w-[calc(100%+2px)] max-w-none object-cover object-top lg:object-[72%_center]">
+        class="absolute -inset-px h-[calc(100%+2px)] w-[calc(100%+2px)] max-w-none object-cover object-top lg:object-[72%_center]">
     </SwiperSlide>
   </Swiper>
 </template>
diff --git a/app/components/HomeMovieCard.vue b/app/components/HomeMovieCard.vue
index 5347005..bdb77d4 100644
--- a/app/components/HomeMovieCard.vue
+++ b/app/components/HomeMovieCard.vue
@@ -1,39 +1,47 @@
 <script setup lang="ts">
 const props = defineProps<{
   movie: {
-    source: string
-    slug: string
-    name: string
-    originName?: string
-    thumb?: string
-    poster?: string
-    year?: number
-    time?: string
-    episode?: string
-    episodeTotal?: string
-    quality?: string
-    lang?: string
-    categories?: string[]
-    countries?: string[]
-    sources?: { source: string, slug: string }[]
-  }
-}>()
+    source: string;
+    slug: string;
+    name: string;
+    originName?: string;
+    thumb?: string;
+    poster?: string;
+    year?: number;
+    time?: string;
+    episode?: string;
+    episodeTotal?: string;
+    quality?: string;
+    lang?: string;
+    categories?: string[];
+    countries?: string[];
+    sources?: { source: string; slug: string }[];
+  };
+}>();
 
-const episodeDisplay = computed(() =>
-  getEpisodeDisplay(props.movie.episode, props.movie.episodeTotal),
-)
+const episodeDisplay = computed(() => {
+  const raw = getEpisodeDisplay(props.movie.episode, props.movie.episodeTotal, 'PĐ.')
+  if (!raw) return ''
+  const slashIdx = raw.indexOf('/')
+  if (slashIdx !== -1) return raw.slice(0, slashIdx).trim()
+  return raw
+})
 
-const isPreviewVisible = ref(false)
-const isDescriptionExpanded = ref(false)
-const previewStyle = ref<Record<string, string>>({})
-let hideTimer: ReturnType<typeof setTimeout> | undefined
+const isPreviewVisible = ref(false);
+const isDescriptionExpanded = ref(false);
+const previewStyle = ref<Record<string, string>>({});
+let hideTimer: ReturnType<typeof setTimeout> | undefined;
 
 const movieSourcesQuery = computed(() =>
-  (props.movie.sources || [{ source: props.movie.source, slug: props.movie.slug }])
+  (
+    props.movie.sources || [
+      { source: props.movie.source, slug: props.movie.slug },
+    ]
+  )
     .filter((source) => source.source && source.slug)
     .map((source) => `${source.source}:${source.slug}`)
-    .join(','),
-)
+    .join(","),
+);
 
 const movieLink = computed(() => ({
   path: `/phim/${props.movie.slug}`,
@@ -41,132 +49,174 @@ const movieLink = computed(() => ({
     source: props.movie.source,
     srcs: movieSourcesQuery.value || undefined,
   },
-}))
+}));
 
 function showPreview(event: MouseEvent) {
-  if (window.matchMedia('(max-width: 639px)').matches) return
-  if (hideTimer) clearTimeout(hideTimer)
+  if (window.matchMedia("(max-width: 639px)").matches) return;
+  if (hideTimer) clearTimeout(hideTimer);
 
-  const rect = (event.currentTarget as HTMLElement).getBoundingClientRect()
-  const width = 408
-  const height = 344
-  const gap = 14
-  const left = Math.min(Math.max(rect.left - 10, 16), window.innerWidth - width - 16)
-  const top = Math.min(Math.max(rect.top - gap, 86), window.innerHeight - height - 16)
+  const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+  const width = 408;
+  const height = 344;
+  const gap = 14;
+  const left = Math.min(
+    Math.max(rect.left - 10, 16),
+    window.innerWidth - width - 16,
+  );
+  const top = Math.min(
+    Math.max(rect.top - gap, 86),
+    window.innerHeight - height - 16,
+  );
 
   previewStyle.value = {
     left: `${left}px`,
     top: `${top}px`,
     width: `${width}px`,
-  }
-  isPreviewVisible.value = true
+  };
+  isPreviewVisible.value = true;
 }
 
 function scheduleHide() {
-  if (hideTimer) clearTimeout(hideTimer)
+  if (hideTimer) clearTimeout(hideTimer);
   hideTimer = setTimeout(() => {
-    isPreviewVisible.value = false
-    isDescriptionExpanded.value = false
-  }, 90)
+    isPreviewVisible.value = false;
+    isDescriptionExpanded.value = false;
+  }, 90);
 }
 
 function keepPreview() {
-  if (hideTimer) clearTimeout(hideTimer)
+  if (hideTimer) clearTimeout(hideTimer);
 }
 
 onBeforeUnmount(() => {
-  if (hideTimer) clearTimeout(hideTimer)
-})
+  if (hideTimer) clearTimeout(hideTimer);
+});
 </script>
 
 <template>
-  <NuxtLink :to="movieLink"
-    class="group relative block h-78 w-44 shrink-0 snap-start transition duration-300 hover:z-30 hover:-translate-y-1 sm:h-82 sm:w-52 xl:w-56"
-    @mouseenter="showPreview" @mouseleave="scheduleHide" @focus="showPreview" @blur="scheduleHide">
-    <div
-      class="absolute inset-0 overflow-hidden rounded-md bg-slate-900 shadow-xl shadow-black/25 ring-1 ring-white/10 transition duration-300 group-hover:ring-yellow-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-yellow-100">{{ episodeDisplay || movie.year || movie.quality }}</p>
+  <div class="w-44 shrink-0 snap-start sm:w-52 xl:w-56">
+    <!-- Movie Card -->
+    <NuxtLink :to="movieLink" class="group block" @mouseenter="showPreview" @mouseleave="scheduleHide"
+      @focus="showPreview" @blur="scheduleHide">
+      <!-- Poster wrapper -->
+      <div class="relative aspect-2/3">
+        <div class="h-full w-full overflow-hidden rounded-t-[7px] bg-slate-900 shadow-xl shadow-black/25 ring-1 ring-white/10">
+          <img :src="movie.thumb || movie.poster" :alt="movie.name"
+            class="h-full w-full object-cover transition duration-500 group-hover:scale-105" />
+        </div>
+        <span v-if="episodeDisplay"
+          class="absolute bottom-0 left-1/2 z-10 -translate-x-1/2 whitespace-nowrap rounded-t-md bg-blue-600 px-2 py-1 text-[11px] font-semibold leading-none text-white">
+          {{ episodeDisplay }}
+        </span>
       </div>
-      <span v-if="movie.sources?.length && movie.sources.length > 1"
-        class="absolute left-2 top-2 rounded bg-yellow-400 px-2 py-1 text-xs font-black text-slate-950">
-        {{ movie.sources.length }} server
-      </span>
-      <span v-if="episodeDisplay"
-        class="absolute right-2 top-2 rounded bg-red-600/90 px-2 py-1 text-xs font-black text-white backdrop-blur-sm">
-        {{ episodeDisplay }}
-      </span>
-    </div>
-  </NuxtLink>
+      <!-- Movie name & originName -->
+      <div class="mt-2 px-0.5">
+        <p
+          class="truncate text-[14px] font-normal leading-5 text-white transition-colors duration-200 group-hover:text-yellow-300">
+          {{ movie.name }}
+        </p>
+        <p v-if="movie.originName" class="mt-0.5 truncate text-[13px] leading-5 text-slate-500">
+          {{ movie.originName }}
+        </p>
+      </div>
+    </NuxtLink>
 
-  <Teleport to="body">
-    <Transition enter-active-class="transition duration-180 ease-out" enter-from-class="scale-95 opacity-0"
-      enter-to-class="scale-100 opacity-100" leave-active-class="transition duration-120 ease-in"
-      leave-from-class="scale-100 opacity-100" leave-to-class="scale-95 opacity-0">
-      <NuxtLink v-if="isPreviewVisible" :to="movieLink"
-        class="fixed z-90 hidden origin-top-left overflow-hidden rounded-xl bg-[#07111d] text-white shadow-2xl shadow-black/60 ring-1 ring-yellow-300/45 sm:block"
-        :style="previewStyle" @mouseenter="keepPreview" @mouseleave="scheduleHide">
-        <div class="relative h-44 overflow-hidden">
-          <img :src="movie.poster || movie.thumb" :alt="movie.name" class="h-full w-full object-cover object-top">
-          <div class="absolute inset-0 bg-linear-to-t from-[#07111d] via-[#07111d]/30 to-transparent" />
-          <div class="absolute inset-x-0 bottom-0 p-4">
-            <h3 class="line-clamp-2 text-xl font-black leading-tight text-white">
-              {{ movie.name }}
-            </h3>
-            <p v-if="movie.originName" class="mt-1 truncate text-sm font-semibold text-slate-200">
-              {{ movie.originName }}
-            </p>
-          </div>
-        </div>
-
-        <div class="p-4 pt-3">
-          <div class="grid grid-cols-[1fr_6.25rem_6.25rem] gap-2">
-            <span
-              class="inline-flex h-10 items-center justify-center gap-2 rounded-md bg-yellow-400 px-4 text-sm font-black text-slate-950 transition hover:bg-white">
-              <AppIcon name="play" class="size-4 fill-current" />
-              Xem ngay
-            </span>
-            <span class="grid h-10 place-items-center rounded-md border border-white/30 bg-white/8 text-white">
-              <AppIcon name="heart" class="size-5 fill-current" />
-            </span>
-            <span class="grid h-10 place-items-center rounded-md border border-white/30 bg-white/8 text-white">
-              <AppIcon name="circle" class="size-5 fill-current" />
-            </span>
+    <!-- Desktop hover preview -->
+    <Teleport to="body">
+      <Transition enter-active-class="transition duration-180 ease-out" enter-from-class="scale-95 opacity-0"
+        enter-to-class="scale-100 opacity-100" leave-active-class="transition duration-120 ease-in"
+        leave-from-class="scale-100 opacity-100" leave-to-class="scale-95 opacity-0">
+        <NuxtLink v-if="isPreviewVisible" :to="movieLink"
+          class="fixed z-90 hidden origin-top-left overflow-hidden rounded-xl bg-[#07111d] text-white shadow-2xl shadow-black/60 ring-1 ring-yellow-300/45 sm:block"
+          :style="previewStyle" @mouseenter="keepPreview" @mouseleave="scheduleHide">
+          <!-- Preview image -->
+          <div class="relative h-44 overflow-hidden">
+            <img :src="movie.poster || movie.thumb" :alt="movie.name" class="h-full w-full object-cover object-top" />
+            <!-- Gradient -->
+            <div class="absolute inset-0 bg-linear-to-t from-[#07111d] via-[#07111d]/30 to-transparent" />
+            <!-- Movie title -->
+            <div class="absolute inset-x-0 bottom-0 p-4">
+              <h3 class="line-clamp-2 text-xl font-black leading-tight text-white">
+                {{ movie.name }}
+              </h3>
+              <p v-if="movie.originName" class="mt-1 truncate text-sm font-semibold text-slate-200">
+                {{ movie.originName }}
+              </p>
+            </div>
           </div>
 
-          <div class="mt-3 flex flex-wrap gap-2 text-xs font-black">
-            <span v-if="movie.quality" class="rounded bg-black/28 px-2.5 py-1.5 text-white ring-1 ring-white/10">{{
-              movie.quality }}</span>
-            <span v-if="movie.lang" class="rounded bg-yellow-300 px-2.5 py-1.5 text-slate-950">{{ movie.lang }}</span>
-            <span v-if="movie.time" class="rounded bg-white px-2.5 py-1.5 text-slate-950">{{ movie.time }}</span>
-            <span v-if="episodeDisplay" class="rounded bg-black/28 px-2.5 py-1.5 text-white ring-1 ring-white/10">{{
-              episodeDisplay }}</span>
+          <!-- Preview content -->
+          <div class="p-4 pt-3">
+            <!-- Actions -->
+            <div class="grid grid-cols-[1fr_6.25rem_6.25rem] gap-2">
+              <!-- Watch -->
+              <span
+                class="inline-flex h-10 items-center justify-center gap-2 rounded-md bg-yellow-400 px-4 text-sm font-black text-slate-950 transition hover:bg-white">
+                <AppIcon name="play" class="size-4 fill-current" />
+                Xem ngay
+              </span>
+              <!-- Favorite -->
+              <span class="grid h-10 place-items-center rounded-md border border-white/30 bg-white/8 text-white">
+                <AppIcon name="heart" class="size-5 fill-current" />
+              </span>
+              <!-- Other action -->
+              <span class="grid h-10 place-items-center rounded-md border border-white/30 bg-white/8 text-white">
+                <AppIcon name="circle" class="size-5 fill-current" />
+              </span>
+            </div>
+            <!-- Movie meta -->
+            <div class="mt-3 flex flex-wrap gap-2 text-xs font-black">
+              <!-- Quality -->
+              <span v-if="movie.quality" class="rounded bg-black/28 px-2.5 py-1.5 text-white ring-1 ring-white/10">
+                {{ movie.quality }}
+              </span>
+              <!-- Language -->
+              <span v-if="movie.lang" class="rounded bg-yellow-300 px-2.5 py-1.5 text-slate-950">
+                {{ movie.lang }}
+              </span>
+              <!-- Time -->
+              <span v-if="movie.time" class="rounded bg-white px-2.5 py-1.5 text-slate-950">
+                {{ movie.time }}
+              </span>
+              <!-- Episode -->
+              <span v-if="episodeDisplay" class="rounded bg-black/28 px-2.5 py-1.5 text-white ring-1 ring-white/10">
+                {{ episodeDisplay }}
+              </span>
+            </div>
+            <!-- Description -->
+            <div class="mt-3">
+              <p class="text-xs font-bold leading-6 text-slate-200"
+                :class="isDescriptionExpanded ? '' : 'line-clamp-1'">
+                <template v-if="movie.countries?.length">
+                  {{ movie.countries.slice(0, 2).join(" • ") }}
+                </template>
+                <template v-if="movie.countries?.length && movie.categories?.length">
+                  •
+                </template>
+                <template v-if="movie.categories?.length">
+                  {{ movie.categories.slice(0, 3).join(" • ") }}
+                </template>
+                <template v-if="!movie.countries?.length && !movie.categories?.length">
+                  Phim Hàn Quốc Vietsub mới cập nhật
+                </template>
+              </p>
+              <!-- Expand description -->
+              <button type="button"
+                class="mt-1 inline-flex items-center gap-0.5 text-[10px] font-semibold text-yellow-300 transition hover:text-yellow-200"
+                @click.stop="isDescriptionExpanded = !isDescriptionExpanded">
+                <template v-if="isDescriptionExpanded">
+                  Thu gọn
+                  <AppIcon name="chevron-up" class="size-3" />
+                </template>
+                <template v-else>
+                  Xem thêm
+                  <AppIcon name="chevron-down" class="size-3" />
+                </template>
+              </button>
+            </div>
           </div>
-
-          <div class="mt-3">
-            <p class="text-xs font-bold leading-6 text-slate-200" :class="isDescriptionExpanded ? '' : 'line-clamp-1'">
-              <template v-if="movie.countries?.length">{{ movie.countries.slice(0, 2).join(' • ') }}</template>
-              <template v-if="movie.countries?.length && movie.categories?.length"> • </template>
-              <template v-if="movie.categories?.length">{{ movie.categories.slice(0, 3).join(' • ') }}</template>
-              <template v-if="!movie.countries?.length && !movie.categories?.length">Phim Hàn Quốc Vietsub mới cập
-                nhật</template>
-            </p>
-            <button type="button"
-              class="mt-1 inline-flex items-center gap-0.5 text-[10px] font-semibold text-yellow-300 transition hover:text-yellow-200"
-              @click.stop="isDescriptionExpanded = !isDescriptionExpanded">
-              <template v-if="isDescriptionExpanded">
-                Thu gọn <AppIcon name="chevron-up" class="size-3" />
-              </template>
-              <template v-else>
-                Xem thêm <AppIcon name="chevron-down" class="size-3" />
-              </template>
-            </button>
-          </div>
-        </div>
-      </NuxtLink>
-    </Transition>
-  </Teleport>
+        </NuxtLink>
+      </Transition>
+    </Teleport>
+  </div>
 </template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index db94e4d..79edc43 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -470,7 +470,7 @@ useHead({
           :class="index === heroIndex ? 'border-white/90 opacity-100 scale-100 shadow-md' : 'border-transparent opacity-80 scale-95 hover:scale-100 hover:opacity-100'"
           style="-webkit-mask-image: -webkit-radial-gradient(white, black); mask-image: radial-gradient(white, black);"
           :aria-label="`Chuyển đến phim ${index + 1}`" @click="goToSlide(index)">
-          <img :src="slide.thumb || slide.poster" :alt="slide.name"
+          <img :src="slide.poster || slide.thumb" :alt="slide.name"
             class="absolute inset-0 h-full w-full object-cover rounded-full md:rounded-lg pointer-events-none">
         </button>
       </div>
@@ -580,7 +580,7 @@ useHead({
                 <span class="block h-full bg-yellow-400" :style="{ width: `${watchProgressPercent(item)}%` }" />
               </div>
               <span class="absolute left-2 top-2 rounded bg-yellow-400 px-2 py-1 text-xs font-black text-slate-950">
-                {{ item.episodeName || `Tập ${(item.episodeIndex || 0) + 1}` }}
+                {{ item.episodeName || getEpisodeDisplay(String((item.episodeIndex || 0) + 1), '') }}
               </span>
               <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">
@@ -667,9 +667,9 @@ useHead({
                     <!-- Movie Poster -->
                     <div
                       class="h-18 w-12 shrink-0 overflow-hidden rounded-lg shadow-md ring-1 ring-white/10 sm:h-19 sm:w-13">
-                      <img v-if="comment.movie?.poster" :src="comment.movie.poster" :alt="comment.movie?.name"
+                      <img v-if="comment.movie?.thumb" :src="comment.movie.thumb" :alt="comment.movie?.name"
                         class="h-full w-full object-cover">
-                      <img v-else-if="comment.movie?.thumb" :src="comment.movie.thumb" :alt="comment.movie?.name"
+                      <img v-else-if="comment.movie?.poster" :src="comment.movie.poster" :alt="comment.movie?.name"
                         class="h-full w-full object-cover">
                       <div v-else class="h-full w-full bg-slate-700" />
                     </div>
diff --git a/app/utils/episode.ts b/app/utils/episode.ts
index 90ed7cf..1985ead 100644
--- a/app/utils/episode.ts
+++ b/app/utils/episode.ts
@@ -11,15 +11,39 @@ function extractEpisodeNumber(value?: string): number {
 export function getEpisodeDisplay(
   episode?: string,
   episodeTotal?: string,
+  prefix = 'Tập',
 ): string | undefined {
   if (!episode) return undefined
 
+  const trimmed = episode.trim()
+
+  // "Hoàn tất" status
+  if (/hoan.t|hoàn.t/.test(trimmed)) {
+    return 'Hoàn tất'
+  }
+
+  // Extract "X/Y" pattern anywhere in the string (with or without spaces)
+  const slashMatch = trimmed.match(/(\d+)\s*\/\s*(\d+)/)
+  if (slashMatch) {
+    const epNum = Number(slashMatch[1])
+    const totalNum = Number(slashMatch[2])
+    if (epNum > 0 && totalNum > 0 && epNum < totalNum) {
+      return `${prefix} ${epNum}/${totalNum}`
+    }
+    return `${prefix} ${totalNum}`
+  }
+
+  // Single number
   const totalNum = extractEpisodeNumber(episodeTotal)
   const epNum = extractEpisodeNumber(episode)
 
   if (totalNum > 0 && epNum > 0 && epNum !== totalNum) {
-    return `Tập ${epNum}/${totalNum}`
+    return `${prefix} ${epNum}/${totalNum}`
   }
 
-  return episode
+  if (epNum > 0) {
+    return `${prefix} ${epNum}`
+  }
+
+  return trimmed
 }