40 lines
954 B
Plaintext
40 lines
954 B
Plaintext
---
|
|
import type { EndpointVideoPreview } from "src/shared/payload/payload-sdk";
|
|
import { formatLocale } from "src/utils/format";
|
|
|
|
interface Props {
|
|
video: EndpointVideoPreview;
|
|
class?: string | undefined;
|
|
}
|
|
|
|
const {
|
|
video: { url, thumbnail, mimeType, subtitles },
|
|
...otherProps
|
|
} = Astro.props;
|
|
---
|
|
|
|
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
|
|
|
<video
|
|
controls
|
|
poster={thumbnail?.url}
|
|
crossorigin="anonymous"
|
|
{...otherProps.class ? otherProps : {}}>
|
|
<source src={url} type={mimeType} />
|
|
{
|
|
subtitles.map(({ language, url }) => (
|
|
<track label={formatLocale(language)} src={url} kind="subtitles" srclang={language} />
|
|
))
|
|
}
|
|
</video>
|
|
|
|
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
|
|
|
<style>
|
|
video {
|
|
width: 100%;
|
|
border-radius: 16px;
|
|
box-shadow: 0 5px 20px -10px var(--color-shadow-0);
|
|
}
|
|
</style>
|