chuni: hide favorite icon if no profile

This commit is contained in:
sk1982 2024-04-02 02:14:08 -04:00
parent 4c16d0427b
commit cbca0eaa44
2 changed files with 17 additions and 12 deletions

View File

@ -11,6 +11,7 @@ import { HeartIcon as SolidHeartIcon } from '@heroicons/react/24/solid';
import { HeartIcon as OutlineHeartIcon } from '@heroicons/react/24/outline';
import { useState } from 'react';
import { useErrorModal } from '@/components/error-modal';
import { useUser } from '@/helpers/use-user';
type ChuniMusicDetailProps = {
music: ChuniMusic[],
@ -22,6 +23,7 @@ export const ChuniMusicDetail = ({ music, playlog }: ChuniMusicDetailProps) => {
const [favorite, setFavorite] = useState(music[0].favorite);
const [pendingFavorite, setPendingFavorite] = useState(false);
const setError = useErrorModal();
const user = useUser();
return (<div className="flex flex-col items-center sm:mt-2">
<MusicPlayer className="xl:self-start xl:mt-3 xl:ml-3 mb-3 sm:mb-6" image={getJacketUrl(`chuni/jacket/${music[0].jacketPath}`)}
@ -29,22 +31,22 @@ export const ChuniMusicDetail = ({ music, playlog }: ChuniMusicDetailProps) => {
<Ticker className="font-semibold text-center sm:text-left">{ music[0].title }</Ticker>
<Ticker className="text-center sm:text-left">{ music[0].artist }</Ticker>
<span className="text-medium">{ music[0].genre }</span>
<Button isIconOnly className={`absolute right-2 top-2 ${favorite ? 'text-red-500' : 'text-gray-500'}`} radius="full"
{!!user?.chuni && <Button isIconOnly className={`absolute right-2 top-2 ${favorite ? 'text-red-500' : 'text-gray-500'}`} radius="full"
variant="light" onPress={() => {
if (pendingFavorite) return;
setPendingFavorite(true);
const f = favorite;
setFavorite(!f);
(f ? removeFavoriteMusic : addFavoriteMusic)(music[0].songId!)
.then(res => {
if (res?.error) {
setFavorite(f);
return setError(`Failed to set favorite: ${res.message}`);
}
}).finally(() => setPendingFavorite(false))
}}>
.then(res => {
if (res?.error) {
setFavorite(f);
return setError(`Failed to set favorite: ${res.message}`);
}
}).finally(() => setPendingFavorite(false));
}}>
{favorite ? <SolidHeartIcon className="w-3/4" /> : <OutlineHeartIcon className="w-3/4" />}
</Button>
</Button>}
</MusicPlayer>
<ChuniMusicPlaylog music={music} playlog={playlog} />
</div>);

View File

@ -16,6 +16,7 @@ import { Ticker, TickerHoverProvider } from '@/components/ticker';
import { useErrorModal } from '@/components/error-modal';
import { CHUNI_FILTER_DIFFICULTY, CHUNI_FILTER_FAVORITE, CHUNI_FILTER_GENRE, CHUNI_FILTER_LAMP, CHUNI_FILTER_LEVEL, CHUNI_FILTER_RATING, CHUNI_FILTER_SCORE, CHUNI_FILTER_WORLDS_END_STARS, CHUNI_FILTER_WORLDS_END_TAG } from '@/helpers/chuni/filter';
import { WindowScrollerGrid } from '@/components/window-scroller-grid';
import { useUser } from '@/helpers/use-user';
export type ChuniMusicListProps = {
music: ChuniMusic[]
@ -51,6 +52,8 @@ const MusicGrid = ({ music, size, setMusicList, fullMusicList }: ChuniMusicListP
setMusicList: (m: typeof music) => void,
fullMusicList: ChuniMusicListProps['music']
}) => {
const user = useUser();
let itemWidth = 0;
let itemHeight = 0;
let itemClass = '';
@ -90,7 +93,7 @@ const MusicGrid = ({ music, size, setMusicList, fullMusicList }: ChuniMusicListP
</div>}
<ChuniLevelBadge className={`${size === 'lg' ? 'h-14' : 'w-14'} absolute bottom-px right-px`} music={item} />
<Button isIconOnly className={`absolute top-0 left-0 pt-1 bg-gray-600/25 ${item.favorite ? 'text-red-500': ''}`}
{!!user?.chuni && <Button isIconOnly className={`absolute top-0 left-0 pt-1 bg-gray-600/25 ${item.favorite ? 'text-red-500' : ''}`}
size={size === 'xs' ? 'sm' : 'md'} variant="flat" radius="full"
onPress={() => {
if (pendingFavorite) return;
@ -112,10 +115,10 @@ const MusicGrid = ({ music, size, setMusicList, fullMusicList }: ChuniMusicListP
return setError(`Failed to set favorite: ${res.message}`);
}
})
.finally(() => setPendingFavorite(false))
.finally(() => setPendingFavorite(false));
}}>
{item.favorite ? <SolidHeartIcon className="w-3/4" /> : <OutlineHeartIcon className="w-3/4" />}
</Button>
</Button>}
</div>
<div className="px-0.5 mb-1 flex">
{size === 'lg' && <div className="h-full w-1/3 mr-0.5">