nandi.uk
This repository has no description
1.5 kB
53 lines
1'use client';
2
3import { AppBskyEmbedVideo } from '@atproto/api';
4import { AspectRatio } from '@mantine/core';
5import { MediaPlayer, MediaProvider } from '@vidstack/react';
6import {
7 defaultLayoutIcons,
8 DefaultVideoLayout,
9} from '@vidstack/react/player/layouts/default';
10import '@vidstack/react/player/styles/default/theme.css';
11import '@vidstack/react/player/styles/default/layouts/video.css';
12
13interface Props {
14 embed: AppBskyEmbedVideo.View;
15}
16
17export default function VideoEmbed(props: Props) {
18 const ratio = props.embed.aspectRatio
19 ? props.embed.aspectRatio.width / props.embed.aspectRatio.height
20 : 16 / 9;
21
22 return (
23 <AspectRatio ratio={ratio} style={{ position: 'relative', zIndex: 0 }}>
24 <MediaPlayer
25 crossOrigin
26 playsInline
27 viewType="video"
28 src={props.embed.playlist}
29 poster={props.embed.thumbnail ?? ''}
30 onClick={(e) => e.stopPropagation()}
31 style={{
32 width: '100%',
33 height: '100%',
34 borderRadius: 'var(--mantine-radius-md)',
35 overflow: 'hidden',
36 '--video-border': '0px',
37 }}
38 >
39 <MediaProvider />
40 <DefaultVideoLayout
41 thumbnails={props.embed.thumbnail}
42 icons={defaultLayoutIcons}
43 slots={{
44 settingsMenu: null,
45 captionButton: null,
46 airPlayButton: null,
47 googleCastButton: null,
48 }}
49 />
50 </MediaPlayer>
51 </AspectRatio>
52 );
53}