Kieran/snort
5
14
Fork 14
Code Issues 37 Pull Requests 1 Packages Projects Releases 24 Wiki Activity

fix spotlight modal for replies
Some checks failed
continuous-integration/drone/push Build is failing
Details

Browse Source
This commit is contained in:
Martti Malmi 2023-12-20 12:31:24 +02:00
parent df66a861f7
commit 80690df15a
2 changed files with 34 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
packages/app/src/Element/Feed/TimelineRenderer.tsx
View File

@ -27,7 +27,7 @@ export interface TimelineRendererProps {
// filter frags[0].events that have media // filter frags[0].events that have media
function Grid({ frags }: { frags: Array<TimelineFragment> }) { function Grid({ frags }: { frags: Array<TimelineFragment> }) {
const [modalThreadIndex, setModalThreadIndex] = useState<number | undefined>(undefined); const [modalEventIndex, setModalEventIndex] = useState<number | undefined>(undefined);
const allEvents = useMemo(() => { const allEvents = useMemo(() => {
return frags.flatMap(frag => frag.events); return frags.flatMap(frag => frag.events);
}, [frags]); }, [frags]);
@ -35,39 +35,39 @@ function Grid({ frags }: { frags: Array<TimelineFragment> }) {
return allEvents.filter(event => getEventMedia(event).length > 0); return allEvents.filter(event => getEventMedia(event).length > 0);
}, [allEvents]); }, [allEvents]);
const modalThread = modalThreadIndex !== undefined ? mediaEvents[modalThreadIndex] : undefined; const modalEvent = modalEventIndex !== undefined ? mediaEvents[modalEventIndex] : undefined;
const nextModalThread = modalThreadIndex !== undefined ? mediaEvents[modalThreadIndex + 1] : undefined; const nextModalEvent = modalEventIndex !== undefined ? mediaEvents[modalEventIndex + 1] : undefined;
const prevModalThread = modalThreadIndex !== undefined ? mediaEvents[modalThreadIndex - 1] : undefined; const prevModalEvent = modalEventIndex !== undefined ? mediaEvents[modalEventIndex - 1] : undefined;
return ( return (
<> <>
<div className="grid grid-cols-3 gap-px md:gap-1"> <div className="grid grid-cols-3 gap-px md:gap-1">
{mediaEvents.map((event, index) => ( {mediaEvents.map((event, index) => (
<ImageGridItem key={event.id} event={event} onClick={() => setModalThreadIndex(index)} /> <ImageGridItem key={event.id} event={event} onClick={() => setModalEventIndex(index)} />
))} ))}
</div> </div>
{modalThread && ( {modalEvent && (
<SpotlightThreadModal <SpotlightThreadModal
key={modalThread.id} key={modalEvent.id}
thread={NostrLink.fromEvent(modalThread)} event={modalEvent}
onClose={() => setModalThreadIndex(undefined)} onClose={() => setModalEventIndex(undefined)}
onBack={() => setModalThreadIndex(undefined)} onBack={() => setModalEventIndex(undefined)}
onNext={() => setModalThreadIndex(Math.min(modalThreadIndex + 1, mediaEvents.length - 1))} onNext={() => setModalEventIndex(Math.min((modalEventIndex ?? 0) + 1, mediaEvents.length - 1))}
onPrev={() => setModalThreadIndex(Math.max(modalThreadIndex - 1, 0))} onPrev={() => setModalEventIndex(Math.max((modalEventIndex ?? 0) - 1, 0))}
/> />
)} )}
{nextModalThread && ( // preload next {nextModalEvent && ( // preload next
<SpotlightThreadModal <SpotlightThreadModal
className="hidden" className="hidden"
key={`${nextModalThread.id}-next`} key={`${nextModalEvent.id}-next`}
thread={NostrLink.fromEvent(nextModalThread)} event={nextModalEvent}
/> />
)} )}
{prevModalThread && ( // preload previous {prevModalEvent && ( // preload previous
<SpotlightThreadModal <SpotlightThreadModal
className="hidden" className="hidden"
key={`${prevModalThread.id}-prev`} key={`${prevModalEvent.id}-prev`}
thread={NostrLink.fromEvent(prevModalThread)} event={prevModalEvent}
/> />
)} )}
</> </>

