Remove react-slider dependency

package-lock.json

@@ -56,7 +56,6 @@
         "react-router": "^6.5.0",
         "react-router-dom": "^6.5.0",
         "react-simple-img": "^3.0.0",
-        "react-slider": "^2.0.4",
         "react-virtualized-auto-sizer": "^1.0.6",
         "react-window": "^1.8.8",
         "react-window-infinite-loader": "^1.0.8",
@@ -77,7 +76,6 @@
         "@types/node": "^17.0.23",
         "@types/react": "^18.0.25",
         "@types/react-dom": "^18.0.8",
-        "@types/react-slider": "^1.3.1",
         "@types/react-test-renderer": "^17.0.1",
         "@types/react-virtualized-auto-sizer": "^1.0.1",
         "@types/react-window": "^1.8.5",
@@ -2878,15 +2876,6 @@
         "@types/react": "*"
       }
     },
-    "node_modules/@types/react-slider": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@types/react-slider/-/react-slider-1.3.1.tgz",
-      "integrity": "sha512-4X2yK7RyCIy643YCFL+bc6XNmcnBtt8n88uuyihvcn5G7Lut23eNQU3q3KmwF7MWIfKfsW5NxCjw0SeDZRtgaA==",
-      "dev": true,
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/react-test-renderer": {
       "version": "17.0.1",
       "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-17.0.1.tgz",
@@ -17485,17 +17474,6 @@
         "react-dom": ">= 16.3.0"
       }
     },
-    "node_modules/react-slider": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/react-slider/-/react-slider-2.0.4.tgz",
-      "integrity": "sha512-sWwQD01n6v+MbeLCYthJGZPc0kzOyhQHyd0bSo0edg+IAxTVQmj3Oy4SBK65eX6gNwS9meUn6Z5sIBUVmwAd9g==",
-      "dependencies": {
-        "prop-types": "^15.8.1"
-      },
-      "peerDependencies": {
-        "react": "^16 || ^17 || ^18"
-      }
-    },
     "node_modules/react-style-singleton": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
@@ -25800,15 +25778,6 @@
         "@types/react": "*"
       }
     },
-    "@types/react-slider": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@types/react-slider/-/react-slider-1.3.1.tgz",
-      "integrity": "sha512-4X2yK7RyCIy643YCFL+bc6XNmcnBtt8n88uuyihvcn5G7Lut23eNQU3q3KmwF7MWIfKfsW5NxCjw0SeDZRtgaA==",
-      "dev": true,
-      "requires": {
-        "@types/react": "*"
-      }
-    },
     "@types/react-test-renderer": {
       "version": "17.0.1",
       "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-17.0.1.tgz",
@@ -36797,14 +36766,6 @@
       "integrity": "sha512-I0sG/GgY9c+04BgWf1YRlipWBQxR3oG2s/bagU8EO7zals3/Vkfk1PJMeYh/wHfjxJtUmal+y7HWEBm4MzXVsQ==",
       "requires": {}
     },
-    "react-slider": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/react-slider/-/react-slider-2.0.4.tgz",
-      "integrity": "sha512-sWwQD01n6v+MbeLCYthJGZPc0kzOyhQHyd0bSo0edg+IAxTVQmj3Oy4SBK65eX6gNwS9meUn6Z5sIBUVmwAd9g==",
-      "requires": {
-        "prop-types": "^15.8.1"
-      }
-    },
     "react-style-singleton": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",

package.json

@@ -170,7 +170,6 @@
     "@types/node": "^17.0.23",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.8",
-    "@types/react-slider": "^1.3.1",
     "@types/react-test-renderer": "^17.0.1",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
@@ -294,7 +293,6 @@
     "react-router": "^6.5.0",
     "react-router-dom": "^6.5.0",
     "react-simple-img": "^3.0.0",
-    "react-slider": "^2.0.4",
     "react-virtualized-auto-sizer": "^1.0.6",
     "react-window": "^1.8.8",
     "react-window-infinite-loader": "^1.0.8",

src/renderer/features/player/components/slider.tsx

@@ -1,149 +0,0 @@
-import { useMemo, useState } from 'react';
-import format from 'format-duration';
-import type { ReactSliderProps } from 'react-slider';
-import ReactSlider from 'react-slider';
-import styled from 'styled-components';
-
-interface SliderProps extends ReactSliderProps {
-  hasTooltip?: boolean;
-  height: string;
-  tooltipType?: 'text' | 'time';
-}
-
-const StyledSlider = styled(ReactSlider)<SliderProps | any>`
-  width: 100%;
-  height: ${(props) => props.height};
-  outline: none;
-
-  .thumb {
-    top: 37%;
-    opacity: 1;
-
-    &::after {
-      position: absolute;
-      top: -25px;
-      left: -18px;
-      display: ${(props) => (props.$isDragging && props.$hasToolTip ? 'block' : 'none')};
-      padding: 2px 6px;
-      color: var(--tooltip-fg);
-      white-space: nowrap;
-      background: var(--tooltip-bg);
-      border-radius: 4px;
-      content: attr(data-tooltip);
-    }
-
-    &:focus-visible {
-      width: 13px;
-      height: 13px;
-      text-align: center;
-      background-color: #fff;
-      border: 1px var(--primary-color) solid;
-      border-radius: 100%;
-      outline: none;
-      transform: translate(-12px, -4px);
-      opacity: 1;
-    }
-  }
-
-  .track-0 {
-    background: ${(props) => props.$isDragging && 'var(--primary-color)'};
-    transition: background 0.2s ease-in-out;
-  }
-
-  .track {
-    top: 37%;
-    border-radius: 5px;
-  }
-
-  &:hover {
-    .track-0 {
-      background: var(--primary-color);
-    }
-  }
-`;
-
-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}
-    />
-  );
-};
-
-const StyledTrack = styled.div<any>`
-  top: 0;
-  bottom: 0;
-  height: 5px;
-  background: ${(props) =>
-    props.index === 1
-      ? 'var(--playerbar-slider-track-bg)'
-      : 'var(--playerbar-slider-track-progress-bg)'};
-`;
-
-const Track = (props: any, state: any) => (
-  <StyledTrack
-    {...props}
-    // eslint-disable-next-line react/destructuring-assignment
-    index={state.index}
-  />
-);
-const Thumb = (props: any, state: any, toolTipType: any) => (
-  <MemoizedThumb
-    key="slider"
-    props={props}
-    state={state}
-    tabIndex={0}
-    toolTipType={toolTipType}
-  />
-);
-
-export const Slider = ({
-  height,
-  tooltipType: toolTipType,
-  hasTooltip: hasToolTip,
-  ...rest
-}: SliderProps) => {
-  const [isDragging, setIsDragging] = useState(false);
-
-  return (
-    <StyledSlider
-      {...rest}
-      $hasToolTip={hasToolTip}
-      $isDragging={isDragging}
-      className="player-slider"
-      defaultValue={0}
-      height={height}
-      renderThumb={(props: any, state: any) => {
-        return Thumb(props, state, toolTipType);
-      }}
-      renderTrack={Track}
-      onAfterChange={(e: number, index: number) => {
-        if (rest.onAfterChange) {
-          rest.onAfterChange(e, index);
-        }
-        setIsDragging(false);
-      }}
-      onBeforeChange={(e: number, index: number) => {
-        if (rest.onBeforeChange) {
-          rest.onBeforeChange(e, index);
-        }
-        setIsDragging(true);
-      }}
-    />
-  );
-};
-
-Slider.defaultProps = {
-  hasTooltip: true,
-  tooltipType: 'text',
-};