We match high fidelity user interfaces with custom code structures to out-perform our clients requirements.
Have an idea?
hello@wearecocoon.co.uk
Cocoon Development Logo

YT Music

Client.
Self-initated
Discipline.
Music
Location.
United Kingdom
Deliverables.
Mac Application
View on Github
After YouTube Music launched with their Premium service in the UK we jumped on it. However, the music service was lacking one key feature that competing services from Spotify, Apple, and Tidal all offered: A desktop app.

As Mac users, we desperately wanted an app that was a good citizen on the platform. At the very least it should allow the computer's media keys on a keyboard or TouchBar to skip, pause, or go back to a previous track. On top of this, if it could integrate with other areas like Notification Centre and the Now Playing widget, that would make it feel even more native.

Since its release, the YT Music app has been downloaded tens of thousands of times, has almost 3,000 stars and almost 200 forks on GitHub.
Dashboard view of the YT Music Mac App

There was already an Electron powered app by another solo developer but we're not a massive fan of that technology at Cocoon. It includes the entirety of Chromium in its binary and it is notoriously heavy on RAM and CPU usage which would not be ideal for a small utility app.

Instead, we opted to use for a Safari backed macOS app that instead uses the included WebKit engine which significantly reduces the binary size to around 17MB. In comparison, the Electron project mentioned previously is almost 245MB in size.

Image of the YT Music Search screenView of an Artist screen with their top songs and albums

To tidy up the interface and make it feel native we inject some custom CSS and JS.

The CSS tidies things up like hiding the logo to enable us to add back and forward buttons in its place and the JS observes browser events or passes on actions from native events such as the next or play/pause button being pressed on the keyboard.

The same JS notices whenever a song changes and passes the information back to the application layer. This is parsed and then passed on to the Now Playing centre.

View of the music player with album artwork and song list
Our Work.
Take a look at some of our other projects...