build artist page

+ connect artist page to backend
~ bugs introduced as there are hashing changes in the backend

[will fix later]

src/components/AlbumView/ArtistAlbums.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="albums-from-artist">
     <h3>
-      <span>More from {{ artist.artist }} </span>
+      <span>{{ title }} </span>
       <span class="see-more">SEE ALL</span>
     </h3>
     <div class="cards">
-      <AlbumCard v-for="a in artist.albums" :album="a" />
+      <AlbumCard v-for="a in albums" :album="a" />
     </div>
   </div>
 </template>
@@ -13,26 +13,25 @@
 <script setup lang="ts">
 import AlbumCard from "../shared/AlbumCard.vue";
 
-import { AlbumInfo } from "@/interfaces";
+import { Album } from "@/interfaces";
 
 defineProps<{
-  artist: {
-    artist: string;
-    albums: AlbumInfo[];
-  };
+  title: string;
+  albums: Album[];
 }>();
 </script>
 
 <style lang="scss">
 .albums-from-artist {
   overflow: hidden;
-  padding-top: 2rem;
+  padding-top: 1rem;
 
   h3 {
     display: grid;
     grid-template-columns: 1fr max-content;
     align-items: center;
     padding: 0 $medium;
+    margin-bottom: $small;
 
     .see-more {
       font-size: $medium;

src/components/AlbumView/Header.vue

@@ -53,14 +53,21 @@
         </div>
       </div>
       <div class="art" v-if="!albumHeaderSmall">
-        <img
+        <RouterLink
           v-for="a in album.albumartists"
-          :src="imguri.artist + a.image"
-          class="shadow-lg circular"
-          loading="lazy"
-          :title="a.name"
-          :style="{ border: `solid 2px ${album.colors[0]}` }"
-        />
+          :to="{
+            name: Routes.artist,
+            params: { hash: a.hash },
+          }"
+        >
+          <img
+            :src="imguri.artist + a.image"
+            class="shadow-lg circular"
+            loading="lazy"
+            :title="a.name"
+            :style="{ border: `solid 2px ${album.colors[0]}` }"
+          />
+        </RouterLink>
       </div>
     </div>
   </div>
@@ -69,20 +76,20 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
+import ArtistName from "@/components/shared/ArtistName.vue";
 import { paths } from "@/config";
 import { albumHeaderSmall } from "@/stores/content-width";
 import useNavStore from "@/stores/nav";
 import useAlbumStore from "@/stores/pages/album";
 import { formatSeconds, useVisibility } from "@/utils";
 import { isLight } from "../../composables/colors/album";
-import { playSources } from "../../composables/enums";
-import { AlbumInfo } from "../../interfaces";
-import ArtistName from "@/components/shared/ArtistName.vue";
+import { playSources, Routes } from "../../composables/enums";
+import { Album } from "../../interfaces";
 
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
 
 const props = defineProps<{
-  album: AlbumInfo;
+  album: Album;
 }>();
 
 const albumheaderthing = ref<any>(null);

src/components/ArtistView/Albums.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="albums-list">
+    <div class="section-title">
+      <b>
+        {{ title }}
+      </b>
+      <div class="see-all"><b>SEE ALL</b></div>
+    </div>
+    <div class="cars">
+      <AlbumCard
+        v-for="album in search.albums.value.slice(0, 6)"
+        :album="album"
+        :key="Math.random()"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AlbumCard from "../shared/AlbumCard.vue";
+import useSearchStore from "@/stores/search";
+
+defineProps<{
+  //   albums: Album[];
+  title: string;
+}>();
+
+const search = useSearchStore();
+
+// TODO: use AlbumView's ArtistAlbums component instead of this
+</script>
+
+<style lang="scss">
+.albums-list {
+  .section-title {
+    margin: 0;
+    margin-bottom: -$small;
+
+    .see-all {
+      float: right;
+      font-size: small;
+      opacity: 0.5;
+    }
+  }
+
+  .cars {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+    // padding: 1rem 0;
+    // gap: 2rem 0;
+  }
+}
+</style>

src/components/ArtistView/Header.vue

@@ -1,9 +1,119 @@
 <template>
-  <div class="artist-page-header">
-   This is the header
+  <div class="artist-page-header rounded no-scroll">
+    <div
+      class="artist-info"
+      :class="{
+        nocontrast: artist.info.colors ? isLight(artist.info.colors[0]) : false,
+      }"
+    >
+      <section class="text">
+        <div class="card-title">ARTIST</div>
+        <div class="artist-name">{{ artist.info.name }}</div>
+        <div class="stats">
+          {{ artist.info.trackcount }} Tracks •
+          {{ artist.info.albumcount }} Albums •
+          {{ formatSeconds(artist.info.duration, true) }}
+        </div>
+      </section>
+      <PlayBtnRect />
+    </div>
+    <div class="artist-img">
+      <img :src="paths.images.artist + artist.info.image" />
+    </div>
+    <div
+      class="gradient"
+      :style="{
+        backgroundImage: `linear-gradient(to left, transparent 10%,
+      ${artist.info.colors[0]} 50%,
+      ${artist.info.colors[0]} 100%)`,
+      }"
+    ></div>
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import useArtistPageStore from "@/stores/pages/artist";
+import PlayBtnRect from "../shared/PlayBtnRect.vue";
+import formatSeconds from "@/utils/useFormatSeconds";
+import { isLight } from "@/composables/colors/album";
+import { paths } from "@/config";
 
