mirror of
https://github.com/tsirysndr/music-player.git
synced 2026-01-10 21:58:02 -05:00
feat(webui): add connect button
This commit is contained in:
Tsiry Sandratraina
@@ -11,8 +11,10 @@
|
||||
"@styled-icons/bootstrap": "^10.46.0",
|
||||
"@styled-icons/evaicons-outline": "^10.46.0",
|
||||
"@styled-icons/evil": "^10.46.0",
|
||||
"@styled-icons/fluentui-system-regular": "^10.46.0",
|
||||
"@styled-icons/ionicons-sharp": "^10.46.0",
|
||||
"@styled-icons/remix-fill": "^10.46.0",
|
||||
"@styled-icons/simple-icons": "^10.46.0",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
@@ -101,4 +103,4 @@
|
||||
"prop-types": "^15.8.1",
|
||||
"webpack": "^5.74.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,6 @@
|
||||
import { Input } from "baseui/input";
|
||||
import { Textarea } from "baseui/textarea";
|
||||
import {
|
||||
Modal,
|
||||
ModalHeader,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
ModalButton,
|
||||
} from "baseui/modal";
|
||||
import { Modal, ModalHeader, ModalBody, ModalFooter } from "baseui/modal";
|
||||
import { FC } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import Button from "../../Button";
|
||||
|
||||
@@ -0,0 +1,99 @@
|
||||
import { ListItem, ListItemLabel } from "baseui/list";
|
||||
import { Modal, ModalHeader, ModalBody } from "baseui/modal";
|
||||
import { FC } from "react";
|
||||
import { MusicPlayer } from "@styled-icons/bootstrap";
|
||||
import { Kodi } from "@styled-icons/simple-icons";
|
||||
import styled from "@emotion/styled";
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
const List = styled.ul`
|
||||
padding: 0;
|
||||
`;
|
||||
|
||||
const Icon = styled.div`
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #28fcbc20;
|
||||
${(props) =>
|
||||
props.color &&
|
||||
css`
|
||||
background-color: ${props.color};
|
||||
`}
|
||||
`;
|
||||
|
||||
export type ArtworkProps = {
|
||||
icon?: "kodi" | "musicplayer";
|
||||
color?: string;
|
||||
};
|
||||
|
||||
const Artwork: FC<ArtworkProps> = ({ icon, color }) => {
|
||||
return (
|
||||
<Icon color={color}>
|
||||
{icon !== "kodi" && <MusicPlayer size={20} color="#28fce3" />}
|
||||
{icon === "kodi" && <Kodi size={20} color="#28cbfc" />}
|
||||
</Icon>
|
||||
);
|
||||
};
|
||||
|
||||
Artwork.defaultProps = {
|
||||
icon: "musicplayer",
|
||||
};
|
||||
|
||||
export type ConnectModalProps = {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
const ConnectModal: FC<ConnectModalProps> = ({ onClose, isOpen }) => {
|
||||
return (
|
||||
<Modal onClose={onClose} isOpen={isOpen}>
|
||||
<ModalHeader>Connect to</ModalHeader>
|
||||
<ModalBody>
|
||||
<List className="connect-list">
|
||||
<ListItem
|
||||
artwork={() => <Artwork />}
|
||||
overrides={{
|
||||
Content: {
|
||||
style: {
|
||||
borderBottom: "none",
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ListItemLabel children={"MacbookPro 1"} />
|
||||
</ListItem>
|
||||
<ListItem
|
||||
artwork={() => <Artwork icon="kodi" color="#28cbfc17" />}
|
||||
overrides={{
|
||||
Content: {
|
||||
style: {
|
||||
borderBottom: "none",
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ListItemLabel children={"MacbookPro 2"} />
|
||||
</ListItem>
|
||||
<ListItem
|
||||
artwork={() => <Artwork />}
|
||||
overrides={{
|
||||
Content: {
|
||||
style: {
|
||||
borderBottom: "none",
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ListItemLabel children={"MacbookPro 3"} />
|
||||
</ListItem>
|
||||
</List>
|
||||
</ModalBody>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConnectModal;
|
||||
@@ -1,8 +1,10 @@
|
||||
import styled from "@emotion/styled";
|
||||
import { FC } from "react";
|
||||
import { FC, useState } from "react";
|
||||
import Library from "../Library";
|
||||
import Playlists from "../Playlists";
|
||||
import Search from "../Search";
|
||||
import { PlugConnected } from "@styled-icons/fluentui-system-regular";
|
||||
import ConnectModal from "./ConnectModal";
|
||||
|
||||
const Container = styled.div`
|
||||
height: calc(100vh - 30px);
|
||||
@@ -13,6 +15,20 @@ const Container = styled.div`
|
||||
overflow-y: auto;
|
||||
`;
|
||||
|
||||
const ConnectButton = styled.button`
|
||||
border: none;
|
||||
background-color: #ab28fc0d;
|
||||
height: 32px;
|
||||
width: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
`;
|
||||
|
||||
export type SidebarProps = {
|
||||
active?: string;
|
||||
onClickLibraryItem: (item: string) => void;
|
||||
@@ -33,11 +49,19 @@ export type SidebarProps = {
|
||||
};
|
||||
|
||||
const Sidebar: FC<SidebarProps> = (props) => {
|
||||
const [openConnectModal, setOpenConnectModal] = useState(false);
|
||||
return (
|
||||
<Container>
|
||||
<Search {...props} />
|
||||
<Library {...props} />
|
||||
<Playlists {...props} />
|
||||
<ConnectButton onClick={() => setOpenConnectModal(true)}>
|
||||
<PlugConnected size={20} color="#ab28fc" />
|
||||
</ConnectButton>
|
||||
<ConnectModal
|
||||
isOpen={openConnectModal}
|
||||
onClose={() => setOpenConnectModal(false)}
|
||||
/>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -116,4 +116,10 @@ tr:hover td div button {
|
||||
[data-baseweb="tab-panel"] {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.connect-list li:hover {
|
||||
background-color: #f3f3f386;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -3697,6 +3697,14 @@
|
||||
"@babel/runtime" "^7.19.0"
|
||||
"@styled-icons/styled-icon" "^10.7.0"
|
||||
|
||||
"@styled-icons/fluentui-system-regular@^10.46.0":
|
||||
version "10.46.0"
|
||||
resolved "https://registry.yarnpkg.com/@styled-icons/fluentui-system-regular/-/fluentui-system-regular-10.46.0.tgz#16c4cff965ddf96f37c133b17f59e9ca228266d8"
|
||||
integrity sha512-Ojn2nGx2NY2QnELYG07k7uPXQ6jZ4MKeloby3wNgyncmcMikANPeMs0IJXWeUlW3YcOGMjnVYPq/A8v7QPJ0dQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.19.0"
|
||||
"@styled-icons/styled-icon" "^10.7.0"
|
||||
|
||||
"@styled-icons/ionicons-sharp@^10.46.0":
|
||||
version "10.46.0"
|
||||
resolved "https://registry.yarnpkg.com/@styled-icons/ionicons-sharp/-/ionicons-sharp-10.46.0.tgz#78b99fcac82cbfb87379de1f1e41ee42139caeb6"
|
||||
@@ -3713,6 +3721,14 @@
|
||||
"@babel/runtime" "^7.19.0"
|
||||
"@styled-icons/styled-icon" "^10.7.0"
|
||||
|
||||
"@styled-icons/simple-icons@^10.46.0":
|
||||
version "10.46.0"
|
||||
resolved "https://registry.yarnpkg.com/@styled-icons/simple-icons/-/simple-icons-10.46.0.tgz#fbb8f73686dbb40e482356a5fdc23e895e2b8468"
|
||||
integrity sha512-zHkbGqAqFOwpqDjbhKTKsAXNxtBOXb7Ot2eKoDaDFckJGr2shAXRchclUS6wSixSPwQIPGAUcdO7Cq744Ollng==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.19.0"
|
||||
"@styled-icons/styled-icon" "^10.7.0"
|
||||
|
||||
"@styled-icons/styled-icon@^10.7.0":
|
||||
version "10.7.0"
|
||||
resolved "https://registry.yarnpkg.com/@styled-icons/styled-icon/-/styled-icon-10.7.0.tgz#d6960e719b8567c8d0d3a87c40fb6f5b4952a228"
|
||||
|
||||
Reference in New Issue
Block a user