muzikie / web-player

🎹 Web based music player interface for Muzikie

Muzikie Web Player

The web player of Muzikie decentralized streaming platform

Development

prerequisite

• NVM (Used to set up the required node version)
• Node v16.15.0
• Muzikie Blockchain
• Streamer

Scripts

Run

npm run dev

This starts your app in development mode, which will purge the server require cache when Remix rebuilds assets so you don't need a process manager restarting the express server.

Deployment

First, build your app for production:

npm run build

Then run the app in production mode:

npm start

Now you'll need to pick a host to deploy it to.

Tests

Unit tests are stored next to their corresponding modules. To run tests, you can use

npm test

You may pass a file path to run a single file.

DIY

If you're familiar with deploying express applications you should be right at home just make sure to deploy the output of remix build

• build/
• public/build/

Contributors

https://github.com/Muzikie/web-player/graphs/contributors

License

Copyright 2022 Block Made GmbH

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

web-player's Issues

Eliminate the click delay on buttons and links

There is a 300ms delay by default on buttons and links. This is good for differentiating swipe from click. But since we don’t have any swipe actions, we should remove it to get a more responsive experience.

Add missing unit tests

The following hooks have been implemented without the required unit tests. We should test the logic using react-testing-library.

• useActiveRoute
• useQueryParams

Acceptance criteria

• Unit tests must over 100% of the lines, functions and branches in said modules.

Improve README file

The README file must include

• Prerequisites
• Development scripts and their usages
• Production scripts and their usages
• Configurations files

Inform users to purchase a subscription

If a user doesn't have a valid subscription, they won't be able to stream music/audio.
The web player should inform the user to take the necessary action. meaning, when they click on a song to play, the player bar should display a message with a link to redirect them to the subscriptions page.
Once purchased a subscription, users should be able to play music.

Add missing audio and collection information

The following information are missing in our application:

• Home
  • Recent: Each audio should show
    • Audio name
    • Artists name + coArtists names
    • Album name
    • Audio duration
  • Favorites: Each album should show
    • Album name
    • Artist name
    • Release year
    • Number of audios (12 songs, 12 episodes, Single)

Retrieve and show album details in the create audio form

In the create audio form we have a drop down which displays existing albums of the user. At the moment it only displays the collection IDs.

Ideally, it should display the following information

• Album image in a 30x30px size (optional)
• Album name
• Album release year
• Number of audios added to it

Sign cookies before sending to server

The "@session" cookie is not signed, but session cookies should be signed to prevent tampering on the client before they are sent back to the server. See https://remix.run/api/remix#signing-cookies for more information.

Add Eslint to the Github action

To ensure our syntax conventions are followed, we should run eslsint using Github actions for each PR.

Create useActiveSubscription React hook

As a part of #28, we should create a hook to retrieve the active subscription of the user. A user might own a subscription, which means they are also a member of the subscription.
Additionally, users might only be a member of a subscription which is owned by another user.

This hook should return the following information

• If successful:
  • The subscription details
  • The owner address
  • Other members addresses
    -If failed
• An error object

Success result:

{
  data: {
    price: '1000000000';
    consumable: '800000000';
    streams: '12345';
    members: ['lsk3ay4z7wqjczbo5ogcqxgxx23xyacxmycwxfh4d'];
    maxMembers: 1;
    creatorAddress: 'lsk3ay4z7wqjczbo5ogcqxgxx23xyacxmycwxfh4d';
  };
  error: false;
}

Error result:

{
  message: 'No active subscription',
  error: true,
}

Main menu doesn't work in production mode

Create transactions utilities

The following utility functions are needed to create, sign and broadcast different transactions types:

• Create transaction utils for
  • Create transaction object
  • Sign transaction
  • DryRun and return status
  • Broadcast and return status

Persist user settings locally

We should persist use settings locally to maintain the user experience between different sessions.

To initiate this, users must not need to sign the user agreement every time.

Add hash and meta to Track and Album scheme and types

Following this issues, we should implement required changes to sign and broadcast transactions correctly.

