add new album header

src/assets/css/BottomBar/BottomBar.scss

@@ -62,12 +62,12 @@
         width: 100%;
 
         .durationx {
-          background-color: rgba(0, 72, 131, 0.171);
+          background-color: #97979725;
+          // border: solid 1px rgba(255, 255, 255, 0.253);
           padding: $smaller;
-          border-radius: 0.4rem;
+          border-radius: 0.75rem;
           margin: 0 $small 0 $small;
-          font-size: .8rem;
-          color: rgb(0, 119, 255);
+          font-size: 0.8rem;
         }
       }
     }

src/assets/css/_variables.scss

@@ -1,13 +1,13 @@
 // colors
 
-$card-dark: #08090c;
+$card-dark: #040406;
 $red: #df4646;
 $blue: #055096;
 $green: #439443;
-$separator: #ffffff46;
+$separator: #ffffff2f;
 $pink: #c43a3a;
 $highlight-blue: #006eff;
-$bbb: #050608; //bottom controls background
+$bbb: #161616; //bottom controls background
 
 // sizes
 $small: 0.5rem;

src/assets/css/global.scss

@@ -40,6 +40,10 @@ a {
 }
 
 .border {
+  border: solid 2px #27262654;
+}
+
+.border-sm {
   border: solid 1px #27262654;
 }
 

src/components/AlbumView/AlbumBio.vue

@@ -4,7 +4,7 @@
       <div class="rect rounded"></div>
       <div class="circle"></div>
     </div>
-    <div class="bio rounded border" v-html="bio"></div>
+    <div class="bio rounded" v-html="bio"></div>
   </div>
 </template>
 

src/components/AlbumView/Header.vue

@@ -1,14 +1,10 @@
 <template>
   <div class="album-h">
-    <div class="a-header rounded card-dark border">
-      <div
-          :style="{
-          backgroundImage: `url(&quot;${album_info.image}&quot;)`,
-        }"
-          class="art rounded border"
-      ></div>
+    <div class="a-header rounded card-dark">
       <div class="info">
         <div class="top">
+          <div class="h">Album</div>
+          <div class="separator no-border"></div>
           <div class="title">{{ album_info.name }}</div>
           <div class="artist">{{ album_info.artist }}</div>
         </div>
@@ -17,23 +13,13 @@
           <div class="stats">
             {{ album_info.count }} Tracks • {{ album_info.duration }} • 2021
           </div>
-          <button class="play rounded" @click="playAlbum">
+          <div class="play rounded" @click="playAlbum">
             <div class="icon"></div>
             <div>Play</div>
-          </button>
+          </div>
         </div>
       </div>
     </div>
-    <div class="right rounded card-dark border">
-      <div class="circle circular"></div>
-      <div class="rect rounded"></div>
-      <div
-          :style="{
-          backgroundImage: `url(&quot;${album_info.artist_image}&quot;)`,
-        }"
-          class="avatar image"
-      ></div>
-    </div>
   </div>
 </template>
 
