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
|
// 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}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
|
@ -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"
|
||||||
|
Loading…
Reference in New Issue
Block a user