Added #28 and #30
authorRemixDev <deezloaderremix@gmail.com>
Fri, 1 Mar 2019 16:44:27 +0000 (17:44 +0100)
committerRemixDev <deezloaderremix@gmail.com>
Fri, 1 Mar 2019 16:44:27 +0000 (17:44 +0100)
app/app.js
app/public/css/darkMode.css
app/public/css/style.css
app/public/index.html
app/public/js/frontend.js

index 20f81de2174e8579eb4a7d634f72d59358564842..1ffec5060c55f0ec1efe538796155aff60d58916 100644 (file)
@@ -302,7 +302,9 @@ io.sockets.on('connection', function (s) {
                }
                if (data.type == 'artist') {
                        try{
-                               let response = await s.Deezer.legacyGetArtistAlbums(data.id)
+                               let response = await s.Deezer.legacyGetArtist(data.id)
+                               let tracks = await s.Deezer.legacyGetArtistAlbums(data.id)
+                               response.data = tracks.data
                                s.emit("getTrackList", {response: response, id: data.id, reqType: data.type})
                        }catch(err){
                                s.emit("getTrackList", {err: "wrong artist id", response: {}, id: data.id, reqType: data.type})
@@ -315,15 +317,20 @@ io.sockets.on('connection', function (s) {
                                Spotify.setAccessToken(creds.body.access_token)
                                let first = true
                                let offset = 0
+                               var response = {}
+                               let resp0 = await Spotify.getPlaylist(data.id, {fields: "images,name,owner"})
+                               response.title = resp0.body.name
+                               response.image = resp0.body.images[0].url
+                               response.owner = resp0.body.owner.display_name
                                do{
                                        let resp = await Spotify.getPlaylistTracks(data.id, {fields: "items(track(artists,name,duration_ms,preview_url,explicit)),total", offset: offset*100})
                                        if (first){
                                                var numPages=Math.floor((resp.body.total-1)/100)
-                                               var response = new Array(resp.body.total)
+                                               response.data = new Array(resp.body.total)
                                                first = false
                                        }
                                        resp.body.items.forEach((t, index) => {
-                                               response[index+offset*100]={
+                                               response.data[index+offset*100]={
                                                        explicit_lyrics: t.track.explicit,
                                                        preview: t.track.preview_url,
                                                        title: t.track.name,
@@ -335,14 +342,16 @@ io.sockets.on('connection', function (s) {
                                        })
                                        offset++
                                }while(offset<=numPages)
-                               s.emit("getTrackList", {response: {'data': response}, id: data.id, reqType: data.type})
+                               s.emit("getTrackList", {response: response, id: data.id, reqType: data.type})
                        }catch(err){
                                logger.error(`getTrackList failed: ${err.stack}`)
                        }
                }else{
                        let reqType = data.type.charAt(0).toUpperCase() + data.type.slice(1)
                        try{
-                               let response = await s.Deezer["legacyGet" + reqType + "Tracks"](data.id)
+                               let response = await s.Deezer["legacyGet" + reqType](data.id)
+                               let tracks = await s.Deezer["legacyGet" + reqType + "Tracks"](data.id)
+                               response.data = tracks.data
                                s.emit("getTrackList", {response: response, id: data.id, reqType: data.type})
                        }catch(err){
                                s.emit("getTrackList", {err: "wrong id "+reqType, response: {}, id: data.id, reqType: data.type})
index 35fab03cba1d4f8c6f234111b6483b6e11e28713..0e290789f77c021b80e058fc6590adf5ee7be305 100644 (file)
@@ -1,3 +1,7 @@
+:root {
+  --main-modal-background: #212121; 
+}
+
 body, .tabs, .card, .modal, input, .collapsible-header{
   background-color: #212121;
   color: white;
index bd98a4197bc64cfa7a267c9cee06a2497e12b195..bc7feb6216b78c3921498e1b1228ffccfe1f2d49 100644 (file)
@@ -1,3 +1,7 @@
+:root {
+  --main-modal-background: #fafafa;
+}
+
 body {
        background-color: white;
 }
@@ -104,6 +108,17 @@ th{
        font-size: 20px;
        padding: 0 10px;
 }
+.modal-custom-header > .modal-content{
+       padding: 0px !important;
+}
+.modal-container{
+       padding: 8px 24px;
+}
+.trackList-header{
+       background-position: 0% 35%;
+       background-size: cover;
+       padding: 220px 24px 8px;
+}
 
 #slide-out .background{
        background-image: url("../img/bg.png");
index b98c2e27298112993ee88b0d3177f844e98479b8..695ca0fc3c927f0c385cbdd7f7ecabc3a2e1c735 100644 (file)
 </div>
 
 <!--##########################################MODAL_TRACKLIST###########################################-->
-<div id="modal_trackList" class="modal modal-fixed-footer">
+<div id="modal_trackList" class="modal modal-fixed-footer modal-custom-header">
        <div class="modal-content">
-               <div class="row">
-                       <h4 class="col s12">{{ title }}</h4>
-               </div>
-               <div class="row">
+    <div class="trackList-header" v-bind:style="{ 'background-image': `linear-gradient(to bottom, transparent 0%, var(--main-modal-background) 100%), url('${image}')` }">
+      <h4>{{ title }}</h4>
+      <h6 v-if="metadata">{{ metadata }}</h6>
+    </div>
+    <div class="row modal-container">
                        <table class="highlight col s12">
                                <thead>
                                <tr>
                                </thead>
                                <tbody id="modal_trackList_table_trackList_tbody_loadingIndicator" class="hide">
                                <tr>
-                                       <td class="center" colspan="4">
+                                       <td class="center" colspan="6">
                                                <div class="preloader-wrapper big active">
                                                        <div class="spinner-layer">
                                                                <div class="circle-clipper left">
 </div>
 
 <!--##########################################MODAL_TRACKLISTALBUM###########################################-->
-<div id="modal_trackListSelective" class="modal modal-fixed-footer">
+<div id="modal_trackListSelective" class="modal modal-fixed-footer modal-custom-header">
        <div class="modal-content">
-               <div class="row">
-                       <h4 class="col s12">{{ title }}</h4>
-               </div>
-               <div class="row">
+    <div class="trackList-header" v-bind:style="{ 'background-image': `linear-gradient(to bottom, transparent 0%, var(--main-modal-background) 100%), url('${image}')` }">
+      <h4>{{ title }}</h4>
+      <h6 v-if="metadata">{{ metadata }}</h6>
+    </div>
+    <div class="row modal-container">
                        <table class="highlight col s12">
                                <thead>
                                <tr>
                                </thead>
                                <tbody id="modal_trackListSelective_table_trackList_tbody_loadingIndicator" class="hide">
                                <tr>
-                                       <td class="center" colspan="4">
+                                       <td class="center" colspan="6">
                                                <div class="preloader-wrapper big active">
                                                        <div class="spinner-layer">
                                                                <div class="circle-clipper left">
index dc42e97303fd1921e2e27c06641c02550da2570f..a1640fdedb6bfc832bfa9e7b6f3d3bbb48bcb484 100644 (file)
@@ -553,30 +553,15 @@ function showResults_table_playlist(playlists) {
        $('.tooltipped').tooltip({delay: 100})
 }
 
-function generateShowTracklistSelectiveButton(link) {
-       var btn_showTrackListSelective = $('<a href="#" class="waves-effect btn-flat"><i class="material-icons">list</i></a>')
-       $(btn_showTrackListSelective).click(function (ev){
-               ev.preventDefault()
-               showTrackListSelective(link)
-       })
-       return btn_showTrackListSelective
-}
-
-function generateShowTracklistButton(link) {
-       var btn_showTrackList = $('<a href="#" class="waves-effect btn-flat"><i class="material-icons">list</i></a>')
-       $(btn_showTrackList).click(function (ev) {
-               ev.preventDefault()
-               showTrackList(link)
-       })
-       return btn_showTrackList
-}
 // TODO: Finish Vue.js Implementation
 var trackListSelectiveModalApp = new Vue({
        el: '#modal_trackListSelective',
        data: {
-               title: null,
-               type: null,
-               link: null,
+               title: "",
+               metadata : {},
+               image: "",
+               type: "",
+               link: "",
                head: null,
                body: []
        }
@@ -585,17 +570,33 @@ var trackListSelectiveModalApp = new Vue({
 var trackListModalApp = new Vue({
        el: '#modal_trackList',
        data: {
-               title: null,
-               type: null,
-               link: null,
+               title: "",
+               metadata : {},
+               image: "",
+               type: "",
+               link: "",
                head: null,
                body: []
        }
 })
 
+// Generate Button for tracklist with selection
+function generateShowTracklistSelectiveButton(link) {
+       var btn_showTrackListSelective = $('<a href="#" class="waves-effect btn-flat"><i class="material-icons">list</i></a>')
+       $(btn_showTrackListSelective).click(function (ev){
+               ev.preventDefault()
+               showTrackListSelective(link)
+       })
+       return btn_showTrackListSelective
+}
+
 function showTrackListSelective(link) {
        $('#modal_trackListSelective_table_trackListSelective_tbody_trackListSelective').addClass('hide')
        $('#modal_trackListSelective_table_trackListSelective_tbody_loadingIndicator').removeClass('hide')
+       trackListSelectiveModalApp.title = "Loading..."
+       trackListSelectiveModalApp.image = ""
+       trackListSelectiveModalApp.metadata = ""
+       trackListSelectiveModalApp.type = ""
        $('#modal_trackListSelective').modal('open')
        socket.emit('getTrackList', {id: getIDFromLink(link), type: getTypeFromLink(link)})
 }
@@ -614,16 +615,30 @@ $('#download_track_selection').click(function(e){
        $('#modal_trackListSelective').modal('close')
 })
 
+// Generate Button for tracklist without selection
+function generateShowTracklistButton(link) {
+       var btn_showTrackList = $('<a href="#" class="waves-effect btn-flat"><i class="material-icons">list</i></a>')
+       $(btn_showTrackList).click(function (ev) {
+               ev.preventDefault()
+               showTrackList(link)
+       })
+       return btn_showTrackList
+}
+
 function showTrackList(link) {
        $('#modal_trackList_table_trackList_tbody_trackList').addClass('hide')
        $('#modal_trackList_table_trackList_tbody_loadingIndicator').removeClass('hide')
+       trackListModalApp.title = "Loading..."
+       trackListModalApp.image = ""
+       trackListModalApp.metadata = ""
+       trackListModalApp.type = ""
        $('#modal_trackList').modal('open')
        socket.emit("getTrackList", {id: getIDFromLink(link), type: getTypeFromLink(link)})
 }
 
 socket.on("getTrackList", function (data) {
        //data.err                      -> undefined/err
-       //data.id                        -> passed id
+       //data.id                         -> passed id
        //data.response -> API response
        if (data.err){
                trackListSelectiveModalApp.title = "Can't get data"
@@ -645,11 +660,13 @@ socket.on("getTrackList", function (data) {
                        var tableBody = $('#modal_trackList_table_trackList_tbody_trackList')
                }
                $(tableBody).html('')
+               console.log(data)
                //############################################
                if (data.reqType == 'artist') {
+                       trackListModalApp.title = data.response.name
+                       trackListModalApp.image = data.response.picture_xl
                        trackListModalApp.type = data.reqType
                        trackListModalApp.link = `https://www.deezer.com/${data.reqType}/${data.id}`
-                       trackListModalApp.title = 'Album List'
                        trackListModalApp.head = [
                                {title: '#'},
                                {title: ''},
@@ -676,7 +693,9 @@ socket.on("getTrackList", function (data) {
                } else if(data.reqType == 'playlist') {
                        trackListSelectiveModalApp.type = data.reqType
                        trackListSelectiveModalApp.link = `https://www.deezer.com/${data.reqType}/${data.id}`
-                       trackListSelectiveModalApp.title = 'Playlist'
+                       trackListSelectiveModalApp.title = data.response.title
+                       trackListSelectiveModalApp.image = data.response.picture_xl
+                       trackListSelectiveModalApp.metadata = `by ${data.response.creator.name} • ${trackList.length == 1 ? "1 song" : `${trackList.length} songs`}`
                        trackListSelectiveModalApp.head = [
                                {title: '<i class="material-icons">music_note</i>'},
                                {title: '#'},
@@ -686,7 +705,9 @@ socket.on("getTrackList", function (data) {
                                {title: '<div class="valign-wrapper"><label><input class="selectAll" type="checkbox" id="selectAll"><span></span></label></div>'}
                        ]
                        $('.selectAll').prop('checked', false)
+                       let totalDuration = 0
                        for (var i = 0; i < trackList.length; i++) {
+                               totalDuration += trackList[i].duration
                                $(tableBody).append(
                                        `<tr>
                                        <td><i class="material-icons ${(trackList[i].preview ? `preview_playlist_controls" preview="${trackList[i].preview}"` : 'grey-text"')}>play_arrow</i></td>
@@ -705,10 +726,14 @@ socket.on("getTrackList", function (data) {
                                )
                                addPreviewControlsClick(tableBody.children('tr:last').find('.preview_playlist_controls'))
                        }
+                       var [hh,mm,ss] = convertDurationSeparated(totalDuration)
+                       trackListSelectiveModalApp.metadata += `, ${hh>0 ? `${hh} hr` : ""} ${mm} min`
                } else if(data.reqType == 'album') {
                        trackListSelectiveModalApp.type = data.reqType
                        trackListSelectiveModalApp.link = `https://www.deezer.com/${data.reqType}/${data.id}`
-                       trackListSelectiveModalApp.title = 'Tracklist'
+                       trackListSelectiveModalApp.title = data.response.title
+                       trackListSelectiveModalApp.metadata = `${data.response.artist.name} • ${trackList.length == 1 ? "1 song" : `${trackList.length} songs`}`
+                       trackListSelectiveModalApp.image = data.response.cover_xl
                        trackListSelectiveModalApp.head = [
                                {title: '<i class="material-icons">music_note</i>'},
                                {title: '#'},
@@ -723,7 +748,9 @@ socket.on("getTrackList", function (data) {
                        } else {
                                baseDisc =1
                        }
+                       let totalDuration = 0
                        for (var i = 0; i < trackList.length; i++) {
+                               totalDuration += trackList[i].duration
                                discNum = trackList[i].disk_number
                                if (discNum != baseDisc){
                                        $(tableBody).append(`<tr><td colspan="4" style="opacity: 0.54;"><i class="material-icons valignicon tiny">album</i>${discNum}</td></tr>`)
@@ -747,10 +774,14 @@ socket.on("getTrackList", function (data) {
                                )
                                addPreviewControlsClick(tableBody.children('tr:last').find('.preview_playlist_controls'))
                        }
+                       var [hh,mm,ss] = convertDurationSeparated(totalDuration)
+                       trackListSelectiveModalApp.metadata += `, ${hh>0 ? `${hh} hr` : ""} ${mm} min`
                } else if(data.reqType == 'spotifyplaylist') {
                        trackListModalApp.type = "Spotify Playlist"
                        trackListModalApp.link = 'spotify:playlist:'+data.id
-                       trackListModalApp.title = 'Tracklist'
+                       trackListModalApp.title = data.response.title
+                       trackListModalApp.image = data.response.image
+                       trackListModalApp.metadata = `by ${data.response.owner} • ${trackList.length == 1 ? "1 song" : `${trackList.length} songs`}`
                        trackListModalApp.head = [
                                {title: '<i class="material-icons">music_note</i>'},
                                {title: '#'},
@@ -758,7 +789,9 @@ socket.on("getTrackList", function (data) {
                                {title: 'Artist'},
                                {title: '<i class="material-icons">timer</i>'}
                        ]
+                       let totalDuration = 0
                        for (var i = 0; i < trackList.length; i++) {
+                               totalDuration += trackList[i].duration
                                $(tableBody).append(
                                        `<tr>
                                        <td><i class="material-icons ${(trackList[i].preview ? `preview_playlist_controls" preview="${trackList[i].preview}"` : 'grey-text"')}>play_arrow</i></td>
@@ -770,6 +803,8 @@ socket.on("getTrackList", function (data) {
                                )
                                addPreviewControlsClick(tableBody.children('tr:last').find('.preview_playlist_controls'))
                        }
+                       var [hh,mm,ss] = convertDurationSeparated(totalDuration)
+                       trackListModalApp.metadata += `, ${hh>0 ? `${hh} hr` : ""} ${mm} min`
                } else {
                        trackListModalApp.type = null
                        trackListModalApp.title = 'Tracklist'
@@ -1173,6 +1208,15 @@ function convertDuration(duration) {
        return mm + ":" + ss
 }
 
+function convertDurationSeparated(duration){
+       var hh, mm, ss
+       mm = Math.floor(duration / 60)
+       hh = Math.floor(mm / 60)
+       ss = duration - (mm * 60)
+       mm -= hh*60
+       return [hh, mm, ss]
+}
+
 function sleep(milliseconds) {
   var start = new Date().getTime()
   for (var i = 0; i < 1e7; i++) {