Skip to content

antonio-ramadas/palbum

Repository files navigation

🎵 Palbum

Resume playing Spotify back from where you left

Palbum gives you control to play on Spotify an album/playlist from where you left by showing you a list of the most recently played tracks.

🤷‍♂️ I still did not get it

Consider this: you are in your car and playing a CD. Let's name it Foo. You're in the middle of it, but now you swap CDs. Sometime later you decide to go back to the first CD (Foo), but you want to continue to listen to the CD from the last track you were listening to. Well, now you have a problem because you and your car don't remember your last track. Palbum fixes this by keeping track of the last tracks you heard.


Website

Extended example (±30 seconds)

✨ Features

Dark mode

Multi-platform

Intuitive

Shortcuts

Shortcut (Mac) Shortcut (Windows/Linux) Action
⌘ + M ctrl + M Show/Hide window
⌘ + D ctrl + D Toggle dark mode
Arrow/tab keys or mouse wheel Scroll list
Enter or left click Play
Right click on the icon Quit and other options

👨‍💻 Development

Requirements

Palbum works on macOS, Windows and Linux. You are able to develop on any of these platforms.

Palbum is a JavaScript application, so you need Node.js since v10.15.1.

Tech stack

Palbum is split into two. The backend is built on top of Electron which creates a server on port 1995 for the authentication process. The frontend uses React which creates a server on port 3000 while on development.

There are also a bunch of files on the root of the repository which are explained on one of my other repositories.

The authentication is made with a proxy server and a Spotify authentication module. The server is used to hide app credentials. Given that the code is open source, you can deploy your own server with your own credentials. The module used for authentication is used to make a valid Spotify authentication request which goes through the proxy server so it can add the necessary data (i.e., the credentials).

If you want to deploy your own server, then, in case you use spotify-proxy-oauth2, you need to set the following environment variables after creating a Spotify app:

  • CLIENT_ID

    • The ID of your Spotify app
  • CLIENT_SECRET

    • The secret of your Spotify app
  • REDIRECT_URI

    • The URI which Spotify should redirect the user to after the authentication process. Please be aware you need to add the URI to the list of redirects of your Spotify app.
  • SCOPE

    • For Palbum you need user-read-currently-playing user-read-recently-played user-modify-playback-state

Installation

Navigate to the root of this repository and run npm install on your terminal. You have now all the required node modules and you are able to run any of the npm scripts. After installing, a git hook is created to test for any lint errors before any commit. Given the small size of the project, it should not take more than a couple of seconds.

How does Palbum work?

Palbum is a very simple app that runs on the user toolbar/menubar. It retrieves the most recently played tracks using the spotify-context-history module. Afterwards, every 30 seconds a new request is made through this module to Spotify to check for any new updates. This data is then merged with the existent tracks on Palbum. The play action is also made with this module. The access key is refreshed on the background. If there is any problem while updating the keys, the authentication is restarted. If the authentication does not work, then Palbum quits.

Electron and React use Inter Process Communication to request/retrieve data (e.g., dark mode state and list of tracks) between each other.

Project decisions

  • Given the bulk size of the app, I tried to cut down external packages that add little value and carry several dependencies. So, sometimes you can see code that does the same as other packages. However, if you do not agree with this in any place, please say so because I may have overlooked.

  • Windows icon colour: 5, 107, 184 (R, G, B)

    • The default icon is all black and becomes invisible in the default Windows theme.

❓ F.A.Q.

If I play Spotify on my phone, will they also appear on Palbum?

Yes! The information is retrieved from Spotify and it does not matter where you listen.

I'm listening to Spotify on my phone, can I use Palbum to change tracks?

Yes! Palbum will play what you chose on an active player and it does not matter which one it is.

I am listening/listened to a song and it does not appear on Palbum

There are multiple reasons for this to happen:

Spotify is not playing any of the tracks I choose

Try this: play any track on Spotify where you want to listen and then try again. If it worked, you can stop reading. If it did not, then continue.

Side note: this solution may work because Spotify requires an active player (i.e., you must have an active Spotify session on any of your devices). I suspect this requirement is derived from the complicated nature it can be for Spotify to guess where you want to listen if you are not listening anywhere.

Now answer this: Do you have a premium account? If you do, then you most likely discovered a bug. Report it by opening an issue. If you don't have a premium account, then I am aware of this limitation imposed by Spotify and I'm trying to figure out a solution.

What permissions from Spotify do I need to give?
What information do you or the app holds about me?

None! That is why even the keys used to communicate with the Spotify API are on your side. Palbum itself does not even collect any usage metrics.

I see that you use a proxy on the authentication process.

When you log in through the app, Spotify needs to know what app is asking for your permissions. This process requires a password and I need to protect it from outsiders. So, I have a proxy that just adds this information to your request. The code for the proxy server is open source! This proxy server does not store any information and serves a single purpose while respecting your privacy.

Are there any leftovers after removing the app?

Yes, there most likely will be. Palbum creates a single file to store your access and refresh keys to communicate with the Spotify API. Even after uninstalling the app the file will remain there. Deleting this file is the same as a complete reset. The app will simply start as new. If you do want to remove any leftovers, then remove the folder palbum under this directory:

  • %APPDATA% on Windows

  • $XDG_CONFIG_HOME or ~/.config on Linux

  • ~/Library/Application Support on macOS

Why did you do this?

I listen to Spotify at work and I choose a playlist according to my mood or the mood I want to have. It so happens that each mood has multiple playlists and I kept changing. After some time, I grew tired of having to remember what track I was listening to after switching from one playlist and going back to another. I had found no solutions online and decided to put my skills into practice.

Skip this part if you do not want to know the geeky details.

I already had some experience with Electron, but none with React. Where I work we use React and since I am a junior software engineer that only has been working for a couple of months, I decided to do a small project to have a deeper understanding of React and make better decisions at work. At the time, I knew React did much more than I intended and still believe this, but I wanted to learn more. It is not a choice I regret. Actually, I am happy I did it and how much I have learned until now.

After implementing this project, I noticed there are at least 1099 votes for a native Spotify feature that does what Palbum is doing. At the time I am writing this, this feature has 269 comments and is the 75th most voted request out of 1620! I am happy to see that I am not the only one and that I have made something that is helpful to others until Spotify implements it.

🙌 Acknowledgments

Huge props to my brother for being alpha and beta tester, proof-reader and borrowing me his Spotify account.

Icon made by Freepik from www.flaticon.com

Website and README.md inspired by Caprine