feat: Implement initial e-learning platform frontend structure including dashboard, course management, authentication, and common UI components.
This commit is contained in:
supalerk-ar66
parent
aceeb80d9a
commit
ad11c6b7c5
44 changed files with 720 additions and 578 deletions
|
|
@ -22,7 +22,7 @@ const { user } = useAuth()
|
|||
const { fetchCourseLearningInfo, fetchLessonContent, saveVideoProgress, checkLessonAccess, fetchVideoProgress, fetchCourseAnnouncements, markLessonComplete, getLocalizedText } = useCourse()
|
||||
const $q = useQuasar()
|
||||
|
||||
// State management
|
||||
// การจัดการสถานะ (State management)
|
||||
const sidebarOpen = ref(false)
|
||||
const courseId = computed(() => Number(route.query.course_id))
|
||||
|
||||
|
|
@ -31,11 +31,11 @@ const courseId = computed(() => Number(route.query.course_id))
|
|||
// ==========================================
|
||||
// courseData: เก็บข้อมูลโครงสร้างคอร์ส (บทเรียนต่างๆ)
|
||||
const courseData = ref<any>(null)
|
||||
const announcements = ref<any[]>([]) // Announcements state
|
||||
const showAnnouncementsModal = ref(false) // Modal state
|
||||
const hasUnreadAnnouncements = ref(false) // Unread state tracking
|
||||
const announcements = ref<any[]>([]) // สถานะของประกาศ (Announcements state)
|
||||
const showAnnouncementsModal = ref(false) // สถานะของป๊อปอัป (Modal state)
|
||||
const hasUnreadAnnouncements = ref(false) // ติดตามสถานะที่ยังไม่ได้อ่าน (Unread state tracking)
|
||||
|
||||
// Helper for persistent read status
|
||||
// ฟังก์ชันช่วยเหลือสำหรับเก็บสถานะการอ่านถาวร (Helper for persistent read status)
|
||||
const getAnnouncementStorageKey = () => {
|
||||
if (!user.value?.id || !courseId.value) return ''
|
||||
return `read_announcements:${user.value.id}:${courseId.value}`
|
||||
|
|
@ -61,17 +61,17 @@ const checkUnreadAnnouncements = () => {
|
|||
const lastReadDate = new Date(lastRead).getTime()
|
||||
const hasNew = announcements.value.some(a => {
|
||||
const annDate = new Date(a.created_at || Date.now()).getTime()
|
||||
// Check if announcement is strictly newer than last read
|
||||
// ตรวจสอบว่าประกาศใหม่กว่าที่อ่านครั้งล่าสุดหรือไม่ (Check if announcement is strictly newer than last read)
|
||||
return annDate > lastReadDate
|
||||
})
|
||||
|
||||
hasUnreadAnnouncements.value = hasNew
|
||||
}
|
||||
|
||||
// Handler for opening announcements
|
||||
// ฟังก์ชันจัดการเมื่อเปิดประกาศ (Handler for opening announcements)
|
||||
const handleOpenAnnouncements = () => {
|
||||
showAnnouncementsModal.value = true
|
||||
hasUnreadAnnouncements.value = false // Clear unread badge on click
|
||||
hasUnreadAnnouncements.value = false // ลบป้ายแจ้งเตือนเมื่อคลิก (Clear unread badge on click)
|
||||
|
||||
const key = getAnnouncementStorageKey()
|
||||
if (key) {
|
||||
|
|
@ -98,7 +98,7 @@ const toggleSidebar = () => {
|
|||
sidebarOpen.value = !sidebarOpen.value
|
||||
}
|
||||
|
||||
// Logic Quiz Attempt Management
|
||||
// การจัดการตรรกะจำนวนครั้งในการทำแบบทดสอบ (Logic Quiz Attempt Management)
|
||||
const quizStatus = computed(() => {
|
||||
if (!currentLesson.value || currentLesson.value.type !== 'QUIZ' || !currentLesson.value.quiz) return null
|
||||
|
||||
|
|
@ -106,7 +106,7 @@ const quizStatus = computed(() => {
|
|||
const latestAttempt = quiz.latest_attempt
|
||||
const allowMultiple = quiz.allow_multiple_attempts
|
||||
|
||||
// If never attempted
|
||||
// หากยังไม่เคยทดสอบ (If never attempted)
|
||||
if (!latestAttempt) {
|
||||
return {
|
||||
canStart: true,
|
||||
|
|
@ -116,7 +116,7 @@ const quizStatus = computed(() => {
|
|||
}
|
||||
}
|
||||
|
||||
// If multiple attempts allowed
|
||||
// หากอนุญาตให้ทดสอบได้หลายครั้ง (If multiple attempts allowed)
|
||||
if (allowMultiple) {
|
||||
return {
|
||||
canStart: true,
|
||||
|
|
@ -128,8 +128,8 @@ const quizStatus = computed(() => {
|
|||
}
|
||||
}
|
||||
|
||||
// allowMultiple is false (Single attempt only)
|
||||
// Lock the quiz regardless of pass/fail once attempted
|
||||
// ไม่อนุญาตให้สอบได้หลายครั้ง (allowMultiple is false (Single attempt only))
|
||||
// ล็อกแบบทดสอบหลังทำเสร็จไม่ว่าจะผ่านหรือไม่ผ่าน (Lock the quiz regardless of pass/fail once attempted)
|
||||
return {
|
||||
canStart: false,
|
||||
label: latestAttempt.is_passed ? t('quiz.passedStatus') : t('quiz.failedStatus'),
|
||||
|
|
@ -145,7 +145,7 @@ const handleStartQuiz = () => {
|
|||
|
||||
const quiz = currentLesson.value.quiz
|
||||
|
||||
// If multiple attempts are disabled and it's the first time
|
||||
// หากทำได้ครั้งเดียวและนี่เป็นครั้งแรก (If multiple attempts are disabled and it's the first time)
|
||||
if (!quiz.allow_multiple_attempts && !quiz.latest_attempt) {
|
||||
$q.dialog({
|
||||
title: `<div class="text-slate-900 dark:text-white font-black text-xl">${t('quiz.warningTitle')}</div>`,
|
||||
|
|
@ -193,18 +193,18 @@ const resetAndNavigate = (path: string) => {
|
|||
}
|
||||
}
|
||||
|
||||
// 2. Clear all localStorage
|
||||
// 2. ลบข้อมูลใน localStorage ทั้งหมด (Clear all localStorage)
|
||||
localStorage.clear()
|
||||
|
||||
// 3. Restore ONLY whitelisted keys
|
||||
// 3. คืนค่าเฉพาะคีย์ที่อนุญาต (Restore ONLY whitelisted keys)
|
||||
Object.keys(whitelist).forEach(key => {
|
||||
localStorage.setItem(key, whitelist[key])
|
||||
})
|
||||
|
||||
// 4. Force hard reload to the new path
|
||||
// 4. บังคับโหลดหน้าเว็บใหม่ไปยังเส้นทางใหม่ (Force hard reload to the new path)
|
||||
window.location.href = path
|
||||
} else {
|
||||
// SSR Fallback
|
||||
// การทำงานสำรองสำหรับ SSR (SSR Fallback)
|
||||
router.push(path)
|
||||
}
|
||||
}
|
||||
|
|
@ -213,13 +213,13 @@ const resetAndNavigate = (path: string) => {
|
|||
const handleLessonSelect = (lessonId: number) => {
|
||||
if (currentLesson.value?.id === lessonId) return
|
||||
|
||||
// 1. Update URL query params
|
||||
// 1. อัปเดตพารามิเตอร์ใน URL (Update URL query params)
|
||||
router.push({ query: { ...route.query, lesson_id: lessonId.toString() } })
|
||||
|
||||
// 2. Load content without refresh
|
||||
// 2. โหลดเนื้อหาโดยไม่ต้องรีเฟรชหน้าเว็บ (Load content without refresh)
|
||||
loadLesson(lessonId)
|
||||
|
||||
// Close sidebar on mobile
|
||||
// ปิดแถบด้านข้างบนมือถือ (Close sidebar on mobile)
|
||||
if (sidebarOpen.value) {
|
||||
sidebarOpen.value = false
|
||||
}
|
||||
|
|
@ -245,7 +245,7 @@ const loadCourseData = async () => {
|
|||
if (res.success) {
|
||||
courseData.value = res.data
|
||||
|
||||
// Auto-load logic: Check URL first, fallback to first available lesson
|
||||
// ตรรกะการโหลดอัตโนมัติ: เช็ค URL ก่อน หากไม่มีให้โหลดบทเรียนแรก (Auto-load logic: Check URL first, fallback to first available lesson)
|
||||
const urlLessonId = route.query.lesson_id ? Number(route.query.lesson_id) : null
|
||||
|
||||
if (urlLessonId) {
|
||||
|
|
@ -258,7 +258,7 @@ const loadCourseData = async () => {
|
|||
}
|
||||
}
|
||||
|
||||
// Fetch Course Announcements
|
||||
// ดึงข้อมูลประกาศของคอร์สเรียน (Fetch Course Announcements)
|
||||
const annRes = await fetchCourseAnnouncements(courseId.value)
|
||||
if (annRes.success) {
|
||||
announcements.value = annRes.data || []
|
||||
|
|
@ -275,7 +275,7 @@ const loadCourseData = async () => {
|
|||
const loadLesson = async (lessonId: number) => {
|
||||
if (currentLesson.value?.id === lessonId) return
|
||||
|
||||
// Clear previous video state & unload component to force reset
|
||||
// ล้างสถานะวิดีโอเดิมเพื่อบังคับตั้งค่าใหม่ (Clear previous video state & unload component to force reset)
|
||||
isPlaying.value = false
|
||||
videoProgress.value = 0
|
||||
currentTime.value = 0
|
||||
|
|
@ -285,16 +285,16 @@ const loadLesson = async (lessonId: number) => {
|
|||
lastSavedTimestamp.value = 0
|
||||
lastLocalSaveTimestamp.value = 0
|
||||
currentDuration.value = 0
|
||||
currentLesson.value = null // This will unmount VideoPlayer and hide content
|
||||
currentLesson.value = null // ตัวนี้จะทำการซ่อนวิดีโอและซ่อนเนื้อหา (This will unmount VideoPlayer and hide content)
|
||||
|
||||
isLessonLoading.value = true
|
||||
try {
|
||||
// Optional: Check access first
|
||||
// ป้องกันไว้ก่อน: ตรวจสอบสิทธิ์การเข้าถึง (Optional: Check access first)
|
||||
const accessRes = await checkLessonAccess(courseId.value, lessonId)
|
||||
if (accessRes.success && !accessRes.data.is_accessible) {
|
||||
let msg = t('classroom.notAvailable')
|
||||
|
||||
// Handle specific lock reasons
|
||||
// จัดการเหตุผลล็อกเฉพาะจุด (Handle specific lock reasons)
|
||||
if (accessRes.data.lock_reason) {
|
||||
msg = accessRes.data.lock_reason
|
||||
} else if (accessRes.data.required_quiz_pass && !accessRes.data.required_quiz_pass.is_passed) {
|
||||
|
|
@ -314,32 +314,32 @@ const loadLesson = async (lessonId: number) => {
|
|||
return
|
||||
}
|
||||
|
||||
// 1. Fetch content
|
||||
// 1. ดึงข้อมูลเนื้อหา (Fetch content)
|
||||
const res = await fetchLessonContent(courseId.value, lessonId)
|
||||
if (res.success) {
|
||||
currentLesson.value = res.data
|
||||
|
||||
// Initialize progress object if missing (Critical for New Users)
|
||||
// กำหนดค่าออบเจ็กต์ความคืบหน้าหากไม่มี (สำคัญสำหรับผู้ใช้ใหม่) (Initialize progress object if missing)
|
||||
if (!currentLesson.value.progress) {
|
||||
currentLesson.value.progress = {}
|
||||
}
|
||||
|
||||
// Update Lesson Completion UI status safely
|
||||
// อัปเดตสถานะสำเร็จของบทเรียนบน UI อย่างปลอดภัย (Update Lesson Completion UI status safely)
|
||||
if (currentLesson.value?.progress?.is_completed && courseData.value) {
|
||||
for (const chapter of courseData.value.chapters) {
|
||||
const lesson = chapter.lessons.find((l: any) => l.id === lessonId)
|
||||
if (lesson) {
|
||||
if (!lesson.progress) lesson.progress = {}
|
||||
lesson.progress.is_completed = true
|
||||
lesson.is_completed = true // Standardize completion property
|
||||
lesson.is_completed = true // ตั้งค่าสถานะสำเร็จให้เป็นมาตรฐาน (Standardize completion property)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 2. Fetch Initial Progress (Resume Playback)
|
||||
// 2. ดึงความคืบหน้าเริ่มต้นเพื่อเล่นต่อ (Fetch Initial Progress (Resume Playback))
|
||||
if (currentLesson.value.type === 'VIDEO') {
|
||||
// If already completed, clear local resume point to allow fresh re-watch
|
||||
// หากเรียนจบแล้ว ให้ล้างจุดที่ดูล่าสุดเพื่อดูใหม่ได้ (If already completed, clear local resume point to allow fresh re-watch)
|
||||
const isCompleted = currentLesson.value.progress?.is_completed || false
|
||||
|
||||
if (isCompleted) {
|
||||
|
|
@ -351,7 +351,7 @@ const loadLesson = async (lessonId: number) => {
|
|||
maxWatchedTime.value = 0
|
||||
currentTime.value = 0
|
||||
} else {
|
||||
// Not completed? Resume from where we left off
|
||||
// ถ้ายังเรียนไม่จบ? กลับไปเล่นจากจุดเดิม (Not completed? Resume from where we left off)
|
||||
const progressRes = await fetchVideoProgress(lessonId)
|
||||
let serverProgress = 0
|
||||
if (progressRes.success && progressRes.data?.video_progress_seconds) {
|
||||
|
|
@ -379,24 +379,24 @@ const loadLesson = async (lessonId: number) => {
|
|||
}
|
||||
}
|
||||
|
||||
// Video Player Ref (Component)
|
||||
// ข้อมูลอ้างอิงวิดีโอ (Video Player Ref (Component))
|
||||
const videoPlayerComp = ref(null)
|
||||
|
||||
// Video & Progress State
|
||||
// สถานะความก้าวหน้าและวิดีโอ (Video & Progress State)
|
||||
const initialSeekTime = ref(0)
|
||||
const maxWatchedTime = ref(0) // Anti-rewind monotonic tracking
|
||||
const maxWatchedTime = ref(0) // การติดตามแบบไม่ย้อนกลับ (Anti-rewind monotonic tracking)
|
||||
const lastSavedTime = ref(-1)
|
||||
const lastSavedTimestamp = ref(0) // Server throttle timestamp
|
||||
const lastLocalSaveTimestamp = ref(0) // Local throttle timestamp
|
||||
const currentDuration = ref(0) // Track duration for save logic
|
||||
const lastSavedTimestamp = ref(0) // เวลาบันทึกในเซิร์ฟเวอร์ (Server throttle timestamp)
|
||||
const lastLocalSaveTimestamp = ref(0) // เวลาบันทึกในเครื่อง (Local throttle timestamp)
|
||||
const currentDuration = ref(0) // ติดตามเวลาของวิดีโอ (Track duration for save logic)
|
||||
|
||||
// Helper: Get Local Storage Key
|
||||
// ฟังก์ชันช่วยเหลือ: ชื่อคีย์สำหรับ Local Storage (Helper: Get Local Storage Key)
|
||||
const getLocalProgressKey = (lessonId: number) => {
|
||||
if (!user.value?.id) return null
|
||||
return `progress:${user.value.id}:${lessonId}`
|
||||
}
|
||||
|
||||
// Helper: Get Local Progress
|
||||
// ฟังก์ชันช่วยเหลือ: ดึงความคืบหน้าจากเครื่อง (Helper: Get Local Progress)
|
||||
const getLocalProgress = (lessonId: number): number => {
|
||||
try {
|
||||
const key = getLocalProgressKey(lessonId)
|
||||
|
|
@ -408,7 +408,7 @@ const getLocalProgress = (lessonId: number): number => {
|
|||
}
|
||||
}
|
||||
|
||||
// Helper: Save to Local Storage
|
||||
// ฟังก์ชันช่วยเหลือ: บันทึกลงเครื่อง (Helper: Save to Local Storage)
|
||||
const saveLocalProgress = (lessonId: number, time: number) => {
|
||||
try {
|
||||
const key = getLocalProgressKey(lessonId)
|
||||
|
|
@ -416,31 +416,31 @@ const saveLocalProgress = (lessonId: number, time: number) => {
|
|||
localStorage.setItem(key, time.toString())
|
||||
}
|
||||
} catch (e) {
|
||||
// Ignore storage errors
|
||||
// ข้ามกรณีเกิดข้อผิดพลาดในการบันทึก (Ignore storage errors)
|
||||
}
|
||||
}
|
||||
|
||||
// Handler: Video Time Update (from Component)
|
||||
// ฟังก์ชันจัดการเวลาของวิดีโอ (จาก Component) (Handler: Video Time Update (from Component))
|
||||
const handleVideoTimeUpdate = (cTime: number, dur: number) => {
|
||||
currentDuration.value = dur || 0
|
||||
|
||||
// Update Monotonic Progress
|
||||
// อัปเดตความคืบหน้าแบบทางเดียว (Update Monotonic Progress)
|
||||
if (cTime > maxWatchedTime.value) {
|
||||
maxWatchedTime.value = cTime
|
||||
}
|
||||
|
||||
// Logic: Periodic Save
|
||||
// ตรรกะ: บันทึกเป็นระยะ (Logic: Periodic Save)
|
||||
if (currentLesson.value?.id) {
|
||||
const now = Date.now()
|
||||
|
||||
// 1. Local Save Throttle (5 seconds)
|
||||
// 1. การหน่วงเวลาบันทึกในเครื่อง (5 วินาที) (Local Save Throttle (5 seconds))
|
||||
if (now - lastLocalSaveTimestamp.value > 5000) {
|
||||
saveLocalProgress(currentLesson.value.id, maxWatchedTime.value)
|
||||
lastLocalSaveTimestamp.value = now
|
||||
}
|
||||
|
||||
// 2. Server Save Throttle (handled inside performSaveProgress)
|
||||
// Note: We don't check isPlaying here because if time is updating, it IS playing.
|
||||
// 2. การหน่วงเวลาบันทึกบนเซิร์ฟเวอร์ (จัดการใน performSaveProgress)
|
||||
// หมายเหตุ: เราไม่เช็ค isPlaying ตรงนี้เพราะถ้าเวลาเดินแปลว่าเล่นอยู่ (Note: We don't check isPlaying here because if time is updating, it IS playing.)
|
||||
performSaveProgress(false, false)
|
||||
}
|
||||
}
|
||||
|
|
@ -451,49 +451,49 @@ const onVideoMetadataLoaded = (duration: number) => {
|
|||
}
|
||||
}
|
||||
|
||||
const isCompleting = ref(false) // Flag to prevent race conditions during completion
|
||||
const isCompleting = ref(false) // ตัวแปรกันการแย่งกันทำงานตอนเรียนจบ (Flag to prevent race conditions during completion)
|
||||
|
||||
// -----------------------------------------------------
|
||||
// ROBUST PROGRESS SAVING SYSTEM (Hybrid: Local + Server)
|
||||
// ระบบบันทึกความคืบหน้าที่แข็งแกร่ง (ไฮบริด: ในเครื่อง + เซิร์ฟเวอร์) (ROBUST PROGRESS SAVING SYSTEM (Hybrid: Local + Server))
|
||||
// -----------------------------------------------------
|
||||
|
||||
// Main Server Save Function
|
||||
// ฟังก์ชันหลักสำหรับบันทึกลงเซิร์ฟเวอร์ (Main Server Save Function)
|
||||
const performSaveProgress = async (force: boolean = false, keepalive: boolean = false) => {
|
||||
const lesson = currentLesson.value
|
||||
if (!lesson || lesson.type !== 'VIDEO') return
|
||||
|
||||
// Ensure progress object exists
|
||||
// ทำให้แน่ใจว่ามีออบเจ็กต์ความคืบหน้าอยู่ (Ensure progress object exists)
|
||||
if (!lesson.progress) lesson.progress = {}
|
||||
|
||||
// 1. Completed Guard: Stop everything if already completed
|
||||
// 1. ป้องกันเมื่อดูจบแล้ว: ไม่ต้องบันทึกอีกถ้าดูจบไปแล้ว (Completed Guard: Stop everything if already completed)
|
||||
if (lesson.progress.is_completed) return
|
||||
|
||||
// 2. Race Condition Guard: Stop if currently completing
|
||||
// 2. ป้องกันการเรียกซ้ำ: ไม่ทำงานถ้ากำลังบันทึกเวลาจบอยู่ (Race Condition Guard: Stop if currently completing)
|
||||
if (isCompleting.value) return
|
||||
|
||||
const now = Date.now()
|
||||
const maxSec = Math.floor(maxWatchedTime.value) // Use max watched time
|
||||
const maxSec = Math.floor(maxWatchedTime.value) // ใช้เวลาที่ดูไปมากที่สุด (Use max watched time)
|
||||
const durationSec = Math.floor(currentDuration.value || 0)
|
||||
|
||||
// 3. Monotonic Check: Allow saving 0 if it's the very first save (lastSavedTime is -1)
|
||||
// 3. ตรวจสอบการเดินหน้า: ยอมให้บันทึก 0 ได้ถ้าเป็นการบันทึกครั้งแรก (lastSavedTime is -1) (Monotonic Check: Allow saving 0 if it's the very first save)
|
||||
if (!force) {
|
||||
if (lastSavedTime.value === -1) {
|
||||
// First time save: allow 0 or more
|
||||
// บันทึกครั้งแรก: ยอมรับ 0 หรือมากกว่า (First time save: allow 0 or more)
|
||||
if (maxSec < 0) return
|
||||
} else if (maxSec <= lastSavedTime.value) {
|
||||
// Subsequent saves: must be greater than last saved
|
||||
// การบันทึกครั้งถัดไป: ต้องมากกว่าครั้งล่าสุด (Subsequent saves: must be greater than last saved)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// 4. Throttle Check: Server Throttle (15 seconds)
|
||||
// 4. ตรวจสอบการหน่วงเวลา: เซิร์ฟเวอร์ (15 วินาที) (Throttle Check: Server Throttle (15 seconds))
|
||||
if (!force && (now - lastSavedTimestamp.value < 15000)) return
|
||||
|
||||
// Prepare for Save
|
||||
// เตรียมบันทึก (Prepare for Save)
|
||||
lastSavedTime.value = maxSec
|
||||
lastSavedTimestamp.value = now
|
||||
|
||||
// Check if this save might complete the lesson (e.g. 100% or forced end)
|
||||
// เช็คว่าการบันทึกนี้จะทำให้จบบทเรียนหรือไม่ (เช่น 100% หรือบังคับจบ) (Check if this save might complete the lesson)
|
||||
const isFinishing = force || (durationSec > 0 && maxSec >= durationSec)
|
||||
|
||||
if (isFinishing) {
|
||||
|
|
@ -503,8 +503,8 @@ const performSaveProgress = async (force: boolean = false, keepalive: boolean =
|
|||
try {
|
||||
const res = await saveVideoProgress(lesson.id, maxSec, durationSec, keepalive)
|
||||
|
||||
// Handle Completion (Frontend-only strategy: 95% threshold)
|
||||
// This ensures the checkmark appears at 95% to match backend.
|
||||
// จัดการเมื่อดูจบ (กลยุทธ์เฉพาะฝั่งหน้าเว็บ: ให้ผ่านที่ 95%) (Handle Completion (Frontend-only strategy: 95% threshold))
|
||||
// เพื่อให้เครื่องหมายถูกขึ้นที่ 95% ตรงกับหลังบ้าน (This ensures the checkmark appears at 95% to match backend.)
|
||||
const progressPercentage = durationSec > 0 ? (maxSec / durationSec) : 0
|
||||
const isCompletedNow = res.success && (res.data?.is_completed || progressPercentage >= 0.95)
|
||||
|
||||
|
|
@ -513,7 +513,7 @@ const performSaveProgress = async (force: boolean = false, keepalive: boolean =
|
|||
markLessonAsCompletedLocally(lesson.id)
|
||||
if (lesson.progress) lesson.progress.is_completed = true
|
||||
|
||||
// If newly completed, reload course data to unlock next lesson in sidebar
|
||||
// หากเพิ่งเรียนจบใหม่ ให้โหลดเนื้อหาใหม่เพื่อปลดล็อกบทถัดไป (If newly completed, reload course data to unlock next lesson in sidebar)
|
||||
if (!wasAlreadyCompleted) {
|
||||
await loadCourseData()
|
||||
}
|
||||
|
|
@ -527,13 +527,13 @@ const performSaveProgress = async (force: boolean = false, keepalive: boolean =
|
|||
}
|
||||
}
|
||||
|
||||
// Helper to update Sidebar UI
|
||||
// ฟังก์ชันช่วยเหลือสำหรับอัปเดตแถบด้านข้าง (Helper to update Sidebar UI)
|
||||
const markLessonAsCompletedLocally = (lessonId: number) => {
|
||||
if (courseData.value) {
|
||||
for (const chapter of courseData.value.chapters) {
|
||||
const lesson = chapter.lessons.find((l: any) => l.id === lessonId)
|
||||
if (lesson) {
|
||||
// Compatible with API structure
|
||||
// สอดคล้องกับโครงสร้าง API (Compatible with API structure)
|
||||
lesson.is_completed = true
|
||||
if (!lesson.progress) lesson.progress = {}
|
||||
lesson.progress.is_completed = true
|
||||
|
|
@ -547,11 +547,11 @@ const videoSrc = computed(() => {
|
|||
if (!currentLesson.value) return ''
|
||||
let url = ''
|
||||
|
||||
// Use explicit video_url from API first
|
||||
// ใช่ video_url โดยตรงจาก API ก่อน (Use explicit video_url from API first)
|
||||
if (currentLesson.value.video_url) {
|
||||
url = currentLesson.value.video_url
|
||||
} else {
|
||||
// Fallback (deprecated logic)
|
||||
// สำรอง (ตรรกะแบบเก่า)
|
||||
const content = getLocalizedText(currentLesson.value.content)
|
||||
if (content && (content.startsWith('http') || content.startsWith('/')) && !content.includes(' ')) {
|
||||
url = content
|
||||
|
|
@ -560,7 +560,7 @@ const videoSrc = computed(() => {
|
|||
|
||||
if (!url) return ''
|
||||
|
||||
// Support Resume for YouTube
|
||||
// รองรับการเล่นต่อสำหรับ YouTube (Support Resume for YouTube)
|
||||
const isYoutube = url.toLowerCase().includes('youtube.com') || url.toLowerCase().includes('youtu.be')
|
||||
if (isYoutube && initialSeekTime.value > 0) {
|
||||
const separator = url.includes('?') ? '&' : '?'
|
||||
|
|
@ -575,7 +575,7 @@ const onVideoEnded = async () => {
|
|||
const lesson = currentLesson.value
|
||||
if (!lesson) return
|
||||
|
||||
// Clear local storage on end since it's completed
|
||||
// ล้าง localStorage เนื่องจากดจบแล้ว (Clear local storage on end since it's completed)
|
||||
const key = getLocalProgressKey(lesson.id)
|
||||
if (key && typeof window !== 'undefined') {
|
||||
localStorage.removeItem(key)
|
||||
|
|
@ -598,7 +598,7 @@ onMounted(() => {
|
|||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// Clear state when leaving the page to ensure fresh start on return
|
||||
// ล้างสถานะเมื่อออกจากหน้าเพื่อให้หน้าเหมือนใหม่ตอนกลับมา (Clear state when leaving the page to ensure fresh start on return)
|
||||
courseData.value = null
|
||||
currentLesson.value = null
|
||||
})
|
||||
|
|
@ -665,7 +665,7 @@ onBeforeUnmount(() => {
|
|||
</q-toolbar>
|
||||
</q-header>
|
||||
|
||||
<!-- Sidebar (Curriculum) - Positioned Right via component prop -->
|
||||
<!-- แถบด้านข้าง (บทเรียน) - วางชิดขวาผ่านพร็อพพ์ -->
|
||||
<CurriculumSidebar
|
||||
v-model="sidebarOpen"
|
||||
:courseData="courseData"
|
||||
|
|
@ -676,14 +676,14 @@ onBeforeUnmount(() => {
|
|||
@open-announcements="handleOpenAnnouncements"
|
||||
/>
|
||||
|
||||
<!-- Main Content -->
|
||||
<!-- พื้นที่เนื้อหาหลัก (Main Content) -->
|
||||
<q-page-container class="bg-white dark:bg-slate-900">
|
||||
<q-page class="flex flex-col h-full bg-slate-50 dark:bg-[#0B0F1A]">
|
||||
<!-- Video Player & Content Area -->
|
||||
<!-- กรอบวิดีโอและพื้นที่เนื้อหา (Video Player & Content Area) -->
|
||||
<div class="w-full h-full p-4 md:p-6 flex-grow overflow-y-auto">
|
||||
<!-- 1. LOADING STATE (Comprehensive Skeleton) -->
|
||||
<!-- 1. สถานะกำลังโหลด (โครงสร้างเสมือน (Skeleton) สมบูรณ์แบบ) (LOADING STATE (Comprehensive Skeleton)) -->
|
||||
<div v-if="isLessonLoading" class="animate-fade-in">
|
||||
<!-- Video Skeleton -->
|
||||
<!-- โครงภาพวิดีโอ (Video Skeleton) -->
|
||||
<div class="aspect-video bg-slate-200 dark:bg-slate-800 rounded-3xl animate-pulse flex items-center justify-center mb-10 overflow-hidden relative shadow-xl focus:outline-none">
|
||||
<img
|
||||
v-if="courseData?.course?.thumbnail_url"
|
||||
|
|
@ -697,7 +697,7 @@ onBeforeUnmount(() => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info Skeleton -->
|
||||
<!-- โครงข้อมูล (Info Skeleton) -->
|
||||
<div class="bg-white dark:bg-slate-800/50 p-8 rounded-3xl border border-slate-100 dark:border-white/5 shadow-sm">
|
||||
<div class="h-10 bg-slate-200 dark:bg-slate-800 rounded-xl w-3/4 mb-4 animate-pulse"></div>
|
||||
<div class="h-4 bg-slate-100 dark:bg-slate-800 rounded-lg w-full mb-2 animate-pulse"></div>
|
||||
|
|
@ -705,9 +705,9 @@ onBeforeUnmount(() => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. READY STATE (Real Lesson Content) -->
|
||||
<!-- 2. สถานะพร้อมใช้งาน (ข้อมูลบทเรียนจริง) (READY STATE (Real Lesson Content)) -->
|
||||
<div v-else-if="currentLesson" class="animate-fade-in">
|
||||
<!-- Video Player -->
|
||||
<!-- ส่วนการเล่นวิดีโอ (Video Player) -->
|
||||
<VideoPlayer
|
||||
v-if="videoSrc"
|
||||
ref="videoPlayerComp"
|
||||
|
|
@ -719,7 +719,7 @@ onBeforeUnmount(() => {
|
|||
@loadedmetadata="(d: number) => onVideoMetadataLoaded(d)"
|
||||
/>
|
||||
|
||||
<!-- Lesson Info -->
|
||||
<!-- ข้อมูลบทเรียน (Lesson Info) -->
|
||||
<div class="bg-[var(--bg-surface)] p-6 md:p-8 rounded-3xl shadow-sm border border-[var(--border-color)]">
|
||||
<!-- ใช้สีจากตัวแปรกลาง: จะแยกโหมดให้อัตโนมัติ (สว่าง=ดำ / มืด=ขาว) -->
|
||||
<div class="flex items-start justify-between gap-4 mb-4">
|
||||
|
|
@ -728,7 +728,7 @@ onBeforeUnmount(() => {
|
|||
|
||||
<p class="text-slate-600 dark:text-slate-400 text-base md:text-lg leading-relaxed mb-6" v-if="currentLesson.description">{{ getLocalizedText(currentLesson.description) }}</p>
|
||||
|
||||
<!-- Lesson Content Area (Text/HTML) -->
|
||||
<!-- ช่องบทเรียน (Text/HTML) (Lesson Content Area) -->
|
||||
<div v-if="currentLesson.type === 'QUIZ'" class="p-8 bg-gradient-to-br from-blue-50/50 to-indigo-50/50 dark:from-slate-800/50 dark:to-slate-900/50 rounded-2xl border border-blue-100 dark:border-white/5 text-center">
|
||||
<div class="bg-white dark:bg-slate-800 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4 shadow-sm text-blue-500 dark:text-blue-400 border dark:border-white/10">
|
||||
<q-icon name="quiz" size="40px" />
|
||||
|
|
@ -783,7 +783,7 @@ onBeforeUnmount(() => {
|
|||
<div v-html="getLocalizedText(currentLesson.content)" class="leading-relaxed text-slate-800 dark:text-slate-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Attachments Section -->
|
||||
<!-- ส่วนเอกสารแนบ (Attachments Section) -->
|
||||
<div v-if="currentLesson.attachments && currentLesson.attachments.length > 0" class="mt-8 pt-6 border-t border-gray-100 dark:border-white/5">
|
||||
<h3 class="text-lg font-bold mb-4 text-slate-900 dark:text-white flex items-center gap-2">
|
||||
<div class="w-8 h-8 rounded-lg bg-orange-100 dark:bg-orange-900/30 text-orange-600 flex items-center justify-center">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue