feat: Implement initial e-learning platform frontend structure including dashboard, course management, authentication, and common UI components.
This commit is contained in:
supalerk-ar66
parent
aceeb80d9a
commit
ad11c6b7c5
44 changed files with 720 additions and 578 deletions
|
|
@ -1,7 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file VideoPlayer.vue
|
||||
* @description Video Player Component with custom controls provided by design
|
||||
* @description คอมโพเนนต์เครื่องเล่นวิดีโอพร้อมด้วยตัวควบคุมแบบกำหนดเองตามการออกแบบ (Video Player Component with custom controls provided by design)
|
||||
*/
|
||||
|
||||
const props = defineProps<{
|
||||
|
|
@ -22,7 +22,7 @@ const videoProgress = ref(0);
|
|||
const currentTime = ref(0);
|
||||
const duration = ref(0);
|
||||
|
||||
// Media Prefs
|
||||
// การตั้งค่าเกี่ยวกับสื่อ (Media Prefs)
|
||||
const { volume, muted: isMuted, setVolume, setMuted, applyTo } = useMediaPrefs();
|
||||
|
||||
const volumeIcon = computed(() => {
|
||||
|
|
@ -40,7 +40,7 @@ const formatTime = (time: number) => {
|
|||
const currentTimeDisplay = computed(() => formatTime(currentTime.value));
|
||||
const durationDisplay = computed(() => formatTime(duration.value || 0));
|
||||
|
||||
// YouTube Helper Logic
|
||||
// ตรรกะตัวช่วยสำหรับ YouTube (YouTube Helper Logic)
|
||||
const isYoutube = computed(() => {
|
||||
const s = props.src.toLowerCase();
|
||||
return s.includes('youtube.com') || s.includes('youtu.be');
|
||||
|
|
@ -50,7 +50,7 @@ const youtubeEmbedUrl = computed(() => {
|
|||
if (!isYoutube.value) return '';
|
||||
let videoId = '';
|
||||
|
||||
// Extract Video ID
|
||||
// ดึงรหัสวิดีโอ (Extract Video ID)
|
||||
if (props.src.includes('youtu.be')) {
|
||||
videoId = props.src.split('youtu.be/')[1]?.split('?')[0];
|
||||
} else {
|
||||
|
|
@ -58,18 +58,18 @@ const youtubeEmbedUrl = computed(() => {
|
|||
videoId = urlParams.get('v') || '';
|
||||
}
|
||||
|
||||
// Return Embed URL with enablejsapi=1
|
||||
// คืนค่า URL สำหรับฝังพร้อมเปิดใช้งาน jsapi (Return Embed URL with enablejsapi=1)
|
||||
return `https://www.youtube.com/embed/${videoId}?enablejsapi=1&rel=0`;
|
||||
});
|
||||
|
||||
// YouTube API Tracking
|
||||
// การติดตามผ่าน YouTube API (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
|
||||
// โหลดสคริปต์ API หากยังไม่มี (Load API Script if not exists)
|
||||
if (!(window as any).YT) {
|
||||
const tag = document.createElement('script');
|
||||
tag.src = "https://www.youtube.com/iframe_api";
|
||||
|
|
@ -83,7 +83,7 @@ const initYoutubeAPI = () => {
|
|||
'onReady': (event: any) => {
|
||||
duration.value = event.target.getDuration();
|
||||
|
||||
// Resume Logic for YouTube
|
||||
// ตรรกะการเล่นต่อสำหรับ YouTube (Resume Logic for YouTube)
|
||||
if (props.initialSeekTime && props.initialSeekTime > 0) {
|
||||
event.target.seekTo(props.initialSeekTime, true);
|
||||
}
|
||||
|
|
@ -118,7 +118,7 @@ const startYTTracking = () => {
|
|||
currentTime.value = ytPlayer.getCurrentTime();
|
||||
emit('timeupdate', currentTime.value, duration.value);
|
||||
}
|
||||
}, 1000); // Check every second
|
||||
}, 1000); // ตรวจสอบทุกๆ วินาที (Check every second)
|
||||
};
|
||||
|
||||
const stopYTTracking = () => {
|
||||
|
|
@ -145,7 +145,7 @@ onUnmounted(() => {
|
|||
destroyYoutubePlayer();
|
||||
});
|
||||
|
||||
// Watch for src change to re-init
|
||||
// เฝ้าดูการเปลี่ยนแปลงของ src เพื่อเริ่มต้นใหม่ (Watch for src change to re-init)
|
||||
watch(() => props.src, (newSrc, oldSrc) => {
|
||||
if (newSrc !== oldSrc) {
|
||||
destroyYoutubePlayer();
|
||||
|
|
@ -174,8 +174,8 @@ const togglePlay = () => {
|
|||
playPromise.then(() => {
|
||||
isPlaying.value = true;
|
||||
}).catch(error => {
|
||||
// Auto-play was prevented or play was interrupted
|
||||
// We can safely ignore this error
|
||||
// การเล่นอัตโนมัติถูกป้องกันหรือถูกขัดจังหวะ (Auto-play was prevented or play was interrupted)
|
||||
// สามารถละเว้นข้อผิดพลาดนี้ได้อย่างปลอดภัย (We can safely ignore this error)
|
||||
console.log("Video play request handled:", error.name);
|
||||
});
|
||||
}
|
||||
|
|
@ -223,14 +223,14 @@ const handleVolumeChange = (val: any) => {
|
|||
setVolume(newVol);
|
||||
};
|
||||
|
||||
// Expose video ref for parent to control if needed
|
||||
// เปิดเผย video ref ให้คอมโพเนนต์แม่ควบคุมถ้าจำเป็น (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 for volume/mute changes to apply to video element)
|
||||
watch([volume, isMuted], () => {
|
||||
if (videoRef.value) applyTo(videoRef.value);
|
||||
});
|
||||
|
|
@ -238,7 +238,7 @@ 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">
|
||||
<!-- 1. YouTube Player -->
|
||||
<!-- 1. เครื่องเล่น YouTube (YouTube Player) -->
|
||||
<iframe
|
||||
v-if="isYoutube"
|
||||
id="youtube-iframe"
|
||||
|
|
@ -249,7 +249,7 @@ watch([volume, isMuted], () => {
|
|||
allowfullscreen
|
||||
></iframe>
|
||||
|
||||
<!-- 2. Standard HTML5 Video Player -->
|
||||
<!-- 2. เครื่องเล่นวิดีโอ HTML5 มาตรฐาน (Standard HTML5 Video Player) -->
|
||||
<div v-else class="w-full h-full relative group/video cursor-pointer">
|
||||
<video
|
||||
ref="videoRef"
|
||||
|
|
@ -262,9 +262,9 @@ watch([volume, isMuted], () => {
|
|||
@ended="handleEnded"
|
||||
/>
|
||||
|
||||
<!-- Custom Controls Overlay (Only for HTML5 Video) -->
|
||||
<!-- เลเยอร์ควบคุมแบบกำหนดเอง (Overlay) เฉพาะสำหรับวิดีโอ HTML5 เท่านั้น (Custom Controls Overlay (Only for HTML5 Video)) -->
|
||||
<div class="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/90 via-black/40 to-transparent transition-opacity opacity-0 group-hover/video:opacity-100 flex flex-col gap-3">
|
||||
<!-- Progress Bar -->
|
||||
<!-- แถบแสดงความคืบหน้า (Progress Bar) -->
|
||||
<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_12px_rgba(59,130,246,0.6)]" :style="{ width: videoProgress + '%' }"></div>
|
||||
</div>
|
||||
|
|
@ -275,7 +275,7 @@ watch([volume, isMuted], () => {
|
|||
|
||||
<div class="flex-grow"></div>
|
||||
|
||||
<!-- Volume Control -->
|
||||
<!-- ตัวควบคุมระดับเสียง (Volume Control) -->
|
||||
<div class="flex items-center gap-2 group/volume relative">
|
||||
<q-btn flat round dense :icon="volumeIcon" @click.stop="handleToggleMute" color="white" class="hover:scale-110 transition-transform" />
|
||||
<div class="w-0 group-hover/volume:w-24 overflow-hidden transition-all duration-300 flex items-center bg-black/60 backdrop-blur-md rounded-full px-2">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue