handle favoriting in album page

+ fix fetching artist albums
+ create favoriteHandler composable
This commit is contained in:
geoffrey45 2022-12-28 09:07:55 +03:00 committed by Mungai Njoroge
parent a0cf95024c
commit d250928573
7 changed files with 69 additions and 51 deletions

View File

@ -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 {

View File

@ -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>

View File

@ -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>

View File

@ -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>

View 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;
}
}

View File

@ -54,6 +54,7 @@ export interface Album {
is_soundtrack: boolean;
is_single: boolean;
is_EP: boolean;
is_favorite: boolean;
genres: string[];
}

View File

@ -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;