diff --git a/public/css/progressbar.css b/public/css/progressbar.css index 5fff18a..75ee3aa 100644 --- a/public/css/progressbar.css +++ b/public/css/progressbar.css @@ -125,6 +125,10 @@ animation: spin 1s linear infinite; } +.toastify .circle-loader{ + border-bottom-color: var(--toast-secondary) +} + /* Safari */ @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } diff --git a/public/css/style.css b/public/css/style.css index aaef42f..5b842fa 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -10,6 +10,9 @@ --accent-text: #ffffff; --tag-background: #0062c4; --tag-text: #ffffff; + --toast-background: #000000dd; + --toast-secondary: #ffffff22; + --toast-text: #ffffffde; } html{height: 100%;} @@ -39,6 +42,21 @@ main#main_content{ display: flex; } +/* Tracks preview */ +.preview_controls { + opacity: 0; + display: block; + background: rgba(0, 0, 0, .5); + width: 56px; + height: 56px; + text-align: center; + line-height: 56px; + position: absolute; + border-radius: 5px; + top: 0; + right: 0; +} + /* Middle section */ div#middle_section { background-color: var(--main-background); @@ -257,6 +275,7 @@ div#download_tab{ width: 75px; height: 75px; display: inline-block; + flex-shrink: 0; } #download_list > .download_object .download_info .download_line{ display: block; @@ -265,7 +284,7 @@ div#download_tab{ display: none; } #download_list > .download_object .download_info_data{ - width: calc(100% - 83px); + width: 100%; padding-left: 8px; } #download_list > .download_object .download_info_status{ @@ -323,6 +342,23 @@ span.tag { } .tracks_table{ width: 100%; + -webkit-border-horizontal-spacing: 0px; + -webkit-border-vertical-spacing: 0px; +} +.tracks_table td{ + padding: 4px 12px 4px 5px; + vertical-align: middle; + border: 0px black solid; +} +td img { + vertical-align: middle; +} +.tracks_table tr:nth-child(even){ + background-color: var(--secondary-background); + border: 0px black solid; +} +p, .tracks_table td.breakline{ + word-break: break-word; } .clickable{ cursor: pointer; @@ -331,7 +367,8 @@ span.tag { display: flex; align-items:center; box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(0, 0, 0, 0.3); - background: #333333; + background: var(--toast-background); + color: var(--toast-text); } .inline-flex{ display: flex; diff --git a/public/index.html b/public/index.html index 1dd1546..283260f 100644 --- a/public/index.html +++ b/public/index.html @@ -20,13 +20,13 @@
@@ -35,7 +35,7 @@
- + @@ -60,12 +60,12 @@

{{ names[section] }}

- - - - + + + + - +
{{track.SNG_TITLE + (track.VERSION ? ' '+track.VERSION : '')}}{{artist.ART_NAME}} {{track.ALB_TITLE}}{{track.SNG_TITLE + (track.VERSION ? ' '+track.VERSION : '')}}{{artist.ART_NAME}} {{track.ALB_TITLE}} {{convertDuration(track.DURATION)}}get_appget_app
@@ -97,12 +97,12 @@

No Tracks found

- - {{track.SNG_TITLE + (track.VERSION ? ' '+track.VERSION : '')}} - {{artist.ART_NAME}} - {{track.ALB_TITLE}} + + {{track.SNG_TITLE + (track.VERSION ? ' '+track.VERSION : '')}} + {{artist.ART_NAME}} + {{track.ALB_TITLE}} {{convertDuration(track.DURATION)}} - get_app + get_app
@@ -184,6 +184,9 @@

Settings

