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

feat: Implement course detail viewing and enrollment functionality with a new useCourse composable.

Browse source
This commit is contained in:
supalerk-ar66 2026-02-11 17:06:18 +07:00
parent a65ded02f9
commit 23d9e44cc9
4 changed files with 65 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

30
Frontend-Learner/components/discovery/CourseDetailView.vue
View file

@ -66,25 +66,31 @@ const handleEnroll = () => {
<video
controls
class="w-full h-full object-cover"
:poster="course.cover_image || 'https://placehold.co/800x450?text=Course+Preview'"
:poster="course.thumbnail_url || course.cover_image || 'https://placehold.co/800x450?text=Course+Preview'"
>
<source :src="course.media.video_url" type="video/mp4">
Your browser does not support the video tag.
</video>
</template>
<!-- Placeholder if no video -->
<!-- Beautiful Image Showcase if no video -->
<template v-else>
<div class="w-full h-full bg-gradient-to-br from-slate-200 to-slate-300 dark:from-slate-800 dark:to-slate-900 flex items-center justify-center relative overflow-hidden">
<!-- Subtle background pattern or logo could go here -->
<div class="absolute inset-0 opacity-10 dark:opacity-20">
<div class="absolute top-0 left-0 w-full h-full" style="background-image: radial-gradient(circle at 2px 2px, currentColor 1px, transparent 0); background-size: 24px 24px;"></div>
</div>
<div class="w-full h-full flex items-center justify-center relative overflow-hidden bg-slate-950">
<!-- Show Thumbnail as Background if exists (Blurred background fill) -->
<img
v-if="course.thumbnail_url || course.cover_image"
:src="course.thumbnail_url || course.cover_image"
class="absolute inset-0 w-full h-full object-cover opacity-30 blur-xl scale-110"
/>
<div class="relative z-10 flex flex-col items-center gap-4">
<div class="w-20 h-20 bg-white/30 dark:bg-white/10 backdrop-blur-md rounded-full flex items-center justify-center ring-1 ring-white/50 shadow-xl transition-transform group-hover:scale-110 duration-500">
<q-icon name="play_arrow" size="48px" class="text-white drop-shadow-md" />
</div>
<span class="text-slate-500 dark:text-slate-400 font-bold tracking-wider uppercase text-xs">{{ $t('course.noVideoPreview') || 'Preview Not Available' }}</span>
<!-- Main Sharp Image -->
<img
v-if="course.thumbnail_url || course.cover_image"
:src="course.thumbnail_url || course.cover_image"
class="relative z-10 w-full h-full object-contain shadow-2xl shadow-black/50"
/>
<div v-else class="absolute inset-0 bg-gradient-to-br from-slate-800 to-slate-900 flex items-center justify-center">
<q-icon name="image" size="80px" class="text-slate-700 opacity-50" />
</div>
</div>
</template>