add "add to favorite" buttons to artist and album page headers

+ fix album page play buttton

src/assets/icons/heart.fill.svg

@@ -1,3 +1,3 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg width="28" height="28" viewBox="0 0 28 28" fill="rgb(250, 33, 33)" xmlns="http://www.w3.org/2000/svg">
 <path d="M13.9912 22.1445C14.2197 22.1445 14.5449 21.9775 14.8086 21.8105C19.7217 18.6465 22.8682 14.9375 22.8682 11.1758C22.8682 7.9502 20.6445 5.7002 17.8408 5.7002C16.0918 5.7002 14.7822 6.66699 13.9912 8.11719C13.2178 6.67578 11.8994 5.7002 10.1504 5.7002C7.34668 5.7002 5.11426 7.9502 5.11426 11.1758C5.11426 14.9375 8.26074 18.6465 13.1738 21.8105C13.4463 21.9775 13.7715 22.1445 13.9912 22.1445Z"/>
 </svg>

src/assets/icons/heart.svg

@@ -1,3 +1,3 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.09668 11.1846C5.09668 14.9375 8.25195 18.6465 13.1562 21.8105C13.4287 21.9863 13.7627 22.1621 13.9912 22.1621C14.2197 22.1621 14.5537 21.9863 14.8262 21.8105C19.7393 18.6465 22.8857 14.9375 22.8857 11.1846C22.8857 7.94141 20.6445 5.69141 17.7705 5.69141C16.0918 5.69141 14.7822 6.45605 13.9912 7.61621C13.2178 6.46484 11.8994 5.69141 10.2207 5.69141C7.33789 5.69141 5.09668 7.94141 5.09668 11.1846ZM6.90723 11.1758C6.90723 8.96094 8.36621 7.45801 10.3262 7.45801C11.9082 7.45801 12.7959 8.41602 13.3496 9.25098C13.5957 9.61133 13.7627 9.72559 13.9912 9.72559C14.2285 9.72559 14.3779 9.60254 14.6328 9.25098C15.2305 8.43359 16.083 7.45801 17.6562 7.45801C19.625 7.45801 21.084 8.96094 21.084 11.1758C21.084 14.2695 17.8672 17.6973 14.1582 20.1582C14.0791 20.2109 14.0264 20.2461 13.9912 20.2461C13.9561 20.2461 13.9033 20.2109 13.833 20.1582C10.124 17.6973 6.90723 14.2695 6.90723 11.1758Z" fill="#F2F2F2"/>
+<svg width="28" fill="rgb(250, 33, 33)" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.09668 11.1846C5.09668 14.9375 8.25195 18.6465 13.1562 21.8105C13.4287 21.9863 13.7627 22.1621 13.9912 22.1621C14.2197 22.1621 14.5537 21.9863 14.8262 21.8105C19.7393 18.6465 22.8857 14.9375 22.8857 11.1846C22.8857 7.94141 20.6445 5.69141 17.7705 5.69141C16.0918 5.69141 14.7822 6.45605 13.9912 7.61621C13.2178 6.46484 11.8994 5.69141 10.2207 5.69141C7.33789 5.69141 5.09668 7.94141 5.09668 11.1846ZM6.90723 11.1758C6.90723 8.96094 8.36621 7.45801 10.3262 7.45801C11.9082 7.45801 12.7959 8.41602 13.3496 9.25098C13.5957 9.61133 13.7627 9.72559 13.9912 9.72559C14.2285 9.72559 14.3779 9.60254 14.6328 9.25098C15.2305 8.43359 16.083 7.45801 17.6562 7.45801C19.625 7.45801 21.084 8.96094 21.084 11.1758C21.084 14.2695 17.8672 17.6973 14.1582 20.1582C14.0791 20.2109 14.0264 20.2461 13.9912 20.2461C13.9561 20.2461 13.9033 20.2109 13.833 20.1582C10.124 17.6973 6.90723 14.2695 6.90723 11.1758Z" />
 </svg>

src/assets/scss/Global/basic.scss

@@ -15,6 +15,15 @@
   max-width: 100%;
 }
 