+ diff --git a/public/js/app.js b/public/js/app.js index 6a95b72..aaadee3 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -3,28 +3,6 @@ socket.on("message", function(msg){ console.log(msg) }) -$(function() { - // Check if download tab should be open - if (eval(localStorage.getItem("downloadTabOpen"))) - $("#show_download_tab").click() - else - $("#hide_download_tab").click() -}) - -// Show/Hide Download Tab -document.querySelector("#show_download_tab").onclick = (ev)=>{ - ev.preventDefault(); - document.querySelector("#download_tab_bar").style.display = "none"; - document.querySelector("#download_tab").style.display = "block"; - localStorage.setItem("downloadTabOpen", true) -} -document.querySelector("#hide_download_tab").onclick = (ev)=>{ - ev.preventDefault(); - document.querySelector("#download_tab_bar").style.display = "block"; - document.querySelector("#download_tab").style.display = "none"; - localStorage.setItem("downloadTabOpen", false) -} - function changeTab(evt, section, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName(section+"_tabcontent"); @@ -210,12 +188,8 @@ function mainSearchHandler(result){ albumSearch.query = result.QUERY artistSearch.query = result.QUERY playlistSearch.query = result.QUERY - document.getElementById("search_defaultopen").click(); + document.getElementById("search_all_tab").click(); document.getElementById("search_tab_content").style.display = "block"; - document.getElementById("show_searchtab").click(); + document.getElementById("main_search_tablink").click(); } socket.on("mainSearch", function(result){mainSearchHandler(result)}) - -$(function(){ - document.getElementById("main_defaultopen").click(); -}) diff --git a/public/js/init.js b/public/js/init.js index c35a82e..9f0c5aa 100644 --- a/public/js/init.js +++ b/public/js/init.js @@ -1,9 +1,22 @@ // Initialization const socket = io.connect(window.location.href) localStorage = window.localStorage; +// tabs stuff search_selected = "" main_selected="" +// toasts stuff toastsWithId = {} +// track previews stuff +let preview_track = document.getElementById('preview-track') +let preview_stopped = true +let preview_max_volume; + +preview_track.volume = 0 +preview_max_volume = parseFloat(localStorage.getItem("previewVolume")) +if (preview_max_volume === null){ + preview_max_volume = 0.8 + localStorage.setItem("previewVolume", preview_max_volume) +} function toast(msg, icon=null, dismiss=true, id=null){ if (toastsWithId[id]){ @@ -53,6 +66,41 @@ socket.on("updateToast", (data)=>{ toast(data.msg, data.icon || null, data.dismiss !== undefined ? data.dismiss : true, data.id || null) }) +window.addEventListener('pywebviewready', function() { + $('#open_login_prompt').prop('disabled', false); +}) + +$(function(){ + socket.emit("init"); + if (localStorage.getItem("arl")){ + socket.emit("login", localStorage.getItem("arl")); + $("#login_input_arl").val(localStorage.getItem("arl")) + } + // Check if download tab should be open + if (eval(localStorage.getItem("downloadTabOpen"))) + $("#show_download_tab").click() + else + $("#hide_download_tab").click() + + // Open default tab + document.getElementById("main_home_tablink").click(); +}) + +// Show/Hide Download Tab +document.querySelector("#show_download_tab").onclick = (ev)=>{ + ev.preventDefault(); + document.querySelector("#download_tab_bar").style.display = "none"; + document.querySelector("#download_tab").style.display = "block"; + localStorage.setItem("downloadTabOpen", true) +} +document.querySelector("#hide_download_tab").onclick = (ev)=>{ + ev.preventDefault(); + document.querySelector("#download_tab_bar").style.display = "block"; + document.querySelector("#download_tab").style.display = "none"; + localStorage.setItem("downloadTabOpen", false) +} + +// Login stuff function openLoginPrompt(){ socket.emit("loginpage") } @@ -78,18 +126,6 @@ function logout(){ socket.emit("logout"); } -window.addEventListener('pywebviewready', function() { - $('#open_login_prompt').prop('disabled', false); -}) - -$(function(){ - socket.emit("init"); - if (localStorage.getItem("arl")){ - socket.emit("login", localStorage.getItem("arl")); - $("#login_input_arl").val(data.arl) - } -}) - socket.on("logging_in", function(){ toast("Logging in", "loading", false, "login-toast") })