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;