From 221c132e60146ca166ec6ddfca94e05ed82aafdb Mon Sep 17 00:00:00 2001
From: ngthanhvu <nguyenthanhvudvfb@gmail.com>
Date: Wed, 22 Jul 2026 11:43:14 -0400
Subject: [PATCH] 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
---
 app/components/AppHeader.vue                  |   8 +-
 app/components/HomeMovieCard.vue              |  30 +-
 app/pages/admin/phim/index.vue                |   6 +-
 app/pages/index.vue                           |   5 +-
 app/pages/phim/[slug].vue                     |  29 +-
 app/pages/xem/[slug].vue                      | 152 +++++---
 server/api/movies.get.ts                      |   1 +
 server/api/movies/[slug]/view.post.ts         |  25 ++
 server/api/proxy-m3u8.post.ts                 |  83 +++++
 server/api/proxy-m3u8/[url].get.ts            |  77 ++++
 .../migrations/0005_illegal_purple_man.sql    |   1 +
 .../migrations/meta/0005_snapshot.json        | 329 ++++++++++++++++++
 server/database/migrations/meta/_journal.json |   7 +
 server/database/schema.ts                     |   1 +
 server/middleware/proxy-m3u8.ts               |  80 +++++
 15 files changed, 765 insertions(+), 69 deletions(-)
 create mode 100644 server/api/movies/[slug]/view.post.ts
 create mode 100644 server/api/proxy-m3u8.post.ts
 create mode 100644 server/api/proxy-m3u8/[url].get.ts
 create mode 100644 server/database/migrations/0005_illegal_purple_man.sql
 create mode 100644 server/database/migrations/meta/0005_snapshot.json
 create mode 100644 server/middleware/proxy-m3u8.ts

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 3706535..56eebbe 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -89,7 +89,7 @@ watch(() => route.path, () => {
 </script>
 
 <template>
-  <header class="fixed inset-x-0 top-0 z-50 bg-gradient-to-b from-black/80 via-black/40 to-transparent">
+  <header class="fixed inset-x-0 top-0 z-50 bg-linear-to-b from-black/80 via-black/40 to-transparent">
     <nav class="mx-auto flex max-w-390 items-center gap-3 px-4 py-3 sm:px-6 lg:gap-6 lg:px-8 xl:px-10">
       <AppLogo />
 
@@ -115,7 +115,8 @@ watch(() => route.path, () => {
           class="inline-flex h-9 shrink-0 cursor-pointer items-center gap-1.5 rounded-full bg-white px-2.5 pl-1 text-xs font-black text-slate-950 shadow-xl shadow-black/20 transition hover:bg-yellow-100"
           aria-label="Tài khoản thành viên" @click="handleMemberClick">
           <template v-if="user">
-            <span class="grid size-7 place-items-center rounded-full bg-yellow-400/20 text-xs font-black text-yellow-400">
+            <span
+              class="grid size-7 place-items-center rounded-full bg-yellow-400/20 text-xs font-black text-yellow-400">
               {{ displayInitial }}
             </span>
             <span class="max-w-24 truncate">{{ displayName }}</span>
@@ -171,7 +172,8 @@ watch(() => route.path, () => {
             </div>
 
             <div v-if="user" class="flex items-center gap-3 border-b border-white/10 px-4 py-4">
-              <span class="grid size-9 place-items-center rounded-full bg-yellow-400/10 text-sm font-black text-yellow-400">
+              <span
+                class="grid size-9 place-items-center rounded-full bg-yellow-400/10 text-sm font-black text-yellow-400">
                 {{ displayInitial }}
               </span>
               <div class="min-w-0">
diff --git a/app/components/HomeMovieCard.vue b/app/components/HomeMovieCard.vue
index acde5f0..a917315 100644
--- a/app/components/HomeMovieCard.vue
+++ b/app/components/HomeMovieCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Circle, Heart, Play } from 'lucide-vue-next'
+import { ChevronDown, ChevronUp, Circle, Heart, Play } from 'lucide-vue-next'
 
 const props = defineProps<{
   movie: {
@@ -21,6 +21,7 @@ const props = defineProps<{
 }>()
 
 const isPreviewVisible = ref(false)
+const isDescriptionExpanded = ref(false)
 const previewStyle = ref<Record<string, string>>({})
 let hideTimer: ReturnType<typeof setTimeout> | undefined
 
@@ -62,6 +63,7 @@ function scheduleHide() {
   if (hideTimer) clearTimeout(hideTimer)
   hideTimer = setTimeout(() => {
     isPreviewVisible.value = false
+    isDescriptionExpanded.value = false
   }, 90)
 }
 
@@ -137,13 +139,25 @@ onBeforeUnmount(() => {
               movie.episode }}</span>
           </div>
 
-          <p class="mt-3 line-clamp-2 text-xs font-bold leading-6 text-slate-200">
-            <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>
+          <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 <ChevronUp class="size-3" />
+              </template>
+              <template v-else>
+                Xem thêm <ChevronDown class="size-3" />
+              </template>
+            </button>
+          </div>
         </div>
       </NuxtLink>
     </Transition>
diff --git a/app/pages/admin/phim/index.vue b/app/pages/admin/phim/index.vue
index 6220709..60b2aa6 100644
--- a/app/pages/admin/phim/index.vue
+++ b/app/pages/admin/phim/index.vue
@@ -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>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 3183d2c..9dc4710 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -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)
diff --git a/app/pages/phim/[slug].vue b/app/pages/phim/[slug].vue
index b658dae..e757854 100644
--- a/app/pages/phim/[slug].vue
+++ b/app/pages/phim/[slug].vue
@@ -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>
diff --git a/app/pages/xem/[slug].vue b/app/pages/xem/[slug].vue
index e4c0765..7022e92 100644
--- a/app/pages/xem/[slug].vue
+++ b/app/pages/xem/[slug].vue
@@ -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) {
diff --git a/server/api/movies.get.ts b/server/api/movies.get.ts
index d434716..6d643e7 100644
--- a/server/api/movies.get.ts
+++ b/server/api/movies.get.ts
@@ -76,6 +76,7 @@ function mapMovieToResponse(movie: any) {
     lang: movie.lang || undefined,
     type: movie.type || undefined,
     rating: movie.rating || undefined,
+    views: movie.views || 0,
     categories: movie.categories || [],
     countries: movie.countries || [],
     sources: movie.sources || [],
diff --git a/server/api/movies/[slug]/view.post.ts b/server/api/movies/[slug]/view.post.ts
new file mode 100644
index 0000000..d69c2c6
--- /dev/null
+++ b/server/api/movies/[slug]/view.post.ts
@@ -0,0 +1,25 @@
+import { movies } from '../../../database/schema'
+import { eq, and, sql } from 'drizzle-orm'
+
+export default defineEventHandler(async (event) => {
+  const slug = getRouterParam(event, 'slug')
+  if (!slug) {
+    throw createError({ statusCode: 400, message: 'Thiếu slug phim' })
+  }
+
+  const query = getQuery(event)
+  const source = typeof query.source === 'string' ? query.source : ''
+
+  const db = useDb()
+
+  const whereClause = source
+    ? and(eq(movies.slug, slug), eq(movies.source, source), eq(movies.active, true))
+    : and(eq(movies.slug, slug), eq(movies.active, true))
+
+  await db
+    .update(movies)
+    .set({ views: sql`${movies.views} + 1` })
+    .where(whereClause)
+
+  return { success: true }
+})
diff --git a/server/api/proxy-m3u8.post.ts b/server/api/proxy-m3u8.post.ts
new file mode 100644
index 0000000..b55910d
--- /dev/null
+++ b/server/api/proxy-m3u8.post.ts
@@ -0,0 +1,83 @@
+export default defineEventHandler(async (event) => {
+  const body = await readBody(event)
+  const url = body.url as string
+
+  if (!url) {
+    throw createError({
+      statusCode: 400,
+      message: 'Missing url parameter',
+    })
+  }
+
+  // Validate URL to prevent SSRF
+  if (!url.startsWith('http://') && !url.startsWith('https://')) {
+    throw createError({
+      statusCode: 400,
+      message: 'Invalid URL protocol',
+    })
+  }
+
+  try {
+    const response = await fetch(url, {
+      headers: {
+        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
+        'Accept': '*/*',
+        'Referer': new URL(url).origin,
+        'Origin': new URL(url).origin,
+      },
+    })
+
+    if (!response.ok) {
+      throw createError({
+        statusCode: response.status,
+        message: `Upstream error: ${response.statusText}`,
+      })
+    }
+
+    const contentType = response.headers.get('content-type') || 'application/octet-stream'
+    const isM3u8 = url.includes('.m3u8') || contentType.includes('mpegurl')
+
+    setHeader(event, 'access-control-allow-origin', '*')
+    setHeader(event, 'access-control-allow-methods', 'POST, OPTIONS')
+    setHeader(event, 'cache-control', 'public, max-age=3600')
+
+    // For m3u8 files, rewrite relative URLs to use proxy
+    if (isM3u8) {
+      let body = await response.text()
+      const baseUrl = url.substring(0, url.lastIndexOf('/') + 1)
+      
+      // Rewrite absolute URLs
+      body = body.replace(/^(https?:\/\/[^\s]+)$/gm, (match) => {
+        const encoded = Buffer.from(match).toString('base64')
+        return `/api/proxy-m3u8/${encoded}`
+      })
+      
+      // Rewrite relative URLs (not starting with http/https or /api/proxy-m3u8/)
+      body = body.replace(/^([^#\s][^\n]*)$/gm, (match) => {
+        if (match.startsWith('http://') || match.startsWith('https://') || match.startsWith('/api/proxy-m3u8/')) {
+          return match
+        }
+        const absoluteUrl = new URL(match, baseUrl).href
+        const encoded = Buffer.from(absoluteUrl).toString('base64')
+        return `/api/proxy-m3u8/${encoded}`
+      })
+      
+      setHeader(event, 'content-type', 'application/vnd.apple.mpegurl')
+      return body
+    } else {
+      // For .ts files and other binary data, stream directly
+      setHeader(event, 'content-type', contentType)
+      const contentLength = response.headers.get('content-length')
+      if (contentLength) {
+        setHeader(event, 'content-length', contentLength)
+      }
+      return response.body
+    }
+  } catch (error: any) {
+    if (error.statusCode) throw error
+    throw createError({
+      statusCode: 500,
+      message: `Proxy error: ${error.message}`,
+    })
+  }
+})
diff --git a/server/api/proxy-m3u8/[url].get.ts b/server/api/proxy-m3u8/[url].get.ts
new file mode 100644
index 0000000..50acfdb
--- /dev/null
+++ b/server/api/proxy-m3u8/[url].get.ts
@@ -0,0 +1,77 @@
+export default defineEventHandler(async (event) => {
+  // Get base64 encoded URL from path after /api/proxy-m3u8/
+  const path = event.path || event.node?.req?.url || ''
+  const base64Url = path.replace('/api/proxy-m3u8/', '')
+  
+  if (!base64Url) {
+    throw createError({ statusCode: 400, message: 'Missing url parameter' })
+  }
+
+  // Decode URL from base64
+  let url: string
+  try {
+    url = Buffer.from(base64Url, 'base64').toString('utf-8')
+  } catch {
+    throw createError({ statusCode: 400, message: 'Invalid URL encoding' })
+  }
+
+  if (!url.startsWith('http://') && !url.startsWith('https://')) {
+    throw createError({ statusCode: 400, message: 'Invalid URL protocol' })
+  }
+
+  try {
+    const response = await fetch(url, {
+      headers: {
+        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
+        'Accept': '*/*',
+        'Referer': new URL(url).origin,
+        'Origin': new URL(url).origin,
+      },
+    })
+
+    if (!response.ok) {
+      throw createError({ statusCode: response.status, message: `Upstream error: ${response.statusText}` })
+    }
+
+    const contentType = response.headers.get('content-type') || 'application/octet-stream'
+    const isM3u8 = url.includes('.m3u8') || contentType.includes('mpegurl')
+
+    setHeader(event, 'access-control-allow-origin', '*')
+    setHeader(event, 'access-control-allow-methods', 'GET, OPTIONS')
+    setHeader(event, 'cache-control', 'public, max-age=3600')
+
+    if (isM3u8) {
+      let body = await response.text()
+      const baseUrl = url.substring(0, url.lastIndexOf('/') + 1)
+      
+      // Rewrite absolute URLs
+      body = body.replace(/^(https?:\/\/[^\s]+)$/gm, (match) => {
+        const encoded = Buffer.from(match).toString('base64')
+        return `/api/proxy-m3u8/${encoded}`
+      })
+      
+      // Rewrite relative URLs
+      body = body.replace(/^([^#\s][^\n]*)$/gm, (match) => {
+        if (match.startsWith('http://') || match.startsWith('https://') || match.startsWith('/api/proxy-m3u8/')) {
+          return match
+        }
+        const absoluteUrl = new URL(match, baseUrl).href
+        const encoded = Buffer.from(absoluteUrl).toString('base64')
+        return `/api/proxy-m3u8/${encoded}`
+      })
+      
+      setHeader(event, 'content-type', 'application/vnd.apple.mpegurl')
+      return body
+    } else {
+      setHeader(event, 'content-type', contentType)
+      const contentLength = response.headers.get('content-length')
+      if (contentLength) {
+        setHeader(event, 'content-length', contentLength)
+      }
+      return response.body
+    }
+  } catch (error: any) {
+    if (error.statusCode) throw error
+    throw createError({ statusCode: 500, message: `Proxy error: ${error.message}` })
+  }
+})
diff --git a/server/database/migrations/0005_illegal_purple_man.sql b/server/database/migrations/0005_illegal_purple_man.sql
new file mode 100644
index 0000000..2014e9c
--- /dev/null
+++ b/server/database/migrations/0005_illegal_purple_man.sql
@@ -0,0 +1 @@
+ALTER TABLE `movies` ADD `views` int DEFAULT 0 NOT NULL;
\ No newline at end of file
diff --git a/server/database/migrations/meta/0005_snapshot.json b/server/database/migrations/meta/0005_snapshot.json
new file mode 100644
index 0000000..eeaca5d
--- /dev/null
+++ b/server/database/migrations/meta/0005_snapshot.json
@@ -0,0 +1,329 @@
+{
+  "version": "5",
+  "dialect": "mysql",
+  "id": "12998654-722b-4627-9970-1f407a7d7edd",
+  "prevId": "39aa52ed-af36-43ed-ab3e-2222785d1c00",
+  "tables": {
+    "movies": {
+      "name": "movies",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "source": {
+          "name": "source",
+          "type": "varchar(50)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "slug": {
+          "name": "slug",
+          "type": "varchar(500)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(500)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "origin_name": {
+          "name": "origin_name",
+          "type": "varchar(500)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "thumb": {
+          "name": "thumb",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "poster": {
+          "name": "poster",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "year": {
+          "name": "year",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "time": {
+          "name": "time",
+          "type": "varchar(100)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "episode": {
+          "name": "episode",
+          "type": "varchar(100)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "quality": {
+          "name": "quality",
+          "type": "varchar(50)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "lang": {
+          "name": "lang",
+          "type": "varchar(50)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "varchar(50)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "rating": {
+          "name": "rating",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "views": {
+          "name": "views",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "content": {
+          "name": "content",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "categories": {
+          "name": "categories",
+          "type": "json",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "countries": {
+          "name": "countries",
+          "type": "json",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "sources": {
+          "name": "sources",
+          "type": "json",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "custom_poster": {
+          "name": "custom_poster",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "custom_thumb": {
+          "name": "custom_thumb",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "custom_content": {
+          "name": "custom_content",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "custom_episodes": {
+          "name": "custom_episodes",
+          "type": "json",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "active": {
+          "name": "active",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "api_updated_at": {
+          "name": "api_updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "synced_at": {
+          "name": "synced_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "onUpdate": true,
+          "default": "(now())"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "movies_id": {
+          "name": "movies_id",
+          "columns": [
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraint": {}
+    },
+    "users": {
+      "name": "users",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(200)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "password": {
+          "name": "password",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "role": {
+          "name": "role",
+          "type": "varchar(50)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'user'"
+        },
+        "avatar": {
+          "name": "avatar",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "active": {
+          "name": "active",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(now())"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "onUpdate": true,
+          "default": "(now())"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "users_id": {
+          "name": "users_id",
+          "columns": [
+            "id"
+          ]
+        }
+      },
+      "uniqueConstraints": {
+        "users_email_unique": {
+          "name": "users_email_unique",
+          "columns": [
+            "email"
+          ]
+        }
+      },
+      "checkConstraint": {}
+    }
+  },
+  "views": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "tables": {},
+    "indexes": {}
+  }
+}
\ No newline at end of file
diff --git a/server/database/migrations/meta/_journal.json b/server/database/migrations/meta/_journal.json
index 4bc37c1..fcef905 100644
--- a/server/database/migrations/meta/_journal.json
+++ b/server/database/migrations/meta/_journal.json
@@ -36,6 +36,13 @@
       "when": 1784707891329,
       "tag": "0004_opposite_sasquatch",
       "breakpoints": true
+    },
+    {
+      "idx": 5,
+      "version": "5",
+      "when": 1784709136940,
+      "tag": "0005_illegal_purple_man",
+      "breakpoints": true
     }
   ]
 }
\ No newline at end of file
diff --git a/server/database/schema.ts b/server/database/schema.ts
index f990de2..a169ddd 100644
--- a/server/database/schema.ts
+++ b/server/database/schema.ts
@@ -27,6 +27,7 @@ export const movies = mysqlTable('movies', {
   lang: varchar('lang', { length: 50 }),
   type: varchar('type', { length: 50 }),
   rating: int('rating'),
+  views: int('views').notNull().default(0),
   content: text('content'),
   categories: json('categories').$type<string[]>(),
   countries: json('countries').$type<string[]>(),
diff --git a/server/middleware/proxy-m3u8.ts b/server/middleware/proxy-m3u8.ts
new file mode 100644
index 0000000..52536c3
--- /dev/null
+++ b/server/middleware/proxy-m3u8.ts
@@ -0,0 +1,80 @@
+export default defineEventHandler(async (event) => {
+  const path = event.path || event.node?.req?.url || ''
+  
+  // Only handle /api/proxy-m3u8/ paths
+  if (!path.startsWith('/api/proxy-m3u8/')) {
+    return
+  }
+  
+  const base64Url = path.replace('/api/proxy-m3u8/', '')
+  
+  if (!base64Url) {
+    throw createError({ statusCode: 400, message: 'Missing url parameter' })
+  }
+
+  // Decode URL from base64
+  let url: string
+  try {
+    url = Buffer.from(base64Url, 'base64').toString('utf-8')
+  } catch {
+    throw createError({ statusCode: 400, message: 'Invalid URL encoding' })
+  }
+
+  if (!url.startsWith('http://') && !url.startsWith('https://')) {
+    throw createError({ statusCode: 400, message: 'Invalid URL protocol' })
+  }
+
+  try {
+    const response = await fetch(url, {
+      headers: {
+        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
+        'Accept': '*/*',
+        'Referer': new URL(url).origin,
+        'Origin': new URL(url).origin,
+      },
+    })
+
+    if (!response.ok) {
+      throw createError({ statusCode: response.status, message: `Upstream error: ${response.statusText}` })
+    }
+
+    const contentType = response.headers.get('content-type') || 'application/octet-stream'
+    const isM3u8 = url.includes('.m3u8') || contentType.includes('mpegurl')
+
+    setHeader(event, 'access-control-allow-origin', '*')
+    setHeader(event, 'access-control-allow-methods', 'GET, OPTIONS')
+    setHeader(event, 'cache-control', 'public, max-age=3600')
+
+    if (isM3u8) {
+      let body = await response.text()
+      const baseUrl = url.substring(0, url.lastIndexOf('/') + 1)
+      
+      body = body.replace(/^(https?:\/\/[^\s]+)$/gm, (match) => {
+        const encoded = Buffer.from(match).toString('base64')
+        return `/api/proxy-m3u8/${encoded}`
+      })
+      
+      body = body.replace(/^([^#\s][^\n]*)$/gm, (match) => {
+        if (match.startsWith('http://') || match.startsWith('https://') || match.startsWith('/api/proxy-m3u8/')) {
+          return match
+        }
+        const absoluteUrl = new URL(match, baseUrl).href
+        const encoded = Buffer.from(absoluteUrl).toString('base64')
+        return `/api/proxy-m3u8/${encoded}`
+      })
+      
+      setHeader(event, 'content-type', 'application/vnd.apple.mpegurl')
+      return body
+    } else {
+      setHeader(event, 'content-type', contentType)
+      const contentLength = response.headers.get('content-length')
+      if (contentLength) {
+        setHeader(event, 'content-length', contentLength)
+      }
+      return response.body
+    }
+  } catch (error: any) {
+    if (error.statusCode) throw error
+    throw createError({ statusCode: 500, message: `Proxy error: ${error.message}` })
+  }
+})