fix timeline note waitUntilInView rendering
Some checks failed
continuous-integration/drone/push Build is failing
Some checks failed
continuous-integration/drone/push Build is failing
This commit is contained in:
parent
64b0329ffe
commit
3dbbe5b0f0
@ -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}
|
||||
/>
|
||||
),
|
||||
)}
|
||||
|
@ -98,7 +98,6 @@ export function TimelineRenderer(props: TimelineRendererProps) {
|
||||
noteRenderer={props.noteRenderer}
|
||||
noteOnClick={props.noteOnClick}
|
||||
noteContext={props.noteContext}
|
||||
index={index}
|
||||
/>
|
||||
</ErrorBoundary>
|
||||
));
|
||||
|
@ -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) {
|
||||
|
Loading…
Reference in New Issue
Block a user