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

feat: Implement core e-learning features including video playback, user profile management, and course discovery.

Browse source
This commit is contained in:
supalerk-ar66 2026-02-02 17:13:58 +07:00
parent 2cd1d481aa
commit a648c41b72
11 changed files with 1085 additions and 747 deletions
Download patch file Download diff file Expand all files Collapse all files

94
Frontend-Learner/components/classroom/AnnouncementModal.vue Normal file
View file

@ -0,0 +1,94 @@
<script setup lang="ts">
/**
* @file AnnouncementModal.vue
* @description Modal component to display course announcements
*/
const props = defineProps<{
modelValue: boolean;
announcements: any[];
}>();
const emit = defineEmits<{
(e: 'update:modelValue', value: boolean): void;
}>();
// Helper for localization
const getLocalizedText = (text: any) => {
if (!text) return ''
if (typeof text === 'string') return text
return text.th || text.en || ''
}
</script>
<template>
<q-dialog :model-value="modelValue" @update:model-value="(val) => emit('update:modelValue', val)" backdrop-filter="blur(4px)">
<q-card class="min-w-[320px] md:min-w-[600px] rounded-3xl overflow-hidden bg-white dark:bg-slate-900 shadow-2xl">
<q-card-section class="bg-white dark:bg-slate-900 border-b border-gray-100 dark:border-white/5 p-5 flex items-center justify-between sticky top-0 z-10">
<div>
<div class="text-xl font-bold flex items-center gap-2 text-slate-900 dark:text-white">
<div class="w-10 h-10 rounded-full bg-blue-50 dark:bg-blue-900/30 text-primary flex items-center justify-center">
<q-icon name="campaign" size="22px" />
</div>
{{ $t('classroom.announcements', 'ประกาศในคอร์สเรียน') }}
</div>
<div class="text-xs text-slate-500 dark:text-slate-400 ml-12 mt-1">{{ announcements.length }} รายการ</div>
</div>
<q-btn icon="close" flat round dense v-close-popup class="text-slate-400 hover:text-slate-700 dark:hover:text-white bg-slate-50 dark:bg-slate-800" />
</q-card-section>
<q-card-section class="p-0 scroll max-h-[70vh] bg-slate-50 dark:bg-[#0B0F1A]">
<div v-if="announcements.length > 0" class="p-4 space-y-4">
<div
v-for="(ann, index) in announcements"
:key="index"
class="p-5 rounded-2xl bg-white dark:bg-slate-800 shadow-sm border border-gray-200 dark:border-white/5 transition-all hover:shadow-md relative overflow-hidden group"
:class="{'ring-2 ring-orange-200 dark:ring-orange-900/40 bg-orange-50/50 dark:bg-orange-900/10': ann.is_pinned}"
>
<!-- Pinned Banner -->
<div v-if="ann.is_pinned" class="absolute top-0 right-0 p-3">
<q-icon name="push_pin" color="orange" size="18px" class="transform rotate-45" />
</div>
<div class="flex items-start gap-4 mb-3">
<q-avatar
:color="ann.is_pinned ? 'orange-100' : 'blue-50'"
:text-color="ann.is_pinned ? 'orange-700' : 'blue-700'"
size="42px"
font-size="20px"
class="shadow-sm"
>
<span class="font-bold">{{ (getLocalizedText(ann.title) || 'A').charAt(0) }}</span>
</q-avatar>
<div class="flex-1">
<div class="font-bold text-lg text-slate-900 dark:text-white leading-tight pr-8 capitalize font-display">
{{ getLocalizedText(ann.title) || 'ประกาศ' }}
</div>
<div class="text-xs text-slate-500 dark:text-slate-400 flex items-center gap-2 mt-1.5">
<span class="flex items-center gap-1 bg-slate-100 dark:bg-slate-700 px-2 py-0.5 rounded-md">
<q-icon name="today" size="12px" />
{{ new Date(ann.created_at || Date.now()).toLocaleDateString('th-TH', { day: 'numeric', month: 'short', year: 'numeric' }) }}
</span>
<span class="flex items-center gap-1 bg-slate-100 dark:bg-slate-700 px-2 py-0.5 rounded-md">
<q-icon name="access_time" size="12px" />
{{ new Date(ann.created_at || Date.now()).toLocaleTimeString('th-TH', { hour: '2-digit', minute: '2-digit' }) }}
</span>
</div>
</div>
</div>
<div class="pl-[58px]">
<div class="text-slate-600 dark:text-slate-300 leading-relaxed text-sm whitespace-pre-wrap">
{{ getLocalizedText(ann.content) }}
</div>
</div>
</div>
</div>
<div v-else class="p-10 flex flex-col items-center justify-center text-slate-400">
<q-icon name="campaign" size="40px" class="mb-2 opacity-50" />
<p>{{ $t('classroom.noAnnouncements', 'ไม่มีประกาศในขณะนี้') }}</p>
</div>
</q-card-section>
</q-card>
</q-dialog>
</template>

