implement playing tracks from artist page

src/assets/scss/Global/app-grid.scss

@@ -19,12 +19,11 @@ $g-border: solid 1px $gray5;
 }
 
 #acontent {
+  width: 100%;
   grid-area: content;
-  margin-right: calc(0rem - ($medium + 2px));
   padding-right: calc($medium);
 
   overflow: hidden;
-  margin-right: $smaller !important;
 }
 
 .vue-recycle-scroller__item-wrapper {
@@ -33,6 +32,9 @@ $g-border: solid 1px $gray5;
 
 .vue-recycle-scroller {
   padding-left: 1.25rem;
+  // padding-right: 1rem;
+
+  // margin-right: 1rem;
 }
 
 .r-sidebar {
@@ -101,7 +103,7 @@ $g-border: solid 1px $gray5;
   .scroller {
     height: 100%;
     width: 100%;
-    padding-right: $small !important;
+    padding-right: 1.25rem;
     padding-bottom: $content-padding-bottom;
   }
 }

src/assets/scss/moz.scss

@@ -26,7 +26,7 @@
     .scroller {
       height: 100%;
       width: 100%;
-      padding-right: 1rem !important;
+      // padding-right: 1.25rem !important;
     }
   }
 

src/components/AlbumView/ArtistAlbums.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="artist-albums">
+  <div
+    class="artist-albums"
+  >
     <h3>
       <span>{{ title }} </span>
       <span class="see-more">SEE ALL</span>

src/components/AlbumView/Header.vue

@@ -129,21 +129,6 @@ useVisibility(albumheaderthing, handleVisibilityState);
   background-color: $black;
   align-items: flex-end;
 
-  // .albumartists {
-  //   outline: solid 1px;
-  //   // display: flex;
-  //   // width: 100%;
-  //   // flex-wrap: nowrap;
-  //   // height: 1rem;
-  //   // overflow: hidden;
-
-  //   span {
-  //     // white-space: nowrap;
-  //     // overflow: hidden;
-  //     // text-overflow: ellipsis;
-  //   }
-  // }
-
   .big-img {
     height: calc(100%);
     width: 16rem;

src/components/ArtistView/Header.vue

@@ -1,4 +1,13 @@
 <template>
+  <div
+    class="artist-header-ambient rounded"
+    style="height: 100%; width: 100%"
+    :style="{
+      boxShadow: artist.info.colors
+        ? `0 .5rem 2rem ${artist.info.colors[0]}`
+        : '',
+    }"
+  ></div>
   <div class="artist-page-header rounded no-scroll">
     <div
       class="artist-info"
@@ -28,7 +37,7 @@
     <div
       class="gradient"
       :style="{