@@ -57,9 +43,6 @@ export default {
 
 <style lang="scss">
 .album-h {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-
   @include tablet-landscape {
     grid-template-columns: 1fr;
   }
@@ -68,76 +51,6 @@ export default {
   position: relative;
   overflow: hidden;
   height: 14rem;
-
-  .right {
-    @include tablet-landscape {
-      display: none;
-    }
-
-    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: 0 0 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: 0 0 2rem rgb(0, 0, 0);
-      transition: all 0.5s ease-in-out;
-
-      &:hover {
-        transition: all 0.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: 0 0 2rem rgba(0, 0, 0, 0.164);
-      transition: all 0.5s ease-in-out;
-
-      &:hover {
-        transition: all 0.5s ease-in-out;
-
-        right: 1rem;
-      }
-    }
-
-    &:hover {
-      transition: all 0.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 {
@@ -145,35 +58,32 @@ export default {
   overflow: hidden;
   display: flex;
   align-items: center;
-  padding: 0 1rem 0 14rem;
-
-  .art {
-    position: absolute;
-    left: $small;
-    width: 13rem;
-    height: 13rem;
-    background: no-repeat center/cover;
-    margin-right: 1rem;
-  }
+  padding: 1rem;
+  height: 100%;
+  background-image: url("../../assets/images/abg.webp");
+  background-position: 0% 60%;
 
   .info {
     width: 100%;
-    height: calc(100% - 1rem);
+    height: calc(100%);
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
 
     .top {
+      .h {
+        color: rgba(255, 255, 255, 0.795);
+      }
       .title {
-        font-size: 1.5rem;
-        font-weight: bold;
+        font-size: 2rem;
+        font-weight: 1000;
         color: white;
       }
 
       .artist {
         margin-top: $small;
-
-        color: rgba(255, 255, 255, 0.856);
+        font-size: 1.5rem;
+        color: #fffffff1;
       }
     }
 
@@ -184,6 +94,7 @@ export default {
     .bottom {
       .stats {
         font-weight: bold;
+        display: none;
       }
 
       .play {
@@ -191,9 +102,10 @@ export default {
         width: 6rem;
         display: flex;
         align-items: center;
-        background: $blue;
+        background: $highlight-blue;
         padding: $small;
         margin: $small 0;
+        cursor: pointer;
 
         .icon {
           height: 1.5rem;

src/components/BottomBar/BottomBar.vue

@@ -2,7 +2,7 @@
   <div class="b-bar border card-dark">
     <div class="grid">
       <SongCard :collapsed="props.collapsed" />
-      <div class="controlsx border rounded">
+      <div class="controlsx rounded">
         <div class="controls controls-bottom">
           <HotKeys />
         </div>

src/components/FolderView/FolderItem.vue

@@ -2,7 +2,7 @@
   <router-link
     :to="{ name: 'FolderView', params: { path: props.folder.path } }"
   >
-    <div class="f-item border rounded">
+    <div class="f-item border-sm rounded">
       <div class="icon image"></div>
       <div class="info">
         <div class="f-item-text ellip">{{ props.folder.name }}</div>

src/components/PlaylistView/FeaturedArtists.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="f-artists border">
     <div class="xcontrols">
-      <div class="prev border" @click="scrollLeft"></div>
-      <div class="next border" @click="scrollRight"></div>
+      <div class="prev" @click="scrollLeft"></div>
+      <div class="next" @click="scrollRight"></div>
     </div>
     <div class="artists" ref="artists_dom">
       <div class="xartist border c1 image">
@@ -91,7 +91,7 @@ export default {
     border-radius: $small;
     cursor: pointer;
     transition: all 0.5s ease;
-    background-color: rgb(79, 80, 80);
+    background-color: rgb(51, 51, 51);
   }
 
   .next:hover,

src/components/RightSideBar/Main.vue

@@ -47,7 +47,9 @@ function changeTab(tab) {
     setTimeout(() => {}, 300);
   }).then(() => {
     if (tab === tabs.queue) {
-      perks.focusCurrent();
+      setTimeout(() => {
+        perks.focusCurrent();
+      }, 300);
     }
   });
 }

src/components/RightSideBar/NowPlaying.vue

@@ -32,7 +32,7 @@
         <Progress/>
       </div>
     </div>
-    <div class="c-wrapper border rounded">
+    <div class="c-wrapper rounded">
       <div class="controls">
         <div class="shuffle">
           <div class="image"></div>
@@ -89,7 +89,7 @@ export default {
   border-radius: 0.5rem;
   height: 13.5rem;
   padding: 0.5rem;
-  background: $card-dark;
+  // background: rgba(255, 255, 255, 0.055);
   display: grid;
   grid-template-rows: 3fr 1fr;
 

src/components/RightSideBar/Queue.vue

@@ -19,9 +19,9 @@
           </p>
         </div>
       </div>
-        <div class="scrollable-r border rounded">
-          <TrackItem v-for="song in queue" :key="song.track_id" :track="song" />
-        </div>
+      <div class="scrollable-r border rounded">
+        <TrackItem v-for="song in queue" :key="song.track_id" :track="song" />
+      </div>
     </div>
   </div>
 </template>
@@ -34,30 +34,14 @@ import { watch } from "@vue/runtime-core";
 import TrackItem from "../shared/TrackItem.vue";
 
 export default {
-  props: ["up_next"],
-  setup(props, { emit }) {
-    const is_expanded = toRefs(props).up_next;
+  setup() {
     const queue = ref(perks.queue);
     const next = ref(perks.next);
 
-    let collapse = () => {
-      emit("expandQueue");
-    };
-
-    watch(is_expanded, (newVal) => {
-      if (newVal) {
-        setTimeout(() => {
-          perks.focusCurrent();
-        }, 1000);
-      }
-    });
-
     const { playNext } = audio;
 
     const putCommas = perks.putCommas;
     return {
-      collapse,
-      is_expanded,
       playNext,
       putCommas,
       queue,

src/components/Search/Options.vue

@@ -30,11 +30,11 @@ export default {
       },
       {
         title: "Artist",
-        icon: "🙄",
+        icon: "👤",
       },
       {
         title: "Playlist",
-        icon: "😍",
+        icon: "🎧",
       },
       {
         title: "Folder",

src/composables/routeLoader.js

@@ -4,40 +4,41 @@ import album from "./album.js";
 import state from "./state.js";
 
 async function toAlbum(title, artist) {
-    state.loading.value = true;
-    album
-        .getAlbumTracks(title, artist)
-        .then((data) => {
-            state.album_song_list.value = data.songs;
-            state.album_info.value = data.info;
-        })
-        .then(
-            await album.getAlbumArtists(title, artist).then((data) => {
-                state.album_artists.value = data;
-            })
-        )
-        .then(
-            await 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,
-                },
-            });
-            state.loading.value = false;
-        })
-        .catch((error) => {
-            console.log(error);
-        });
+  console.log("routing to album");
+  state.loading.value = true;
+  await album
+    .getAlbumTracks(title, artist)
+    .then((data) => {
+      state.album_song_list.value = data.songs;
+      state.album_info.value = data.info;
+    })
+    .then(
+      await 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,
+        },
+      });
+      state.loading.value = false;
+    })
+    .catch((error) => {
+      console.log(error);
+    });
 }
 
 export default {

src/views/AlbumView.vue

@@ -4,7 +4,7 @@
       <Header :album_info="album_info" />
     </div>
     <div class="separator" id="av-sep"></div>
-    <div class="songs rounded border">
+    <div class="songs rounded">
       <SongList :songs="album_songs" />
     </div>
     <div class="separator" id="av-sep"></div>