-<style lang="scss"></style>
+const artist = useArtistPageStore();
+</script>
+
+<style lang="scss">
+.artist-page-header {
+  height: 18rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  position: relative;
+
+  .artist-img {
+    height: 18rem;
+    img {
+      height: 100%;
+      width: 100%;
+      object-fit: cover;
+      object-position: 0% 20%;
+    }
+  }
+
+  .gradient {
+    position: absolute;
+    background-image: linear-gradient(
+      to left,
+      transparent 10%,
+      #434142 50%,
+      #434142 100%
+    );
+    height: 100%;
+    width: 100%;
+  }
+
+  .artist-info {
+    z-index: 1;
+    padding: 1rem;
+    padding-right: 0;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+
+    gap: 1rem;
+
+    .text {
+      display: flex;
+      flex-direction: column;
+      gap: $small;
+    }
+
+    .card-title {
+      opacity: 0.5;
+      font-size: small;
+    }
+
+    .artist-name {
+      font-size: 3rem;
+      font-weight: bold;
+
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .stats {
+      font-size: small;
+    }
+
+    .playbtnrect {
+      border-radius: 2rem;
+    }
+  }
+
+  .artist-info.nocontrast {
+    color: $black;
+  }
+}
+</style>

src/components/ArtistView/TopTracks.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="artist-top-tracks">
+    <h3 class="section-title">Tracks</h3>
+    <div class="tracks">
+      <SongItem
+        v-for="(song, index) in artist.tracks"
+        :track="song"
+        :index="index + 1"
+        :isCurrent="false"
+        :isCurrentPlaying="false"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import useQueueStore from "@/stores/queue";
+import SongItem from "../shared/SongItem.vue";
+import useArtistPageStore from "@/stores/pages/artist";
+
+const queue = useQueueStore();
+const artist = useArtistPageStore();
+</script>
+
+<style lang="scss">
+.artist-top-tracks {
+  // padding-bottom: 2rem;
+
+  .section-title {
+    margin-left: 0;
+  }
+}
+</style>

src/components/shared/AlbumCard.vue

@@ -16,11 +16,11 @@
 
 <script setup lang="ts">
 import { paths } from "../../config";
-import { AlbumInfo } from "../../interfaces";
+import { Album } from "../../interfaces";
 
 const imguri = paths.images.thumb.large;
 defineProps<{
-  album: AlbumInfo;
+  album: Album;
 }>();
 </script>