From 5acb8cb84d3c94e5e599fa643af32740628588c9 Mon Sep 17 00:00:00 2001 From: geoffrey45 Date: Thu, 30 Jun 2022 17:35:46 +0300 Subject: [PATCH] check if album colors have contrast - remove albumid field from album class - set accent color to $red --- server/app/api/album.py | 12 +++++- server/app/db/mongodb/albums.py | 4 +- server/app/lib/colorlib.py | 2 +- server/app/models.py | 2 - src/assets/css/_variables.scss | 2 +- src/components/AlbumView/Header.vue | 50 +++++++++++------------ src/components/LeftSidebar/Navigation.vue | 2 +- src/components/shared/PlayBtnRect.vue | 5 ++- src/composables/pages/album.ts | 1 + 9 files changed, 42 insertions(+), 38 deletions(-) diff --git a/server/app/api/album.py b/server/app/api/album.py index 64ed1da3..f4ec080e 100644 --- a/server/app/api/album.py +++ b/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 diff --git a/server/app/db/mongodb/albums.py b/server/app/db/mongodb/albums.py index 4999c146..eeceb6d0 100644 --- a/server/app/db/mongodb/albums.py +++ b/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}}, ) diff --git a/server/app/lib/colorlib.py b/server/app/lib/colorlib.py index e410d870..38f8e481 100644 --- a/server/app/lib/colorlib.py +++ b/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 diff --git a/server/app/models.py b/server/app/models.py index 3cb4d42b..fc24ed12 100644 --- a/server/app/models.py +++ b/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"] diff --git a/src/assets/css/_variables.scss b/src/assets/css/_variables.scss index 52fe2039..caad1304 100644 --- a/src/assets/css/_variables.scss +++ b/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; diff --git a/src/components/AlbumView/Header.vue b/src/components/AlbumView/Header.vue index 7a016d2d..c5b7ea58 100644 --- a/src/components/AlbumView/Header.vue +++ b/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 > -
+
Soundtrack @@ -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(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; +} diff --git a/src/components/shared/PlayBtnRect.vue b/src/components/shared/PlayBtnRect.vue index 0d5f1b4f..0f9f6000 100644 --- a/src/components/shared/PlayBtnRect.vue +++ b/src/components/shared/PlayBtnRect.vue @@ -11,7 +11,7 @@