Spotify

{#if !$spotifyAuth.loggedIn}
Login to Spotify

Enter your Spotify Developer credentials and authorize access:

{#if loginError}
⚠ {loginError}
{/if} {#if isWaitingForCallback}
Waiting for authorization in your browser... Please complete the login process.
{/if}

This will open Spotify's login page in your default browser.

How to get your Spotify Developer credentials
  1. Go to developer.spotify.com/dashboard
  2. Log in with your Spotify account
  3. Click "Create app"
  4. Fill in the app details:
    • App name: (any name you want, e.g., "Shark Music Player")
    • App description: (any description)
    • Redirect URI: http://127.0.0.1:8228/callback
    • Check the Web API box
  5. Click "Save"
  6. Click "Settings" on your new app
  7. Copy the Client ID (visible by default)
  8. Click "View client secret" and copy the Client Secret
  9. Paste both values into the fields above

Note: The Client ID and Client Secret are used to authenticate your app with Spotify. Keep the Client Secret private and never share it publicly.

Important: The Redirect URI must be exactly http://127.0.0.1:8228/callback. Port 8228 must be available when authorizing. If you get a port error, close any application using port 8228.

Scopes used: This app requests access to your profile, email, saved library (tracks, albums), playlists (including private and collaborative), and followed artists.

{:else if loading}

Loading favorites...

{:else}
    • {#if syncing}

    Refreshing favorites from Spotify...

    {:else if viewMode === 'playlists'}

    Favorite Playlists

    {#if tracks.length > 0} handleItemClick(-1)} ondblclick={() => handlePlaylistDoubleClick('spotify-likes')} > {/if} {#each playlists as playlist, i} handleItemClick(i)} ondblclick={() => handlePlaylistDoubleClick(playlist.id)} > {/each}
    Playlist Tracks
    Spotify Likes {tracks.length}
    {playlist.name} {playlist.track_count}
    {:else if viewMode === 'tracks'}

    Favorite Tracks

    {#each tracks as track, i} handleItemClick(i)} > {/each}
    Title Artist Album Duration
    {track.name} {track.artist_name} {track.album_name} {formatDuration(track.duration_ms)}
    {:else if viewMode === 'artists'}

    Followed Artists

    {#each artists as artist, i} handleItemClick(i)} > {/each}
    Artist Followers
    {artist.name} {artist.followers.toLocaleString()}
    {:else if viewMode === 'albums'}

    Saved Albums

    {#each albums as album, i} handleItemClick(i)} > {/each}
    Album Artist Year
    {album.name} {album.artist_name} {album.release_date ? new Date(album.release_date).getFullYear() : '—'}
    {:else if viewMode === 'info'}
    {#if error}
    Error
    {error}
    {/if}
    User Information
    Name: {$spotifyAuth.user?.display_name || 'Unknown'}
    Email: {$spotifyAuth.user?.email || 'N/A'}
    Country: {$spotifyAuth.user?.country || 'N/A'}
    Subscription: {$spotifyAuth.user?.product ? $spotifyAuth.user.product.toUpperCase() : 'Unknown'}
    {#if userRefreshMessage}
    {userRefreshMessage}
    {/if}
    Actions
    {/if}
    {/if}