diff --git a/src/assets/scss/Global/app-grid.scss b/src/assets/scss/Global/app-grid.scss index b3e52468..bf246c44 100644 --- a/src/assets/scss/Global/app-grid.scss +++ b/src/assets/scss/Global/app-grid.scss @@ -110,7 +110,7 @@ $g-border: solid 1px $gray5; } } -.v-scroll-page.isSmall { +.isSmall { .songlist-item { grid-template-columns: 1.75rem 2fr 2.5rem 2.5rem; } @@ -128,7 +128,7 @@ $g-border: solid 1px $gray5; } } -.v-scroll-page.isMedium { +.isMedium { // hide album column .songlist-item { grid-template-columns: 1.75rem 1.5fr 1fr 2.5rem 2.5rem; diff --git a/src/components/AlbumView/ArtistAlbums.vue b/src/components/AlbumView/ArtistAlbums.vue index c7c63809..63d394b2 100644 --- a/src/components/AlbumView/ArtistAlbums.vue +++ b/src/components/AlbumView/ArtistAlbums.vue @@ -3,17 +3,13 @@

{{ title }} - SEE ALL + SEE ALL

@@ -23,22 +19,19 @@ @@ -53,7 +46,7 @@ defineProps<{ padding: 0 $medium; margin-bottom: $small; - .see-more { + .see-all { font-size: $medium; a:hover { diff --git a/src/components/ArtistView/TopTracks.vue b/src/components/ArtistView/TopTracks.vue index 0ae7c822..ce439a79 100644 --- a/src/components/ArtistView/TopTracks.vue +++ b/src/components/ArtistView/TopTracks.vue @@ -1,59 +1,35 @@ diff --git a/src/components/PlaylistView/FeaturedArtists.vue b/src/components/PlaylistView/FeaturedArtists.vue deleted file mode 100644 index 47d83c73..00000000 --- a/src/components/PlaylistView/FeaturedArtists.vue +++ /dev/null @@ -1,112 +0,0 @@ - - - - diff --git a/src/components/nav/Titles/QueueTitle.vue b/src/components/nav/Titles/QueueTitle.vue index 6e26ec58..7fd9afd7 100644 --- a/src/components/nav/Titles/QueueTitle.vue +++ b/src/components/nav/Titles/QueueTitle.vue @@ -27,6 +27,7 @@ import SearchSvg from "@/assets/icons/search.svg"; import ArtistSvg from "@/assets/icons/artist.svg"; import { RouteLocationRaw } from "vue-router"; +import HeartSvg from "@/assets/icons/heart.fill.svg"; const queue = useQueueStore(); @@ -95,6 +96,15 @@ function getSource() { }, }; + case FromOptions.favorite: + return { + name: "Favorite tracks", + icon: HeartSvg, + location: { + name: Routes.favorites, + }, + }; + default: return { name: "👻 No source", location: {} }; } diff --git a/src/components/shared/ArtistCard.vue b/src/components/shared/ArtistCard.vue index 5301f3d4..4189dfb6 100644 --- a/src/components/shared/ArtistCard.vue +++ b/src/components/shared/ArtistCard.vue @@ -7,16 +7,8 @@ }, }" > -
- +
+
{{ artist.name }}
@@ -33,7 +25,6 @@ const imguri = paths.images.artist.large; defineProps<{ artist: Artist; - alt?: boolean; }>(); @@ -58,7 +49,6 @@ defineProps<{ .artist-image { width: 100%; - // margin-bottom: $small; transition: all 0.5s ease-in-out; object-fit: cover; } diff --git a/src/composables/enums.ts b/src/composables/enums.ts index 7d061762..b6cc5e6a 100644 --- a/src/composables/enums.ts +++ b/src/composables/enums.ts @@ -4,7 +4,7 @@ export enum playSources { search, folder, artist, - albumCard, + favorite, } export enum NotifType { @@ -22,6 +22,7 @@ export enum FromOptions { search = "search", artist = "artist", albumCard = "albumCard", + favorite = "favorite", } export enum ContextSrc { diff --git a/src/composables/fetch/album.ts b/src/composables/fetch/album.ts index a0bf62ea..a036879c 100644 --- a/src/composables/fetch/album.ts +++ b/src/composables/fetch/album.ts @@ -8,6 +8,7 @@ const { albumartists: albumArtistsUrl, albumbio: albumBioUrl, albumsByArtistUrl, + favAlbums, } = paths.api; const getAlbumData = async (hash: string, ToastStore: typeof useNotifStore) => { diff --git a/src/composables/fetch/favorite.ts b/src/composables/fetch/favorite.ts index c27eed0d..7aec7b45 100644 --- a/src/composables/fetch/favorite.ts +++ b/src/composables/fetch/favorite.ts @@ -3,6 +3,7 @@ import { paths } from "@/config"; import { favType, NotifType } from "@/composables/enums"; import { useNotifStore as notif } from "@/stores/notification"; +import { Album, Artist, Track } from "@/interfaces"; export async function addFavorite(favtype: favType, itemhash: string) { const { data, error } = await useAxios({ @@ -45,3 +46,30 @@ export async function removeFavorite(favtype: favType, itemhash: string) { return true; } + +export async function getFavAlbums(limit = 6) { + const { data } = await useAxios({ + url: paths.api.favAlbums + `?limit=${limit}`, + get: true, + }); + + return data.albums as Album[]; +} + +export async function getFavTracks(limit = 5) { + const { data } = await useAxios({ + url: paths.api.favTracks + `?limit=${limit}`, + get: true, + }); + + return data.tracks as Track[]; +} + +export async function getFavArtists(limit = 6) { + const { data } = await useAxios({ + url: paths.api.favArtists + `?limit=${limit}`, + get: true, + }); + + return data.artists as Artist[]; +} diff --git a/src/config.ts b/src/config.ts index 051c90b2..b70b3c31 100644 --- a/src/config.ts +++ b/src/config.ts @@ -35,6 +35,9 @@ const baseImgUrl = baseApiUrl + "/img"; const paths = { api: { album: baseApiUrl + "/album", + favAlbums: baseApiUrl + "/albums/favorite", + favTracks: baseApiUrl + "/tracks/favorite", + favArtists: baseApiUrl + "/artists/favorite", artist: baseApiUrl + "/artist", favorite: baseApiUrl + "/favorite", get removeFavorite() { diff --git a/src/interfaces.ts b/src/interfaces.ts index 120ff22c..c5a3ba45 100644 --- a/src/interfaces.ts +++ b/src/interfaces.ts @@ -121,6 +121,10 @@ export interface fromArtist { artistname: string; } +export interface fromFav { + type: FromOptions.favorite; +} + export interface subPath { name: string; path: string; diff --git a/src/stores/pages/artistDiscog.ts b/src/stores/pages/artistDiscog.ts index 481de454..83e0269b 100644 --- a/src/stores/pages/artistDiscog.ts +++ b/src/stores/pages/artistDiscog.ts @@ -39,7 +39,8 @@ export default defineStore("artistDiscography", { ); } }, - setPage(page: discographyAlbumTypes) { + setPage(page: discographyAlbumTypes | undefined) { + // @ts-ignore this.page = page; }, fetchAlbums(artisthash: string) { diff --git a/src/stores/queue.ts b/src/stores/queue.ts index d5b8bd16..424da135 100644 --- a/src/stores/queue.ts +++ b/src/stores/queue.ts @@ -9,6 +9,7 @@ import updateMediaNotif from "../composables/mediaNotification"; import { fromAlbum, fromArtist, + fromFav, fromFolder, fromPlaylist, fromSearch, @@ -24,7 +25,13 @@ function shuffle(tracks: Track[]) { return shuffled; } -type From = fromFolder | fromAlbum | fromPlaylist | fromSearch | fromArtist; +type From = + | fromFolder + | fromAlbum + | fromPlaylist + | fromSearch + | fromArtist + | fromFav; let audio = new Audio(); audio.autoplay = false; @@ -189,6 +196,13 @@ export default defineStore("Queue", { this.setNewQueue(tracks); }, + playFromFav(tracks: Track[]) { + this.from = { + type: FromOptions.favorite, + }; + + this.setNewQueue(tracks); + }, addTrackToQueue(track: Track) { this.tracklist.push(track); }, diff --git a/src/views/ArtistView/Main.vue b/src/views/ArtistView/Main.vue index 37c169ff..a7309620 100644 --- a/src/views/ArtistView/Main.vue +++ b/src/views/ArtistView/Main.vue @@ -1,9 +1,5 @@