chuni: hide favorite icon if no profile
This commit is contained in:
parent
4c16d0427b
commit
cbca0eaa44
@ -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>);
|
||||
|
@ -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">
|
||||
|
Loading…
Reference in New Issue
Block a user