Files
lume/src/shared/notes/preview/video.tsx
2023-09-19 11:15:35 +07:00

27 lines
693 B
TypeScript

import ReactPlayer from 'react-player/es6';
export function VideoPreview({ urls }: { urls: string[] }) {
return (
<div className="relative mt-3 flex w-full flex-col gap-2">
{urls.map((url) => (
<ReactPlayer
key={url}
url={url}
width="100%"
height="auto"
className="!h-auto overflow-hidden rounded-lg object-fill"
controls={true}
pip={true}
light={
<img
src={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
alt={url}
className="h-auto w-full bg-white object-cover"
/>
}
/>
))}
</div>
);
}