101
Frontend-Learner/components/classroom/CurriculumSidebar.vue Normal file
View file

@ -0,0 +1,101 @@
<script setup lang="ts">
/**
* @file CurriculumSidebar.vue
* @description Sidebar Component for displaying course curriculum (Chapters & Lessons)
* Handles lesson navigation, locked status display, and unread announcement badge.
*/
const props = defineProps<{
modelValue: boolean; // Sidebar open state (v-model)
courseData: any;
currentLessonId: number;
isLoading: boolean;
hasUnreadAnnouncements: boolean;
}>();
const emit = defineEmits<{
(e: 'update:modelValue', value: boolean): void;
(e: 'select-lesson', lessonId: number): void;
(e: 'open-announcements'): void;
}>();
// Helper for localization
const getLocalizedText = (text: any) => {
if (!text) return ''
if (typeof text === 'string') return text
return text.th || text.en || ''
}
</script>
<template>
<q-drawer
:model-value="modelValue"
@update:model-value="(val) => emit('update:modelValue', val)"
show-if-above
bordered
side="left"
:width="320"
:breakpoint="1024"
class="bg-[var(--bg-surface)]"
content-class="bg-[var(--bg-surface)]"
>
<div v-if="courseData" class="h-full scroll">
<q-list class="pb-10">
<!-- Announcements Sidebar Item -->
<q-item
clickable
v-ripple
@click="emit('open-announcements')"
class="bg-blue-50 dark:bg-blue-900/10 border-b border-blue-100 dark:border-blue-900/20"
>
<q-item-section>
<q-item-label class="font-bold text-slate-800 dark:text-blue-200 text-sm pl-2">
{{ $t('classroom.announcements', 'ประกาศในคอร์ส') }}
</q-item-label>
</q-item-section>
<q-item-section side v-if="hasUnreadAnnouncements">
<q-badge color="red" rounded label="New" />
</q-item-section>
</q-item>
<template v-for="chapter in courseData.chapters" :key="chapter.id">
<q-item-label header class="bg-slate-100 dark:bg-slate-800 text-[var(--text-main)] font-bold sticky top-0 z-10 border-b dark:border-white/5 text-sm py-4">
{{ getLocalizedText(chapter.title) }}
</q-item-label>
<q-item
v-for="lesson in chapter.lessons"
:key="lesson.id"
clickable
v-ripple
:active="currentLessonId === lesson.id"
active-class="bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-200 font-medium"
class="border-b border-gray-50 dark:border-white/5"
@click="!lesson.is_locked && emit('select-lesson', lesson.id)"
:disable="lesson.is_locked"
>
<q-item-section avatar v-if="lesson.is_locked">
<q-icon name="lock" size="xs" color="grey" />
</q-item-section>
<q-item-section>
<q-item-label class="text-sm md:text-base line-clamp-2 text-[var(--text-main)]">
{{ getLocalizedText(lesson.title) }}
</q-item-label>
</q-item-section>
<q-item-section side>
<q-icon v-if="lesson.is_completed" name="check_circle" color="positive" size="xs" />
<q-icon v-else-if="currentLessonId === lesson.id" name="play_circle" color="primary" size="xs" />
<q-icon v-else name="radio_button_unchecked" color="grey-4" size="xs" />
</q-item-section>
</q-item>
</template>
</q-list>
</div>
<div v-else-if="isLoading" class="p-6 text-center text-slate-500">
<q-spinner color="primary" size="2em" />
<div class="mt-2 text-xs">{{ $t('classroom.loadingCurriculum') }}</div>
</div>
</q-drawer>
</template>

