Untitled

<template>
	<div class="demo-centered">
		<div v-if="demoVideo">
			<video ref="demoVideo" :src="demoVideo" class="preloaded-video" playsinline></video>
		</div>
	</div>
</template>
<script setup>
	import { ref, onMounted, onBeforeUnmount, computed } from "vue";
	import axios from "axios";
	import { useRouter } from "vue-router";
	const router = useRouter();
	
	const demoVideoRef = ref(null);
	const videos = ref([]);
	const setVideosBasedOnLanguage = () => {
		const prefix = getAudioPrefix(language.value);
		videos.value = [
			`${prefix}_DemoVideo.mp4`
		];
	};
	const preloadedVideos = ref([]);
	const preloadVideos = async () => {
		const getVideoUrl = async (src) => {
			const filePath = videoFiles[`/src/assets/${src}`];
			if (filePath) {
				return (await filePath()).default;
			} else {
				throw new Error(`Video file not found: ${src}`);
			}
		};

		const videoPromises = videos.value.map(src => {
			return new Promise((resolve, reject) => {
				const video = document.createElement('video');
				getVideoUrl(src).then(fileUrl => {
					video.src = fileUrl;
					video.onloadeddata = () => resolve(video);
					video.onerror = (error) => {
						console.error('Video failed to load:', error);
						reject(error);
					};
				}).catch(error => {
					console.error('Error resolving video file:', error);
					reject(error);
				});
			});
		});

		try {
			preloadedVideos.value = await Promise.all(videoPromises);
		} catch (error) {
			console.error('Error preloading videos:', error);
		}
	};

	const demoVideo = computed(() => preloadedVideos.value[0]?.src || '');

	onMounted(async () => {
		await preloadVideos();
	});

	function playDemoVideo() {
		if (demoVideoRef.value) {
			demoVideoRef.value.play();
		}
	}

	function stopAllVideoPlayback() {
	  preloadedVideos.value.forEach(video => {
		if (video instanceof HTMLVideoElement) {
		  video.pause();
		  video.currentTime = 0;
		}
	  });
	}
</script>