more caching and error handling

This commit is contained in:
2025-03-24 11:45:48 -04:00
parent 8890c1d08d
commit d3250bd00e
18 changed files with 335 additions and 327 deletions
+28 -33
View File
@@ -7,43 +7,38 @@ export type VideoProps = Omit<Partial<ComponentPropsWithoutRef<"video">>, "src">
src: string[];
poster?: string;
autoplay?: boolean;
responsive?: boolean;
};
const Video = ({ src, poster, autoplay = false, responsive = true, className, ...rest }: VideoProps) => {
const Video = ({ src, poster, autoplay = false, className, ...rest }: VideoProps) => {
return (
<div className={clsx(styles.wrapper, responsive && styles.responsive, className)}>
<video
width="100%"
height="100%"
className={styles.player}
poster={poster}
{...(autoplay
? {
preload: "auto",
controls: false,
autoPlay: true,
playsInline: true, // safari autoplay workaround
loop: true,
muted: true,
}
: {
preload: "metadata",
controls: true,
})}
{...rest}
>
{src.map((file) => {
const extension = file.split(".").pop();
if (extension === "vtt") {
return <track key={file} kind="subtitles" src={file} srcLang="en" label="English" default />;
} else {
return <source key={file} src={file} type={`video/${extension}`} />;
<video
className={clsx(styles.player, className)}
poster={poster}
{...(autoplay
? {
preload: "auto",
controls: false,
autoPlay: true,
playsInline: true, // safari autoplay workaround
loop: true,
muted: true,
}
})}
</video>
</div>
: {
preload: "metadata",
controls: true,
})}
{...rest}
>
{src.map((file) => {
const extension = file.split(".").pop();
if (extension === "vtt") {
return <track key={file} kind="subtitles" src={file} srcLang="en" label="English" default />;
} else {
return <source key={file} src={file} type={`video/${extension}`} />;
}
})}
</video>
);
};