pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add fullscreen player toggle tooltip to sidebar (#114)

Browse source
This commit is contained in:
jeffvli 2023-05-21 19:47:46 -07:00
parent 4f21c26e5d
commit bc2624bffd
2 changed files with 19 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/renderer/features/player/components/left-controls.tsx
View file

@ -140,7 +140,7 @@ export const LeftControls = () => {
onClick={handleToggleFullScreenPlayer} onClick={handleToggleFullScreenPlayer}
> >
<Tooltip <Tooltip
label="Open fullscreen player" label="Toggle fullscreen player"
openDelay={500} openDelay={500}
> >
{currentSong?.imageUrl ? ( {currentSong?.imageUrl ? (

31
src/renderer/features/sidebar/components/sidebar.tsx
View file

@ -2,7 +2,7 @@ import { MouseEvent } from 'react';
import { Stack, Accordion, Center, Group, Divider, Box } from '@mantine/core'; import { Stack, Accordion, Center, Group, Divider, Box } from '@mantine/core';
import { closeAllModals, openModal } from '@mantine/modals'; import { closeAllModals, openModal } from '@mantine/modals';
import { AnimatePresence, motion } from 'framer-motion'; import { AnimatePresence, motion } from 'framer-motion';
import { Button, MotionStack, Spinner } from '/@/renderer/components'; import { Button, MotionStack, Spinner, Tooltip } from '/@/renderer/components';
import { import {
RiAddFill, RiAddFill,
RiAlbumFill, RiAlbumFill,
@ -288,19 +288,24 @@ export const Sidebar = () => {
transition={{ duration: 0.3, ease: 'easeInOut' }} transition={{ duration: 0.3, ease: 'easeInOut' }}
onClick={expandFullScreenPlayer} onClick={expandFullScreenPlayer}
> >
{upsizedImageUrl ? ( <Tooltip
<SidebarImage label="Toggle fullscreen player"
loading="eager" openDelay={500}
src={upsizedImageUrl} >
/> {upsizedImageUrl ? (
) : ( <SidebarImage
<Center sx={{ background: 'var(--placeholder-bg)', height: '100%' }}> loading="eager"
<RiDiscLine src={upsizedImageUrl}
color="var(--placeholder-fg)"
size={50}
/> />
</Center> ) : (
)} <Center sx={{ background: 'var(--placeholder-bg)', height: '100%' }}>
<RiDiscLine
color="var(--placeholder-fg)"
size={50}
/>
</Center>
)}
</Tooltip>
<Button <Button
compact compact
opacity={0.8} opacity={0.8}