3ca43b62e4
- Updated docker-compose.yml to include environment variable support for services, enhancing flexibility in configuration. - Refactored Dockerfile to utilize build arguments for VITE environment variables, allowing for better customization during builds. - Improved Nginx configuration to handle larger video uploads by increasing client_max_body_size to 5GB. - Enhanced backend Dockerfile to include wget for health checks and improved startup logging for database migrations. - Added validation for critical environment variables in the backend to ensure necessary configurations are present before application startup. - Updated content streaming logic to support direct HLS URL construction, improving streaming reliability and user experience. - Refactored various components and services to streamline access checks and improve error handling during content playback.
928 lines
28 KiB
Vue
928 lines
28 KiB
Vue
<template>
|
|
<Transition name="player-fade">
|
|
<div v-if="isOpen" class="video-player-overlay" ref="playerOverlay">
|
|
<div class="video-player-container" @mousemove="showControls" @mouseleave="hideControlsDelayed">
|
|
<!-- Close Button -->
|
|
<button @click="closePlayer" class="close-button">
|
|
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- ── YouTube / Partner Embed ── -->
|
|
<template v-if="embedUrl">
|
|
<div class="video-area iframe-area">
|
|
<iframe
|
|
:src="embedUrl"
|
|
class="w-full h-full"
|
|
frameborder="0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
referrerpolicy="strict-origin-when-cross-origin"
|
|
allowfullscreen
|
|
></iframe>
|
|
</div>
|
|
|
|
<!-- Minimal info bar -->
|
|
<div class="stream-info-bar">
|
|
<div class="flex items-center gap-4 text-sm">
|
|
<span class="text-white font-medium">{{ content?.title }}</span>
|
|
<span v-if="content?.releaseYear" class="text-white/50">{{ content.releaseYear }}</span>
|
|
<span v-if="content?.duration" class="text-white/50">{{ content.duration }} min</span>
|
|
</div>
|
|
<a
|
|
:href="content?.streamingUrl?.replace('/embed/', '/watch?v=') ?? '#'"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="yt-link"
|
|
>
|
|
Open on YouTube
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- ── HLS Video Player ── -->
|
|
<template v-else>
|
|
<!-- Loading state -->
|
|
<div v-if="isLoadingStream" class="video-area">
|
|
<div class="flex flex-col items-center justify-center gap-4">
|
|
<div class="spinner"></div>
|
|
<span class="text-white/60 text-sm">Loading stream...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error state -->
|
|
<div v-else-if="streamError" class="video-area">
|
|
<div class="flex flex-col items-center justify-center gap-4 text-center px-8">
|
|
<svg class="w-12 h-12 text-red-400/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4.5c-.77-.833-2.694-.833-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
|
</svg>
|
|
<p class="text-white/70 text-sm max-w-sm">{{ streamError }}</p>
|
|
<button @click="fetchStream" class="text-sm text-orange-400 hover:text-orange-300 transition-colors">
|
|
Try again
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Video element -->
|
|
<div v-else class="video-area" @click="togglePlay">
|
|
<video
|
|
ref="videoEl"
|
|
class="w-full h-full"
|
|
playsinline
|
|
@timeupdate="onTimeUpdate"
|
|
@durationchange="onDurationChange"
|
|
@play="isPlaying = true"
|
|
@pause="isPlaying = false"
|
|
@ended="isPlaying = false"
|
|
@waiting="isBuffering = true"
|
|
@canplay="isBuffering = false"
|
|
@volumechange="onVolumeChange"
|
|
></video>
|
|
|
|
<!-- Buffering spinner -->
|
|
<div v-if="isBuffering && isPlaying" class="video-overlay pointer-events-none">
|
|
<div class="spinner"></div>
|
|
</div>
|
|
|
|
<!-- Large centre play button (visible when paused + controls shown) -->
|
|
<Transition name="fade">
|
|
<div v-if="!isPlaying && controlsVisible" class="video-overlay">
|
|
<button class="play-button" @click.stop="togglePlay">
|
|
<svg class="w-20 h-20" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M8 5v14l11-7z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
|
|
<!-- Video Controls -->
|
|
<Transition name="controls-slide">
|
|
<div v-show="controlsVisible || !isPlaying" class="video-controls" @click.stop>
|
|
<!-- Progress Bar -->
|
|
<div class="progress-container">
|
|
<div
|
|
class="progress-bar"
|
|
ref="progressBarEl"
|
|
@click="seekTo"
|
|
@mousedown="startSeeking"
|
|
>
|
|
<div class="progress-buffered" :style="{ width: `${buffered}%` }"></div>
|
|
<div class="progress-filled" :style="{ width: `${progress}%` }"></div>
|
|
<div class="progress-handle" :style="{ left: `${progress}%` }"></div>
|
|
</div>
|
|
<div class="time-display">
|
|
<span>{{ formatTime(currentTime) }}</span>
|
|
<span class="text-white/60">/</span>
|
|
<span class="text-white/60">{{ formatTime(duration) }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Control Buttons -->
|
|
<div class="control-buttons">
|
|
<!-- Left Side -->
|
|
<div class="flex items-center gap-4">
|
|
<button @click.stop="togglePlay" class="control-btn">
|
|
<svg v-if="!isPlaying" class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M8 5v14l11-7z" />
|
|
</svg>
|
|
<svg v-else class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Skip back 10s -->
|
|
<button @click.stop="skip(-10)" class="control-btn">
|
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Skip forward 10s -->
|
|
<button @click.stop="skip(10)" class="control-btn">
|
|
<svg class="w-6 h-6 scale-x-[-1]" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Volume -->
|
|
<button @click.stop="toggleMute" class="control-btn">
|
|
<svg v-if="volume === 0" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2" />
|
|
</svg>
|
|
<svg v-else class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="text-white font-medium text-sm hidden md:block">{{ content?.title }}</div>
|
|
</div>
|
|
|
|
<!-- Right Side -->
|
|
<div class="flex items-center gap-4">
|
|
<!-- Playback speed -->
|
|
<div class="relative" ref="speedMenuRef">
|
|
<button @click.stop="showSpeedMenu = !showSpeedMenu" class="control-btn text-sm font-semibold">
|
|
{{ playbackRate === 1 ? '1x' : playbackRate + 'x' }}
|
|
</button>
|
|
<Transition name="fade">
|
|
<div v-if="showSpeedMenu" class="speed-menu">
|
|
<button
|
|
v-for="rate in [0.5, 0.75, 1, 1.25, 1.5, 2]"
|
|
:key="rate"
|
|
@click.stop="setPlaybackRate(rate)"
|
|
class="speed-option"
|
|
:class="{ 'speed-active': playbackRate === rate }"
|
|
>
|
|
{{ rate }}x
|
|
</button>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
|
|
<button class="control-btn" @click.stop="toggleFullscreen">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
|
|
<!-- Content Info Panel (fades on hover) -->
|
|
<Transition name="fade">
|
|
<div v-if="controlsVisible && !isPlaying" class="content-info-panel">
|
|
<h2 class="text-2xl font-bold text-white mb-2">{{ content?.title }}</h2>
|
|
<div class="flex items-center gap-4 text-sm text-white/80 mb-4">
|
|
<span v-if="content?.releaseYear" class="bg-white/10 px-2 py-0.5 rounded">{{ content.releaseYear }}</span>
|
|
<span v-if="content?.rating">{{ content.rating }}</span>
|
|
<span v-if="content?.duration">{{ content.duration }}min</span>
|
|
</div>
|
|
<p class="text-white/70 text-sm line-clamp-3">{{ content?.description }}</p>
|
|
</div>
|
|
</Transition>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, watch, onUnmounted, nextTick } from 'vue'
|
|
import Hls from 'hls.js'
|
|
import { indeehubApiService } from '../services/indeehub-api.service'
|
|
import type { Content } from '../types/content'
|
|
|
|
interface Props {
|
|
isOpen: boolean
|
|
content: Content | null
|
|
}
|
|
|
|
interface Emits {
|
|
(e: 'close'): void
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
const emit = defineEmits<Emits>()
|
|
|
|
// ── Refs ────────────────────────────────────────────────────────────
|
|
const playerOverlay = ref<HTMLElement | null>(null)
|
|
const videoEl = ref<HTMLVideoElement | null>(null)
|
|
const progressBarEl = ref<HTMLElement | null>(null)
|
|
const speedMenuRef = ref<HTMLElement | null>(null)
|
|
|
|
// ── Playback state ──────────────────────────────────────────────────
|
|
const isPlaying = ref(false)
|
|
const isBuffering = ref(false)
|
|
const progress = ref(0)
|
|
const buffered = ref(0)
|
|
const currentTime = ref(0)
|
|
const duration = ref(0)
|
|
const volume = ref(1)
|
|
const playbackRate = ref(1)
|
|
const showSpeedMenu = ref(false)
|
|
|
|
// ── Stream loading ──────────────────────────────────────────────────
|
|
const isLoadingStream = ref(false)
|
|
const streamError = ref<string | null>(null)
|
|
const hlsStreamUrl = ref<string | null>(null)
|
|
|
|
// ── Controls visibility ─────────────────────────────────────────────
|
|
const controlsVisible = ref(true)
|
|
let controlsTimeout: ReturnType<typeof setTimeout> | null = null
|
|
|
|
// ── HLS instance ────────────────────────────────────────────────────
|
|
let hls: Hls | null = null
|
|
|
|
/**
|
|
* Build the YouTube embed URL for partner/YouTube content.
|
|
* Returns null when the content has no external streamingUrl.
|
|
*/
|
|
const embedUrl = computed(() => {
|
|
if (!props.content?.streamingUrl) return null
|
|
const base = props.content.streamingUrl
|
|
// Only treat it as an embed if it looks like a YouTube URL
|
|
if (!base.includes('youtube') && !base.includes('youtu.be')) return null
|
|
const sep = base.includes('?') ? '&' : '?'
|
|
return `${base}${sep}autoplay=1&rel=0&modestbranding=1`
|
|
})
|
|
|
|
// ── Lifecycle ───────────────────────────────────────────────────────
|
|
|
|
watch(() => props.isOpen, async (open) => {
|
|
if (open) {
|
|
controlsVisible.value = true
|
|
if (!embedUrl.value) {
|
|
await fetchStream()
|
|
}
|
|
} else {
|
|
destroyHls()
|
|
resetState()
|
|
}
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
destroyHls()
|
|
if (controlsTimeout) clearTimeout(controlsTimeout)
|
|
})
|
|
|
|
// ── Stream fetching ─────────────────────────────────────────────────
|
|
|
|
async function fetchStream() {
|
|
const contentId = props.content?.contentId || props.content?.id
|
|
if (!contentId) {
|
|
streamError.value = 'Content ID not available.'
|
|
return
|
|
}
|
|
|
|
isLoadingStream.value = true
|
|
streamError.value = null
|
|
|
|
try {
|
|
// Try the backend stream endpoint first (handles DRM, presigned URLs, etc.)
|
|
const info = await indeehubApiService.getStreamingUrl(contentId)
|
|
const streamFile = (info as any).file || info.url
|
|
hlsStreamUrl.value = streamFile
|
|
await nextTick()
|
|
initPlayer(streamFile)
|
|
} catch (err: any) {
|
|
console.warn('Stream API failed, trying direct HLS URL fallback:', err?.response?.status || err?.message)
|
|
|
|
// Fallback: construct the HLS URL directly from the public S3 bucket.
|
|
// The transcoded HLS files live in the public bucket at a predictable path.
|
|
// This works because the user already passed the access check before the
|
|
// player opened (rental verified in ContentDetailModal.handlePlay).
|
|
const directUrl = buildDirectHlsUrl()
|
|
if (directUrl) {
|
|
console.log('Using direct HLS URL:', directUrl)
|
|
hlsStreamUrl.value = directUrl
|
|
await nextTick()
|
|
initPlayer(directUrl)
|
|
} else {
|
|
const status = err?.response?.status
|
|
if (status === 403) {
|
|
streamError.value = 'You need an active subscription or rental to watch this content.'
|
|
} else if (status === 401) {
|
|
streamError.value = 'Please sign in to watch this content.'
|
|
} else {
|
|
streamError.value = 'Unable to load the stream. Please try again.'
|
|
}
|
|
console.error('Failed to fetch stream info:', err)
|
|
}
|
|
} finally {
|
|
isLoadingStream.value = false
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Build a direct HLS URL from the content's API data.
|
|
* The public bucket stores transcoded HLS at:
|
|
* {CDN_URL}/projects/{projectId}/file/transcoded/file.m3u8
|
|
*/
|
|
function buildDirectHlsUrl(): string | null {
|
|
const projectId = props.content?.id
|
|
if (!projectId) return null
|
|
|
|
// Use the CDN/storage URL configured for the self-hosted backend
|
|
const cdnBase = import.meta.env.VITE_INDEEHUB_CDN_URL || 'http://localhost:9000/indeedhub-public'
|
|
return `${cdnBase}/projects/${projectId}/file/transcoded/file.m3u8`
|
|
}
|
|
|
|
function initPlayer(url: string) {
|
|
destroyHls()
|
|
const video = videoEl.value
|
|
if (!video) return
|
|
|
|
const isHls = url.includes('.m3u8')
|
|
|
|
if (isHls && Hls.isSupported()) {
|
|
hls = new Hls({
|
|
enableWorker: true,
|
|
lowLatencyMode: false,
|
|
})
|
|
hls.loadSource(url)
|
|
hls.attachMedia(video)
|
|
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
|
video.play().catch(() => {
|
|
// Autoplay blocked — user needs to click play
|
|
})
|
|
})
|
|
hls.on(Hls.Events.ERROR, (_event, data) => {
|
|
if (data.fatal) {
|
|
if (data.type === Hls.ErrorTypes.NETWORK_ERROR) {
|
|
hls?.startLoad()
|
|
} else if (data.type === Hls.ErrorTypes.MEDIA_ERROR) {
|
|
hls?.recoverMediaError()
|
|
} else {
|
|
streamError.value = 'Playback error. Please try again.'
|
|
destroyHls()
|
|
}
|
|
}
|
|
})
|
|
} else if (isHls && video.canPlayType('application/vnd.apple.mpegurl')) {
|
|
// Safari native HLS
|
|
video.src = url
|
|
video.addEventListener('loadedmetadata', () => {
|
|
video.play().catch(() => {})
|
|
}, { once: true })
|
|
} else if (!isHls) {
|
|
// Direct video file (mp4, mov, webm) — use native <video>
|
|
video.src = url
|
|
video.addEventListener('loadedmetadata', () => {
|
|
video.play().catch(() => {})
|
|
}, { once: true })
|
|
video.addEventListener('error', () => {
|
|
streamError.value = 'Unable to play this video format. Please try again.'
|
|
}, { once: true })
|
|
} else {
|
|
streamError.value = 'Your browser does not support HLS video playback.'
|
|
}
|
|
}
|
|
|
|
function destroyHls() {
|
|
if (hls) {
|
|
hls.destroy()
|
|
hls = null
|
|
}
|
|
if (videoEl.value) {
|
|
videoEl.value.pause()
|
|
videoEl.value.removeAttribute('src')
|
|
videoEl.value.load()
|
|
}
|
|
}
|
|
|
|
function resetState() {
|
|
isPlaying.value = false
|
|
isBuffering.value = false
|
|
progress.value = 0
|
|
buffered.value = 0
|
|
currentTime.value = 0
|
|
duration.value = 0
|
|
hlsStreamUrl.value = null
|
|
streamError.value = null
|
|
isLoadingStream.value = false
|
|
showSpeedMenu.value = false
|
|
playbackRate.value = 1
|
|
}
|
|
|
|
// ── Controls ────────────────────────────────────────────────────────
|
|
|
|
function togglePlay() {
|
|
const video = videoEl.value
|
|
if (!video) return
|
|
if (video.paused) {
|
|
video.play().catch(() => {})
|
|
} else {
|
|
video.pause()
|
|
}
|
|
}
|
|
|
|
function skip(seconds: number) {
|
|
const video = videoEl.value
|
|
if (!video) return
|
|
video.currentTime = Math.max(0, Math.min(video.duration, video.currentTime + seconds))
|
|
}
|
|
|
|
function toggleMute() {
|
|
const video = videoEl.value
|
|
if (!video) return
|
|
if (video.volume > 0) {
|
|
video.volume = 0
|
|
} else {
|
|
video.volume = 1
|
|
}
|
|
}
|
|
|
|
function setPlaybackRate(rate: number) {
|
|
const video = videoEl.value
|
|
if (!video) return
|
|
video.playbackRate = rate
|
|
playbackRate.value = rate
|
|
showSpeedMenu.value = false
|
|
}
|
|
|
|
function seekTo(e: MouseEvent) {
|
|
const video = videoEl.value
|
|
const bar = progressBarEl.value
|
|
if (!video || !bar) return
|
|
const rect = bar.getBoundingClientRect()
|
|
const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
|
|
video.currentTime = pct * video.duration
|
|
}
|
|
|
|
function startSeeking(e: MouseEvent) {
|
|
const video = videoEl.value
|
|
const bar = progressBarEl.value
|
|
if (!video || !bar) return
|
|
const wasPaused = video.paused
|
|
|
|
const onMove = (ev: MouseEvent) => {
|
|
const rect = bar.getBoundingClientRect()
|
|
const pct = Math.max(0, Math.min(1, (ev.clientX - rect.left) / rect.width))
|
|
video.currentTime = pct * video.duration
|
|
}
|
|
|
|
const onUp = () => {
|
|
document.removeEventListener('mousemove', onMove)
|
|
document.removeEventListener('mouseup', onUp)
|
|
if (!wasPaused) video.play().catch(() => {})
|
|
}
|
|
|
|
video.pause()
|
|
document.addEventListener('mousemove', onMove)
|
|
document.addEventListener('mouseup', onUp)
|
|
}
|
|
|
|
function toggleFullscreen() {
|
|
const el = playerOverlay.value
|
|
if (!el) return
|
|
if (document.fullscreenElement) {
|
|
document.exitFullscreen()
|
|
} else {
|
|
el.requestFullscreen()
|
|
}
|
|
}
|
|
|
|
// ── Video events ────────────────────────────────────────────────────
|
|
|
|
function onTimeUpdate() {
|
|
const video = videoEl.value
|
|
if (!video || !video.duration) return
|
|
currentTime.value = video.currentTime
|
|
progress.value = (video.currentTime / video.duration) * 100
|
|
updateBuffered()
|
|
}
|
|
|
|
function onDurationChange() {
|
|
if (videoEl.value) {
|
|
duration.value = videoEl.value.duration
|
|
}
|
|
}
|
|
|
|
function onVolumeChange() {
|
|
if (videoEl.value) {
|
|
volume.value = videoEl.value.volume
|
|
}
|
|
}
|
|
|
|
function updateBuffered() {
|
|
const video = videoEl.value
|
|
if (!video || !video.duration) return
|
|
if (video.buffered.length > 0) {
|
|
buffered.value = (video.buffered.end(video.buffered.length - 1) / video.duration) * 100
|
|
}
|
|
}
|
|
|
|
// ── Controls auto-hide ──────────────────────────────────────────────
|
|
|
|
function showControls() {
|
|
controlsVisible.value = true
|
|
if (controlsTimeout) clearTimeout(controlsTimeout)
|
|
if (isPlaying.value) {
|
|
controlsTimeout = setTimeout(() => {
|
|
controlsVisible.value = false
|
|
}, 3000)
|
|
}
|
|
}
|
|
|
|
function hideControlsDelayed() {
|
|
if (isPlaying.value) {
|
|
controlsTimeout = setTimeout(() => {
|
|
controlsVisible.value = false
|
|
}, 1500)
|
|
}
|
|
}
|
|
|
|
function closePlayer() {
|
|
destroyHls()
|
|
emit('close')
|
|
}
|
|
|
|
// ── Helpers ─────────────────────────────────────────────────────────
|
|
|
|
function formatTime(seconds: number): string {
|
|
if (!seconds || !isFinite(seconds)) return '0:00'
|
|
const h = Math.floor(seconds / 3600)
|
|
const m = Math.floor((seconds % 3600) / 60)
|
|
const s = Math.floor(seconds % 60)
|
|
if (h > 0) {
|
|
return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
|
|
}
|
|
return `${m}:${s.toString().padStart(2, '0')}`
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.video-player-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 10000;
|
|
background: #0a0a0a;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.video-player-container {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
cursor: none;
|
|
}
|
|
|
|
.video-player-container:hover {
|
|
cursor: default;
|
|
}
|
|
|
|
.close-button {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 20px;
|
|
z-index: 100;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 50%;
|
|
width: 48px;
|
|
height: 48px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.close-button:hover {
|
|
background: rgba(0, 0, 0, 0.9);
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.video-area {
|
|
flex: 1;
|
|
position: relative;
|
|
background: #000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.video-area video {
|
|
object-fit: contain;
|
|
}
|
|
|
|
/* YouTube iframe fills the entire area */
|
|
.iframe-area iframe {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
}
|
|
|
|
/* Minimal info bar for YouTube embed mode */
|
|
.stream-info-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 24px;
|
|
background: rgba(0, 0, 0, 0.85);
|
|
backdrop-filter: blur(24px);
|
|
-webkit-backdrop-filter: blur(24px);
|
|
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.yt-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.yt-link:hover {
|
|
color: white;
|
|
}
|
|
|
|
/* Overlays */
|
|
.video-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.play-button {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
backdrop-filter: blur(24px);
|
|
-webkit-backdrop-filter: blur(24px);
|
|
border: 2px solid rgba(255, 255, 255, 0.25);
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.play-button:hover {
|
|
background: rgba(255, 255, 255, 0.25);
|
|
border-color: rgba(255, 255, 255, 0.4);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* Spinner */
|
|
.spinner {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 3px solid rgba(255, 255, 255, 0.15);
|
|
border-top-color: #F7931A;
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Controls */
|
|
.video-controls {
|
|
background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 60%, transparent 100%);
|
|
padding: 40px 24px 16px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
.progress-container {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.progress-bar {
|
|
position: relative;
|
|
height: 6px;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
margin-bottom: 8px;
|
|
transition: height 0.15s ease;
|
|
}
|
|
|
|
.progress-bar:hover {
|
|
height: 8px;
|
|
}
|
|
|
|
.progress-buffered {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.progress-filled {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
background: #F7931A;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.progress-handle {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%) scale(0);
|
|
width: 14px;
|
|
height: 14px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
|
|
transition: transform 0.15s ease;
|
|
}
|
|
|
|
.progress-bar:hover .progress-handle {
|
|
transform: translate(-50%, -50%) scale(1);
|
|
}
|
|
|
|
.time-display {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 13px;
|
|
color: white;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.control-buttons {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.control-btn {
|
|
color: white;
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
padding: 8px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.control-btn:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Speed menu */
|
|
.speed-menu {
|
|
position: absolute;
|
|
bottom: 100%;
|
|
right: 0;
|
|
margin-bottom: 8px;
|
|
background: rgba(20, 20, 20, 0.95);
|
|
backdrop-filter: blur(24px);
|
|
-webkit-backdrop-filter: blur(24px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 12px;
|
|
padding: 6px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 80px;
|
|
}
|
|
|
|
.speed-option {
|
|
padding: 8px 16px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.speed-option:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: white;
|
|
}
|
|
|
|
.speed-active {
|
|
color: #F7931A;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Content info panel */
|
|
.content-info-panel {
|
|
position: absolute;
|
|
bottom: 120px;
|
|
left: 24px;
|
|
max-width: 600px;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
backdrop-filter: blur(24px);
|
|
-webkit-backdrop-filter: blur(24px);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* Transitions */
|
|
.player-fade-enter-active,
|
|
.player-fade-leave-active {
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.player-fade-enter-from,
|
|
.player-fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.25s ease;
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.controls-slide-enter-active,
|
|
.controls-slide-leave-active {
|
|
transition: opacity 0.3s ease, transform 0.3s ease;
|
|
}
|
|
|
|
.controls-slide-enter-from,
|
|
.controls-slide-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
.pointer-events-none {
|
|
pointer-events: none;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.content-info-panel {
|
|
display: none;
|
|
}
|
|
|
|
.stream-info-bar {
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.video-controls {
|
|
padding: 30px 16px 12px;
|
|
}
|
|
}
|
|
</style>
|