Kieran/snort
5
14
Fork 14
Code Issues 37 Pull Requests 1 Packages Projects Releases 24 Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/app/src/Components/Feed/TimelineFragment.tsx
View File

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

1
packages/app/src/Components/Feed/TimelineRenderer.tsx
View File

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

16
packages/app/src/Components/Spotlight/SpotlightMedia.tsx
View File

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