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()

server/app/api/album.py

@@ -80,12 +80,17 @@ def get_album_bio():
     """Returns the album bio for the given album."""
     data = request.get_json()
     album_hash = data["hash"]
+    err_msg = {"bio": "No bio found"}
 
     album = instances.album_instance.find_album_by_hash(album_hash)
+
+    if album is None:
+        return err_msg, 404
+
     bio = FetchAlbumBio(album["title"], album["artist"])()
 
     if bio is None:
-        return {"bio": "No bio found."}, 404
+        return err_msg, 404
 
     return {"bio": bio}
 

server/app/functions.py

@@ -16,13 +16,16 @@ from app.lib import trackslib
 from app.lib.populate import CreateAlbums, Populate
 from app.lib.playlistlib import ValidatePlaylistThumbs
 from app.lib.colorlib import ProcessAlbumColors
+from app.logger import get_logger
 
+log = get_logger()
 
 @helpers.background
 def run_checks():
     """
     Checks for new songs every 5 minutes.
     """
+    ValidateAlbumThumbs()
 
     while True:
         trackslib.validate_tracks()
@@ -33,10 +36,13 @@ def run_checks():
         if helpers.Ping()():
             CheckArtistImages()()
 
-        ValidateAlbumThumbs()
+        @helpers.background
-        ValidatePlaylistThumbs()
+        def process_album_colors():
             ProcessAlbumColors()
 
+        ValidatePlaylistThumbs()
+        process_album_colors()
+
         time.sleep(300)
 
 
@@ -80,14 +86,17 @@ class useImageDownloader:
             img = Image.open(BytesIO(requests.get(self.url).content))
             img.save(self.dest, format="webp")
             img.close()
+            return "fetched image"
         except requests.exceptions.ConnectionError:
             time.sleep(5)
+            return "connection error"
 
 
 class CheckArtistImages:
     def __init__(self):
         self.artists: list[str] = []
         print("Checking for artist images")
+        log.info("Checking artist images")
 
     @staticmethod
     def check_if_exists(img_path: str):
@@ -116,21 +125,21 @@ class CheckArtistImages:
         )
 
         if cls.check_if_exists(img_path):
-            return
+            return "exists"
 
         url = getArtistImage(artistname)()
 
         if url is None:
-            return
+            return "url is none"
-        useImageDownloader(url, img_path)()
+
+        return useImageDownloader(url, img_path)()
 
     def __call__(self):
         self.artists = helpers.Get.get_all_artists()
 
         with ThreadPoolExecutor() as pool:
             iter = pool.map(self.download_image, self.artists)
-            for i in iter:
+            [print(i) for i in iter]
-                pass
 
         print("Done fetching images")
 

server/app/lib/populate.py

@@ -144,7 +144,7 @@ class CreateAlbums:
                 album = create_album(track)
                 self.db_tracks.remove(track)
             else:
-                album["image"] = hash
+                album["image"] = hash + ".webp"
         try:
             album = Album(album)
             return album

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: "#fff", isDark: true };
-  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],
@@ -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">
+        <div class="prev icon" @click="scrollLeft()"><ArrowSvg /></div>
-          EXPAND
+        <div class="next icon" @click="scrollRight()"><ArrowSvg /></div>
-        </div>
-        <div class="prev icon" @click="scrollLeft()"></div>
-        <div class="next icon" @click="scrollRight()"></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,18 +4,17 @@
       <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">
+        <FeaturedArtists :artists="album.artists" />
+        <div v-if="album.bio">
           <div class="separator" id="av-sep"></div>
           <AlbumBio :bio="album.bio" />
         </div>
@@ -43,16 +42,7 @@ onBeforeRouteUpdate(async (to) => {
   album.fetchBio(to.params.hash.toString());
 });
 
-function increaseBottomHeight(e: WheelEvent) {
+function expandBottom() {
-  e.preventDefault();
-  console.log(e.ctrlKey);
-  const elem = albumbottomcards.value;
-  const pos = elem.offsetHeight + 100;
-
-  elem.style.height = `${pos}px`;
-}
-
-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%;