forked from Kieran/snort
preload next & prev grid image modal
This commit is contained in:
parent
c1c99f1b9e
commit
47f70b0157
@ -36,6 +36,8 @@ function Grid({ frags }: { frags: Array<TimelineFragment> }) {
|
||||
}, [allEvents]);
|
||||
|
||||
const modalThread = modalThreadIndex !== undefined ? mediaEvents[modalThreadIndex] : undefined;
|
||||
const nextModalThread = modalThreadIndex !== undefined ? mediaEvents[modalThreadIndex + 1] : undefined;
|
||||
const prevModalThread = modalThreadIndex !== undefined ? mediaEvents[modalThreadIndex - 1] : undefined;
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -46,7 +48,7 @@ function Grid({ frags }: { frags: Array<TimelineFragment> }) {
|
||||
</div>
|
||||
{modalThread && (
|
||||
<SpotlightThreadModal
|
||||
key={modalThreadIndex}
|
||||
key={modalThread.id}
|
||||
thread={NostrLink.fromEvent(modalThread)}
|
||||
onClose={() => setModalThreadIndex(undefined)}
|
||||
onBack={() => setModalThreadIndex(undefined)}
|
||||
@ -54,6 +56,20 @@ function Grid({ frags }: { frags: Array<TimelineFragment> }) {
|
||||
onPrev={() => setModalThreadIndex(Math.max(modalThreadIndex - 1, 0))}
|
||||
/>
|
||||
)}
|
||||
{nextModalThread && ( // preload next
|
||||
<SpotlightThreadModal
|
||||
className="hidden"
|
||||
key={`${nextModalThread.id}-next`}
|
||||
thread={NostrLink.fromEvent(nextModalThread)}
|
||||
/>
|
||||
)}
|
||||
{prevModalThread && ( // preload previous
|
||||
<SpotlightThreadModal
|
||||
className="hidden"
|
||||
key={`${prevModalThread.id}-prev`}
|
||||
thread={NostrLink.fromEvent(prevModalThread)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
@ -60,7 +60,7 @@ export default function Modal(props: ModalProps) {
|
||||
}, []);
|
||||
|
||||
return createPortal(
|
||||
<div className={`modal${props.className ? ` ${props.className}` : ""}`} onClick={props.onClose}>
|
||||
<div className={props.className === "hidden" ? props.className : `modal ${props.className || ""}`} onClick={props.onClose}>
|
||||
<div
|
||||
className={props.bodyClassName || "modal-body"}
|
||||
onClick={e => {
|
||||
|
@ -8,6 +8,7 @@ import getEventMedia from "@/Element/Event/getEventMedia";
|
||||
|
||||
interface SpotlightThreadModalProps {
|
||||
thread: NostrLink;
|
||||
className?: string;
|
||||
onClose?: () => void;
|
||||
onBack?: () => void;
|
||||
onNext?: () => void;
|
||||
@ -24,7 +25,7 @@ export function SpotlightThreadModal(props: SpotlightThreadModalProps) {
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal id="thread-overlay" onClose={onClose} bodyClassName={"flex flex-1"}>
|
||||
<Modal className={props.className} onClose={onClose} bodyClassName={"flex flex-1"}>
|
||||
<ThreadContextWrapper link={props.thread}>
|
||||
<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}>
|
||||
|
@ -123,9 +123,8 @@ export function SnortDeckLayout() {
|
||||
{deckState.article && (
|
||||
<>
|
||||
<Modal
|
||||
id="thread-overlay-article"
|
||||
onClose={() => setDeckState({})}
|
||||
className="thread-overlay long-form"
|
||||
className="long-form"
|
||||
onClick={() => setDeckState({})}>
|
||||
<div onClick={e => e.stopPropagation()}>
|
||||
<LongFormText ev={deckState.article} isPreview={false} related={[]} />
|
||||
|
Loading…
Reference in New Issue
Block a user