add albums from the same artist to album view

src/assets/css/global.scss

@@ -175,3 +175,49 @@ a {
 ::-webkit-scrollbar-thumb:hover {
   background: rgb(163, 163, 163);
 }
+
+
+@-webkit-keyframes similarAlbums {
+  0% {
+    background-position: 0% 38%;
+  }
+  50% {
+    background-position: 100% 63%;
+  }
+  100% {
+    background-position: 0% 38%;
+  }
+}
+@-moz-keyframes similarAlbums {
+  0% {
+    background-position: 0% 38%;
+  }
+  50% {
+    background-position: 100% 63%;
+  }
+  100% {
+    background-position: 0% 38%;
+  }
+}
+@-o-keyframes similarAlbums {
+  0% {
+    background-position: 0% 38%;
+  }
+  50% {
+    background-position: 100% 63%;
+  }
+  100% {
+    background-position: 0% 38%;
+  }
+}
+@keyframes similarAlbums {
+  0% {
+    background-position: 0% 38%;
+  }
+  50% {
+    background-position: 100% 63%;
+  }
+  100% {
+    background-position: 0% 38%;
+  }
+}

src/components/AlbumView/AlbumBio.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="al-bio rounded">
+    <div class="heading">ALBUM BIOGRAPHY</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>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss">
+.al-bio {
+  background-color: #1f1e1d;
+  padding: $small;
+
+  .heading {
+    margin: 0 0 0 $small;
+  }
+
+  .content {
+    display: inline-block;
+    line-height: 1.5rem;
+    font-size: large;
+    columns: 2;
+    column-rule: 1px solid $separator;
+    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
+    user-select: text;
+  }
+}
+</style>

src/components/AlbumView/FromTheSameArtist.vue

@@ -0,0 +1,253 @@
+<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: 12em;
+  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.2rem;
+  right: 0rem;
+  display: flex;
+  justify-content: space-between;
+
+  &:hover {
+    z-index: 1;
+  }
+
+  .next,
+  .prev {
+    width: 2em;
+    height: 2em;
+    cursor: pointer;
+    transition: all 0.5s ease;
+  }
+
+  .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:hover,
+  .prev:hover {
+    transform: scale(1.2);
+    transition: all 0.5s ease;
+  }
+
+  .prev:hover {
+    transform: rotate(180deg) scale(1.2);
+  }
+
+  .next:active {
+    transform: scale(0.5);
+  }
+
+  .prev:active {
+    transform: rotate(180deg) scale(0.5);
+  }
+}
+
+.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: #210368;
+  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, #140059, #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/SongList.vue

@@ -1,94 +0,0 @@
-<template>
-  <div class="folder" id="p-table">
-    <div class="table rounded"  ref="songtitle">
-      <table>
-        <tr>
-          <th>Track</th>
-          <th>Artist</th>
-          <th>Album</th>
-          <th v-if="songTitleWidth > minWidth">Duration</th>
-        </tr>
-        <tr v-for="song in songs" :key="song">
-          <td :style="{ width: songTitleWidth + 'px' }" class="flex">
-            <div class="album-art rounded image"></div>
-            <div>
-              <span class="ellipsis">{{ song.title }}</span>
-            </div>
-          </td>
-          <td :style="{ width: songTitleWidth + 'px' }">
-            <span class="artist" v-for="artist in song.artists" :key="artist">{{
-              artist
-            }}</span>
-          </td>
-          <td :style="{ width: songTitleWidth + 'px' }">{{ song.album }}</td>
-          <td
-            :style="{ width: songTitleWidth + 'px' }"
-            v-if="songTitleWidth > minWidth"
-          >
-            {{ song.duration }}
-          </td>
-        </tr>
-      </table>
-    </div>
-  </div>
-</template>
-
-<script>
-import { ref } from "@vue/reactivity";
-import { onMounted, onUnmounted } from "@vue/runtime-core";
-import Songs from "../../data/songs.js";
-
-export default {
-  setup() {
-    const songtitle = ref(null);
-    const songTitleWidth = ref(null);
-
-    const minWidth = ref(300);
-
-    const songs = Songs.songs;
-
-    const resizeSongTitleWidth = () => {
-      let a = songtitle.value.clientWidth;
-
-      songTitleWidth.value = a > minWidth.value * 4 ? a / 4 : a / 3;
-    };
-
-    onMounted(() => {
-      resizeSongTitleWidth();
-      
-      window.addEventListener("resize", () => {
-        resizeSongTitleWidth();
-      });
-    });
-
-    onUnmounted(() => {
-      window.removeEventListener("resize", () => {
-        resizeSongTitleWidth();
-      });
-    });
-
-    return { songtitle, songTitleWidth, songs, minWidth };
-  },
-};
-</script>
-
-<style lang="scss">
-#p-table {
-  height: calc(100% - 0rem) !important;
-  overflow: hidden;
-  padding-bottom: 0rem;
-
-  table {    
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    th {
-      position: sticky;
-      background-color: rgb(58, 57, 57);
-      top: 0;
-      z-index: 5;
-    }
-  }
-}
-</style>

