54 lines
1.2 KiB
TypeScript
54 lines
1.2 KiB
TypeScript
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
|
import { MediaPlayer, MediaProvider } from '@vidstack/react';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import { Image } from '@shared/image';
|
|
|
|
import { fileType } from '@utils/nip94';
|
|
|
|
export function FileNote(props: { event?: NDKEvent }) {
|
|
const url = props.event.tags.find((el) => el[0] === 'url')[1];
|
|
const type = fileType(url);
|
|
|
|
if (type === 'image') {
|
|
return (
|
|
<div className="mb-2 mt-3">
|
|
<Image
|
|
src={url}
|
|
alt={props.event.content}
|
|
className="h-auto w-full rounded-lg object-cover"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (type === 'video') {
|
|
return (
|
|
<div className="mb-2 mt-3">
|
|
<MediaPlayer
|
|
key={url}
|
|
src={url}
|
|
poster={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
|
|
load="visible"
|
|
aspectRatio="16/9"
|
|
crossorigin=""
|
|
>
|
|
<MediaProvider />
|
|
</MediaPlayer>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="mb-2">
|
|
<Link
|
|
to={url}
|
|
target="_blank"
|
|
className="break-all font-normal text-fuchsia-500 hover:text-fuchsia-600"
|
|
>
|
|
{url}
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|