SpotiFive revamped - a new approach to an old concept

As some of you may remember, there was an ancient resource known as “spotifive”, which was a buggy and unfinished mess. I decided to rework it from the ground up into an entirely new system.

note: i will no longer be supporting this resource. dont expect it to work without the backend, as it will be unable to refresh the tokens. read the topic close message for more info if you are interested in carrying on/recreating this system.

Features

  • Only need to pair once - once /spotifive pair has been ran on any server with this resource running, any new server you join will automatically have spotifive already paired
  • Minimal server reliance - servers wont be flooded by api requests from users with it paired. This system uses NUI to perform its HTTP requests for everything except refreshing + generating the access tokens.
  • New & clean spotifiy-like UI:
  • Shows song on vehicle dashboards: image
  • Semi-adaptable system (exports are planned) - Implementing new features is relatively simple
  • Media controls for playing/pausing, skipping and reversing songs.

The backend is currently private, as it is how the tokens are refreshed - i initially planned for this to not need a backend at all, but limitations with spotify meant i couldnt have this and keep cross-server compatability. Its a compromise more than a solution.

Installation:

drop the resource in and run it. no configuration needed. do ensure it is named spotifive however.

please report any issues to me on the forums or my discord, as i expect there to be quite a few.

Commands:

/spotifive pair - Opens a browser tab with the spotify authorization page. Simply accept and it will link
/spotifive unpair - Unlinks your spotify with fivem

/spotifive toggle - hides/shows the spotify UI at the bottom of the screen.
/spotifive move [x] [y] - moves the position of the spotify UI to the x and y position (between 0.0 and 1.0, and will save)
/spotifive opacity [op] - sets the opacity of the ui (can be from 0-255, and will save)
/spotifive move reset - resets the position of the spotify UI to the bottom of the screen.

NOTE

initial pair will not work properly on a localhost server. this is because of how i handle oauth. however after this inital pair request. the regular refreshing + everything else will work fine. i wish i could change this but sadly i see no possible way to.

alongisde this, the resource must be named spotifive so that the backend can locate it to send back the pair data.

18 Likes

Wow, this is amazing! Thanks!! :D!

Works pretty good!

been waiting to see somethin like this pop up again. Hope it works well

1 Like

i hope so too. been working hard on having it work properly. been testing it for a while, ironed out as many issues as i could find, but a project is a project, so i expect some issues may have fallen through the cracks.

Sad I cant use it on my localhost.

if i could change that, i would. the issue only exists for initial pair however

OMG! Really amazing!

Wow. Awesome :+1:

this lets other people listen to the music your playing? I guess it has to right? other wise you could just have spotify playing in the background.

1 Like

white square of dooooom!

don’t see any errors, ill try restarting the server, ( restarted once when adding script)

hm, looks like the image unhid itself without Spotify having anything playing or so. I’ll fix it in the morning

this is simply just UI features for now. syncing music can work, it’d just require a premium account. it’s planned to be implemented, I just wanted to get something to show, maybe get some extra ideas and checking for bugs

ok this the white box is what it looks like when you dont have the spotify app running in the back ground, with that loaded it looks like your screen shot now.

if two people are in the car the passenger does not see the spotify on the car’s radio (they see theirs)
future idea stuff like /spotifiveui togglecar /spotifiveui toggleheadphones /spotifiveui toggleboombox (if people will ever be able to hear eachothers spotify
Ui that lets you control the ingame volume/change songs?
scritps like hypnonema streams everything through the server you can look at that for ideas maybe.
If i think of anything else I’ll let you know this is a great project, thanks for your hard work

how did you changed the possition on top? cause the html didnt helped me

it puts mine in the bottom middle area on the screen. maybe a resolution issue?

im at 1080

me too, try a fresh version restart server? that’s the only thing i know to try

delete cache too

in the uifeatures.js there is a spotiPos object you can edit. I’m aware having it there isn’t very intuitive, I’ll shift it over to some sort of config. the html file only draws the album art and communicates with the API, which is why you couldn’t find anything to customise it

pushed a new update of some lil’ fixes and stuff:

* Moved spotiPos UI Positioning to shared/config.js
+ Add check to ensure the resource is named correctly. should fix 404 errors
* Added check to see if there is album art before unhiding the album image - should fix white box.