danolo
/
deemix-webui
mirror of https://gitlab.com/RemixDev/deemix-webui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixed some styling issues

This commit is contained in:
RemixDev 2020-04-13 12:06:17 +02:00
parent 29b38302b4
commit 68a2bae6bf
5 changed files with 114 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/css/progressbar.css
View File

@ -125,6 +125,10 @@
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
} }
.toastify .circle-loader{
border-bottom-color: var(--toast-secondary)
}
/* Safari */ /* Safari */
@-webkit-keyframes spin { @-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); } 0% { -webkit-transform: rotate(0deg); }

41
public/css/style.css
View File

@ -10,6 +10,9 @@
--accent-text: #ffffff; --accent-text: #ffffff;
--tag-background: #0062c4; --tag-background: #0062c4;
--tag-text: #ffffff; --tag-text: #ffffff;
--toast-background: #000000dd;
--toast-secondary: #ffffff22;
--toast-text: #ffffffde;
} }
html{height: 100%;} html{height: 100%;}
@ -39,6 +42,21 @@ main#main_content{
display: flex; 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 */ /* Middle section */
div#middle_section { div#middle_section {
background-color: var(--main-background); background-color: var(--main-background);
@ -257,6 +275,7 @@ div#download_tab{
width: 75px; width: 75px;
height: 75px; height: 75px;
display: inline-block; display: inline-block;
flex-shrink: 0;
} }
#download_list > .download_object .download_info .download_line{ #download_list > .download_object .download_info .download_line{
display: block; display: block;
@ -265,7 +284,7 @@ div#download_tab{
display: none; display: none;
} }
#download_list > .download_object .download_info_data{ #download_list > .download_object .download_info_data{
width: calc(100% - 83px); width: 100%;
padding-left: 8px; padding-left: 8px;
} }
#download_list > .download_object .download_info_status{ #download_list > .download_object .download_info_status{
@ -323,6 +342,23 @@ span.tag {
} }
.tracks_table{ .tracks_table{
width: 100%; 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{ .clickable{
cursor: pointer; cursor: pointer;
@ -331,7 +367,8 @@ span.tag {
display: flex; display: flex;
align-items:center; 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); 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{ .inline-flex{
display: flex; display: flex;

39
public/index.html
View File

@ -20,13 +20,13 @@
<body> <body>
<aside id="sidebar"> <aside id="sidebar">
<i class="material-icons side_icon">menu</i> <i class="material-icons side_icon">menu</i>
<i onclick="changeTab(event, 'main', 'search_tab')" id="show_searchtab" class="material-icons side_icon main_tablinks">search</i> <i onclick="changeTab(event, 'main', 'search_tab')" id="main_search_tablink" class="main_tablinks"></i>
<i onclick="changeTab(event, 'main', 'home_tab')" id="main_defaultopen" class="material-icons side_icon main_tablinks">home</i> <i onclick="changeTab(event, 'main', 'home_tab')" id="main_home_tablink" class="material-icons side_icon main_tablinks">home</i>
<i onclick="changeTab(event, 'main', 'charts_tab')" class="material-icons side_icon main_tablinks">bubble_chart</i> <i onclick="changeTab(event, 'main', 'charts_tab')" id="main_charts_tablink" class="material-icons side_icon main_tablinks">bubble_chart</i>
<i onclick="changeTab(event, 'main', 'favorites_tab')" class="material-icons side_icon main_tablinks">album</i> <i onclick="changeTab(event, 'main', 'favorites_tab')" id="main_favorites_tablink" class="material-icons side_icon main_tablinks">album</i>
<i onclick="changeTab(event, 'main', 'analyzer_tab')" class="material-icons side_icon main_tablinks">link</i> <i onclick="changeTab(event, 'main', 'analyzer_tab')" id="main_analyzer_tablink" class="material-icons side_icon main_tablinks">link</i>
<i onclick="changeTab(event, 'main', 'settings_tab')" class="material-icons side_icon main_tablinks">settings</i> <i onclick="changeTab(event, 'main', 'settings_tab')" id="main_settings_tablink" class="material-icons side_icon main_tablinks">settings</i>
<i onclick="changeTab(event, 'main', 'about_tab')" class="material-icons side_icon main_tablinks">info</i> <i onclick="changeTab(event, 'main', 'about_tab')" id="main_about_tablink" class="material-icons side_icon main_tablinks">info</i>
</aside> </aside>
<main id="main_content"> <main id="main_content">
<div id="middle_section"> <div id="middle_section">
@ -35,7 +35,7 @@
<div id="search_tab" class="main_tabcontent"> <div id="search_tab" class="main_tabcontent">
<div class="tab"> <div class="tab">
<button class="search_tablinks" id="search_defaultopen" onclick="changeTab(event, 'search', 'main_search')">All</button> <button class="search_tablinks" id="search_all_tab" onclick="changeTab(event, 'search', 'main_search')">All</button>
<button class="search_tablinks" id="search_track_tab" onclick="changeTab(event, 'search', 'track_search')">Tracks</button> <button class="search_tablinks" id="search_track_tab" onclick="changeTab(event, 'search', 'track_search')">Tracks</button>
<button class="search_tablinks" id="search_album_tab" onclick="changeTab(event, 'search', 'album_search')">Album</button> <button class="search_tablinks" id="search_album_tab" onclick="changeTab(event, 'search', 'album_search')">Album</button>
<button class="search_tablinks" id="search_artist_tab" onclick="changeTab(event, 'search', 'artist_search')">Artist</button> <button class="search_tablinks" id="search_artist_tab" onclick="changeTab(event, 'search', 'artist_search')">Artist</button>
@ -60,12 +60,12 @@ <h1 v-on:click="changeSearchTab(section)">{{ names[section] }}</h1>
<div v-if="section == 'TRACK'"> <div v-if="section == 'TRACK'">
<table class="tracks_table"> <table class="tracks_table">
<tr v-for="track in results.TRACK.data.slice(0, 6)" class="track_row"> <tr v-for="track in results.TRACK.data.slice(0, 6)" class="track_row">
<td style="width: 48px;"><img class="rounded coverart" v-bind:src="'https://e-cdns-images.dzcdn.net/images/cover/'+track.ALB_PICTURE+'/32x32-000000-80-0-0.jpg'"></td> <td style="width: 48px; text-align: center;"><img class="rounded coverart" v-bind:src="'https://e-cdns-images.dzcdn.net/images/cover/'+track.ALB_PICTURE+'/32x32-000000-80-0-0.jpg'"></td>
<td>{{track.SNG_TITLE + (track.VERSION ? ' '+track.VERSION : '')}}</td> <td class="breakline">{{track.SNG_TITLE + (track.VERSION ? ' '+track.VERSION : '')}}</td>
<td><span v-for="artist in track.ARTISTS">{{artist.ART_NAME}} </span></td> <td class="breakline"><span v-for="artist in track.ARTISTS">{{artist.ART_NAME}} </span></td>
<td>{{track.ALB_TITLE}}</td> <td class="breakline">{{track.ALB_TITLE}}</td>
<td>{{convertDuration(track.DURATION)}}</td> <td>{{convertDuration(track.DURATION)}}</td>
<td v-on:click="addToQueue('https://www.deezer.com/track/'+track.SNG_ID)" style="width: 56px;" class="clickable"><i class="material-icons">get_app</i></td> <td v-on:click="addToQueue('https://www.deezer.com/track/'+track.SNG_ID)" style="width: 56px; text-align: center;" class="clickable"><i class="material-icons">get_app</i></td>
</tr> </tr>
</table> </table>
</div> </div>
@ -97,12 +97,12 @@ <h1>No Tracks found</h1>
<th style="width: 56px;"></th> <th style="width: 56px;"></th>
</tr> </tr>
<tr v-for="track in results.data" class="track_row"> <tr v-for="track in results.data" class="track_row">
<td style="width: 48px;"><img class="rounded coverart" v-bind:src="'https://e-cdns-images.dzcdn.net/images/cover/'+track.ALB_PICTURE+'/32x32-000000-80-0-0.jpg'"></td> <td style="width: 48px; text-align: center;"><img class="rounded coverart" v-bind:src="'https://e-cdns-images.dzcdn.net/images/cover/'+track.ALB_PICTURE+'/32x32-000000-80-0-0.jpg'"></td>
<td>{{track.SNG_TITLE + (track.VERSION ? ' '+track.VERSION : '')}}</td> <td class="breakline">{{track.SNG_TITLE + (track.VERSION ? ' '+track.VERSION : '')}}</td>
<td><span v-for="artist in track.ARTISTS">{{artist.ART_NAME}} </span></td> <td class="breakline"><span v-for="artist in track.ARTISTS">{{artist.ART_NAME}} </span></td>
<td>{{track.ALB_TITLE}}</td> <td class="breakline">{{track.ALB_TITLE}}</td>
<td>{{convertDuration(track.DURATION)}}</td> <td>{{convertDuration(track.DURATION)}}</td>
<td v-on:click="addToQueue('https://www.deezer.com/track/'+track.SNG_ID)" style="width: 56px;" class="clickable"><i class="material-icons">get_app</i></td> <td v-on:click="addToQueue('https://www.deezer.com/track/'+track.SNG_ID)" style="width: 56px; text-align: center;" class="clickable"><i class="material-icons">get_app</i></td>
</tr> </tr>
</table> </table>
</div> </div>
@ -184,6 +184,9 @@ <h1>Settings</h1>
</div> </div>
</div> </div>
</main> </main>
<audio id="preview-track">
<source id="preview-track_source" src="" type="audio/mpeg">
</audio>
</body> </body>
<script type="text/javascript" src="/public/js/socket.io.js"></script> <script type="text/javascript" src="/public/js/socket.io.js"></script>
<script type="text/javascript" src="/public/js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="/public/js/jquery-3.3.1.min.js"></script>

30
public/js/app.js
View File

@ -3,28 +3,6 @@ socket.on("message", function(msg){
console.log(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) { function changeTab(evt, section, tabName) {
var i, tabcontent, tablinks; var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName(section+"_tabcontent"); tabcontent = document.getElementsByClassName(section+"_tabcontent");
@ -210,12 +188,8 @@ function mainSearchHandler(result){
albumSearch.query = result.QUERY albumSearch.query = result.QUERY
artistSearch.query = result.QUERY artistSearch.query = result.QUERY
playlistSearch.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("search_tab_content").style.display = "block";
document.getElementById("show_searchtab").click(); document.getElementById("main_search_tablink").click();
} }
socket.on("mainSearch", function(result){mainSearchHandler(result)}) socket.on("mainSearch", function(result){mainSearchHandler(result)})
$(function(){
document.getElementById("main_defaultopen").click();
})

60
public/js/init.js
View File

@ -1,9 +1,22 @@
// Initialization // Initialization
const socket = io.connect(window.location.href) const socket = io.connect(window.location.href)
localStorage = window.localStorage; localStorage = window.localStorage;
// tabs stuff
search_selected = "" search_selected = ""
main_selected="" main_selected=""
// toasts stuff
toastsWithId = {} 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){ function toast(msg, icon=null, dismiss=true, id=null){
if (toastsWithId[id]){ 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) 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(){ function openLoginPrompt(){
socket.emit("loginpage") socket.emit("loginpage")
} }
@ -78,18 +126,6 @@ function logout(){
socket.emit("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(){ socket.on("logging_in", function(){
toast("Logging in", "loading", false, "login-toast") toast("Logging in", "loading", false, "login-toast")
}) })