Improve slider components

package.json

@@ -183,6 +183,7 @@
     "@types/react-lazy-load-image-component": "^1.5.2",
     "@types/react-redux": "^7.1.18",
     "@types/react-router-dom": "^5.1.6",
+    "@types/react-slider": "^1.3.1",
     "@types/react-test-renderer": "^17.0.1",
     "@types/react-transition-group": "^4.4.4",
     "@types/react-virtualized": "^9.21.13",
@@ -291,6 +292,7 @@
     "react-query": "^3.19.1",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
+    "react-slider": "^2.0.0",
     "react-use": "^17.3.2",
     "react-virtualized-auto-sizer": "^1.0.6",
     "react-window": "^1.8.6",

src/components/player/PlayerBar.tsx

@@ -1,7 +1,6 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, useMemo } from 'react';
 import axios from 'axios';
 import { nanoid } from 'nanoid/non-secure';
-import { ipcRenderer } from 'electron';
 import { useQueryClient } from 'react-query';
 import settings from 'electron-settings';
 import { FlexboxGrid, Grid, Row, Col, Whisper, Icon } from 'rsuite';
@@ -13,7 +12,6 @@ import {
   PlayerContainer,
   PlayerColumn,
   PlayerControlIcon,
-  CustomSlider,
   DurationSpan,
   VolumeIcon,
   LinkButton,
@@ -38,6 +36,7 @@ import useFavorite from '../../hooks/useFavorite';
 import { useRating } from '../../hooks/useRating';
 import usePlayQueueHandler from '../../hooks/usePlayQueueHandler';
 import { apiController } from '../../api/controller';
+import Slider from '../slider/Slider';
 
 const DiscordRPC = require('discord-rpc');
 
@@ -49,10 +48,8 @@ const PlayerBar = () => {
   const config = useAppSelector((state) => state.config);
   const folder = useAppSelector((state) => state.folder);
   const dispatch = useAppDispatch();
-  const [seek, setSeek] = useState(0);
-  const [isDragging, setIsDragging] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
   const [isDraggingVolume, setIsDraggingVolume] = useState(false);
-  const [manualSeek, setManualSeek] = useState(0);
   const [currentEntryList, setCurrentEntryList] = useState('entry');
   const [localVolume, setLocalVolume] = useState(Number(settings.getSync('volume')));
   const [muted, setMuted] = useState(false);
@@ -61,6 +58,11 @@ const PlayerBar = () => {
   const [showLyricsModal, setShowLyricsModal] = useState(false);
   const [isLoadingRandom, setIsLoadingRandom] = useState(false);
   const { handlePlayQueueAdd } = usePlayQueueHandler();
+  const songDuration = useMemo(
+    () => format(playQueue[currentEntryList][playQueue.currentIndex]?.duration * 1000 || 0),
+    [currentEntryList, playQueue]
+  );
+  const songCurrentTime = useMemo(() => format(currentTime * 1000 || 0), [currentTime]);
 
   const handlePlayRandom = async () => {
     setIsLoadingRandom(true);
@@ -89,9 +91,9 @@ const PlayerBar = () => {
     if (player.status === 'PLAYING') {
       const interval = setInterval(() => {
         if (playQueue.currentPlayer === 1) {
-          setSeek(playersRef.current?.player1.audioEl.current.currentTime || 0);
+          setCurrentTime(playersRef.current?.player1.audioEl.current.currentTime || 0);
         } else {
-          setSeek(playersRef.current?.player2.audioEl.current.currentTime || 0);
+          setCurrentTime(playersRef.current?.player2.audioEl.current.currentTime || 0);
         }
       }, 200);
 
@@ -236,7 +238,6 @@ const PlayerBar = () => {
     handleSeekBackward,
     handleSeekForward,
     handleSeekSlider,
-    handleVolumeKey,
     handleVolumeSlider,
     handleVolumeWheel,
     handleRepeat,
@@ -249,11 +250,10 @@ const PlayerBar = () => {
     playQueue,
     currentEntryList,
     playersRef,
-    setIsDragging,
-    setManualSeek,
     isDraggingVolume,
     setIsDraggingVolume,
-    setLocalVolume
+    setLocalVolume,
+    setCurrentTime
   );
 
   useEffect(() => {
@@ -284,38 +284,6 @@ const PlayerBar = () => {
     playersRef.current.player2.audioEl.current.currentTime = 0;
   }, [playQueue.playerUpdated]);
 
-  useEffect(() => {
-    // Sets the MPRIS seek slider
-    ipcRenderer.send('seeked', manualSeek * 1000000);
-
-    const debounce = setTimeout(() => {
-      if (isDragging) {
-        if (playQueue.currentPlayer === 1) {
-          if (config.serverType === Server.Jellyfin) {
-            playersRef.current.player1.audioEl.current.pause();
-            playersRef.current.player1.audioEl.current.currentTime = manualSeek;
-            playersRef.current.player1.audioEl.current.play();
-          } else {
-            playersRef.current.player1.audioEl.current.currentTime = manualSeek;
-          }
-        } else if (config.serverType === Server.Jellyfin) {
-          playersRef.current.player2.audioEl.current.pause();
-          playersRef.current.player2.audioEl.current.currentTime = manualSeek;
-          playersRef.current.player2.audioEl.current.play();
-        } else {
-          playersRef.current.player2.audioEl.current.currentTime = manualSeek;
-        }
-
-        // Wait for the seek to catch up, otherwise the bar will bounce back and forth
-        setTimeout(() => {
-          setIsDragging(false);
-        }, 300);
-      }
-    }, 100);
-
-    return () => clearTimeout(debounce);
-  }, [config.serverType, isDragging, manualSeek, playQueue.currentPlayer]);
-
   const { handleFavorite } = useFavorite();
   const { handleRating } = useRating();
 
@@ -493,7 +461,7 @@ const PlayerBar = () => {
                   icon="stop"
                   size="lg"
                   fixedWidth
-                  disabled={playQueue.entry.length === 0 || player.status !== 'PLAYING'}
+                  disabled={playQueue.entry.length === 0}
                   onClick={handleStop}
                   onKeyDown={(e: any) => {
                     if (e.key === ' ' || e.key === 'Enter') {
@@ -624,27 +592,20 @@ const PlayerBar = () => {
                     userSelect: 'none',
                   }}
                 >
-                  <DurationSpan>{format((isDragging ? manualSeek : seek) * 1000)}</DurationSpan>
+                  <DurationSpan>{songCurrentTime}</DurationSpan>
                 </FlexboxGrid.Item>
                 <FlexboxGrid.Item colspan={16}>
                   {/* Seek Slider */}
-                  <CustomSlider
-                    tabIndex={0}
-                    progress
-                    defaultValue={0}
-                    value={isDragging ? manualSeek : seek}
-                    $isDragging={isDragging}
-                    tooltip={false}
+                  <Slider
+                    value={
+                      playQueue.currentPlayer === 1
+                        ? playersRef.current?.player1.audioEl.current.currentTime || 0
+                        : playersRef.current?.player2.audioEl.current.currentTime || 0
+                    }
+                    min={0}
                     max={playQueue[currentEntryList][playQueue.currentIndex]?.duration || 0}
-                    onChange={handleSeekSlider}
-                    onKeyDown={(e: any) => {
-                      if (e.key === 'ArrowLeft') {
-                        handleSeekBackward();
-                      } else if (e.key === 'ArrowRight') {
-                        handleSeekForward();
-                      }
-                    }}
-                    style={{ width: '100%' }}
+                    onAfterChange={handleSeekSlider}
+                    toolTipType="time"
                   />
                 </FlexboxGrid.Item>
                 <FlexboxGrid.Item
@@ -655,11 +616,7 @@ const PlayerBar = () => {
                     userSelect: 'none',
                   }}
                 >
-                  <DurationSpan>
-                    {format(
-                      playQueue[currentEntryList][playQueue.currentIndex]?.duration * 1000 || 0
-                    )}
-                  </DurationSpan>
+                  <DurationSpan>{songDuration}</DurationSpan>
                 </FlexboxGrid.Item>
               </FlexboxGrid>
             </PlayerColumn>
@@ -838,10 +795,14 @@ const PlayerBar = () => {
               <div
                 style={{
                   height: '25px',
+                  width: '100%',
+                  maxWidth: '115px',
+                  marginRight: '10px',
                   display: 'flex',
                   alignSelf: 'flex-end',
                   alignItems: 'center',
                 }}
+                onWheel={handleVolumeWheel}
               >
                 {/* Volume Slider */}
                 <VolumeIcon
@@ -856,16 +817,12 @@ const PlayerBar = () => {
                   preventOverflow
                   speaker={<Popup>{muted ? t('Muted') : Math.floor(localVolume * 100)}</Popup>}
                 >
-                  <CustomSlider
-                    tabIndex={0}
-                    progress
+                  <Slider
                     value={Math.floor(localVolume * 100)}
-                    $isDragging={isDraggingVolume}
-                    tooltip={false}
-                    style={{ width: '87px', marginRight: '10px' }}
+                    min={0}
+                    max={100}
                     onChange={handleVolumeSlider}
-                    onKeyDown={handleVolumeKey}
-                    onWheel={handleVolumeWheel}
+                    toolTipType="text"
                   />
                 </Whisper>
               </div>

src/components/slider/Slider.tsx

@@ -0,0 +1,123 @@
+import React, { useMemo, useState } from 'react';
+import ReactSlider, { ReactSliderProps } from 'react-slider';
+import styled from 'styled-components';
+import format from 'format-duration';
+
+interface SliderProps extends ReactSliderProps {
+  toolTipType?: 'text' | 'time';
+  hasToolTip?: boolean;
+}
+
+const StyledSlider = styled<any>(ReactSlider)`
+  width: 100%;
+  height: 25px;
+  outline: none;
+
+  .thumb {
+    opacity: 1;
+    top: 37%;
+
+    &:after {
+      content: attr(data-tooltip);
+      top: -25px;
+      left: -18px;
+      color: ${(props) => props.theme.colors.tooltip.color};
+      background: ${(props) => props.theme.colors.tooltip.background};
+      border-radius: 4px;
+      padding: 2px 6px;
+      white-space: nowrap;
+      position: absolute;
+      display: ${(props) => (props.isDragging && props.hasToolTip ? 'block' : 'none')};
+    }
+
+    &:focus-visible {
+      outline: none;
+      height: 13px;
+      width: 13px;
+      border: 1px ${(props) => props.theme.colors.primary} solid;
+      border-radius: 100%;
+      text-align: center;
+      background-color: #ffffff;
+      transform: translate(-12px, -4px);
+    }
+  }
+
+  .track-0 {
+    background: ${(props) => props.isDragging && props.theme.colors.primary};
+  }
+
+  .track {
+    top: 37%;
+  }
+
+  &:hover {
+    .track-0 {
+      background: ${(props) => (props.index === 1 ? '#3c3f43' : props.theme.colors.primary)};
+    }
+  }
+`;
+
+const StyledTrack = styled.div<any>`
+  top: 0;
+  bottom: 0;
+  height: 5px;
+  background: ${(props) =>
+    props.index === 1
+      ? props.theme.colors.slider.background
+      : props.theme.colors.slider.progressBar};
+`;
+
+const MemoizedThumb = ({ props, state, toolTipType }: any) => {
+  const { value } = state;
+  const formattedValue = useMemo(() => {
+    if (toolTipType === 'text') {
+      return value;
+    }
+
+    return format(value * 1000);
+  }, [toolTipType, value]);
+
+  return <div {...props} data-tooltip={formattedValue} />;
+};
+
+// eslint-disable-next-line react/destructuring-assignment
+const Track = (props: any, state: any) => <StyledTrack {...props} index={state.index} />;
+const Thumb = (props: any, state: any, toolTipType: any) => (
+  <MemoizedThumb tabIndex={0} props={props} state={state} toolTipType={toolTipType} />
+);
+
+const Slider = ({ toolTipType, hasToolTip, ...rest }: SliderProps) => {
+  const [isDragging, setIsDragging] = useState(false);
+
+  return (
+    <StyledSlider
+      {...rest}
+      defaultValue={0}
+      renderTrack={Track}
+      renderThumb={(props: any, state: any) => {
+        return Thumb(props, state, toolTipType);
+      }}
+      isDragging={isDragging}
+      hasToolTip={hasToolTip}
+      onBeforeChange={(e: number, index: number) => {
+        if (rest.onBeforeChange) {
+          rest.onBeforeChange(e, index);
+        }
+        setIsDragging(true);
+      }}
+      onAfterChange={(e: number, index: number) => {
+        if (rest.onAfterChange) {
+          rest.onAfterChange(e, index);
+        }
+        setIsDragging(false);
+      }}
+    />
+  );
+};
+
+Slider.defaultProps = {
+  toolTipType: 'text',
+  hasToolTip: true,
+};
+
+export default Slider;