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

Added explicit and bitrate tags to queue items

This commit is contained in:
RemixDev 2021-10-05 13:25:23 +02:00
parent d8c07efff7
commit 6c88cc9bb8
2 changed files with 40 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/downloads/QueueItem.vue
View File

@ -1,10 +1,16 @@
<template> <template>
<div class="download-object" :data-link-only="generateLink"> <div class="download-object" :data-link-only="generateLink">
<div class="download-info"> <div class="download-info">
<img width="75px" class="rounded coverart" :src="queueItem.cover" :alt="`Cover ${queueItem.title}`" /> <div class="relative coverart rounded">
<img width="75px" :src="queueItem.cover" :alt="`Cover ${queueItem.title}`">
<span class="tag">{{ bitrateText }}</span>
</div>
<div class="download-info-data"> <div class="download-info-data">
<span class="download-line">{{ queueItem.title }}</span> <span class="download-slim-separator"> - </span> <span class="download-line">
<i v-if="queueItem.explicit" class="material-icons explicit-icon">explicit</i> {{ queueItem.title }}
</span>
<span class="download-slim-separator"> - </span>
<span>{{ queueItem.artist }}</span> <span>{{ queueItem.artist }}</span>
</div> </div>
@ -146,6 +152,17 @@ export default {
default: default:
return "" return ""
} }
},
bitrateText() {
switch (parseInt(this.queueItem.bitrate)) {
case 9: return "FLAC";
case 3: return "320";
case 1: return "128";
case 15: return "360HQ";
case 14: return "360MQ";
case 13: return "360LQ";
default: return "MISC";
}
} }
}, },
methods: { methods: {
@ -176,13 +193,25 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
img { .coverart {
height: 75px; height: 75px;
width: 75px;
flex: 0 0 75px; flex: 0 0 75px;
overflow: hidden;
}
.coverart .tag {
position: absolute;
bottom: 0px;
right: 0px;
} }
.download-line { .download-line {
display: block; display: block;
.explicit-icon {
vertical-align: bottom;
}
} }
.download-slim-separator { .download-slim-separator {
@ -229,7 +258,7 @@ export default {
.download-info { .download-info {
display: block; display: block;
img { .coverart {
display: none; display: none;
} }

7
src/styles/css/components.css
View File

@ -65,4 +65,11 @@
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
} }
.tag {
padding: 3px;
background-color: var(--primary-color);
font-size: 10px;
border-radius: 3px;
}
} }