diff --git a/src/app.css b/src/app.css index a067b0b7..27fc40c1 100644 --- a/src/app.css +++ b/src/app.css @@ -664,6 +664,7 @@ button.carousel-dot { color: var(--text-insignificant-color) !important; font-weight: bold; backdrop-filter: none !important; + transition: all 0.2s; } button.carousel-dot[disabled] { pointer-events: none; diff --git a/src/components/status.jsx b/src/components/status.jsx index b8f4a068..339a9b2d 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -12,7 +12,6 @@ import { useState, } from 'preact/hooks'; import { useHotkeys } from 'react-hotkeys-hook'; -import { InView } from 'react-intersection-observer'; import 'swiped-events'; import useResizeObserver from 'use-resize-observer'; import { useSnapshot } from 'valtio'; @@ -26,7 +25,6 @@ import htmlContentLength from '../utils/html-content-length'; import shortenNumber from '../utils/shorten-number'; import states, { saveStatus } from '../utils/states'; import store from '../utils/store'; -import useDebouncedCallback from '../utils/useDebouncedCallback'; import visibilityIconsMap from '../utils/visibility-icons-map'; import Avatar from './avatar'; @@ -1260,19 +1258,8 @@ function Carousel({ mediaAttachments, index = 0, onClose = () => {} }) { const [currentIndex, setCurrentIndex] = useState(index); const carouselFocusItem = useRef(null); useLayoutEffect(() => { - carouselFocusItem.current?.node?.scrollIntoView(); + carouselFocusItem.current?.scrollIntoView(); }, []); - useLayoutEffect(() => { - carouselFocusItem.current?.node?.scrollIntoView({ - behavior: 'smooth', - }); - }, [currentIndex]); - - const onSnap = useDebouncedCallback((inView, i) => { - if (inView) { - setCurrentIndex(i); - } - }, 100); const [showControls, setShowControls] = useState(true); @@ -1294,6 +1281,24 @@ function Carousel({ mediaAttachments, index = 0, 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 ( <>