diff --git a/src/js/views/Modals/KioskMode.js b/src/js/views/Modals/KioskMode.js index b9315047..45c20fec 100755 --- a/src/js/views/Modals/KioskMode.js +++ b/src/js/views/Modals/KioskMode.js @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import Modal from './Modal'; import Thumbnail from '../../components/Thumbnail'; @@ -17,12 +17,24 @@ const LyricsScroller = ({ content = '', percent = 0, }) => { + const containerRef = useRef(null); + const contentRef = useRef(null); + const [autoScroll, setAutoScroll] = useState(true); + const onWheel = () => setAutoScroll(false); + + useEffect(() => { + if (autoScroll) { + const height = (contentRef.current?.scrollHeight - containerRef.current?.clientHeight) || 0; + containerRef.current.scrollTo(0, percent * height) + } + }, [percent]); + return ( -