src/components/PlaylistView/FeaturedArtists.vue

@@ -98,7 +98,7 @@ export default {
   width: 5rem;
   height: 2rem;
   position: absolute;
-  top: -.2rem;
+  top: -0.2rem;
   right: 0rem;
   display: flex;
   justify-content: space-between;
@@ -193,7 +193,7 @@ export default {
     width: 10em;
   }
   &:hover {
-    transform: translateY(-.5em);
+    transform: translateY(-0.5em);
     transition: all 0.5s ease-in-out;
   }
 }
@@ -223,18 +223,18 @@ export default {
     color: #ffffff;
   }
 
-   .blur {
+  .blur {
     position: absolute;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0);
-    backdrop-filter: blur(100px);
+    backdrop-filter: blur(40px);
-    -webkit-backdrop-filter: blur(100px);
+    -webkit-backdrop-filter: blur(40px);
-    -moz-backdrop-filter: blur(100px);
+    -moz-backdrop-filter: blur(40px);
     border-radius: $small;
   }
 
-   .s2 {
+  .s2 {
     position: absolute;
     left: -2em;
     bottom: -4em;

src/composables/scrolls.js

@@ -0,0 +1,17 @@
+const scrollLeftX = (artists_dom) => {
+  const dom = artists_dom.value;
+  dom.scrollBy({
+    left: -700,
+    behavior: "smooth",
+  });
+};
+
+const scrollRightX = (artists_dom) => {
+  const dom = artists_dom.value;
+  dom.scrollBy({
+    left: 700,
+    behavior: "smooth",
+  });
+};
+
+export { scrollLeftX, scrollRightX, };

src/views/AlbumView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="al-view">
+  <div class="al-view rounded">
     <div class="header">
       <Header />
     </div>
@@ -9,17 +9,26 @@
     </div>
     <div class="separator" id="av-sep"></div>
     <FeaturedArtists />
+    <div class="separator" id="av-sep"></div>
+    <AlbumBio />
+    <div class="separator" id="av-sep"></div>
+    <FromTheSameArtist/>
   </div>
 </template>
 
 <script>
 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/PlaylistView/SongList.vue";
 import FeaturedArtists from "../components/PlaylistView/FeaturedArtists.vue";
 
 export default {
   components: {
     Header,
+    AlbumBio,
+    FromTheSameArtist,
     SongList,
     FeaturedArtists,
   },
@@ -31,12 +40,6 @@ export default {
   height: 100%;
   overflow: auto;
 
-  .header {
-    position: sticky;
-    top: 0;
-    z-index: 60;
-  }
-
   &::-webkit-scrollbar {
     display: none;
   }