+.ellip2 {
+  word-wrap: break-word;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .heading {
   font-size: 2rem;
   font-weight: bold;
@@ -99,8 +108,6 @@ button {
   width: 2.5rem;
 }
 
-
-
 // POSITION
 
 .abs {

src/components/AlbumView/Header.vue

@@ -32,7 +32,7 @@
             <span v-else-if="album.is_single">Single</span>
             <span v-else>Album</span>
           </div>
-          <div class="title ellip" v-tooltip>
+          <div class="title ellip2" v-tooltip>
             {{ album.title }}
           </div>
         </div>
@@ -48,7 +48,10 @@
               {{ formatSeconds(album.duration, true) }}
             </div>
           </div>
+          <div class="buttons">
             <PlayBtnRect :source="playSources.album" :store="useAlbumStore" />
+            <HeartSvg />
+          </div>
         </div>
       </div>
       <div class="art" v-if="!albumHeaderSmall">
@@ -85,6 +88,7 @@ import { isLight } from "@/composables/colors/album";
 import { playSources } from "@/composables/enums";
 import { Album } from "@/interfaces";
 import { Routes } from "@/router/routes";
+import HeartSvg from "../shared/HeartSvg.vue";
 
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
 
@@ -130,6 +134,11 @@ useVisibility(albumheaderthing, handleVisibilityState);
   background-color: $black;
   align-items: flex-end;
 
+  .buttons {
+    display: flex;
+    gap: $small;
+  }
+
   .big-img {
     height: calc(100%);
     width: 16rem;

src/components/ArtistView/Header.vue

@@ -17,7 +17,7 @@
     >
       <section class="text">
         <div class="card-title">Artist</div>
-        <div class="artist-name">{{ artist.info.name }}</div>
+        <div class="artist-name ellip2">{{ artist.info.name }}</div>
         <div class="stats">
           {{ artist.info.trackcount }} Track{{
             `${artist.info.trackcount == 1 ? "" : "s"}`
@@ -29,7 +29,10 @@
           {{ formatSeconds(artist.info.duration, true) }}
         </div>
       </section>
+      <div class="buttons">
         <PlayBtnRect :source="playSources.artist" :store="useArtistPageStore" />
+        <HeartSvg />
+      </div>
     </div>
     <div class="artist-img no-select">
       <img :src="paths.images.artist.large + artist.info.image" />
@@ -54,6 +57,7 @@ import formatSeconds from "@/utils/useFormatSeconds";
 import { isLight } from "@/composables/colors/album";
 import { paths } from "@/config";
 import { playSources } from "@/composables/enums";
+import HeartSvg from "@/components/shared/HeartSvg.vue";
 
 const artist = useArtistPageStore();
 </script>
@@ -68,11 +72,13 @@ const artist = useArtistPageStore();
 .artist-page-header {
   height: 18rem;
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 50% 50%;
   position: relative;
 
   .artist-img {
+    // border: solid red;
     height: 18rem;
+    width: 100%;
 
     img {
       height: 100%;
@@ -120,12 +126,7 @@ const artist = useArtistPageStore();
     .artist-name {
       font-size: 3rem;
       font-weight: bold;
-
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      word-wrap: break-word;
     }
 
     .stats {
@@ -136,5 +137,10 @@ const artist = useArtistPageStore();
   .artist-info.nocontrast {
     color: $black;
   }
+
+  .buttons {
+    display: flex;
+    gap: $small;
+  }
 }
 </style>

src/components/PlaylistView/Header.vue

@@ -21,7 +21,7 @@
           {{ formatSeconds(info.duration, true) }}
         </div>
         <div class="title ellip">{{ info.name }}</div>
-        <div class="type">PLAYLIST</div>
+        <div class="type">Playlist</div>
       </div>
     </div>
     <div class="last-updated" :class="{ lightbg: !info.image }">

src/components/shared/HeartSvg.vue

@@ -0,0 +1,21 @@
+<template>
+  <button class="heart-button circular"><HeartSvg /></button>
+</template>
+
+<script setup lang="ts">
+import HeartSvg from "@/assets/icons/heart.svg";
+</script>
+
+<style lang="scss">
+.heart-button {
+  $bg: rgb(247, 149, 149);
+  background: $bg;
+  align-items: center;
+  padding: 0 1rem;
+  gap: $smaller;
+
+  &:hover {
+    background: $bg;
+  }
+}
+</style>

src/components/shared/SongItem.vue

@@ -169,7 +169,6 @@ async function addToFav(trackhash: string) {
     background-color: $gray5;
 
     .index {
-
       .text {
         transition-delay: 500ms;
 
@@ -202,7 +201,6 @@ async function addToFav(trackhash: string) {
   }
 
   .index {
-    opacity: 0.5;
     font-size: 0.8rem;
     width: 100%;
     position: relative;
@@ -211,7 +209,7 @@ async function addToFav(trackhash: string) {
     justify-content: center;
 
     .text {
-      opacity: 1;
+      opacity: 0.5;
       display: block;
       margin: auto 0;
       transition: all 0.25s;
@@ -226,7 +224,6 @@ async function addToFav(trackhash: string) {
       align-content: center;
       transition: all 0.2s;
       transform: translateX(-1.5rem);
-      color: red;
     }
   }
 

src/composables/usePlayFrom.ts

@@ -47,7 +47,7 @@ export default async function play(
       useQueue.playFromAlbum(
         a_store.info.title,
         a_store.info.albumhash,
-        a_store.allTracks
+        a_store.srcTracks
       );
       useQueue.play();
       break;