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