move album header color methods to composables

src/components/AlbumView/Header.vue

@@ -9,13 +9,9 @@
     }"
   >
     <div class="art rounded">
-      <img
-        :src="imguri + album.image"
-        alt=""
-        class="rounded shadow-lg"
-      />
+      <img :src="imguri + album.image" alt="" class="rounded shadow-lg" />
     </div>
-    <div class="info" :class="{ nocontrast: isLight() }">
+    <div class="info" :class="{ nocontrast: isLight(album.colors[0]) }">
       <div class="top">
         <div class="h">
           <span v-if="album.is_soundtrack">Soundtrack</span>
@@ -36,7 +32,7 @@
         <PlayBtnRect
           :source="playSources.album"
           :store="useAlbumStore"
-          :background="getButtonColor()"
+          :background="getButtonColor(album.colors)"
         />
       </div>
     </div>
@@ -53,6 +49,7 @@ import { formatSeconds } from "../../composables/perks";
 import { paths } from "@/config";
 import { AlbumInfo } from "../../interfaces";
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
+import { getButtonColor, isLight } from "../../composables/colors/album";
 
 const props = defineProps<{
   album: AlbumInfo;
@@ -81,96 +78,6 @@ function handleVisibilityState(state: boolean) {
 }
 
 useVisibility(albumheaderthing, handleVisibilityState);
-
-/**
- * Returns `true` if the rgb color passed is light.
- *
- * @param {string} rgb The color to check whether it's light or dark.
- * @returns {boolean} true if color is light, false if color is dark.
- */
-function isLight(rgb: string = props.album.colors[0]): boolean {
-  if (rgb == null || undefined) return false;
-
-  const [r, g, b] = rgb.match(/\d+/g)!.map(Number);
-  const brightness = (r * 299 + g * 587 + b * 114) / 1000;
-
-  return brightness > 170;
-}
-
-interface BtnColor {
-  color: string;
-  isDark: boolean;
-}
-
-/**
- * Returns the first contrasting color in the album colors.
- *
- * @param {string[]} colors The album colors to choose from.
- * @returns {BtnColor} A color to use as the play button background
- */
-function getButtonColor(colors: string[] = props.album.colors): BtnColor {
-  const base_color = colors[0];
-  if (colors.length === 0) return { color: "#fff", isDark: true };
-
-  for (let i = 0; i < colors.length; i++) {
-    if (theyContrast(base_color, colors[i])) {
-      return {
-        color: colors[i],
-        isDark: isLight(colors[i]),
-      };
-    }
-  }
-
-  return {
-    color: "#fff",
-    isDark: true,
-  };
-}
-
-/**
- * Returns the luminance of a color.
- * @param r The red value of the color.
- * @param g The green value of the color.
- * @param b The blue value of the color.
- */
-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;
-}
-
-/**
- * Returns a contrast ratio of `color1`:`color2`
- * @param {string} color1 The first color
- * @param {string} color2 The second color
- */
-function contrast(color1: number[], color2: number[]): number {
-  let lum1 = luminance(color1[0], color1[1], color1[2]);
-  let lum2 = luminance(color2[0], color2[1], color2[2]);
-  let brightest = Math.max(lum1, lum2);
-  let darkest = Math.min(lum1, lum2);
-  return (brightest + 0.05) / (darkest + 0.05);
-}
-
-/**
- * Converts a rgb color string to an array of the form: `[r, g, b]`
- * @param rgb The color to convert
- * @returns {number[]} The array representation of the color
- */
-function rgbToArray(rgb: string): number[] {
-  return rgb.match(/\d+/g)!.map(Number);
-}
-
-/**
- * Returns true if the `color2` contrast with `color1`.
- * @param color1 The first color
- * @param color2 The second color
- */
-function theyContrast(color1: string, color2: string) {
-  return contrast(rgbToArray(color1), rgbToArray(color2)) > 3;
-}
 </script>
 
 <style lang="scss">

src/components/FolderView/SongList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="folder">
     <div class="table rounded" v-if="tracks.length">
-      <div class="header" v-if="disc">
+      <div class="header" v-if="disc && !album.info.is_single">
         <div class="disc-number">Disc {{ disc }}</div>
       </div>
       <div class="songlist">
@@ -37,6 +37,7 @@ import useQStore from "@/stores/queue";
 import useAlbumStore from "@/stores/pages/album";
 
 const queue = useQStore();
+const album = useAlbumStore();
 
 const props = defineProps<{
   tracks: Track[];
@@ -91,7 +92,6 @@ function updateQueue(track: Track) {
       queue.play(index);
       break;
     case "AlbumView":
-      const album = useAlbumStore();
       const tindex = album.tracks.findIndex((t) => t.trackid === track.trackid);
 
       queue.playFromAlbum(