Create all subscriptions tab

As a part of #28, and as a tab in the subscriptions page defined in #32, we should implement a component which is responsible for fetching and displaying the different types of subscriptions available on the platform.
This component uses useSubscriptions to retrieve data.
This component should

• Allow users to purchase a new subscription only if they don't already own an active one.
• Display user's balance and allow the user to only purchase subscriptions whose price + fee is less than the user balance.

The icons are shuffled

The font icons appear to have been shuffled. This happened when we added new icons and unfortunately we did not notice them when reviewing other features.
We should fix it by comparing the existing icon CSS specifications with the actual font on the icomoon web app.

Adapt entity names to match blockchain

Web Player defines the following entities:

• Track
• Album
• Playlist

Said entities are named differently in the blockchain project and to prevent confusion and potential bugs we should rename them so they match. The new names should respectively be:

• Audio
• Collection
• Playlist

As you see the playlist entity remains intact.

Create subscriptions screen

The web player should have a dedicated screen where it displays categories of existing subscription NFTs.
Users who do not have an active subscription should be able to purchase one. In order to purchase a subscription, they should have sufficient balance.

Users should be able to see their active subscription. They might be

• The owner of a subscription (and naturally a member of it)
• A member of a subscription

The owner of a subscription should be able to edit the other members

• A new members (to the maximum capacity of the subscription)
• Remove other members
  They can not remove themselves.

Users should be able to see the remaining balance of the subscription.

Issues:

• #29
• #31
• #32
• #33
• #34
• #68

Create a hook to purchase a subscription

We need a hook that retrieves the list of subscriptionIDs from the dev account. Validates user balance and purchases with a given susbcriptiionID.

Create subscriptions screen

As a part of #28, we should create a screen where the user is able to see two set of data:

• Their own active subscription information. This is the information returned by the useActiveSubscription hook defined in #31.
• Existing subscriptions on the system to purchase.

This ticket should only create the screen (route) and the tabs. Each tab should contain an empty component which will be filled in using the next tickets.
The route for this screen is /subscriptions. Each tab should have its own route:

• Active subscription tab: /subscriptions/active
• All subscriptions tab: /subscriptions/all

The colors of the login page are not visible

We should redirect users to the agreements page after the first login

Implement artist dashboard page

Users should be able to

• View their existing audio and collections
• Edit, transfer or destroy them
• See information about their subscriptions
  • Owner
  • Members
  • Price
  • Remaining value
• Edit the members of the subscription active that they own
• Upload profile picture

Add Why Did You Render library to our packages

To find out why components re-render and avoid unnecessary re-render in our project use this library.

Display success and error message in the purchase subscription screen

1. Users need a positive balance to purchase a subscription. Therefore we should display a summary of their account in the purchase subscription tab of the subscriptions page:
   • Address
   • Balance
2. Once they click on purchase, we should disable the button to prevent further interaction.
3. If an error occurs we should display the error message, and re-enable the purchase button.
4. If the action is successful, we should display a success command, and keep the purchase button disabled.

Read API URLs from environment variables

For ease of use and deployment, we should read project config from the environment variables.

Encrypt and store secret recovery phrase locally

To improve the user experience, we should encrypt store the secret recovery phrase locally. Users should only need to input their password at the beginning of their session.

Hide Profile button in main menu when the user is logged out

The following issues must be resolved regarding the logged out state:

• The profile button in the main menu must be removed
• The subscription button should be removed

Create collection play button

There's a play button in the design which users can use to play the songs of a collection in sequence. The button should display the play/pause status.
At the moment the HTML is implemented but it doesn't work. We should fix this issue

Implement audio streaming logic

Muzikie Web Player should be able to fetch music as partial segments and play it. This should be handled in a manner that we can submit stream transactions after the audio is played for a minimum time threshold.

Load user discography and use to to validate audio creation form

At the moment the data entered in the track/audio creation form is not validated against the user discography data on the client side. Although the transaction is validated by the node, it's preferred to validate the data on the client side as well.
To achieve this, we should create a hook which is responsible for retrieval of user data.
Then we use the above data in the audio create form.