26
packages/app/src/Element/Spotlight/SpotlightThreadModal.tsx
View File

@ -1,13 +1,14 @@
import Modal from "@/Element/Modal"; import Modal from "@/Element/Modal";
import { ThreadContext, ThreadContextWrapper } from "@/Hooks/useThreadContext"; import { ThreadContextWrapper } from "@/Hooks/useThreadContext";
import { Thread } from "@/Element/Event/Thread"; import { Thread } from "@/Element/Event/Thread";
import { useContext } from "react"; import { useContext } from "react";
import { SpotlightMedia } from "@/Element/Spotlight/SpotlightMedia"; import { SpotlightMedia } from "@/Element/Spotlight/SpotlightMedia";
import { NostrLink } from "@snort/system"; import {NostrLink, TaggedNostrEvent} from "@snort/system";
import getEventMedia from "@/Element/Event/getEventMedia"; import getEventMedia from "@/Element/Event/getEventMedia";
interface SpotlightThreadModalProps { interface SpotlightThreadModalProps {
thread: NostrLink; thread?: NostrLink;
event?: TaggedNostrEvent;
className?: string; className?: string;
onClose?: () => void; onClose?: () => void;
onBack?: () => void; onBack?: () => void;
@ -24,12 +25,18 @@ export function SpotlightThreadModal(props: SpotlightThreadModalProps) {
} }
}; };
if (!props.thread && !props.event) {
throw new Error("SpotlightThreadModal requires either thread or event");
}
const link = props.event ? NostrLink.fromEvent(props.event) : props.thread;
return ( return (
<Modal className={props.className} onClose={onClose} bodyClassName={"flex flex-1"}> <Modal className={props.className} onClose={onClose} bodyClassName={"flex flex-1"}>
<ThreadContextWrapper link={props.thread}> <ThreadContextWrapper link={link!}>
<div className="flex flex-row h-screen w-screen"> <div className="flex flex-row h-screen w-screen">
<div className="flex w-full md:w-2/3 items-center justify-center overflow-hidden" onClick={onClickBg}> <div className="flex w-full md:w-2/3 items-center justify-center overflow-hidden" onClick={onClickBg}>
<SpotlightFromThread onClose={onClose} onNext={props.onNext} onPrev={props.onPrev} /> <SpotlightFromEvent event={props.event || thread.root} onClose={onClose} onNext={props.onNext} onPrev={props.onPrev} />
</div> </div>
<div className="hidden md:flex w-1/3 min-w-[400px] flex-shrink-0 overflow-y-auto bg-bg-color"> <div className="hidden md:flex w-1/3 min-w-[400px] flex-shrink-0 overflow-y-auto bg-bg-color">
<Thread onBack={onBack} disableSpotlight={true} /> <Thread onBack={onBack} disableSpotlight={true} />
@ -40,16 +47,15 @@ export function SpotlightThreadModal(props: SpotlightThreadModalProps) {
); );
} }
interface SpotlightFromThreadProps { interface SpotlightFromEventProps {
event: TaggedNostrEvent;
onClose: () => void; onClose: () => void;
onNext?: () => void; onNext?: () => void;
onPrev?: () => void; onPrev?: () => void;
} }
function SpotlightFromThread({ onClose, onNext, onPrev }: SpotlightFromThreadProps) { function SpotlightFromEvent({ event, onClose, onNext, onPrev }: SpotlightFromEventProps) {
const thread = useContext(ThreadContext); const media = getEventMedia(event);
const media = (thread.root && getEventMedia(thread.root)) || [];
return ( return (
<SpotlightMedia <SpotlightMedia
className="w-full" className="w-full"