New player update + intro for volunteer devs

If you’re on twitter you might have seen this thread:

In this post I will focus on the player part.

At the moment, very good work is being made on the user API side of things (including Privacy / Identity: Community Credentials) I won’t cover this in this post.

Introducing our new beta player update

Very Important note:

While the new beta app remains in test phase, we ask you to not share the link outside of the community forums.

New URL

https://beta.stream.resonate.coop/

tl;dr

We’re looking for your feedback!

Key points

  • New landing page and Discovery page
  • Playlisting
  • New search system (searching for releases, profiles and tracks)
  • Browse releases by tag (genre)
  • Browse latest releases (ep, lp, single)
  • Profile pages for listeners (ex: Resonate)
  • Releases are sharable the same way as profiles and tracks (ex: Resonate)
  • Refined UI, much closer to our 2018 design spec.

Discovery page

The discovery page is the main page for logged in listeners. After a successful login or if you are returning to the player you will be be redirected to this page.

Featured artists

At the moment, we are still looking for a both fair and workable way of featuring artists on the player. This means that currently featured artists may comme and go.

Playlisting

Add to playlist button is accessible from the tracks ‘…’ menu.

Clicking on ‘Add to playlist’ opens a dialog with a form to create a new playlist. You can move a track to an existing playlist, similarly you can also remove a track from an existing one.

Below is your new playlist page. You can change the playlist title, add a description or toggle the privacy setting after clicking ‘Edit’. In the short term, we will add the possibility to remove a playlist.

Your playlists are accessible from the library. The design of the playlist page is very similar to album pages.

New search system

Search for profiles (artists, labels, bands), releases and tracks.

Support for key:value search

For example:

  • name:artist name
  • title:title of a release or track
  • country:united kingdom
  • city:london

Coming soon

  • label:Beat Machine Records (to get the list of artists associated with a label in the search results)
  • Better support for Japanese, Chinese, Korean in search and tag search.
  • Hiding inactive profiles from search results

Breaking changes*

Playing tracks directly from the search results is currently not possible anymore. Also, a track will only be found if there is a match on the ‘title’.

Caveats

V/A releases are currently not available in the search results. In the short term, a new section for V/A releases will be shown in the bottom of artists and labels profiles. The profiles will also have discography with proper links for each releases.

Future updates

In the future we’re going to release early updates in beta while a more stable player version will be available at https://stream.resonate.coop/.

Sharing

Please don’t actively share the link to the new beta player on social media yet. You may keep sharing tracks using https://beta.resonate.is/.

Long term support

The older beta player won’t be closed down in the near future and may even keep receiving updates.

Testing

We encourage you to test out this new version and get back to us with your thoughts.

Volunteering

Here’s a few links to give you a better idea on what we’re looking for in different areas.

Content creation/strategy

Landing page copy

Translating

Design (figma)

If you like Figma, you are probably at the right place.

Our new website design

Accessibility

If your thing is a11y, we also really need you!

Mobile UX

Help would be highly appreciated in this area. I focus on making things kinda Mobile First and Responsive but I am a bit too old school to care about the latest trends in this area. I don’t own an iOS device anymore and I am happy with my older Android smartphone. Better testing for the iPad, iPhone and in general, more recent devices would be great.

Development

This is a quick intro for people interested in helping us improve the Resonate player.

Player Frontend

First things first, you should get familiar with the Choo ecosystem. It shouldn’t take too long! Read their #philosophy section, it’s actually good. If you have any question, please drop me a message! I’ll be happy to help.

See: https://github.com/choojs/choo

Core choo modules we use and abuse:

For the tooling we use bankai to do static builds for production and jalla as a development server and prerender service.

Key points why we like to use bankai and jalla:

  • Browserify
  • Static website builds are really good
  • Critical CSS support
  • Clear documentation

Note that for the moment we’re using our own fork of bankai because we needed to turn off a very specific feature.

Generally, we prefer to not have to keep up with trends and have to rewrite/refactor our code all the time. At this stage, Choo should not be changing too much in the future and that’s a good thing. I think we’d rather create our own Choo inspired micro-framework than using React or Vue.

For CSS, we use Postcss with tachyons and a fork of tachyons-custom (variables).

Testing frontend components (e2e) shouldn’t be too painful but it’s very time consuming so I tend to pass. Combining tape with tape-run and puppeteer is how it might get done.

I value code which is readable and follow conventions. For javascript, we use standardjs to ensure good syntax and code style. Also, bundle size should be kept at minimum and attention to accessibility is crucial.

Again, it’s time consuming to keep everything in an healthy state (versioning, changelogs, publishing repos etc…) The published NPM modules are way out of date. I might wait until we get to a more stable state before republishing everything. The original idea is that any developer should be able to use the @resonate components to build their own custom player UI but it’s currently too integrated with our own Resonate player app needs to be really useful. The goal is also to make our API’s more open to allow developers to build on it.

Streaming

Same as bandcamp, we only provide full lengths audio to our listeners. In terms of anti-piracy, it’s not great but the implementation is very straightforward.

Of course, as we grow we will build a proper streaming system which will make things much more secure and with more flexible audio quality for high/low bandwidths.

High quality downloads and offline support is planned.

Monorepo

The beta player repo is a monorepo. This means we currently use Lerna for managing workspaces. With NPM 7 and its workspaces support, it might gets easier.

Docker

