use album colors on album header play button

- use alnum chars only on hashes
- add underline on track album hover

src/components/AlbumView/Header.vue

@@ -35,7 +35,11 @@
             {{ formatSeconds(album.duration, true) }} • {{ album.date }} •
             {{ album.artist }}
           </div>
-          <PlayBtnRect :source="playSources.album" :store="useAlbumStore" />
+          <PlayBtnRect
+            :source="playSources.album"
+            :store="useAlbumStore"
+            :background="getButtonColor()"
+          />
         </div>
       </div>
     </div>
@@ -73,10 +77,57 @@ 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;
-  console.log(brightness);
 
-  return brightness > 150;
+  return brightness > 170;
 }
+
+function getButtonColor(colors: string[] = props.album.colors) {
+  const base_color = colors[0];
+  console.log(colors.length);
+  if (colors.length === 0) return { color: "#000" };
+
+  for (let i = 0; i < colors.length; i++) {
+    // if (isLight(colors[i])) break;
+    if (theyContrast(base_color, colors[i])) {
+      return {
+        color: colors[i],
+        isDark: isLight(colors[i]),
+      };
+    }
+  }
+
+  return {
+    color: "#000",
+  };
+}
+
+function luminance(r: any, g: any, b: any) {
+  let a = [r, g, b].map(function (v) {
+    v /= 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  });
+  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+}
+
+function contrast(rgb1: number[], rgb2: number[]) {
+  let lum1 = luminance(rgb1[0], rgb1[1], rgb1[2]);
+  let lum2 = luminance(rgb2[0], rgb2[1], rgb2[2]);
+  let brightest = Math.max(lum1, lum2);
+  let darkest = Math.min(lum1, lum2);
+  return (brightest + 0.05) / (darkest + 0.05);
+}
+
+function rgbToArray(rgb: string) {
+  return rgb.match(/\d+/g)!.map(Number);
+}
+
+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/Header.vue

@@ -12,7 +12,14 @@
     <div class="carddd">
       <div class="info">
         <div class="btns">
-          <PlayBtnRect :source="playSources.playlist" :store="usePStore" />
+          <PlayBtnRect
+            :source="playSources.playlist"
+            :store="usePStore"
+            :background="{
+              color: '#fff',
+              isDark: true,
+            }"
+          />
           <Option @showDropdown="showDropdown" :src="context.src" />
         </div>
         <div class="duration">

src/components/shared/PlayBtnRect.vue

@@ -2,8 +2,12 @@
   <div
     class="playbtnrect rounded"
     @click="usePlayFrom(source, useQStore, store)"
+    :style="{
+      backgroundColor: background.color,
+    }"
+    :class="{ playbtnrectdark: background.isDark }"
   >
-    <div class="icon image"></div>
+    <playBtnSvg />
     <div class="text">Play</div>
   </div>
 </template>
@@ -15,9 +19,14 @@ import useFStore from "@/stores/pages/folder";
 import useAStore from "@/stores/pages/album";
 import usePStore from "@/stores/pages/playlist";
 import useQStore from "@/stores/queue";
+import playBtnSvg from "@/assets/icons/play.svg";
 
 defineProps<{
   source: playSources;
+  background?: {
+    color: string;
+    isDark?: boolean;
+  };
   store:
     | typeof useQStore
     | typeof useFStore
@@ -34,7 +43,6 @@ defineProps<{
   height: 2.5rem;
   padding-left: 0.75rem;
   cursor: pointer;
-  background-color: $accent;
   user-select: none;
   color: $white;
   transition: all 0.5s ease-in-out;
@@ -51,4 +59,12 @@ defineProps<{
     }
   }
 }
+
+.playbtnrectdark {
+  color: $black !important;
+
+  svg > path {
+    fill: $accent !important;
+  }
+}
 </style>

src/components/shared/SongItem.vue

@@ -157,6 +157,10 @@ function emitUpdate(track: Track) {
     max-width: max-content;
     cursor: pointer;
 
+    &:hover {
+      text-decoration: underline;
+    }
+
     @include tablet-portrait {
       display: none;
     }