From e970324314c8e64f05a3bc2b22212650f502bf0e Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Sun, 12 Dec 2021 00:52:39 +0300
Subject: [PATCH] add songs and featured artists to album view

---
 src/components/AlbumView/SongList.vue         | 94 +++++++++++++++++++
 src/components/FolderView/SongList.vue        |  2 +-
 .../PlaylistView/FeaturedArtists.vue          |  2 +-
 src/views/AlbumView.vue                       | 41 +++++++-
 src/views/PlaylistView.vue                    |  6 +-
 5 files changed, 134 insertions(+), 11 deletions(-)
 create mode 100644 src/components/AlbumView/SongList.vue

diff --git a/src/components/AlbumView/SongList.vue b/src/components/AlbumView/SongList.vue
new file mode 100644
index 00000000..ebf97eab
--- /dev/null
+++ b/src/components/AlbumView/SongList.vue
@@ -0,0 +1,94 @@
+<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>
\ No newline at end of file
diff --git a/src/components/FolderView/SongList.vue b/src/components/FolderView/SongList.vue
index c9d34a90..c5a20f02 100644
--- a/src/components/FolderView/SongList.vue
+++ b/src/components/FolderView/SongList.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="folder">
     <div class="table rounded" ref="songtitle">
-      <table>
+      <table class="rounded">
         <tr>
           <th>Track</th>
           <th>Artist</th>
diff --git a/src/components/PlaylistView/FeaturedArtists.vue b/src/components/PlaylistView/FeaturedArtists.vue
index 0e4298d4..76fbb763 100644
--- a/src/components/PlaylistView/FeaturedArtists.vue
+++ b/src/components/PlaylistView/FeaturedArtists.vue
@@ -86,7 +86,7 @@ export default {
 .f-artists {
   position: relative;
   height: 12em;
-  width: calc(100% - 1em);
+  width: calc(100%);
   background-color: #1f1e1d;
   padding: $small;
   border-radius: $small;
diff --git a/src/views/AlbumView.vue b/src/views/AlbumView.vue
index d8633eb8..2b915960 100644
--- a/src/views/AlbumView.vue
+++ b/src/views/AlbumView.vue
@@ -1,17 +1,48 @@
 <template>
-  <Header/>
+  <div class="al-view">
+    <div class="header">
+      <Header />
+    </div>
+    <div class="separator" id="av-sep"></div>
+    <div>
+      <SongList />
+    </div>
+    <div class="separator" id="av-sep"></div>
+    <FeaturedArtists />
+  </div>
 </template>
 
 <script>
-import Header from "../components/AlbumView/Header.vue"
+import Header from "../components/AlbumView/Header.vue";
+import SongList from "../components/PlaylistView/SongList.vue";
+import FeaturedArtists from "../components/PlaylistView/FeaturedArtists.vue";
 
 export default {
   components: {
-    Header
+    Header,
+    SongList,
+    FeaturedArtists,
   },
-}
+};
 </script>
 
-<style>
+<style lang="scss">
+.al-view {
+  height: 100%;
+  overflow: auto;
 
+  .header {
+    position: sticky;
+    top: 0;
+    z-index: 60;
+  }
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  #av-sep {
+    border: none;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/PlaylistView.vue b/src/views/PlaylistView.vue
index 6af57173..769dc94c 100644
--- a/src/views/PlaylistView.vue
+++ b/src/views/PlaylistView.vue
@@ -48,9 +48,7 @@ export default {
   border-radius: $small;
 }
 
-.p-bg .f-artists {
-  position: absolute;
-  bottom: 0;
-  margin-top: 1em;
+.p-bg .f-artists-p {
+  margin-top: $small;
 }
 </style>
\ No newline at end of file