tcsenpai/swingmusic
1
0
Fork 0
mirror of https://github.com/tcsenpai/swingmusic.git synced 2025-06-08 20:25:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

use promise to scroll to current in queue box

Browse Source
This commit is contained in:
geoffrey45 2021-12-27 20:08:16 +03:00
parent da2a831d37
commit 3f52bb74d8
3 changed files with 46 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/AlbumView/FromTheSameArtist.vue
View File

@ -85,7 +85,7 @@ export default {
<style lang="scss">
.f-a-artists {
position: relative;
height: 13rem;
height: 14em;
width: calc(100%);
background-color: #1f1e1d;
padding: $small;
@ -98,8 +98,8 @@ export default {
width: 5rem;
height: 2rem;
position: absolute;
top: -0.2rem;
right: 0rem;
top: 0.5rem;
right: 0.5rem;
display: flex;
justify-content: space-between;
@ -107,14 +107,6 @@ export default {
z-index: 1;
}
.next,
.prev {
width: 2em;
height: 2em;
cursor: pointer;
transition: all 0.5s ease;
}
.next {
background: url(../../assets/icons/right-arrow.svg) no-repeat center;
}
@ -123,23 +115,20 @@ export default {
background: url(../../assets/icons/right-arrow.svg) no-repeat center;
transform: rotate(180deg);
}
.next:hover,
.prev:hover {
transform: scale(1.2);
.next,
.prev {
width: 2em;
height: 2em;
background-color: rgb(79, 80, 80);
border-radius: $small;
cursor: pointer;
transition: all 0.5s ease;
}
.next:hover,
.prev:hover {
transform: rotate(180deg) scale(1.2);
}
.next:active {
transform: scale(0.5);
}
.prev:active {
transform: rotate(180deg) scale(0.5);
background-color: rgb(3, 1, 1);
transition: all 0.5s ease;
}
}
@ -209,7 +198,6 @@ export default {
-o-animation: similarAlbums 29s ease infinite;
animation: similarAlbums 29s ease infinite;
&:hover > .s2 {
transition: all 0.5s ease;
background: rgba(53, 53, 146, 0.8);

37
src/components/PlaylistView/FeaturedArtists.vue
View File

@ -85,7 +85,7 @@ export default {
<style lang="scss">
.f-artists {
position: relative;
height: 12em;
height: 13em;
width: calc(100%);
background-color: #1f1e1d;
padding: $small;
@ -98,8 +98,8 @@ export default {
width: 5rem;
height: 2rem;
position: absolute;
top: -0.2rem;
right: 0rem;
top: 0.5rem;
right: 0.5rem;
display: flex;
justify-content: space-between;
@ -107,14 +107,6 @@ export default {
z-index: 1;
}
.next,
.prev {
width: 2em;
height: 2em;
cursor: pointer;
transition: all 0.5s ease;
}
.next {
background: url(../../assets/icons/right-arrow.svg) no-repeat center;
}
@ -123,24 +115,21 @@ export default {
background: url(../../assets/icons/right-arrow.svg) no-repeat center;
transform: rotate(180deg);
}
.next,
.prev {
width: 2em;
height: 2em;
border-radius: $small;
cursor: pointer;
transition: all 0.5s ease;
background-color: rgb(79, 80, 80);
}
.next:hover,
.prev:hover {
transform: scale(1.2);
background-color: rgb(3, 1, 1);
transition: all 0.5s ease;
}
.prev:hover {
transform: rotate(180deg) scale(1.2);
}
.next:active {
transform: scale(0.5);
}
.prev:active {
transform: rotate(180deg) scale(0.5);
}
}
.f-artists .artists {

13
src/composables/perks.js
View File

@ -83,8 +83,8 @@ const readQueue = () => {
watch(current, (new_current, old_current) => {
media.showMediaNotif();
localStorage.setItem("current", JSON.stringify(new_current));
new Promise((resolve) => {
const index = queue.value.findIndex(
(item) => item._id.$oid === new_current._id.$oid
);
@ -99,18 +99,21 @@ watch(current, (new_current, old_current) => {
}
prev.value = old_current;
localStorage.setItem("prev", JSON.stringify(prev.value));
setTimeout(() => {
resolve();
}).then(() => {
const elem = document.getElementsByClassName("currentInQueue")[0];
if (elem) {
elem.scrollIntoView({
behavior: "smooth",
block: "center",
inline: "center",
});
}
}, 1000);
});
localStorage.setItem("current", JSON.stringify(new_current));
localStorage.setItem("prev", JSON.stringify(prev.value));
});
export default { putCommas, doThat, readQueue, current, queue, next, prev };