vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-06-17 17:04:16 +02:00
Code Issues Packages Projects Releases Wiki Activity

add basic mobile responsive layout

Browse Source
This commit is contained in:
jeffvli
2025-11-19 19:23:44 -08:00
parent 485fe8085c
commit c763824803
26 changed files with 1930 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/player/components/mobile-playerbar.tsx
+229
View File
@@ -0,0 +1,229 @@
import clsx from 'clsx';
import { AnimatePresence, LayoutGroup, motion } from 'motion/react';
import React, { MouseEvent } from 'react';
import { useTranslation } from 'react-i18next';
import { generatePath, Link } from 'react-router';
import styles from './mobile-playerbar.module.css';
import { ContextMenuController } from '/@/renderer/features/context-menu/context-menu-controller';
import { PlayButton, PlayerButton } from '/@/renderer/features/player/components/player-button';
import { usePlayer } from '/@/renderer/features/player/context/player-context';
import { AppRoute } from '/@/renderer/router/routes';
import {
useFullScreenPlayerStore,
useFullScreenPlayerStoreActions,
usePlayerSong,
usePlayerStatus,
useSetFullScreenPlayerStore,
} from '/@/renderer/store';
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
import { Group } from '/@/shared/components/group/group';
import { Icon } from '/@/shared/components/icon/icon';
import { Image } from '/@/shared/components/image/image';
import { Separator } from '/@/shared/components/separator/separator';
import { Text } from '/@/shared/components/text/text';
import { Tooltip } from '/@/shared/components/tooltip/tooltip';
import { PlaybackSelectors } from '/@/shared/constants/playback-selectors';
import { LibraryItem } from '/@/shared/types/domain-types';
import { PlayerStatus } from '/@/shared/types/types';
export const MobilePlayerbar = () => {
const { t } = useTranslation();
const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
const { setStore } = useFullScreenPlayerStoreActions();
const currentSong = usePlayerSong();
const status = usePlayerStatus();
const { mediaTogglePlayPause, mediaNext, mediaPrevious } = usePlayer();
const title = currentSong?.name;
const artists = currentSong?.artists;
const isSongDefined = Boolean(currentSong?.id);
const handleToggleFullScreenPlayer = (e?: KeyboardEvent | MouseEvent<HTMLDivElement>) => {
e?.stopPropagation();
// Set active tab to player when opening fullscreen player
setStore({ activeTab: 'player' });
setFullScreenPlayerStore({ expanded: !isFullScreenPlayerExpanded });
};
const handleToggleContextMenu = (e: MouseEvent<HTMLButtonElement | HTMLDivElement>) => {
e.preventDefault();
e.stopPropagation();
if (!currentSong) {
return;
}
ContextMenuController.call({
cmd: { items: [currentSong], type: LibraryItem.SONG },
event: e as MouseEvent<HTMLDivElement>,
});
};
const stopPropagation = (e?: MouseEvent) => e?.stopPropagation();
return (
<div className={clsx(styles.container, PlaybackSelectors.mediaPlayer)}>
<LayoutGroup>
<AnimatePresence initial={false} mode="popLayout">
{currentSong?.imageUrl && (
<div className={styles.imageWrapper}>
<motion.div
animate={{ opacity: 1, scale: 1 }}
className={styles.image}
exit={{ opacity: 0 }}
initial={{ opacity: 0 }}
key="mobile-playerbar-image"
onClick={handleToggleFullScreenPlayer}
onContextMenu={handleToggleContextMenu}
role="button"
transition={{ duration: 0.2, ease: 'easeIn' }}
>
<Tooltip
label={t('player.toggleFullscreenPlayer', {
postProcess: 'sentenceCase',
})}
openDelay={500}
>
<Image
className={clsx(
styles.playerbarImage,
PlaybackSelectors.playerCoverArt,
)}
loading="eager"
src={currentSong.imageUrl}
/>
</Tooltip>
</motion.div>
</div>
)}
</AnimatePresence>
<motion.div className={styles.metadataStack} layout="position">
<div className={styles.lineItem} onClick={stopPropagation}>
<Group align="center" gap="xs" wrap="nowrap">
<Text
className={PlaybackSelectors.songTitle}
component={Link}
fw={500}
isLink
onClick={handleToggleFullScreenPlayer}
onContextMenu={handleToggleContextMenu}
overflow="hidden"
size="sm"
to={AppRoute.NOW_PLAYING}
truncate
>
{title || '—'}
</Text>
{isSongDefined && (
<ActionIcon
icon="ellipsisVertical"
onClick={handleToggleContextMenu}
size="xs"
styles={{
root: {
'--ai-size-xs': '1.15rem',
},
}}
variant="subtle"
/>
)}
</Group>
</div>
<div
className={clsx(
styles.lineItem,
styles.secondary,
PlaybackSelectors.songArtist,
)}
onClick={stopPropagation}
>
{artists?.map((artist, index) => (
<React.Fragment key={`bar-${artist.id}`}>
{index > 0 && <Separator />}
<Text
component={artist.id ? Link : undefined}
fw={500}
isLink={artist.id !== ''}
onClick={handleToggleFullScreenPlayer}
overflow="hidden"
size="xs"
to={
artist.id
? generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
albumArtistId: artist.id,
})
: undefined
}
>
{artist.name || '—'}
</Text>
</React.Fragment>
))}
</div>
<div
className={clsx(
styles.lineItem,
styles.secondary,
PlaybackSelectors.songAlbum,
)}
onClick={stopPropagation}
>
<Text
component={Link}
fw={500}
isLink
onClick={handleToggleFullScreenPlayer}
overflow="hidden"
size="xs"
to={
currentSong?.albumId
? generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, {
albumId: currentSong.albumId,
})
: ''
}
>
{currentSong?.album || '—'}
</Text>
</div>
</motion.div>
</LayoutGroup>
<div className={styles.controlsWrapper}>
<PlayerButton
icon={<Icon fill="default" icon="mediaPrevious" size="md" />}
onClick={(e) => {
e.stopPropagation();
mediaPrevious();
}}
tooltip={{
label: t('player.previous', { postProcess: 'sentenceCase' }),
openDelay: 0,
}}
variant="tertiary"
/>
<PlayButton
disabled={currentSong?.id === undefined}
isPaused={status === PlayerStatus.PAUSED}
onClick={(e) => {
e.stopPropagation();
mediaTogglePlayPause();
}}
/>
<PlayerButton
icon={<Icon fill="default" icon="mediaNext" size="md" />}
onClick={(e) => {
e.stopPropagation();
mediaNext();
}}
tooltip={{
label: t('player.next', { postProcess: 'sentenceCase' }),
openDelay: 0,
}}
variant="tertiary"
/>
</div>
</div>
);
};