import { getBlurHashAverageColor } from 'fast-blurhash'; import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks'; import { useHotkeys } from 'react-hotkeys-hook'; import { useMatch } from 'react-router-dom'; import Icon from './icon'; import Link from './link'; import Media from './media'; import Modal from './modal'; function MediaModal({ mediaAttachments, statusID, instance, index = 0, onClose = () => {}, }) { const carouselRef = useRef(null); // NOTE: Optional path segment doesn't work yet // https://github.com/remix-run/react-router/issues/10039 // const isStatusLocation = useMatch('/:instance?/s/:id'); const isStatusLocation = useMatch('/:instance/s/:id') || useMatch('/s/:id'); const [currentIndex, setCurrentIndex] = useState(index); const carouselFocusItem = useRef(null); useLayoutEffect(() => { carouselFocusItem.current?.scrollIntoView(); }, []); const prevStatusID = useRef(statusID); useEffect(() => { const scrollLeft = index * carouselRef.current.clientWidth; const differentStatusID = prevStatusID.current !== statusID; if (differentStatusID) prevStatusID.current = statusID; carouselRef.current.scrollTo({ left: scrollLeft, behavior: differentStatusID ? 'auto' : 'smooth', }); }, [index, statusID]); const [showControls, setShowControls] = useState(true); useEffect(() => { let handleSwipe = () => { onClose(); }; if (carouselRef.current) { carouselRef.current.addEventListener('swiped-down', handleSwipe); } return () => { if (carouselRef.current) { carouselRef.current.removeEventListener('swiped-down', handleSwipe); } }; }, []); useHotkeys('esc', onClose, [onClose]); const [showMediaAlt, setShowMediaAlt] = useState(false); useEffect(() => { let handleScroll = () => { const { clientWidth, scrollLeft } = carouselRef.current; const index = Math.round(scrollLeft / clientWidth); setCurrentIndex(index); }; if (carouselRef.current) { carouselRef.current.addEventListener('scroll', handleScroll, { passive: true, }); } return () => { if (carouselRef.current) { carouselRef.current.removeEventListener('scroll', handleScroll); } }; }, []); return ( <> {mediaAttachments?.length > 1 && ( )} {!!showMediaAlt && ( { if (e.target === e.currentTarget) { setShowMediaAlt(false); } }} >

Media description

{showMediaAlt}

)} {!!showMediaAlt && ( { if (e.target === e.currentTarget) { setShowMediaAlt(false); } }} >

Media description

{showMediaAlt}

)} ); } export default MediaModal;