superbird-webappThis repo contains the reconstructed source code for the Spotify Car Thing (Superbird)'s frontend webapp with some extra features:
You can enable or disable each of these features from the Mods menu. For the version without any mods, check the main branch.
The reconstruction has been put together using the sourcemaps found on the device's storage. The webapp itself was written with React, TypeScript, MobX, and Sass.
The reconstruction is not perfect, but it should be pretty close, to the point where you can swap out the original source on the device for the compiled version of this repo and everything acts identically. Notable differences include
@spotify-internal have had to be converted to ES modules so they can be imported while not in node_modules. The source for most of these modules isn't available unfortunately, so most of the code is in JS instead of TS and seems to have been run through something like BabelTo start, you'll need to have a Spotify Car Thing running the latest firmware with ADB enabled. The easiest way to do this is by flashing a new firmware image using the instructions at https://github.com/err4o4/spotify-car-thing-reverse-engineering/issues/22#issue-1432896381. Old versions of the firmware use a Qt webview which won't be compatible.
You'll also need to install Node.js and Yarn if you don't already have them, clone the repo, and run yarn in the root.
To build the app into the dist directory, run yarn build. To replace the webapp on your device, run ./push.sh.
For quickly testing changes and debugging it's convenient to run the app in a browser on your computer. Running yarn dev will start up a dev server which will hot reload when you make changes (no need to refresh the entire page).
In order to run, the webapp needs to be able to communicate with the superbird backend executable over a websocket; forward that port from the device by running adb forward tcp:8890 tcp:8890.
There aren't any fixed methods for this since the codebase wasn't originally designed to be modded, but I'd recommend putting functionality related to mods in the mods directory when possible. You can add a new menu item to the Mods menu in mods/menu.tsx - see the existing items for examples, it should be pretty straightforward. I use the ModsController class (same file) to manage data, but you could probably use something else if you wanted.
Thanks to: