From 3f52bb74d8f6a30acfa5b6e0670bcc6133c111bd Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Mon, 27 Dec 2021 20:08:16 +0300
Subject: [PATCH] use promise to scroll to current in queue box

---
 .../AlbumView/FromTheSameArtist.vue           | 38 +++++++------------
 .../PlaylistView/FeaturedArtists.vue          | 37 +++++++-----------
 src/composables/perks.js                      | 37 +++++++++---------
 3 files changed, 46 insertions(+), 66 deletions(-)

diff --git a/src/components/AlbumView/FromTheSameArtist.vue b/src/components/AlbumView/FromTheSameArtist.vue
index cfe9a03..7a26f80 100644
--- a/src/components/AlbumView/FromTheSameArtist.vue
+++ b/src/components/AlbumView/FromTheSameArtist.vue
@@ -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);
diff --git a/src/components/PlaylistView/FeaturedArtists.vue b/src/components/PlaylistView/FeaturedArtists.vue
index 876c24f..ee0a23d 100644
--- a/src/components/PlaylistView/FeaturedArtists.vue
+++ b/src/components/PlaylistView/FeaturedArtists.vue
@@ -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 {
diff --git a/src/composables/perks.js b/src/composables/perks.js
index 5a9f4c6..7bda74b 100644
--- a/src/composables/perks.js
+++ b/src/composables/perks.js
@@ -83,34 +83,37 @@ const readQueue = () => {
 
 watch(current, (new_current, old_current) => {
   media.showMediaNotif();
-  localStorage.setItem("current", JSON.stringify(new_current));
 
-  const index = queue.value.findIndex(
-    (item) => item._id.$oid === new_current._id.$oid
-  );
+  new Promise((resolve) => {
+    const index = queue.value.findIndex(
+      (item) => item._id.$oid === new_current._id.$oid
+    );
 
-  if (index == queue.value.length - 1) {
-    next.value = queue.value[0];
-    prev.value = queue.value[queue.value.length - 2];
-  } else if (index == 0) {
-    next.value = queue.value[1];
-  } else {
-    next.value = queue.value[index + 1];
-  }
+    if (index == queue.value.length - 1) {
+      next.value = queue.value[0];
+      prev.value = queue.value[queue.value.length - 2];
+    } else if (index == 0) {
+      next.value = queue.value[1];
+    } else {
+      next.value = queue.value[index + 1];
+    }
 
-  prev.value = old_current;
-  localStorage.setItem("prev", JSON.stringify(prev.value));
-
-  setTimeout(() => {
+    prev.value = old_current;
+    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 };