From d48dd43c94de11c0b42ce20a950bdb19718649fb Mon Sep 17 00:00:00 2001 From: RemixDev Date: Thu, 16 Apr 2020 10:37:02 +0200 Subject: [PATCH 01/11] Added Spotify credentials to settings tab Reworked how spotify features work so now it doesn't require restart on config change --- public/index.html | 10 ++++++++++ public/js/app/app.js | 21 +++++++++++++-------- 2 files changed, 23 insertions(+), 8 deletions(-) diff --git a/public/index.html b/public/index.html index 986607b..8008892 100644 --- a/public/index.html +++ b/public/index.html @@ -353,6 +353,16 @@

Settings

+
+
+

Spotify clientID

+ +
+
+

Spotify Client Secret

+ +
+
diff --git a/public/js/app/app.js b/public/js/app/app.js index 0322d69..38966d7 100644 --- a/public/js/app/app.js +++ b/public/js/app/app.js @@ -8,6 +8,7 @@ main_selected="" toastsWithId = {} // settings lastSettings = {} +lastCredentials = {} function toast(msg, icon=null, dismiss=true, id=null){ if (toastsWithId[id]){ @@ -23,7 +24,6 @@ function toast(msg, icon=null, dismiss=true, id=null){ icon = `${icon}` toastDOM.find(".toast-icon").html(icon) } - console.log(dismiss) if (dismiss !== null && dismiss){ setTimeout(function(){ toastObj.hideToast() @@ -166,28 +166,33 @@ socket.on("logged_out", function(){ var settingsTab = new Vue({ el: '#settings_tab', data: { - settings: {} + settings: {}, + spotifyFeatures: {} } }) -socket.on("init_settings", function(settings){ - loadSettings(settings) +socket.on("init_settings", function(settings, credentials){ + console.log(settings,credentials) + loadSettings(settings, credentials) toast("Settings loaded!", 'settings') }) -socket.on("updateSettings", function(settings){ - loadSettings(settings) +socket.on("updateSettings", function(settings, credentials){ + loadSettings(settings, credentials) toast("Settings updated!", 'settings') }) -function loadSettings(settings){ +function loadSettings(settings, spotifyCredentials){ lastSettings = {...settings} + lastCredentials = {...spotifyCredentials} settingsTab.settings = settings + settingsTab.spotifyFeatures = spotifyCredentials } function saveSettings(){ lastSettings = {...settingsTab.settings} - socket.emit("saveSettings", lastSettings) + lastCredentials = {...settingsTab.spotifyFeatures} + socket.emit("saveSettings", lastSettings, lastCredentials) } // tabs stuff From 691ab44069e4a3b7022eebd7c209e011ce69eadb Mon Sep 17 00:00:00 2001 From: uh_wot <3631986-uh_wot@users.noreply.gitlab.com> Date: Thu, 16 Apr 2020 11:49:56 +0200 Subject: [PATCH 02/11] added JPEG image quality setting --- public/index.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/public/index.html b/public/index.html index 8008892..2d0f1aa 100644 --- a/public/index.html +++ b/public/index.html @@ -316,6 +316,10 @@

Settings

Save images as png

+
+

JPEG image quality

+ +

Save playlists as compilation

From 38a10359fec0f0bcb59d5aec04ebea80b84e0cf4 Mon Sep 17 00:00:00 2001 From: RemixDev Date: Thu, 16 Apr 2020 11:53:52 +0200 Subject: [PATCH 03/11] Implemented savePlaylistAsCompilation Updated README with more information --- public/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index 8008892..fae7b65 100644 --- a/public/index.html +++ b/public/index.html @@ -318,7 +318,7 @@

Settings

Save playlists as compilation

- +

Remove album version from track title