-        backgroundImage: `linear-gradient(to left, transparent 40%,
+        backgroundImage: `linear-gradient(to left, transparent 30%,
       ${artist.info.colors[0]} 50%,
       ${artist.info.colors[0]} 100%)`,
       }"
@@ -48,6 +57,13 @@ const artist = useArtistPageStore();
 </script>
 
 <style lang="scss">
+.artist-header-ambient {
+  height: 17rem;
+  position: absolute;
+  opacity: 0.25;
+  margin-right: -1rem;
+
+}
 .artist-page-header {
   height: 18rem;
   display: grid;

src/components/ArtistView/TopTracks.vue

@@ -6,6 +6,7 @@
         v-for="(song, index) in artist.tracks"
         :track="song"
         :index="index + 1"
+        @playThis="playFromPage(index)"
       />
     </div>
     <div class="error" v-if="!artist.tracks.length">No tracks</div>
@@ -15,8 +16,27 @@
 <script setup lang="ts">
 import SongItem from "../shared/SongItem.vue";
 import useArtistPageStore from "@/stores/pages/artist";
+import useQueueStore from "@/stores/queue";
+import { FromOptions, playSources } from "@/composables/enums";
+
+import { getArtistTracks } from "@/composables/fetch/artists";
 
 const artist = useArtistPageStore();
+const queue = useQueueStore();
+
+async function playFromPage(index: number) {
+  if (
+    queue.from.type == FromOptions.artist &&
+    queue.from.artisthash == artist.info.artisthash
+  ) {
+    queue.play(index);
+    return;
+  }
+
+  const tracks = await getArtistTracks(artist.info.artisthash);
+  queue.playFromArtist(artist.info.artisthash, artist.info.name, tracks);
+  queue.play(index);
+}
 </script>
 
 <style lang="scss">

src/components/shared/AlbumCard.vue

@@ -5,35 +5,101 @@
       params: { hash: album.albumhash },
     }"
     class="result-item"
+    :class="{
+      nocontrast: album.colors ? isLight(album.colors[0]) : false,
+    }"
   >
-    <img class="rounded" :src="imguri + album.image" alt="" />
+    <div
+      class="bg rounded"
+      :style="{
+        backgroundColor: `${
+          album.colors[0] ? album.colors[0] : 'rgb(72, 72, 74)'
+        }`,
+      }"
+    ></div>
+    <div class="with-img">
+      <img class="rounded" :src="imguri + album.image" alt="" />
+      <PlayBtnVue />
+    </div>
     <div>
-      <h4 class="title ellip" v-tooltip>{{ album.title }}</h4>
+      <h4 class="title ellip" v-tooltip>
+        {{ album.title }}
+      </h4>
       <div class="artist ellip">{{ album.albumartists[0].name }}</div>
     </div>
   </router-link>
 </template>
 
 <script setup lang="ts">
+import { ref } from "vue";
 import { paths } from "../../config";
 import { Album } from "../../interfaces";
+import { isLight } from "@/composables/colors/album";
+import PlayBtnVue from "./PlayBtn.vue";
 
 const imguri = paths.images.thumb.large;
 defineProps<{
   album: Album;
 }>();
+
+const isHovered = ref(false);
 </script>
 
 <style lang="scss">
+.result-item.nocontrast {
+  &:hover {
+    color: $black;
+  }
+}
+
 .result-item {
   display: grid;
   gap: $small;
   padding: $medium;
   border-radius: 1rem;
   height: fit-content;
+  position: relative;
+  color: $white;
+
+  .with-img {
+    position: relative;
+    padding: 0;
+  }
+
+  .play-btn {
+    $btn-width: 4rem;
+    position: absolute;
+    top: 1rem;
+    right: calc((100% - $btn-width) / 2);
+    opacity: 0;
+    transform: translateY(-1rem);
+    transition: all 0.25s;
+    width: $btn-width;
+
+    &:hover {
+      transition: all 0.25s;
+      background: $darkestblue;
+    }
+  }
+
+  .bg {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    z-index: -1;
+    opacity: 0;
+  }
 
   &:hover {
-    background-color: $gray4;
+    .bg {
+      opacity: 1;
+    }
+
+    .play-btn {
+      // transition-delay: 0.25s;
+      transform: translateY(0);
+      opacity: 1;
+    }
   }
 
   img {

src/components/shared/PlayBtn.vue

@@ -1,5 +1,8 @@
 <template>
-  <button class="play-btn" @click="usePlayFrom(source, useQStore, store)">
+  <button
+    class="play-btn circular"
+    @click.prevent.stop="usePlayFrom(source, useQStore, store)"
+  >
     <PlaySvg />
   </button>
 </template>
@@ -17,6 +20,7 @@ import PlaySvg from "../../assets/icons/play.svg";
 defineProps<{
   source: playSources;
   store: typeof useAlbumStore | typeof usePlaylistStore;
+  color: string;
 }>();
 </script>
 
@@ -24,10 +28,12 @@ defineProps<{
 .play-btn {
   aspect-ratio: 1;
   padding: 0;
-  border-radius: 0.65rem;
+  background: $black;
 
   svg {
     transition: none;
   }
+
+
 }
 </style>

src/composables/enums.ts

@@ -4,6 +4,7 @@ export enum playSources {
   search,
   folder,
   artist,
+  albumCard,
 }
 
 export enum NotifType {
@@ -18,6 +19,7 @@ export enum FromOptions {
   album = "album",
   search = "search",
   artist = "artist",
+  albumCard = "albumCard"
 }
 
 export enum ContextSrc {

src/composables/fetch/artists.ts

@@ -2,7 +2,7 @@ import { paths } from "@/config";
 import useAxios from "./useAxios";
 import { Artist, Track, Album } from "@/interfaces";
 
-const getArtistData = async (hash: string) => {
+const getArtistData = async (hash: string, limit: number = 5) => {
   interface ArtistData {
     artist: Artist;
     tracks: Track[];
@@ -10,7 +10,7 @@ const getArtistData = async (hash: string) => {
 
   const { data, error } = await useAxios({
     get: true,
-    url: paths.api.artist + `/${hash}`,
+    url: paths.api.artist + `/${hash}?limit=${limit}`,
   });
 
   if (error) {
@@ -25,6 +25,7 @@ const getArtistAlbums = async (hash: string, limit = 6) => {
     albums: Album[];
     eps: Album[];
     singles: Album[];
+    appearances: Album[];
   }
 
   const { data, error } = await useAxios({

src/composables/usePlayFrom.ts

@@ -1,10 +1,11 @@
 import { playSources } from "@/composables/enums";
 import useAStore from "@/stores/pages/album";
+import useArtistPageStore from "@/stores/pages/artist";
 import useFStore from "@/stores/pages/folder";
 import usePStore from "@/stores/pages/playlist";
-import useArtistPageStore from "@/stores/pages/artist";
-import { getArtistTracks } from "./fetch/artists";
 import useQStore from "@/stores/queue";
+import useSettingsStore from "@/stores/settings";
+import { getArtistTracks } from "./fetch/artists";
 
 const queue = useQStore;
 const folder = useFStore;
@@ -58,11 +59,31 @@ export default async function play(
 
     case playSources.artist:
       store = store as typeof artist;
-      const ar = store();
-
-      const tracks = await getArtistTracks(ar.info.artisthash);
-
-      useQueue.playFromArtist(ar.info.artisthash, ar.info.name, tracks);
-      useQueue.play();
+      utilPlayFromArtist(useQStore, useArtistPageStore, 0);
   }
 }
+
+async function utilPlayFromArtist(
+  queue: typeof useQStore,
+  artist: typeof useArtistPageStore,
+  index: number = 0
+) {
+  const qu = queue();
+  const ar = artist();
+  const settings = useSettingsStore();
+
+  if (ar.tracks.length === 0) return;
+
+  if (ar.info.trackcount <= settings.artist_top_tracks_count) {
+    qu.playFromArtist(ar.info.artisthash, ar.info.name, ar.tracks);
+    qu.play();
+    return;
+  }
+
+  const tracks = await getArtistTracks(ar.info.artisthash);
+
+  qu.playFromArtist(ar.info.artisthash, ar.info.name, tracks);
+  qu.play(index);
+}
+
+export { utilPlayFromArtist };

src/config.ts

@@ -95,4 +95,6 @@ const paths = {
   },
 };
 
+
+
 export { paths, toggleMode };

src/stores/pages/artist.ts

@@ -1,8 +1,9 @@
 import { defineStore } from "pinia";
 
-import { Artist, Album, Track } from "@/interfaces";
-import { getArtistData, getArtistAlbums } from "@/composables/fetch/artists";
+import { getArtistAlbums, getArtistData } from "@/composables/fetch/artists";
+import { Album, Artist, Track } from "@/interfaces";
 import { maxAbumCards } from "@/stores/content-width";
+import useSettingsStore from "@/stores/settings";
 
 export default defineStore("artistPage", {
   state: () => ({
@@ -11,16 +12,21 @@ export default defineStore("artistPage", {
     albums: <Album[]>[],
     eps: <Album[]>[],
     singles: <Album[]>[],
+    appearances: <Album[]>[],
   }),
   actions: {
     async getData(hash: string) {
-      const { artist, tracks } = await getArtistData(hash);
+      const settings = useSettingsStore();
+      const { artist, tracks } = await getArtistData(
+        hash,
+        settings.artist_top_tracks_count
+      );
 
       this.info = artist;
       this.tracks = tracks;
     },
     async getArtistAlbums() {
-      const { albums, eps, singles } = await getArtistAlbums(
+      const { albums, eps, singles, appearances } = await getArtistAlbums(
         this.info.artisthash,
         maxAbumCards.value
       );
@@ -28,6 +34,7 @@ export default defineStore("artistPage", {
       this.albums = albums;
       this.eps = eps;
       this.singles = singles;
+      this.appearances = appearances;
 
       // if (albums.length > 0) {
       // }

src/stores/settings/index.ts

@@ -8,6 +8,7 @@ export default defineStore("settings", {
     use_sidebar: true,
     extend_width: false,
     contextChildrenShowMode: contextChildrenShowMode.click,
+    artist_top_tracks_count: 5,
   }),
   actions: {
     toggleUseNPImg() {

src/views/ArtistView/Main.vue

@@ -99,6 +99,11 @@ const scrollerItems = computed(() => {
     components.push(singles);
   }
 
+  if (store.appearances.length > 0) {
+    const appearances = createAbumComponent("Appearances", store.appearances);
+    components.push(appearances);
+  }
+
   return components;
 });