ngthanhvu/kr-phim
1
0
Fork 0
mirror of https://github.com/ngthanhvu/kr-phim.git synced 2026-08-10 16:07:47 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: implement movie player page with HLS and embedded streaming support, navigation, and watch history tracking

Browse Source
This commit is contained in:
thanhvudaynee
2026-05-23 15:08:57 +07:00
parent 84c3549157
commit f2479074df
7 changed files with 878 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/HomeMovieCard.vue
+15 -3
View File
@@ -16,6 +16,7 @@ const props = defineProps<{
lang?: string
categories?: string[]
countries?: string[]
sources?: { source: string, slug: string }[]
}
}>()
@@ -23,9 +24,19 @@ const isPreviewVisible = 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 }])
.filter((source) => source.source && source.slug)
.map((source) => `${source.source}:${source.slug}`)
.join(','),
)
const movieLink = computed(() => ({
path: `/phim/${props.movie.slug}`,
query: { source: props.movie.source },
query: {
source: props.movie.source,
srcs: movieSourcesQuery.value || undefined,
},
}))
function showPreview(event: MouseEvent) {
@@ -75,8 +86,9 @@ onBeforeUnmount(() => {
<p class="line-clamp-2 text-sm font-bold leading-snug text-white">{{ movie.name }}</p>
<p class="mt-1 truncate text-xs text-emerald-100">{{ movie.episode || movie.year || movie.quality }}</p>
</div>
<span class="absolute left-2 top-2 rounded bg-emerald-400 px-2 py-1 text-xs font-black text-slate-950">
{{ movie.source }}
<span v-if="movie.sources?.length && movie.sources.length > 1"
class="absolute left-2 top-2 rounded bg-emerald-400 px-2 py-1 text-xs font-black text-slate-950">
{{ movie.sources.length }} server
</span>
</div>
</NuxtLink>
app/pages/index.vue
+22 -4
View File
@@ -65,6 +65,23 @@ function uniqueHeroMovies(items: any[]) {
return uniqueItems
}
function movieSourcesQuery(movie: any) {
return (movie?.sources || [{ source: movie?.source, slug: movie?.slug }])
.filter((source: any) => source.source && source.slug)
.map((source: any) => `${source.source}:${source.slug}`)
.join(',')
}
function movieLink(movie: any) {
return {
path: `/phim/${movie?.slug}`,
query: {
source: movie?.source,
srcs: movieSourcesQuery(movie) || undefined,
},
}
}
function selectHero(index: number) {
heroIndex.value = index
}
@@ -102,6 +119,7 @@ watch(hero, async (currentHero) => {
const detail = await $fetch(`/api/movies/${currentHero.slug}`, {
query: {
source: currentHero.source,
srcs: movieSourcesQuery(currentHero) || undefined,
},
})
heroDetailCache.set(cacheKey, detail)
@@ -283,7 +301,7 @@ useHead({
{{ heroDescription }}
</p>
<div class="mt-6 flex items-center gap-3 sm:mt-8 sm:gap-4">
<NuxtLink :to="{ path: `/phim/${hero.slug}`, query: { source: hero.source } }"
<NuxtLink :to="movieLink(hero)"
class="grid size-12 shrink-0 place-items-center rounded-full bg-emerald-300 text-slate-950 shadow-2xl shadow-emerald-950/50 transition hover:scale-105 hover:bg-white sm:size-16"
aria-label="Xem ngay">
<Play class="size-6 fill-current sm:size-7" />
@@ -298,7 +316,7 @@ useHead({
aria-label="Thêm vào thư viện">
<BookPlus class="size-4 sm:size-5" />
</button>
<NuxtLink :to="{ path: `/phim/${hero.slug}`, query: { source: hero.source } }"
<NuxtLink :to="movieLink(hero)"
class="grid size-10 shrink-0 place-items-center rounded-full border border-white/20 bg-black/28 text-white backdrop-blur transition hover:bg-white/16 sm:size-12"
aria-label="Thông tin phim">
<Info class="size-4 sm:size-5" />
@@ -344,7 +362,7 @@ useHead({
</section>
<div class="relative z-10 mx-auto -mt-10 max-w-390 px-4 pb-16 sm:px-6 lg:px-8 xl:px-10">
<div v-if="sourceStatus.length" class="mb-8 hidden flex-wrap gap-2 text-xs text-slate-300 sm:flex">
<div v-if="sourceStatus.length" class="hidden">
<span v-for="source in sourceStatus" :key="source.name"
class="rounded-full border border-white/10 bg-white/8 px-3 py-1">
{{ source.name }}: {{ source.ok ? 'sẵn sàng' : 'đang bị chặn' }}
@@ -396,7 +414,7 @@ useHead({
<div v-for="item in 12" :key="item" class="aspect-2/3 animate-pulse rounded-md bg-white/10" />
</div>
<section v-for="(row, index) in apiRows" v-show="row.items.length"
<section v-for="(row, index) in rows" v-show="row.items.length"
:id="index === 0 ? 'latest' : index === 1 ? 'series' : 'movies'" :key="row.title" class="mb-12">
<div class="mb-4 flex items-end justify-between gap-4">
<h2 class="text-2xl font-extrabold text-white">{{ row.title }}</h2>
app/pages/phim/[slug].vue
+39 -16
View File
@@ -3,6 +3,7 @@ import { ChevronDown, Heart, Play, Plus, Share2, Star } from 'lucide-vue-next'
const route = useRoute()
const requestedSource = computed(() => String(route.query.source || 'ophim'))
const requestedSources = computed(() => typeof route.query.srcs === 'string' ? route.query.srcs : '')
const selectedServer = ref(0)
const movieInfoOpen = ref(false)
const activeTab = ref<'episodes' | 'actors'>('episodes')
@@ -16,29 +17,37 @@ const {
removeFavorite,
saveWatchLater,
} = useMovieLibrary()
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}`, {
query: computed(() => ({
source: requestedSource.value,
srcs: requestedSources.value || undefined,
})),
watch: [requestedSource],
watch: [requestedSource, requestedSources],
})
const servers = computed(() => movie.value?.servers ?? [])
const activeServer = computed(() => servers.value[selectedServer.value])
const activeSource = computed(() => String(movie.value?.source || route.query.source || 'ophim'))
const activeSource = computed(() => String(activeServer.value?.source || movie.value?.source || route.query.source || 'ophim'))
const activeSourceSlug = computed(() => String(activeServer.value?.sourceSlug || movie.value?.slug || route.params.slug))
const activeSourceServerIndex = computed(() => Number(activeServer.value?.sourceServerIndex ?? 0))
const sourceOptions = computed(() =>
(movie.value?.sources || [{ source: activeSource.value, slug: activeSourceSlug.value }])
.map((source: any) => ({
label: String(source.source || '').toUpperCase(),
value: source.source,
slug: source.slug,
}))
.filter((source: any) => source.value && source.slug),
)
const actors = computed(() => movie.value?.actors ?? [])
const actorSummary = computed(() => actors.value.map((actor: any) => actor.name).filter(Boolean).slice(0, 6).join(', '))
const firstWatchLink = computed(() => ({
path: `/xem/${route.params.slug}`,
path: `/xem/${activeSourceSlug.value}`,
query: {
source: activeSource.value,
server: selectedServer.value,
srcs: requestedSources.value || undefined,
server: activeSourceServerIndex.value,
ep: 1,
},
}))
@@ -48,7 +57,7 @@ const libraryItem = computed(() => {
return {
source: activeSource.value,
slug: String(route.params.slug),
slug: activeSourceSlug.value,
name: movie.value.name,
originName: movie.value.originName,
thumb: movie.value.thumb,
@@ -59,22 +68,32 @@ const libraryItem = computed(() => {
function episodeLink(index: number) {
return {
path: `/xem/${route.params.slug}`,
path: `/xem/${activeSourceSlug.value}`,
query: {
source: activeSource.value,
server: selectedServer.value,
srcs: requestedSources.value || undefined,
server: activeSourceServerIndex.value,
ep: index + 1,
},
}
}
function sourceLink(source: string) {
const ref = sourceOptions.value.find((item: any) => item.value === source)
return {
path: `/phim/${route.params.slug}`,
query: { source },
path: `/phim/${ref?.slug || route.params.slug}`,
query: {
source,
srcs: requestedSources.value || undefined,
},
}
}
function serverLabel(server: any, index: number) {
const label = String(server?.name || '').replace(/^(ophim|nguonc|kkphim)\s*-\s*/i, '').trim()
return label || `Server ${index + 1}`
}
function formatEpisodeName(name: string, index: number) {
const label = String(name || index + 1).trim()
return /^\d+$/.test(label) ? `Tập ${label}` : label
@@ -153,6 +172,10 @@ watch(requestedSource, () => {
selectedServer.value = 0
})
watch(requestedSources, () => {
selectedServer.value = 0
})
watch([libraryItem, user], () => {
refreshFavoriteState()
})
@@ -278,7 +301,7 @@ useHead(() => ({
</div>
<div class="flex flex-col gap-3 sm:items-end">
<div class="flex items-center justify-center gap-2 sm:justify-end">
<div class="hidden">
<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"
@@ -338,7 +361,7 @@ useHead(() => ({
class="shrink-0 rounded px-4 py-2 text-sm font-black"
:class="selectedServer === index ? 'bg-emerald-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'"
@click="selectedServer = index">
{{ server.name }}
{{ serverLabel(server, index) }}
</button>
</div>
app/pages/phim/index.vue
+22 -21
View File
@@ -8,7 +8,6 @@ const page = ref(Math.max(Number(route.query.page || 1), 1))
const keyword = ref(typeof route.query.q === 'string' ? route.query.q : '')
const debouncedKeyword = ref(keyword.value.trim())
const type = ref(typeof route.query.type === 'string' ? route.query.type : 'all')
const source = ref(typeof route.query.source === 'string' ? route.query.source : 'all')
const sourceOptions = [
{ label: 'Tất cả API', value: 'all' },
{ label: 'OPhim', value: 'ophim' },
@@ -30,17 +29,12 @@ watch(type, () => {
page.value = 1
})
watch(source, () => {
page.value = 1
})
watch([page, debouncedKeyword, type, source], () => {
watch([page, debouncedKeyword, type], () => {
router.replace({
query: {
page: page.value > 1 ? page.value : undefined,
q: debouncedKeyword.value || undefined,
type: type.value !== 'all' ? type.value : undefined,
source: source.value !== 'all' ? source.value : undefined,
},
})
})
@@ -49,7 +43,6 @@ const { data, pending, error } = await useFetch('/api/movies', {
query: computed(() => ({
page: page.value,
keyword: debouncedKeyword.value || undefined,
source: source.value !== 'all' ? source.value : undefined,
})),
})
@@ -68,6 +61,23 @@ const filteredMovies = computed(() => {
const totalPages = computed(() => Number(data.value?.pagination?.totalPages || data.value?.pagination?.total_pages || 0))
const sourceStatus = computed(() => data.value?.sources ?? [])
function movieSourcesQuery(movie: any) {
return (movie.sources || [{ source: movie.source, slug: movie.slug }])
.filter((source: any) => source.source && source.slug)
.map((source: any) => `${source.source}:${source.slug}`)
.join(',')
}
function movieLink(movie: any) {
return {
path: `/phim/${movie.slug}`,
query: {
source: movie.source,
srcs: movieSourcesQuery(movie),
},
}
}
function nextPage() {
page.value += 1
window.scrollTo({ top: 0, behavior: 'smooth' })
@@ -132,16 +142,7 @@ useHead({
</div>
</div>
<div class="mb-6 flex flex-wrap gap-2 text-sm font-black text-slate-200">
<button v-for="option in sourceOptions" :key="option.value" type="button"
class="rounded-full border border-white/10 px-4 py-2 transition"
:class="source === option.value ? 'bg-emerald-300 text-slate-950' : 'bg-white/8 hover:bg-white/14 hover:text-white'"
@click="source = option.value">
{{ option.label }}
</button>
</div>
<div v-if="sourceStatus.length" class="mb-8 flex flex-wrap gap-2 text-xs text-slate-300">
<div v-if="sourceStatus.length" class="hidden">
<span v-for="source in sourceStatus" :key="source.name"
class="rounded-full border border-white/10 bg-white/8 px-3 py-1">
{{ source.name }}: {{ source.ok ? 'sẵn sàng' : 'đang bị chặn' }}
@@ -158,7 +159,7 @@ useHead({
<div v-else class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6">
<NuxtLink v-for="movie in filteredMovies" :key="`${movie.source}-${movie.slug}`"
:to="{ path: `/phim/${movie.slug}`, query: { source: movie.source } }" class="group">
:to="movieLink(movie)" class="group">
<div
class="relative aspect-2/3 overflow-hidden rounded-md bg-slate-900 shadow-xl shadow-black/25 ring-1 ring-white/10 transition duration-300 group-hover:-translate-y-1 group-hover:ring-emerald-300/60">
<img :src="movie.thumb || movie.poster" :alt="movie.name"
@@ -167,8 +168,8 @@ useHead({
<p class="line-clamp-2 text-sm font-bold leading-snug text-white">{{ movie.name }}</p>
<p class="mt-1 truncate text-xs text-emerald-100">{{ movie.episode || movie.year || movie.quality }}</p>
</div>
<span class="absolute left-2 top-2 rounded bg-emerald-400 px-2 py-1 text-xs font-black text-slate-950">
{{ movie.source }}
<span v-if="movie.sources?.length > 1" class="absolute left-2 top-2 rounded bg-emerald-400 px-2 py-1 text-xs font-black text-slate-950">
{{ movie.sources.length }} server
</span>
</div>
</NuxtLink>
app/pages/xem/[slug].vue
+589 -78
View File
@@ -4,6 +4,7 @@ import {
FastForward,
Heart,
Loader2,
Menu,
Maximize,
Pause,
PictureInPicture2,
@@ -22,6 +23,7 @@ const route = useRoute()
const selectedServer = ref(Math.max(Number(route.query.server || 0), 0))
const selectedEpisode = ref(Math.max(Number(route.query.ep || 1) - 1, 0))
const hasStarted = ref(false)
const hasManualPlayerMode = ref(false)
const isFavoriteMovie = ref(false)
const actionMessage = ref('')
const actionBusy = ref(false)
@@ -41,11 +43,24 @@ const qualityLevels = ref<{ label: string, level: number }[]>([])
const isSettingsOpen = ref(false)
const hlsErrorMessage = ref('')
const controlsVisible = ref(true)
const isHlsFullscreen = ref(false)
const edgeProgressVisible = ref(false)
const gestureHint = ref('')
const isHoldSpeedActive = ref(false)
const pendingResumeSeconds = ref(0)
let controlsHideTimer: ReturnType<typeof setTimeout> | undefined
let edgeProgressTimer: ReturnType<typeof setTimeout> | undefined
let singleTapTimer: ReturnType<typeof setTimeout> | undefined
let holdSpeedTimer: ReturnType<typeof setTimeout> | undefined
let hlsFallbackTimer: ReturnType<typeof setTimeout> | undefined
let touchStartX = 0
let touchStartY = 0
let touchStartAt = 0
let lastTapAt = 0
let lastTapX = 0
let holdRestoreRate = 1
let ignoreNextTap = false
let hlsFatalRetryCount = 0
let hlsPlayer: Hls | undefined
let progressTimer: ReturnType<typeof setInterval> | undefined
let lastSavedProgress = 0
@@ -61,10 +76,12 @@ const {
saveWatchLater,
} = useMovieLibrary()
const { data: movie, pending, error } = await useFetch(`/api/movies/${route.params.slug}`, {
query: {
const { data: movie, pending, error } = await useFetch(() => `/api/movies/${route.params.slug}`, {
query: computed(() => ({
source: route.query.source,
},
srcs: route.query.srcs,
})),
watch: [() => route.query.source, () => route.query.srcs],
})
const servers = computed(() => movie.value?.servers ?? [])
@@ -82,6 +99,7 @@ const progressPercent = computed(() => {
if (!durationSeconds.value || !progressSeconds.value) return 0
return Math.min(Math.max((progressSeconds.value / durationSeconds.value) * 100, 0), 100)
})
const shouldShowHlsControls = computed(() => (controlsVisible.value || !isVideoPlaying.value) && !(isHlsFullscreen.value && edgeProgressVisible.value && isVideoPlaying.value))
const skipIntroSeconds = 85
const skipOutroSeconds = computed(() => Math.max((durationSeconds.value || 0) - 85, 0))
const libraryItem = computed(() => {
@@ -98,23 +116,65 @@ const libraryItem = computed(() => {
}
})
function formatEpisodeName(name?: string, index = 0) {
const value = String(name || index + 1).trim()
if (!value) return `Tập ${index + 1}`
if (/^(tập|tap|episode|ep)\b/i.test(value)) return value
return `Tập ${value}`
}
function serverLabel(server: any, index: number) {
const source = String(server?.source || '').toUpperCase()
const name = String(server?.name || '').replace(/^(ophim|nguonc|kkphim)\s*-\s*/i, '').trim()
const sameSourceServers = servers.value.filter((item: any) => item.source === server?.source)
const sourceServerNumber = sameSourceServers.findIndex((item: any) => item === server) + 1
if (source && sameSourceServers.length > 1) return `${source} #${sourceServerNumber || index + 1}`
if (source) return source
return name || `Server ${index + 1}`
}
function episodeLink(index: number) {
return {
path: `/xem/${route.params.slug}`,
query: {
source: route.query.source,
srcs: route.query.srcs,
server: selectedServer.value,
ep: index + 1,
},
}
}
function selectServer(index: number) {
function episodeIndexForServer(serverIndex: number, episodeIndex = selectedEpisode.value) {
const episodeCount = servers.value[serverIndex]?.episodes?.length || 0
if (!episodeCount) return 0
return Math.min(Math.max(episodeIndex, 0), episodeCount - 1)
}
async function selectServer(index: number) {
if (index === selectedServer.value) return
const shouldAutoplay = hasStarted.value
const nextEpisodeIndex = episodeIndexForServer(index)
selectedServer.value = index
selectedEpisode.value = 0
selectedEpisode.value = nextEpisodeIndex
hasStarted.value = false
hasManualPlayerMode.value = false
resetProgressTimer()
destroyHlsPlayer()
choosePreferredPlayerMode(true)
await navigateTo({
path: `/xem/${route.params.slug}`,
query: {
...route.query,
server: index,
ep: nextEpisodeIndex + 1,
},
}, { replace: true })
if (shouldAutoplay) {
nextTick(() => startPlayer())
}
}
async function startPlayer() {
@@ -131,6 +191,7 @@ async function startPlayer() {
function selectPlayerMode(mode: 'embed' | 'hls') {
if (mode === playerMode.value) return
hasManualPlayerMode.value = true
playerMode.value = mode
isSettingsOpen.value = false
hasStarted.value = false
@@ -138,6 +199,11 @@ function selectPlayerMode(mode: 'embed' | 'hls') {
destroyHlsPlayer()
}
function choosePreferredPlayerMode(force = false) {
if (!force && hasManualPlayerMode.value) return
playerMode.value = canUseHls.value ? 'hls' : 'embed'
}
function parseDurationSeconds(value: string) {
const normalizedValue = value.toLowerCase()
const hourMatch = normalizedValue.match(/(\d+)\s*(?:h|giờ|gio)/)
@@ -158,6 +224,7 @@ function resetProgressTimer() {
hlsErrorMessage.value = ''
pendingResumeSeconds.value = 0
lastSavedProgress = 0
clearHlsFallbackTimer()
stopProgressTimer()
}
@@ -233,6 +300,54 @@ function showControlsTemporarily() {
}, 2600)
}
function showFullscreenProgressOnly() {
if (!isHlsFullscreen.value) return
edgeProgressVisible.value = true
controlsVisible.value = false
if (edgeProgressTimer) clearTimeout(edgeProgressTimer)
edgeProgressTimer = setTimeout(() => {
edgeProgressVisible.value = false
}, 1400)
}
function clearHlsFallbackTimer() {
if (!hlsFallbackTimer) return
clearTimeout(hlsFallbackTimer)
hlsFallbackTimer = undefined
}
function scheduleHlsFallback(message = 'HLS phản hồi chậm, đang chuyển sang chế độ Nhúng...') {
if (!canUseEmbed.value) return
clearHlsFallbackTimer()
hlsFallbackTimer = setTimeout(() => {
fallbackToEmbed(message)
}, 12000)
}
function fallbackToEmbed(message = 'HLS đang lỗi, đã chuyển sang chế độ Nhúng.') {
clearHlsFallbackTimer()
if (!canUseEmbed.value) {
hlsErrorMessage.value = 'HLS đang lỗi và phim này chưa có link Nhúng ở server này.'
isVideoBuffering.value = false
return
}
hlsErrorMessage.value = ''
isVideoBuffering.value = false
isVideoPlaying.value = false
isSettingsOpen.value = false
playerMode.value = 'embed'
destroyHlsPlayer()
flashActionMessage(message)
}
function flashGestureHint(message: string) {
gestureHint.value = message
window.setTimeout(() => {
if (gestureHint.value === message) gestureHint.value = ''
}, 650)
}
function formatPlayerTime(seconds = 0) {
const totalSeconds = Math.max(Math.floor(seconds), 0)
const hours = Math.floor(totalSeconds / 3600)
@@ -250,6 +365,7 @@ async function setupHlsPlayer(autoplay = false) {
if (!import.meta.client || !videoRef.value || !hlsPlayerUrl.value) return
destroyHlsPlayer()
hlsFatalRetryCount = 0
const video = videoRef.value
isVideoBuffering.value = true
@@ -260,9 +376,15 @@ async function setupHlsPlayer(autoplay = false) {
if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = hlsPlayerUrl.value
scheduleHlsFallback()
} else {
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
@@ -273,6 +395,7 @@ async function setupHlsPlayer(autoplay = false) {
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`,
@@ -285,6 +408,12 @@ async function setupHlsPlayer(autoplay = false) {
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.')
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()
@@ -297,6 +426,7 @@ async function setupHlsPlayer(autoplay = false) {
})
hlsPlayer.loadSource(hlsPlayerUrl.value)
hlsPlayer.attachMedia(video)
scheduleHlsFallback()
}
if (autoplay) {
@@ -304,11 +434,14 @@ async function setupHlsPlayer(autoplay = false) {
await video.play()
} catch {
isVideoPlaying.value = false
fallbackToEmbed('HLS chưa phát được, đã chuyển sang chế độ Nhúng.')
}
}
}
function destroyHlsPlayer() {
clearHlsFallbackTimer()
if (hlsPlayer) {
hlsPlayer.destroy()
hlsPlayer = undefined
@@ -334,11 +467,31 @@ function updateVideoTime() {
}
function updateVideoMetadata() {
clearHlsFallbackTimer()
updateVideoTime()
applyResumeProgress()
isVideoBuffering.value = false
}
function handleVideoCanPlay() {
clearHlsFallbackTimer()
isVideoBuffering.value = false
}
function handleVideoWaiting() {
isVideoBuffering.value = true
scheduleHlsFallback('HLS bị đứng quá lâu, đã chuyển sang chế độ Nhúng.')
}
function handleVideoPlaying() {
clearHlsFallbackTimer()
isVideoBuffering.value = false
}
function handleVideoError() {
fallbackToEmbed('HLS phát lỗi, đã chuyển sang chế độ Nhúng.')
}
async function loadResumeProgress() {
if (!import.meta.client || !movie.value) return
@@ -380,7 +533,11 @@ function seekBy(seconds: number) {
const nextTime = Math.min(Math.max((videoRef.value.currentTime || 0) + seconds, 0), durationSeconds.value || Number.MAX_SAFE_INTEGER)
videoRef.value.currentTime = nextTime
updateVideoTime()
if (isHlsFullscreen.value) {
showFullscreenProgressOnly()
} else {
showControlsTemporarily()
}
saveWatchHistory()
}
@@ -389,6 +546,7 @@ function seekHlsPlayer(event: Event) {
const value = Number((event.target as HTMLInputElement).value)
videoRef.value.currentTime = value
updateVideoTime()
if (isHlsFullscreen.value) showFullscreenProgressOnly()
saveWatchHistory()
}
@@ -421,14 +579,52 @@ function changeQuality(event: Event) {
showControlsTemporarily()
}
function toggleFullscreen() {
const target = videoRef.value?.parentElement
if (!target) return
if (document.fullscreenElement) {
document.exitFullscreen()
} else {
target.requestFullscreen()
async function toggleFullscreen() {
if (!import.meta.client || !videoRef.value) return
const video = videoRef.value as HTMLVideoElement & {
webkitEnterFullscreen?: () => void
webkitRequestFullscreen?: () => Promise<void> | void
}
const target = (playerShellRef.value || video.parentElement || video) as HTMLElement & {
webkitRequestFullscreen?: () => Promise<void> | void
}
const documentWithWebkit = document as Document & {
webkitFullscreenElement?: Element | null
webkitExitFullscreen?: () => Promise<void> | void
}
try {
if (document.fullscreenElement || documentWithWebkit.webkitFullscreenElement) {
if (document.exitFullscreen) await document.exitFullscreen()
else await documentWithWebkit.webkitExitFullscreen?.()
return
}
if (target.requestFullscreen) {
await target.requestFullscreen()
return
}
if (target.webkitRequestFullscreen) {
await target.webkitRequestFullscreen()
return
}
video.webkitEnterFullscreen?.()
} catch {
video.webkitEnterFullscreen?.()
}
}
function updateFullscreenState() {
if (!import.meta.client) return
const documentWithWebkit = document as Document & {
webkitFullscreenElement?: Element | null
}
const fullscreenElement = document.fullscreenElement || documentWithWebkit.webkitFullscreenElement
isHlsFullscreen.value = Boolean(fullscreenElement && playerShellRef.value?.contains(fullscreenElement))
if (!isHlsFullscreen.value) edgeProgressVisible.value = false
}
async function togglePictureInPicture() {
@@ -472,6 +668,71 @@ function handleVideoEnded() {
playNextEpisode(true)
}
function seekByTapPosition(clientX: number) {
const rect = playerShellRef.value?.getBoundingClientRect()
const centerX = rect ? rect.left + rect.width / 2 : window.innerWidth / 2
const seconds = clientX < centerX ? -10 : 10
seekBy(seconds)
flashGestureHint(seconds > 0 ? '+10s' : '-10s')
}
function handlePlayerPointerDown() {
if (!videoRef.value) return
if (holdSpeedTimer) clearTimeout(holdSpeedTimer)
holdSpeedTimer = setTimeout(() => {
if (!videoRef.value) return
holdRestoreRate = videoRef.value.playbackRate || playbackRate.value || 1
videoRef.value.playbackRate = 2
isHoldSpeedActive.value = true
ignoreNextTap = true
flashGestureHint('2x')
if (isHlsFullscreen.value) showFullscreenProgressOnly()
}, 420)
}
function stopHoldSpeed() {
if (holdSpeedTimer) {
clearTimeout(holdSpeedTimer)
holdSpeedTimer = undefined
}
if (!isHoldSpeedActive.value) return
if (videoRef.value) videoRef.value.playbackRate = playbackRate.value || holdRestoreRate || 1
isHoldSpeedActive.value = false
window.setTimeout(() => {
ignoreNextTap = false
}, 80)
}
function handlePlayerTap(event: MouseEvent) {
if (ignoreNextTap) {
ignoreNextTap = false
return
}
const now = Date.now()
const tapX = event.clientX
const isDoubleTap = now - lastTapAt < 280 && Math.abs(tapX - lastTapX) < 90
if (isDoubleTap) {
if (singleTapTimer) {
clearTimeout(singleTapTimer)
singleTapTimer = undefined
}
lastTapAt = 0
seekByTapPosition(tapX)
return
}
lastTapAt = now
lastTapX = tapX
if (singleTapTimer) clearTimeout(singleTapTimer)
singleTapTimer = setTimeout(() => {
toggleHlsPlayback()
singleTapTimer = undefined
}, 260)
}
function handleTouchStart(event: TouchEvent) {
const touch = event.touches[0]
touchStartX = touch.clientX
@@ -488,6 +749,7 @@ function handleTouchEnd(event: TouchEvent) {
if (Math.abs(deltaX) > 48 && Math.abs(deltaX) > Math.abs(deltaY) && elapsed < 700) {
seekBy(deltaX > 0 ? 10 : -10)
flashGestureHint(deltaX > 0 ? '+10s' : '-10s')
return
}
@@ -583,32 +845,43 @@ onMounted(async () => {
await refreshFavoriteState()
document.addEventListener('visibilitychange', handleVisibilityChange)
document.addEventListener('keydown', handleKeyboardShortcut)
document.addEventListener('fullscreenchange', updateFullscreenState)
document.addEventListener('webkitfullscreenchange', updateFullscreenState)
})
onBeforeUnmount(() => {
if (hasStarted.value) saveWatchHistory()
stopProgressTimer()
if (controlsHideTimer) clearTimeout(controlsHideTimer)
if (edgeProgressTimer) clearTimeout(edgeProgressTimer)
if (singleTapTimer) clearTimeout(singleTapTimer)
if (holdSpeedTimer) clearTimeout(holdSpeedTimer)
clearHlsFallbackTimer()
destroyHlsPlayer()
if (import.meta.client) document.removeEventListener('visibilitychange', handleVisibilityChange)
if (import.meta.client) document.removeEventListener('keydown', handleKeyboardShortcut)
if (import.meta.client) document.removeEventListener('fullscreenchange', updateFullscreenState)
if (import.meta.client) document.removeEventListener('webkitfullscreenchange', updateFullscreenState)
})
watch(() => route.query, () => {
selectedServer.value = Math.max(Number(route.query.server || 0), 0)
selectedEpisode.value = Math.max(Number(route.query.ep || 1) - 1, 0)
hasStarted.value = false
hasManualPlayerMode.value = false
resetProgressTimer()
destroyHlsPlayer()
choosePreferredPlayerMode(true)
})
watch([movie, activeEpisode], () => {
if (hasStarted.value) saveWatchHistory()
hasManualPlayerMode.value = false
choosePreferredPlayerMode(true)
})
watch([canUseEmbed, canUseHls], () => {
if (!canUseHls.value && playerMode.value === 'hls') playerMode.value = 'embed'
if (!canUseEmbed.value && canUseHls.value) playerMode.value = 'hls'
choosePreferredPlayerMode()
}, {
immediate: true,
})
@@ -645,13 +918,14 @@ useHead(() => ({
<template v-else>
<section class="mx-auto max-w-390 px-3 pb-16 pt-24 sm:px-6 sm:pt-36 lg:px-8 lg:pt-28 xl:px-10">
<NuxtLink :to="{ path: `/phim/${route.params.slug}`, query: { source: route.query.source } }"
<NuxtLink :to="{ path: `/phim/${route.params.slug}`, query: { source: route.query.source, srcs: route.query.srcs } }"
class="text-sm font-bold text-slate-100 hover:text-emerald-200">
‹ Chi tiết phim
</NuxtLink>
<div class="mt-4 overflow-hidden rounded-md border border-white/10 bg-black shadow-2xl shadow-black/40">
<div class="grid grid-cols-2 gap-2 border-b border-white/10 bg-slate-950/92 p-2 sm:hidden">
<div class="border-b border-white/10 bg-slate-950/92 p-2 sm:hidden">
<div class="grid grid-cols-2 gap-2">
<button type="button"
class="rounded-md px-3 py-2 text-sm font-black transition disabled:cursor-not-allowed disabled:opacity-40"
:class="playerMode === 'embed' ? 'bg-emerald-400 text-slate-950' : 'bg-white/10 text-slate-100'"
@@ -666,6 +940,16 @@ useHead(() => ({
</button>
</div>
<div v-if="servers.length > 1" class="no-scrollbar mt-2 flex gap-2 overflow-x-auto">
<button v-for="(server, index) in servers" :key="`${server.name}-${index}-mobile-player`" type="button"
class="shrink-0 rounded-md px-3 py-2 text-xs font-black transition"
:class="selectedServer === index ? 'bg-emerald-400 text-slate-950' : 'bg-white/10 text-slate-100'"
@click="selectServer(index)">
{{ serverLabel(server, index) }}
</button>
</div>
</div>
<div class="relative aspect-video bg-slate-950">
<div
class="absolute left-3 top-3 z-20 hidden rounded-md border border-white/10 bg-black/65 p-1 text-xs font-black text-white backdrop-blur sm:inline-flex">
@@ -681,6 +965,18 @@ useHead(() => ({
</button>
</div>
<div v-if="servers.length > 1"
class="absolute right-3 top-3 z-20 hidden max-w-[48%] rounded-md border border-white/10 bg-black/65 p-1 text-xs font-black text-white backdrop-blur sm:flex">
<div class="no-scrollbar flex max-w-full gap-1 overflow-x-auto">
<button v-for="(server, index) in servers" :key="`${server.name}-${index}-player`" type="button"
class="shrink-0 rounded px-3 py-1.5 transition"
:class="selectedServer === index ? 'bg-emerald-400 text-slate-950' : 'text-slate-200 hover:bg-white/10'"
@click="selectServer(index)">
{{ serverLabel(server, index) }}
</button>
</div>
</div>
<iframe v-if="playerMode === 'embed' && playerUrl && hasStarted" :src="playerUrl"
:title="`${movie.name} - ${activeEpisode?.name || 'Tập phim'}`" class="h-full w-full"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -691,9 +987,10 @@ useHead(() => ({
@touchend.passive="handleTouchEnd">
<video ref="videoRef" class="h-full w-full bg-black object-contain" playsinline
@loadedmetadata="updateVideoMetadata" @timeupdate="updateVideoTime"
@canplay="isVideoBuffering = false" @waiting="isVideoBuffering = true"
@playing="isVideoBuffering = false" @play="isVideoPlaying = true; showControlsTemporarily()"
@pause="isVideoPlaying = false; controlsVisible = true" @ended="handleVideoEnded" />
@canplay="handleVideoCanPlay" @waiting="handleVideoWaiting"
@playing="handleVideoPlaying" @play="isVideoPlaying = true; showControlsTemporarily()"
@pause="isVideoPlaying = false; controlsVisible = true" @ended="handleVideoEnded"
@error="handleVideoError" />
<div class="pointer-events-none absolute inset-0 bg-linear-to-t from-black/70 via-transparent to-black/35" />
@@ -722,7 +1019,9 @@ useHead(() => ({
<button type="button"
class="absolute inset-0 grid cursor-pointer place-items-center text-white transition"
:class="isVideoPlaying && !controlsVisible ? 'opacity-0' : 'opacity-100'"
:aria-label="isVideoPlaying ? 'Tạm dừng' : 'Phát phim'" @click="toggleHlsPlayback">
:aria-label="isVideoPlaying ? 'Tạm dừng' : 'Phát phim'" @click="handlePlayerTap"
@pointerdown="handlePlayerPointerDown" @pointerup="stopHoldSpeed" @pointercancel="stopHoldSpeed"
@pointerleave="stopHoldSpeed" @contextmenu.prevent>
<span
class="grid size-12 place-items-center rounded-full bg-emerald-400 text-slate-950 shadow-xl shadow-emerald-950/30 sm:size-16">
<Pause v-if="isVideoPlaying" class="size-5 fill-current sm:size-7" />
@@ -730,48 +1029,57 @@ useHead(() => ({
</span>
</button>
<div class="absolute inset-x-0 bottom-0 z-10 px-3 pb-3 text-white transition sm:px-4 sm:pb-4"
:class="controlsVisible || !isVideoPlaying ? 'opacity-100' : 'pointer-events-none opacity-0'">
<input class="kr-hls-range w-full cursor-pointer" type="range" min="0" :max="durationSeconds || 0"
:value="videoCurrentTime" step="1" @input="seekHlsPlayer">
<div class="mt-2 flex items-center justify-between gap-2 sm:mt-3 sm:gap-3">
<div class="flex min-w-0 items-center gap-1.5 sm:gap-3">
<button type="button"
class="grid size-8 cursor-pointer place-items-center rounded-full bg-white/12 text-white transition hover:bg-emerald-400 hover:text-slate-950 sm:size-9"
:aria-label="isVideoPlaying ? 'Tạm dừng' : 'Phát phim'" @click="toggleHlsPlayback">
<Pause v-if="isVideoPlaying" class="size-3.5 fill-current sm:size-4" />
<Play v-else class="size-3.5 fill-current sm:size-4" />
</button>
<button type="button"
class="grid size-8 cursor-pointer place-items-center rounded-full bg-white/12 text-white transition hover:bg-emerald-400 hover:text-slate-950 sm:size-9"
aria-label="Lùi 10 giây" @click="seekBy(-10)">
<Rewind class="size-3.5 sm:size-4" />
</button>
<button type="button"
class="grid size-8 cursor-pointer place-items-center rounded-full bg-white/12 text-white transition hover:bg-emerald-400 hover:text-slate-950 sm:size-9"
aria-label="Tua 10 giây" @click="seekBy(10)">
<FastForward class="size-3.5 sm:size-4" />
</button>
<button type="button"
class="grid size-8 cursor-pointer place-items-center rounded-full bg-white/12 text-white transition hover:bg-emerald-400 hover:text-slate-950 sm:size-9"
:aria-label="isVideoMuted ? 'Bật âm' : 'Tắt âm'" @click="toggleMute">
<VolumeX v-if="isVideoMuted" class="size-3.5 sm:size-4" />
<Volume2 v-else class="size-3.5 sm:size-4" />
</button>
<input class="kr-volume-range hidden w-20 cursor-pointer sm:block" type="range" min="0" max="1"
step="0.05" :value="videoVolume" @input="changeVolume">
<span class="shrink-0 text-[11px] font-black text-slate-100 sm:text-xs">
{{ formatPlayerTime(videoCurrentTime) }} / {{ formatPlayerTime(durationSeconds) }}
</span>
<div v-if="gestureHint || isHoldSpeedActive"
class="pointer-events-none absolute left-1/2 top-1/2 z-20 -translate-x-1/2 -translate-y-1/2 rounded-full bg-black/55 px-4 py-2 text-sm font-black text-white shadow-2xl backdrop-blur">
{{ isHoldSpeedActive ? '2x' : gestureHint }}
</div>
<div class="flex shrink-0 items-center gap-1.5 sm:gap-2">
<div class="kr-hls-edge-progress"
:class="edgeProgressVisible || (isHlsFullscreen && !shouldShowHlsControls) ? 'opacity-100' : 'opacity-0'" />
<div class="kr-hls-controls text-white transition"
:class="shouldShowHlsControls ? 'opacity-100' : 'pointer-events-none opacity-0'">
<div class="kr-hls-time-row">
<span>{{ formatPlayerTime(videoCurrentTime) }}</span>
<span>{{ formatPlayerTime(durationSeconds) }}</span>
</div>
<input class="kr-hls-range" type="range" min="0" :max="durationSeconds || 0"
:value="videoCurrentTime" step="1" @input="seekHlsPlayer">
<div class="kr-hls-actions">
<div class="kr-hls-actions-left">
<button type="button"
class="kr-hls-control-button is-primary"
:aria-label="isVideoPlaying ? 'Tạm dừng' : 'Phát phim'" @click="toggleHlsPlayback">
<Pause v-if="isVideoPlaying" class="fill-current" />
<Play v-else class="fill-current" />
</button>
<button type="button"
class="kr-hls-control-button"
aria-label="Lùi 10 giây" @click="seekBy(-10)">
<Rewind />
</button>
<button type="button"
class="kr-hls-control-button"
aria-label="Tua 10 giây" @click="seekBy(10)">
<FastForward />
</button>
<button type="button"
class="kr-hls-control-button"
:aria-label="isVideoMuted ? 'Bật âm' : 'Tắt âm'" @click="toggleMute">
<VolumeX v-if="isVideoMuted" />
<Volume2 v-else />
</button>
<input class="kr-volume-range hidden sm:block" type="range" min="0" max="1"
step="0.05" :value="videoVolume" @input="changeVolume">
</div>
<div class="kr-hls-actions-right">
<div class="relative">
<button type="button"
class="grid size-8 cursor-pointer place-items-center rounded-full bg-white/12 text-white transition hover:bg-emerald-400 hover:text-slate-950 sm:size-9"
class="kr-hls-control-button"
:class="isSettingsOpen ? 'bg-emerald-400 text-slate-950' : ''" aria-label="Cài đặt player"
@click="isSettingsOpen = !isSettingsOpen; controlsVisible = true">
<Settings class="size-3.5 sm:size-4" />
<Settings />
</button>
<div v-if="isSettingsOpen"
@@ -804,19 +1112,19 @@ useHead(() => ({
</div>
</div>
<button type="button"
class="hidden size-9 cursor-pointer place-items-center rounded-full bg-white/12 text-white transition hover:bg-emerald-400 hover:text-slate-950 sm:grid"
class="kr-hls-control-button kr-hls-desktop-button"
aria-label="Picture in Picture" @click="togglePictureInPicture">
<PictureInPicture2 class="size-4" />
<PictureInPicture2 />
</button>
<button v-if="hasNextEpisode" type="button"
class="hidden size-9 cursor-pointer place-items-center rounded-full bg-white/12 text-white transition hover:bg-emerald-400 hover:text-slate-950 sm:grid"
class="kr-hls-control-button kr-hls-desktop-button"
aria-label="Tập tiếp theo" @click="playNextEpisode(true)">
<SkipForward class="size-4" />
<SkipForward />
</button>
<button type="button"
class="grid size-8 cursor-pointer place-items-center rounded-full bg-white/12 text-white transition hover:bg-emerald-400 hover:text-slate-950 sm:size-9"
class="kr-hls-control-button"
aria-label="Toàn màn hình" @click="toggleFullscreen">
<Maximize class="size-3.5 sm:size-4" />
<Maximize />
</button>
</div>
</div>
@@ -889,28 +1197,79 @@ useHead(() => ({
<p v-if="movie.content" class="mt-4 text-sm leading-7 text-slate-200">{{ movie.content }}</p>
<div class="mt-5 rounded-md bg-emerald-400 px-4 py-3 text-sm font-black text-slate-950">
Đang xem {{ activeEpisode?.name || 'Tập 1' }}
Đang xem {{ formatEpisodeName(activeEpisode?.name, selectedEpisode) }}
</div>
<div v-if="servers.length > 1" class="mt-4 flex gap-2 overflow-x-auto pb-2">
<button v-for="(server, index) in servers" :key="server.name" type="button"
<div class="mt-6 border-t border-white/10 pt-4">
<div class="hidden">
<div>
<p class="text-xs font-black uppercase tracking-wide text-emerald-200">Chọn server</p>
<h2 class="mt-1 text-[1.08rem] font-black sm:text-xl">Danh sách tập</h2>
</div>
<p class="text-xs font-bold text-slate-400">
{{ serverLabel(activeServer, selectedServer) }}
</p>
</div>
<div v-if="servers.length > 1" class="hidden">
<button v-for="(server, index) in servers" :key="`${server.name}-${index}-episode-server`" type="button"
class="shrink-0 rounded px-4 py-2 text-sm font-black"
:class="selectedServer === index ? 'bg-emerald-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'"
@click="selectServer(index)">
{{ server.name }}
{{ serverLabel(server, index) }}
</button>
</div>
<div class="flex flex-col gap-3 lg:flex-row lg:items-center">
<div class="inline-flex shrink-0 items-center gap-3 text-white">
<Menu class="size-5 text-emerald-300" />
<button type="button"
class="inline-flex items-center gap-2 border-r border-white/15 pr-5 text-xl font-black">
Phần 1
<span class="text-xs text-slate-400">v</span>
</button>
</div>
<div v-if="servers.length > 1"
class="no-scrollbar flex min-w-0 flex-1 gap-2 overflow-x-auto pb-1 lg:pb-0">
<button v-for="(server, index) in servers" :key="`${server.name}-${index}-episode-server-pill`"
type="button"
class="inline-flex shrink-0 items-center gap-2 rounded-md border px-4 py-2 text-sm font-black transition"
:class="selectedServer === index ? 'border-white/35 bg-white/12 text-white' : 'border-transparent bg-transparent text-slate-300 hover:bg-white/8 hover:text-white'"
@click="selectServer(index)">
<span class="size-3 rounded-sm border border-current" aria-hidden="true" />
{{ serverLabel(server, index) }}
</button>
</div>
<div v-else class="text-sm font-bold text-slate-300">
{{ serverLabel(activeServer, selectedServer) }}
</div>
<div class="hidden shrink-0 items-center gap-2 text-xs font-bold text-slate-300 lg:flex">
<span>Rút gọn</span>
<span
class="relative inline-flex h-5 w-9 items-center rounded-full bg-emerald-400/18 ring-1 ring-emerald-300/35">
<span class="ml-auto mr-1 size-3 rounded-full bg-emerald-300" />
</span>
</div>
</div>
<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-4 lg:grid-cols-6">
class="mt-5 grid grid-cols-2 gap-2 sm:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
<NuxtLink v-for="(episode, index) in activeServer.episodes" :key="`${episode.name}-${index}`"
:to="episodeLink(index)"
class="inline-flex items-center justify-center gap-2 rounded-md px-3 py-3 text-center text-sm font-black transition"
class="inline-flex h-14 items-center justify-center gap-2 rounded-md px-3 text-center text-sm font-black transition"
:class="selectedEpisode === index ? 'bg-emerald-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'">
<Play class="size-3 fill-current" />
{{ episode.name }}
{{ formatEpisodeName(episode.name, index) }}
</NuxtLink>
</div>
<p v-else class="mt-4 rounded-md border border-white/10 bg-slate-900/70 p-4 text-sm text-slate-300">
Chưa có tập xem từ server này.
</p>
</div>
</section>
<aside class="hidden rounded-md border border-white/10 bg-white/5 p-5 sm:block lg:self-start">
@@ -931,38 +1290,190 @@ useHead(() => ({
</template>
<style scoped>
.kr-hls-controls {
position: absolute;
inset-inline: 0;
bottom: 0;
z-index: 10;
padding: 8px 14px 14px;
background: linear-gradient(180deg, transparent, rgb(0 0 0 / 0.78) 22%, rgb(0 0 0 / 0.92));
}
.kr-hls-time-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
color: white;
font-size: 12px;
font-weight: 800;
line-height: 1;
text-shadow: 0 1px 3px rgb(0 0 0 / 0.8);
}
.kr-hls-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-top: 12px;
}
.kr-hls-actions-left,
.kr-hls-actions-right {
display: flex;
min-width: 0;
align-items: center;
gap: 16px;
}
.kr-hls-actions-right {
flex-shrink: 0;
}
.kr-hls-control-button {
display: grid;
width: 28px;
height: 28px;
flex: 0 0 28px;
cursor: pointer;
place-items: center;
border: 0;
border-radius: 999px;
background: transparent;
color: white;
transition: color 0.16s ease, transform 0.16s ease;
}
.kr-hls-control-button:hover {
color: rgb(52 211 153);
transform: scale(1.08);
}
.kr-hls-control-button svg {
width: 18px;
height: 18px;
}
.kr-hls-control-button.is-primary {
width: 34px;
height: 34px;
flex-basis: 34px;
border: 2px solid white;
}
.kr-hls-control-button.is-primary svg {
width: 17px;
height: 17px;
}
.kr-hls-desktop-button {
display: grid;
}
.kr-hls-range,
.kr-volume-range {
height: 6px;
display: block;
width: 100%;
height: 4px;
appearance: none;
border-radius: 999px;
background:
linear-gradient(90deg, rgb(56 189 248) v-bind('`${progressPercent}%`'), rgb(255 255 255 / 0.22) 0);
linear-gradient(90deg, rgb(52 211 153) v-bind('`${progressPercent}%`'), rgb(255 255 255 / 0.18) 0);
cursor: pointer;
outline: none;
}
.kr-volume-range {
width: 112px;
height: 3px;
background:
linear-gradient(90deg, rgb(56 189 248) v-bind('`${videoVolume * 100}%`'), rgb(255 255 255 / 0.22) 0);
linear-gradient(90deg, white v-bind('`${videoVolume * 100}%`'), rgb(255 255 255 / 0.25) 0);
}
.kr-hls-range::-webkit-slider-thumb,
.kr-volume-range::-webkit-slider-thumb {
width: 14px;
height: 14px;
width: 10px;
height: 10px;
appearance: none;
border-radius: 999px;
background: white;
box-shadow: 0 0 0 5px rgb(56 189 248 / 0.22);
box-shadow: 0 0 0 3px rgb(52 211 153 / 0.22);
}
.kr-hls-range::-moz-range-thumb,
.kr-volume-range::-moz-range-thumb {
width: 14px;
height: 14px;
width: 10px;
height: 10px;
border: 0;
border-radius: 999px;
background: white;
box-shadow: 0 0 0 5px rgb(56 189 248 / 0.22);
box-shadow: 0 0 0 3px rgb(52 211 153 / 0.22);
}
.kr-volume-range::-webkit-slider-thumb {
width: 12px;
height: 12px;
box-shadow: none;
}
.kr-volume-range::-moz-range-thumb {
width: 12px;
height: 12px;
box-shadow: none;
}
.kr-hls-edge-progress {
position: absolute;
inset-inline: 0;
bottom: 0;
z-index: 12;
height: 4px;
pointer-events: none;
background:
linear-gradient(90deg, rgb(52 211 153) v-bind('`${progressPercent}%`'), rgb(255 255 255 / 0.24) 0);
transition: opacity 0.18s ease;
}
@media (max-width: 640px) {
.kr-hls-desktop-button {
display: none;
}
.kr-hls-controls {
padding: 6px 10px 10px;
}
.kr-hls-time-row {
margin-bottom: 6px;
font-size: 11px;
}
.kr-hls-actions {
gap: 8px;
margin-top: 9px;
}
.kr-hls-actions-left,
.kr-hls-actions-right {
gap: 8px;
}
.kr-hls-control-button {
width: 25px;
height: 25px;
flex-basis: 25px;
}
.kr-hls-control-button svg {
width: 15px;
height: 15px;
}
.kr-hls-control-button.is-primary {
width: 30px;
height: 30px;
flex-basis: 30px;
}
}
</style>
server/api/movies/[slug].get.ts
+8 -23
View File
@@ -1,33 +1,18 @@
import { getKkphimDetail, getNguoncDetail, getOphimDetail } from '../../utils/movies'
import { getMovieDetailGroup, parseSourceRefs } from '../../utils/movies'
export default defineEventHandler(async (event) => {
const slug = getRouterParam(event, 'slug')
const source = getQuery(event).source
const query = getQuery(event)
const source = query.source
if (!slug) {
throw createError({ statusCode: 400, statusMessage: 'Thiếu slug phim' })
}
const detailBySource = {
ophim: getOphimDetail,
nguonc: getNguoncDetail,
kkphim: getKkphimDetail,
}
const requestedSource = typeof source === 'string' && ['ophim', 'nguonc', 'kkphim'].includes(source)
? source as 'ophim' | 'nguonc' | 'kkphim'
: 'ophim'
const refs = parseSourceRefs(query.sources || query.srcs, requestedSource, slug)
const requestedSource = typeof source === 'string' && source in detailBySource ? source as keyof typeof detailBySource : 'ophim'
const orderedSources = [
requestedSource,
...Object.keys(detailBySource).filter((item) => item !== requestedSource) as Array<keyof typeof detailBySource>,
]
let lastError: unknown
for (const sourceName of orderedSources) {
try {
return await detailBySource[sourceName](slug)
} catch (error) {
lastError = error
}
}
throw lastError
return await getMovieDetailGroup(refs)
})
server/utils/movies.ts
+184 -8
View File
@@ -19,6 +19,13 @@ export interface NormalizedMovie {
updatedAt?: string
categories: string[]
countries: string[]
sources?: MovieSourceRef[]
}
export interface MovieSourceRef {
source: Source
slug: string
name?: string
}
export interface NormalizedEpisode {
@@ -30,6 +37,9 @@ export interface NormalizedEpisode {
export interface NormalizedServer {
name: string
source?: Source
sourceSlug?: string
sourceServerIndex?: number
episodes: NormalizedEpisode[]
}
@@ -121,6 +131,55 @@ function stripHtml(value?: string) {
.trim()
}
function comparableText(value?: string) {
return text(value)
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
.toLowerCase()
.replace(/[^a-z0-9]+/g, '-')
.replace(/^-+|-+$/g, '')
}
function compactTitleKey(value?: string) {
return comparableText(value)
.replace(/\b(vietsub|thuyet-minh|long-tieng|hd|full-hd|fhd|bluray|web-dl|webdl)\b/g, '')
.replace(/\b(phan|mua|season|part|ss|s)-?(\d+)\b/g, 's$2')
.replace(/\b(19|20)\d{2}\b/g, '')
.replace(/-{2,}/g, '-')
.replace(/^-+|-+$/g, '')
}
function movieTitleAliases(movie: NormalizedMovie) {
const aliases = new Set<string>()
const values = [
movie.originName,
movie.name,
movie.slug,
]
for (const value of values) {
const key = compactTitleKey(value)
if (!key || key.length < 3) continue
aliases.add(key)
const seriesLike = movie.type !== 'single' || !/^(full|hoan-tat)$/i.test(String(movie.episode || ''))
if (seriesLike) {
aliases.add(key.replace(/-(\d+)$/, '-s$1'))
aliases.add(key.replace(/-s(\d+)$/, '-$1'))
}
}
return [...aliases]
}
function movieSourceRef(movie: NormalizedMovie): MovieSourceRef {
return {
source: movie.source,
slug: movie.slug,
name: movie.name,
}
}
function isSource(value: unknown): value is Source {
return typeof value === 'string' && SOURCE_NAMES.includes(value as Source)
}
@@ -139,15 +198,70 @@ function interleaveMovies(groups: NormalizedMovie[][]) {
return interleaved
}
function uniqueMovies(items: NormalizedMovie[]) {
const seen = new Set<string>()
function groupMovies(items: NormalizedMovie[]) {
const groups = new Map<string, NormalizedMovie>()
const exactAliases = new Map<string, string>()
const looseAliases = new Map<string, string>()
const looseAliasCollisions = new Set<string>()
return items.filter((movie) => {
const key = `${movie.source}:${movie.slug || movie.name}`
if (seen.has(key)) return false
seen.add(key)
return true
function rememberLooseAlias(alias: string, groupKey: string) {
const existingGroupKey = looseAliases.get(alias)
if (!existingGroupKey) {
looseAliases.set(alias, groupKey)
return
}
if (existingGroupKey !== groupKey) {
looseAliasCollisions.add(alias)
}
}
for (const movie of items) {
const aliases = movieTitleAliases(movie)
const key = aliases[0]
const fallbackKey = `${movie.source}:${movie.slug || movie.name}`
const exactKeys = movie.year ? aliases.map((alias) => `${alias}:${movie.year}`) : []
const existingGroupKey = exactKeys
.map((alias) => exactAliases.get(alias))
.find(Boolean)
|| aliases
.map((alias) => looseAliasCollisions.has(alias) ? undefined : looseAliases.get(alias))
.find(Boolean)
const groupKey = existingGroupKey || (movie.year && key ? `${key}:${movie.year}` : key) || fallbackKey
const existing = groups.get(groupKey)
if (!existing) {
groups.set(groupKey, {
...movie,
sources: [movieSourceRef(movie)],
})
for (const alias of aliases) {
if (movie.year) exactAliases.set(`${alias}:${movie.year}`, groupKey)
rememberLooseAlias(alias, groupKey)
}
continue
}
if (!existing.sources?.some((source) => source.source === movie.source && source.slug === movie.slug)) {
existing.sources = [...(existing.sources || []), movieSourceRef(movie)]
}
existing.thumb ||= movie.thumb
existing.poster ||= movie.poster
existing.originName ||= movie.originName
existing.rating ||= movie.rating
existing.categories = [...new Set([...existing.categories, ...movie.categories])]
existing.countries = [...new Set([...existing.countries, ...movie.countries])]
existing.updatedAt = existing.updatedAt && movie.updatedAt
? (new Date(existing.updatedAt).getTime() > new Date(movie.updatedAt).getTime() ? existing.updatedAt : movie.updatedAt)
: existing.updatedAt || movie.updatedAt
for (const alias of aliases) {
if (movie.year) exactAliases.set(`${alias}:${movie.year}`, groupKey)
rememberLooseAlias(alias, groupKey)
}
}
return [...groups.values()]
}
function normalizeActor(actor: any): NormalizedActor | undefined {
@@ -333,7 +447,7 @@ export async function getKoreanMovies(page: number, keyword = '', source: Source
const resultGroups = results.map((result) => result.status === 'fulfilled' ? result.value.items : [])
const items = source === 'all' ? interleaveMovies(resultGroups) : resultGroups.flat()
const unique = uniqueMovies(items)
const unique = groupMovies(items)
const pagination = results.find((result) => result.status === 'fulfilled')?.value.pagination ?? {}
@@ -364,6 +478,8 @@ export async function getOphimDetail(slug: string): Promise<MovieDetail> {
trailer: text(movie?.trailer_url),
servers: toArray(data?.episodes ?? json?.episodes ?? movie?.episodes).map((server: any) => ({
name: text(server?.server_name, 'Server'),
source: 'ophim',
sourceSlug: normalized.slug,
episodes: toArray(server?.server_data).map((episode: any) => ({
name: text(episode?.name, 'Tập phim'),
slug: text(episode?.slug),
@@ -387,6 +503,8 @@ export async function getNguoncDetail(slug: string): Promise<MovieDetail> {
trailer: text(movie?.trailer_url || movie?.trailer),
servers: toArray(movie?.episodes ?? json?.episodes ?? json?.data?.episodes).map((server: any) => ({
name: text(server?.server_name || server?.name, 'Server'),
source: 'nguonc',
sourceSlug: normalized.slug,
episodes: toArray(server?.server_data ?? server?.items ?? server?.episodes).map((episode: any) => ({
name: text(episode?.name || episode?.title, 'Tập phim'),
slug: text(episode?.slug),
@@ -412,6 +530,8 @@ export async function getKkphimDetail(slug: string): Promise<MovieDetail> {
trailer: text(movie?.trailer_url),
servers: toArray(data?.episodes ?? json?.episodes ?? movie?.episodes).map((server: any) => ({
name: text(server?.server_name, 'Server'),
source: 'kkphim',
sourceSlug: normalized.slug,
episodes: toArray(server?.server_data).map((episode: any) => ({
name: text(episode?.name, 'Tập phim'),
slug: text(episode?.slug),
@@ -421,3 +541,59 @@ export async function getKkphimDetail(slug: string): Promise<MovieDetail> {
})),
}
}
export function parseSourceRefs(value: unknown, fallbackSource: Source, fallbackSlug: string): MovieSourceRef[] {
const refs = typeof value === 'string'
? value.split(',').map((item) => {
const [source, ...slugParts] = item.split(':')
const slug = slugParts.join(':')
return isSource(source) && slug ? { source, slug } : undefined
}).filter(Boolean) as MovieSourceRef[]
: []
if (refs.length) return refs
return [{ source: fallbackSource, slug: fallbackSlug }]
}
export async function getMovieDetailGroup(refs: MovieSourceRef[]): Promise<MovieDetail> {
const detailBySource = {
ophim: getOphimDetail,
nguonc: getNguoncDetail,
kkphim: getKkphimDetail,
}
const uniqueRefs = refs.filter((ref, index, allRefs) =>
index === allRefs.findIndex((item) => item.source === ref.source && item.slug === ref.slug),
)
const results = await Promise.allSettled(
uniqueRefs.map((ref) => detailBySource[ref.source](ref.slug)),
)
const details = results
.map((result) => result.status === 'fulfilled' ? result.value : null)
.filter(Boolean) as MovieDetail[]
if (!details.length) {
const firstRef = uniqueRefs[0]
return await detailBySource[firstRef.source](firstRef.slug)
}
const primary = details[0]
const sources = details.map(movieSourceRef)
const servers = details.flatMap((detail) =>
detail.servers.map((server, sourceServerIndex) => ({
...server,
name: `${detail.source.toUpperCase()} - ${server.name}`,
source: detail.source,
sourceSlug: detail.slug,
sourceServerIndex,
})),
)
return {
...primary,
sources,
servers,
actors: details.find((detail) => detail.actors.length)?.actors || primary.actors,
directors: details.find((detail) => detail.directors.length)?.directors || primary.directors,
content: details.find((detail) => detail.content && detail.content.length > primary.content.length)?.content || primary.content,
}
}