check if album colors have contrast

- remove albumid field from album class
- set accent color to $red

server/app/api/album.py

@@ -41,20 +41,28 @@ def get_album():
     """Returns all the tracks in the given album."""
     data = request.get_json()
     albumhash = data["hash"]
+    error_msg = {"error": "Album not created yet."}
 
     tracks = instances.tracks_instance.find_tracks_by_hash(albumhash)
+
+    if len(tracks) == 0:
+        return error_msg, 204
+
     tracks = [models.Track(t) for t in tracks]
     tracks = helpers.RemoveDuplicates(tracks)()
 
     album = instances.album_instance.find_album_by_hash(albumhash)
 
     if not album:
-        return {"error": "Album not created yet."}, 204
+        return error_msg, 204
 
     album = models.Album(album)
 
     album.count = len(tracks)
-    album.duration = albumslib.get_album_duration(tracks)
+    try:
+        album.duration = albumslib.get_album_duration(tracks)
+    except AttributeError:
+        album.duration = 0
 
     if (
         album.count == 1

server/app/db/mongodb/albums.py

@@ -61,11 +61,11 @@ class Albums(MongoAlbums):
         album = self.collection.find_one({"hash": hash})
         return convert_one(album)
 
-    def set_album_colors(self, colors: List[str], album_id: str) -> None:
+    def set_album_colors(self, colors: List[str], hash: str) -> None:
         """
         Sets the colors for an album.
         """
         self.collection.update_one(
-            {"_id": ObjectId(album_id)},
+            {"hash": hash},
             {"$set": {"colors": colors}},
         )

server/app/lib/colorlib.py

@@ -45,6 +45,6 @@ class ProcessAlbumColors:
         colors = get_image_colors(img)
 
         if len(colors) > 0:
-            instances.album_instance.set_album_colors(colors, album.albumid)
+            instances.album_instance.set_album_colors(colors, album.hash)
 
         return colors

server/app/models.py

@@ -82,7 +82,6 @@ class Album:
     Creates an album object
     """
 
-    albumid: str
     title: str
     artist: str
     hash: str
@@ -96,7 +95,6 @@ class Album:
     colors: List[str] = field(default_factory=list)
 
     def __init__(self, tags):
-        self.albumid = tags["_id"]["$oid"]
         self.title = tags["title"]
         self.artist = tags["artist"]
         self.date = tags["date"]

src/assets/css/_variables.scss

@@ -39,7 +39,7 @@ $teal: rgb(64, 200, 224);
 
 
 $primary: $gray4;
-$accent: $darkblue;
+$accent: $red;
 $secondary: $gray5;
 $cta: $blue;
 $danger: $red;

src/components/AlbumView/Header.vue

@@ -4,7 +4,7 @@
       class="a-header rounded"
       :style="{
         backgroundImage: `linear-gradient(
-        37deg, ${album.colors[0]}, ${album.colors[3]}
+        37deg, ${props.album.colors[0]}, ${props.album.colors[3]}
       )`,
       }"
     >
@@ -17,7 +17,7 @@
           v-motion-slide-from-left
         ></div>
       </div>
-      <div class="info">
+      <div class="info" :class="{ nocontrast: isLight() }">
         <div class="top" v-motion-slide-from-top>
           <div class="h">
             <span v-if="album.is_soundtrack">Soundtrack</span>
@@ -46,14 +46,14 @@
 import useVisibility from "@/composables/useVisibility";
 import useNavStore from "@/stores/nav";
 import useAlbumStore from "@/stores/pages/album";
-import { ref } from "vue";
+import { reactive, ref } from "vue";
 import { playSources } from "../../composables/enums";
 import { formatSeconds } from "../../composables/perks";
 import { paths } from "../../config";
 import { AlbumInfo } from "../../interfaces";
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
 
-defineProps<{
+const props = defineProps<{
   album: AlbumInfo;
 }>();
 
@@ -61,7 +61,22 @@ const albumheaderthing = ref<HTMLElement>(null);
 const imguri = paths.images.thumb;
 const nav = useNavStore();
 
+const colors = reactive({
+  color1: props.album.colors[0],
+  color2: props.album.colors[3],
+});
+
 useVisibility(albumheaderthing, nav.toggleShowPlay);
+
+function isLight(rgb: string = props.album.colors[0]) {
+  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;
+  console.log(brightness);
+
+  return brightness > 150;
+}
 </script>
 
 <style lang="scss">
@@ -91,6 +106,10 @@ useVisibility(albumheaderthing, nav.toggleShowPlay);
     }
   }
 
+  .nocontrast {
+    color: $black;
+  }
+
   .info {
     width: 100%;
     display: flex;
@@ -98,20 +117,14 @@ useVisibility(albumheaderthing, nav.toggleShowPlay);
     justify-content: flex-end;
 
     .top {
-      .h {
-        color: #ffffffcb;
-      }
-
       .title {
         font-size: 2.5rem;
         font-weight: 600;
-        color: white;
         text-transform: capitalize;
       }
 
       .artist {
         font-size: 1.15rem;
-        color: #ffffffe0;
       }
     }
 
@@ -128,23 +141,6 @@ useVisibility(albumheaderthing, nav.toggleShowPlay);
         font-size: 0.8rem;
         margin-bottom: 0.75rem;
       }
-
-      .play {
-        height: 2.5rem;
-        width: 6rem;
-        display: flex;
-        align-items: center;
-        background: $blue;
-        padding: $small;
-        cursor: pointer;
-
-        .icon {
-          height: 1.5rem;
-          width: 1.5rem;
-          margin-right: $small;
-          background: url(../../assets/icons/play.svg) no-repeat center/cover;
-        }
-      }
     }
   }
 }

src/components/LeftSidebar/Navigation.vue

@@ -77,7 +77,7 @@ const menus = [
   }
 
   svg > path {
-    fill: $side-nav-svg;
+    fill: $accent;
   }
 }
 </style>

src/components/shared/PlayBtnRect.vue

@@ -11,7 +11,7 @@
 <script setup lang="ts">
 import { playSources } from "@/composables/enums";
 import usePlayFrom from "@/composables/usePlayFrom";
-import useFStore from "@/stores/folder";
+import useFStore from "@/stores/pages/folder";
 import useAStore from "@/stores/pages/album";
 import usePStore from "@/stores/pages/playlist";
 import useQStore from "@/stores/queue";
@@ -34,8 +34,9 @@ defineProps<{
   height: 2.5rem;
   padding-left: 0.75rem;
   cursor: pointer;
-  background: linear-gradient(34deg, $accent, $red);
+  background-color: $accent;
   user-select: none;
+  color: $white;
   transition: all 0.5s ease-in-out;
 
   .icon {

src/composables/pages/album.ts

@@ -24,6 +24,7 @@ const getAlbumData = async (hash: string, ToastStore: typeof useNotifStore) => {
       info: {
         album: "",
         artist: "",
+        colors: []
       },
       tracks: [],
     };