diff --git a/src/renderer/app/cover/index.tsx b/src/renderer/app/cover/index.tsx index 4977f67..56ab04e 100644 --- a/src/renderer/app/cover/index.tsx +++ b/src/renderer/app/cover/index.tsx @@ -115,10 +115,9 @@ export const Cover: FunctionComponent = ({ settings, message, onVisualiza setCurrentSongId(state.id); console.log(`New song '${songTitle}' by '${artist}.`); await refreshTrackLiked(); - } - - if (!isAlwaysShowTrackInfo && showTrackInfoTemporarilyInSeconds) { + } else if (!isAlwaysShowTrackInfo && showTrackInfoTemporarilyInSeconds) { setShouldShowTrackInfo(true); + console.log('Showing track info temporarily.'); const timer = setTimeout(() => { if (!document.getElementById('visible-ui')?.matches(':hover')) { @@ -143,12 +142,12 @@ export const Cover: FunctionComponent = ({ settings, message, onVisualiza ]); useEffect(() => { - return () => { - if (trackInfoTimer) { - clearTimeout(trackInfoTimer); - } - }; - }, [trackInfoTimer]); + if (!state.isPlaying && trackInfoTimer) { + clearTimeout(trackInfoTimer); + setTrackInfoTimer(null); + setShouldShowTrackInfo(false); + } + }, [state.isPlaying, trackInfoTimer]); const keepAlive = useCallback(async (): Promise => { if (state.isPlaying || state.userProfile?.accountType !== AccountType.Premium) { @@ -166,6 +165,11 @@ export const Cover: FunctionComponent = ({ settings, message, onVisualiza } }, [state.isPlaying, state.progress, state.userProfile?.accountType]); + const [localVolume, setLocalVolume] = useState(state.volume); + useEffect(() => { + setLocalVolume(state.volume); + }, [state.volume]); + const changeVolume = useCallback( (newVolume: number) => { try { @@ -191,27 +195,41 @@ export const Cover: FunctionComponent = ({ settings, message, onVisualiza const onMouseWheel = useCallback( async ({ deltaY }: WheelEvent): Promise => { - const direction = Math.sign(deltaY); - const newVolume = clamp(state.volume - direction * volumeIncrement, 0, 100); + const direction = Math.sign(-deltaY); + console.log(`Mouse wheel direction: ${direction}`); + const newVolume = clamp(localVolume + volumeIncrement * direction, 0, 100); + setLocalVolume(newVolume); try { - // TODO use a state variable to buffer the volume change - if (newVolume !== state.volume) { - changeVolume(newVolume); - } + changeVolume(newVolume); } catch (error) { throw new Error(`Update volume error: ${error}`); } }, - [changeVolume, state.volume, volumeIncrement] + [localVolume, volumeIncrement, changeVolume] ); + const ondblClick = useCallback((): void => { + console.log('Double clicked'); + // Add functionality here + // Tried opening spotify app but couldn't get it to work + }, []); + useEffect(() => { - document.getElementById('visible-ui').addEventListener('mousewheel', onMouseWheel); + const el = document.getElementById('visible-ui'); + el.addEventListener('mousewheel', onMouseWheel); return () => { - document.getElementById('visible-ui').removeEventListener('mousewheel', onMouseWheel); + el.removeEventListener('mousewheel', onMouseWheel); }; }, [onMouseWheel]); + useEffect(() => { + const el = document.getElementById('visible-ui'); + el.addEventListener('dblclick', ondblClick); + return () => { + el.removeEventListener('dblclick', ondblClick); + }; + }, [ondblClick]); + useEffect(() => { const listeningToIntervalId = setInterval(handlePlaybackChanged, trackInfoRefreshTimeInSeconds * ONE_SECOND_IN_MS); diff --git a/src/renderer/windows/settings/window-settings.tsx b/src/renderer/windows/settings/window-settings.tsx index 0419a74..0693e8f 100644 --- a/src/renderer/windows/settings/window-settings.tsx +++ b/src/renderer/windows/settings/window-settings.tsx @@ -52,7 +52,7 @@ export const WindowSettings: FunctionComponent = () => {