diff --git a/package-lock.json b/package-lock.json index 43f75171..1751af02 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index aea5d439..13491755 100644 --- a/package.json +++ b/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", diff --git a/src/renderer/features/player/components/slider.tsx b/src/renderer/features/player/components/slider.tsx deleted file mode 100644 index 8fa82656..00000000 --- a/src/renderer/features/player/components/slider.tsx +++ /dev/null @@ -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)` - 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 ( -
- ); -}; - -const StyledTrack = styled.div` - 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) => ( - -); -const Thumb = (props: any, state: any, toolTipType: any) => ( - -); - -export const Slider = ({ - height, - tooltipType: toolTipType, - hasTooltip: hasToolTip, - ...rest -}: SliderProps) => { - const [isDragging, setIsDragging] = useState(false); - - return ( - { - 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', -};