From cdab85912f115ce1cf66b40b240b32b3270ce2d8 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Sun, 10 Jul 2022 21:51:29 +0300
Subject: [PATCH] redesign the album bio component

---
 src/assets/css/global.scss             |  4 ++
 src/components/AlbumView/AlbumBio.vue  | 63 +++++++++++++++++---------
 src/components/AlbumView/Header.vue    |  2 +-
 src/components/FolderView/SongList.vue |  2 +-
 src/router/index.js                    |  1 +
 src/stores/pages/album.ts              |  2 +-
 src/views/album/Bottom.vue             |  7 ++-
 src/views/album/index.vue              | 12 ++++-
 8 files changed, 63 insertions(+), 30 deletions(-)

diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss
index c014ff6..5cd5d38 100644
--- a/src/assets/css/global.scss
+++ b/src/assets/css/global.scss
@@ -58,6 +58,10 @@ a {
   overflow: hidden;
 }
 
+.grid {
+  display: grid;
+}
+
 .card-dark {
   background-color: #fff;
 }
diff --git a/src/components/AlbumView/AlbumBio.vue b/src/components/AlbumView/AlbumBio.vue
index e4063e2..6de51d2 100644
--- a/src/components/AlbumView/AlbumBio.vue
+++ b/src/components/AlbumView/AlbumBio.vue
@@ -1,24 +1,44 @@
 <template>
-  <div class="al-bio rounded border">
-    <div class="left rounded border">
-      <div class="rect rounded"></div>
-      <div class="circle"></div>
+  <div class="al-bio rounded">
+    <div class="separator" id="av-sep"></div>
+    <div class="grid albumbio">
+      <div class="left rounded">
+        <img
+          class="rect rounded"
+          :src="paths.images.thumb + images.album"
+          alt=""
+        />
+        <div class="circle"></div>
+        <img class="circle" :src="paths.images.artist + images.artist" alt="" />
+      </div>
+      <div class="bio rounded border" v-html="bio" v-if="bio"></div>
+      <div class="bio rounded border" v-else>No bio found</div>
     </div>
