mirror of
https://github.com/tcsenpai/swingmusic.git
synced 2025-07-28 13:41:42 +00:00
handle favoriting in album page
+ fix fetching artist albums + create favoriteHandler composable
This commit is contained in:
parent
a0cf95024c
commit
d250928573
@ -50,7 +50,7 @@
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<PlayBtnRect :source="playSources.album" :store="useAlbumStore" />
|
||||
<HeartSvg />
|
||||
<HeartSvg :state="is_fav" @handleFav="handleFav"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -85,14 +85,15 @@ 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 { favType, 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";
|
||||
import favoriteHandler from "@/composables/favoriteHandler";
|
||||
|
||||
defineProps<{
|
||||
const props = defineProps<{
|
||||
album: Album;
|
||||
}>();
|
||||
|
||||
@ -115,6 +116,12 @@ function handleVisibilityState(state: boolean) {
|
||||
}
|
||||
|
||||
useVisibility(albumheaderthing, handleVisibilityState);
|
||||
|
||||
const is_fav = ref(props.album.is_favorite);
|
||||
|
||||
function handleFav() {
|
||||
favoriteHandler(is_fav, favType.album, props.album.albumhash);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@ -173,7 +180,6 @@ useVisibility(albumheaderthing, handleVisibilityState);
|
||||
|
||||
.art {
|
||||
display: inline-flex;
|
||||
// align-items: center;
|
||||
gap: $small;
|
||||
|
||||
img {
|
||||
|
@ -51,38 +51,23 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
import { paths } from "@/config";
|
||||
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";
|
||||
import { favType, playSources } from "@/composables/enums";
|
||||
import favoriteHandler from "@/composables/favoriteHandler";
|
||||
|
||||
import PlayBtnRect from "../shared/PlayBtnRect.vue";
|
||||
import HeartSvg from "@/components/shared/HeartSvg.vue";
|
||||
import { ref } from "vue";
|
||||
import { addFavorite, removeFavorite } from "@/composables/fetch/favorite";
|
||||
|
||||
const artist = useArtistPageStore();
|
||||
const is_fav = ref(artist.info.is_favorite);
|
||||
|
||||
async function handleFav() {
|
||||
if (is_fav.value) {
|
||||
const removed = await removeFavorite(
|
||||
favType.artist,
|
||||
artist.info.artisthash
|
||||
);
|
||||
|
||||
if (removed) {
|
||||
is_fav.value = false;
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const added = await addFavorite(favType.artist, artist.info.artisthash);
|
||||
|
||||
if (added) {
|
||||
is_fav.value = true;
|
||||
}
|
||||
function handleFav() {
|
||||
favoriteHandler(is_fav, favType.artist, artist.info.artisthash);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -1,5 +1,11 @@
|
||||
<template>
|
||||
<button class="heart-button circular" @click="emit('handleFav')">
|
||||
<button
|
||||
class="heart-button circular"
|
||||
@click="emit('handleFav')"
|
||||
:class="{
|
||||
is_fav: state,
|
||||
}"
|
||||
>
|
||||
<HeartFillSvg v-if="state" />
|
||||
<HeartSvg v-else />
|
||||
</button>
|
||||
@ -19,15 +25,18 @@ const emit = defineEmits<{
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$bg: rgb(250, 33, 33);
|
||||
|
||||
.heart-button {
|
||||
$bg: rgb(255, 184, 184);
|
||||
background: $bg;
|
||||
align-items: center;
|
||||
padding: 0 1rem;
|
||||
gap: $smaller;
|
||||
border: solid 1px $bg;
|
||||
background: transparent;
|
||||
color: rgb(250, 33, 33);
|
||||
|
||||
&:hover {
|
||||
background: $bg;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@ -14,7 +14,7 @@
|
||||
{{ index }}
|
||||
</div>
|
||||
<div class="heart-icon">
|
||||
<HeartFillSvg v-if="fav" />
|
||||
<HeartFillSvg v-if="is_fav" />
|
||||
<HeartSvg v-else />
|
||||
</div>
|
||||
</div>
|
||||
@ -83,10 +83,10 @@ import OptionSvg from "@/assets/icons/more.svg";
|
||||
import ArtistName from "./ArtistName.vue";
|
||||
|
||||
import useQueueStore from "@/stores/queue";
|
||||
import { addFavorite, removeFavorite } from "@/composables/fetch/favorite";
|
||||
import { favType } from "@/composables/enums";
|
||||
|
||||
import MasterFlag from "./MasterFlag.vue";
|
||||
import favoriteHandler from "@/composables/favoriteHandler";
|
||||
|
||||
const imguri = paths.images.thumb.small;
|
||||
const context_menu_showing = ref(false);
|
||||
@ -120,24 +120,10 @@ function isCurrentPlaying() {
|
||||
return isCurrent() && queue.playing;
|
||||
}
|
||||
|
||||
const fav = ref(props.track.is_favorite);
|
||||
const is_fav = ref(props.track.is_favorite);
|
||||
|
||||
async function addToFav(trackhash: string) {
|
||||
if (fav.value) {
|
||||
const removed = await removeFavorite(favType.track, trackhash);
|
||||
|
||||
if (removed) {
|
||||
fav.value = false;
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const added = await addFavorite(favType.track, trackhash);
|
||||
|
||||
if (added) {
|
||||
fav.value = true;
|
||||
}
|
||||
function addToFav(trackhash: string) {
|
||||
favoriteHandler(is_fav, favType.track, trackhash);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
31
src/composables/favoriteHandler.ts
Normal file
31
src/composables/favoriteHandler.ts
Normal file
@ -0,0 +1,31 @@
|
||||
import { Ref } from "vue";
|
||||
import { favType } from "./enums";
|
||||
import { addFavorite, removeFavorite } from "./fetch/favorite";
|
||||
|
||||
/**
|
||||
* Handles the favorite state of an item.
|
||||
* @param flag The ref to track the is_favorite state
|
||||
* @param type The type of item
|
||||
* @param itemhash The hash of the item
|
||||
*/
|
||||
export default async function favoriteHandler(
|
||||
flag: Ref<boolean | undefined>,
|
||||
type: favType,
|
||||
itemhash: string
|
||||
) {
|
||||
if (flag.value) {
|
||||
const removed = await removeFavorite(type, itemhash);
|
||||
|
||||
if (removed) {
|
||||
flag.value = false;
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const added = await addFavorite(type, itemhash);
|
||||
|
||||
if (added) {
|
||||
flag.value = true;
|
||||
}
|
||||
}
|
@ -54,6 +54,7 @@ export interface Album {
|
||||
is_soundtrack: boolean;
|
||||
is_single: boolean;
|
||||
is_EP: boolean;
|
||||
is_favorite: boolean;
|
||||
genres: string[];
|
||||
}
|
||||
|
||||
|
@ -43,7 +43,7 @@ export default defineStore("artistDiscography", {
|
||||
this.page = page;
|
||||
},
|
||||
fetchAlbums(artisthash: string) {
|
||||
getArtistAlbums(artisthash, true)
|
||||
getArtistAlbums(artisthash, 0, true)
|
||||
.then((data) => {
|
||||
this.albums = data.albums;
|
||||
this.eps = data.eps;
|
||||
|
Loading…
x
Reference in New Issue
Block a user