Table of Contents
I built spot-thing to be the spotify mini player experience on desktop that I always wanted. I tried several that are available and none really hit the mark for me. I saw the release of Car Thing and it looked like the perfect UI for a mini player. Debated grabbing one and popping it on my desk but instead, I decided to dive into my first Electron/Node JS application and build it myself. Which only took over a year because of my hobby fixations. IMPORTANT: Full functionality within spot-thing requires a spotify premium account
Want to support me and spot-thing? Buy Me A Coffee
spot-thing is free to use! You can download the latest version here.
After downloading the .exe file, place it somewhere you can access in the future, this is how you'll open spot-thing (or you can make a shortcut). Then follow the steps below. Note - If you used a previous version of spot-thing (pre v1.1) you will need to reenter your clientID and clientSecret upon downloading v1.1 or higher.
To use spot-thing, you need to setup your spotify developer account with a custom app. This will allow spot-thing to read information from your Spotify account such as now playing tracks.
-
Visit the Spotify Developer Dashboard below and login - Spotfy Developer Dashboard
-
After logging in click the Create app button in the top right corner
- In the window that opens, fill in the App Name (spot-thing) and App Description (something you choose). You can place the github URL in the website box if you'd like, but it isn't required. Lastly in the Redirect URI box copy the following URL. Click Save once you're finished.
http://localhost:8888/callback
- The next page is the dashboard for your new app! Click the Settings button in the upper right.
- Here you will find your clientID and clientSecret values. Click view client secret to see both values. You will need to copy and paste these into spot-thing in the next step.
-
Now open spot-thing!
-
You'll be prompted to enter your Client ID and Client Secret, then click Next.
- When you click next, spot-thing will attempt to automatically open an authorization URL for you in another window. This page is where you accept the permissions that spot-thing needs to read and control your playback details.
- After you click AGREE, spot-thing will receive authorization details from spotify and begin attempting to connect.
- You're done! If you have music currently playing on your spotify account you'll see spot-thing snap into action. If you don't have anything playing, you'll see a message from spot-thing to begin playing music on your main spotify app. spot-thing automatically stays connected to your account so you can close/open it as you need and you won't have to enter those details again. If for some reason it prompts you for the ID and Secret, just follow steps 8-11 again.
To get a local copy up and running follow these steps.
- NodeJS - Visit https://nodejs.org/en/download/ to get it installed
- Git - Visit https://git-scm.com/downloads to get it installed
- Spotify Premium Account
To utilize the app you will need to create a Spotify App inside your Spotify Developer Dashboard. Follow the steps above for users.
- Clone the repo
git clone https://github.com/devinbergin/spot-thing.git
- Move into the new directory
cd spot-thing - Install NPM packages
npm install
- Start the App!
npm start
- Enter your spotify app details in the forms. Once complete, begin playing your media from your main spotify controller.
Coming soon.
This project utilizes node-sass and scss files for compiled css. You will find several scss files containing the css code.
- spot-thing.scss
- variables.scss
- fonts.scss
- style.scss
From a bash terminal, cd into he spot-thing folder and run this command
npm run scssThis will recompile the CSS file for you on each save while developing locally.
You can also run a command to build the css if you prefer to use a minified version
npm run build-cssnpm run dist