feat: implement e-learning classroom page with video player, lesson navigation, progress tracking, and announcements.

Frontend-Learner/pages/classroom/learning.vue

@@ -123,6 +123,11 @@ const handleLessonSelect = (lessonId: number) => {
 const loadCourseData = async () => {
   if (!courseId.value) return
   isLoading.value = true
+  // Reset states before loading new course
+  courseData.value = null
+  currentLesson.value = null
+  announcements.value = []
+  
   try {
     const res = await fetchCourseLearningInfo(courseId.value)
     if (res.success) {
@@ -155,15 +160,12 @@ const loadCourseData = async () => {
 const loadLesson = async (lessonId: number) => {
   if (currentLesson.value?.id === lessonId) return
   
-  // Clear previous video state
+  // Clear previous video state & unload component to force reset
   isPlaying.value = false
   videoProgress.value = 0
   currentTime.value = 0
-  if (videoRef.value) {
-      videoRef.value.pause()
-      videoRef.value.currentTime = 0
-  }
-
+  currentLesson.value = null // This will unmount VideoPlayer and hide content
+  
   isLessonLoading.value = true
   try {
     // Optional: Check access first
@@ -450,7 +452,9 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
-
+  // Clear state when leaving the page to ensure fresh start on return
+  courseData.value = null
+  currentLesson.value = null
 })
 </script>
 
@@ -462,13 +466,13 @@ onBeforeUnmount(() => {
       <q-toolbar>
         <q-btn flat round dense icon="menu" class="lg:hidden mr-2 text-slate-900 dark:text-white" @click="toggleSidebar" />
         
-        <NuxtLink 
-          to="/dashboard/my-courses"
-          class="inline-flex items-center gap-2 text-slate-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-300 transition-all font-black text-sm md:text-base group mr-4"
+        <a 
+          href="/dashboard/my-courses"
+          class="inline-flex items-center gap-2 text-slate-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-300 transition-all font-black text-sm md:text-base group mr-4 no-underline"
         >
           <q-icon name="arrow_back" size="24px" class="transition-transform group-hover:-translate-x-1" />
           <span>{{ $t('classroom.backToDashboard') }}</span>
-        </NuxtLink>
+        </a>
         
         <q-toolbar-title class="text-base font-bold text-center lg:text-left truncate text-slate-900 dark:text-white">
            {{ courseData ? getLocalizedText(courseData.course.title) : $t('classroom.loadingTitle') }}
@@ -499,7 +503,7 @@ onBeforeUnmount(() => {
          <div class="w-full max-w-7xl mx-auto p-4 md:p-6 flex-grow">
             <!-- Video Player -->
             <VideoPlayer
-               v-if="currentLesson && videoSrc"
+               v-if="currentLesson && videoSrc && !isLessonLoading"
                ref="videoPlayerComp"
                :src="videoSrc"
                :initialSeekTime="initialSeekTime"
@@ -508,6 +512,15 @@ onBeforeUnmount(() => {
                @loadedmetadata="(d: number) => onVideoMetadataLoaded(d)"
             />
             
+            <!-- Skeleton Loader for Video/Content -->
+            <div v-if="isLessonLoading" class="aspect-video bg-slate-200 dark:bg-slate-800 rounded-2xl animate-pulse flex items-center justify-center mb-6 overflow-hidden relative">
+                <div class="absolute inset-0 bg-gradient-to-br from-slate-200 to-slate-300 dark:from-slate-700 dark:to-slate-800 opacity-50"></div>
+                <div class="z-10 flex flex-col items-center">
+                    <q-spinner size="4rem" color="primary" :thickness="4" />
+                    <p class="mt-4 text-slate-500 dark:text-slate-400 font-bold animate-bounce">{{ $t('common.loading') }}...</p>
+                </div>
+            </div>
+            
              <!-- Lesson Info -->
              <div v-if="currentLesson" class="bg-[var(--bg-surface)] p-6 md:p-8 rounded-3xl shadow-sm border border-[var(--border-color)]">
                 <!-- ใช้สีจากตัวแปรกลาง: จะแยกโหมดให้อัตโนมัติ (สว่าง=ดำ / มืด=ขาว) -->