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/HotKeys.vue
+2 -2
View File
@@ -1,6 +1,6 @@
<template>
<div class="hotkeys">
<div class="hotkeys rounded noscroll">
<div class="image ctrl-btn" id="previous" @click="q.playPrev"></div>
<div
class="image ctrl-btn play-pause"
@@ -28,13 +28,13 @@ const q = useQStore();
justify-content: center;
place-content: flex-end;
width: 100%;
background-color: $gray2;
.ctrl-btn {
height: 2.5rem;
width: 100%;
background-size: 1.5rem !important;
cursor: pointer;
border-radius: 0.5rem;
&:hover {
background-color: $accent;
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>
src/components/LeftSidebar/Playlists.vue
+54
View File
@@ -0,0 +1,54 @@
<template>
<div class="sidebar-playlists">
<div class="header">your playlists</div>
<div class="list rounded">
<div v-for="p in pStore.playlists" class="ellip">
<router-link
:to="{
name: 'PlaylistView',
params: {
pid: p.playlistid,
},
}"
>
{{ p.name }}
</router-link>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import usePStore from "@/stores/pages/playlists";
import { onMounted } from "vue";
const pStore = usePStore();
onMounted(() => {
if (pStore.playlists.length == 0) {
pStore.fetchAll();
}
});
</script>
<style lang="scss">
.sidebar-playlists {
// outline: solid 1px;
display: grid;
grid-template-rows: max-content 1fr;
.header {
opacity: 0.5;
margin-bottom: $small;
margin-left: 1rem;
font-size: small;
}
.list {
padding: $small;
& > * {
padding: $small;
}
}
}
</style>
src/components/LeftSidebar/nowPlaying.vue
+3 -67
View File
@@ -1,14 +1,5 @@
<template>
<div class="now-playing-card t-center rounded">
<div class="headin">Now playing</div>
<div
class="button menu rounded"
@click="showContextMenu"
:class="{ context_on: context_on }"
>
<MenuSvg />
</div>
<div class="separator no-border"></div>
<div>
<SongCard :track="queue.currenttrack" />
<div class="l-track-time">
@@ -16,8 +7,8 @@
><span class="rounded">{{ formatSeconds(queue.duration.full) }}</span>
</div>
<Progress />
<HotKeys />
</div>
<HotKeys />
</div>
</template>
@@ -65,10 +56,11 @@ const showContextMenu = (e: Event) => {
<style lang="scss">
.now-playing-card {
padding: 1rem;
background-color: $primary;
width: 100%;
display: grid;
grid-template-rows: 1fr max-content;
position: relative;
gap: 1rem;
.l-track-time {
display: flex;
@@ -96,24 +88,6 @@ const showContextMenu = (e: Event) => {
}
}
.headin {
font-weight: bold;
font-size: 0.9rem;
}
.button {
position: absolute;
top: $small;
cursor: pointer;
transition: all 200ms;
display: flex;
align-items: center;
padding: $smaller;
&:hover {
background-color: $accent;
}
}
.context_on {
background-color: $accent;
@@ -123,43 +97,5 @@ const showContextMenu = (e: Event) => {
right: $small;
transform: rotate(90deg);
}
.art {
width: 100%;
aspect-ratio: 1;
place-items: center;
margin-bottom: $small;
.l-image {
height: 100%;
width: 100%;
}
}
#bitrate {
position: absolute;
font-size: 0.75rem;
width: max-content;
padding: 0.2rem 0.35rem;
top: 14rem;
left: 2rem;
background-color: $black;
border-radius: $smaller;
box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.438);
}
.title {
font-weight: 900;
word-break: break-all;
}
.artists {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.808);
&:hover {
text-decoration: underline 1px !important;
}
}
}
</style>