mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 11:43:30 +00:00
rename some files and add nip 94 widget
This commit is contained in:
parent
c97c685149
commit
3455eb701f
@ -47,7 +47,7 @@ export function ArticleWidget({ params }: { params: Widget }) {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="relative w-[400px] shrink-0 bg-white/10">
|
||||
<div className="relative shrink-0 grow-0 basis-[400px] bg-white/10">
|
||||
<TitleBar id={params.id} title={params.title} />
|
||||
<div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
|
||||
{status === 'loading' ? (
|
||||
|
@ -116,7 +116,7 @@ export function FeedWidget({ params }: { params: Widget }) {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="relative w-[400px] shrink-0 bg-white/10">
|
||||
<div className="relative shrink-0 grow-0 basis-[400px] bg-white/10">
|
||||
<TitleBar id={params.id} title={params.title} />
|
||||
<div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
|
||||
{status === 'loading' ? (
|
||||
|
90
src/app/space/components/widgets/file.tsx
Normal file
90
src/app/space/components/widgets/file.tsx
Normal file
@ -0,0 +1,90 @@
|
||||
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useVirtualizer } from '@tanstack/react-virtual';
|
||||
import { useCallback, useRef } from 'react';
|
||||
|
||||
import { useNDK } from '@libs/ndk/provider';
|
||||
|
||||
import { FileNote, NoteSkeleton, NoteWrapper } from '@shared/notes';
|
||||
import { TitleBar } from '@shared/titleBar';
|
||||
|
||||
import { Widget } from '@utils/types';
|
||||
|
||||
export function FileWidget({ params }: { params: Widget }) {
|
||||
const { ndk } = useNDK();
|
||||
const { status, data } = useQuery(['file-widget', params.content], async () => {
|
||||
const events = await ndk.fetchEvents({
|
||||
kinds: [1063],
|
||||
limit: 100,
|
||||
});
|
||||
return [...events] as unknown as NDKEvent[];
|
||||
});
|
||||
|
||||
const parentRef = useRef<HTMLDivElement>(null);
|
||||
const virtualizer = useVirtualizer({
|
||||
count: data ? data.length : 0,
|
||||
getScrollElement: () => parentRef.current,
|
||||
estimateSize: () => 650,
|
||||
overscan: 4,
|
||||
});
|
||||
const items = virtualizer.getVirtualItems();
|
||||
|
||||
// render event match event kind
|
||||
const renderItem = useCallback(
|
||||
(index: string | number) => {
|
||||
const event: NDKEvent = data[index];
|
||||
if (!event) return;
|
||||
|
||||
return (
|
||||
<div key={event.id} data-index={index} ref={virtualizer.measureElement}>
|
||||
<NoteWrapper event={event}>
|
||||
<FileNote event={event} />
|
||||
</NoteWrapper>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
[data]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="relative shrink-0 grow-0 basis-[400px] bg-white/10">
|
||||
<TitleBar id={params.id} title={params.title} />
|
||||
<div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
|
||||
{status === 'loading' ? (
|
||||
<div className="px-3 py-1.5">
|
||||
<div className="rounded-xl bg-white/10 px-3 py-3">
|
||||
<NoteSkeleton />
|
||||
</div>
|
||||
</div>
|
||||
) : items.length === 0 ? (
|
||||
<div className="px-3 py-1.5">
|
||||
<div className="rounded-xl bg-white/10 px-3 py-6">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<p className="text-center text-sm font-medium text-white">
|
||||
There have been no new files in the last 24 hours.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
height: `${virtualizer.getTotalSize()}px`,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="absolute left-0 top-0 w-full"
|
||||
style={{
|
||||
transform: `translateY(${items[0].start}px)`,
|
||||
}}
|
||||
>
|
||||
{items.map((item) => renderItem(item.index))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
@ -109,7 +109,7 @@ export function HashtagWidget({ params }: { params: Widget }) {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="relative w-[400px] shrink-0 bg-white/10">
|
||||
<div className="relative shrink-0 grow-0 basis-[400px] bg-white/10">
|
||||
<TitleBar id={params.id} title={params.title + ' in 24 hours ago'} />
|
||||
<div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
|
||||
{status === 'loading' ? (
|
||||
|
@ -41,7 +41,7 @@ export function ThreadBlock({ params }: { params: Widget }) {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="scrollbar-hide h-full w-[400px] shrink-0 overflow-y-auto bg-white/10">
|
||||
<div className="scrollbar-hide relative shrink-0 grow-0 basis-[400px] overflow-y-auto bg-white/10">
|
||||
<TitleBar id={params.id} title={params.title} />
|
||||
<div className="h-full">
|
||||
{status === 'loading' ? (
|
||||
|
@ -31,7 +31,7 @@ export function TrendingNotesWidget({ params }: { params: Widget }) {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20">
|
||||
<div className="scrollbar-hide relative shrink-0 grow-0 basis-[400px] overflow-y-auto bg-white/10">
|
||||
<TitleBar id={params.id} title={params.title} />
|
||||
<div className="h-full">
|
||||
{status === 'loading' ? (
|
||||
|
@ -32,7 +32,7 @@ export function TrendingProfilesWidget({ params }: { params: Widget }) {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20">
|
||||
<div className="scrollbar-hide relative shrink-0 grow-0 basis-[400px] overflow-y-auto bg-white/10">
|
||||
<TitleBar id={params.id} title={params.title} />
|
||||
<div className="h-full">
|
||||
{status === 'loading' ? (
|
||||
|
@ -5,6 +5,7 @@ import { FeedWidgetForm } from '@app/space/components/forms/feed';
|
||||
import { HashTagWidgetForm } from '@app/space/components/forms/hashtag';
|
||||
import { ArticleWidget } from '@app/space/components/widgets/article';
|
||||
import { FeedWidget } from '@app/space/components/widgets/feed';
|
||||
import { FileWidget } from '@app/space/components/widgets/file';
|
||||
import { HashtagWidget } from '@app/space/components/widgets/hashtag';
|
||||
import { NetworkWidget } from '@app/space/components/widgets/network';
|
||||
import { ThreadBlock } from '@app/space/components/widgets/thread';
|
||||
@ -48,6 +49,8 @@ export function SpaceScreen() {
|
||||
return <NetworkWidget key={widget.id} />;
|
||||
case WidgetKinds.article:
|
||||
return <ArticleWidget key={widget.id} params={widget} />;
|
||||
case WidgetKinds.file:
|
||||
return <FileWidget key={widget.id} params={widget} />;
|
||||
case WidgetKinds.xhashtag:
|
||||
return <HashTagWidgetForm key={widget.id} params={widget} />;
|
||||
case WidgetKinds.xfeed:
|
||||
|
@ -21,7 +21,7 @@ export function ComposerModal() {
|
||||
<Dialog.Trigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex h-9 w-min items-center justify-center gap-1 rounded-md bg-fuchsia-500 px-8 text-sm font-medium text-white hover:bg-fuchsia-600 focus:outline-none active:translate-y-1 disabled:pointer-events-none disabled:opacity-50"
|
||||
className="inline-flex h-9 w-min items-center justify-center gap-2 rounded-md bg-white/10 px-6 text-sm font-medium text-white hover:bg-fuchsia-500 focus:outline-none active:translate-y-1"
|
||||
>
|
||||
<ComposeIcon className="h-4 w-4" />
|
||||
Postr
|
||||
@ -44,7 +44,7 @@ export function ComposerModal() {
|
||||
</div>
|
||||
<Dialog.Close
|
||||
onClick={() => toggle(false)}
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-zinc-800"
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-white/10"
|
||||
>
|
||||
<CancelIcon className="h-5 w-5 text-white/50" />
|
||||
</Dialog.Close>
|
||||
|
@ -1,35 +1,45 @@
|
||||
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
||||
import ReactPlayer from 'react-player';
|
||||
|
||||
import { Image } from '@shared/image';
|
||||
import { NoteActions, NoteMetadata } from '@shared/notes';
|
||||
import { User } from '@shared/user';
|
||||
|
||||
import { isImage } from '@utils/isImage';
|
||||
import { fileType } from '@utils/nip94';
|
||||
|
||||
export function FileNote({ event }: { event: NDKEvent }) {
|
||||
const url = 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={event.content}
|
||||
className="h-auto w-full rounded-lg object-cover"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === 'video') {
|
||||
return (
|
||||
<div className="mb-2 mt-3">
|
||||
<ReactPlayer
|
||||
key={url}
|
||||
url={url}
|
||||
width="100%"
|
||||
height="auto"
|
||||
className="!h-auto overflow-hidden rounded-lg object-fill"
|
||||
controls={true}
|
||||
pip={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-min w-full px-3 py-1.5">
|
||||
<div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3">
|
||||
<div className="flex flex-col">
|
||||
<User pubkey={event.pubkey} time={event.created_at} />
|
||||
<div className="-mt-6 flex items-start gap-3">
|
||||
<div className="w-11 shrink-0" />
|
||||
<div className="relative z-20 flex-1">
|
||||
{isImage(url) && (
|
||||
<Image
|
||||
src={url}
|
||||
alt="image"
|
||||
className="h-auto w-full rounded-lg object-cover"
|
||||
/>
|
||||
)}
|
||||
<NoteActions id={event.id} pubkey={event.pubkey} />
|
||||
</div>
|
||||
</div>
|
||||
<NoteMetadata id={event.id} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-2 mt-3">
|
||||
<p>{url}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -38,7 +38,6 @@ export function LinkPreview({ urls }: { urls: string[] }) {
|
||||
{data.image && (
|
||||
<Image
|
||||
src={data.image}
|
||||
fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW.jpg"
|
||||
alt={urls[0]}
|
||||
className="h-44 w-full rounded-t-lg object-cover"
|
||||
/>
|
||||
|
@ -1,3 +0,0 @@
|
||||
export function isImage(url: string) {
|
||||
return /\.(jpg|jpeg|gif|png|webp|avif)$/.test(url);
|
||||
}
|
11
src/utils/nip94.ts
Normal file
11
src/utils/nip94.ts
Normal file
@ -0,0 +1,11 @@
|
||||
export function fileType(url: string) {
|
||||
if (url.match(/\.(jpg|jpeg|gif|png|webp|avif)$/)) {
|
||||
return 'image';
|
||||
}
|
||||
|
||||
if (url.match(/\.(mp4|mov|webm|wmv|flv|mts|avi|ogv|mkv|mp3|m3u8)$/)) {
|
||||
return 'video';
|
||||
}
|
||||
|
||||
return 'link';
|
||||
}
|
Loading…
Reference in New Issue
Block a user