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