add colors to album page header

- add colors attribute to the album class
- render color gradient in the album page

server/app/db/mongodb/albums.py

@@ -2,6 +2,7 @@
 This file contains the Album class for interacting with
 album documents in MongoDB.
 """
+from typing import List
 from app.db.mongodb import convert_many
 from app.db.mongodb import convert_one
 from app.db.mongodb import MongoAlbums
@@ -59,3 +60,12 @@ 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:
+        """
+        Sets the colors for an album.
+        """
+        self.collection.update_one(
+            {"_id": ObjectId(album_id)},
+            {"$set": {"colors": colors}},
+        )

server/app/functions.py

@@ -15,6 +15,7 @@ from app.lib.albumslib import ValidateAlbumThumbs
 from app.lib import trackslib
 from app.lib.populate import CreateAlbums, Populate
 from app.lib.playlistlib import ValidatePlaylistThumbs
+from app.lib.colorlib import ProcessAlbumColors
 
 
 @helpers.background
@@ -23,7 +24,7 @@ def run_checks():
     Checks for new songs every 5 minutes.
     """
 
-    # while True:
+    while True:
         trackslib.validate_tracks()
 
         Populate()
@@ -34,6 +35,9 @@ def run_checks():
 
         ValidateAlbumThumbs()
         ValidatePlaylistThumbs()
+        ProcessAlbumColors()
+
+        time.sleep(300)
 
 
 @helpers.background

server/app/lib/colorlib.py

@@ -1,17 +1,19 @@
-from io import BytesIO
-
 import colorgram
-from app import api
 from app import instances
-from app.lib.taglib import return_album_art
-from PIL import Image
-from progress.bar import Bar
 
 
-def get_image_colors(image) -> list:
+from app.helpers import Get
+from app import settings
+from app.models import Album
+from app.logger import get_logger
+
+log = get_logger()
+
+
+def get_image_colors(image: str) -> list:
     """Extracts 2 of the most dominant colors from an image."""
     try:
-        colors = sorted(colorgram.extract(image, 2), key=lambda c: c.hsl.h)
+        colors = sorted(colorgram.extract(image, 4), key=lambda c: c.hsl.h)
     except OSError:
         return []
 
@@ -24,30 +26,25 @@ def get_image_colors(image) -> list:
     return formatted_colors
 
 
-def save_track_colors(img, filepath) -> None:
+class ProcessAlbumColors:
-    """Saves the track colors to the database"""
+    def __init__(self) -> None:
+        log.info("Processing album colors")
+        all_albums = Get.get_all_albums()
 
-    track_colors = get_image_colors(img)
+        all_albums = [a for a in all_albums if len(a.colors) == 0]
 
-    tc_dict = {
+        for a in all_albums:
-        "filepath": filepath,
+            self.process_color(a)
-        "colors": track_colors,
-    }
 
-    instances.track_color_instance.insert_track_color(tc_dict)
+        log.info("Processing album colors ... ✅")
 
+    @staticmethod
+    def process_color(album: Album):
+        img = settings.THUMBS_PATH + "/" + album.image
 
-def save_t_colors():
+        colors = get_image_colors(img)
-    _bar = Bar("Processing image colors", max=len(api.DB_TRACKS))
 
-    for track in api.DB_TRACKS:
+        if len(colors) > 0:
-        filepath = track["filepath"]
+            instances.album_instance.set_album_colors(colors, album.albumid)
-        album_art = return_album_art(filepath)
 
-        if album_art is not None:
+        return colors
-            img = Image.open(BytesIO(album_art))
-            save_track_colors(img, filepath)
-
-        _bar.next()
-
-    _bar.finish()

server/app/models.py

@@ -82,6 +82,7 @@ class Album:
     Creates an album object
     """
 
+    albumid: str
     title: str
     artist: str
     hash: str
@@ -92,14 +93,21 @@ class Album:
     is_soundtrack: bool = False
     is_compilation: bool = False
     is_single: bool = False
+    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"]
         self.image = tags["image"]
         self.hash = tags["hash"]
 
+        try:
+            self.colors = tags["colors"]
+        except KeyError:
+            self.colors = []
+
     @property
     def is_soundtrack(self) -> bool:
         keywords = ["motion picture", "soundtrack"]

src/components/AlbumView/Header.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="album-h" ref="albumheaderthing">
-    <div class="a-header rounded">
+    <div
+      class="a-header rounded"
+      :style="{
+        backgroundImage: `linear-gradient(
+        37deg, ${album.colors[0]}, ${album.colors[3]}
+      )`,
+      }"
+    >
       <div class="art">
         <div
           class="image shadow-lg rounded"
@@ -18,7 +25,9 @@
             <span v-else-if="album.is_single">Single</span>
             <span v-else>Album</span>
           </div>
-          <div class="title ellip">{{ album.title }}</div>
+          <div class="title ellip">
+            {{ album.title }}
+          </div>
         </div>
         <div class="bottom">
           <div class="stats">
@@ -67,7 +76,6 @@ useVisibility(albumheaderthing, nav.toggleShowPlay);
   padding: 1rem;
   height: 100%;
   background-color: $black;
-  background-color: #000000;
   background-image: linear-gradient(37deg, $black 20%, $gray, $black 90%);
 
   .art {

src/interfaces.ts

@@ -15,7 +15,7 @@ export interface Track {
   image: string;
   tracknumber?: number;
   disknumber?: number;
-  index?: number
+  index?: number;
 }
 
 export interface Folder {
@@ -27,6 +27,7 @@ export interface Folder {
 }
 
 export interface AlbumInfo {
+  albumid: string;
   title: string;
   artist: string;
   count: number;
@@ -36,7 +37,8 @@ export interface AlbumInfo {
   is_compilation: boolean;
   is_soundtrack: boolean;
   is_single: boolean;
-  hash: string
+  hash: string;
+  colors: string[];
 }
 
 export interface Artist {

src/views/AlbumView.vue

@@ -20,7 +20,6 @@
         <AlbumBio :bio="album.bio" />
       </div>
       </div>
-     
     </div>
   </div>
 </template>