Merge pull request #939 from jaedb/feat/901-lyrics-manual-scroll

Feat/901 lyrics manual scroll

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 (
-    <div className="lyrics">
+    <div ref={containerRef} className="lyrics" onWheel={onWheel}>
       <div
+        ref={contentRef}
         className="lyrics__content"
         dangerouslySetInnerHTML={{ __html: content }}
-        style={{ transform: `translateY(-${(percent * 110).toFixed(4)}%)` }}
       />
     </div>
   );

src/scss/views/_modal.scss

@@ -390,18 +390,18 @@
         width: 70%;
         height: 100%;
         margin-top: 50px;
-        overflow-y: hidden;
         position: relative;
+        overflow-y: scroll;
+        scroll-behavior: smooth;
 
         &__content {
           font-size: 1.6rem;
           line-height: 2.2rem;
-          position: absolute;
-          top: 50%;
-          left: 10%;
           width: 80%;
-          transition: transform 0.9s linear;
+          margin: 0 auto;
           text-align: center;
+          padding-top: 40vh;
+          padding-bottom: 40vh;
 
           @include responsive(null, null, $bp_medium) {
             font-size: 1.4rem;