feat: Implement core e-learning features including video playback, user profile management, and course discovery.

Frontend-Learner/components/classroom/VideoPlayer.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+/**
+ * @file VideoPlayer.vue
+ * @description Video Player Component with custom controls provided by design
+ */
+
+const props = defineProps<{
+    src: string;
+    initialSeekTime?: number;
+}>();
+
+const emit = defineEmits<{
+    (e: 'timeupdate', currentTime: number, duration: number): void;
+    (e: 'ended'): void;
+    (e: 'loadedmetadata'): 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));
+
+const togglePlay = () => {
+    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');
+};
+
+const handleEnded = () => {
+    isPlaying.value = false;
+    emit('ended');
+};
+
+const seek = (e: MouseEvent) => {
+    if (!videoRef.value) 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">
+        <video
+            ref="videoRef"
+            :src="src"
+            class="w-full h-full object-contain"
+            @click="togglePlay"
+            @timeupdate="handleTimeUpdate"
+            @loadedmetadata="handleLoadedMetadata"
+            @ended="handleEnded"
+        />
+       
+        <!-- Custom Controls Overlay -->
+        <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>
+</template>