Video

1<script lang="ts">
2	import { cn } from '$UTILS$';
3	import { Play, Pause, Volume2, VolumeX, Maximize, Minimize, Loader2 } from '@lucide/svelte';
4	import { onMount } from 'svelte';
5	import { Slider } from '$lib/components/ui/slider';
6
7	let {
8		src,
9		poster,
10		class: className,
11		autoplay = false,
12		loop = false,
13		muted = false
14	} = $props<{
15		src: string;
16		poster?: string;
17		class?: string;
18		autoplay?: boolean;
19		loop?: boolean;
20		muted?: boolean;
21	}>();
22
23	let video: HTMLVideoElement;
24	let isPlaying = $state(false);
25	let currentTime = $state(0);
26	let duration = $state(0);
27	let volume = $state(1);
28	let isMuted = $state(muted);
29	let isFullscreen = $state(false);
30	let showControls = $state(false);
31	let controlsTimeout: number;
32	let isLoading = $state(true);
33	let lastVolume = $state(1);
34
35	function togglePlay() {
36		if (video.paused) {
37			video.play();
38		} else {
39			video.pause();
40		}
41	}
42
43	function handlePlay() {
44		isPlaying = true;
45		isLoading = false;
46		showControlsTemporarily();
47	}
48
49	function handlePause() {
50		isPlaying = false;
51		showControls = true;
52	}
53
54	function handleTimeUpdate() {
55		currentTime = video.currentTime;
56	}
57
58	function handleDurationChange() {
59		duration = video.duration;
60	}
61
62	function handleSeek(e: Event) {
63		const target = e.target as HTMLInputElement;
64		const time = parseFloat(target.value);
65		video.currentTime = time;
66		currentTime = time;
67	}
68
69	function handleVolumeChange(val: number) {
70		const newVolume = val;
71		volume = newVolume;
72		video.volume = newVolume;
73		isMuted = newVolume === 0;
74		if (newVolume > 0) lastVolume = newVolume;
75	}
76
77	function toggleMute() {
78		if (isMuted) {
79			isMuted = false;
80			volume = lastVolume > 0 ? lastVolume : 1;
81			video.muted = false;
82			video.volume = volume;
83		} else {
84			isMuted = true;
85			lastVolume = volume;
86			volume = 0;
87			video.muted = true;
88			video.volume = 0;
89		}
90	}
91
92	function toggleFullscreen() {
93		if (!document.fullscreenElement) {
94			video.parentElement?.requestFullscreen();
95			isFullscreen = true;
96		} else {
97			document.exitFullscreen();
98			isFullscreen = false;
99		}
100	}
101
102	function formatTime(seconds: number) {
103		const mins = Math.floor(seconds / 60);
104		const secs = Math.floor(seconds % 60);
105		return `${mins}:${secs.toString().padStart(2, '0')}`;
106	}
107
108	function showControlsTemporarily() {
109		showControls = true;
110		clearTimeout(controlsTimeout);
111		controlsTimeout = setTimeout(() => {
112// … truncated