diff --git a/components/carousel.js b/components/carousel.js index 1b5ed6dd0..39ccd95c8 100644 --- a/components/carousel.js +++ b/components/carousel.js @@ -108,8 +108,12 @@ export function CarouselProvider ({ children }) { const showModal = useShowModal() const showCarousel = useCallback(({ src }) => { + // only show confirmed entries + const confirmedEntries = Array.from(media.current.entries()) + .filter(([, entry]) => entry.confirmed) + showModal((close, setOptions) => { - return + return }, { fullScreen: true, overflow: @@ -117,14 +121,22 @@ export function CarouselProvider ({ children }) { }, [showModal, media.current]) const addMedia = useCallback(({ src, originalSrc, rel }) => { - media.current.set(src, { src, originalSrc, rel }) + media.current.set(src, { src, originalSrc, rel, confirmed: false }) + }, [media.current]) + + const confirmMedia = useCallback((src) => { + const mediaItem = media.current.get(src) + if (mediaItem) { + mediaItem.confirmed = true + media.current.set(src, mediaItem) + } }, [media.current]) const removeMedia = useCallback((src) => { media.current.delete(src) }, [media.current]) - const value = useMemo(() => ({ showCarousel, addMedia, removeMedia }), [showCarousel, addMedia, removeMedia]) + const value = useMemo(() => ({ showCarousel, addMedia, confirmMedia, removeMedia }), [showCarousel, addMedia, removeMedia]) return {children} } diff --git a/components/item-full.js b/components/item-full.js index 72c60b9c6..f1d4d0894 100644 --- a/components/item-full.js +++ b/components/item-full.js @@ -26,6 +26,7 @@ import { UNKNOWN_LINK_REL } from '@/lib/constants' import classNames from 'classnames' import { CarouselProvider } from './carousel' import Embed from './embed' +import { useRouter } from 'next/router' function BioItem ({ item, handleClick }) { const { me } = useMe() @@ -165,6 +166,9 @@ export default function ItemFull ({ item, fetchMoreComments, bio, rank, ...props commentsViewed(item) }, [item.lastCommentAt]) + const router = useRouter() + const carouselKey = `${item.id}-${router.query?.sort || 'default'}` + return ( <> {rank @@ -174,7 +178,7 @@ export default function ItemFull ({ item, fetchMoreComments, bio, rank, ...props ) :
} - + {item.parentId ? : ( diff --git a/components/media-or-link.js b/components/media-or-link.js index 9569fbc17..43f26d401 100644 --- a/components/media-or-link.js +++ b/components/media-or-link.js @@ -75,12 +75,19 @@ const Media = memo(function Media ({ export default function MediaOrLink ({ linkFallback = true, ...props }) { const media = useMediaHelper(props) const [error, setError] = useState(false) - const { showCarousel, addMedia, removeMedia } = useCarousel() + const { showCarousel, addMedia, confirmMedia, removeMedia } = useCarousel() + // register placeholder immediately on mount if we have a src useEffect(() => { - if (!media.image) return + if (!media.bestResSrc) return addMedia({ src: media.bestResSrc, originalSrc: media.originalSrc, rel: props.rel }) - }, [media.image]) + }, [media.bestResSrc]) + + // confirm media for carousel based on image detection + useEffect(() => { + if (!media.image) return + confirmMedia(media.bestResSrc) + }, [media.image, media.bestResSrc]) const handleClick = useCallback(() => showCarousel({ src: media.bestResSrc }), [showCarousel, media.bestResSrc])