ui-svelte 0.1.0

package/dist/control/Record.svelte

@@ -0,0 +1,430 @@
+<script lang="ts">
+	import {
+		Checkmark24RegularIcon,
+		Delete24RegularIcon,
+		Pause24RegularIcon,
+		Play24RegularIcon,
+		Record24RegularIcon,
+		RecordStop24RegularIcon
+	} from '../icons/index.js';
+	import { Button, Icon } from '../index.js';
+	import { cn } from '../utils/class-names.js';
+
+	type Props = {
+		class?: string;
+		name: string;
+		variant?:
+			| 'primary'
+			| 'secondary'
+			| 'muted'
+			| 'outlined'
+			| 'ghost'
+			| 'success'
+			| 'info'
+			| 'danger'
+			| 'warning';
+		url?: string;
+		headers?: Record<string, string>;
+		onRecordingComplete?: (blob: Blob, url: string) => void;
+	};
+
+	let {
+		class: className,
+		name,
+		variant = 'primary',
+		url,
+		headers,
+		onRecordingComplete
+	}: Props = $props();
+
+	let mediaRecorder: MediaRecorder | null = null;
+	let audioContext: AudioContext | null = null;
+	let analyser: AnalyserNode | null = null;
+	let dataArray: Uint8Array | null = null;
+	let animationId: number | null = null;
+	let fileInput = $state<HTMLInputElement>();
+
+	let isRecording = $state(false);
+	let isPaused = $state(false);
+	let recordingTime = $state(0);
+	let waveformBars = $state<number[]>(Array(50).fill(0.2));
+	let audioChunks: Blob[] = [];
+	let timerInterval: number | null = null;
+	let isUploading = $state(false);
+	let isReviewing = $state(false);
+	let reviewAudioUrl: string | null = null;
+	let audioElement: HTMLAudioElement | null = null;
+	let isPlaying = $state(false);
+	let playbackTime = $state(0);
+	let playbackDuration = $state(0);
+	let playbackWaveform = $state<number[]>(Array(50).fill(0.2));
+
+	const BAR_COUNT = 50;
+
+	let baseClasses = $derived(cn('media', variant, className));
+
+	async function startRecording() {
+		try {
+			const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+
+			audioContext = new AudioContext();
+			const source = audioContext.createMediaStreamSource(stream);
+			analyser = audioContext.createAnalyser();
+			analyser.fftSize = 256;
+			source.connect(analyser);
+
+			const bufferLength = analyser.frequencyBinCount;
+			dataArray = new Uint8Array(bufferLength);
+
+			mediaRecorder = new MediaRecorder(stream);
+			audioChunks = [];
+
+			mediaRecorder.ondataavailable = (event) => {
+				if (event.data.size > 0) {
+					audioChunks.push(event.data);
+				}
+			};
+
+			mediaRecorder.onstop = async () => {
+				const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
+				reviewAudioUrl = URL.createObjectURL(audioBlob);
+
+				await analyzeRecordedAudio(audioBlob);
+
+				isReviewing = true;
+
+				stream.getTracks().forEach((track) => track.stop());
+				if (audioContext) {
+					audioContext.close();
+				}
+			};
+
+			mediaRecorder.start();
+			isRecording = true;
+			recordingTime = 0;
+
+			timerInterval = window.setInterval(() => {
+				recordingTime += 1;
+			}, 1000);
+
+			visualize();
+		} catch (error) {
+			console.error('Error accessing microphone:', error);
+			alert('No se pudo acceder al micrófono');
+		}
+	}
+
+	async function uploadAudio(blob: Blob) {
+		if (!url) return;
+
+		try {
+			isUploading = true;
+			const formData = new FormData();
+			formData.append(name, blob, `${name}.webm`);
+
+			const requestHeaders: HeadersInit = {
+				...headers
+			};
+
+			const response = await fetch(url, {
+				method: 'POST',
+				headers: requestHeaders,
+				body: formData
+			});
+
+			if (!response.ok) {
+				throw new Error(`Upload failed: ${response.statusText}`);
+			}
+
+			console.log('Audio uploaded successfully');
+		} catch (error) {
+			console.error('Error uploading audio:', error);
+			alert('Error al subir el audio');
+		} finally {
+			isUploading = false;
+		}
+	}
+
+	function visualize() {
+		if (!analyser || !dataArray) return;
+
+		analyser.getByteFrequencyData(dataArray as any);
+		const newBars: number[] = [];
+		const step = Math.floor(dataArray.length / BAR_COUNT);
+
+		for (let i = 0; i < BAR_COUNT; i++) {
+			const index = i * step;
+			const value = dataArray[index] / 255;
+			newBars.push(value * 0.7 + 0.15);
+		}
+
+		waveformBars = newBars;
+
+		if (isRecording && !isPaused) {
+			animationId = requestAnimationFrame(visualize);
+		}
+	}
+
+	function pauseRecording() {
+		if (mediaRecorder && isRecording) {
+			mediaRecorder.pause();
+			isPaused = true;
+
+			if (timerInterval) {
+				clearInterval(timerInterval);
+			}
+
+			if (animationId) {
+				cancelAnimationFrame(animationId);
+			}
+		}
+	}
+
+	function resumeRecording() {
+		if (mediaRecorder && isPaused) {
+			mediaRecorder.resume();
+			isPaused = false;
+
+			timerInterval = window.setInterval(() => {
+				recordingTime += 1;
+			}, 1000);
+
+			visualize();
+		}
+	}
+
+	function stopRecording() {
+		if (mediaRecorder) {
+			mediaRecorder.stop();
+			isRecording = false;
+			isPaused = false;
+
+			if (timerInterval) {
+				clearInterval(timerInterval);
+			}
+
+			if (animationId) {
+				cancelAnimationFrame(animationId);
+			}
+
+			waveformBars = Array(50).fill(0.2);
+		}
+	}
+
+	function formatTime(seconds: number): string {
+		const mins = Math.floor(seconds / 60);
+		const secs = seconds % 60;
+		return `${mins}:${secs.toString().padStart(2, '0')}`;
+	}
+
+	function handleToggleRecording() {
+		if (!isRecording) {
+			startRecording();
+		} else if (isPaused) {
+			resumeRecording();
+		} else {
+			pauseRecording();
+		}
+	}
+
+	async function confirmRecording() {
+		if (!reviewAudioUrl) return;
+
+		try {
+			const response = await fetch(reviewAudioUrl);
+			const audioBlob = await response.blob();
+
+			if (url) {
+				await uploadAudio(audioBlob);
+			} else {
+				const file = new File([audioBlob], `${name}.webm`, { type: 'audio/webm' });
+				const dataTransfer = new DataTransfer();
+				dataTransfer.items.add(file);
+				fileInput!.files = dataTransfer.files;
+
+				const event = new Event('change', { bubbles: true });
+				fileInput?.dispatchEvent(event);
+			}
+
+			if (onRecordingComplete) {
+				onRecordingComplete(audioBlob, reviewAudioUrl);
+			}
+
+			cleanup();
+		} catch (error) {
+			console.error('Error confirming recording:', error);
+		}
+	}
+
+	function discardRecording() {
+		cleanup();
+	}
+
+	function continueRecording() {
+		isReviewing = false;
+		isRecording = false;
+		isPaused = false;
+	}
+
+	async function analyzeRecordedAudio(blob: Blob) {
+		try {
+			const context = new AudioContext();
+			const arrayBuffer = await blob.arrayBuffer();
+			const audioBuffer = await context.decodeAudioData(arrayBuffer);
+
+			const rawData = audioBuffer.getChannelData(0);
+			const samples = BAR_COUNT;
+			const blockSize = Math.floor(rawData.length / samples);
+			const filteredData: number[] = [];
+
+			for (let i = 0; i < samples; i++) {
+				let sum = 0;
+				for (let j = 0; j < blockSize; j++) {
+					sum += Math.abs(rawData[i * blockSize + j]);
+				}
+				filteredData.push(sum / blockSize);
+			}
+
+			const max = Math.max(...filteredData);
+			playbackWaveform = filteredData.map((value) => (value / max) * 0.8 + 0.2);
+
+			await context.close();
+		} catch (error) {
+			console.error('Error analyzing audio:', error);
+			playbackWaveform = Array(50).fill(0.5);
+		}
+	}
+
+	function cleanup() {
+		if (reviewAudioUrl) {
+			URL.revokeObjectURL(reviewAudioUrl);
+			reviewAudioUrl = null;
+		}
+		if (audioElement) {
+			audioElement.pause();
+			audioElement = null;
+		}
+		isReviewing = false;
+		isRecording = false;
+		isPaused = false;
+		isPlaying = false;
+		recordingTime = 0;
+		playbackTime = 0;
+		playbackDuration = 0;
+		waveformBars = Array(50).fill(0.2);
+		playbackWaveform = Array(50).fill(0.2);
+		audioChunks = [];
+	}
+
+	function togglePlayback() {
+		if (!reviewAudioUrl) return;
+
+		if (!audioElement) {
+			audioElement = new Audio(reviewAudioUrl);
+
+			audioElement.addEventListener('loadedmetadata', () => {
+				playbackDuration = audioElement!.duration;
+			});
+
+			audioElement.addEventListener('timeupdate', () => {
+				if (audioElement) {
+					playbackTime = audioElement.currentTime;
+				}
+			});
+
+			audioElement.addEventListener('ended', () => {
+				isPlaying = false;
+				playbackTime = 0;
+			});
+		}
+
+		if (isPlaying) {
+			audioElement.pause();
+			isPlaying = false;
+		} else {
+			audioElement.play();
+			isPlaying = true;
+		}
+	}
+</script>
+
+{#if !url}
+	<input type="file" bind:this={fileInput} {name} accept="audio/*" class="hidden" />
+{/if}
+
+<div class={baseClasses}>
+	{#if isReviewing}
+		<Button onclick={togglePlayback} size="md" variant="ghost">
+			{#if isPlaying}
+				<Icon icon={Pause24RegularIcon} />
+			{:else}
+				<Icon icon={Play24RegularIcon} />
+			{/if}
+		</Button>
+
+		<div class="media-waveform">
+			<div class="media-bars">
+				{#each playbackWaveform as height, i}
+					{@const progress = playbackDuration > 0 ? playbackTime / playbackDuration : 0}
+					{@const barPosition = (i + 0.5) / playbackWaveform.length}
+					{@const isPlayed = barPosition <= progress}
+					<div class="media-bar" class:active={isPlayed} style="height: {height * 100}%"></div>
+				{/each}
+			</div>
+		</div>
+
+		<span class="media-time">{formatTime(recordingTime)}</span>
+
+		<div class="flex gap-2">
+			<Button onclick={discardRecording} size="md" variant="ghost">
+				<Icon icon={Delete24RegularIcon} />
+			</Button>
+			<Button onclick={continueRecording} size="md" variant="ghost">
+				<Icon icon={Record24RegularIcon} />
+			</Button>
+			<Button onclick={confirmRecording} size="md" variant="ghost">
+				<Icon icon={Checkmark24RegularIcon} />
+			</Button>
+		</div>
+	{:else if !isRecording}
+		<Button onclick={startRecording} size="md" variant="ghost">
+			<Icon icon={Record24RegularIcon} />
+		</Button>
+
+		<div class="media-waveform">
+			<div class="media-bars">
+				{#each waveformBars as height}
+					<div class="media-bar" style="height: {height * 100}%"></div>
+				{/each}
+			</div>
+		</div>
+
+		<span class="media-time">{formatTime(recordingTime)}</span>
+	{:else}
+		<Button onclick={handleToggleRecording} size="md" variant="ghost">
+			{#if isPaused}
+				<Icon icon={Play24RegularIcon} />
+			{:else}
+				<Icon icon={Pause24RegularIcon} />
+			{/if}
+		</Button>
+
+		<div class="media-waveform">
+			<div class="media-bars">
+				{#each waveformBars as height}
+					<div
+						class="media-bar"
+						class:recording={isRecording && !isPaused}
+						style="height: {height * 100}%"
+					></div>
+				{/each}
+			</div>
+		</div>
+
+		<span class="media-time">{formatTime(recordingTime)}</span>
+
+		<Button onclick={stopRecording} size="md" variant="ghost" isLoading={isUploading}>
+			<Icon icon={RecordStop24RegularIcon} />
+		</Button>
+	{/if}
+</div>

package/dist/control/Record.svelte.d.ts

@@ -0,0 +1,11 @@
+type Props = {
+    class?: string;
+    name: string;
+    variant?: 'primary' | 'secondary' | 'muted' | 'outlined' | 'ghost' | 'success' | 'info' | 'danger' | 'warning';
+    url?: string;
+    headers?: Record<string, string>;
+    onRecordingComplete?: (blob: Blob, url: string) => void;
+};
+declare const Record: import("svelte").Component<Props, {}, "">;
+type Record = ReturnType<typeof Record>;
+export default Record;

package/dist/control/ToggleTheme.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { MoonStarsLinearIcon, Sun2LinearIcon } from '../icons/index.js';
+	import { Button, Icon } from '../index.js';
+	import { theme } from '../stores/theme.svelte.js';
+
+	type Props = {
+		variant?: 'primary' | 'secondary' | 'muted' | 'ghost';
+		size?: 'sm' | 'md' | 'lg';
+		class?: string;
+	};
+
+	let { variant = 'ghost', size = 'md', class: className }: Props = $props();
+</script>
+
+<Button onclick={theme.toggleTheme} {size} {variant} class={className} isIcon>
+	{#if theme.isDark}
+		<Icon icon={Sun2LinearIcon} />
+	{:else}
+		<Icon icon={MoonStarsLinearIcon} />
+	{/if}
+</Button>

package/dist/control/ToggleTheme.svelte.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    variant?: 'primary' | 'secondary' | 'muted' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+};
+declare const ToggleTheme: import("svelte").Component<Props, {}, "">;
+type ToggleTheme = ReturnType<typeof ToggleTheme>;
+export default ToggleTheme;

package/dist/control/Video.svelte

@@ -0,0 +1,222 @@
+<script lang="ts">
+	import {
+		MaximizeSquareMinimalisticLinearIcon,
+		Pause24RegularIcon,
+		PictureInPicture24RegularIcon,
+		Play24RegularIcon,
+		Speaker24RegularIcon,
+		SpeakerMute24RegularIcon
+	} from '../icons/index.js';
+	import { Icon, Slider } from '../index.js';
+	import { cn } from '../utils/class-names.js';
+	import Hls from 'hls.js';
+
+	type Props = {
+		src: string;
+		autoplay?: boolean;
+		poster?: string;
+		aspect?: 'horizontal' | 'vertical' | 'square';
+		class?: string;
+	};
+
+	let { src, poster, autoplay, aspect = 'horizontal', class: className }: Props = $props();
+
+	let videoElement: HTMLVideoElement | null = $state(null);
+
+	let showControls = $state(false);
+	let showVolume = $state(false);
+	let videoParams = $state({
+		src,
+		time: 0,
+		duration: 0,
+		formattedTime: '00:00',
+		formattedDuration: '00:00',
+		controls: true,
+		muted: false,
+		paused: false,
+		volume: 1
+	});
+
+	const setSource = () => {
+		if (src.includes('.m3u8')) {
+			if (Hls.isSupported() && videoElement) {
+				const hls = new Hls();
+				hls.loadSource(src);
+				hls.attachMedia(videoElement);
+				hls.on(Hls.Events.MANIFEST_PARSED, () => {
+					if (autoplay) {
+						videoElement?.play();
+					}
+				});
+			} else if (videoElement?.canPlayType('application/vnd.apple.mpegurl')) {
+				videoElement.src = src;
+			}
+		} else {
+			if (!videoElement) return;
+			videoElement.src = src;
+		}
+	};
+
+	const handleMouseEnter = () => {
+		if (showControls) return;
+		showControls = true;
+		setTimeout(() => {
+			showControls = false;
+		}, 5000);
+	};
+
+	const togglePlay = () => {
+		if (videoElement?.paused) {
+			videoElement.play();
+		} else {
+			videoElement?.pause();
+		}
+	};
+	const toggleMute = () => {
+		if (!videoElement) return;
+		videoElement.muted = !videoElement.muted;
+		localStorage.setItem('video-muted', videoElement.muted.toString());
+	};
+
+	const formatTime = (seconds: number): string => {
+		const mins = Math.floor(seconds / 60);
+		const secs = Math.floor(seconds % 60);
+		return `${mins}:${secs < 10 ? '0' + secs : secs}`;
+	};
+
+	const handleToggleMaximize = () => {
+		const containerElement = document.querySelector('.video');
+
+		if (!document.fullscreenElement) {
+			if (containerElement?.requestFullscreen) {
+				containerElement.requestFullscreen();
+			}
+		} else {
+			if (document.exitFullscreen) {
+				document.exitFullscreen();
+			}
+		}
+	};
+
+	const handleTogglePip = async () => {
+		if (!document.pictureInPictureEnabled) return;
+
+		try {
+			if (document.pictureInPictureElement === videoElement) {
+				await document.exitPictureInPicture();
+			} else {
+				await videoElement?.requestPictureInPicture();
+			}
+		} catch (error) {
+			console.error('PiP error:', error);
+		}
+	};
+
+	$effect(() => {
+		if (localStorage.getItem('video-muted') === 'true') {
+			videoParams.muted = true;
+		}
+	});
+
+	$effect(() => {
+		if (localStorage.getItem('video-volume')) {
+			videoParams.volume = parseFloat(localStorage.getItem('video-volume') || '1');
+		}
+	});
+
+	$effect(() => {
+		videoParams.formattedTime = formatTime(videoParams.time);
+		videoParams.formattedDuration = formatTime(videoParams.duration);
+	});
+
+	$effect(() => {
+		setSource();
+	});
+</script>
+
+<svelte:window onmousemove={handleMouseEnter} />
+
+<div class={cn('video', aspect, className)}>
+	<!-- svelte-ignore component_name_lowercase -->
+	<video
+		bind:this={videoElement}
+		bind:currentTime={videoParams.time}
+		bind:duration={videoParams.duration}
+		bind:paused={videoParams.paused}
+		bind:muted={videoParams.muted}
+		bind:volume={videoParams.volume}
+		class="rounded-lg"><track kind="captions" /></video
+	>
+	{#if poster && videoParams.paused && videoElement.currentTime === 0}
+		<img src={poster} class="video-poster rounded-md" alt="poster" />
+	{/if}
+
+	<button onclick={togglePlay} aria-label="Play" class="video-control-play"></button>
+	<div class="video-controls">
+		<!-- svelte-ignore a11y_consider_explicit_label -->
+		<div class={cn('video-control-actions', showControls ? 'visible' : 'invisible')}>
+			<div class="video-actions-start">
+				<button class="video-btn" onclick={togglePlay}>
+					{#if videoParams.paused}
+						<Icon icon={Play24RegularIcon} class="video-btn-icon" />
+					{:else}
+						<Icon icon={Pause24RegularIcon} class="video-btn-icon" />
+					{/if}
+				</button>
+				<div class="video-btn">
+					<span class="video-duration-info"
+						>{videoParams.formattedTime} / {videoParams.formattedDuration}</span
+					>
+				</div>
+			</div>
+			<div class="video-actions-end">
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div
+					class="video-volume-wrapper"
+					onmouseenter={() => (showVolume = true)}
+					onmouseleave={() => (showVolume = false)}
+				>
+					{#if !videoParams.muted && showVolume}
+						<div class="video-volume">
+							<Slider
+								bind:value={videoParams.volume}
+								onchange={(value: number) => {
+									localStorage.setItem('video-volume', String(value));
+								}}
+								min={0}
+								max={1}
+								step={0.1}
+								size="sm"
+								name="video-volume"
+								hideLabel
+							/>
+						</div>
+					{/if}
+					<button class="video-btn" onclick={toggleMute}>
+						{#if videoParams.muted}
+							<Icon icon={Speaker24RegularIcon} class="video-btn-icon" />
+						{:else}
+							<Icon icon={SpeakerMute24RegularIcon} class="video-btn-icon" />
+						{/if}
+					</button>
+				</div>
+				<button class="video-btn" onclick={handleTogglePip}>
+					<Icon icon={PictureInPicture24RegularIcon} class="video-btn-icon" />
+				</button>
+				<button class="video-btn" onclick={handleToggleMaximize}>
+					<Icon icon={MaximizeSquareMinimalisticLinearIcon} class="video-btn-icon" />
+				</button>
+			</div>
+		</div>
+		<div class={cn('video-control-progress', showControls ? 'visible' : 'invisible')}>
+			<Slider
+				min={0}
+				size="sm"
+				max={videoParams.duration}
+				bind:value={videoParams.time}
+				name="video-time"
+				hideLabel
+			/>
+		</div>
+	</div>
+</div>

package/dist/control/Video.svelte.d.ts

@@ -0,0 +1,10 @@
+type Props = {
+    src: string;
+    autoplay?: boolean;
+    poster?: string;
+    aspect?: 'horizontal' | 'vertical' | 'square';
+    class?: string;
+};
+declare const Video: import("svelte").Component<Props, {}, "">;
+type Video = ReturnType<typeof Video>;
+export default Video;