try new bottom components

server/app/lib/taglib.py

@@ -33,6 +33,7 @@ def extract_thumb(filepath: str, webp_path: str) -> bool:
     Extracts the thumbnail from an audio file. Returns the path to the thumbnail.
     """
     img_path = os.path.join(settings.THUMBS_PATH, webp_path)
+    tsize = settings.THUMB_SIZE
 
     if os.path.exists(img_path):
         return True
@@ -43,12 +44,12 @@ def extract_thumb(filepath: str, webp_path: str) -> bool:
         img = Image.open(BytesIO(album_art))
 
         try:
-            small_img = img.resize((250, 250), Image.ANTIALIAS)
+            small_img = img.resize((tsize, tsize), Image.ANTIALIAS)
             small_img.save(img_path, format="webp")
         except OSError:
             try:
                 png = img.convert("RGB")
-                small_img = png.resize((250, 250), Image.ANTIALIAS)
+                small_img = png.resize((tsize, tsize), Image.ANTIALIAS)
                 small_img.save(webp_path, format="webp")
             except:
                 return False

server/app/logger.py

@@ -1,8 +1,5 @@
 import logging
 
-from app.settings import logger
-
-
 class CustomFormatter(logging.Formatter):
 
     grey = "\x1b[38;20m"

server/app/settings.py

@@ -29,5 +29,9 @@ LAST_FM_API_KEY = "762db7a44a9e6fb5585661f5f2bdf23a"
 CPU_COUNT = multiprocessing.cpu_count()
 
 
-class logger:
-    enable = True
+THUMB_SIZE: int = 400
+"""
+The size of extracted in pixels
+"""
+
+LOGGER_ENABLE: bool = True

src/components/AlbumView/AlbumBio.vue

@@ -8,10 +8,10 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: ['bio'],
-};
+<script setup lang="ts">
+defineProps<{
+  bio: string;
+}>();
 </script>
 
 <style lang="scss">
@@ -48,7 +48,6 @@ export default {
       width: 10rem;
     }
 
-
     .rect {
       width: 10rem;
       height: 10rem;
@@ -59,10 +58,10 @@ export default {
       left: 7rem;
       transform: rotate(45deg) translate(-1rem, -9rem);
       z-index: 1;
-      transition: all .5s ease-in-out;
+      transition: all 0.5s ease-in-out;
 
       &:hover {
-        transition: all .5s ease-in-out;
+        transition: all 0.5s ease-in-out;
       }
     }
 

src/components/AlbumView/Header.vue

@@ -53,18 +53,17 @@ const imguri = paths.images.thumb;
 const nav = useNavStore();
 
 useVisibility(albumheaderthing, nav.toggleShowPlay);
-
-
 </script>
 
 <style lang="scss">
 .album-h {
-  height: 16rem;
+  height: auto;
 }
 
 .a-header {
   display: grid;
-  grid-template-columns: 15rem 1fr;
+  grid-template-columns: max-content 1fr;
+  gap: 1rem;
   padding: 1rem;
   height: 100%;
   background-color: $black;
@@ -79,8 +78,8 @@ useVisibility(albumheaderthing, nav.toggleShowPlay);
     align-items: flex-end;
 
     .image {
-      width: 14rem;
-      height: 14rem;
+      width: 15rem;
+      height: 15rem;
     }
   }
 

src/components/PlaylistView/FeaturedArtists.vue

@@ -3,56 +3,49 @@
     <div class="header">
       <div class="headin">Featured Artists</div>
       <div class="xcontrols">
-        <div class="prev" @click="scrollLeft"></div>
-        <div class="next" @click="scrollRight"></div>
+        <div class="expand rounded">
+          EXPAND
+        </div>
+        <div class="prev icon" @click="scrollLeft()"></div>
+        <div class="next icon" @click="scrollRight()"></div>
       </div>
     </div>
     <div class="separator no-border"></div>
     <div class="artists" ref="artists_dom">
       <ArtistCard
         v-for="artist in artists"
-        :key="artist"
+        :key="artist.image"
         :artist="artist"
         :color="'ffffff00'"
       />
     </div>
   </div>
 </template>
-<script>
+<script setup lang="ts">
 import { ref } from "@vue/reactivity";
 import ArtistCard from "@/components/shared/ArtistCard.vue";
-import { computed, reactive } from "vue";
+import { Artist } from "@/interfaces";
 
-export default {
-  props: ["artists"],
-  components: {
-    ArtistCard,
-  },
-  setup() {
-    const artists_dom = ref(null);
+defineProps<{
+  artists: Artist[];
+}>();
 
-    const scrollLeft = () => {
-      const dom = artists_dom.value;
-      dom.scrollBy({
-        left: -700,
-        behavior: "smooth",
-      });
-    };
+const artists_dom = ref(null);
 
-    const scrollRight = () => {
-      const dom = artists_dom.value;
-      dom.scrollBy({
-        left: 700,
-        behavior: "smooth",
-      });
-    };
+const scrollLeft = () => {
+  const dom = artists_dom.value;
+  dom.scrollBy({
+    left: -700,
+    behavior: "smooth",
+  });
+};
 
-    return {
-      artists_dom,
-      scrollLeft,
-      scrollRight,
-    };
-  },
+const scrollRight = () => {
+  const dom = artists_dom.value;
+  dom.scrollBy({
+    left: 700,
+    behavior: "smooth",
+  });
 };
 </script>
 
@@ -64,9 +57,9 @@ export default {
   padding-bottom: 0;
   border-radius: $small;
   user-select: none;
-  background: linear-gradient(0deg, transparent, $black);
+  // background: linear-gradient(0deg, transparent, $black);
   position: relative;
-  background-color: #ffffff00;
+  // background-color: #ffffff00;
 
   .header {
     display: flex;
@@ -85,40 +78,45 @@ export default {
 
 .f-artists .xcontrols {
   z-index: 1;
-  width: 5rem;
-  height: 2rem;
   position: absolute;
   top: 0;
   right: 0;
   display: flex;
+  gap: 1rem;
   justify-content: space-between;
 
-  &:hover {
-    z-index: 1;
-  }
-
-  .next {
-    background: url(../../assets/icons/right-arrow.svg) no-repeat center;
-  }
-
   .prev {
-    background: url(../../assets/icons/right-arrow.svg) no-repeat center;
     transform: rotate(180deg);
   }
-  .next,
-  .prev {
-    width: 2em;
-    height: 2em;
+  .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);
+
+    &:hover {
+      background-color: $blue;
+      transition: all 0.5s ease;
+    }
   }
 
-  .next:hover,
-  .prev:hover {
-    background-color: $blue;
-    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);
+    }
   }
 }
 

src/components/shared/SongItem.vue

@@ -130,7 +130,7 @@ function emitUpdate(track: Track) {
   -moz-user-select: none;
 
   @include tablet-landscape {
-    grid-template-columns: 1.5rem 1.5fr 1fr 1.5fr 2.5rem;
+    grid-template-columns: 1.5rem 1.5fr 1fr 1fr 2.5rem;
   }
 
   @include tablet-portrait {

src/views/AlbumView.vue

@@ -1,17 +1,26 @@
 <template>
   <div class="al-view rounded">
-    <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>
-    <FeaturedArtists :artists="album.artists" />
-    <div v-if="album.bio">
+    <div class="al-content">
+      <div>
+        <Header :album="album.info" />
+      </div>
       <div class="separator" id="av-sep"></div>
-      <AlbumBio :bio="album.bio" />
+      <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">
+        <div class="separator" id="av-sep"></div>
+        <AlbumBio :bio="album.bio" />
+      </div>
+      </div>
+     
     </div>
   </div>
 </template>
@@ -25,19 +34,45 @@ import FeaturedArtists from "../components/PlaylistView/FeaturedArtists.vue";
 
 import useAStore from "../stores/pages/album";
 import { onBeforeRouteUpdate } from "vue-router";
+import { ref } from "vue";
 
 const album = useAStore();
+const albumbottomcards = ref<HTMLElement>(null);
 
 onBeforeRouteUpdate(async (to) => {
   await album.fetchTracksAndArtists(to.params.hash.toString());
   album.fetchBio(to.params.hash.toString());
 });
+
+function increaseBottomHeight(e: WheelEvent) {
+  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`;
+}
 </script>
 
 <style lang="scss">
 .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;
+  }
 
   .songs {
     min-height: calc(100% - 31.5rem);
@@ -50,5 +85,20 @@ onBeforeRouteUpdate(async (to) => {
   #av-sep {
     border: none;
   }
+
+  #bottom-items {
+    z-index: 77;
+    padding: $small;
+    // border: solid red;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 15rem;
+    max-height: 35rem;
+    overflow: hidden;
+    background-color: $gray;
+    transition: all 0.5s ease;
+    overscroll-behavior: contain;
+  }
 }
 </style>