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

Add fullscreen player button tooltip

Browse source
This commit is contained in:
jeffvli 2023-05-21 15:09:32 -07:00
parent 0c3b030b13
commit 977cb89481
1 changed files with 29 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -5,7 +5,7 @@ import { motion, AnimatePresence, LayoutGroup } from 'framer-motion';
import { RiArrowUpSLine, RiDiscLine, RiMore2Fill } from 'react-icons/ri'; import { RiArrowUpSLine, RiDiscLine, RiMore2Fill } from 'react-icons/ri';
import { generatePath, Link } from 'react-router-dom'; import { generatePath, Link } from 'react-router-dom';
import styled from 'styled-components'; import styled from 'styled-components';
import { Button, Text } from '/@/renderer/components'; import { Button, Text, Tooltip } from '/@/renderer/components';
import { AppRoute } from '/@/renderer/router/routes'; import { AppRoute } from '/@/renderer/router/routes';
import { import {
useAppStoreActions, useAppStoreActions,
@ -28,6 +28,7 @@ const LeftControlsContainer = styled.div`
`; `;
const ImageWrapper = styled.div` const ImageWrapper = styled.div`
position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -44,6 +45,7 @@ const MetadataStack = styled(motion.div)`
`; `;
const Image = styled(motion.div)` const Image = styled(motion.div)`
position: relative;
width: 60px; width: 60px;
height: 60px; height: 60px;
background-color: var(--placeholder-bg); background-color: var(--placeholder-bg);
@ -137,26 +139,32 @@ export const LeftControls = () => {
transition={{ duration: 0.3, ease: 'easeInOut' }} transition={{ duration: 0.3, ease: 'easeInOut' }}
onClick={handleToggleFullScreenPlayer} onClick={handleToggleFullScreenPlayer}
> >
{currentSong?.imageUrl ? ( <Tooltip
<PlayerbarImage label="Open fullscreen player"
loading="eager" openDelay={500}
src={currentSong?.imageUrl} >
/> {currentSong?.imageUrl ? (
) : ( <PlayerbarImage
<> loading="eager"
<Center src={currentSong?.imageUrl}
sx={{ />
background: 'var(--placeholder-bg)', ) : (
height: '100%', <>
}} <Center
> sx={{
<RiDiscLine background: 'var(--placeholder-bg)',
color="var(--placeholder-fg)" height: '100%',
size={50} }}
/> >
</Center> <RiDiscLine
</> color="var(--placeholder-fg)"
)} size={50}
/>
</Center>
</>
)}
</Tooltip>
{!collapsed && ( {!collapsed && (
<Button <Button
compact compact