github/music-player
1
1
Fork 0
mirror of https://github.com/tsirysndr/music-player.git synced 2026-01-10 05:37:57 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix(webui): solve issue with the Controlbar on large screens

Browse Source
This commit is contained in:
Tsiry Sandratraina
2023-02-21 07:11:45 +03:00
parent 040596bc70
commit aefb2b7c71
2 changed files with 13 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
webui/musicplayer/src/Components/ControlBar/ControlBar.tsx
View File

@@ -51,9 +51,9 @@ const SpeakerButton = styled(Button)`
const ButtonGroup = styled.div`
display: flex;
flex: 1;
justify-content: flex-end;
padding-right: 25px;
width: 200px;
`;
export type ControlBarProps = {

15
webui/musicplayer/src/Components/ControlBar/CurrentTrack/CurrentTrack.tsx
View File

@@ -6,15 +6,24 @@ import { useCover } from "../../../Hooks/useCover";
import { useTimeFormat } from "../../../Hooks/useFormat";
import { Link } from "react-router-dom";
const FlexContainer = styled.div`
display: flex;
flex: 1;
align-items: center;
justify-content: center;
`;
const Container = styled.div`
height: 76px;
width: 531px;
min-width: 531px;
max-width: 800px;
display: flex;
align-items: center;
border: 1px solid ${(props) => props.theme.colors.currentTrackBorder};
border-radius: 5px;
margin-left: 30px;
padding-left: 8px;
flex: 1;
`;
const AlbumCover = styled.img`
@@ -116,7 +125,7 @@ const CurrentTrack: FC<CurrentTrackProps> = ({ nowPlaying }) => {
const { cover } = useCover(nowPlaying?.cover);
const { formatTime } = useTimeFormat();
return (
<>
<FlexContainer>
{(!nowPlaying || !nowPlaying!.title) && (
<Container>
<NoCover>
@@ -182,7 +191,7 @@ const CurrentTrack: FC<CurrentTrackProps> = ({ nowPlaying }) => {
</Wrapper>
</Container>
)}
</>
</FlexContainer>
);
};