Merge - fix search and add correct image path for album card (#52)

server/app/api/album.py

@@ -1,9 +1,12 @@
 """
 Contains all the album routes.
 """
+from typing import List
+
 from app import api
 from app import functions
 from app import helpers
+from app import models
 from app.lib import albumslib
 from app.lib import trackslib
 from flask import Blueprint
@@ -71,7 +74,7 @@ def get_albumartists():
     album = data["album"]
     artist = data["artist"]
 
-    tracks = []
+    tracks: List[models.Track] = []
 
     for track in api.TRACKS:
         if track.album == album and track.albumartist == artist:

server/app/helpers.py

@@ -99,7 +99,7 @@ def use_memoji():
     Returns a path to a random memoji image.
     """
     path = str(random.randint(0, 20)) + ".svg"
-    return settings.IMG_ARTIST_URI + "defaults/" + path
+    return "defaults/" + path
 
 
 def check_artist_image(image: str) -> str:
@@ -112,7 +112,7 @@ def check_artist_image(image: str) -> str:
                                        img_name)):
         return use_memoji()
     else:
-        return (settings.IMG_ARTIST_URI + img_name, )
+        return img_name
 
 
 class Timer:

src/components/shared/AlbumCard.vue

@@ -2,7 +2,7 @@
   <router-link
     :to="{
       name: 'AlbumView',
-      params: { album: album.album, artist: album.artist },
+      params: { album: album.title, artist: album.artist },
     }"
     class="result-item"
   >
@@ -10,20 +10,24 @@
       <div
         class="album-art image"
         :style="{
-          backgroundImage: `url(&quot;${album.image}&quot;)`,
+          backgroundImage: `url(&quot;${imguri + album.image}&quot;)`,
         }"
       ></div>
       <div class="play shadow-lg image"></div>
     </div>
-    <div class="title ellip">{{ album.album }}</div>
+    <div class="title ellip">{{ album.title }}</div>
     <div class="artistsx ellipsis">{{ album.artist }}</div>
   </router-link>
 </template>
 
-<script>
-export default {
-  props: ["album"],
-};
+<script setup lang="ts">
+import { AlbumInfo } from "../../interfaces";
+import { paths } from "../../config";
+
+const imguri = paths.images.thumb;
+defineProps<{
+  album: AlbumInfo;
+}>();
 </script>
 
 <style lang="scss">

src/components/shared/ArtistCard.vue

@@ -2,7 +2,7 @@
   <div class="xartist" :style="{ backgroundColor: `#${color}` }">
     <div
       class="artist-image image border-sm"
-      :style="{ backgroundImage: `url('${artist.image}')` }"
+      :style="{ backgroundImage: `url('${imguri + artist.image}')` }"
     ></div>
     <div>
       <p class="artist-name ellipsis">{{ artist.name }}</p>
@@ -10,10 +10,16 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: ["artist", "color"],
-};
+<script setup lang="ts">
+import { paths } from "../../config";
+
+const imguri = paths.images.artist;
+
+defineProps<{
+  artist: any;
+  color: string;
+}>();
+
 </script>
 
 <style lang="scss">
@@ -24,14 +30,13 @@ export default {
 
   min-width: 8.25em;
   height: 11em;
-  border-radius: .75rem;
+  border-radius: 0.75rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   cursor: pointer;
 
-
   .artist-image {
     width: 7em;
     height: 7em;
@@ -41,7 +46,7 @@ export default {
     background-position: center;
     background-repeat: no-repeat;
     transition: all 0.5s ease-in-out;
-    transition-delay: .25s;
+    transition-delay: 0.25s;
   }
 
   &:hover {