Video Text

1<script lang="ts">
2	import { onMount } from "svelte";
3	import { cn } from "$UTILS$";
4	import { watch } from "runed";
5 
6	interface VideoTextProps {
7		src: string;
8		content: string;
9		class?: string;
10		autoPlay?: boolean;
11		muted?: boolean;
12		loop?: boolean;
13		preload?: "auto" | "metadata" | "none";
14		fontSize?: string | number;
15		fontWeight?: string | number;
16		textAnchor?: string;
17		dominantBaseline?: string;
18		fontFamily?: string;
19	}
20 
21	let {
22		src,
23		content,
24		class: className = "",
25		autoPlay = true,
26		muted = true,
27		loop = true,
28		preload = "auto",
29		fontSize = 20,
30		fontWeight = "bold",
31		textAnchor = "middle",
32		dominantBaseline = "middle",
33		fontFamily = "sans-serif",
34	}: VideoTextProps = $props();
35 
36	let svgMask = $state("");
37 
38	let updateSvgMask = () => {
39		const responsiveFontSize = typeof fontSize === "number" ? `${fontSize}vw` : fontSize;
40		const newSvgMask = `<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><text x='50%' y='50%' font-size='${responsiveFontSize}' font-weight='${fontWeight}' text-anchor='${textAnchor}' dominant-baseline='${dominantBaseline}' font-family='${fontFamily}'>${content}</text></svg>`;
41		svgMask = newSvgMask;
42	};
43	// Handle window resize
44	onMount(() => {
45		window.addEventListener("resize", updateSvgMask);
46		// return () => window.removeEventListener("resize", updateSvgMask);
47	});
48 
49	let dataUrlMask = $derived(`url("data:image/svg+xml,${encodeURIComponent(svgMask)}")`);
50 
51	// Update SVG mask when content or settings change
52	watch(
53		[
54			() => content,
55			() => fontSize,
56			() => fontWeight,
57			() => textAnchor,
58			() => dominantBaseline,
59			() => fontFamily,
60		],
61		() => {
62			updateSvgMask();
63		}
64	);
65</script>
66 
67<div class={cn("relative size-full", className)}>
68	<!-- Create a container that masks the video to only show within text -->
69	<div
70		class="absolute inset-0 flex items-center justify-center"
71		style="
72      mask-image: {dataUrlMask};
73      -webkit-mask-image: {dataUrlMask};
74      mask-size: contain;
75      -webkit-mask-size: contain;
76      mask-repeat: no-repeat;
77      -webkit-mask-repeat: no-repeat;
78      mask-position: center;
79      -webkit-mask-position: center;
80    "
81	>
82		<video
83			class="h-full w-full object-cover"
84			autoplay={autoPlay}
85			{muted}
86			{loop}
87			{preload}
88			playsinline
89		>
90			<source {src} />
91			Your browser does not support the video tag.
92		</video>
93	</div>
94 
95	<!-- Add a backup text element for SEO/accessibility -->
96	<span class="sr-only">{content}</span>
97</div>