Video.astro

---
import { parse } from 'node:path';
import { getLanguageFromURL } from '../util';
import languages from '../i18n/languages';

export interface Props {
	src: string;
	type: string;
}

const { src, type } = Astro.props as Props;
const url = new URL(Astro.request.url);
const lang = getLanguageFromURL(url.pathname);
const filename = parse(src).name;

const allCaptions = import.meta.glob("../../public/captions/**/*.vtt", { as:'raw' });
const fileCaptions = Object.keys(allCaptions)
	.map((caption) => {
		const dir = '/captions/';
		const path = caption.substring(caption.indexOf(dir));
		const lang = path.substring(dir.length, path.indexOf(filename) - 1);
		return { path, lang };
	})
	.filter(({ path }) => path.includes(filename));

const defaultLang = fileCaptions.find((caption) => caption.lang == lang) ? lang : 'en';
---
<video controls>
	<source src={src} type={type}>
	{fileCaptions.map(({lang, path}) => (
		<track label={languages[lang]} src={path} kind="captions" srclang={lang} default={lang == defaultLang}>
	))}
</video>