ZeroLSTN is a Music Streaming website for ZeroNet. The zite (ZeroNet site) uses the p2p nature of ZeroNet to share files, as well as some of its newest plugins: BigFiles and Merger Sites.
The User Interface
The UI is comprised of MaterializeCSS (clearnet) components. Materialize is a CSS framework for creating responsive websites that follow Google's Material Design philosophy. In the overall structure of the site, the framework used for the visuals is not too important, and it's perfectly fine to use more than one as long as the styles do not clash. I just chose it for its appealing design (and also by recommendation of @Krixano :)
The Play Queue, synced across multiple pages on ZeroLSTN.
Both of those are the same exact code, with their sizes controlled by some surrounding HTML tags laced with some MaterializeCSS grid classes (clearnet). This is nice, as adding something to the Play Queue such as a button adds that button to all instances on all pages.
Additionally, Vue.js handles passing data between the different components seamlessly, and allows you to call functions on one component from another.
How Songs are Stored
Songs are not stored on ZeroLSTN. Rather, they are stored on various Merger Zites. Merger Zites are separate zites which only purpose are to store and allow the retrieval of data. ZeroLSTN presents connected Merger Zites as the different 'Genres'.
These Genres are separate zites which are listed in the sidebar on ZeroHello under the merged type 'ZeroLSTN':
Genres are simply Merger Zites with names of their respective genres.
These are where songs are stored, as Optional files, meaning adding the genre on ZeroLSTN (or navigating to the genre site directly yourself) will allow you to view information about songs, without actually downloading the full song files. That's how songs appear in ZeroLSTN when you add a Genre, but don't actually download until you hit play.
But how do we know about the Genres? Are they hardcoded into ZeroLSTN? Well, yes and no...
The Genre Index
In the above screenshot you'll notice there's another Merger zite listed amongst the Genres: The "Genre Index". This is a separate Merger zite, who's sole purpose is to store a list of known Genres. When users create a new Genre through ZeroLSTN, they clone the "Default Genre", which has everything a zite needs to be a Genre.
What a genre looks like when the user clones the default.
Once the genre is cloned and named appropriately, they'll click the Head Back button to be taken back to ZeroLSTN to add their new Genre to the Genre Index, where all users will be able to see it.
This methods was inspired by Git Center, but takes a different approach in that:
- The Merger Zite/Genre is named from itself, rather than the callback zite (which is how it's done in Git Center).
- The Merger Zite doesn't auto-redirect when visiting it, and allows you to specify on which URL it'll return to to install the new Genre.
The first item could just be done from ZeroLSTN as you can rename zites you own from other zites. The Default Genre was set up before it was clear you could do that, but one benefit is that the returning zite does not have to implement naming the Genre, since it does it itself.
The second point is more important. Because we allow setting the return zite manually, people who create other music front-ends using the ZeroLSTN Merger database can have their users create genres before returning to their own zite to insert into the shared Genre Index. At no point do users specifically have to come to ZeroLSTN to insert into the shared database. Other zites can also clone and modify the Default Genre zite so that it doesn't point to ZeroLSTN by default.
ZeroLSTN also features 'Recommended' and 'Communiy' sections in its Genre listings. This was implemented as it became clear that in the future there will be many Genres, some not working and others with broken names. To combat this and provide a little organization, the Recommended Genres section was added to give new users some direction on which Genres to add when they first join. This is implemented as a simple JSON file with addresses and Genre names, which is customizable per zite. You can see ZeroLSTN's here.
Songs and BigFiles
If you aren't aware of on ZeroNet's BigFiles plugin yet, it's one of the most important plugins that has ever been added. It powers zites like KopyKate BIG and ZeroLSTN by allowing users to upload large files, some many gigabytes, while allowing the download of that file to come from many different peers instead of just one.
The problem with downloading from just one peer is speed and reliability. If that one person doesn't have a good upload connection, you may be spending hours downloading a movie, and if they lose connection any time during the download, the process may terminate entirely. BigFiles solves this problem by downloading 1MB pieces of the file from many different peers, so that their upload speeds effectively add up, and if one loses connection, the rest of the peers can take over. Before BigFiles, storing large videos or FLAC files was simply not practical.
So, that's about a general summary of what powers ZeroLSTN and how it works under the hood. Feel free to check out the source code on Git Center, where I did my best to provide helpful comments to every code block.