major refactors

- remove jpgs
- add new album header
- remove duplicate components
- display album bio on client
- add a route loader module
- change color scheme
- other minor changes

server/app/api.py

@@ -90,8 +90,6 @@ def get_album_artists(album, artist):
     artists = []
 
     for track in tracks:
-        print(track['artists'])
-
         for artist in track['artists']:
             if artist not in artists:
                 artists.append(artist)
@@ -100,7 +98,7 @@ def get_album_artists(album, artist):
     for artist in artists:
         artist_obj = {
             "name": artist,
-            "image": "http://127.0.0.1:8900/images/artists/" + artist.replace('/', '::') + ".jpg"
+            "image": "http://127.0.0.1:8900/images/artists/webp/" + artist.replace('/', '::') + ".webp"
         }
         final_artists.append(artist_obj)
 
@@ -245,17 +243,38 @@ def getAlbumSongs(query: str):
         if track['album'] == album and track['album_artist'] == artist:
             songs.append(track)
 
+    songs = helpers.remove_duplicates(songs)
+
     album_obj = {
         "name": album,
         "count": len(songs),
         "duration": sum(song['length'] for song in songs),
         "image": songs[0]['image'],
-        "artist": songs[0]['album_artist']
+        "artist": songs[0]['album_artist'],
+        "artist_image": "http://127.0.0.1:8900/images/artists/webp/" + songs[0]['album_artist'].replace('/', '::') + ".webp"
     }
 
-    return {'songs': helpers.remove_duplicates(songs), 'info': album_obj}
+    return {'songs': songs, 'info': album_obj}
 
 
 @bp.route('/album/<title>/<artist>/bio')
+@cache.cached()
 def drop_db(title, artist):
-    return functions.getAlbumBio(title, artist)
+    bio = functions.getAlbumBio(title, artist)
+    return {'bio': bio}
+
+
+@bp.route('/convert')
+def convert_images_to_webp():
+    path = os.path.join(home_dir, helpers.app_dir, 'images', 'artists')
+    final_path = os.path.join(
+        home_dir, helpers.app_dir, 'images', 'artists', 'webp')
+
+    for file in os.scandir(path):
+        if file.name.endswith(".jpg"):
+            print(file.name)
+            print(os.path.join(final_path, file.name.replace('.jpg', '.webp')))
+            img = helpers.Image.open(os.path.join(path, file.name)).resize((150, 150), helpers.Image.ANTIALIAS)
+            img.save(os.path.join(final_path, file.name.replace('.jpg', '.webp')), format='webp')
+
+    return "Done"

server/app/functions.py

@@ -60,7 +60,7 @@ def populate_images():
 
             try:
                 response = requests.get(url)
-            except:
+            except requests.ConnectionError:
                 print('\n sleeping for 5 seconds')
                 time.sleep(5)
                 response = requests.get(url)
@@ -225,16 +225,19 @@ def getTags(full_path: str) -> dict:
 def getAlbumBio(title: str, album_artist: str) -> dict:
     last_fm_url = 'http://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key={}&artist={}&album={}&format=json'.format(
         helpers.last_fm_api_key, album_artist, title)
-
+    
-    response = requests.get(last_fm_url)
-    data = response.json()
-
     try:
-        bio = data['album']['wiki']['content']
+        response = requests.get(last_fm_url)
+        data = response.json()
+    except requests.ConnectionError:
+        return "None"
+    
+    try:
+        bio = data['album']['wiki']['summary'].split('<a href="https://www.last.fm/')[0]
     except KeyError:
         bio = None
 
     if bio is None:
         return "None"
 
-    return {'data': data}
+    return bio

src/assets/css/_variables.scss

@@ -1,6 +1,6 @@
 // colors
 
-$card-dark: #000203;
+$card-dark: #08090C;
 $red: #df4646;
 $blue: rgb(5, 80, 150);
 $green: rgb(67, 148, 67);

src/assets/css/global.scss

@@ -36,6 +36,10 @@ a {
   color: #fff;
 }
 