Docker is used to run all our apps, even the wordpress. What we don’t have is proper CI/CD. If you’re familiar with Hetzner Cloud or things like Kubernetes, Ansible… please reach to us.

We are on github

Our Github organisation account is at github.com/resonatecoop. Some repos are still private as development is in early stage and documentation is sparse.

Last words

If you’re still reading here, please have a look at this video from @Nick_M which is an introduction to Resonate tech. If this intro moved you, head over here: Intro to Resonate 2021 Dev Plan

https://www.youtube.com/watch?v=Ga3Bd1CFTec&feature=youtu.be

Bonus

If you only recently stumbled upon Resonate, maybe you would find interesting to see how our player evolved.

First 3 major updates have blog posts:

9 Likes

@auggod this is excellent! Thanks.

Can you put a link to this from Basecamp?

E.g a read me at the top of the Player to do lists or something?

Also… V/A releases (assume Various Artists) … need to check on how to serve info from the user and membership API for these… ? Thoughts?

The various artists releases used to work only because of the track uid and track track_album fields. Now, with the trackgroup system it’s so much better because one track can be in many trackgroups. For the user and membership api, I don’t really know, have to think about this with a clear head.

1 Like

I’ll finish this post tomorrow. Recycling things I have wrote.

2 Likes

This is so exciting, congrats!

Looks great. I’m loving how easy it is to plunge into your favourite kind of music by clicking on the tags.

Are the tags on the front page random or a cut down selection? It would be good to see additional tags for rock, reggae, dub, metal. I did see some of those in the drop down in search at the top of the page, and we have plenty of tracks for all of those that come up on search, though less for metal.

Interestingly there’s been a few people talking on twitter hoping Resonate will get more metal artists, so it would be good to highlight the ones we have.

There’s also scope to reach out or shout out to specific genre communities via social media or perhaps volunteers’ contacts, to say bring us more metal or whatever!

1 Like

Post was updated (bumping)

2 Likes

@auggod Cool, so exciting! Q re playlists - are these still work in progress? I can add tracks to playlists when logged in as Kat Five, but on my profile it says I have 0 playlists. Is it made complicated by it being an artist account?

It’s still beta, so yes it’s not a stable release.

If your playlist is public, it should appear on your profile.
But… there’s a new caching system on the API backend side. I should disable it for the user playlists or reduce caching max age to a minimum.

1 Like

You can edit your playlist privacy setting to public if you click on the ‘edit’ button from your playlist page. You can access your private playlists from your library.

2 Likes

Thanks, that’s all working great!

Oh playlists, yeah! Instant fan so far, although I have not explored much yet. If later on I have a more detailed analysis to share, I’ll post it. So far, to reiterate: thanks so much for the playlists!

4 Likes

We have collaboratively chosen 15 releases to appear on the player as ‘featured’. Ideally the featured releases should be updated regularly but it takes a lot of time.

2 Likes

Not sure where the best place to add this is, but for those looking for a “mobile app” for Resonate, it isn’t exactly the same, but I believe you can actually install Resonate from your mobile browser as a web app on your phone. Is that right @auggod?

See screenshot from my Chrome Browser on an Android Phone:

See screenshot of the installed app home screen:

For what it’s worth, I think it does a pretty good job of showcasing Resonate on a mobile device, and I love that it allows me to quickly listen to music on Resonate while on the go!

Just thought I would throw this out there if this is an option for everyone that maybe people just haven’t heard of yet.

Thanks!

2 Likes

Seems like I forgot to mention that. Thank you!

I really recommend to install the PWA for a more distraction free experience.

I plan to add an in app button to install the PWA.

It’s also possible to install the app on desktop using chrome or brave.

Note that if you keep the old pwa (beta.resonate.is) you will have 2 apps with the same icon.

3 Likes

Awesome! That desktop player looks really nice too!

I know that in a previous player update from 2018 (Updates to our beta player - Resonate) it was mentioned that the mobile web app is only stable on Android devices?

Not sure if this is still the case, but as you mention in the original post, any testing and feedback from anyone on this forum with iOS devices would be very helpful.

Thank you!

Depending on the iOS version, playback is still an issue on iOS, especially for older uploads.

Thanks for making these updates Auggod! Genre tagging is super helpful!

Edit: doing some exploring;

  • It would be nice to be able to edit and add to the playlist directly from the tag page. So for example, if I click on #electronic - and hover over an artist, a “…” button would appear and allow me to add to playlist, rather than clicking into a new page.

  • Additionally, a great feature would be to have a shuffle playlist based on Tags. So for example if I click on #punk - at the top of the page there would be a play button that would randomly play all the songs tagged with #punk

  • Further, this is a long term feature, but being able to say “I like this song” and “I don’t like this song”, so the song doesn’t appear in my playlist, or is tagged that I didn’t like the song so I remember not to play it in the future.

  • Another cool feature would be the ability to crowdsource tagging. So for example, if 100 people tagged a track as #acoustic, I would understand that the song was an acoustic song. 1) it would save time from artists/moderators having to tag tracks, and 2) provides a crowdsourced interpretation of a song. I raise this because I was just listening to a song with the tag acoustic but had synth in the background and personally wouldn’t classify this as acoustic and I don’t think many others would either. In order to avoid mis-tagging there could be a filter limit, or just show the top 3 tags, or something to that effect. So if someone was abusing the tagging system the majority of users would win out over the troll.

4 Likes