From 35e1eb2966d8aecf14e0465a3d375c7a62c513e8 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Wed, 3 Jan 2024 21:30:58 +1300
Subject: [PATCH] Use native scrolling for lyrics - On mouse wheel scroll,
 disable autoscrolling until remounted

---
 src/js/views/Modals/KioskMode.js | 18 +++++++++++++++---
 src/scss/views/_modal.scss       | 10 +++++-----
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/js/views/Modals/KioskMode.js b/src/js/views/Modals/KioskMode.js
index b93150470..3cb4e168a 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({});
+  const contentRef = useRef({});
+  const [autoScroll, setAutoScroll] = useState(true);
+  const onWheel = () => setAutoScroll(false);
+
+  useEffect(() => {
+    if (autoScroll) {
+      const scrollable = contentRef.current?.scrollHeight - containerRef.current.clientHeight;
+      containerRef.current.scrollTo(0, percent * scrollable)
+    }
+  }, [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>
   );
diff --git a/src/scss/views/_modal.scss b/src/scss/views/_modal.scss
index 1bb3e6667..0b516f60f 100755
--- a/src/scss/views/_modal.scss
+++ b/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;