elearning/Frontend-Learner/components/classroom/VideoPlayer.vue

<script setup lang="ts">
/**
 * @file VideoPlayer.vue
 * @description Video Player Component with custom controls provided by design
 */

const props = defineProps<{
    src: string;
    poster?: string;
    initialSeekTime?: number;
}>();

const emit = defineEmits<{
    (e: 'timeupdate', currentTime: number, duration: number): void;
    (e: 'ended'): void;
    (e: 'loadedmetadata', duration: number): void;
}>();

const videoRef = ref<HTMLVideoElement | null>(null);
const isPlaying = ref(false);
const videoProgress = ref(0);
const currentTime = ref(0);
const duration = ref(0);

// Media Prefs
const { volume, muted: isMuted, setVolume, setMuted, applyTo } = useMediaPrefs();

const volumeIcon = computed(() => {
    if (isMuted.value || volume.value === 0) return 'volume_off';
    if (volume.value < 0.5) return 'volume_down';
    return 'volume_up';
});

const formatTime = (time: number) => {
    const m = Math.floor(time / 60);
    const s = Math.floor(time % 60);
    return `${m}:${s.toString().padStart(2, '0')}`;
};

const currentTimeDisplay = computed(() => formatTime(currentTime.value));
const durationDisplay = computed(() => formatTime(duration.value || 0));

// YouTube Helper Logic
const isYoutube = computed(() => {
    const s = props.src.toLowerCase();
    return s.includes('youtube.com') || s.includes('youtu.be');
});

const youtubeEmbedUrl = computed(() => {
    if (!isYoutube.value) return '';
    let videoId = '';
    
    // Extract Video ID
    if (props.src.includes('youtu.be')) {
        videoId = props.src.split('youtu.be/')[1]?.split('?')[0];
    } else {
        const urlParams = new URLSearchParams(props.src.split('?')[1]);
        videoId = urlParams.get('v') || '';
    }

    // Return Embed URL with enablejsapi=1
    return `https://www.youtube.com/embed/${videoId}?enablejsapi=1&rel=0`;
});

// YouTube API Tracking
let ytPlayer: any = null;
let ytInterval: any = null;

const initYoutubeAPI = () => {
    if (!isYoutube.value || typeof window === 'undefined') return;

    // Load API Script if not exists
    if (!(window as any).YT) {
        const tag = document.createElement('script');
        tag.src = "https://www.youtube.com/iframe_api";
        const firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode?.insertBefore(tag, firstScriptTag);
    }

    const setupPlayer = () => {
        ytPlayer = new (window as any).YT.Player('youtube-iframe', {
            events: {
                'onReady': (event: any) => {
                    duration.value = event.target.getDuration();
                    
                    // Resume Logic for YouTube
                    if (props.initialSeekTime && props.initialSeekTime > 0) {
                        event.target.seekTo(props.initialSeekTime, true);
                    }
                    
                    emit('loadedmetadata', event.target.getDuration());
                },
                'onStateChange': (event: any) => {
                    if (event.data === (window as any).YT.PlayerState.PLAYING) {
                        startYTTracking();
                    } else {
                        stopYTTracking();
                    }
                    if (event.data === (window as any).YT.PlayerState.ENDED) {
                        emit('ended');
                    }
                }
            }
        });
    };

    if ((window as any).YT && (window as any).YT.Player) {
        setupPlayer();
    } else {
        (window as any).onYouTubeIframeAPIReady = setupPlayer;
    }
};

const startYTTracking = () => {
    stopYTTracking();
    ytInterval = setInterval(() => {
        if (ytPlayer && ytPlayer.getCurrentTime) {
            currentTime.value = ytPlayer.getCurrentTime();
            emit('timeupdate', currentTime.value, duration.value);
        }
    }, 1000); // Check every second
};

const stopYTTracking = () => {
    if (ytInterval) clearInterval(ytInterval);
};

const destroyYoutubePlayer = () => {
    stopYTTracking();
    if (ytPlayer) {
        try {
            if (ytPlayer.destroy) ytPlayer.destroy();
        } catch (e) {
            console.warn('Error destroying YT player:', e);
        }
        ytPlayer = null;
    }
};

onMounted(() => {
    if (isYoutube.value) initYoutubeAPI();
});

onUnmounted(() => {
    destroyYoutubePlayer();
});

// Watch for src change to re-init
watch(() => props.src, (newSrc, oldSrc) => {
    if (newSrc !== oldSrc) {
        destroyYoutubePlayer();
        if (isYoutube.value) {
            setTimeout(initYoutubeAPI, 300);
        }
    }
});

