zjaaal/js-player

Player made in Vanilla JS

js-player

Player made in Vanilla JS

js-player's Issues

Search Page

• Add markup for Search Page
• Add debounce functionality to search bar
• Add dynamical rendering for search results

Header

• Add input with magnify icon
• Add container
• Replace style="min-height: 50px" with a class

Create Markup for Left Aside Menu

Center Loader on Search.js and Artist.js

The loader is centering on the top of the page. We need it at the middle of it.

Create templates for rendering dynamically

Create functions that works as templates like:

trackTemplate(track){
 return //... your html here
}

so you can consume it in a reduce as:
tracks.reduce((acc, track) => acc + trackTemplate(track),"");

or as an unique template like:
artistHeader.innerHTML = headerTemplate(artist);

Note: Take that as an example an not as a representation of the final result.

Content

• Fix heights in album art cards for responsive design

Artists

• Create mutable list

Take an example of:

<ul class="list">
    <li class="list-item" data-artistId="1">
        <div class="flex grow">
            <div class="list-item-image">
                <img src="path/to/dua" alt="Profile Dua Lipa" />
            </div>
            <div class="flex grow column">
                <p class="title">Dua Lipa</p>
                <p class="subtitle">"5k followers</p>
            </div>
            <div class="flex center">
                <i class="fa fa-more"></i>
            </div>
        </div>
    </li>
</ul>

Create Axios Client

• Create an instance of Axios
• Create Artist Endpoints
• Create Album Endpoint
• Create Track Endpoint
• Create Search Endpoint
• Test Endpoints

Loader

To-Do

• Display a loader meanwhile is fetching an album
• Do the same while is fetching the track list

Fix the GetDuration function

I'ts not returning the properly value for some tracks.

That function just calculates the minutes but not the seconds.

duration / 60 = the integer of this expression is the minutes. Now multiply the decimals by 60 and you get the seconds.

Assets

• get static assets for (aside) artist profile images
• get static assets for (body) cover arts

Left Aside should be eliminated

Just leave a back button for going back to the home

Artist Page

To-Do

• Artist info page
• Most famous tracks
• Most famous albums
• Other related artists

After that

• Display the artist page and hide the others center containers
• Home button has to hide the artist page

Content

• Add Album Art content
• Add fa icons for Album and Artist label
• Add container class

Create markup to display a single album

• Display Artwork
• Display Tracklist
• Display Album info

API Key exposed

We should revoke that api key and create a secrets.json to store the new API Key.
secrets.json must not be tracked, so we need to include it on .gitignore

Player

• Play the music selected
• Volume controls
• Next/Prev/Replay controls
• Random selection (toggle button)
• Queue list (from album) not visible
• Auto play the next song when a song ends

if the queue list its over, stop all actions