indee-demo/src/components/VideoPlayer.vue

<template>
  <div class="video-player-container" :class="{ 'fullscreen': isFullscreen }">
    <div class="relative w-full h-full bg-black rounded-lg overflow-hidden group">
      <!-- Video Element -->
      <video
        ref="videoRef"
        class="w-full h-full"
        :src="src"
        @click="togglePlay"
        @timeupdate="handleTimeUpdate"
        @loadedmetadata="handleMetadata"
        @ended="handleEnded"
      />

      <!-- Controls Overlay -->
      <div 
        class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
        :class="{ 'opacity-100': showControls || !playing }"
      >
        <!-- Top Bar -->
        <div class="absolute top-0 left-0 right-0 p-4 flex items-center justify-between">
          <button 
            v-if="showBackButton"
            @click="$emit('close')"
            class="p-2 hover:bg-white/20 rounded-full transition-colors"
          >
            <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="M10 19l-7-7m0 0l7-7m-7 7h18" />
            </svg>
          </button>
          
          <h3 class="text-lg font-semibold">{{ title }}</h3>
          
          <div class="w-10"></div>
        </div>

        <!-- Center Play Button -->
        <div 
          v-if="!playing"
          class="absolute inset-0 flex items-center justify-center"
          @click="togglePlay"
        >
          <button class="p-6 bg-white/20 hover:bg-white/30 backdrop-blur-md rounded-full transition-all transform hover:scale-110">
            <svg class="w-16 h-16" fill="currentColor" viewBox="0 0 24 24">
              <path d="M8 5v14l11-7z"/>
            </svg>
          </button>
        </div>

        <!-- Bottom Controls -->
        <div class="absolute bottom-0 left-0 right-0 p-4 space-y-2">
          <!-- Progress Bar -->
          <div 
            class="w-full h-1 bg-white/30 rounded-full cursor-pointer hover:h-2 transition-all"
            @click="seek"
            ref="progressRef"
          >
            <div 
              class="h-full bg-netflix-red rounded-full transition-all"
              :style="{ width: `${progress}%` }"
            ></div>
          </div>

          <!-- Control Buttons -->
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-4">
              <!-- Play/Pause -->
              <button @click="togglePlay" class="p-2 hover:bg-white/20 rounded-full transition-colors">
                <svg v-if="playing" class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
                </svg>
                <svg v-else class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M8 5v14l11-7z"/>
                </svg>
              </button>

              <!-- Volume -->
              <button @click="toggleMute" class="p-2 hover:bg-white/20 rounded-full transition-colors">
                <svg v-if="!muted" class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/>
                </svg>
                <svg v-else class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>
                </svg>
              </button>

              <!-- Time Display -->
              <span class="text-sm text-white/80">
                {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
              </span>
            </div>

            <div class="flex items-center gap-2">
              <!-- Fullscreen -->
              <button @click="toggleFullscreen" class="p-2 hover:bg-white/20 rounded-full transition-colors">
                <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>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

interface Props {
  src: string
  title?: string
  showBackButton?: boolean
}

const props = defineProps<Props>()

defineEmits<{
  'close': []
}>()

const videoRef = ref<HTMLVideoElement | null>(null)
const progressRef = ref<HTMLElement | null>(null)
const playing = ref(false)
const muted = ref(false)
const currentTime = ref(0)
const duration = ref(0)
const progress = ref(0)
const showControls = ref(false)
const isFullscreen = ref(false)
let hideControlsTimeout: NodeJS.Timeout | null = null

const togglePlay = () => {
  if (!videoRef.value) return
  
  if (playing.value) {
    videoRef.value.pause()
  } else {
    videoRef.value.play()
  }
  playing.value = !playing.value
}

const toggleMute = () => {
  if (!videoRef.value) return
  videoRef.value.muted = !videoRef.value.muted
  muted.value = videoRef.value.muted
}

const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    videoRef.value?.requestFullscreen()
    isFullscreen.value = true
  } else {
    document.exitFullscreen()
    isFullscreen.value = false
  }
}

const handleTimeUpdate = () => {
  if (!videoRef.value) return
  currentTime.value = videoRef.value.currentTime
  progress.value = (currentTime.value / duration.value) * 100
}

const handleMetadata = () => {
  if (!videoRef.value) return
  duration.value = videoRef.value.duration
}

const handleEnded = () => {
  playing.value = false
  // TODO: Show related content or next episode
}

const seek = (event: MouseEvent) => {
  if (!videoRef.value || !progressRef.value) return
  
  const rect = progressRef.value.getBoundingClientRect()
  const pos = (event.clientX - rect.left) / rect.width
  videoRef.value.currentTime = pos * duration.value
}

const formatTime = (seconds: number): string => {
  const mins = Math.floor(seconds / 60)
  const secs = Math.floor(seconds % 60)
  return `${mins}:${secs.toString().padStart(2, '0')}`
}

const handleMouseMove = () => {
  showControls.value = true
  
  if (hideControlsTimeout) {
    clearTimeout(hideControlsTimeout)
  }
  
  hideControlsTimeout = setTimeout(() => {
    if (playing.value) {
      showControls.value = false
    }
  }, 3000)
}

onMounted(() => {
  document.addEventListener('mousemove', handleMouseMove)
})

onUnmounted(() => {
  document.removeEventListener('mousemove', handleMouseMove)
  if (hideControlsTimeout) {
    clearTimeout(hideControlsTimeout)
  }
})
</script>

<style scoped>
.video-player-container {
  width: 100%;
  aspect-ratio: 16/9;
}

.fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  aspect-ratio: auto;
}

video {
  cursor: pointer;
}
</style>