-
-
+ {store.selected === "chat" ? (
+
+ ) : (
+ <>
+
+
Подключены (12)
+
+
+
+
+
+
+
+
-
-
+
-
-
-
-
-
+
+
+ >
+ )}
>
);
diff --git a/src/widgets/layout/Sidebar/styles.module.css b/src/widgets/layout/Sidebar/styles.module.css
index 79b03ed..1ed3121 100644
--- a/src/widgets/layout/Sidebar/styles.module.css
+++ b/src/widgets/layout/Sidebar/styles.module.css
@@ -30,12 +30,7 @@
}
}
-.chat {
- width: 23.916px;
- height: 21.742px;
-}
-
-.chat:hover {
+.selected:hover {
cursor: pointer;
}
From d322643effca91b8c1fdcafaade175c1e2d6cc0c Mon Sep 17 00:00:00 2001
From: BodySites <100404530+BodySites@users.noreply.github.com>
Date: Fri, 11 Aug 2023 22:06:39 +0600
Subject: [PATCH 2/4] take out switchPanel to the shared and add it to header
of Callpage
---
public/icons/view-1.svg | 13 +++++
public/icons/view-2.svg | 10 ++++
.../Participant/ui/ParticipantCard.tsx | 6 ++-
src/shared/ui/switchDisplay/SwitchPanel.tsx | 47 +++++++++++++++++
src/shared/ui/switchDisplay/styles.module.css | 27 ++++++++++
src/widgets/CallInfo.tsx | 27 +++++++++-
.../ParticipantsList/ParticipantsList.tsx | 8 ++-
src/widgets/layout/Sidebar/Sidebar.tsx | 50 ++++++++-----------
src/widgets/layout/Sidebar/styles.module.css | 32 ------------
9 files changed, 155 insertions(+), 65 deletions(-)
create mode 100644 public/icons/view-1.svg
create mode 100644 public/icons/view-2.svg
create mode 100644 src/shared/ui/switchDisplay/SwitchPanel.tsx
create mode 100644 src/shared/ui/switchDisplay/styles.module.css
diff --git a/public/icons/view-1.svg b/public/icons/view-1.svg
new file mode 100644
index 0000000..785e65e
--- /dev/null
+++ b/public/icons/view-1.svg
@@ -0,0 +1,13 @@
+
diff --git a/public/icons/view-2.svg b/public/icons/view-2.svg
new file mode 100644
index 0000000..cc63cb1
--- /dev/null
+++ b/public/icons/view-2.svg
@@ -0,0 +1,10 @@
+
diff --git a/src/features/Participant/ui/ParticipantCard.tsx b/src/features/Participant/ui/ParticipantCard.tsx
index 1df47f9..3fe5f3f 100644
--- a/src/features/Participant/ui/ParticipantCard.tsx
+++ b/src/features/Participant/ui/ParticipantCard.tsx
@@ -51,14 +51,18 @@ interface Props {
avatar: string;
name: string;
isActive: boolean;
+ displaySwitch?: boolean;
}
export const ParticipantCard: React.FC
= ({
avatar,
name,
isActive,
+ displaySwitch = false,
}) => {
- return (
+ return displaySwitch ? (
+
+ ) : (
diff --git a/src/shared/ui/switchDisplay/SwitchPanel.tsx b/src/shared/ui/switchDisplay/SwitchPanel.tsx
new file mode 100644
index 0000000..806e200
--- /dev/null
+++ b/src/shared/ui/switchDisplay/SwitchPanel.tsx
@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+import styles from "./styles.module.css";
+
+interface Props {
+ oneSwitch: string;
+ twoSwitch: string;
+ style: Object;
+ state: boolean;
+ onClick: (stateSwitch: boolean) => void;
+}
+
+const SwitchPanel: React.FC = (props) => {
+ const [displaySwitch, setDisplaySwitch] = useState(props.state);
+
+ function clickRight() {
+ props.onClick(true);
+ setDisplaySwitch(true);
+ }
+
+ function clickLeft() {
+ props.onClick(false);
+ setDisplaySwitch(false);
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ );
+};
+
+export default SwitchPanel;
diff --git a/src/shared/ui/switchDisplay/styles.module.css b/src/shared/ui/switchDisplay/styles.module.css
new file mode 100644
index 0000000..6f3ecce
--- /dev/null
+++ b/src/shared/ui/switchDisplay/styles.module.css
@@ -0,0 +1,27 @@
+.switchPanel {
+ display: flex;
+ padding: 3px;
+ align-items: center;
+ background: var(--white, #fff);
+ box-shadow: 0px 0px 2px 0px #c5ccd5;
+}
+
+.switch {
+ display: flex;
+ flex: 1 1;
+ aspect-ratio: 1 / 1;
+ justify-content: center;
+ align-items: center;
+ border-radius: 50%;
+ opacity: 0.5;
+}
+
+.switch:hover {
+ cursor: pointer;
+}
+
+.switch.active {
+ background: var(--grey-6, #f9fafe);
+ box-shadow: 0px 0px 2px 0px #c5ccd5;
+ opacity: 1;
+}
diff --git a/src/widgets/CallInfo.tsx b/src/widgets/CallInfo.tsx
index 9447026..60f3b60 100644
--- a/src/widgets/CallInfo.tsx
+++ b/src/widgets/CallInfo.tsx
@@ -1,6 +1,10 @@
-import React from "react";
+import React, { useState } from "react";
import styled from "styled-components";
import { CopyLink } from "../features/Copy";
+import SwitchPanel from "../shared/ui/switchDisplay/SwitchPanel";
+import oneSwitch from "../../public/icons/view-1.svg";
+import twoSwitch from "../../public/icons/view-2.svg";
+import sidebarState from "../pages/CallPageCustomUI/store/sidebarState";
const Container = styled.div`
display: flex;
@@ -35,14 +39,33 @@ const Paragraph = styled.p`
line-height: normal;
`;
+const styleSwitch = {
+ width: "84px",
+ height: "48px",
+ borderRadius: "35px",
+};
+
const CallInfo: React.FC = () => {
+ const [displaySwitch, setDisplaySwitch] = useState(false);
+
+ function changeDisplay(state: boolean) {
+ setDisplaySwitch(state);
+ }
+
return (
-
+
Информатика 4 класс
18 участников|01:12:45
+
);
};
diff --git a/src/widgets/ParticipantsList/ParticipantsList.tsx b/src/widgets/ParticipantsList/ParticipantsList.tsx
index 56057d7..a32f71f 100644
--- a/src/widgets/ParticipantsList/ParticipantsList.tsx
+++ b/src/widgets/ParticipantsList/ParticipantsList.tsx
@@ -15,9 +15,14 @@ const Container = styled.div`
interface Props {
isActive: boolean;
peopleList: IUser[];
+ displaySwitch?: boolean;
}
-const ParticipantsList: React.FC = ({ isActive, peopleList }) => {
+const ParticipantsList: React.FC = ({
+ isActive,
+ peopleList,
+ displaySwitch = false,
+}) => {
return (
{peopleList.map((people, index) => (
@@ -26,6 +31,7 @@ const ParticipantsList: React.FC = ({ isActive, peopleList }) => {
name={people.name}
isActive={isActive}
key={index}
+ displaySwitch={displaySwitch}
/>
))}
diff --git a/src/widgets/layout/Sidebar/Sidebar.tsx b/src/widgets/layout/Sidebar/Sidebar.tsx
index 7e50465..1951bca 100644
--- a/src/widgets/layout/Sidebar/Sidebar.tsx
+++ b/src/widgets/layout/Sidebar/Sidebar.tsx
@@ -11,6 +11,7 @@ import { observer } from "mobx-react-lite";
import styles from "./styles.module.css";
import { IUser } from "../../../shared/api/models";
import ParticipantsList from "../../ParticipantsList/ParticipantsList";
+import SwitchPanel from "../../../shared/ui/switchDisplay/SwitchPanel";
const OpenButton = styled.div`
position: absolute;
@@ -48,6 +49,12 @@ const Container = styled.div`
background: rgba(255, 255, 255, 0.95);
`;
+const styleSwitch = {
+ width: "66px",
+ height: "34px",
+ borderRadius: "18px",
+};
+
interface Props {
peopleList: IUser[];
}
@@ -61,12 +68,8 @@ const Sidebar: React.FC = observer(({ peopleList }) => {
: store.openSidebar();
}
- function rightDisplay() {
- setDisplaySwitch(true);
- }
-
- function leftDisplay() {
- setDisplaySwitch(false);
+ function changeDisplay(state: boolean) {
+ setDisplaySwitch(state);
}
function changeSelected() {
@@ -106,31 +109,20 @@ const Sidebar: React.FC = observer(({ peopleList }) => {
<>
Подключены (12)
-
-
-
-
-
-
-
-
+
Не подключены (4)
diff --git a/src/widgets/layout/Sidebar/styles.module.css b/src/widgets/layout/Sidebar/styles.module.css
index 1ed3121..4b61c9c 100644
--- a/src/widgets/layout/Sidebar/styles.module.css
+++ b/src/widgets/layout/Sidebar/styles.module.css
@@ -49,38 +49,6 @@
font-weight: 600;
}
-.switchPanel {
- display: flex;
- width: 66px;
- height: 34px;
- padding: 0px 4px;
- align-items: center;
- gap: 6px;
- border-radius: 18px;
- background: var(--white, #fff);
- box-shadow: 0px 0px 2px 0px #c5ccd5;
-}
-
-.switch {
- display: flex;
- width: 28px;
- height: 28px;
- justify-content: center;
- align-items: center;
- border-radius: 18px;
- opacity: 0.5;
-}
-
-.switch:hover {
- cursor: pointer;
-}
-
-.switch.active {
- background: var(--grey-6, #f9fafe);
- box-shadow: 0px 0px 2px 0px #c5ccd5;
- opacity: 1;
-}
-
.list {
overflow-y: auto;
align-self: flex-start;
From cb83705ed26ed8fdbc42f55721f3d7781b1f1445 Mon Sep 17 00:00:00 2001
From: unknown
Date: Tue, 15 Aug 2023 15:20:03 +0600
Subject: [PATCH 3/4] fix edit delete rooms add link for videosdk
---
.env.development | 3 ++-
.env.production | 3 ++-
src/entities/room/api/models.ts | 2 +-
src/entities/room/ui/JoinButton.tsx | 8 +++---
src/entities/room/ui/RoomCard.tsx | 2 +-
src/entities/user/api/addUser.ts | 6 ++---
src/entities/user/api/models.ts | 2 +-
src/features/createRoom/model/index.ts | 27 +------------------
src/features/editRoom/model/delete.ts | 10 ++++---
src/features/editRoom/model/index.ts | 14 +++++++---
src/features/editRoom/ui/EditRoomForm.tsx | 13 ++++++---
src/pages/Lobby/Lobby.tsx | 2 +-
.../Lobby/store/{user.ts => userState.ts} | 4 +--
13 files changed, 43 insertions(+), 53 deletions(-)
rename src/pages/Lobby/store/{user.ts => userState.ts} (82%)
diff --git a/.env.development b/.env.development
index f5c14d6..4330e9d 100644
--- a/.env.development
+++ b/.env.development
@@ -1,4 +1,5 @@
VITE_AUTH0_DOMAIN="dev-txpc5harm481cb6o.us.auth0.com"
VITE_AUTH0_CLIENT_ID="BOU97TMrp85ftAnrXSLTiYYiuifp9jfz"
VITE_API='https://network-class-server.ru'
-VITE_WS_API='wss://network-class-server.ru'
\ No newline at end of file
+VITE_WS_API='wss://network-class-server.ru'
+VITE_VIDEOSDK_HREF=''
\ No newline at end of file
diff --git a/.env.production b/.env.production
index 5a6a593..f31acec 100644
--- a/.env.production
+++ b/.env.production
@@ -1,4 +1,5 @@
VITE_AUTH0_DOMAIN="dev-txpc5harm481cb6o.us.auth0.com"
VITE_AUTH0_CLIENT_ID="fOB3CWsgCnNLI5q7OMWe9DfWaAXOme2o"
VITE_API='https://network-class-server.ru'
-VITE_WS_API='wss://network-class-server.ru'
\ No newline at end of file
+VITE_WS_API='wss://network-class-server.ru'
+VITE_VIDEOSDK_HREF=''
\ No newline at end of file
diff --git a/src/entities/room/api/models.ts b/src/entities/room/api/models.ts
index 8e11f79..e084f3c 100644
--- a/src/entities/room/api/models.ts
+++ b/src/entities/room/api/models.ts
@@ -7,4 +7,4 @@ export interface IRoom {
isActive: boolean,
owner_email: string,
owner_fullname: string
-}
\ No newline at end of file
+}
diff --git a/src/entities/room/ui/JoinButton.tsx b/src/entities/room/ui/JoinButton.tsx
index cf8d91f..9a255a9 100644
--- a/src/entities/room/ui/JoinButton.tsx
+++ b/src/entities/room/ui/JoinButton.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
const Path = styled.path``;
-const Button = styled.button`
+const Button = styled.a`
font-family: var(--font);
font-size: 18px;
font-style: normal;
@@ -30,15 +30,13 @@ const Button = styled.button`
`;
interface Props {
- href: number,
+ href: string,
}
const JoinButton: React.FC = ({ href }) => {
return (