feat: add HLS proxy, view tracking, and player improvements

- Add HLS proxy middleware for CORS bypass - Add view tracking API endpoint - Improve HLS player with proxy fallback mechanism - Add custom episode support in admin - Update admin movie list with view count - Add description expand/collapse on movie detail - Fix hydration warnings in watch page
2026-08-10 14:27:47 +00:00 · 2026-07-22 11:43:14 -04:00
parent d982449464
commit 221c132e60
15 changed files with 765 additions and 69 deletions
@@ -134,6 +134,7 @@ const totalPages = computed(() => data.value?.totalPages || 1)
              <th class="w-12 px-4 py-3 text-center">STT</th>
              <th class="px-4 py-3 text-center">Phim</th>
              <th class="px-4 py-3 text-center">Nguồn</th>
+              <th class="px-4 py-3 text-center">Lượt xem</th>
              <th class="px-4 py-3 text-center">Trạng thái</th>
              <th class="px-4 py-3 text-center">Chỉnh sửa</th>
              <th class="px-4 py-3 text-center">Thao tác</th>
@@ -155,6 +156,9 @@ const totalPages = computed(() => data.value?.totalPages || 1)
                  {{ movie.source?.toUpperCase() }}
                </span>
              </td>
+              <td class="px-4 py-3 text-center text-sm text-slate-300">
+                {{ (movie.views || 0).toLocaleString() }}
+              </td>
              <td class="px-4 py-3 text-center">
                <span class="rounded-full px-2.5 py-1 text-xs font-semibold"
                  :class="movie.active ? 'bg-green-400/10 text-green-400' : 'bg-slate-400/10 text-slate-400'">
@@ -188,7 +192,7 @@ const totalPages = computed(() => data.value?.totalPages || 1)
              </td>
            </tr>
            <tr v-if="!movies.length">
-              <td colspan="6" class="px-4 py-12 text-center text-sm text-slate-400">
+              <td colspan="7" class="px-4 py-12 text-center text-sm text-slate-400">
                {{ debouncedKeyword ? 'Không tìm thấy phim nào.' : 'Chưa có phim nào. Bấm "Đồng bộ từ API" để lấy phim.' }}
              </td>
            </tr>
