264 lines
8.9 KiB
Vue
264 lines
8.9 KiB
Vue
<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', duration: number): 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));
|
|
|
|
// 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();
|
|
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', videoRef.value?.duration || 0);
|
|
};
|
|
|
|
const handleEnded = () => {
|
|
isPlaying.value = false;
|
|
emit('ended');
|
|
};
|
|
|
|
const seek = (e: MouseEvent) => {
|
|
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;
|
|
};
|
|
|
|
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">
|
|
<!-- 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>
|
|
|
|
<!-- 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"
|
|
/>
|
|
|
|
<!-- 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>
|
|
</div>
|
|
</div>
|
|
</template>
|