diff --git a/webapp/assets/js/mstream.js b/webapp/assets/js/mstream.js index 6ae092d..302b7e1 100644 --- a/webapp/assets/js/mstream.js +++ b/webapp/assets/js/mstream.js @@ -34,7 +34,10 @@ function createFileplaylistHtml(dataDirectory) { } function createMusicfileHtml(fileLocation, title, titleClass) { - return '
' + title + '
'; + return `
+ + ${title} +
`; } $(document).ready(function () { @@ -503,7 +506,6 @@ $(document).ready(function () { }); } - // function that will receive JSON array of a directory listing. It will then make a list of the directory and tack on classes for functionality function printdir(response, previousState) { currentBrowsingList = []; @@ -513,21 +515,7 @@ $(document).ready(function () { if (response.directories) { for (const dir of response.directories) { currentBrowsingList.push({ type: 'directory', name: dir.name }) - filelist += - `
-
- - ${dir.name} -
-
- - - - - - -
-
`; + filelist += renderDirHtml(dir.name); } } @@ -557,6 +545,23 @@ $(document).ready(function () { } } + function renderDirHtml(name) { + return `
+
+ + ${name} +
+
+ + + + + + +
+
` + } + // when you click 'add directory', add entire directory to the playlist $("#addall").on('click', function () { //make an array of all the mp3 files in the current directory @@ -586,7 +591,7 @@ $(document).ready(function () { if (lowerCase.indexOf(searchVal.toLowerCase()) !== -1) { if (this.type === 'directory') { - filelist.push('
' + this.name + '
'); + filelist.push(renderDirHtml(this.name)); } else if (this.type === 'playlist') { filelist.push('
' + escapeHtml(this.name) + '
Delete
'); } else if (this.type === 'album') { @@ -594,21 +599,15 @@ $(document).ready(function () { var albumString = this.name ? this.name : 'SINGLES'; if (this.album_art_file) { - filelist.push('
' + albumString + '
'); + filelist.push('
' + albumString + '
'); } else { - filelist.push('
' + albumString + '
'); + filelist.push('
' + albumString + '
'); } } else if (this.type === 'artist') { filelist.push('
' + this.name + '
'); } else { if (programState[programState.length - 1].state === 'playlist') { - if (!this.metadata || !this.metadata.title) { - filelist.push('
' + this.filepath + '
'); - } else if (this.metadata['album-art']) { - filelist.push('
' + this.metadata.artist + ' - ' + this.metadata.title + '
'); - } else { - filelist.push('
' + this.metadata.artist + ' - ' + this.metadata.title + '
'); - } + filelist.push(renderFileWithMetadataHtml(this.filepath, this.lokiId, this.metadata)); } else if (this.type == "m3u") { filelist.push(createFileplaylistHtml(this.name)); } else { @@ -885,11 +884,17 @@ $(document).ready(function () { }); $("#filelist").on('click', '.removePlaylistSong', function () { - var lokiId = $(this).data('lokiid'); + const lokiId = $(this).data('lokiid'); MSTREAMAPI.removePlaylistSong(lokiId, function (response, error) { if (error !== false) { return boilerplateFailure(response, error); } + + // remove from currentBrowsingList + currentBrowsingList = currentBrowsingList.filter(item =>{ + return item.lokiId !== lokiId + }); + $('div[data-lokiid="' + lokiId + '"]').remove(); }); }); @@ -911,7 +916,7 @@ $(document).ready(function () { $('#search_folders').val(''); - MSTREAMAPI.loadPlaylist(playlistname, function (response, error) { + MSTREAMAPI.loadPlaylist(playlistname, (response, error) => { if (error !== false) { $('#filelist').html('
Server call failed
'); return boilerplateFailure(response, error); @@ -920,19 +925,17 @@ $(document).ready(function () { // Add the playlist name to the modal $('#playlist_name').val(name); - //parse through the json array and make an array of corresponding divs - var files = []; - $.each(response, function (index, value) { - if (!value.metadata || !value.metadata.title) { - currentBrowsingList.push({ type: 'file', name: value.filepath, metadata: value.metadata }); - files.push('
' + value.filepath + '
remove
'); - } else if (value.metadata['album-art']) { - currentBrowsingList.push({ type: 'file', name: value.metadata.artist + ' - ' + value.metadata.title, metadata: value.metadata }); - files.push('
' + value.metadata.artist + ' - ' + value.metadata.title + '
remove
'); - } else { - currentBrowsingList.push({ type: 'file', name: value.metadata.artist + ' - ' + value.metadata.title, metadata: value.metadata }); - files.push('
' + value.metadata.artist + ' - ' + value.metadata.title + '
remove
'); - } + const files = []; + response.forEach(value => { + currentBrowsingList.push({ + type: 'file', + name: (!value.metadata || !value.metadata.title) ? value.filepath : `${value.metadata.artist} - ${value.metadata.title}`, + metadata: value.metadata, + filepath: value.filepath, + lokiId: value.lokiId + }); + + files.push(renderFileWithMetadataHtml(value.filepath, value.lokiId, value.metadata)); }); $('#filelist').html(files); @@ -941,6 +944,19 @@ $(document).ready(function () { }); }); + function renderFileWithMetadataHtml(filepath, lokiId, metadata) { + console.log(filepath) + return `
+
+ + ${(!metadata || !metadata.title) ? filepath : `${metadata.artist} - ${metadata.title}`} +
+
+ remove +
+
`; + } + /////////////// Download Playlist $('#downloadPlaylist').click(function () { // Loop through array and add each file to the playlist @@ -1023,7 +1039,7 @@ $(document).ready(function () { state: 'recentlyAdded' }]; - MSTREAMAPI.getRecentlyAdded($('#recently-added-limit').val(), function (response, error) { + MSTREAMAPI.getRecentlyAdded($('#recently-added-limit').val(), (response, error) => { if (error !== false) { $('#filelist').html('
Server call failed
'); return boilerplateFailure(response, error); @@ -1031,16 +1047,16 @@ $(document).ready(function () { //parse through the json array and make an array of corresponding divs const filelist = []; - $.each(response, function () { - if (this.metadata.title) { - currentBrowsingList.push({ type: 'file', name: this.metadata.artist + ' - ' + this.metadata.title }) - filelist.push('
' + this.metadata.artist + ' - ' + this.metadata.title + '
'); - } else { - const filepathArray = this.filepath.split("/"); - const filename = filepathArray[filepathArray.length - 1]; - currentBrowsingList.push({ type: 'file', name: filename }) - filelist.push('
' + filename + '
'); - } + response.forEach(el => { + currentBrowsingList.push({ + type: 'file', + name: el.metadata.title ? el.metadata.artist + ' - ' + el.metadata.title : el.filepath.split("/").pop() + }); + + filelist.push(`
+ + ${el.metadata.title ? `${el.metadata.artist} - ${el.metadata.title}`: el.filepath.split("/").pop()} +
`); }); $('#filelist').html(filelist); @@ -1064,23 +1080,25 @@ $(document).ready(function () { state: 'allAlbums' }]; - MSTREAMAPI.albums(function (response, error) { + MSTREAMAPI.albums((response, error) => { if (error !== false) { $('#filelist').html('
Server call failed
'); return boilerplateFailure(response, error); } //parse through the json array and make an array of corresponding divs - var albums = []; - $.each(response.albums, function (index, value) { - if (value.album_art_file) { - currentBrowsingList.push({ type: 'album', name: value.name, 'album_art_file': value.album_art_file }); + const albums = []; + response.albums.forEach(value => { + currentBrowsingList.push({ + type: 'album', + name: value.name, + 'album_art_file': value.album_art_file + }); - albums.push('
' + value.name + '
'); - } else { - currentBrowsingList.push({ type: 'album', name: value.name }); - albums.push('
' + value.name + '
'); - } + albums.push(`
+ + ${value.name} +
`); }); $('#filelist').html(albums); @@ -1120,22 +1138,20 @@ $(document).ready(function () { $('#search_folders').val(''); - MSTREAMAPI.albumSongs(album, artist, function (response, error) { + MSTREAMAPI.albumSongs(album, artist, (response, error) => { if (error !== false) { $('#filelist').html('
Server call failed
'); return boilerplateFailure(response, error); } //parse through the json array and make an array of corresponding divs - var filelist = []; - $.each(response, function () { - if (this.metadata.title) { - currentBrowsingList.push({ type: 'file', name: this.metadata.title }) - filelist.push('
' + this.metadata.title + '
'); - } else { - currentBrowsingList.push({ type: 'file', name: this.metadata.filename }) - filelist.push('
' + this.metadata.filename + '
'); - } + const filelist = []; + response.forEach(song => { + currentBrowsingList.push({ type: 'file', name: song.metadata.title ? song.metadata.title : song.metadata.filename }); + filelist.push(`
+ + ${song.metadata.title ? song.metadata.title : song.metadata.filename} +
`); }); $('#filelist').html(filelist); @@ -1201,20 +1217,22 @@ $(document).ready(function () { $('#search_folders').val(''); currentBrowsingList = []; - MSTREAMAPI.artistAlbums(artist, function (response, error) { + MSTREAMAPI.artistAlbums(artist, (response, error) => { if (error !== false) { $('#filelist').html('
Server call failed
'); return boilerplateFailure(response, error); } - var albums = []; - $.each(response.albums, function (index, value) { - var albumString = value.name ? value.name : 'SINGLES'; - if (value.album_art_file) { - albums.push('
' + albumString + '
'); - } else { - albums.push('
' + albumString + '
'); - } + const albums = []; + response.albums.forEach(value => { + const albumString = value.name ? value.name : 'SINGLES'; + albums.push(`
+ + ${albumString} +
`); + currentBrowsingList.push({ type: 'album', name: value.name, artist: artist, album_art_file: value.album_art_file }) }); @@ -1256,23 +1274,25 @@ $(document).ready(function () { } //parse through the json array and make an array of corresponding divs - var files = []; - $.each(response, function (index, value) { - var rating = (value.metadata.rating / 2); + const files = []; + response.forEach(value => { + let rating = (value.metadata.rating / 2); if (!Number.isInteger(rating)) { rating = rating.toFixed(1); } - if (!value.metadata || !value.metadata.title) { - currentBrowsingList.push({ type: 'file', name: value.filepath, metadata: value.metadata }); - files.push('
[' + rating + '] ' + value.filepath + ']
'); - } else if (value.metadata['album-art']) { - currentBrowsingList.push({ type: 'file', name: value.metadata.artist + ' - ' + value.metadata.title, metadata: value.metadata }); - files.push('
[' + rating + '] ' + value.metadata.artist + ' - ' + value.metadata.title + '
'); - } else { - currentBrowsingList.push({ type: 'file', name: value.metadata.artist + ' - ' + value.metadata.title, metadata: value.metadata }); - files.push('
[' + rating + '] ' + value.metadata.artist + ' - ' + value.metadata.title + '
'); - } + currentBrowsingList.push({ + type: 'file', + name: value.metadata.artist ? value.metadata.artist + ' - ' + value.metadata.title : value.filepath, + metadata: value.metadata + }); + + files.push(`
+ + [${rating}] ${value.metadata.artist ? `${value.metadata.artist} - ${value.metadata.title}` : value.filepath} +
`); }); $('#filelist').html(files); @@ -1525,7 +1545,7 @@ $(document).ready(function () {

Jukebox Mode allows you to control this page remotely



\ \

\ - '; + '; } // Add the content