Order carousel as images appear in items / markdown

components/carousel.js

@@ -108,23 +108,35 @@ 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 <Carousel close={close} mediaArr={Array.from(media.current.entries())} src={src} setOptions={setOptions} />
+      return <Carousel close={close} mediaArr={confirmedEntries} src={src} setOptions={setOptions} />
     }, {
       fullScreen: true,
       overflow: <CarouselOverflow {...media.current.get(src)} />
     })
   }, [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 <CarouselContext.Provider value={value}>{children}</CarouselContext.Provider>
 }
 

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
           </div>)
         : <div />}
       <RootProvider root={item.root || item}>
-        <CarouselProvider key={item.id}>
+        <CarouselProvider key={carouselKey}>
           {item.parentId
             ? <Comment topLevel item={item} replyOpen includeParent noComments {...props} />
             : (

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