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

feat: Implement the core online learning classroom interface with video player, quiz management, and announcements.

Browse source
This commit is contained in:
supalerk-ar66 2026-02-13 11:42:10 +07:00
parent 11f9ad57cd
commit 21273fcaeb
2 changed files with 72 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -195,9 +195,9 @@ const resetAndNavigate = (path: string) => {
// 2. Clear all localStorage
localStorage.clear()
// 3. Restore whitelisted keys
Object.entries(whitelist).forEach(([key, value]) => {
localStorage.setItem(key, value)
// 3. Restore ONLY whitelisted keys
Object.keys(whitelist).forEach(key => {
localStorage.setItem(key, whitelist[key])
})
// 4. Force hard reload to the new path
@ -278,6 +278,12 @@ const loadLesson = async (lessonId: number) => {
isPlaying.value = false
videoProgress.value = 0
currentTime.value = 0
initialSeekTime.value = 0
maxWatchedTime.value = 0
lastSavedTime.value = -1
lastSavedTimestamp.value = 0
lastLocalSaveTimestamp.value = 0
currentDuration.value = 0
currentLesson.value = null // This will unmount VideoPlayer and hide content
isLessonLoading.value = true
@ -332,27 +338,36 @@ const loadLesson = async (lessonId: number) => {
// 2. Fetch Initial Progress (Resume Playback)
if (currentLesson.value.type === 'VIDEO') {
// A. Server Progress
const progressRes = await fetchVideoProgress(lessonId)
let serverProgress = 0
if (progressRes.success && progressRes.data?.video_progress_seconds) {
serverProgress = progressRes.data.video_progress_seconds
}
// B. Local Progress (Buffer)
const localProgress = getLocalProgress(lessonId)
// If already completed, clear local resume point to allow fresh re-watch
const isCompleted = currentLesson.value.progress?.is_completed || false
// C. Hybrid Resume (Max Wins)
const resumeTime = Math.max(serverProgress, localProgress)
if (resumeTime > 0) {
initialSeekTime.value = resumeTime
maxWatchedTime.value = resumeTime
currentTime.value = resumeTime
} else {
if (isCompleted) {
const key = getLocalProgressKey(lessonId)
if (key && typeof window !== 'undefined') {
localStorage.removeItem(key)
}
initialSeekTime.value = 0
maxWatchedTime.value = 0
currentTime.value = 0
} else {
// Not completed? Resume from where we left off
const progressRes = await fetchVideoProgress(lessonId)
let serverProgress = 0
if (progressRes.success && progressRes.data?.video_progress_seconds) {
serverProgress = progressRes.data.video_progress_seconds
}
const localProgress = getLocalProgress(lessonId)
const resumeTime = Math.max(serverProgress, localProgress)
if (resumeTime > 0) {
initialSeekTime.value = resumeTime
maxWatchedTime.value = resumeTime
currentTime.value = resumeTime
} else {
initialSeekTime.value = 0
maxWatchedTime.value = 0
}
}
}
}
@ -556,13 +571,19 @@ const videoSrc = computed(() => {
// เมื่อวิดีโอจบ ให้บันทึกว่าเรียนจบ (Complete)
const onVideoEnded = async () => {
// Safety check before saving
const lesson = currentLesson.value
if (!lesson || !lesson.progress || lesson.progress.is_completed || isCompleting.value) return
if (!lesson) return
// Clear local storage on end since it's completed
const key = getLocalProgressKey(lesson.id)
if (key && typeof window !== 'undefined') {
localStorage.removeItem(key)
}
if (lesson.progress?.is_completed || isCompleting.value) return
isCompleting.value = true
try {
// Force save progress at 100% to trigger backend completion
await performSaveProgress(true, false)
} catch (err) {
console.error('Failed to save progress on end:', err)