sk1982/actaeon
2
5
Fork 3
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

chuni: hide favorite icon if no profile

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/app/(with-header)/chuni/music/[musicId]/music-detail.tsx
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 { HeartIcon as OutlineHeartIcon } from '@heroicons/react/24/outline';
import { useState } from 'react'; import { useState } from 'react';
import { useErrorModal } from '@/components/error-modal'; import { useErrorModal } from '@/components/error-modal';
import { useUser } from '@/helpers/use-user';
type ChuniMusicDetailProps = { type ChuniMusicDetailProps = {
music: ChuniMusic[], music: ChuniMusic[],
@ -22,6 +23,7 @@ export const ChuniMusicDetail = ({ music, playlog }: ChuniMusicDetailProps) => {
const [favorite, setFavorite] = useState(music[0].favorite); const [favorite, setFavorite] = useState(music[0].favorite);
const [pendingFavorite, setPendingFavorite] = useState(false); const [pendingFavorite, setPendingFavorite] = useState(false);
const setError = useErrorModal(); const setError = useErrorModal();
const user = useUser();
return (<div className="flex flex-col items-center sm:mt-2"> 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}`)} <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="font-semibold text-center sm:text-left">{ music[0].title }</Ticker>
<Ticker className="text-center sm:text-left">{ music[0].artist }</Ticker> <Ticker className="text-center sm:text-left">{ music[0].artist }</Ticker>
<span className="text-medium">{ music[0].genre }</span> <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={() => { variant="light" onPress={() => {
if (pendingFavorite) return; if (pendingFavorite) return;
setPendingFavorite(true); setPendingFavorite(true);
const f = favorite; const f = favorite;
setFavorite(!f); setFavorite(!f);
(f ? removeFavoriteMusic : addFavoriteMusic)(music[0].songId!) (f ? removeFavoriteMusic : addFavoriteMusic)(music[0].songId!)
.then(res => { .then(res => {
if (res?.error) { if (res?.error) {
setFavorite(f); setFavorite(f);
return setError(`Failed to set favorite: ${res.message}`); return setError(`Failed to set favorite: ${res.message}`);
} }
}).finally(() => setPendingFavorite(false)) }).finally(() => setPendingFavorite(false));
}}> }}>
{favorite ? <SolidHeartIcon className="w-3/4" /> : <OutlineHeartIcon className="w-3/4" />} {favorite ? <SolidHeartIcon className="w-3/4" /> : <OutlineHeartIcon className="w-3/4" />}
</Button> </Button>}
</MusicPlayer> </MusicPlayer>
<ChuniMusicPlaylog music={music} playlog={playlog} /> <ChuniMusicPlaylog music={music} playlog={playlog} />
</div>); </div>);

9
src/app/(with-header)/chuni/music/music-list.tsx
View File

@ -16,6 +16,7 @@ import { Ticker, TickerHoverProvider } from '@/components/ticker';
import { useErrorModal } from '@/components/error-modal'; 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 { 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 { WindowScrollerGrid } from '@/components/window-scroller-grid';
import { useUser } from '@/helpers/use-user';
export type ChuniMusicListProps = { export type ChuniMusicListProps = {
music: ChuniMusic[] music: ChuniMusic[]
@ -51,6 +52,8 @@ const MusicGrid = ({ music, size, setMusicList, fullMusicList }: ChuniMusicListP
setMusicList: (m: typeof music) => void, setMusicList: (m: typeof music) => void,
fullMusicList: ChuniMusicListProps['music'] fullMusicList: ChuniMusicListProps['music']
}) => { }) => {
const user = useUser();
let itemWidth = 0; let itemWidth = 0;
let itemHeight = 0; let itemHeight = 0;
let itemClass = ''; let itemClass = '';
@ -90,7 +93,7 @@ const MusicGrid = ({ music, size, setMusicList, fullMusicList }: ChuniMusicListP
</div>} </div>}
<ChuniLevelBadge className={`${size === 'lg' ? 'h-14' : 'w-14'} absolute bottom-px right-px`} music={item} /> <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" size={size === 'xs' ? 'sm' : 'md'} variant="flat" radius="full"
onPress={() => { onPress={() => {
if (pendingFavorite) return; if (pendingFavorite) return;
@ -112,10 +115,10 @@ const MusicGrid = ({ music, size, setMusicList, fullMusicList }: ChuniMusicListP
return setError(`Failed to set favorite: ${res.message}`); 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" />} {item.favorite ? <SolidHeartIcon className="w-3/4" /> : <OutlineHeartIcon className="w-3/4" />}
</Button> </Button>}
</div> </div>
<div className="px-0.5 mb-1 flex"> <div className="px-0.5 mb-1 flex">
{size === 'lg' && <div className="h-full w-1/3 mr-0.5"> {size === 'lg' && <div className="h-full w-1/3 mr-0.5">