diff --git a/public/css/style.css b/public/css/style.css index 1d1354e..1a05b1d 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -85,6 +85,14 @@ div#middle_section { } } +/* Search Tab */ +.search_tabcontent { + display: none; +} +#search_tab{ + display: none; +} + /* Main Search Tab */ #main_search > .search_section{ @@ -158,6 +166,10 @@ img.rounded { img.circle { border-radius: 50%; } + +.coverart{ + background-color: #eee; +} span.tag { background-color: #222324; border-radius: 2px; diff --git a/public/index.html b/public/index.html index 77274e2..627d04d 100644 --- a/public/index.html +++ b/public/index.html @@ -23,42 +23,117 @@
- - + + + +
diff --git a/public/js/frontend.js b/public/js/frontend.js index 2c7c084..a7177ef 100644 --- a/public/js/frontend.js +++ b/public/js/frontend.js @@ -53,6 +53,22 @@ document.querySelector("#hide_download_tab").onclick = (ev)=>{ document.querySelector("#download_tab").style.display = "none"; } +// searchTab + +function searchTab(evt, tabName) { + var i, tabcontent, tablinks; + tabcontent = document.getElementsByClassName("search_tabcontent"); + for (i = 0; i < tabcontent.length; i++) { + tabcontent[i].style.display = "none"; + } + tablinks = document.getElementsByClassName("search_tablinks"); + for (i = 0; i < tablinks.length; i++) { + tablinks[i].className = tablinks[i].className.replace(" active", ""); + } + document.getElementById(tabName).style.display = "block"; + evt.currentTarget.className += " active"; +} + var mainSearch = new Vue({ el: '#main_search', data: { @@ -74,6 +90,42 @@ var mainSearch = new Vue({ } }) +var trackSearch = new Vue({ + el: '#track_search', + data: { + results: { + data: [] + } + } +}) + +var albumSearch = new Vue({ + el: '#album_search', + data: { + results: { + data: [] + } + } +}) + +var artistSearch = new Vue({ + el: '#artist_search', + data: { + results: { + data: [] + } + } +}) + +var playlistSearch = new Vue({ + el: '#playlist_search', + data: { + results: { + data: [] + } + } +}) + // Search section $("#searchbar").keyup(function(e){ if(e.keyCode == 13){ @@ -81,12 +133,20 @@ $("#searchbar").keyup(function(e){ console.log(term) if (isValidURL(term)) doAjax("/download", "POST", null, {url: term}); - else + else{ + document.getElementById("search_tab").style.display = "none"; doAjax("/search", "POST", searchHandler, {term: term}); + } } }) function searchHandler(result){ console.log(result) mainSearch.results = result + trackSearch.results = result.TRACK + albumSearch.results = result.ALBUM + artistSearch.results = result.ARTIST + playlistSearch.results = result.PLAYLIST + document.getElementById("search_defaultopen").click(); + document.getElementById("search_tab").style.display = "block"; } diff --git a/public/js/utils.js b/public/js/utils.js index 821a458..69075f5 100644 --- a/public/js/utils.js +++ b/public/js/utils.js @@ -6,3 +6,27 @@ function isValidURL(text){ return true return false } +function convertDuration(duration) { + //convert from seconds only to mm:ss format + var mm, ss + mm = Math.floor(duration / 60) + ss = duration - (mm * 60) + //add leading zero if ss < 0 + if (ss < 10) { + ss = "0" + ss + } + 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 numberWithDots(x) { + return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "."); +}