diff --git a/src/main/auth.ts b/src/main/auth.ts index f41f0120..b98f423f 100644 --- a/src/main/auth.ts +++ b/src/main/auth.ts @@ -49,7 +49,7 @@ export const getAuthUrl = (): string => { const scopes = AUTH_SCOPES.join('%20'); const authUrl = - `${AUTH_URL}?response_type=code&client_id=${AUTH_CLIENT_ID}&redirect_uri=http://localhost:${AUTH_PORT}&` + + `${AUTH_URL}?response_type=code&client_id=${AUTH_CLIENT_ID}&redirect_uri=http://127.0.0.1:${AUTH_PORT}&` + `scope=${scopes}&state=${codeState}&code_challenge=${codeChallenge}&code_challenge_method=S256`; return authUrl; @@ -104,7 +104,7 @@ export const refreshAccessToken = async (refreshToken: string): Promise => data = null; } else if (!scopesMatch(data.scope)) { console.warn( - `Authorization scopes mismatch\n Expected: ${AUTH_SCOPES.join(' ')}\n Token has: '${data.scope}` + `Authorization scopes mismatch\n Expected: ${AUTH_SCOPES.join(' ')}\n Token has: '${data.scope}'` ); data = null; } else { @@ -120,7 +120,7 @@ const retrieveAccessToken = async (verifier: string, code: string): Promise { }; const handleServerResponse = async (request: http.IncomingMessage, response: http.ServerResponse): Promise => { - const urlObj = new URL(`http://localhost:${AUTH_PORT}/${request.url}`); + const urlObj = new URL(`http://127.0.0.1:${AUTH_PORT}/${request.url}`); const queryState = urlObj.searchParams.get('state'); try { diff --git a/src/renderer/api/spotify-api.ts b/src/renderer/api/spotify-api.ts index c32dc50a..ddb8872e 100644 --- a/src/renderer/api/spotify-api.ts +++ b/src/renderer/api/spotify-api.ts @@ -74,8 +74,8 @@ class SpotifyApi { private refreshToken: string; async updateTokens(data: AuthData): Promise { - this.accessToken = data?.access_token; - this.refreshToken = data?.refresh_token; + this.accessToken = data?.access_token ?? this.accessToken; + this.refreshToken = data?.refresh_token ?? this.refreshToken; if (!this.accessToken) { return null; @@ -119,13 +119,13 @@ class SpotifyApi { async like(isLiked: boolean, trackId: string): Promise { const verb = isLiked ? 'DELETE' : 'PUT'; - await this.fetch(`/me/tracks?ids=${trackId}`, { + await this.fetch(`/me/library?uris=spotify:track:${trackId}`, { method: verb, }); } async isTrackLiked(trackId: string): Promise { - const likedResponse: Array = await this.fetch(`/me/tracks/contains?ids=${trackId}`, { + const likedResponse: Array = await this.fetch(`/me/library/contains?uris=spotify:track:${trackId}`, { method: 'GET', }); diff --git a/src/renderer/app/cover/index.tsx b/src/renderer/app/cover/index.tsx index 4977f671..56ab04e7 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 0419a748..0693e8f8 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 = () => { = ({ track, artist, me {track} {artist} @@ -93,8 +91,6 @@ export const TrackInfo: FunctionComponent = ({ track, artist, me style={{ display: message ? 'flex' : 'none', justifyContent: isOnLeft ? 'start' : 'end', - paddingLeft: !isOnLeft && '0.5rem', - paddingRight: isOnLeft && '0.5rem', }}> {message}