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
- https://community.resonate.is/t/discourse-translation/955/2
- https://community.resonate.is/t/translating-resonate-website/232/43
Design (figma)
If you like Figma, you are probably at the right place.
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:
- https://github.com/choojs/nanocomponent
- https://github.com/choojs/nanohtml
- https://github.com/choojs/nanobus
- https://github.com/choojs/nanostate
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: