forked from Kieran/snort
fix spotlight modal for replies
This commit is contained in:
parent
df66a861f7
commit
80690df15a
@ -27,7 +27,7 @@ export interface TimelineRendererProps {
|
||||
|
||||
// filter frags[0].events that have media
|
||||
function Grid({ frags }: { frags: Array<TimelineFragment> }) {
|
||||
const [modalThreadIndex, setModalThreadIndex] = useState<number | undefined>(undefined);
|
||||
const [modalEventIndex, setModalEventIndex] = useState<number | undefined>(undefined);
|
||||
const allEvents = useMemo(() => {
|
||||
return frags.flatMap(frag => frag.events);
|
||||
}, [frags]);
|
||||
@ -35,39 +35,39 @@ function Grid({ frags }: { frags: Array<TimelineFragment> }) {
|
||||
return allEvents.filter(event => getEventMedia(event).length > 0);
|
||||
}, [allEvents]);
|
||||
|
||||
const modalThread = modalThreadIndex !== undefined ? mediaEvents[modalThreadIndex] : undefined;
|
||||
const nextModalThread = modalThreadIndex !== undefined ? mediaEvents[modalThreadIndex + 1] : undefined;
|
||||
const prevModalThread = modalThreadIndex !== undefined ? mediaEvents[modalThreadIndex - 1] : undefined;
|
||||
const modalEvent = modalEventIndex !== undefined ? mediaEvents[modalEventIndex] : undefined;
|
||||
const nextModalEvent = modalEventIndex !== undefined ? mediaEvents[modalEventIndex + 1] : undefined;
|
||||
const prevModalEvent = modalEventIndex !== undefined ? mediaEvents[modalEventIndex - 1] : undefined;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="grid grid-cols-3 gap-px md:gap-1">
|
||||
{mediaEvents.map((event, index) => (
|
||||
<ImageGridItem key={event.id} event={event} onClick={() => setModalThreadIndex(index)} />
|
||||
<ImageGridItem key={event.id} event={event} onClick={() => setModalEventIndex(index)} />
|
||||
))}
|
||||
</div>
|
||||
{modalThread && (
|
||||
{modalEvent && (
|
||||
<SpotlightThreadModal
|
||||
key={modalThread.id}
|
||||
thread={NostrLink.fromEvent(modalThread)}
|
||||
onClose={() => setModalThreadIndex(undefined)}
|
||||
onBack={() => setModalThreadIndex(undefined)}
|
||||
onNext={() => setModalThreadIndex(Math.min(modalThreadIndex + 1, mediaEvents.length - 1))}
|
||||
onPrev={() => setModalThreadIndex(Math.max(modalThreadIndex - 1, 0))}
|
||||
key={modalEvent.id}
|
||||
event={modalEvent}
|
||||
onClose={() => setModalEventIndex(undefined)}
|
||||
onBack={() => setModalEventIndex(undefined)}
|
||||
onNext={() => setModalEventIndex(Math.min((modalEventIndex ?? 0) + 1, mediaEvents.length - 1))}
|
||||
onPrev={() => setModalEventIndex(Math.max((modalEventIndex ?? 0) - 1, 0))}
|
||||
/>
|
||||
)}
|
||||
{nextModalThread && ( // preload next
|
||||
{nextModalEvent && ( // preload next
|
||||
<SpotlightThreadModal
|
||||
className="hidden"
|
||||
key={`${nextModalThread.id}-next`}
|
||||
thread={NostrLink.fromEvent(nextModalThread)}
|
||||
key={`${nextModalEvent.id}-next`}
|
||||
event={nextModalEvent}
|
||||
/>
|
||||
)}
|
||||
{prevModalThread && ( // preload previous
|
||||
{prevModalEvent && ( // preload previous
|
||||
<SpotlightThreadModal
|
||||
className="hidden"
|
||||
key={`${prevModalThread.id}-prev`}
|
||||
thread={NostrLink.fromEvent(prevModalThread)}
|
||||
key={`${prevModalEvent.id}-prev`}
|
||||
event={prevModalEvent}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
|
@ -1,13 +1,14 @@
|
||||
import Modal from "@/Element/Modal";
|
||||
import { ThreadContext, ThreadContextWrapper } from "@/Hooks/useThreadContext";
|
||||
import { ThreadContextWrapper } from "@/Hooks/useThreadContext";
|
||||
import { Thread } from "@/Element/Event/Thread";
|
||||
import { useContext } from "react";
|
||||
import { SpotlightMedia } from "@/Element/Spotlight/SpotlightMedia";
|
||||
import { NostrLink } from "@snort/system";
|
||||
import {NostrLink, TaggedNostrEvent} from "@snort/system";
|
||||
import getEventMedia from "@/Element/Event/getEventMedia";
|
||||
|
||||
interface SpotlightThreadModalProps {
|
||||
thread: NostrLink;
|
||||
thread?: NostrLink;
|
||||
event?: TaggedNostrEvent;
|
||||
className?: string;
|
||||
onClose?: () => 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 (
|
||||
<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 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 className="hidden md:flex w-1/3 min-w-[400px] flex-shrink-0 overflow-y-auto bg-bg-color">
|
||||
<Thread onBack={onBack} disableSpotlight={true} />
|
||||
@ -40,16 +47,15 @@ export function SpotlightThreadModal(props: SpotlightThreadModalProps) {
|
||||
);
|
||||
}
|
||||
|
||||
interface SpotlightFromThreadProps {
|
||||
interface SpotlightFromEventProps {
|
||||
event: TaggedNostrEvent;
|
||||
onClose: () => void;
|
||||
onNext?: () => void;
|
||||
onPrev?: () => void;
|
||||
}
|
||||
|
||||
function SpotlightFromThread({ onClose, onNext, onPrev }: SpotlightFromThreadProps) {
|
||||
const thread = useContext(ThreadContext);
|
||||
|
||||
const media = (thread.root && getEventMedia(thread.root)) || [];
|
||||
function SpotlightFromEvent({ event, onClose, onNext, onPrev }: SpotlightFromEventProps) {
|
||||
const media = getEventMedia(event);
|
||||
return (
|
||||
<SpotlightMedia
|
||||
className="w-full"
|
||||
|
Loading…
Reference in New Issue
Block a user