const togglePlay = () => {
    if (isYoutube.value) {
        if (ytPlayer && ytPlayer.getPlayerState) {
            const state = ytPlayer.getPlayerState();
            if (state === 1) ytPlayer.pauseVideo();
            else ytPlayer.playVideo();
        }
        return;
    }
    if (!videoRef.value) return;
    if (isPlaying.value) videoRef.value.pause();
    else videoRef.value.play();
    isPlaying.value = !isPlaying.value;
};

const handleTimeUpdate = () => {
    if (!videoRef.value) return;
    currentTime.value = videoRef.value.currentTime;
    duration.value = videoRef.value.duration;
    videoProgress.value = (currentTime.value / duration.value) * 100;
    
    emit('timeupdate', currentTime.value, duration.value);
};

const handleLoadedMetadata = () => {
    if (videoRef.value) {
        applyTo(videoRef.value);
        if (props.initialSeekTime && props.initialSeekTime > 0) {
             const seekTo = Math.min(props.initialSeekTime, videoRef.value.duration || Infinity)
             videoRef.value.currentTime = seekTo;
        }
    }
    emit('loadedmetadata', videoRef.value?.duration || 0);
};

const handleEnded = () => {
    isPlaying.value = false;
    emit('ended');
};

const seek = (e: MouseEvent) => {
    if (!videoRef.value || !isFinite(videoRef.value.duration)) return;
    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
    const percent = (e.clientX - rect.left) / rect.width;
    videoRef.value.currentTime = percent * videoRef.value.duration;
};

const handleToggleMute = () => {
    setMuted(!isMuted.value);
};

const handleVolumeChange = (val: any) => {
    const newVol = typeof val === 'number' ? val : Number(val.target.value);
    setVolume(newVol);
};

// Expose video ref for parent to control if needed
defineExpose({
    videoRef,
    pause: () => videoRef.value?.pause(),
    currentTime: () => videoRef.value?.currentTime || 0
});

// Watch for volume/mute changes to apply to video element
watch([volume, isMuted], () => {
    if (videoRef.value) applyTo(videoRef.value);
});
</script>

<template>
    <div class="bg-black rounded-xl overflow-hidden shadow-2xl mb-6 aspect-video relative group ring-1 ring-white/10">
        <!-- 1. YouTube Player -->
        <iframe
            v-if="isYoutube"
            id="youtube-iframe"
            :src="youtubeEmbedUrl"
            class="w-full h-full"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
        ></iframe>

        <!-- 2. Standard HTML5 Video Player -->
        <div v-else class="w-full h-full relative">
            <video
                ref="videoRef"
                :src="src"
                :poster="poster"
                class="w-full h-full object-contain"
                @click="togglePlay"
                @timeupdate="handleTimeUpdate"
                @loadedmetadata="handleLoadedMetadata"
                @ended="handleEnded"
            />
        
            <!-- Custom Controls Overlay (Only for HTML5 Video) -->
            <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 via-black/40 to-transparent transition-opacity opacity-0 group-hover:opacity-100">
                <div class="flex items-center gap-4 text-white">
                    <q-btn flat round dense :icon="isPlaying ? 'pause' : 'play_arrow'" @click.stop="togglePlay" />
                    <div class="relative flex-grow h-1.5 bg-white/20 rounded-full cursor-pointer group/progress overflow-hidden" @click="seek">
                        <div class="absolute top-0 left-0 h-full bg-blue-500 rounded-full group-hover/progress:bg-blue-400 transition-all shadow-[0_0_10px_rgba(59,130,246,0.5)]" :style="{ width: videoProgress + '%' }"></div>
                    </div>
                    <span class="text-xs font-mono font-medium opacity-90">{{ currentTimeDisplay }} / {{ durationDisplay }}</span>
                    
                    <!-- Volume Control -->
                    <div class="flex items-center gap-2 group/volume">
                        <q-btn flat round dense :icon="volumeIcon" @click.stop="handleToggleMute" color="white" />
                        <div class="w-0 group-hover/volume:w-20 overflow-hidden transition-all duration-300 flex items-center">
                            <input 
                                type="range" 
                                min="0" 
                                max="1" 
                                step="0.1" 
                                :value="volume" 
                                @input="handleVolumeChange"
                                class="w-20 h-1 bg-white/30 rounded-lg appearance-none cursor-pointer accent-blue-500"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>