Add fullscreen player button tooltip

This commit is contained in:
jeffvli 2023-05-21 15:09:32 -07:00
parent 0c3b030b13
commit 977cb89481

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);
@ -136,6 +138,10 @@ export const LeftControls = () => {
role="button" role="button"
transition={{ duration: 0.3, ease: 'easeInOut' }} transition={{ duration: 0.3, ease: 'easeInOut' }}
onClick={handleToggleFullScreenPlayer} onClick={handleToggleFullScreenPlayer}
>
<Tooltip
label="Open fullscreen player"
openDelay={500}
> >
{currentSong?.imageUrl ? ( {currentSong?.imageUrl ? (
<PlayerbarImage <PlayerbarImage
@ -157,6 +163,8 @@ export const LeftControls = () => {
</Center> </Center>
</> </>
)} )}
</Tooltip>
{!collapsed && ( {!collapsed && (
<Button <Button
compact compact