Store credentials in sessions

As temporary solution for the MVP stage, we should store the credentials locally on the session storage.
We can benefit from the session storage of Remix.
This is not a safe solution, and we'll replace this in the future steps.

Improve the loading state of the create audio and create album screens

The following changes can improve the user experience significantly:

• When the form is submitted, the submit button should become disabled
• When the audio is created, and we are waiting for it to be added to blockchain (10 seconds) we should show a loader is blue color.
• When the audio is created successfully, we should clean the form and remove the feedback messages

The logout logic doesn't perform correctly

There seems to be a bug in the logout logic which prevents the logout button to work correctly.
Users should be able to logout at any time using the logout button. Once logged out, they should be redirected tot he login page.

Implement the create audio page

Users should be able to create an Audio NFT by uploading the audio source and inserting the following information

• Title
• CollectionID (By selecting from the list of existing collections)
• Release year
• Genres (multiple select from existing list)
• Co-Artists names
• Owners
  • Each should be the address of an existing user
  • Each should define a share value from 1-100
  • The total of all shares should be 100

Submit stream transactions

Following #5, Muzikie Web Player must be able to submit stream transactions. If the transaction pool is full, and the transaction doesn't go through, it should be able to retry it.
Finally, if it fails to submit the transaction on time, the app should notify the user about the issue.

Connect search page to the API

The search API is ready and can be used now.
Users should be able to search by

• Collection name
• Audio name
• Artist name
  And the search query could be a substring of any of the above.

Implement the discography view

Users should be able to see the list of their collections and the audios added to each collection.

Fix CSS dev mode issue

There's an issue with out Deve mode configuration which prevents our styles get updated when we change a CSS file in out compnents directory. This makes CSS development slower.

We should update the configuration in a way that when the dev script is run, the styles get updated every time developer applies change to them.

Create active subscriptions tab

As a part of #28, and as a tab in the subscriptions page defined in #32, we should implement a component which is responsible for fetching and displaying the information of the user's active subscription.
This component uses useActiveSubscription to retrieve data.

Create a post install script to fix Lisk Client bug

For ease of use we should create a script to run after installing npm dependencies and fix the Lisk Client bug.

Add favicons

We should add favicons matching with the ones used on our website.

Create Github actions

We should create Github actions to

• Ensure dependencies install correctly
• There is not aslant error
• Built is successful
• Tests run successfully

Extract account credentials from secret recovery phrase

We should use Lisk Elements to extract account credentials from secret recovery phrase.
The extracted credentials must be stored in the session storage to be used till the end of the session.

Fix postcss build warning

PostCSS partial import library is deprecated and throws warnings at the build time. We should use an alternative for this lib.
If necessary, we should perform changes in the code base to work with the new library.

Add empty state for discography tab of the profile page

The profile page's default tab is discography. Users don't have any audios or collections at the beginning. Hence the first thing they see is an empty screen. We need an Empty state to display in this situation. The component should look like the same as used for active subscription screen. Though the title should read :

Inform users to log in if they are not

At the moment the player does not start a steam if the user is not logged in, which is the anticipated behaviour. But it should inform the user so that they can log in first.

Create useSubscriptions React hook

As a part of #28, we should create a React hook to retrieve list of existing subscription types.
This hook performs a query, and might need to make adjustments to match the needs of the screens.

Submit stream transaction when a audio is being streamed

When an audio is played, Web Player should submit a stream transaction. Web Player plays the audio for 10 seconds. If user proceeds to another audio, we can ignore the transaction. But after 10 seconds, Web Player broadcasts the transaction.
Streamer expects to find the transaction in the next 3 blocks, and if it can't find it, it will stop the streaming.

Display a user friendly error if the user is not logged in

in the web player when users is not logged in and clicks on a playlist, player display not user friendly type error instead of this
it should display 'you aren't login' alert or error.

Implement the create collection page

Users should be able to create Audio NFTs by adding the following information:

• Collection name
• Collection photo
• Artist name
• Release year