chamomind/elearning
7
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

feat: add classroom learning interface for video lessons with progress tracking and curriculum navigation.

Browse source
This commit is contained in:
supalerk-ar66 2026-01-20 15:51:58 +07:00
parent 897edb6438
commit e705f2c6b9
1 changed files with 212 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

316
Frontend-Learner/pages/classroom/learning.vue
View file

@ -16,43 +16,18 @@ useHead({
title: 'ห้องเรียนออนไลน์ - e-Learning'
})
const route = useRoute()
const { fetchCourseLearningInfo, fetchLessonContent, saveVideoProgress, markLessonComplete, checkLessonAccess } = useCourse()
// State
const sidebarOpen = ref(false)
const activeTab = ref<'details' | 'announcements'>('details')
const currentLessonId = ref('1.3')
const courseId = computed(() => Number(route.query.course_id))
const toggleSidebar = () => {
sidebarOpen.value = !sidebarOpen.value
}
const switchTab = (tab: 'details' | 'announcements', lessonId: string = '') => {
activeTab.value = tab
if (lessonId) currentLessonId.value = lessonId
// Close sidebar on mobile when selecting a lesson
if (import.meta.client && window.innerWidth <= 1024) {
sidebarOpen.value = false
}
}
// Curriculum Data matching the visual exactly
const progress = 65
const chapters = [
{
title: '01. บทนำ',
lessons: [
{ id: '1.1', title: 'การออกแบบ UX คืออะไร?', icon: '✓', status: 'completed' },
{ id: '1.2', title: 'กระบวนการคิดเชิงออกแบบ', icon: '✓', status: 'completed' },
{ id: '1.3', title: 'พื้นฐานการวาดโครงร่าง', icon: '▶', status: 'active' },
]
},
{
title: '02. วิธีการวิจัย',
lessons: [
{ id: '2.1', title: 'การสัมภาษณ์ผู้ใช้', icon: '', status: 'locked' },
{ id: '2.2', title: 'การสร้าง Persona', icon: '', status: 'locked' },
]
}
]
const courseData = ref<any>(null)
const currentLesson = ref<any>(null)
const isLoading = ref(true)
const isLessonLoading = ref(false)
// Video Player Logic
const videoRef = ref<HTMLVideoElement | null>(null)
@ -60,6 +35,106 @@ const isPlaying = ref(false)
const videoProgress = ref(0)
const currentTime = ref(0)
const duration = ref(0)
const saveProgressInterval = ref<any>(null)
// Helper for localization
const getLocalizedText = (text: any) => {
if (typeof text === 'string') return text
return text?.th || text?.en || ''
}
const toggleSidebar = () => {
sidebarOpen.value = !sidebarOpen.value
}
const switchTab = (tab: 'details' | 'announcements', lessonId: any = null) => {
activeTab.value = tab
if (lessonId) {
loadLesson(lessonId)
}
// Close sidebar on mobile when selecting a lesson
if (import.meta.client && window.innerWidth <= 1024) {
sidebarOpen.value = false
}
}
// Data Fetching
const loadCourseData = async () => {
if (!courseId.value) return
isLoading.value = true
try {
const res = await fetchCourseLearningInfo(courseId.value)
if (res.success) {
courseData.value = res.data
// Auto-load first unlocked lesson if no current lesson
if (!currentLesson.value) {
const firstChapter = res.data.chapters[0]
if (firstChapter && firstChapter.lessons.length > 0) {
// Find first unlocked or just first
const availableLesson = firstChapter.lessons.find((l: any) => !l.is_locked) || firstChapter.lessons[0]
loadLesson(availableLesson.id)
}
}
}
} catch (error) {
console.error('Error loading course:', error)
} finally {
isLoading.value = false
}
}
const loadLesson = async (lessonId: number) => {
if (currentLesson.value?.id === lessonId) return
// Clear previous video state
isPlaying.value = false
videoProgress.value = 0
currentTime.value = 0
if (videoRef.value) {
videoRef.value.pause()
videoRef.value.currentTime = 0
}
isLessonLoading.value = true
try {
// Optional: Check access first
const accessRes = await checkLessonAccess(courseId.value, lessonId)
if (accessRes.success && !accessRes.data.is_accessible) {
alert('บทเรียนนี้ยังไม่เปิดให้เข้าชม')
isLessonLoading.value = false
return
}
const res = await fetchLessonContent(courseId.value, lessonId)
if (res.success) {
currentLesson.value = res.data
// Restore progress if available
if (res.progress) {
// Wait for video metadata to load usually, but set state
// We might set currentTime once metadata loaded
if (res.progress.video_progress_seconds > 0) {
currentTime.value = res.progress.video_progress_seconds
// We will apply this to videoRef locally when it is ready
}
}
}
} catch (error) {
console.error('Error loading lesson:', error)
} finally {
isLessonLoading.value = false
}
}
const onVideoMetadataLoaded = () => {
if (videoRef.value && currentLesson.value) {
// Restore time if needed
if (currentTime.value > 0) {
videoRef.value.currentTime = currentTime.value
}
}
}
const togglePlay = () => {
if (!videoRef.value) return
@ -73,6 +148,37 @@ const updateProgress = () => {
currentTime.value = videoRef.value.currentTime
duration.value = videoRef.value.duration
videoProgress.value = (currentTime.value / duration.value) * 100
// Throttle save progress logic is handled in watcher or separate interval usually,
// but let's check if we should save periodically here for simplicity or use specific events
}
// Save progress periodically
watch(() => isPlaying.value, (playing) => {
if (playing) {
saveProgressInterval.value = setInterval(() => {
if (videoRef.value && currentLesson.value) {
saveVideoProgress(currentLesson.value.id, videoRef.value.currentTime, videoRef.value.duration)
}
}, 10000) // Every 10 seconds
} else {
clearInterval(saveProgressInterval.value)
// Save one last time on pause
if (videoRef.value && currentLesson.value) {
saveVideoProgress(currentLesson.value.id, videoRef.value.currentTime, videoRef.value.duration)
}
}
})
const onVideoEnded = async () => {
isPlaying.value = false
if (currentLesson.value) {
await markLessonComplete(courseId.value, currentLesson.value.id)
// Reload course data to update sidebar progress/locks
await loadCourseData()
// Auto play next logic could go here
}
}
const formatTime = (time: number) => {
@ -82,7 +188,7 @@ const formatTime = (time: number) => {
}
const currentTimeDisplay = computed(() => formatTime(currentTime.value))
const durationDisplay = computed(() => formatTime(duration.value || 15 * 60 + 45))
const durationDisplay = computed(() => formatTime(duration.value || 0))
const seek = (e: MouseEvent) => {
if (!videoRef.value) return
@ -90,6 +196,14 @@ const seek = (e: MouseEvent) => {
const percent = (e.clientX - rect.left) / rect.width
videoRef.value.currentTime = percent * videoRef.value.duration
}
onMounted(() => {
loadCourseData()
})
onBeforeUnmount(() => {
clearInterval(saveProgressInterval.value)
})
</script>
<template>
@ -102,22 +216,24 @@ const seek = (e: MouseEvent) => {
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /></svg>
</button>
<!-- Back Navigation -->
<NuxtLink to="/dashboard" class="text-slate-700 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors flex items-center gap-2 flex-shrink-0 p-2 md:p-0">
<NuxtLink to="/dashboard/my-courses" class="text-slate-700 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors flex items-center gap-2 flex-shrink-0 p-2 md:p-0">
<span class="text-lg md:text-base">←</span>
<span class="hidden md:inline text-[11px] font-bold">กลับไปหน้าหลัก</span>
</NuxtLink>
<div class="w-[1px] h-4 bg-slate-200 dark:bg-white/10 hidden md:block flex-shrink-0"/>
<h1 class="text-[13px] md:text-sm font-black text-slate-900 dark:text-white tracking-tight truncate min-w-0 pr-2">เบื้องต้นการออกแบบ UX/UI</h1>
<h1 class="text-[13px] md:text-sm font-black text-slate-900 dark:text-white tracking-tight truncate min-w-0 pr-2">
{{ courseData ? getLocalizedText(courseData.course.title) : 'กำลังโหลด...' }}
</h1>
</div>
<!-- Right Header Actions (Progress) -->
<div class="flex items-center gap-2 md:gap-10 pr-2 md:pr-0">
<div class="flex items-center gap-2 md:gap-3">
<div class="flex items-center gap-2 md:gap-3" v-if="courseData">
<span class="text-[10px] font-bold text-slate-700 dark:text-slate-400 whitespace-nowrap">
<span class="hidden md:inline">เรียนจบแล้ว </span>{{ progress }}%
<span class="hidden md:inline">เรียนจบแล้ว </span>{{ courseData.enrollment.progress_percentage || 0 }}%
</span>
<div class="w-12 md:w-32 h-1 bg-white/10 rounded-full overflow-hidden flex-shrink-0">
<div class="h-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.3)]" :style="{ width: progress + '%' }"/>
<div class="h-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.3)]" :style="{ width: (courseData.enrollment.progress_percentage || 0) + '%' }"/>
</div>
</div>
</div>
@ -125,7 +241,7 @@ const seek = (e: MouseEvent) => {
<!-- Sidebar: Course Curriculum list -->
<aside class="learning-sidebar dark:!bg-gray-900 dark:!border-r-white/5 transition-colors" :class="{ 'open': sidebarOpen }">
<div class="py-2">
<div class="py-2" v-if="courseData">
<!-- Announcements Tab Trigger -->
<div
class="lesson-item group"
@ -139,35 +255,46 @@ const seek = (e: MouseEvent) => {
</div>
<!-- Chapters & Lessons List -->
<div v-for="chapter in chapters" :key="chapter.title" class="mt-4">
<div class="chapter-header px-4 py-2 dark:!bg-slate-900 dark:!text-white dark:!border-b-white/5">{{ chapter.title }}</div>
<div v-for="chapter in courseData.chapters" :key="chapter.id" class="mt-4">
<div class="chapter-header px-4 py-2 dark:!bg-slate-900 dark:!text-white dark:!border-b-white/5">
{{ getLocalizedText(chapter.title) }}
</div>
<div
v-for="lesson in chapter.lessons"
:key="lesson.id"
class="lesson-item px-4 dark:!text-slate-300 dark:!border-b-white/5 hover:dark:!bg-white/5 hover:dark:!text-white transition-colors"
:class="{
'active-lesson': currentLessonId === lesson.id && activeTab === 'details',
'completed': lesson.status === 'completed',
'locked': lesson.status === 'locked'
'active-lesson': currentLesson?.id === lesson.id && activeTab === 'details',
'completed': lesson.progress?.is_completed,
'locked': lesson.is_locked
}"
@click="lesson.status !== 'locked' && switchTab('details', lesson.id)"
@click="!lesson.is_locked && switchTab('details', lesson.id)"
>
<span class="text-[12px] font-medium tracking-tight truncate pr-4">{{ lesson.id }} {{ lesson.title }}</span>
<span class="icon-status flex-shrink-0" :class="{ 'text-emerald-500': lesson.status === 'completed', 'text-blue-500': lesson.status === 'active' }">
{{ lesson.icon }}
<div class="flex items-center gap-2 overflow-hidden">
<span class="flex-shrink-0 text-slate-400 text-xs" v-if="lesson.is_locked">🔒</span>
<span class="text-[12px] font-medium tracking-tight truncate pr-4">
{{ getLocalizedText(lesson.title) }}
</span>
</div>
<span class="icon-status flex-shrink-0" :class="{ 'text-emerald-500': lesson.progress?.is_completed, 'text-blue-500': currentLesson?.id === lesson.id }">
<span v-if="lesson.progress?.is_completed">✓</span>
<span v-else-if="currentLesson?.id === lesson.id">▶</span>
</span>
</div>
</div>
<!-- Exam Link -->
<!-- Exam Link (Mock for now, can be integrated later) -->
<div class="mt-8 border-t border-white/5 pt-2">
<div class="chapter-header px-4 py-2 uppercase tracking-widest text-[10px] dark:!bg-slate-900 dark:!text-white dark:!border-b-white/5">03. แบบทดสอบท้ายบท</div>
<div class="chapter-header px-4 py-2 uppercase tracking-widest text-[10px] dark:!bg-slate-900 dark:!text-white dark:!border-b-white/5">แบบทดสอบ</div>
<NuxtLink to="/classroom/quiz" class="lesson-item px-4 no-underline cursor-pointer">
<span class="text-[12px] font-medium text-slate-900 dark:text-slate-200 group-hover:text-black dark:group-hover:text-white transition-colors">ข้อสอบปลายภาค</span>
<span class="text-xs opacity-50">📄</span>
</NuxtLink>
</div>
</div>
<div v-else-if="isLoading" class="p-6 text-center text-slate-500 text-sm">
กำลังโหลดเนื้อหา...
</div>
</aside>
<!-- Sidebar Overlay for mobile -->
@ -185,14 +312,14 @@ const seek = (e: MouseEvent) => {
<span class="bg-amber-100/10 text-amber-500 px-3 py-1 rounded-lg text-[10px] font-black ring-1 ring-amber-500/20">ด่วน</span>
<span class="text-[11px] font-bold text-slate-500 uppercase tracking-tighter">วันนี้ • 10:30 น.</span>
</div>
<h3 class="text-xl font-black text-white mb-4 tracking-tight">ปรับเวลาส่งแบบฝึกหัด</h3>
<p class="text-slate-400 leading-relaxed font-medium">เนื่องจากเวลาทำข้อสอบน้อยเกินไปจึงทำการปรับเวลาให้เหมาะสมกับเนื้อหาบทเรียน</p>
<h3 class="text-xl font-black text-white mb-4 tracking-tight">ยินดีต้อนรับสู่คอร์สเรียน</h3>
<p class="text-slate-400 leading-relaxed font-medium">ขอให้สนุกกับการเรียนรู้ หากมีข้อสงสัยสามารถสอบถามผู้สอนได้ตลอดเวลาครับ</p>
</div>
</div>
<!-- Tab Content: Lesson Details (Grid System) -->
<div v-if="activeTab === 'details'" class="animate-fade-in pt-4 md:pt-10">
<div class="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-10 items-start">
<div class="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-10 items-start" v-if="currentLesson">
<!-- Left Side: Video + Title + Notes (8/12) -->
<div class="md:col-span-8 space-y-10 pb-24 md:pb-0">
@ -201,12 +328,15 @@ const seek = (e: MouseEvent) => {
<video
ref="videoRef"
class="w-full h-full object-contain"
poster="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=1200&q=80"
@timeupdate="updateProgress"
@loadedmetadata="onVideoMetadataLoaded"
@ended="onVideoEnded"
@play="isPlaying = true"
@pause="isPlaying = false"
:src="getLocalizedText(currentLesson.content)"
>
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
<!-- Fallback message -->
Browser ของคุณไม่รองรับการเล่นวิดีโอ
</video>
<!-- Play Overlay -->
@ -225,7 +355,6 @@ const seek = (e: MouseEvent) => {
<div :style="{ width: videoProgress + '%' }" class="absolute top-0 left-0 h-full bg-blue-500 rounded-full"/>
</div>
<div class="flex gap-4">
<span class="cursor-pointer hover:text-white">CC</span>
<span class="cursor-pointer hover:text-white" @click="videoRef?.requestFullscreen()">⛶</span>
</div>
</div>
@ -234,33 +363,16 @@ const seek = (e: MouseEvent) => {
<!-- Lesson Title -->
<div>
<h2 class="text-2xl md:text-[32px] font-black text-slate-900 dark:text-white leading-tight tracking-tight break-words mb-2">1.3 พื้นฐานการวาดโครงร่าง (Wireframing Basics)</h2>
<div class="flex items-center gap-2 text-slate-600 dark:text-slate-400 text-[12px] font-bold uppercase tracking-wider">
<span>บทที่ 1</span>
<span class="opacity-30">•</span>
<span>บทเริ่มต้นการออกแบบ</span>
</div>
<h2 class="text-2xl md:text-[32px] font-black text-slate-900 dark:text-white leading-tight tracking-tight break-words mb-2">
{{ getLocalizedText(currentLesson.title) }}
</h2>
</div>
<!-- Lesson Notes Card -->
<div class="rounded-2xl bg-white dark:!bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 md:p-10 shadow-sm dark:shadow-xl transition-colors">
<h3 class="text-[14px] md:text-[16px] font-black text-slate-900 dark:text-slate-50 mb-6 uppercase tracking-[0.2em] border-b border-slate-200 dark:border-slate-600 pb-4">บันทึกบทเรียน</h3>
<!-- Lesson Notes/Description Card -->
<div class="rounded-2xl bg-white dark:!bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 md:p-10 shadow-sm dark:shadow-xl transition-colors" v-if="currentLesson.description">
<h3 class="text-[14px] md:text-[16px] font-black text-slate-900 dark:text-slate-50 mb-6 uppercase tracking-[0.2em] border-b border-slate-200 dark:border-slate-600 pb-4">รายละเอียดบทเรียน</h3>
<div class="text-[16px] md:text-[18px] text-slate-700 dark:text-slate-200 leading-relaxed font-medium space-y-6">
<p>การ Wireframe คือการจำลองโครงสร้างพื้นฐานของหน้าจอ (Layout) โดยเน้นไปที่การจัดวางตำแหน่งปุ่มและเนื้อหาสำคัญเพื่อวางโครงสร้างก่อนลงมือดีไซน์จริง</p>
<div class="bg-slate-50 dark:bg-slate-700/50 border border-slate-200 dark:border-slate-600 border-l-4 border-l-blue-500 p-6 rounded-r-2xl">
<div class="font-black text-blue-700 dark:text-blue-300 text-[14px] md:text-[16px] uppercase tracking-wider mb-3">ประเด็นสำคัญ:</div>
<ul class="space-y-4">
<li class="flex gap-4 items-start">
<span class="w-1.5 h-1.5 rounded-full bg-blue-500 mt-2.5 flex-shrink-0"/>
<span class="text-slate-700 dark:text-slate-100">ความละเอียดต่ำ (Low-fidelity) ช่วยให้โฟกัสที่การใช้งาน (Functionality) เป็นหลัก</span>
</li>
<li class="flex gap-4 items-start">
<span class="w-1.5 h-1.5 rounded-full bg-blue-500 mt-2.5 flex-shrink-0"/>
<span class="text-slate-700 dark:text-slate-100">ช่วยในการสื่อสารไอเดียกับ Stakeholders ให้เห็นภาพตรงกัน</span>
</li>
</ul>
</div>
<p>{{ getLocalizedText(currentLesson.description) }}</p>
</div>
</div>
</div>
@ -268,54 +380,49 @@ const seek = (e: MouseEvent) => {
<!-- Right Side: Resources + Actions (4/12) -->
<div class="md:col-span-4 space-y-6 md:sticky md:top-6">
<!-- Resources Card -->
<div class="rounded-2xl bg-white dark:!bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 md:p-8 shadow-sm dark:shadow-xl transition-colors">
<div class="rounded-2xl bg-white dark:!bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 md:p-8 shadow-sm dark:shadow-xl transition-colors" v-if="currentLesson.attachments && currentLesson.attachments.length > 0">
<h3 class="text-[14px] md:text-[16px] font-black text-slate-900 dark:text-slate-100 mb-6 uppercase tracking-[0.2em] border-b border-slate-200 dark:border-slate-700 pb-4">เอกสารประกอบ</h3>
<div class="space-y-3">
<!-- Attachment Row -->
<div class="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-700/50 rounded-2xl border border-slate-200 dark:border-slate-600 group hover:bg-slate-100 dark:hover:bg-slate-600/50 transition-all cursor-pointer min-w-0">
<div class="flex items-center gap-3 min-w-0 flex-1">
<div v-for="att in currentLesson.attachments" :key="att.id" class="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-700/50 rounded-2xl border border-slate-200 dark:border-slate-600 group hover:bg-slate-100 dark:hover:bg-slate-600/50 transition-all cursor-pointer min-w-0">
<a :href="att.file_path" target="_blank" class="flex items-center gap-3 min-w-0 flex-1 no-underline">
<span class="text-xl flex-shrink-0">📄</span>
<div class="flex flex-col min-w-0">
<span class="text-[14px] font-bold text-slate-800 dark:text-slate-100 truncate pr-2">สไลด์ประกอบการสอน.pdf</span>
<span class="text-[11px] font-black text-slate-500 dark:text-slate-400 uppercase">2.4 MB</span>
<span class="text-[14px] font-bold text-slate-800 dark:text-slate-100 truncate pr-2">{{ att.file_name }}</span>
<span class="text-[11px] font-black text-slate-500 dark:text-slate-400 uppercase">{{ (att.file_size / 1024 / 1024).toFixed(2) }} MB</span>
</div>
</div>
<button class="w-8 h-8 rounded-full flex items-center justify-center bg-slate-100 dark:bg-slate-700/50 group-hover:bg-blue-600 text-slate-600 dark:text-slate-400 group-hover:text-white transition-all text-xs flex-shrink-0">↓</button>
</div>
<!-- Attachment Row -->
<div class="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-700/50 rounded-2xl border border-slate-200 dark:border-slate-600 group hover:bg-slate-100 dark:hover:bg-slate-600/50 transition-all cursor-pointer min-w-0">
<div class="flex items-center gap-3 min-w-0 flex-1">
<span class="text-xl flex-shrink-0">📁</span>
<div class="flex flex-col min-w-0">
<span class="text-[14px] font-bold text-slate-800 dark:text-slate-100 truncate pr-2">ไฟล์แบบฝึกหัด.zip</span>
<span class="text-[11px] font-black text-slate-500 dark:text-slate-400 uppercase">15 MB</span>
</div>
</div>
<button class="w-8 h-8 rounded-full flex items-center justify-center bg-slate-100 dark:bg-slate-700/50 group-hover:bg-blue-600 text-slate-600 dark:text-slate-400 group-hover:text-white transition-all text-xs flex-shrink-0">↓</button>
</a>
<a :href="att.file_path" target="_blank" class="w-8 h-8 rounded-full flex items-center justify-center bg-slate-100 dark:bg-slate-700/50 group-hover:bg-blue-600 text-slate-600 dark:text-slate-400 group-hover:text-white transition-all text-xs flex-shrink-0">↓</a>
</div>
</div>
</div>
<!-- Navigation Actions (Desktop Only - Inside Column) -->
<div class="hidden md:flex flex-col gap-4">
<button class="w-full py-5 bg-blue-600 hover:bg-blue-500 rounded-2xl text-[14px] font-black text-white shadow-xl shadow-blue-600/20 transition-all active:scale-95">
<button v-if="currentLesson.next_lesson_id" @click="loadLesson(currentLesson.next_lesson_id)" class="w-full py-5 bg-blue-600 hover:bg-blue-500 rounded-2xl text-[14px] font-black text-white shadow-xl shadow-blue-600/20 transition-all active:scale-95">
บทเรียนถัดไป
</button>
<button class="w-full py-5 bg-slate-800 hover:bg-slate-700 rounded-2xl text-[14px] font-black text-slate-300 transition-all ring-1 ring-white/10">
<button v-if="currentLesson.prev_lesson_id" @click="loadLesson(currentLesson.prev_lesson_id)" class="w-full py-5 bg-slate-800 hover:bg-slate-700 rounded-2xl text-[14px] font-black text-slate-300 transition-all ring-1 ring-white/10">
บทเรียนก่อนหน้า
</button>
</div>
</div>
</div>
<div v-else-if="isLessonLoading" class="text-center pt-20 text-white">
<span class="loading-spinner">กำลังโหลดบทเรียน...</span>
</div>
<div v-else class="text-center pt-20 text-slate-400">
กรุณาเลือกบทเรียนจากเมนูด้านซ้าย
</div>
</div>
<!-- Sticky Bottom Bar (Mobile Only) -->
<div v-if="activeTab === 'details'" class="md:hidden fixed bottom-0 inset-x-0 p-4 bg-white dark:bg-slate-900/90 dark:backdrop-blur-xl border-t border-slate-300 dark:border-white/5 z-[100] flex gap-3 transition-colors">
<button class="flex-1 py-4 bg-slate-800 rounded-xl text-xs font-black text-slate-300 ring-1 ring-white/10">
<div v-if="activeTab === 'details' && currentLesson" class="md:hidden fixed bottom-0 inset-x-0 p-4 bg-white dark:bg-slate-900/90 dark:backdrop-blur-xl border-t border-slate-300 dark:border-white/5 z-[100] flex gap-3 transition-colors">
<button v-if="currentLesson.prev_lesson_id" @click="loadLesson(currentLesson.prev_lesson_id)" class="flex-1 py-4 bg-slate-800 rounded-xl text-xs font-black text-slate-300 ring-1 ring-white/10">
ย้อนกลับ
</button>
<button class="flex-[2] py-4 bg-blue-600 rounded-xl text-xs font-black text-white shadow-lg shadow-blue-600/20">
<button v-if="currentLesson.next_lesson_id" @click="loadLesson(currentLesson.next_lesson_id)" class="flex-[2] py-4 bg-blue-600 rounded-xl text-xs font-black text-white shadow-lg shadow-blue-600/20">
บทเรียนถัดไป
</button>
</div>
@ -485,3 +592,4 @@ const seek = (e: MouseEvent) => {
.learning-sidebar.open { transform: translateX(320px); }
}
</style>