send processing album colors to a background thread

- use white color as default album page play button color
- return 404 if album is None on get_album_bio()

src/components/AlbumView/Header.vue

@@ -78,16 +78,14 @@ function isLight(rgb: string = props.album.colors[0]) {
   const [r, g, b] = rgb.match(/\d+/g)!.map(Number);
   const brightness = (r * 299 + g * 587 + b * 114) / 1000;
 
-  return brightness > 170;
+  return brightness > 150;
 }
 
 function getButtonColor(colors: string[] = props.album.colors) {
   const base_color = colors[0];
-  console.log(colors.length);
-  if (colors.length === 0) return { color: "#000" };
+  if (colors.length === 0) return { color: "#fff", isDark: true };
 
   for (let i = 0; i < colors.length; i++) {
-    // if (isLight(colors[i])) break;
     if (theyContrast(base_color, colors[i])) {
       return {
         color: colors[i],
@@ -97,7 +95,8 @@ function getButtonColor(colors: string[] = props.album.colors) {
   }
 
   return {
-    color: "#000",
+    color: "#fff",
+    isDark: true,
   };
 }
 
@@ -124,10 +123,6 @@ function rgbToArray(rgb: string) {
 function theyContrast(color1: string, color2: string) {
   return contrast(rgbToArray(color1), rgbToArray(color2)) > 3;
 }
-
-console.log(
-  contrast(rgbToArray(props.album.colors[0]), rgbToArray(props.album.colors[3]))
-);
 </script>
 
 <style lang="scss">

src/components/PlaylistView/FeaturedArtists.vue

@@ -3,11 +3,8 @@
     <div class="header">
       <div class="headin">Featured Artists</div>
       <div class="xcontrols">
-        <div class="expand rounded">
-          EXPAND
-        </div>
-        <div class="prev icon" @click="scrollLeft()"></div>
-        <div class="next icon" @click="scrollRight()"></div>
+        <div class="prev icon" @click="scrollLeft()"><ArrowSvg /></div>
+        <div class="next icon" @click="scrollRight()"><ArrowSvg /></div>
       </div>
     </div>
     <div class="separator no-border"></div>
@@ -25,6 +22,7 @@
 import { ref } from "@vue/reactivity";
 import ArtistCard from "@/components/shared/ArtistCard.vue";
 import { Artist } from "@/interfaces";
+import ArrowSvg from "../../assets/icons/right-arrow.svg";
 
 defineProps<{
   artists: Artist[];
@@ -57,9 +55,7 @@ const scrollRight = () => {
   padding-bottom: 0;
   border-radius: $small;
   user-select: none;
-  // background: linear-gradient(0deg, transparent, $black);
   position: relative;
-  // background-color: #ffffff00;
 
   .header {
     display: flex;
@@ -70,7 +66,6 @@ const scrollRight = () => {
     .headin {
       font-size: 1.5rem;
       font-weight: 900;
-      // border: solid;
       margin-left: $small;
     }
   }
@@ -89,35 +84,21 @@ const scrollRight = () => {
     transform: rotate(180deg);
   }
   .icon {
-    background: url(../../assets/icons/right-arrow.svg) no-repeat center;
-    width: 2rem;
-    height: 2rem;
     border-radius: $small;
     cursor: pointer;
     transition: all 0.5s ease;
     background-color: rgb(51, 51, 51);
+    padding: $smaller;
+
+    svg {
+      display: flex;
+    }
 
     &:hover {
-      background-color: $blue;
+      background-color: $accent;
       transition: all 0.5s ease;
     }
   }
-
-  .expand {
-    background-color: $gray3;
-    padding: $smaller 1rem;
-    font-size: 0.9rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .icon {
-      height: 1rem;
-      aspect-ratio: 1;
-      background-color: transparent;
-      transform: rotate(-90deg);
-    }
-  }
 }
 
 .f-artists > .artists {

src/components/contextMenu.vue

@@ -57,7 +57,7 @@ const context = useContextStore();
   top: 0;
   left: 0;
   width: 12rem;
-  z-index: 10;
+  z-index: 10000;
   transform: scale(0);
 
   padding: $small;
@@ -68,12 +68,10 @@ const context = useContextStore();
   .context-item {
     width: 100%;
     display: flex;
-    justify-content: flex-start;
     align-items: center;
     cursor: default;
     padding: $small;
     border-radius: $small;
-    color: rgb(255, 255, 255);
     position: relative;
     text-transform: capitalize;
 

src/views/AlbumView.vue

@@ -4,21 +4,20 @@
       <div>
         <Header :album="album.info" />
       </div>
-      <div class="separator" id="av-sep"></div>
       <div class="songs rounded">
         <SongList :tracks="album.tracks" :on_album_page="true" />
       </div>
-      <div class="separator" id="av-sep"></div>
       <div
         id="bottom-items"
         class="rounded"
         ref="albumbottomcards"
         @click="expandBottom"
       >
-        <FeaturedArtists :artists="album.artists" /> <div v-if="album.bio">
-        <div class="separator" id="av-sep"></div>
-        <AlbumBio :bio="album.bio" />
-      </div>
+        <FeaturedArtists :artists="album.artists" />
+        <div v-if="album.bio">
+          <div class="separator" id="av-sep"></div>
+          <AlbumBio :bio="album.bio" />
+        </div>
       </div>
     </div>
   </div>
@@ -43,16 +42,7 @@ onBeforeRouteUpdate(async (to) => {
   album.fetchBio(to.params.hash.toString());
 });
 
-function increaseBottomHeight(e: WheelEvent) {
-  e.preventDefault();
-  console.log(e.ctrlKey);
-  const elem = albumbottomcards.value;
-  const pos = elem.offsetHeight + 100;
-
-  elem.style.height = `${pos}px`;
-}
-
-function expandBottom(){
+function expandBottom() {
   const elem = albumbottomcards.value;
   elem.style.height = `${40}rem`;
 }
@@ -62,12 +52,10 @@ function expandBottom(){
 .al-view {
   scrollbar-width: none;
   height: 100%;
-  // border: solid red 1px;
   position: relative;
   overflow: hidden;
 
   .al-content {
-    // border: solid blue 1px;
     height: 100%;
     overflow: auto;
     padding-bottom: 17rem;
@@ -75,6 +63,7 @@ function expandBottom(){
 
   .songs {
     min-height: calc(100% - 31.5rem);
+    margin-top: $small;
   }
 
   &::-webkit-scrollbar {
@@ -88,7 +77,6 @@ function expandBottom(){
   #bottom-items {
     z-index: 77;
     padding: $small;
-    // border: solid red;
     position: absolute;
     bottom: 0;
     width: 100%;