Spotify Overlay banner

Spotify Overlay

7 devlogs
9h 3m 10s

A Spotify overlay that controlls spotify with QBus/mpris so you have this little neat overlay!

This project uses AI

Used Amp code to LEARN and DEBUG stuff i never told it to “make this and that”

Demo Repository

Loading README...

Ghost of Ghost of Lukas

Shipped this project!

Hours: 2.88
Cookies: 🍪 47
Multiplier: 16.37 cookies/hr

I added a really cool search feature remade styles and really good README with really good documentation

Ghost of Ghost of Lukas

Small README changes

I did really small and few changes mainly tweaking and finnishing a few things

I also added new demo liks

Attachment
0
Ghost of Ghost of Lukas

Really good README


I spent sometime working on a really good README as this is like my first project that is like a tool so i want a really good README so yeah i spent some time thinking what really should be added and implement everything really well and i’m really happy it looks so like professional! yayayayayay

And like i don’t deny it i use ai to help with it but mainly feedback and ideas to add it verry little refinements

Attachment
0
Ghost of Ghost of Lukas

Awesome new features, fixes and changes!!


Search feature!

I already kind of did this before with the artist likn and album link because dbus does not give the URI’s for those i would just send it a command like this xdg-open "spotify:search:artemas" as this would search and give me the artist “link” and it works great and because of this i had the idea to make a search feature and with this it would work perfectly and so i did that! The hardest part was making it that it would not move the main window in any way but yeah i found a way to do that! Which was having a transparent space always and it would just hide and show the component which works pretty well its not the best way but the best i could make it work!

And the keybind to open it is ctrl+f so like search it and it works!


Timeline bar thingy

So the actual spotify bar is white and when you hover it gets green and the little ball thingy appears so i styled it like that and tbh it looks way better like this!


Keybinds

I also made it that you can use all the controls with just keybinds! so its:

  • left = previous
  • right = next
  • up = repeat
  • down = shuffle
  • space = play/pause
  • ctrl+f = open search

New icon

I was not happy with the old logo it was just the pause button so I tried a few things but i actually realisesd the repeat logo is perfect! and it looks great!


With these changes its already way better!

Attachment
Attachment
Attachment
Attachment
0
Ghost of Ghost of Lukas

Shipped this project!

Hours: 6.24
Cookies: 🍪 43
Multiplier: 6.96 cookies/hr

I built a spotify overlay controlled buy DBus and it was my first time making a QT app so it was pretty challenging but really cool! I learned lots of things!

Ghost of Ghost of Lukas

Small changes and fixes


So I had a few problems that i had to fix and stuff so here is a list of every change / fix i made!

  • Update system tray icon
  • Fix quit from terminal
  • Wrote a few more things in the README
  • Added a --install command so it install it as a normal app

Attachment
Attachment
0
Ghost of Ghost of Lukas

Fixing small things and a few changes and updates


So i fixed a few things like the album art corner radious was broken and that kind of stuff

here is a list of things that i did

  • Made that if the window is not on focus it toggles out
  • Fixed spacing on the titles
  • Fixed corner radius on album art
  • Made that the control buttons have a smaller clicking space and better hover animation
  • Added a AD album art which is just text saying ad

Publishing to PyPI

I also published this to PyPI packages so you can just pip install spotify-overlay so more people can use this easily one thing tho is that it still does not install it as normal application so you can run it from the app launcher but i’m working on that


system tray icon

because i hide the window icon on the task bar i made a system tray icon so that you can quit it properly


Attachment
Attachment
Attachment
0
Ghost of Ghost of Lukas

New and better styling with small new updates


Customish icons

So i found online these icons someone made that were imitating the Spotify icons but it only had a few and i needed more but with those i could build my own which were easy enough so i made: play/pause, next/previous, shuffle, loop, so with that i could replace the emojis i had then i also started making the whole layout better and now its more intuitive and looks better


Links

I wanted to make that the artist, album, track titles were links to the right place and would open them inside the spotify app and that was pretty easy as DBus already gives the track URI which makes it really easy but it does not give album nor artist so i made a way that it gets the name and searches it in the open.spotify.com url and it forces the spotify app to open them resulting in a like SEARCH and you just have to click on the artist / album


Attachment
Attachment
0
Ghost of Ghost of Lukas

Spotify overlay


Starting the project
So ive had this idea for a while to make a Spotify Overlay because when i play games i like to listen to music, and when i like a song or want to know what’s playing i have to minimize the game which interrupts gameplay. So i started working on this!


Spotify API problems
I was going to use the Spotify API right? NO. The Spotify API is TRASH. Most features i need require premium, and recent updates made almost everything require it, so it wasn’t viable. That’s when i realized something.


Controlling Spotify with DBus
DBus won’t give full control, BUT it’s the best free option. I got this idea from the KDE media controller since it has shuffle, loop, play/pause, and track position. If KDE can use it, my program should too. I researched and YES, it uses DBus.


Making simple DBus level stuff
I used Python since it’s what I know best. I added play/pause, skip/previous, shuffle, and loop. These were easy. I could also get artist, track name, and cover art, so i added that too.


Making simple overlay with UI
Since i use KDE, i went with Qt in Python. QSS is similar to CSS so that helped. Making the layout was hard at first since it was my first Qt app, but i got a simple version working.


Keybindings
I wanted a keybind to toggle the overlay in game. This was a pain because i had do not disturb on, so i couldn’t see error notifications. KDE keybind was failing, but the fix was simple and i just couldn’t see the error.


That’s it for now. I’m still working on styling, icons, and proper overlay behavior since it breaks fullscreen apps.

Attachment
0