-
Notifications
You must be signed in to change notification settings - Fork 0
/
GVideo.tsx
30 lines (26 loc) · 927 Bytes
/
GVideo.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { useGContext } from '../GContext';
import { useMemo } from 'react';
import VideoContainer from './VideoContainer';
import { GVideoProps } from './types';
const GVideo = (props: GVideoProps) => {
const { video } = useGContext();
const {
className,
src,
autoPlay = video?.autoPlay as boolean,
loop = video?.loop as boolean,
muted = video?.muted as boolean,
width = '100%',
controls = video?.controls as boolean,
sx,
} = props;
const type = useMemo(() => `video/${src.slice(src.lastIndexOf('.') + 1)}`, [src]);
return (
<VideoContainer className={`g-video ${className ? className : ''}`} sx={sx}>
<video width={width} autoPlay={autoPlay} loop={loop} controls={controls} muted={muted}>
<source src={src} type={type} />
</video>
</VideoContainer>
);
};
export default GVideo;