From bd50ab2ec764241e5d9c77423dd5636562ff10b8 Mon Sep 17 00:00:00 2001 From: hzrd149 Date: Thu, 7 Sep 2023 11:27:01 -0500 Subject: [PATCH] some work --- src/components/layout/nav-items.tsx | 6 +- src/helpers/nostr/files.ts | 9 ++- src/views/files/index.tsx | 100 +++++++++++++++++++++------- 3 files changed, 85 insertions(+), 30 deletions(-) diff --git a/src/components/layout/nav-items.tsx b/src/components/layout/nav-items.tsx index 3a30f4214..9fee6c88d 100644 --- a/src/components/layout/nav-items.tsx +++ b/src/components/layout/nav-items.tsx @@ -48,6 +48,9 @@ export default function NavItems({ isInDrawer = false }: { isInDrawer?: boolean + @@ -57,9 +60,6 @@ export default function NavItems({ isInDrawer = false }: { isInDrawer?: boolean - diff --git a/src/helpers/nostr/files.ts b/src/helpers/nostr/files.ts index 3d02b79be..bc35bdd58 100644 --- a/src/helpers/nostr/files.ts +++ b/src/helpers/nostr/files.ts @@ -12,8 +12,14 @@ export type ParsedImageFile = { blurhash?: string; }; -export function parseImageFile(event: NostrEvent): ParsedImageFile { +export function getFileUrl(event: NostrEvent) { const url = event.tags.find((t) => t[0] === "url" && t[1])?.[1]; + if (!url) throw new Error("Missing url"); + return url; +} + +export function parseImageFile(event: NostrEvent): ParsedImageFile { + const url = getFileUrl(event); const mimeType = event.tags.find((t) => t[0] === "m" && t[1])?.[1]; const magnet = event.tags.find((t) => t[0] === "magnet" && t[1])?.[1]; const infoHash = event.tags.find((t) => t[0] === "i" && t[1])?.[1]; @@ -24,7 +30,6 @@ export function parseImageFile(event: NostrEvent): ParsedImageFile { const dimensions = event.tags.find((t) => t[0] === "dim" && t[1])?.[1]; const [width, height] = dimensions?.split("x").map((v) => parseInt(v)) ?? []; - if (!url) throw new Error("missing url"); if (!mimeType) throw new Error("missing MIME Type"); if (width !== undefined && height !== undefined) { if (!Number.isFinite(width) || !Number.isFinite(height)) throw new Error("bad dimensions"); diff --git a/src/views/files/index.tsx b/src/views/files/index.tsx index 12bc6fc0a..2d4298237 100644 --- a/src/views/files/index.tsx +++ b/src/views/files/index.tsx @@ -20,12 +20,19 @@ import useTimelineLoader from "../../hooks/use-timeline-loader"; import { useReadRelayUrls } from "../../hooks/use-client-relays"; import useSubject from "../../hooks/use-subject"; import { NostrEvent } from "../../types/nostr-event"; -import { parseImageFile } from "../../helpers/nostr/files"; +import { getFileUrl, parseImageFile } from "../../helpers/nostr/files"; import BlurhashImage from "../../components/blurhash-image"; import { ErrorBoundary } from "../../components/error-boundary"; import useAppSettings from "../../hooks/use-app-settings"; -import { useTrusted } from "../../providers/trust"; +import { TrustProvider, useTrusted } from "../../providers/trust"; import BlurredImage from "../../components/blured-image"; +import PeopleListProvider, { usePeopleListContext } from "../../providers/people-list-provider"; +import RelaySelectionProvider, { useRelaySelectionContext } from "../../providers/relay-selection-provider"; +import PeopleListSelection from "../../components/people-list-selection/people-list-selection"; +import RelaySelectionButton from "../../components/relay-selection/relay-selection-button"; +import { UserAvatar } from "../../components/user-avatar"; +import { UserAvatarLink } from "../../components/user-avatar-link"; +import { UserLink } from "../../components/user-link"; const FILE_KIND = 1063; const VIDEO_TYPES = ["video/mp4", "video/webm"]; @@ -40,23 +47,45 @@ function ImageFile({ event }: { event: NostrEvent }) { const shouldBlur = settings.blurImages && !trust; - const showImage = useDisclosure(); - if (shouldBlur && parsed.blurhash && parsed.width && parsed.height && !showImage.isOpen) { - const aspect = parsed.width / parsed.height; - return ( - - ); - } + // const showImage = useDisclosure(); + // if (shouldBlur && parsed.blurhash && parsed.width && parsed.height && !showImage.isOpen) { + // const aspect = parsed.width / parsed.height; + // return ( + // + // ); + // } const ImageComponent = shouldBlur ? BlurredImage : Image; - return ; + return ( + + + + + + + + ); +} + +function VideoFile({ event }: { event: NostrEvent }) { + const url = getFileUrl(event); + + return ( + + + + + + + ); } function FileType({ event }: { event: NostrEvent }) { @@ -65,12 +94,22 @@ function FileType({ event }: { event: NostrEvent }) { if (!mimeType) throw new Error("missing MIME type"); if (IMAGE_TYPES.includes(mimeType)) { - return ; + return ( + + + + ); + } + if (VIDEO_TYPES.includes(mimeType)) { + return ; } return Unknown mine type {mimeType}; } -export default function FilesView() { +function FilesPage() { + const { listId, filter } = usePeopleListContext(); + const { relays } = useRelaySelectionContext(); + const [selectedTypes, setSelectedTypes] = useState(IMAGE_TYPES); const toggleType = useCallback( (type: string) => { @@ -80,22 +119,22 @@ export default function FilesView() { } else return arr.concat(type); }); }, - [setSelectedTypes] + [setSelectedTypes], ); - const relays = useReadRelayUrls(); const timeline = useTimelineLoader( - "files", + `${listId}-files`, relays, - { kinds: [FILE_KIND], "#m": selectedTypes }, - { enabled: selectedTypes.length > 0 } + { kinds: [FILE_KIND], "#m": selectedTypes, ...filter }, + { enabled: selectedTypes.length > 0 && !!filter }, ); const events = useSubject(timeline.timeline); return ( - + + @@ -145,6 +184,7 @@ export default function FilesView() { + @@ -158,3 +198,13 @@ export default function FilesView() { ); } + +export default function FilesView() { + return ( + + + + + + ); +}