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

client: add progress bar

Browse Source 
- add favourites buttons
- redirect /folder/ => /folder/home
- minor fixes
This commit is contained in:
geoffrey45
2021-12-24 12:41:38 +03:00
parent 81c8ae8629
commit 757d6cbe5a
12 changed files with 338 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/RightSideBar/NowPlaying.vue
+177 -60
View File
@@ -17,10 +17,23 @@
</div>
</div>
</div>
<div class="progress">
<input type="range" :value="pos" min="0" max="100" />
</div>
<div class="controls">
<div class="image" id="previous"></div>
<div class="image" id="play-pause"></div>
<div class="image" id="next"></div>
<div class="shuffle">
<div class="image"></div>
<div class="image"></div>
</div>
<div class="nav">
<div class="image" id="previous" @click="playPrev"></div>
<div class="image" id="play-pause" @click="playPause"></div>
<div class="image" id="next" @click="playNext"></div>
</div>
<div class="fav">
<div class="image"></div>
<div class="image"></div>
</div>
</div>
</div>
</template>
@@ -28,87 +41,191 @@
<script>
import { ref } from "@vue/reactivity";
import perks from "../../composables/perks.js";
import playAudio from "@/composables/playAudio.js";
export default {
setup() {
const current = ref(perks.current);
const putCommas = perks.putCommas;
const pos = playAudio.pos;
return { current, putCommas };
const { playNext } = playAudio;
const { playPrev } = playAudio;
const { playPause } = playAudio;
return { current, putCommas, playNext, playPrev, playPause, pos };
},
};
</script>
<style>
<style lang="scss">
.now-playing {
height: 5rem;
border-radius: 0.5rem;
margin-top: 1rem;
padding: 0.5rem;
background-color: #131313b2;
background-color: rgb(12, 12, 12);
display: grid;
grid-template-columns: 3fr 1fr;
}
grid-template-rows: 3fr 1fr;
.now-playing .art-tags {
display: flex;
align-items: center;
}
.progress {
display: flex;
align-items: center;
height: 1.5rem;
.now-playing .art-tags .album-art {
width: 4.5rem;
height: 4.5rem;
border-radius: 0.5rem;
margin-right: 0.5rem;
background-color: #ad1717a8;
background-image: url(../../assets/images/null.webp);
}
input {
-webkit-appearance: none;
width: 100%;
border: none;
outline: none;
background: transparent;
}
.now-playing .art-tags hr {
border: none;
margin: 0.3rem;
}
.now-playing .art-tags #title {
margin: 0;
width: 14rem;
color: #fff;
}
input:focus {
outline: none;
}
.now-playing .art-tags #artist {
font-weight: lighter;
font-size: small;
color: rgba(255, 255, 255, 0.712);
}
input::-webkit-slider-runnable-track {
width: 100%;
height: 0.25rem;
cursor: pointer;
background: #3071a9;
}
.now-playing .controls {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
}
input::-webkit-slider-thumb {
-webkit-appearance: none;
height: 1rem;
width: 1rem;
border-radius: 50%;
background: #ffffff;
cursor: pointer;
margin-top: -0.35rem;
}
.now-playing .controls * {
height: 3rem;
width: 3rem;
background-size: 50%;
cursor: pointer;
border-radius: 0.5rem;
}
input:focus::-webkit-slider-runnable-track,
input::-moz-range-track {
background: #367ebd;
}
.now-playing .controls *:hover {
filter: invert(66%) sepia(75%) saturate(4335%) hue-rotate(158deg)
brightness(89%) contrast(101%);
}
input::-moz-range-thumb {
height: 1rem;
width: 1rem;
border-radius: 50%;
background: #ffffff;
cursor: pointer;
margin-top: -0.35rem;
}
}
.now-playing .controls #previous {
background-image: url(../../assets/icons/previous.svg);
}
.controls {
display: grid;
grid-template-columns: repeat(3, 1fr);
.now-playing .controls #play-pause {
background-image: url(../../assets/icons/pause.svg);
}
.nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
width: 100%;
.now-playing .controls #next {
background-image: url(../../assets/icons/next.svg);
& * {
height: 3rem;
width: 3rem;
background-size: 50%;
cursor: pointer;
border-radius: 0.5rem;
}
& *:hover {
filter: invert(66%) sepia(75%) saturate(4335%) hue-rotate(158deg)
brightness(89%) contrast(101%);
}
#previous {
background-image: url(../../assets/icons/previous.svg);
}
#play-pause {
background-image: url(../../assets/icons/pause.svg);
}
#next {
background-image: url(../../assets/icons/next.svg);
}
}
.shuffle {
width: 100%;
display: flex;
align-items: center;
& * {
height: 2rem;
width: 2rem;
background-size: 70%;
cursor: pointer;
border-radius: 0.5rem;
}
& :first-child {
background-image: url(../../assets/icons/repeat.svg);
}
& :last-child {
background-image: url(../../assets/icons/shuffle.svg);
}
}
.fav {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
& * {
height: 2rem;
width: 2rem;
background-size: 70%;
border-radius: 0.5rem;
cursor: pointer;
}
& :first-child {
background-image: url(../../assets/icons/plus.svg);
}
& :last-child {
background-image: url(../../assets/icons/heart.svg);
}
}
}
.art-tags {
display: flex;
align-items: center;
hr {
border: none;
margin: 0.3rem;
}
#title {
margin: 0;
width: 13rem;
color: #fff;
}
#artist {
font-size: small;
color: rgba(255, 255, 255, 0.712);
}
.album-art {
width: 6rem;
height: 6rem;
border-radius: 0.5rem;
margin-right: 0.5rem;
margin-left: $small;
background-color: #ad1717a8;
background-image: url(../../assets/images/null.webp);
}
}
}
</style>