diff --git a/src/renderer/features/player/components/playerbar-slider.module.css b/src/renderer/features/player/components/playerbar-slider.module.css index 580836bf6..2d7f8d20e 100644 --- a/src/renderer/features/player/components/playerbar-slider.module.css +++ b/src/renderer/features/player/components/playerbar-slider.module.css @@ -74,14 +74,3 @@ align-items: center; height: 100%; } - -.wavesurfer-container { - width: 100%; - cursor: pointer; -} - -.waveform { - align-items: center; - width: 100%; - height: 100%; -} diff --git a/src/renderer/features/player/components/playerbar-waveform.module.css b/src/renderer/features/player/components/playerbar-waveform.module.css index e69de29bb..5d5a5ff2c 100644 --- a/src/renderer/features/player/components/playerbar-waveform.module.css +++ b/src/renderer/features/player/components/playerbar-waveform.module.css @@ -0,0 +1,10 @@ +.wavesurfer-container { + width: 100%; + cursor: pointer; +} + +.waveform { + align-items: center; + width: 100%; + height: 100%; +} diff --git a/src/renderer/features/player/components/playerbar-waveform.tsx b/src/renderer/features/player/components/playerbar-waveform.tsx index 5eb842317..e402ade0d 100644 --- a/src/renderer/features/player/components/playerbar-waveform.tsx +++ b/src/renderer/features/player/components/playerbar-waveform.tsx @@ -2,7 +2,8 @@ import { useWavesurfer } from '@wavesurfer/react'; import { AnimatePresence, motion } from 'motion/react'; import { useEffect, useMemo, useRef, useState } from 'react'; -import styles from './playerbar-slider.module.css'; +import { CustomPlayerbarSlider } from './playerbar-slider'; +import styles from './playerbar-waveform.module.css'; import { api } from '/@/renderer/api'; import { usePlayer } from '/@/renderer/features/player/context/player-context'; @@ -150,6 +151,23 @@ export const PlayerbarWaveform = () => { } }, [wavesurfer, currentTime, songDuration]); + // Show disabled slider when there's no current song + if (!currentSong) { + return ( + { + e?.stopPropagation(); + }} + size={6} + value={0} + w="100%" + /> + ); + } + return (