81 lines
2.3 KiB
TypeScript
81 lines
2.3 KiB
TypeScript
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
|
import { downloadDir } from '@tauri-apps/api/path';
|
|
import { download } from '@tauri-apps/plugin-upload';
|
|
import {
|
|
MediaControlBar,
|
|
MediaController,
|
|
MediaMuteButton,
|
|
MediaPlayButton,
|
|
MediaTimeDisplay,
|
|
MediaTimeRange,
|
|
MediaVolumeRange,
|
|
} from 'media-chrome/dist/react';
|
|
import { memo } from 'react';
|
|
|
|
import { DownloadIcon } from '@shared/icons';
|
|
import { LinkPreview } from '@shared/notes';
|
|
|
|
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);
|
|
|
|
const downloadImage = async (url: string) => {
|
|
const downloadDirPath = await downloadDir();
|
|
const filename = url.substring(url.lastIndexOf('/') + 1);
|
|
return await download(url, downloadDirPath + `/${filename}`);
|
|
};
|
|
|
|
if (type === 'image') {
|
|
return (
|
|
<div key={url} className="group relative mt-2">
|
|
<img
|
|
src={url}
|
|
alt={url}
|
|
className="h-auto w-full rounded-lg border border-neutral-300 object-cover dark:border-neutral-700"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => downloadImage(url)}
|
|
className="absolute right-2 top-2 hidden h-10 w-10 items-center justify-center rounded-lg bg-black/50 backdrop-blur-xl group-hover:inline-flex hover:bg-blue-500"
|
|
>
|
|
<DownloadIcon className="h-5 w-5 text-white" />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (type === 'video') {
|
|
return (
|
|
<MediaController
|
|
key={url}
|
|
className="mt-2 aspect-video w-full 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>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="mt-2">
|
|
<LinkPreview urls={[url]} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export const MemoizedFileNote = memo(FileNote);
|