@@ -96,8 +96,9 @@ function movieUpdateTime(movie: any) {
 }

 const topTrending = computed(() => [...homeCatalog.value]
-  .sort((a: any, b: any) => (Number(b.rating) || 0) - (Number(a.rating) || 0)
-    || movieUpdateTime(b) - movieUpdateTime(a))
+  .filter((movie: any) => (movie.views || 0) > 0)
+  .sort((a: any, b: any) => (Number(b.views) || 0) - (Number(a.views) || 0)
+    || (Number(b.rating) || 0) - (Number(a.rating) || 0))
  .slice(0, 10))

 const latestMovies = computed(() => withoutMovies(homeCatalog.value, topTrending.value)
@@ -6,6 +6,7 @@ const requestedSource = computed(() => String(route.query.source || 'nguonc'))
 const requestedSources = computed(() => typeof route.query.srcs === 'string' ? route.query.srcs : '')
 const selectedServer = ref(0)
 const movieInfoOpen = ref(false)
+const contentExpanded = ref(false)
 const activeTab = ref<'episodes' | 'actors'>('episodes')
 const isFavoriteMovie = ref(false)
 const actionMessage = ref('')
@@ -164,6 +165,10 @@ async function shareMovie() {

 onMounted(async () => {
  await refreshFavoriteState()
+  await $fetch(`/api/movies/${route.params.slug}/view`, {
+    method: 'POST',
+    query: { source: route.query.source },
+  }).catch(() => {})
 })

 watch(requestedSource, () => {
@@ -253,10 +258,16 @@ useHead(() => ({
              </div>

              <div class="mt-4 hidden space-y-3 text-sm leading-6 text-slate-300 sm:block lg:mt-5">
-                <p v-if="movie.content">
+                <div v-if="movie.content">
                  <span class="block font-black text-white">Giới thiệu:</span>
-                  {{ movie.content }}
-                </p>
+                  <p class="mt-1" :class="contentExpanded ? '' : 'line-clamp-3'">{{ movie.content }}</p>
+                  <button type="button"
+                    class="mt-1 inline-flex items-center gap-1 text-xs font-semibold text-yellow-300 transition hover:text-yellow-200"
+                    @click="contentExpanded = !contentExpanded">
+                    {{ contentExpanded ? 'Thu gọn' : 'Xem thêm' }}
+                    <ChevronDown class="size-3 transition" :class="contentExpanded ? 'rotate-180' : ''" />
+                  </button>
+                </div>
                <p><span class="font-black text-white">Số tập:</span> {{
                  episodeCount || movie.episode || 'Đang cập nhật'
                }}</p>
@@ -278,10 +289,16 @@ useHead(() => ({

              <div v-if="movieInfoOpen"
                class="mb-4 space-y-3 border-b border-white/10 pb-4 text-sm leading-6 text-slate-300 sm:hidden">
-                <p v-if="movie.content">
+                <div v-if="movie.content">
                  <span class="block font-black text-white">Giới thiệu:</span>
-                  {{ movie.content }}
-                </p>
+                  <p class="mt-1" :class="contentExpanded ? '' : 'line-clamp-3'">{{ movie.content }}</p>
+                  <button type="button"
+                    class="mt-1 inline-flex items-center gap-1 text-xs font-semibold text-yellow-300 transition hover:text-yellow-200"
+                    @click="contentExpanded = !contentExpanded">
+                    {{ contentExpanded ? 'Thu gọn' : 'Xem thêm' }}
+                    <ChevronDown class="size-3 transition" :class="contentExpanded ? 'rotate-180' : ''" />
+                  </button>
+                </div>
                <p><span class="font-black text-white">Số tập:</span> {{
                  episodeCount || movie.episode || 'Đang cập nhật'
                }}</p>
@@ -97,6 +97,12 @@ const canUseHls = computed(() => Boolean(hlsPlayerUrl.value))
 const actorSummary = computed(() => (movie.value?.actors ?? []).map((actor: any) => actor.name).filter(Boolean).slice(0, 6).join(', '))
 const durationSeconds = computed(() => Math.floor(videoDuration.value || parseDurationSeconds(movie.value?.time || '')))
 const hasNextEpisode = computed(() => Boolean(activeServer.value?.episodes?.[selectedEpisode.value + 1]))
+
+function getProxyUrl(url: string): string {
+  const encoded = btoa(url)
+  return `/api/proxy-m3u8/${encoded}`
+}
+
 const progressPercent = computed(() => {
  if (!durationSeconds.value || !progressSeconds.value) return 0
  return Math.min(Math.max((progressSeconds.value / durationSeconds.value) * 100, 0), 100)
@@ -365,8 +371,13 @@ function formatPlayerTime(seconds = 0) {
  return `${minutes}:${String(remainingSeconds).padStart(2, '0')}`
 }

-async function setupHlsPlayer(autoplay = false) {
-  if (!import.meta.client || !videoRef.value || !hlsPlayerUrl.value) return
+async function setupHlsPlayer(autoplay = false, tryProxy = true) {
+  console.log('[HLS] Setup called', { tryProxy, hasVideoRef: !!videoRef.value, hlsUrl: hlsPlayerUrl.value })
+  
+  if (!import.meta.client || !videoRef.value || !hlsPlayerUrl.value) {
+    console.log('[HLS] Early return - missing requirements')
+    return
+  }

  destroyHlsPlayer()
  hlsFatalRetryCount = 0
@@ -378,59 +389,102 @@ async function setupHlsPlayer(autoplay = false) {
  video.muted = isVideoMuted.value
  video.playbackRate = playbackRate.value

-  if (video.canPlayType('application/vnd.apple.mpegurl')) {
-    video.src = hlsPlayerUrl.value
+  // Use proxy if tryProxy is true, otherwise use direct URL
+  let sourceUrl = tryProxy ? getProxyUrl(hlsPlayerUrl.value) : hlsPlayerUrl.value
+  console.log('[HLS] Source URL:', sourceUrl)
+
+  // Force use hls.js when using proxy, as native HLS doesn't handle proxy URLs well
+  if (video.canPlayType('application/vnd.apple.mpegurl') && !tryProxy) {
+    console.log('[HLS] Using native HLS (Safari) - direct URL only')
+    // Native HLS (Safari) - only when using direct URL
+    video.src = sourceUrl
    scheduleHlsFallback()
+
+    // Listen for errors on native HLS
+    const handleError = () => {
+      console.log('[HLS] Native HLS error, falling back to hls.js')
+      video.removeEventListener('error', handleError)
+      // Fall back to hls.js instead of embed
+      tryProxy = false
+      setupHlsPlayer(autoplay, false)
+    }
+    video.addEventListener('error', handleError)
  } else {
-    const { default: HlsPlayer } = await import('hls.js')
+    console.log('[HLS] Using hls.js library')
+    try {
+      const { default: HlsPlayer } = await import('hls.js')

-    if (!HlsPlayer.isSupported()) {
-      fallbackToEmbed('Trình duyệt chưa hỗ trợ HLS, đã chuyển sang chế độ Nhúng.')
-      return
-    }
-
-    if (!HlsPlayer.isSupported()) {
-      hlsErrorMessage.value = 'Trình duyệt chưa hỗ trợ HLS, bạn dùng chế độ Nhúng nhé.'
-      return
-    }
-
-    hlsPlayer = new HlsPlayer({
-      enableWorker: true,
-      lowLatencyMode: true,
-    })
-    hlsPlayer.on(HlsPlayer.Events.MANIFEST_PARSED, () => {
-      clearHlsFallbackTimer()
-      qualityLevels.value = hlsPlayer?.levels
-        .map((level, index) => ({
-          label: level.height ? `${level.height}p` : `${Math.round((level.bitrate || 0) / 1000)}kbps`,
-          level: index,
-        }))
-        .filter((level) => level.label !== '0kbps') ?? []
-      selectedQuality.value = -1
-      applyResumeProgress()
-    })
-    hlsPlayer.on(HlsPlayer.Events.ERROR, (_event, data) => {
-      if (!data.fatal) return
-
-      hlsFatalRetryCount += 1
-      if (hlsFatalRetryCount >= 2) {
-        fallbackToEmbed('HLS tải không ổn định, đã chuyển sang chế độ Nhúng.')
+      if (!HlsPlayer.isSupported()) {
+        console.log('[HLS] hls.js not supported')
+        fallbackToEmbed('Trình duyệt chưa hỗ trợ HLS, đã chuyển sang chế độ Nhúng.')
        return
      }

-      if (data.type === HlsPlayer.ErrorTypes.NETWORK_ERROR) {
-        hlsErrorMessage.value = 'Mạng đang chập chờn, đang thử tải lại...'
-        hlsPlayer?.startLoad()
-      } else if (data.type === HlsPlayer.ErrorTypes.MEDIA_ERROR) {
-        hlsErrorMessage.value = 'Video bị lỗi giải mã, đang thử khôi phục...'
-        hlsPlayer?.recoverMediaError()
-      } else {
-        hlsErrorMessage.value = 'Link HLS đang lỗi, bạn chuyển sang chế độ Nhúng nhé.'
-      }
-    })
-    hlsPlayer.loadSource(hlsPlayerUrl.value)
-    hlsPlayer.attachMedia(video)
-    scheduleHlsFallback()
+      hlsPlayer = new HlsPlayer({
+        enableWorker: true,
+        lowLatencyMode: true,
+        xhrSetup: (xhr, url) => {
+          xhr.withCredentials = false
+        },
+      })
+      
+      hlsPlayer.on(HlsPlayer.Events.MANIFEST_PARSED, () => {
+        console.log('[HLS] Manifest parsed successfully')
+        clearHlsFallbackTimer()
+        qualityLevels.value = hlsPlayer?.levels
+          .map((level, index) => ({
+            label: level.height ? `${level.height}p` : `${Math.round((level.bitrate || 0) / 1000)}kbps`,
+            level: index,
+          }))
+          .filter((level) => level.label !== '0kbps') ?? []
+        selectedQuality.value = -1
+        applyResumeProgress()
+      })
+      
+      hlsPlayer.on(HlsPlayer.Events.ERROR, (_event, data) => {
+        console.log('[HLS] Error:', data.type, data.details, data.fatal)
+        if (!data.fatal) return
+
+        // If using proxy and it fails, try direct URL
+        if (tryProxy) {
+          console.log('[HLS] Proxy failed, trying direct URL')
+          hlsErrorMessage.value = 'Proxy lỗi, đang thử trực tiếp...'
+          hlsPlayer?.destroy()
+
+          // Retry with direct URL
+          setTimeout(() => {
+            setupHlsPlayer(autoplay, false)
+          }, 100)
+          return
+        }
+
+        hlsFatalRetryCount += 1
+        if (hlsFatalRetryCount >= 2) {
+          console.log('[HLS] Too many errors, falling back to embed')
+          fallbackToEmbed('HLS tải không ổn định, đã chuyển sang chế độ Nhúng.')
+          return
+        }
+
+        if (data.type === HlsPlayer.ErrorTypes.NETWORK_ERROR) {
+          hlsErrorMessage.value = 'Mạng đang chập chờn, đang thử tải lại...'
+          hlsPlayer?.startLoad()
+        } else if (data.type === HlsPlayer.ErrorTypes.MEDIA_ERROR) {
+          hlsErrorMessage.value = 'Video bị lỗi giải mã, đang thử khôi phục...'
+          hlsPlayer?.recoverMediaError()
+        } else {
+          hlsErrorMessage.value = 'Link HLS đang lỗi, bạn chuyển sang chế độ Nhúng nhé.'
+        }
+      })
+
+      console.log('[HLS] Loading source and attaching media')
+      hlsPlayer.loadSource(sourceUrl)
+      hlsPlayer.attachMedia(video)
+      scheduleHlsFallback()
+    } catch (error) {
+      console.error('[HLS] Setup error:', error)
+      fallbackToEmbed('Lỗi khởi tạo HLS player, đã chuyển sang chế độ Nhúng.')
+      return
+    }
  }

  if (autoplay) {