mmalmi/snort
1
0
Fork 0
forked from Kieran/snort
Code Pull Requests Activity

fix spotlight modal for replies

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
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}
/>
)}
</>

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

@ -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"