TDvorak/swingmusic-extended
1
0
Fork 0
mirror of https://github.com/Dvorinka/swingmusic-extended.git synced 2026-06-04 20:43:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

use third-party module to auto-persist queue store

Browse Source 
+ more redesign
+ convert js files to ts
This commit is contained in:
geoffrey45
2022-08-19 15:58:32 +03:00
parent 5476575d10
commit 03219166c5
20 changed files with 305 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/LeftSidebar/NP/SongCard.vue
+84 -37
View File
@@ -1,47 +1,44 @@
<template>
<div class="info">
<div class="desc">
<div>
<router-link
:to="{
name: 'AlbumView',
params: {
hash: track?.albumhash ? track.albumhash : ' ',
},
}"
>
<div class="art">
<img
:src="imguri + track?.image"
alt=""
class="l-image rounded force-lm"
loading="lazy"
/>
</div>
</router-link>
<div class="sidebar-songcard">
<router-link
:to="{
name: 'AlbumView',
params: {
hash: track?.albumhash ? track.albumhash : ' ',
},
}"
>
<div class="art">
<img
:src="imguri + track?.image"
alt=""
class="l-image rounded force-lm"
loading="lazy"
/>
<div id="bitrate" v-if="track?.bitrate">
<span v-if="track.bitrate > 1500">MASTER</span>
<span v-else-if="track.bitrate > 330">FLAC</span>
<span v-else>MP3</span>
• {{ track.bitrate }}
</div>
<div class="title ellip">{{ props.track?.title }}</div>
<div class="separator no-border"></div>
<div
class="artists ellip"
v-if="track?.artists && track?.artists[0] !== ''"
>
<span v-for="artist in putCommas(track.artists)" :key="artist">{{
artist
}}</span>
</div>
<div class="artists" v-else-if="track?.artists">
<span>{{ track.albumartist }}</span>
</div>
<div class="artists" v-else>
<span>Meh</span>
</div>
</div>
</router-link>
<div class="bottom">
<div class="title ellip">{{ props.track?.title }}</div>
<div
class="artists ellip"
v-if="track?.artists && track?.artists[0] !== ''"
>
<span v-for="artist in putCommas(track.artists)" :key="artist">{{
artist
}}</span>
</div>
<div class="artists" v-else-if="track?.artists">
<span>{{ track.albumartist }}</span>
</div>
<div class="artists" v-else>
<span>Meh</span>
</div>
</div>
</div>
@@ -57,3 +54,53 @@ const props = defineProps<{
track: Track | null;
}>();
</script>
<style lang="scss">
.sidebar-songcard {
.art {
width: 100%;
aspect-ratio: 1;
place-items: center;
margin-bottom: $small;
position: relative;
img {
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: cover;
}
#bitrate {
position: absolute;
font-size: 0.75rem;
width: max-content;
padding: 0.2rem 0.35rem;
bottom: 1rem;
left: 1rem;
background-color: $black;
border-radius: $smaller;
box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.438);
}
}
.bottom {
display: grid;
gap: $smaller;
}
.title {
font-weight: 900;
word-break: break-all;
}
.artists {
font-size: 0.85rem;
opacity: 0.75;
&:hover {
text-decoration: underline 1px !important;
}
}
}
</style>