fix timeline note waitUntilInView rendering
Some checks failed
continuous-integration/drone/push Build is failing

This commit is contained in:
Martti Malmi 2024-01-09 13:58:23 +02:00
parent 64b0329ffe
commit 3dbbe5b0f0
3 changed files with 10 additions and 12 deletions

View File

@ -11,7 +11,6 @@ export interface TimelineFragment {
export interface TimelineFragProps {
frag: TimelineFragment;
index: number;
noteRenderer?: (ev: TaggedNostrEvent) => ReactNode;
noteOnClick?: (ev: TaggedNostrEvent) => void;
noteContext?: (ev: TaggedNostrEvent) => ReactNode;
@ -26,7 +25,7 @@ export function TimelineFragment(props: TimelineFragProps) {
<>
{props.frag.title}
{props.frag.events.map(
e =>
(e, index) =>
props.noteRenderer?.(e) ?? (
<Note
data={e}
@ -35,7 +34,7 @@ export function TimelineFragment(props: TimelineFragProps) {
onClick={props.noteOnClick}
context={props.noteContext?.(e)}
options={options}
waitUntilInView={props.index > 5}
waitUntilInView={index > 5}
/>
),
)}

View File

@ -98,7 +98,6 @@ export function TimelineRenderer(props: TimelineRendererProps) {
noteRenderer={props.noteRenderer}
noteOnClick={props.noteOnClick}
noteContext={props.noteContext}
index={index}
/>
</ErrorBoundary>
));

View File

@ -20,7 +20,7 @@ export function SpotlightMedia(props: SpotlightMediaProps) {
const { proxy } = useImgProxy();
const [idx, setIdx] = useState(props.idx);
const image = useMemo(() => {
const media = useMemo(() => {
return props.media.at(idx % props.media.length);
}, [idx, props]);
@ -63,15 +63,15 @@ export function SpotlightMedia(props: SpotlightMediaProps) {
}, [dec, inc]); // Now dec and inc are stable
const isVideo = useMemo(() => {
return image && videoSuffixes.some(suffix => image.endsWith(suffix));
}, [image]);
return media && videoSuffixes.some(suffix => media.endsWith(suffix));
}, [media]);
const mediaEl = useMemo(() => {
if (image && isVideo) {
if (media && isVideo) {
return (
<video
src={image}
poster={proxy(image)}
src={media}
poster={proxy(media)}
autoPlay={true}
loop={true}
controls={true}
@ -79,9 +79,9 @@ export function SpotlightMedia(props: SpotlightMediaProps) {
/>
);
} else {
return <ProxyImg src={image} className="max-h-screen max-w-full w-full object-contain" />;
return <ProxyImg src={media} className="max-h-screen max-w-full w-full object-contain" />;
}
}, [image, isVideo]);
}, [media, isVideo]);
const onClickBg = (e: React.MouseEvent) => {
if (e.target === e.currentTarget) {