142
Frontend-Learner/components/classroom/VideoPlayer.vue Normal file
View file

@ -0,0 +1,142 @@
<script setup lang="ts">
/**
* @file VideoPlayer.vue
* @description Video Player Component with custom controls provided by design
*/
const props = defineProps<{
src: string;
initialSeekTime?: number;
}>();
const emit = defineEmits<{
(e: 'timeupdate', currentTime: number, duration: number): void;
(e: 'ended'): void;
(e: 'loadedmetadata'): void;
}>();
const videoRef = ref<HTMLVideoElement | null>(null);
const isPlaying = ref(false);
const videoProgress = ref(0);
const currentTime = ref(0);
const duration = ref(0);
// Media Prefs
const { volume, muted: isMuted, setVolume, setMuted, applyTo } = useMediaPrefs();
const volumeIcon = computed(() => {
if (isMuted.value || volume.value === 0) return 'volume_off';
if (volume.value < 0.5) return 'volume_down';
return 'volume_up';
});
const formatTime = (time: number) => {
const m = Math.floor(time / 60);
const s = Math.floor(time % 60);
return `${m}:${s.toString().padStart(2, '0')}`;
};
const currentTimeDisplay = computed(() => formatTime(currentTime.value));
const durationDisplay = computed(() => formatTime(duration.value || 0));
const togglePlay = () => {
if (!videoRef.value) return;
if (isPlaying.value) videoRef.value.pause();
else videoRef.value.play();
isPlaying.value = !isPlaying.value;
};
const handleTimeUpdate = () => {
if (!videoRef.value) return;
currentTime.value = videoRef.value.currentTime;
duration.value = videoRef.value.duration;
videoProgress.value = (currentTime.value / duration.value) * 100;
emit('timeupdate', currentTime.value, duration.value);
};
const handleLoadedMetadata = () => {
if (videoRef.value) {
applyTo(videoRef.value);
if (props.initialSeekTime && props.initialSeekTime > 0) {
const seekTo = Math.min(props.initialSeekTime, videoRef.value.duration || Infinity)
videoRef.value.currentTime = seekTo;
}
}
emit('loadedmetadata');
};
const handleEnded = () => {
isPlaying.value = false;
emit('ended');
};
const seek = (e: MouseEvent) => {
if (!videoRef.value) return;
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
const percent = (e.clientX - rect.left) / rect.width;
videoRef.value.currentTime = percent * videoRef.value.duration;
};
const handleToggleMute = () => {
setMuted(!isMuted.value);
};
const handleVolumeChange = (val: any) => {
const newVol = typeof val === 'number' ? val : Number(val.target.value);
setVolume(newVol);
};
// Expose video ref for parent to control if needed
defineExpose({
videoRef,
pause: () => videoRef.value?.pause(),
currentTime: () => videoRef.value?.currentTime || 0
});
// Watch for volume/mute changes to apply to video element
watch([volume, isMuted], () => {
if (videoRef.value) applyTo(videoRef.value);
});
</script>
<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"
/>
<!-- 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>
<!-- 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>
</div>
</template>