From ee2f43fa56a617d4a34037ecbb067b338e9d3559 Mon Sep 17 00:00:00 2001 From: RemixDev Date: Thu, 16 Apr 2020 13:38:59 +0200 Subject: [PATCH 04/11] Added quality select modal to download buttons --- public/css/modules/middle-section.css | 38 ++++++++++++++++++++++++--- public/index.html | 25 +++++++++++++----- public/js/app/app.js | 26 +++++++++++++++++- public/js/app/downloadList.js | 6 ++--- public/js/app/search.js | 15 +++++++---- 5 files changed, 90 insertions(+), 20 deletions(-) diff --git a/public/css/modules/middle-section.css b/public/css/modules/middle-section.css index b4333c8..fca1dd1 100644 --- a/public/css/modules/middle-section.css +++ b/public/css/modules/middle-section.css @@ -48,20 +48,50 @@ width: 90%; } +/* The Modal (background) */ +.smallmodal { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 1250; /* Sit on top */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: rgb(0,0,0); /* Fallback color */ + background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ + animation-duration: 0.3s; +} + +/* Modal Content */ +.smallmodal-content { + background-color: none; + margin: auto; + width: 30%; + align-items: center; + position: relative; + top: 50%; + transform: translateY(-50%); +} +.smallmodal-content button{ + width: 100%; + margin-bottom: 8px; +} + @media only screen and (min-width: 601px) { - #container { + #container, .smallmodal-content { width: 85%; } } @media only screen and (min-width: 993px) { - #container { + #container, .smallmodal-content { width: 70%; } } @media only screen and (max-width: 600px) { - #container { + #container, .smallmodal-content { width: 100%; } -} \ No newline at end of file +} diff --git a/public/index.html b/public/index.html index 6135706..ff5bd5d 100644 --- a/public/index.html +++ b/public/index.html @@ -53,7 +53,7 @@

{{ names[section] }}

-
get_app
+
get_app

{{ results.TOP_RESULT[0].__TYPE__ == 'artist' ? results.TOP_RESULT[0].ART_NAME : results.TOP_RESULT[0].__TYPE__ == 'album' ? results.TOP_RESULT[0].ALB_TITLE : results.TOP_RESULT[0].__TYPE__ == 'playlist' ? results.TOP_RESULT[0].TITLE : '' }}

@@ -69,7 +69,7 @@

{{ names[section] }}

{{artist.ART_NAME}} {{track.ALB_TITLE}} {{convertDuration(track.DURATION)}} - get_app + get_app
@@ -77,7 +77,7 @@

{{ names[section] }}

-
get_app
+
get_app

{{ section == 'ARTIST' ? release.ART_NAME : section == 'ALBUM' ? release.ALB_TITLE : section == 'PLAYLIST' ? release.TITLE : '' }}

{{ section == 'ARTIST' ? numberWithDots(release.NB_FAN) + ' fans' : section == 'ALBUM' ? release.ART_NAME+' - '+release.NUMBER_TRACK+' tracks' : section == 'PLAYLIST' ? release.NB_SONG+' tracks' : '' }}

@@ -109,7 +109,7 @@

No Tracks found

{{artist.ART_NAME}} {{track.ALB_TITLE}} {{convertDuration(track.DURATION)}} - get_app + get_app
@@ -122,7 +122,7 @@

No Albums found

-
get_app
+
get_app

{{ release.ALB_TITLE }}

{{ 'by '+release.ART_NAME }}

@@ -138,7 +138,7 @@

No Artists found

-
get_app
+
get_app

{{ release.ART_NAME }}

{{ numberWithDots(release.NB_FAN) + ' fans' }}

@@ -154,7 +154,7 @@

No Playlists found

-
get_app
+
get_app

{{ release.TITLE }}

{{ release.NB_SONG+' tracks' }}

@@ -393,6 +393,17 @@

Settings

+ diff --git a/public/js/app/app.js b/public/js/app/app.js index 38966d7..448f013 100644 --- a/public/js/app/app.js +++ b/public/js/app/app.js @@ -166,7 +166,7 @@ socket.on("logged_out", function(){ var settingsTab = new Vue({ el: '#settings_tab', data: { - settings: {}, + settings: {tags: {}}, spotifyFeatures: {} } }) @@ -217,3 +217,27 @@ function changeTab(evt, section, tabName) { scrolledSearch(window[search_selected.split("_")[0]+"Search"]) } } + +// quality modal stuff +var modalQuality = document.getElementById('modal_quality'); +modalQuality.open = false + +function openQualityModal(link){ + $(modalQuality).data("url", link) + $(modalQuality).css('display', 'block') + $(modalQuality).addClass('animated fadeIn') +} + +function modalQualityButton(bitrate){ + var url=$(modalQuality).data("url") + if (url.indexOf(";") != -1){ + urls = url.split(";") + urls.forEach(url=>{ + sendAddToQueue(url, bitrate) + }) + }else{ + sendAddToQueue(url, bitrate) + } + $(modalQuality).addClass('animated fadeOut') + $(modalQuality).css('display', 'none') +} diff --git a/public/js/app/downloadList.js b/public/js/app/downloadList.js index cebe7b8..869e47e 100644 --- a/public/js/app/downloadList.js +++ b/public/js/app/downloadList.js @@ -10,14 +10,14 @@ socket.on("init_downloadQueue", function(data){ }) } if (data.currentItem){ - addToQueue(data['queueList'][data.currentItem]) + addToQueue(data['queueList'][data.currentItem], true) } data.queue.forEach(item=>{ addToQueue(data.queueList[item]) }) }) -function addToQueue(queueItem){ +function addToQueue(queueItem, current=false){ queueList[queueItem.uuid] = queueItem if ((queueItem.downloaded + queueItem.failed) == queueItem.size) queueComplete.push(queueItem.uuid) @@ -40,7 +40,7 @@ function addToQueue(queueItem){ remove
`) - if (queueItem.progress>0){ + if (queueItem.progress>0 || current){ $('#bar_' + queueItem.uuid).removeClass('indeterminate').addClass('determinate') } $('#bar_' +queueItem.uuid).css('width', queueItem.progress + '%') diff --git a/public/js/app/search.js b/public/js/app/search.js index 2c9fecf..c9c2544 100644 --- a/public/js/app/search.js +++ b/public/js/app/search.js @@ -71,7 +71,8 @@ var mainSearch = new Vue({ if (section != "TOP_RESULT") clickElement('search_'+section.toLowerCase()+'_tab') }, - addToQueue: function(url){sendAddToQueue(url)} + addToQueue: function(e){sendAddToQueue(e.currentTarget.dataset.link)}, + openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)} } }) @@ -88,7 +89,8 @@ var trackSearch = new Vue({ } }, methods: { - addToQueue: function(url){sendAddToQueue(url)} + addToQueue: function(e){sendAddToQueue(e.currentTarget.dataset.link)}, + openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)} } }) @@ -105,7 +107,8 @@ var albumSearch = new Vue({ } }, methods: { - addToQueue: function(url){sendAddToQueue(url)} + addToQueue: function(e){sendAddToQueue(e.currentTarget.dataset.link)}, + openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)} } }) @@ -122,7 +125,8 @@ var artistSearch = new Vue({ } }, methods: { - addToQueue: function(url){sendAddToQueue(url)} + addToQueue: function(e){sendAddToQueue(e.currentTarget.dataset.link)}, + openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)} } }) @@ -139,7 +143,8 @@ var playlistSearch = new Vue({ } }, methods: { - addToQueue: function(url){sendAddToQueue(url)} + addToQueue: function(e){sendAddToQueue(e.currentTarget.dataset.link)}, + openQualityModal: function(e){e.preventDefault(); openQualityModal(e.currentTarget.dataset.link)} } }) From 6c9869e18f290bc5c91af3f3567c2e6aa16fd3d1 Mon Sep 17 00:00:00 2001 From: uh_wot <3631986-uh_wot@users.noreply.gitlab.com> Date: Thu, 16 Apr 2020 14:56:27 +0200 Subject: [PATCH 05/11] fixed download via URL --- public/js/app/search.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/js/app/search.js b/public/js/app/search.js index c9c2544..9ad706c 100644 --- a/public/js/app/search.js +++ b/public/js/app/search.js @@ -154,7 +154,7 @@ $("#searchbar").keyup(function(e){ term = this.value console.log(term) if (isValidURL(term)) - socket.emit("addToQueue", {url: term}); + sendAddToQueue(term); else{ document.getElementById("search_tab_content").style.display = "none"; socket.emit("mainSearch", {term: term}); From 379fde07b3551d4a1420ab2eab6a21cd51834b3f Mon Sep 17 00:00:00 2001 From: RemixDev Date: Thu, 16 Apr 2020 15:14:11 +0200 Subject: [PATCH 06/11] improved the UI for screenreader users by adding custom aria-labels and -roles Merged from fcnjd/deemix --- public/index.html | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/public/index.html b/public/index.html index ff5bd5d..73c0cef 100644 --- a/public/index.html +++ b/public/index.html @@ -19,15 +19,15 @@ --> -