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

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

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

13
src/composables/perks.js
View File

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