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;