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])