improve look of the folder item card

server/app/functions.py

@@ -52,8 +52,27 @@ def populate():
     )
 
 
+def fetch_image_path(artist: str) -> str or None:
+    """
+    Returns a direct link to an artist artist
+    """
+
+    try:
+        url = f"https://api.deezer.com/search/artist?q={artist}"
+        response = requests.get(url)
+        data = response.json()
+
+        return data["data"][0]["picture_medium"]
+    except requests.exceptions.ConnectionError:
+        time.sleep(5)
+        return None
+    except IndexError:
+        return None
+
+
 def populate_images():
     """populates the artists images"""
+
     all_songs = instances.songs_instance.get_all_songs()
 
     artists = []
@@ -72,27 +91,11 @@ def populate_images():
         )
 
         if not os.path.exists(file_path):
+            img_path = fetch_image_path(artist)
 
-            def try_save_image():
-                url = "https://api.deezer.com/search/artist?q={}".format(artist)
-                response = requests.get(url)
-                data = response.json()
-
-                try:
-                    img_path = data["data"][0]["picture_medium"]
-                except:
-                    img_path = None
-
-                if img_path is not None:
-                    # save image as webp
-                    img = Image.open(BytesIO(requests.get(img_path).content))
-                    img.save(file_path, format="webp")
-
-            try:
-                try_save_image()
-            except requests.exceptions.ConnectionError:
-                time.sleep(5)
-                try_save_image()
+            if img_path is not None:
+                img = Image.open(BytesIO(requests.get(img_path).content))
+                img.save(file_path, format="webp")
 
         _bar.next()
 
@@ -266,7 +269,7 @@ def get_tags(full_path: str) -> dict:
         "date": parse_date_tag(audio)[:4],
         "tracknumber": parse_track_number(audio),
         "discnumber": parse_disk_number(audio),
-        "length": audio.info.length,
+        "length": round(audio.info.length),
         "bitrate": round(int(audio.info.bitrate) / 1000),
         "filepath": full_path.replace(helpers.home_dir, ""),
         "image": extract_thumb(full_path),
@@ -318,6 +321,6 @@ def create_track_class(tags):
         tags["genre"],
         tags["bitrate"],
         tags["image"],
-        tags['tracknumber'],
-        tags['discnumber'],
+        tags["tracknumber"],
+        tags["discnumber"],
     )

src/components/FolderView/FolderItem.vue

@@ -0,0 +1,74 @@
+<template>
+  <router-link
+    :to="{ name: 'FolderView', params: { path: props.folder.path } }"
+  >
+    <div class="f-item border rounded">
+      <div class="icon image"></div>
+      <div class="info">
+        <div class="f-item-text ellip">{{ props.folder.name }}</div>
+        <div class="separator no-border"></div>
+        <div class="f-item-count">{{ props.folder.count }} tracks</div>
+      </div>
+    </div>
+  </router-link>
+</template>
+
+<script setup>
+const props = defineProps({
+  folder: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<style lang="scss">
+.f-container .f-item {
+  height: 5rem;
+  display: flex;
+  align-items: center;
+  position: relative;
+  background-color: #ffffff09;
+  transition: all 0.2s ease;
+
+  @include phone-only {
+    height: 4rem;
+  }
+
+  .icon {
+    background-image: url(../../assets/icons/folder.svg);
+    width: 2rem;
+    height: 1.5rem;
+    margin-right: 1rem;
+    margin-left: 1rem;
+  }
+
+  .info {
+    width: 100%;
+
+    .f-item-count {
+      font-size: 0.8rem;
+      color: rgba(219, 217, 217, 0.63);
+    }
+
+    .f-item-text {
+      text-align: left;
+    }
+  }
+
+  &:hover {
+    background: #0575e6; /* fallback for old browsers */
+    background: linear-gradient(
+      to top right,
+      #021b79,
+      #0575e6
+    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+    background-size: 105% 105%;  
+    background-position-x: -$small;
+
+    .f-item-count {
+      color: #ffffff;
+    }
+  }
+}
+</style>

src/components/FolderView/FolderList.vue

@@ -1,29 +1,29 @@
 <template>
-  <div class="f-container rounded" :class="{ no_f: !folders.length }">
-    <div id="f-items" v-if="folders.length">
-      <router-link
-        :to="{ name: 'FolderView', params: { path: folder.path } }"
-        v-for="folder in folders"
+  <div class="f-container rounded" :class="{ no_f: !props.folders.length }">
+    <div id="f-items" v-if="props.folders.length">
+      <FolderItem
+        v-for="folder in props.folders"
         :key="folder"
-      >
-        <div class="f-item rounded">
-          <div class="f-item-text ellip">{{ folder.name }}</div>
-          <div class="f-item-count">{{ folder.count }} tracks</div>
-        </div>
-      </router-link>
+        :folder="folder"
+      />
     </div>
   </div>
 </template>
 
-<script>
-export default {
-  props: ["folders"],
-};
+<script setup>
+import FolderItem from "./FolderItem.vue";
+
+const props = defineProps({
+  folders: {
+    type: Array,
+    required: true,
+  },
+});
 </script>
 
 <style lang="scss">
 .f-container {
-  padding: $small 1rem 1rem 1rem;
+  padding: $small 0 $smaller 0;
 }
 
 .no_f {
@@ -33,8 +33,7 @@ export default {
 #f-items {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
-  grid-gap: 1rem;
-  gap: 1rem;
+  gap: $small;
 }
 
 .f-container p {
@@ -43,35 +42,4 @@ export default {
   color: rgba(255, 255, 255, 0.438);
   margin-bottom: 1rem;
 }
-
-.f-container .f-item {
-  min-height: 5rem;
-  display: flex;
-  align-items: center;
-  position: relative;
-  background-image: url(../../assets/icons/folder.svg);
-  background-repeat: no-repeat;
-  background-position: 1rem;
-  background-size: 1.5rem;
-  background-color: rgb(22, 36, 85);
-  transition: all 0.2s ease;
-
-  .f-item-count {
-    position: absolute;
-    top: 70%;
-    left: 3rem;
-    font-size: 0.8rem;
-    color: rgba(255, 255, 255, 0.5);
-  }
-
-  .f-item-text {
-    position: absolute;
-    left: 3rem;
-    text-align: left;
-  }
-}
-
-.f-container .f-item:hover {
-  background-color: $blue;
-}
-</style>
+</style>