-    <div class="bio rounded" v-html="bio"></div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { paths } from "@/config";
+
 defineProps<{
   bio: string;
+  images: {
+    artist: string;
+    album: string;
+  };
 }>();
 </script>
 
 <style lang="scss">
 .al-bio {
   padding: $small;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
+
+  .albumbio {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: $small;
+    min-height: 15rem;
+  }
 
   @include tablet-portrait {
     grid-template-columns: 1fr;
@@ -28,17 +48,14 @@ defineProps<{
     grid-template-columns: 1fr auto;
   }
 
-  gap: $small;
-  min-height: 15rem;
-
   .left {
     position: relative;
     height: 100%;
     width: 100%;
     margin-right: $small;
     overflow: hidden;
-    background-image: url("../../assets/images/eggs.jpg");
-    background-position: center;
+    border: solid 1px $gray5;
+    background-image: linear-gradient(37deg, $gray5 20%, $gray4);
 
     @include tablet-portrait {
       display: none;
@@ -52,36 +69,40 @@ defineProps<{
       width: 10rem;
       height: 10rem;
       position: absolute;
-      background-color: rgb(196, 58, 58);
-      box-shadow: 0 0 2rem rgb(0, 0, 0);
-      bottom: -10rem;
+      bottom: 0rem;
       left: 7rem;
-      transform: rotate(45deg) translate(-1rem, -9rem);
+      transform: rotate(15deg) translate(-1rem, 1rem);
       z-index: 1;
       transition: all 0.5s ease-in-out;
 
       &:hover {
+        transform: rotate(0deg) translate(-1rem, 0) scale(1.1);
         transition: all 0.5s ease-in-out;
       }
     }
 
     .circle {
+      position: absolute;
       width: 7rem;
       height: 7rem;
-      position: absolute;
-      right: 0;
-      background-color: $blue;
+      left: 15rem;
+      bottom: 0;
       border-radius: 50%;
-      transform: translateX(-11rem) translateY(7rem);
       box-shadow: 0 0 2rem rgb(0, 0, 0);
+      transition: all 0.25s ease-in-out;
+
+      &:hover {
+        transform: scale(1.5);
+      }
     }
   }
   .bio {
+    border: solid 1px $gray5;
     padding: $small;
     line-height: 1.5rem;
 
     &::after {
-      content: "...";
+      content: " ...";
     }
   }
 }
diff --git a/src/components/AlbumView/Header.vue b/src/components/AlbumView/Header.vue
index 42b0085..6bf05e8 100644
--- a/src/components/AlbumView/Header.vue
+++ b/src/components/AlbumView/Header.vue
@@ -51,7 +51,7 @@ import useAlbumStore from "@/stores/pages/album";
 import { ref } from "vue";
 import { playSources } from "../../composables/enums";
 import { formatSeconds } from "../../composables/perks";
-import { paths } from "../../config";
+import { paths } from "@/config";
 import { AlbumInfo } from "../../interfaces";
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
 
diff --git a/src/components/FolderView/SongList.vue b/src/components/FolderView/SongList.vue
index 486f7a4..4a772b9 100644
--- a/src/components/FolderView/SongList.vue
+++ b/src/components/FolderView/SongList.vue
@@ -98,7 +98,7 @@ function updateQueue(track: Track) {
 
 function getTracks() {
   if (props.on_album_page) {
-    let tracks = props.tracks.map((track, index) => {
+    let tracks = props.tracks.map((track) => {
       track.index = track.tracknumber;
       return track;
     });
diff --git a/src/router/index.js b/src/router/index.js
index 940bda1..cfb214f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -18,6 +18,7 @@ const routes = [
     path: "/",
     name: "Home",
     component: Home,
+    redirect: '/folder/$home'
   },
   {
     path: "/folder/:path",
diff --git a/src/stores/pages/album.ts b/src/stores/pages/album.ts
index a9aac3d..047da4a 100644
--- a/src/stores/pages/album.ts
+++ b/src/stores/pages/album.ts
@@ -22,7 +22,7 @@ export default defineStore("album", {
     info: <AlbumInfo>{},
     tracks: <Track[]>[],
     artists: <Artist[]>[],
-    bio: null,
+    bio: "HELLBOY is the fourth & final mixtape by Lil Peep, released on September 25, 2016. The mixtape caught people’s attention, pushing him into the mainstream light. The title HELLBOY is a reference to the animated movie Hellboy Animated: Blood and Iron, as Peep explains in a GQ interview. This album’s title was explained by Smokeasac, who produced many songs on this album: 'I remember when we made “Hellboy”. He explained to me why he chose the name. He explained that it was because he knew that “Hellboy” came off as intimidating and scary to some but it was because he ",
   }),
   actions: {
     /**
diff --git a/src/views/album/Bottom.vue b/src/views/album/Bottom.vue
index fac5b8d..82ba0d7 100644
--- a/src/views/album/Bottom.vue
+++ b/src/views/album/Bottom.vue
@@ -1,10 +1,8 @@
 <template>
   <div class="bottom-content">
     <FeaturedArtists :artists="artists" />
-    <div v-if="bio">
-      <div class="separator" id="av-sep"></div>
-      <AlbumBio :bio="bio" />
-    </div>
+
+    <AlbumBio :bio="bio" :images="{ album: image, artist: artists[0].image }" />
   </div>
 </template>
 
@@ -16,6 +14,7 @@ import AlbumBio from "@/components/AlbumView/AlbumBio.vue";
 defineProps<{
   artists: Artist[];
   bio: string | null;
+  image: string;
 }>();
 </script>
 
diff --git a/src/views/album/index.vue b/src/views/album/index.vue
index 19c7e59..d8af31e 100644
--- a/src/views/album/index.vue
+++ b/src/views/album/index.vue
@@ -7,14 +7,22 @@
       <Content :tracks="album.tracks" />
     </template>
     <template #bottom>
-      <Bottom :artists="album.artists" :bio="album.bio" />
+      <Bottom
+        :artists="album.artists"
+        :bio="album.bio"
+        :image="album.info.image"
+      />
     </template>
   </Page>
 </template>
 
 <script setup lang="ts">
 import useAStore from "@/stores/pages/album";
-import { onBeforeRouteUpdate, RouteLocationNormalized, RouteParams } from "vue-router";
+import {
+  onBeforeRouteUpdate,
+  RouteLocationNormalized,
+  RouteParams,
+} from "vue-router";
 
 import Page from "@/layouts/HeaderContentBottom.vue";
 import Bottom from "./Bottom.vue";