Updated Downloads tab
authorRemixDev <deezloaderremix@gmail.com>
Wed, 16 Oct 2019 18:50:55 +0000 (20:50 +0200)
committerRemixDev <deezloaderremix@gmail.com>
Wed, 16 Oct 2019 18:50:55 +0000 (20:50 +0200)
app/app.js
app/public/css/darkMode.css
app/public/css/style.css
app/public/js/frontend.js
app/views/index.ejs

index c273abb56b9e5cd794fa4dab7aee7401c43141fa..af5f2b6b58e31418eb33c0a63bb40e238a09b418 100644 (file)
@@ -531,6 +531,7 @@ io.sockets.on('connection', function (s) {
                                type: 'track',
                                settings: data.settings || {},
                                obj: track,
+                               cover: `${s.Deezer.albumPicturesHost}${track.album.picture}/250x250-000000-80-0-0.jpg`,
                        }
                        addToQueue(_track)
                }catch(err){
@@ -579,6 +580,7 @@ io.sockets.on('connection', function (s) {
                                        type: 'track',
                                        settings: data.settings || {},
                                        obj: track,
+                                       cover: `${s.Deezer.albumPicturesHost}${track.album.picture}/250x250-000000-80-0-0.jpg`,
                                }
                                addToQueue(_track)
                        }else{
@@ -597,6 +599,7 @@ io.sockets.on('connection', function (s) {
                                        type: 'album',
                                        settings: data.settings || {},
                                        obj: album,
+                                       cover: album.cover_medium,
                                }
                                addToQueue(_album)
                        }
@@ -673,6 +676,7 @@ io.sockets.on('connection', function (s) {
                                type: "playlist",
                                settings: data.settings || {},
                                obj: playlist,
+                               cover: playlist.picture_medium,
                        }
                        addToQueue(_playlist)
                }catch(err){
@@ -715,6 +719,7 @@ io.sockets.on('connection', function (s) {
                                type: "playlist",
                                settings: data.settings || {},
                                obj: artist,
+                               cover: artist.picture_medium,
                        }
                        addToQueue(_playlist)
                }catch(err){
@@ -759,7 +764,8 @@ io.sockets.on('connection', function (s) {
                                        id: `${resp.body.id}:${data.bitrate}`,
                                        bitrate: data.bitrate+"",
                                        type: "spotifyplaylist",
-                                       obj: resp.body
+                                       obj: resp.body,
+                                       cover: resp.body.images[0].url,
                                }
                                var numPages=Math.floor((_playlist.size-1)/100)
                                var trackList = new Array(_playlist.size)
@@ -1026,6 +1032,7 @@ io.sockets.on('connection', function (s) {
                                                id: downloading.id,
                                                type: downloading.type,
                                                errorLog: downloading.errorLog,
+                                               cover: downloading.cover,
                                        })
                                        io.sockets.emit("downloadProgress", {
                                                queueId: downloading.queueId,
@@ -1098,7 +1105,8 @@ io.sockets.on('connection', function (s) {
                                                                id: downloading.id,
                                                                type: downloading.type,
                                                                errorLog: downloading.errorLog,
-                                                               tracksData: downloading.tracksData
+                                                               tracksData: downloading.tracksData,
+                                                               cover: downloading.cover
                                                        })
                                                        if (downloading.downloaded + downloading.failed >= downloading.size) resolve()
                                                        cb()
@@ -1187,7 +1195,8 @@ io.sockets.on('connection', function (s) {
                                                                id: downloading.id,
                                                                type: downloading.type,
                                                                errorLog: downloading.errorLog,
-                                                               tracksData: downloading.tracksData
+                                                               tracksData: downloading.tracksData,
+                                                               cover: downloading.cover
                                                        })
                                                        if (downloading.downloaded + downloading.failed >= downloading.size) resolve()
                                                        cb()
@@ -1322,7 +1331,8 @@ io.sockets.on('connection', function (s) {
                                                                id: downloading.id,
                                                                type: downloading.type,
                                                                errorLog: downloading.errorLog,
-                                                               tracksData: downloading.tracksData
+                                                               tracksData: downloading.tracksData,
+                                                               cover: downloading.cover
                                                        })
                                                        if (downloading.downloaded + downloading.failed >= downloading.size) resolve()
                                                        cb()
index da295851f5ab959838101e0b835e147cb4e647e7..12405c321f75730461f1e5cfec35134230cbe693 100644 (file)
@@ -78,9 +78,3 @@ body::-webkit-scrollbar-thumb {
 table.highlight>tbody>tr:hover{
   background-color: #212121;
 }
-
-.trprog {
-  background-size: 0% 100%;
-  background-image: linear-gradient(rgba(0, 45, 150, 0.5), rgba(0, 45, 150, 0.5));
-  background-repeat: no-repeat;
-}
index d99ba047cdfa25878da3ec54a605a95aad71f39b..9e1966743595b31d9c5f3867a898889ccae4857f 100644 (file)
@@ -472,8 +472,30 @@ input[type=search]::-webkit-search-cancel-button {
        cursor: pointer;
 }
 
-.trprog {
-  background-size: 0% 100%;
-  background-image: linear-gradient(rgba(170, 200, 255, 0.5), rgba(170, 200, 255, 0.5));
-  background-repeat: no-repeat;
+.downloadInfo{
+       border-bottom: 0px;
+}
+.downloadInfo td{
+       padding-bottom: 2px;
+}
+
+.downloadInfo2 td{
+       padding-top: 2px;
+       padding-bottom: 4px;
+}
+
+.downloadBar td{
+       display: table-cell;
+       height: 16px !important;
+       padding: 0px;
+       width: 100%;
+}
+.downloadInfo-cover{
+       width: 75px;
+}
+.downloadInfo-meta{
+       width: 80%;
+}
+.downloadInfo-info{
+       width: 20%;
 }
index 5347c10a8c554ddbd7a1514afbc18208c901b783..38dfa9777d66d7441c21c6b2a7982d1c23e2f2b8 100644 (file)
@@ -1328,11 +1328,21 @@ function addObjToQueue(data){
        var url_id = ('urlId' in data) ? data.urlId : ''
 
        $(tableBody).append(
-                       `<tr class="trprog" id="${data.queueId}" data-deezerid="${data.id}" data-urlid="${url_id}">
-                       <td class="queueTitle">${data.name}</td>
-                       <td class="queueSize">${data.size}</td>
-                       <td class="queueDownloaded">${data.downloaded}</td>
-                       <td class="queueFailed">${data.failed}</td>
+                       `<tr class="downloadInfo" id="${data.queueId}" data-deezerid="${data.id}" data-urlid="${url_id}">
+                               <td class="downloadInfo-cover">
+                                       <img width="75px" src="${data.cover}" alt="Cover ${data.name}"/>
+                               </td>
+                               <td class="downloadInfo-meta">
+                                       ${data.name}<br>
+                                       <span class="secondary-text">${data.artist}</span>
+                               </td>
+                               <td class="downloadInfo-info">
+                                       <span class="queueDownloaded">${data.downloaded}</span>/<span class="queueSize">${data.size}</span><br>
+                                       <span class="secondary-text"><span class="queueFailed">${data.failed}</span> ${i18n("Failed")}</span>
+                               </td>
+                       </tr>
+                       <tr class="downloadBar" id="bar-${data.queueId}">
+                               <td colspan="4" class="progress"><div class="changeThis indeterminate"></div></td>
                        </tr>`)
 
        var btn_remove = $('<a href="#" class="btn-flat waves-effect"><i class="material-icons">remove</i></a>')
@@ -1342,7 +1352,7 @@ function addObjToQueue(data){
                socket.emit("cancelDownload", {queueId: data.queueId})
        })
 
-       btn_remove.appendTo(tableBody.children('tr:last')).wrap('<td class="eventBtn center">')
+       btn_remove.appendTo(tableBody.children('tr.downloadInfo:last')).wrap('<td class="eventBtn center">')
 
 }
 
@@ -1360,7 +1370,7 @@ socket.on("downloadStarted", function (data) {
        //data.queueId -> queueId of started download
 
        //Switch progress type indeterminate to determinate
-       $('#' + data.queueId).find('.changeThis').removeClass('indeterminate').addClass('determinate')
+       $('#bar-' + data.queueId).find('.changeThis').removeClass('indeterminate').addClass('determinate')
        $('#' + data.queueId).find('.eventBtn').find('a').html('<i class="material-icons">clear</i>')
 
 })
@@ -1376,15 +1386,15 @@ socket.on('updateQueue', function (data) {
 
        if (data.failed == 0 && ((data.downloaded + data.failed) >= data.size)) {
                $('#' + data.queueId).find('.eventBtn').html('<i class="material-icons">done</i>')
-               $('#' + data.queueId).addClass('finished')
+               $('#' + data.queueId+',#bar-' + data.queueId).addClass('finished')
                M.toast({html: `<i class="material-icons left">done</i>${quoteattr(data.name)} - ${i18n("Completed!")}`, displayLength: 5000, classes: 'rounded'})
        } else if (data.downloaded == 0 && ((data.downloaded + data.failed) >= data.size)) {
                $('#' + data.queueId).find('.eventBtn').html('<i class="material-icons">error</i>')
-               $('#' + data.queueId).addClass('error')
+               $('#' + data.queueId+',#bar-' + data.queueId).addClass('error')
                M.toast({html: `<i class="material-icons left">error</i>${quoteattr(data.name)} - ${i18n("Failed!")}`, displayLength: 5000, classes: 'rounded'})
        } else if ((data.downloaded + data.failed) >= data.size) {
                $('#' + data.queueId).find('.eventBtn').html('<i class="material-icons">warning</i>')
-               $('#' + data.queueId).addClass('error')
+               $('#' + data.queueId+',#bar-' + data.queueId).addClass('error')
                M.toast({html: `<i class="material-icons left">warning</i>${quoteattr(data.name)} - ${i18n("Completed with errors!")}`, displayLength: 5000, classes: 'rounded'})
        }
        if (data.errorLog != ""){
@@ -1401,11 +1411,9 @@ socket.on("downloadProgress", function (data) {
        //data.queueId -> id (string)
        //data.percentage -> float/double, percentage
        //updated in 1% steps
-       //let progressbar = $('#' + data.queueId).find('.changeThis')
-       //if (progressbar.hasClass('indeterminate')) progressbar.removeClass('indeterminate').addClass('determinate')
-       //$('#' + data.queueId).find('.changeThis').css('width', data.percentage + '%')
-
-       $('#' + data.queueId).css('background-size', data.percentage + '% 100%')
+       let progressbar = $('#bar-' + data.queueId).find('.changeThis')
+       if (progressbar.hasClass('indeterminate')) progressbar.removeClass('indeterminate').addClass('determinate')
+       $('#bar-' + data.queueId).find('.changeThis').css('width', data.percentage + '%')
 })
 
 socket.on("emptyDownloadQueue", function () {
@@ -1414,7 +1422,7 @@ socket.on("emptyDownloadQueue", function () {
 
 socket.on("cancelDownload", function (data) {
        //data.queueId          -> queueId of item which was canceled
-       $('#' + data.queueId).addClass('animated fadeOutRight').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
+       $('#' + data.queueId+',#bar-' + data.queueId).addClass('animated fadeOutRight').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
                downloadQueue.splice( downloadQueue.indexOf(data.id), 1)
                $(this).remove()
                if (!data.cleanAll) M.toast({html: `<i class="material-icons left">clear</i>${i18n("One download removed!")}`, displayLength: 5000, classes: 'rounded'})
index 1f2da99560358563f79783bf23753ead46ddb1fe..619d0e6808da01346c3d32e17c265bd594d9e36b 100644 (file)
                                </div>
                        </div>
                        <table id="tab_downloads_table_downloads" class="row">
-                               <thead>
-                                       <tr>
-                                               <th><%= __('Name')%></th>
-                                               <th><%= __('Size')%></th>
-                                               <th><%= __('Downloaded')%></th>
-                                               <th><%= __('Failed')%></th>
-                                               <th style="width: 56px;"><!--event buttons--></th>
-                                       </tr>
-                               </thead>
                                <tbody></tbody>
                        </table>
                </div>