36 lines
1.0 KiB
TypeScript
36 lines
1.0 KiB
TypeScript
import {
|
|
MediaControlBar,
|
|
MediaController,
|
|
MediaMuteButton,
|
|
MediaPlayButton,
|
|
MediaTimeDisplay,
|
|
MediaTimeRange,
|
|
MediaVolumeRange,
|
|
} from 'media-chrome/dist/react';
|
|
import { memo } from 'react';
|
|
|
|
export const VideoPreview = memo(function VideoPreview({ urls }: { urls: string[] }) {
|
|
return (
|
|
<div className="my-2 flex flex-col gap-2">
|
|
{urls.map((url) => (
|
|
<MediaController key={url} className="aspect-video overflow-hidden rounded-lg">
|
|
<video
|
|
slot="media"
|
|
src={url}
|
|
poster={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
|
|
preload="none"
|
|
muted
|
|
/>
|
|
<MediaControlBar>
|
|
<MediaPlayButton></MediaPlayButton>
|
|
<MediaTimeRange></MediaTimeRange>
|
|
<MediaTimeDisplay showDuration></MediaTimeDisplay>
|
|
<MediaMuteButton></MediaMuteButton>
|
|
<MediaVolumeRange></MediaVolumeRange>
|
|
</MediaControlBar>
|
|
</MediaController>
|
|
))}
|
|
</div>
|
|
);
|
|
});
|