public/js/music_playlist.js
/**
 * Show songs.
 * 
 * @param {number} playlistIndex The index of the selected playlist in the playlists json object.
 */
Show songs.

@param {number} playlistIndex The index of the selected playlist in the playlists json object.
Show songs . @param { number } playlistIndex The index of the selected playlist in the playlists json object .
function showSongs(playlistIndex) {
    stopVideoUpdate(); 
    var songContainer = document.getElementById("song_container");
    songs = playlists[playlistIndex]['songs'];
    songContainer.innerHTML = '';
    var song_tiles = '<div class="card-deck" style="margin-right:0; margin-left:0;">';
    for (var song_nr = 0; song_nr < songs.length; song_nr++) {
        var song = songs[song_nr];
        var tile = 
            '<div id="songTile'+ song_nr.toString() + '" class="card text-center songTile">' +
                '<img class="card-img-top" src="' + song['spotify_album_cover'] + '"/>' +
                '<div class="card-body">' +
                    '<h6 class="card-title"><strong>' + song['title'] + '</strong></h6>' +
                    '<p class="card-text card_p">' +
                        '<p>' + 
                        ' <a class="spotify" href="https://open.spotify.com/track/' + song['spotify_code'] + '" target="_blank"><i class="fab fa-spotify"></i></a>' + 
                        ' <a class="youtube" href="https://www.youtube.com/watch?v=' + song['youtube_code'] + '" target="_blank"><i class="fab fa-youtube"></i></a>' +  
                        ' <a class="lyrics" href="javascript:void(0)" onclick="showSongLyricsByArtistTitle(\'' + song['artist'].replace("'", "") + '\', \'' + song['title'].replace("'", "") + '\');" ><i class="fa fa-align-justify"></i></a>' +  
                        '</p>' +
                        '<strong>Artist</strong>' + 
                        '<br/>' + song['artist'] + '<br/>' +
                        '<strong>Album</strong>' + 
                        '<br/>' + song['album'] + '<br/>' +
                        '<strong>Release date</strong>' +
                        '<br/>' + prepareDate(song['year'], song['month_name'], song['day'], ) + '<br/>' +
                    '</p>' +
                    '<span>' + 
                        '<button type="button" class="btn btn-default btn-sm" onclick="fastBackward(' + song_nr.toString() + ')"><i class="fas fa-fast-backward"></i></button>' +
                        '<button id="playbackButton'+ song_nr.toString() + '" type="button" class="btn btn-default btn-sm" onclick="loadVideo(' + song_nr.toString() + ')"><i class="fa fa-play"></i></button>' +
                        '<button type="button" class="btn btn-default btn-sm" onclick="fastForward(' + song_nr.toString() + ')"><i class="fas fa-fast-forward"></i></button>' +
                    '</span>' +
                    '<p id="songTime'+ song_nr.toString() + '">00:00 / 00:00</p>' +
                    '<button type="button" class="btn btn-danger btn-sm" onclick="deleteSong(' + song['id'].toString() + ')"><i class="fa fa-trash"></i></button>' +
                '</div>' +
            '</div>';
        song_tiles += tile;
    }
    song_tiles += '</div>';
    songContainer.innerHTML = song_tiles;
}
function showSongs ( playlistIndex ) { stopVideoUpdate ( ) ; var songContainer = document . getElementById ( "song_container" ) ; songs = playlists [ playlistIndex ] [ 'songs' ] ; songContainer . innerHTML = '' ; var song_tiles = '<div class="card-deck" style="margin-right:0; margin-left:0;">' ; for ( var song_nr = 0 ; song_nr < songs . length ; song_nr ++ ) { var song = songs [ song_nr ] ; var tile = '<div id="songTile' + song_nr . toString ( ) + '" class="card text-center songTile">' + '<img class="card-img-top" src="' + song [ 'spotify_album_cover' ] + '"/>' + '<div class="card-body">' + '<h6 class="card-title"><strong>' + song [ 'title' ] + '</strong></h6>' + '<p class="card-text card_p">' + '<p>' + ' <a class="spotify" href="https://open.spotify.com/track/' + song [ 'spotify_code' ] + '" target="_blank"><i class="fab fa-spotify"></i></a>' + ' <a class="youtube" href="https://www.youtube.com/watch?v=' + song [ 'youtube_code' ] + '" target="_blank"><i class="fab fa-youtube"></i></a>' + ' <a class="lyrics" href="javascript:void(0)" onclick="showSongLyricsByArtistTitle(\'' + song [ 'artist' ] . replace ( "'" , "" ) + '\', \'' + song [ 'title' ] . replace ( "'" , "" ) + '\');" ><i class="fa fa-align-justify"></i></a>' + '</p>' + '<strong>Artist</strong>' + '<br/>' + song [ 'artist' ] + '<br/>' + '<strong>Album</strong>' + '<br/>' + song [ 'album' ] + '<br/>' + '<strong>Release date</strong>' + '<br/>' + prepareDate ( song [ 'year' ] , song [ 'month_name' ] , song [ 'day' ] , ) + '<br/>' + '</p>' + '<span>' + '<button type="button" class="btn btn-default btn-sm" onclick="fastBackward(' + song_nr . toString ( ) + ')"><i class="fas fa-fast-backward"></i></button>' + '<button id="playbackButton' + song_nr . toString ( ) + '" type="button" class="btn btn-default btn-sm" onclick="loadVideo(' + song_nr . toString ( ) + ')"><i class="fa fa-play"></i></button>' + '<button type="button" class="btn btn-default btn-sm" onclick="fastForward(' + song_nr . toString ( ) + ')"><i class="fas fa-fast-forward"></i></button>' + '</span>' + '<p id="songTime' + song_nr . toString ( ) + '">00:00 / 00:00</p>' + '<button type="button" class="btn btn-danger btn-sm" onclick="deleteSong(' + song [ 'id' ] . toString ( ) + ')"><i class="fa fa-trash"></i></button>' + '</div>' + '</div>' ; song_tiles += tile ; } song_tiles += '</div>' ; songContainer . innerHTML = song_tiles ; }
Show songs.
Show songs .
// Stop current playing video // song_nr is the index in the songs json variable // ' <a class="spotify" href="https://open.spotify.com/artist/' + song['spotify_artist_code'] + '" target="_blank"><i class="fab fa-spotify"></i></a>' +  // ' <a class="spotify" href="https://open.spotify.com/album/' + song['spotify_album_code'] + '" target="_blank"><i class="fab fa-spotify"></i></a>' + 