Add styling to the mp3 player

[newbreedofgeek]

''' songs": [ { "name": "First Snow", "artist": "Emancipator", "album": "Soon It Will Be Cold Enough", "url": "https://521dimensions.com/song/FirstSnow-Emancipator.mp3", "cover_art_url": "https://521dimensions.com/img/open-source/amplitudejs/album-art/soon-it-will-be-cold-enough.jpg" }, { "name": "Intro / Sweet Glory", "artist": "Jimkata", "album": "Die Digital", "url": "https://521dimensions.com/song/IntroSweetGlory-Jimkata.mp3", "cover_art_url": "https://521dim/ '''

[newbreedofgeek]

• browser tests: chrome, safari, brave, firefox, edge
• adaptive: mobile, tablet, desktop

Blocked by: New Data Format for Mp3 playlists

[911-Benedek-RobertGeorge]

NFT data in wallet are not well alligned because of the title dimension. Would you like me to fix this ?

[newbreedofgeek]

NFT data in wallet are not well alligned because of the title dimension. Would you like me to fix this ?

Yes, feel free to fix any small issues like this as part of your tickets

[newbreedofgeek]

@911-Benedek-RobertGeorge

Here is the file format that will be supported by the Data Marshal next week.

{
  "data_stream": {
    "name": "tokentunes:musiverse:musicx",
    "creator": "Manu",
    "created_on": "2023-05-22T05:37:17Z",
    "last_modified_on": "2023-06-10T14:00:19Z",
    "marshalManifest": {
      "totalItems": 3,
      "nestedStream": true
    }
  },
  "data": [
    {
      "idx": 1,
      "date": "2023-01-02T00:00:00Z",
      "category": "Beats",
      "artist": "Emancipator",
      "album": "Soon It Will Be Cold Enough",
      "title": "Beats are best",
      "file": "https://itheum-static.s3.ap-southeast-2.amazonaws.com/hosteddataassets/musicblazer/manu-song-1.mp3",
      "cover_art_url": "https://521dimensions.com/img/open-source/amplitudejs/album-art/soon-it-will-be-cold-enough.jpg"
    },
    {
      "idx": 2,
      "date": "2023-01-09T00:00:00Z",
      "category": "Funk",
      "artist": "Emancipator",
      "album": "Soon It Will Be Cold Enough",
      "title": "Funk is best",
      "file": "https://itheum-static.s3.ap-southeast-2.amazonaws.com/hosteddataassets/musicblazer/manu-song-2.mp3",
      "cover_art_url": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0hBNmQVoxqDWLdEKSZPnmbanHXKFMjzDrYA&usqp=CAU"
    },
    {
      "idx": 3,
      "date": "2023-01-16T00:00:00Z",
      "category": "Rock",
      "artist": "Emancipator",
      "album": "Soon It Will Be Cold Enough",
      "title": "Rock is best",
      "file": "https://itheum-static.s3.ap-southeast-2.amazonaws.com/hosteddataassets/musicblazer/manu-song-3.mp3",
      "cover_art_url": "https://coverartworks.com/wp-content/uploads/2021/05/yeter-750px.jpg"
    }
  ]
}

Some requirements for the the music player:

1. The music player is actually a "custom app" on the app marketplace, we dont show it if a user "open a data nft" in their wallet on Explorer. So to get the music player experience then will have to open the custom app. On the Wallet view, when someone open this file it just shows as a JSON file.
2. New App. For now call it "MusicX". Use this as the app template : https://github.com/Itheum/explorer-dapp/tree/main/src/pages/AppMarketplace/MultiversxInfographics

Create a new folder in the AppMarketplace called "MusicX" and put you copy in there and modify. Make the new app available in the dashboard and menus.

3. When the Data NFT opens, the file format will be as above.

[newbreedofgeek]

Merge Kent's latest 1.5 branch with has native auth.. and then u can see all the native auth code.

[damienen]

Issue regarding this are put as separate issues so closing