+.border {
+  border: solid 1px rgba(39, 38, 38, 0.329);
+}
+
 .separator {
   border-top: 0.1px $separator solid;
   color: transparent;
@@ -46,6 +50,10 @@ a {
   border: none;
 }
 
+.card-dark {
+  background-color: $card-dark;
+}
+
 .hidden {
   display: none;
 }

src/components/AlbumView/AlbumBio.vue

@@ -1,88 +1,71 @@
 <template>
-  <div class="al-bio rounded">
+  <div class="al-bio rounded border card-dark">
-    <div class="heading">
+    <div class="left rounded border">
-      The Very Best Of UB40: ALBUM BIOGRAPHY
+      <div class="rect rounded"></div>
-      <div class="tags">
+      <div class="circle"></div>
-        <div class="item" v-for="tag in tags" :key="tag">
-          {{ tag }}
-        </div>
-      </div>
-    </div>
-    <div class="separator"></div>
-    <div class="content">
-      Two years after he prematurely left us, the Juice WRLD story continues
-      with Fighting Demons. The rapper's second posthumous album dropped at
-      midnight, and is the followup to Legends Never Die, which arrived in July
-      2020 and hit No. 1 on the Billboard 200 chart.
-      <br /><br />
-      Featuring the previously-released numbers “Wandered to LA” with Justin
-      Bieber, and “Already Dead,” Fighting Demons is a call to arms, a reminder
-      for addicts to get help and for those struggling with mental health
-      problems to keep up the fight. The rising hip-hop star (real name Jarad
-      Higgins) was just 21 when he died of an accidental overdose of oxycodone
-      and codeine. Following his death on Dec. 9, 2019, his mother, Carmela
-      Wallace, created the Live Free 999 Fund, to help youth struggling with
-      mental health and substance use issues.
-      <br /><br />
-      “Jarad was always searingly honest about his struggles and through his
-      musical genius he articulated what was on his heart and mind vividly
-      through his art. He never gave up and his friends and family never gave up
-      on offering their support to him,” she continued. “We encourage all of you
-      who struggle with addiction and mental health to never give up the fight."
-      Juice's fast rise in the hip-hop space and untimely passing is the focus
-      of Into the Abyss, a Tommy Oliver-directed documentary set to premiere
-      Dec. 16 at 8PM on HBO Max.
     </div>
+    <div class="bio rounded border" v-html="bio"></div>
   </div>
 </template>
 
 <script>
 export default {
-  setup() {
+  props: ['bio'],
-    const tags = ["reggea", "ub40", "ali campbell", "astro"];
-    return {
-      tags,
-    };
-  },
 };
 </script>
 
 <style lang="scss">
 .al-bio {
-  background-color: #1f1e1d;
   padding: $small;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: $small;
+  min-height: 15rem;
 
-  .heading {
+  .left {
-    margin: 0 0 0 $small;
-    height: 2rem;
     position: relative;
+    height: 100%;
+    width: 100%;
+    margin-right: $small;
+    overflow: hidden;
+    background-image: url("../../assets/images/eggs.jpg");
+    background-position: center;
 
-    .tags {
+    .rect {
+      width: 10rem;
+      height: 10rem;
       position: absolute;
-      right: 0;
+      background-color: rgb(196, 58, 58);
-      display: flex;
+      box-shadow: 0px 0px 2rem rgb(0, 0, 0);
-      font-weight: normal;
+      bottom: -10rem;
+      left: 7rem;
+      transform: rotate(45deg) translate(-1rem, -9rem);
+      z-index: 1;
+      transition: all .5s ease-in-out;
 
-      .item {
+      &:hover {
-        padding: $small;
+        transition: all .5s ease-in-out;
-        background-color: rgb(15, 74, 114);
-        margin-left: $small;
-        border-radius: $small;
-      }
-      .item::before {
-        content: "#"
       }
     }
-  }
 
-  .content {
+    .circle {
-    display: inline-block;
+      width: 7rem;
+      height: 7rem;
+      position: absolute;
+      right: 0;
+      background-color: $blue;
+      border-radius: 50%;
+      transform: translateX(-11rem) translateY(7rem);
+      box-shadow: 0px 0px 2rem rgb(0, 0, 0);
+    }
+  }
+  .bio {
+    padding: $small;
     line-height: 1.5rem;
-    font-size: large;
+
-    columns: 2;
+    &::after {
-    column-rule: 1px solid $separator;
+      content: "...";
-    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
+    }
-    user-select: text;
   }
 }
 </style>

src/components/AlbumView/FromTheSameArtist.vue

@@ -1,241 +0,0 @@
-<template>
-  <div class="f-a-artists">
-    <div class="xcontrols">
-      <div class="prev" @click="scrollLeftX"></div>
-      <div class="next" @click="scrollRightX"></div>
-    </div>
-    <div class="artists" ref="artists_dom" v-on:mouseover="say">
-      <div class="artist c1">
-        <div class="blur"></div>
-        <div class="s2"></div>
-        <p>From The Same Artists</p>
-      </div>
-      <div class="artist" v-for="album in albums" :key="album">
-        <div>
-          <div class="artist-image rounded"></div>
-          <p class="artist-name ellipsis">{{ album }}</p>
-          <div class="a-circle"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { ref } from "@vue/reactivity";
-
-export default {
-  setup() {
-    const albums = [
-      "Michael John Montgomery",
-      "2",
-      "3",
-      "4",
-      "5",
-      "6",
-      "7",
-      "8",
-      "9",
-      "10",
-      "11",
-    ];
-
-    const artists_dom = ref(null);
-
-    const scrollLeftX = () => {
-      const dom = artists_dom.value;
-      dom.scrollBy({
-        left: -700,
-        behavior: "smooth",
-      });
-    };
-
-    const scrollRightX = () => {
-      const dom = artists_dom.value;
-      dom.scrollBy({
-        left: 700,
-        behavior: "smooth",
-      });
-    };
-
-    const scroll = (e) => {
-      artists_dom.value.scrollBy({
-        left: e.deltaY < 0 ? -700 : 700,
-        behavior: "smooth",
-      });
-    };
-
-    const say = () => {
-      artists_dom.value.addEventListener("wheel", (e) => {
-        e.preventDefault();
-        scroll(e);
-      });
-    };
-
-    return {
-      albums,
-      artists_dom,
-      say,
-      scrollLeftX,
-      scrollRightX,
-    };
-  },
-};
-</script>
-
-<style lang="scss">
-.f-a-artists {
-  position: relative;
-  height: 14em;
-  width: calc(100%);
-  background-color: #1f1e1d;
-  padding: $small;
-  border-radius: $small;
-  user-select: none;
-}
-
-.f-a-artists .xcontrols {
-  z-index: 1;
-  width: 5rem;
-  height: 2rem;
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  display: flex;
-  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;
-    background-color: rgb(79, 80, 80);
-    border-radius: $small;
-    cursor: pointer;
-    transition: all 0.5s ease;
-  }
-
-  .next:hover,
-  .prev:hover {
-    background-color: rgb(3, 1, 1);
-    transition: all 0.5s ease;
-  }
-}
-
-.f-a-artists .artists {
-  position: absolute;
-  bottom: 1em;
-  width: calc(100% - 1em);
-  height: 13em;
-  display: flex;
-  align-items: flex-end;
-  flex-wrap: nowrap;
-  overflow-x: scroll;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-.f-a-artists .artist {
-  flex: 0 0 auto;
-  overflow: hidden;
-  position: relative;
-  margin-left: $smaller;
-  margin-right: $smaller;
-  width: 9em;
-  height: 10em;
-  border-radius: $small;
-  background-color: #064e92;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.5s ease-in-out;
-  cursor: pointer;
-
-  .artist-image {
-    width: 7em;
-    height: 7em;
-    margin-left: 0.5em;
-    margin-bottom: $small;
-    background: no-repeat center/cover url(../../assets/images/girl4.jpg);
-  }
-
-  .artist-name {
-    margin: 0;
-    text-align: center;
-    font-size: small;
-    width: 10em;
-  }
-  &:hover {
-    transform: translateY(-0.5em);
-    transition: all 0.5s ease-in-out;
-  }
-}
-
-.f-a-artists .c1 {
-  position: relative;
-  background: rgb(145, 42, 56);
-  width: 15em;
-  overflow: hidden;
-  margin-left: -0.1rem;
-
-  background: linear-gradient(239deg, #704bca, #d77422, #064e92, #9cb0c3);
-  background-size: 800% 800%;
-
-  -webkit-animation: similarAlbums 29s ease infinite;
-  -moz-animation: similarAlbums 29s ease infinite;
-  -o-animation: similarAlbums 29s ease infinite;
-  animation: similarAlbums 29s ease infinite;
-
-  &:hover > .s2 {
-    transition: all 0.5s ease;
-    background: rgba(53, 53, 146, 0.8);
-    width: 12em;
-    height: 12em;
-  }
-
-  p {
-    position: absolute;
-    bottom: -2rem;
-    margin-left: 0.5rem;
-    z-index: 1;
-    font-size: 2rem;
-    font-weight: 700;
-    color: #ffffff;
-  }
-
-  .blur {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0);
-    backdrop-filter: blur(40px);
-    -webkit-backdrop-filter: blur(40px);
-    -moz-backdrop-filter: blur(40px);
-    border-radius: $small;
-  }
-
-  .s2 {
-    position: absolute;
-    display: n;
-    right: -3em;
-    bottom: -3em;
-    width: 10em;
-    height: 10em;
-    background: rgba(53, 53, 146, 0.445);
-    border-radius: 50%;
-    transition: all 0.5s ease;
-  }
-}
-</style>

src/components/AlbumView/Header.vue

@@ -1,96 +1,143 @@
 <template>
-  <div class="a-header rounded">
+  <div class="album-h">
-    <div
+    <div class="a-header rounded card-dark">
-      class="art rounded"
+      <div
-      :style="{
+        class="art rounded border"
-        backgroundImage: `url(&quot;${album_info.image}&quot;)`,
+        :style="{
-      }"
+          backgroundImage: `url(&quot;${album_info.image}&quot;)`,
-    ></div>
+        }"
-    <div class="info">
+      ></div>
-      <div class="top">
+      <div class="info">
-        <div class="title">{{ album_info.name }}</div>
+        <div class="top">
-        <div class="artist">{{ album_info.artist }}</div>
+          <div class="title">{{ album_info.name }}</div>
-      </div>
+          <div class="artist">{{ album_info.artist }}</div>
-      <div class="separator"></div>
+        </div>
-      <div class="bottom">
+        <div class="separator"></div>
-        <div class="stats">
+        <div class="bottom">
-          {{ album_info.count }} Tracks • {{ album_info.duration }} • 2021
+          <div class="stats">
+            {{ album_info.count }} Tracks • {{ album_info.duration }} • 2021
+          </div>
+          <button class="play rounded" @click="playAlbum">
+            <div class="icon"></div>
+            <div>Play</div>
+          </button>
         </div>
-        <button class="play rounded" @click="playAlbum">
-          <div class="icon"></div>
-          <div>Play</div>
-        </button>
       </div>
     </div>
-    <!-- <div class="most-played">
+    <div class="right rounded card-dark">
-      <div class="art image rounded"></div>
+      <div class="circle circular"></div>
-      <div>
+      <div class="rect rounded"></div>
-        <div class="title">Girl Of My Dreams</div>
+      <div
-        <div class="artist">Juice Wrld, Suga [BTS]</div>
+        class="avatar image"
-      </div>
+        :style="{
-    </div> -->
+          backgroundImage: `url(&quot;${album_info.artist_image}&quot;)`,
+        }"
+      ></div>
+    </div>
   </div>
 </template>
 
 <script>
-import state from "@/composables/state.js"
+import state from "@/composables/state.js";
-import perks from "@/composables/perks.js"
+import perks from "@/composables/perks.js";
 
 export default {
   props: ["album_info"],
   setup() {
     function playAlbum() {
-      perks.updateQueue(state.album_song_list.value[0], "album")
+      perks.updateQueue(state.album_song_list.value[0], "album");
     }
     return {
-      playAlbum
+      playAlbum,
-    }
+    };
   },
 };
 </script>
 
 <style lang="scss">
