feat: Implement core course management, enrollment, and classroom learning functionalities with new composables and components.
This commit is contained in:
supalerk-ar66
parent
05755992a7
commit
754f211a08
4 changed files with 221 additions and 66 deletions
|
|
@ -12,7 +12,7 @@ const props = defineProps<{
|
|||
const emit = defineEmits<{
|
||||
(e: 'timeupdate', currentTime: number, duration: number): void;
|
||||
(e: 'ended'): void;
|
||||
(e: 'loadedmetadata'): void;
|
||||
(e: 'loadedmetadata', duration: number): void;
|
||||
}>();
|
||||
|
||||
const videoRef = ref<HTMLVideoElement | null>(null);
|
||||
|
|
@ -39,7 +39,115 @@ const formatTime = (time: number) => {
|
|||
const currentTimeDisplay = computed(() => formatTime(currentTime.value));
|
||||
const durationDisplay = computed(() => formatTime(duration.value || 0));
|
||||
|
||||
// YouTube Helper Logic
|
||||
const isYoutube = computed(() => {
|
||||
const s = props.src.toLowerCase();
|
||||
return s.includes('youtube.com') || s.includes('youtu.be');
|
||||
});
|
||||
|
||||
const youtubeEmbedUrl = computed(() => {
|
||||
if (!isYoutube.value) return '';
|
||||
let videoId = '';
|
||||
|
||||
// Extract Video ID
|
||||
if (props.src.includes('youtu.be')) {
|
||||
videoId = props.src.split('youtu.be/')[1]?.split('?')[0];
|
||||
} else {
|
||||
const urlParams = new URLSearchParams(props.src.split('?')[1]);
|
||||
videoId = urlParams.get('v') || '';
|
||||
}
|
||||
|
||||
// Return Embed URL with enablejsapi=1
|
||||
return `https://www.youtube.com/embed/${videoId}?enablejsapi=1&rel=0`;
|
||||
});
|
||||
|
||||
// YouTube API Tracking
|
||||
let ytPlayer: any = null;
|
||||
let ytInterval: any = null;
|
||||
|
||||
const initYoutubeAPI = () => {
|
||||
if (!isYoutube.value || typeof window === 'undefined') return;
|
||||
|
||||
// Load API Script if not exists
|
||||
if (!(window as any).YT) {
|
||||
const tag = document.createElement('script');
|
||||
tag.src = "https://www.youtube.com/iframe_api";
|
||||
const firstScriptTag = document.getElementsByTagName('script')[0];
|
||||
firstScriptTag.parentNode?.insertBefore(tag, firstScriptTag);
|
||||
}
|
||||
|
||||
const setupPlayer = () => {
|
||||
ytPlayer = new (window as any).YT.Player('youtube-iframe', {
|
||||
events: {
|
||||
'onReady': (event: any) => {
|
||||
duration.value = event.target.getDuration();
|
||||
|
||||
// Resume Logic for YouTube
|
||||
if (props.initialSeekTime && props.initialSeekTime > 0) {
|
||||
event.target.seekTo(props.initialSeekTime, true);
|
||||
}
|
||||
|
||||
emit('loadedmetadata', event.target.getDuration());
|
||||
},
|
||||
'onStateChange': (event: any) => {
|
||||
if (event.data === (window as any).YT.PlayerState.PLAYING) {
|
||||
startYTTracking();
|
||||
} else {
|
||||
stopYTTracking();
|
||||
}
|
||||
if (event.data === (window as any).YT.PlayerState.ENDED) {
|
||||
emit('ended');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
if ((window as any).YT && (window as any).YT.Player) {
|
||||
setupPlayer();
|
||||
} else {
|
||||
(window as any).onYouTubeIframeAPIReady = setupPlayer;
|
||||
}
|
||||
};
|
||||
|
||||
const startYTTracking = () => {
|
||||
stopYTTracking();
|
||||
ytInterval = setInterval(() => {
|
||||
if (ytPlayer && ytPlayer.getCurrentTime) {
|
||||
currentTime.value = ytPlayer.getCurrentTime();
|
||||
emit('timeupdate', currentTime.value, duration.value);
|
||||
}
|
||||
}, 1000); // Check every second
|
||||
};
|
||||
|
||||
const stopYTTracking = () => {
|
||||
if (ytInterval) clearInterval(ytInterval);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (isYoutube.value) initYoutubeAPI();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
stopYTTracking();
|
||||
});
|
||||
|
||||
// Watch for src change to re-init
|
||||
watch(() => props.src, () => {
|
||||
if (isYoutube.value) {
|
||||
setTimeout(initYoutubeAPI, 500);
|
||||
}
|
||||
});
|
||||
|
||||
const togglePlay = () => {
|
||||
if (isYoutube.value) {
|
||||
if (ytPlayer && ytPlayer.getPlayerState) {
|
||||
const state = ytPlayer.getPlayerState();
|
||||
if (state === 1) ytPlayer.pauseVideo();
|
||||
else ytPlayer.playVideo();
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (!videoRef.value) return;
|
||||
if (isPlaying.value) videoRef.value.pause();
|
||||
else videoRef.value.play();
|
||||
|
|
@ -63,7 +171,7 @@ const handleLoadedMetadata = () => {
|
|||
videoRef.value.currentTime = seekTo;
|
||||
}
|
||||
}
|
||||
emit('loadedmetadata');
|
||||
emit('loadedmetadata', videoRef.value?.duration || 0);
|
||||
};
|
||||
|
||||
const handleEnded = () => {
|
||||
|
|
@ -72,7 +180,7 @@ const handleEnded = () => {
|
|||
};
|
||||
|
||||
const seek = (e: MouseEvent) => {
|
||||
if (!videoRef.value) return;
|
||||
if (!videoRef.value || !isFinite(videoRef.value.duration)) return;
|
||||
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
|
||||
const percent = (e.clientX - rect.left) / rect.width;
|
||||
videoRef.value.currentTime = percent * videoRef.value.duration;
|
||||
|
|
@ -102,38 +210,52 @@ watch([volume, isMuted], () => {
|
|||
|
||||
<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"
|
||||
/>
|
||||
<!-- 1. YouTube Player -->
|
||||
<iframe
|
||||
v-if="isYoutube"
|
||||
id="youtube-iframe"
|
||||
:src="youtubeEmbedUrl"
|
||||
class="w-full h-full"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
|
||||
<!-- 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>
|
||||
<!-- 2. Standard HTML5 Video Player -->
|
||||
<div v-else class="w-full h-full relative">
|
||||
<video
|
||||
ref="videoRef"
|
||||
:src="src"
|
||||
class="w-full h-full object-contain"
|
||||
@click="togglePlay"
|
||||
@timeupdate="handleTimeUpdate"
|
||||
@loadedmetadata="handleLoadedMetadata"
|
||||
@ended="handleEnded"
|
||||
/>
|
||||
|
||||
<!-- 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"
|
||||
/>
|
||||
<!-- Custom Controls Overlay (Only for HTML5 Video) -->
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -451,6 +451,12 @@ export const useAuth = () => {
|
|||
token.value = null
|
||||
refreshToken.value = null // ลบ Refresh Token
|
||||
user.value = null
|
||||
|
||||
// Reset client-side storage
|
||||
if (import.meta.client) {
|
||||
localStorage.clear()
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
router.push('/auth/login')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -419,14 +419,7 @@ export const useCourse = () => {
|
|||
const data = await $fetch<{ code: number; message: string; data: any }>(`${API_BASE_URL}/students/lessons/${lessonId}/progress`, {
|
||||
method: 'POST',
|
||||
headers: token.value ? {
|
||||
// User Request: "Backend รับ header แบบ Authorization: <token> (ยังไม่ใช้ Bearer)"
|
||||
// Checking existing usage, most use Bearer. I will stick to existing Bearer for consistency unless it fails,
|
||||
// BUT user explicitly said "not using Bearer" in this specific prompt.
|
||||
// To be safe and minimal, I will keep using `Bearer ${token}` if that's what the codebase uses globally,
|
||||
// UNLESS I see strong evidence otherwise.
|
||||
// The user's curl example in Step 209 DOES NOT have "Bearer".
|
||||
// So I will remove it for these 2 functions as requested.
|
||||
Authorization: `${token.value}`
|
||||
Authorization: `Bearer ${token.value}`
|
||||
} : {},
|
||||
body: {
|
||||
video_progress_seconds: progressSeconds,
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ const route = useRoute()
|
|||
const router = useRouter()
|
||||
const { t } = useI18n()
|
||||
const { user } = useAuth()
|
||||
const { fetchCourseLearningInfo, fetchLessonContent, saveVideoProgress, checkLessonAccess, fetchVideoProgress, fetchCourseAnnouncements } = useCourse()
|
||||
const { fetchCourseLearningInfo, fetchLessonContent, saveVideoProgress, checkLessonAccess, fetchVideoProgress, fetchCourseAnnouncements, markLessonComplete } = useCourse()
|
||||
// Media Prefs (Global Volume)
|
||||
const { volume, muted: isMuted, setVolume, setMuted, applyTo } = useMediaPrefs()
|
||||
|
||||
|
|
@ -196,6 +196,11 @@ const loadLesson = async (lessonId: number) => {
|
|||
if (res.success) {
|
||||
currentLesson.value = res.data
|
||||
|
||||
// Initialize progress object if missing (Critical for New Users)
|
||||
if (!currentLesson.value.progress) {
|
||||
currentLesson.value.progress = {}
|
||||
}
|
||||
|
||||
// Update Lesson Completion UI status safely
|
||||
if (currentLesson.value?.progress?.is_completed && courseData.value) {
|
||||
for (const chapter of courseData.value.chapters) {
|
||||
|
|
@ -307,8 +312,10 @@ const handleVideoTimeUpdate = (cTime: number, dur: number) => {
|
|||
}
|
||||
}
|
||||
|
||||
const onVideoMetadataLoaded = () => {
|
||||
// Component handles seek and volume
|
||||
const onVideoMetadataLoaded = (duration: number) => {
|
||||
if (duration > 0) {
|
||||
currentDuration.value = duration
|
||||
}
|
||||
}
|
||||
|
||||
const isCompleting = ref(false) // Flag to prevent race conditions during completion
|
||||
|
|
@ -321,7 +328,9 @@ const isCompleting = ref(false) // Flag to prevent race conditions during comple
|
|||
const performSaveProgress = async (force: boolean = false, keepalive: boolean = false) => {
|
||||
const lesson = currentLesson.value
|
||||
if (!lesson || lesson.type !== 'VIDEO') return
|
||||
if (!lesson.progress) return
|
||||
|
||||
// Ensure progress object exists
|
||||
if (!lesson.progress) lesson.progress = {}
|
||||
|
||||
// 1. Completed Guard: Stop everything if already completed
|
||||
if (lesson.progress.is_completed) return
|
||||
|
|
@ -333,8 +342,16 @@ const performSaveProgress = async (force: boolean = false, keepalive: boolean =
|
|||
const maxSec = Math.floor(maxWatchedTime.value) // Use max watched time
|
||||
const durationSec = Math.floor(currentDuration.value || 0)
|
||||
|
||||
// 3. Monotonic Check: Don't save if progress hasn't increased (unless forced)
|
||||
if (!force && maxSec <= lastSavedTime.value) return
|
||||
// 3. Monotonic Check: Allow saving 0 if it's the very first save (lastSavedTime is -1)
|
||||
if (!force) {
|
||||
if (lastSavedTime.value === -1) {
|
||||
// First time save: allow 0 or more
|
||||
if (maxSec < 0) return
|
||||
} else if (maxSec <= lastSavedTime.value) {
|
||||
// Subsequent saves: must be greater than last saved
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// 4. Throttle Check: Server Throttle (15 seconds)
|
||||
if (!force && (now - lastSavedTimestamp.value < 15000)) return
|
||||
|
|
@ -343,8 +360,8 @@ const performSaveProgress = async (force: boolean = false, keepalive: boolean =
|
|||
lastSavedTime.value = maxSec
|
||||
lastSavedTimestamp.value = now
|
||||
|
||||
// Check if this save might complete the lesson (e.g. > 90% or forced end)
|
||||
const isFinishing = force || (durationSec > 0 && maxSec >= durationSec * 0.9)
|
||||
// Check if this save might complete the lesson (e.g. 100% or forced end)
|
||||
const isFinishing = force || (durationSec > 0 && maxSec >= durationSec)
|
||||
|
||||
if (isFinishing) {
|
||||
isCompleting.value = true
|
||||
|
|
@ -353,7 +370,7 @@ const performSaveProgress = async (force: boolean = false, keepalive: boolean =
|
|||
try {
|
||||
const res = await saveVideoProgress(lesson.id, maxSec, durationSec, keepalive)
|
||||
|
||||
// Handle Completion Response
|
||||
// Handle Completion (Rely on Backend's auto-complete response)
|
||||
if (res.success && res.data?.is_completed) {
|
||||
markLessonAsCompletedLocally(lesson.id)
|
||||
if (lesson.progress) lesson.progress.is_completed = true
|
||||
|
|
@ -385,15 +402,29 @@ const markLessonAsCompletedLocally = (lessonId: number) => {
|
|||
|
||||
const videoSrc = computed(() => {
|
||||
if (!currentLesson.value) return ''
|
||||
// Use explicit video_url from API first
|
||||
if (currentLesson.value.video_url) return currentLesson.value.video_url
|
||||
let url = ''
|
||||
|
||||
// Fallback (deprecated logic, but keeping just in case)
|
||||
const content = getLocalizedText(currentLesson.value.content)
|
||||
if (content && (content.startsWith('http') || content.startsWith('/')) && !content.includes(' ')) {
|
||||
return content
|
||||
// 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
|
||||
}
|
||||
}
|
||||
return ''
|
||||
|
||||
if (!url) return ''
|
||||
|
||||
// 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('?') ? '&' : '?'
|
||||
return `${url}${separator}t=${Math.floor(initialSeekTime.value)}`
|
||||
}
|
||||
|
||||
return url
|
||||
})
|
||||
|
||||
// เมื่อวิดีโอจบ ให้บันทึกว่าเรียนจบ (Complete)
|
||||
|
|
@ -402,12 +433,15 @@ const onVideoEnded = async () => {
|
|||
const lesson = currentLesson.value
|
||||
if (!lesson || !lesson.progress || lesson.progress.is_completed || isCompleting.value) return
|
||||
|
||||
// Force save progress at 100%
|
||||
await performSaveProgress(true, false)
|
||||
|
||||
// Double check completion state
|
||||
if (currentLesson.value && !currentLesson.value.progress?.is_completed) {
|
||||
markLessonAsCompletedLocally(currentLesson.value.id)
|
||||
isCompleting.value = true
|
||||
try {
|
||||
// 1. Force save progress at 100%
|
||||
// This will trigger the backend's auto-complete logic
|
||||
await performSaveProgress(true, false)
|
||||
} catch (err) {
|
||||
console.error('Failed to save progress on end:', err)
|
||||
} finally {
|
||||
isCompleting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -471,7 +505,7 @@ onBeforeUnmount(() => {
|
|||
:initialSeekTime="initialSeekTime"
|
||||
@timeupdate="handleVideoTimeUpdate"
|
||||
@ended="onVideoEnded"
|
||||
@loadedmetadata="onVideoMetadataLoaded"
|
||||
@loadedmetadata="(d: number) => onVideoMetadataLoaded(d)"
|
||||
/>
|
||||
|
||||
<!-- Lesson Info -->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue