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

feat: Introduce comprehensive course management features for admin, including recommended, pending, and detailed course views, and instructor course listing with a lesson preview component.
All checks were successful
Build and Deploy Frontend Management to Dev Server / Build Frontend Management Docker Image (push) Successful in 46s
Details
Build and Deploy Frontend Management to Dev Server / Deploy E-learning Frontend Management to Dev Server (push) Successful in 4s
Details
Build and Deploy Frontend Management to Dev Server / Notify Deployment Status (push) Successful in 2s
Details

Browse source
This commit is contained in:
Missez 2026-02-20 14:33:08 +07:00
parent 0f92f0d00c
commit f26a94076c
6 changed files with 141 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

28
frontend_management/components/course/LessonPreviewDialog.vue
View file

@ -18,7 +18,16 @@
<div v-else-if="lessonDetail" class="p-6 space-y-6">
<!-- Video Player -->
<div v-if="lesson.type === 'VIDEO' && lessonDetail.video_url" class="aspect-video bg-black rounded-lg overflow-hidden">
<iframe
v-if="isYoutubeUrl(lessonDetail.video_url)"
:src="getYoutubeEmbedUrl(lessonDetail.video_url)"
class="w-full h-full"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
<video
v-else
:src="lessonDetail.video_url"
controls
class="w-full h-full object-contain"
@ -38,7 +47,7 @@
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
<a
v-for="file in lessonDetail.attachments"
v-for="file in lessonDetail.attachments.filter(f => !['video/mp4', 'video/youtube'].includes(f.mime_type))"
:key="file.id"
:href="file.file_path"
target="_blank"
@ -175,6 +184,23 @@ const formatFileSize = (bytes: number) => {
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};
const isYoutubeUrl = (url: string) => {
return url.includes('youtube.com') || url.includes('youtu.be');
};
const getYoutubeEmbedUrl = (url: string) => {
let videoId = '';
if (url.includes('youtu.be')) {
videoId = url.split('/').pop()?.split('?')[0] || '';
} else if (url.includes('youtube.com')) {
const params = new URLSearchParams(url.split('?')[1]);
videoId = params.get('v') || '';
}
return `https://www.youtube.com/embed/${videoId}`;
};
const fetchLessonDetail = async () => {
// Always verify lesson and courseId exist
if (!props.lesson || !props.courseId) return;