+.album-h {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: $small;
+  position: relative;
+  overflow: hidden;
+
+  .right {
+    padding: $small;
+    position: relative;
+
+    .avatar {
+      height: 8rem;
+      width: 8rem;
+      border-radius: 50%;
+      background-image: url("../../assets/images/null.webp");
+      position: absolute;
+      left: -4.2rem;
+      top: 3rem;
+      box-shadow: 0px 0px 1.5rem rgb(0, 0, 0);
+
+    }
+
+    .rect {
+      width: 20rem;
+      height: 10rem;
+      position: absolute;
+      right: 0;
+      background-color: rgb(196, 58, 58);
+      transform: rotate(-45deg) translate(20%, -50%);
+      z-index: 1;
+      box-shadow: 0px 0px 2rem rgb(0, 0, 0);
+      transition: all .5s ease-in-out;
+
+      &:hover {
+        transition: all .5s ease-in-out;
+
+        right: 2rem;
+      }
+
+    }
+
+    .circle {
+      width: 7rem;
+      height: 7rem;
+      position: absolute;
+      right: 0;
+      background-color: $blue;
+      border-radius: 50%;
+      transform: translateX(-11rem) translateY(7rem);
+      box-shadow: 0px 0px 2rem rgba(0, 0, 0, 0.164);
+      transition: all .5s ease-in-out;
+
+      &:hover {
+        transition: all .5s ease-in-out;
+
+        right: 1rem;
+      }
+    }
+
+    &:hover {
+      transition: all .5s ease-in-out;
+
+      .circle {
+        border-radius: 0;
+        transform: translateX(-11rem) translateY(7rem) rotate(360deg);
+      }
+
+      .rect {
+        border-radius: 0;
+        transform: translate(20%, -50%) rotate(360deg);
+      }
+    }
+  }
+}
 .a-header {
   position: relative;
   height: 14rem;
-  background: $card-dark;
-
-  backdrop-filter: blur(40px);
   overflow: hidden;
-
   display: flex;
   align-items: center;
   padding: 0 1rem 0 1rem;
 
-  .most-played {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    padding: 0 0 0 $small;
-    background-color: rgb(24, 24, 24);
-    border-radius: 1rem;
-    right: 1rem;
-    bottom: 1rem;
-    width: 25rem;
-    height: 5rem;
-
-    .art {
-      width: 4rem;
-      height: 4rem;
-      background-image: url(../../assets/images/jw.jpeg);
-    }
-
-    .title {
-      margin-left: $small;
-      margin-bottom: $small;
-    }
-
-    .artist {
-      font-size: small;
-      margin-left: $small;
-    }
-  }
-
   .art {
     width: 12rem;
     height: 12rem;
@@ -107,7 +154,7 @@ export default {
 
     .top {
       .title {
-        font-size: 2rem;
+        font-size: 1.5rem;
         font-weight: bold;
         color: white;
       }

src/components/AlbumsExplorer/AlbumList.vue

@@ -164,7 +164,7 @@ export default {
       .album-art {
         height: 9em;
         width: 9em;
-        background-image: url(../../assets/images/girl1.jpg);
+        background-image: url(../../assets/images/null.webp);
       }
 
       .name {

src/components/AlbumsExplorer/TopAlbums.vue

@@ -85,7 +85,7 @@ export default {
       .image {
         height: 7rem;
         width: 7rem;
-        background-image: url(../../assets/images/girl1.jpg);
+        background-image: url(../../assets/images/null.webp);
         border-radius: $small;
       }
 
@@ -144,7 +144,7 @@ export default {
         background-color: rgb(177, 116, 2);
 
         .image {
-          background-image: url(../../assets/images/girl2.jpg);
+          background-image: url(../../assets/images/null.webp);
         }
       }
 
@@ -152,7 +152,7 @@ export default {
         background-color: rgb(0, 74, 117);
 
         .image {
-          background-image: url(../../assets/images/girl3.jpg);
+          background-image: url(../../assets/images/null.webp);
         }
       }
 

src/components/ArtistsExplorer/ArtistsList.vue

@@ -81,7 +81,7 @@ export default {
         height: 9em;
         width: 9em;
         border-radius: 50%;
-        background-image: url(../../assets/images/girl1.jpg);
+        background-image: url(../../assets/images/null.webp);
       }
 
       .name {

src/components/ArtistsExplorer/TopArtists.vue

@@ -81,7 +81,7 @@ export default {
       .image {
         height: 7rem;
         width: 7rem;
-        background-image: url(../../assets/images/girl1.jpg);
+        background-image: url("../../assets/images/null.webp");
         border-radius: 50%;
       }
 
@@ -140,7 +140,7 @@ export default {
         background-color: rgb(177, 116, 2);
 
         .image {
-          background-image: url(../../assets/images/girl2.jpg);
+          background-image: url("../../assets/images/null.webp");
         }
       }
 
@@ -148,7 +148,7 @@ export default {
         background-color: rgb(0, 74, 117);
 
         .image {
-          background-image: url(../../assets/images/girl3.jpg);
+          background-image: url("../../assets/images/null.webp");
         }
       }
 

src/components/FolderView/SongList.vue

@@ -36,10 +36,10 @@ import { ref } from "@vue/reactivity";
 import { onMounted } from "@vue/runtime-core";
 
 import SongItem from "../SongItem.vue";
-import album from "@/composables/album.js";
+import routeLoader from "@/composables/routeLoader.js";
 import perks from "@/composables/perks.js";
 import state from "@/composables/state.js";
-import { useRouter, useRoute } from "vue-router";
+import { useRoute } from "vue-router";
 
 export default {
   props: ["songs"],
@@ -51,7 +51,7 @@ export default {
 
     const current = ref(perks.current);
     const search_query = ref(state.search_query);
-    const route = useRouter();
+    // const route = useRouter();
 
     onMounted(() => {
       routex = useRoute().name;
@@ -73,21 +73,24 @@ export default {
     }
 
     function loadAlbum(title, album_artist) {
-      state.loading.value = true;
+      // console.log(typeof(title), album_artist)
+      routeLoader.toAlbum(title, album_artist);
+      // state.loading.value = true;
 
-      album.getAlbumTracks(title, album_artist).then((data) => {
+      // album.getAlbumTracks(title, album_artist).then((data) => {
-        state.album_song_list.value = data.songs;
+      //   state.album_song_list.value = data.songs;
-        state.album_info.value = data.info;
+      //   state.album_info.value = data.info;
+
+      //   route.push({
+      //     name: "AlbumView",
+      //     params: {
+      //       album: title,
+      //       artist: album_artist,
+      //     },
+      //   });
+      //   state.loading.value = false;
+      // });
 
-        route.push({
-          name: "AlbumView",
-          params: {
-            album: title,
-            artist: album_artist,
-          },
-        });
-        state.loading.value = false;
-      });
     }
 
     return {

src/components/PlaylistView/FeaturedArtists.vue

@@ -1,16 +1,16 @@
 <template>
-  <div class="f-artists">
+  <div class="f-artists border">
     <div class="xcontrols">
-      <div class="prev" @click="scrollLeft"></div>
+      <div class="prev border" @click="scrollLeft"></div>
-      <div class="next" @click="scrollRight"></div>
+      <div class="next border" @click="scrollRight"></div>
     </div>
-    <div class="artists" ref="artists_dom" v-on:mouseover="scrollArtists">
+    <div class="artists" ref="artists_dom">
-      <div class="artist c1 image">
+      <div class="artist border c1 image">
         <div class="blur"></div>
         <div class="s2"></div>
         <p>Featured Artists</p>
       </div>
-      <div class="artist" v-for="artist in artists" :key="artist">
+      <div class="artist border" v-for="artist in artists" :key="artist">
         <div>
           <div
             class="artist-image image"
@@ -47,23 +47,8 @@ export default {
       });
     };
 
-    const scroll = (e) => {
-      artists_dom.value.scrollBy({
-        left: e.deltaY < 0 ? -700 : 700,
-        behavior: "smooth",
-      });
-    };
-
-    const scrollArtists = () => {
-      artists_dom.value.addEventListener("wheel", (e) => {
-        e.preventDefault();
-        scroll(e);
-      });
-    };
-
     return {
       artists_dom,
-      scrollArtists,
       scrollLeft,
       scrollRight,
     };
@@ -145,24 +130,23 @@ export default {
   width: 9em;
   height: 11em;
   border-radius: $small;
-  background-color: #0f0e0e;
+  background-color: #232452;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  border: solid 1px rgba(165, 151, 151, 0.055);
 
   .artist-image {
     width: 7em;
     height: 7em;
     border-radius: 50%;
     margin-bottom: $small;
-    background: url(../../assets/images/girl1.jpg);
+    background: url("../../assets/images/null.webp");
     background-size: 7rem 7rem;
     background-repeat: no-repeat;
     background-position: center;
-    transition: all 0.75s ease-in-out;
+    transition: all 0.5s ease-in-out;
-    border: solid 1px rgba(165, 151, 151, 0.055);
+    border: solid 1px rgba(5, 5, 5, 0.055);
     box-shadow: 0px 0px 80px rgb(0, 0, 0);
   }
 
@@ -190,15 +174,15 @@ export default {
 
   background-image: linear-gradient(
     320deg,
-    hsl(0deg 3% 6%) 13%,
+    #b63939 13%,
-    hsl(211deg 81% 23%) 50%,
+    #232452 50%,
-    hsl(209deg 94% 30%) 87%
+    #232452 100%
   );
 
-  transition: all 0.75s ease-in-out;
+  transition: all 0.5s ease-in-out;
 
   &:hover {
-    background-position: 10%;
+    background-position: 0%;
   }
 
   p {

src/components/PlaylistView/Header.vue

@@ -70,7 +70,7 @@
 .p-header .banner {
   margin: 0.5rem;
   background-color: $blue;
-  background: url(../../assets/images/girl5.jpg);
+  background: url("../../assets/images/null.webp");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
@@ -161,7 +161,7 @@
   right: 0.5em;
   bottom: 0em;
   background-color: $red;
-  background-image: url(../../assets/images/girl2.jpg);
+  background-image: url("../../assets/images/null.webp");
 }
 
 .p-header .info .albums .second {
@@ -170,7 +170,7 @@
   right: 4em;
   bottom: -1em !important;
   background-color: $green;
-  background-image: url(../../assets/images/girl1.jpg);
+  background-image: url("../../assets/images/null.webp");
   z-index: 1;
 }
 
@@ -180,7 +180,7 @@
   bottom: -1em;
   right: 9em;
   background-color: $green;
-  background-image: url(../../assets/images/girl3.jpg);
+  background-image: url("../../assets/images/null.webp");
   z-index: 2;
 }
 

src/components/Search.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="right-search" ref="searchComponent">
+  <div class="right-search  border" ref="searchComponent">
     <div class="input">
       <div class="search-icon image"></div>
       <div class="filter">
@@ -424,7 +424,7 @@ export default {
       background-color: rgb(27, 150, 74);
       border-radius: 0.5rem;
       margin: 0 $small 0 $small;
-      background-image: url(../assets/images/girl3.jpg);
+      background-image: url(../assets/images/null.webp);
     }
 
     .tags .artist {

src/composables/album.js

@@ -38,7 +38,27 @@ const getAlbumArtists = async (name, artist) => {
   return data.artists;
 };
 
+const getAlbumBio = async(name, artist) => {
+  const res = await fetch(
+    base_uri + 
+    "/album/" +
+    encodeURIComponent(name.replaceAll("/", "|")) +
+    "/" +
+    encodeURIComponent(artist.replaceAll("/", "|")) +
+    "/bio"
+  );
+
+  if (!res.ok) {
+    const message = `An error has occured: ${res.status}`;
+    throw new Error(message);
+  }
+
+  const data = await res.json();
+  return data.bio;
+};
+
 export default {
   getAlbumTracks,
   getAlbumArtists,
+  getAlbumBio
 };

src/composables/routeLoader.js

@@ -0,0 +1,43 @@
+import Router from "@/router";
+
+import album from "./album.js";
+import state from "./state.js";
+
+function toAlbum(title, artist) {
+  album
+    .getAlbumTracks(title, artist)
+    .then((data) => {
+      state.album_song_list.value = data.songs;
+      state.album_info.value = data.info;
+    })
+    .then(
+      album.getAlbumArtists(title, artist).then((data) => {
+        state.album_artists.value = data;
+      })
+    )
+    .then(
+      album.getAlbumBio(title, artist).then((data) => {
+        if (data == "None") {
+          state.album_bio.value = null;
+        } else {
+          state.album_bio.value = data;
+        }
+      })
+    )
+    .then(
+      Router.push({
+        name: "AlbumView",
+        params: {
+          album: title,
+          artist: artist,
+        },
+      })
+    )
+    .catch((error) => {
+      console.log(error);
+    });
+}
+
+export default {
+  toAlbum,
+};

src/composables/state.js

@@ -36,6 +36,8 @@ const prev = ref({
 const album_song_list = ref([]);
 const album_info = ref([]);
 const album_artists = ref([]);
+const album_bio = ref("");
+
 const filters = ref([]);
 
 const magic_flag = ref(false);
@@ -64,4 +66,5 @@ export default {
   album_song_list,
   album_info,
   album_artists,
+  album_bio,
 };

src/views/AlbumView.vue

@@ -10,32 +10,29 @@
     <div class="separator" id="av-sep"></div>
     <FeaturedArtists :artists="artists" />
     <div class="separator" id="av-sep"></div>
-    <AlbumBio />
+    <AlbumBio :bio="bio" v-if="bio"/>
     <div class="separator" id="av-sep"></div>
-    <FromTheSameArtist />
   </div>
 </template>
 
 <script>
 import { useRoute } from "vue-router";
 import { onMounted } from "@vue/runtime-core";
+import { onUnmounted } from "@vue/runtime-core";
 
 import Header from "../components/AlbumView/Header.vue";
 import AlbumBio from "../components/AlbumView/AlbumBio.vue";
-import FromTheSameArtist from "../components/AlbumView/FromTheSameArtist.vue";
 
 import SongList from "../components/FolderView/SongList.vue";
 import FeaturedArtists from "../components/PlaylistView/FeaturedArtists.vue";
 
-import album from "@/composables/album.js";
 import state from "@/composables/state.js";
-import { onUnmounted } from "@vue/runtime-core";
+import routeLoader from "@/composables/routeLoader.js"
 
 export default {
   components: {
     Header,
     AlbumBio,
-    FromTheSameArtist,
     SongList,
     FeaturedArtists,
   },
@@ -46,18 +43,7 @@ export default {
 
     onMounted(() => {
       if (!state.album_song_list.value.length) {
-        album.getAlbumTracks(title, album_artists).then((data) => {
+        routeLoader.toAlbum(title, album_artists);
-          state.album_song_list.value = data.songs;
-          state.album_info.value = data.info;
-
-          state.loading.value = false;
-        });
-      }
-
-      if (state.album_artists.value.length == 0) {
-        album.getAlbumArtists(title, album_artists).then((data) => {
-          state.album_artists.value = data;
-        });
       }
     });
 
@@ -65,12 +51,14 @@ export default {
       state.album_song_list.value = [];
       state.album_info.value = {};
       state.album_artists.value = [];
+      state.album_bio.value = "";
     });
 
     return {
       album_songs: state.album_song_list,
       album_info: state.album_info,
       artists: state.album_artists,
+      bio: state.album_bio,
     };
   },
 };

src/views/PlaylistView.vue

@@ -3,7 +3,7 @@
   <div class="p-bg rounded">
     <div class="clip">
       <div class="scrollable">
-        <SongList />
+        <SongList :songs="songs"/>
       </div>
     </div>
     <div class="f-artists-p">
@@ -24,7 +24,9 @@ export default {
     FeaturedArtists,
   },
   setup() {
-    return {};
+    return {
+      songs: [],
+    };
   },
 };
 </script>