push readme

.gitignore

@@ -9,6 +9,7 @@ lerna-debug.log*
 
 node_modules
 .env.development
+.env.production
 dist
 dist-ssr
 *.local

package.json

@@ -12,11 +12,13 @@
   "dependencies": {
     "@auth0/auth0-react": "^2.1.1",
     "@jitsi/react-sdk": "^1.3.0",
+    "@types/lodash": "^4.14.196",
     "@types/react-webcam": "^3.0.0",
     "axios": "^1.4.0",
     "dotenv": "^16.3.1",
     "jest": "^29.5.0",
     "lib-jitsi-meet": "^1.0.6",
+    "lodash": "^4.17.21",
     "mobx": "^6.9.0",
     "mobx-react-lite": "^3.4.3",
     "react": "^18.2.0",

src/app/App.tsx

@@ -7,7 +7,7 @@ import Lobby from "../pages/Lobby/Lobby";
 import LobbyAccess from "../pages/Lobby/LobbyAccess";
 import LobbyMy from "../pages/Lobby/LobbyMy";
 import JoinCall from "../pages/JoinCall/JoinCall";
-import CallPage from '../pages/CallPage/CallPage';
+import CallPage from "../pages/CallPage/CallPage";
 import Loader from "../shared/ui/loader/Loader";
 import { useAuth0 } from "@auth0/auth0-react";
 

src/entities/room/ui/RoomCard.tsx

@@ -63,7 +63,7 @@ let Path = styled.path``;
 
 let Button = styled.button`
   transition: all 0.3s ease;
-  &:hover ${Path} {
+  &:hover path {
     stroke: var(--blue);
   }
 `;
@@ -109,7 +109,7 @@ const RoomCard: React.FC<Props> = ({ room }) => {
         <img src={callDisabled} alt="недоступен" />
       )}
       <Access>
-        <JoinButton href={room.id}/>
+        <JoinButton href={room.id} />
         <Tooltip active={tooltipActive}>
           <Button onClick={copyLink}>
             <svg

src/features/Copy/ui/CopyLink.tsx

@@ -6,7 +6,7 @@ let Path = styled.path``;
 
 let Button = styled.button`
   transition: all 0.3s ease;
-  &:hover ${Path} {
+  &:hover path {
     stroke: var(--blue);
   }
 `;

src/features/DeviceSetting/ui/SelectDevice.tsx

@@ -2,6 +2,7 @@ import React, { SyntheticEvent, useState } from "react";
 import styled from "styled-components";
 import close from "../../../../public/icons/select.svg";
 import open from "../../../../public/icons/select-active.svg";
+import Paragraph from "../../../shared/ui/Paragraph";
 
 const Container = styled.div`
   flex: 1 0 214px;
@@ -16,6 +17,7 @@ const Text = styled.div`
 `;
 
 const SelectBlock = styled.div`
+  position: relative;
   display: flex;
   padding: 10px;
   justify-content: space-between;
@@ -36,10 +38,10 @@ const Selected = styled.div`
   font-family: var(--font);
   font-size: 18px;
   font-weight: 400;
-  width: 214px;
 `;
 
 const Icon = styled.img`
+  flex: 0 0;
   width: 34px;
   height: 34px;
 `;
@@ -84,7 +86,9 @@ export const SelectDevice: React.FC<Props> = (Props) => {
     <Container>
       <Text>{Props.title}</Text>
       <SelectBlock onClick={() => setSelectActive(!selectActive)}>
-        <Selected>{selected}</Selected>
+        <Selected>
+          <Paragraph>{selected}</Paragraph>
+        </Selected>
         {selectActive ? <Icon src={open} /> : <Icon src={close} />}
       </SelectBlock>
       <div style={{ borderTop: "6px solid transparent" }}>

src/features/DeviceSetting/ui/SwitchDevice.tsx

@@ -19,13 +19,25 @@ const Icon = styled.img`
 interface Props {
   iconOn: string;
   iconOff: string;
+  isActive: boolean;
+  onClick: () => void;
 }
 
-export const SwitchDevice: React.FC<Props> = ({ iconOn, iconOff }) => {
-  const [active, setActive] = useState(false);
+export const SwitchDevice: React.FC<Props> = ({
+  iconOn,
+  iconOff,
+  isActive,
+  onClick,
+}) => {
+  const [active, setActive] = useState(isActive);
 
   return (
-    <Container onClick={() => setActive(!active)}>
+    <Container
+      onClick={() => {
+        setActive(!active);
+        onClick();
+      }}
+    >
       {active ? <Icon src={iconOn} /> : <Icon src={iconOff} />}
     </Container>
   );

src/features/Function/ui/FunctionBlock.tsx

@@ -57,7 +57,12 @@ export const FunctionBlock: React.FC<Props> = ({ func }) => {
   }
 
   return (
-    <Link href={func.link} onMouseEnter={onHover} onMouseLeave={onHover}>
+    <Link
+      href={func.link}
+      onMouseEnter={onHover}
+      onMouseLeave={onHover}
+      onClick={func.onClick}
+    >
       <Icon src={currentIcon} />
       <Title>{func.title}</Title>
       <Description>{func.description}</Description>

src/pages/JoinCall/JoinCall.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import Header from "../../widgets/layout/Header";
 import { styled } from "styled-components";
@@ -9,6 +9,7 @@ import styles from "./styles.module.css";
 import { CopyLink } from "../../features/Copy";
 import EnterButton from "../../shared/ui/EnterButton";
 import { SelectDevice } from "../../features/DeviceSetting";
+import _ from "lodash";
 
 const Page = styled.div`
   display: flex;
@@ -37,18 +38,64 @@ type State =
   | "Владельца класса нет в сети"
   | "Ваш запрос на подключение отклонен";
 
+interface IDevices {
+  videoInput: string[];
+  audioInput: string[];
+  audioOutput: string[];
+}
+
+let devicesObj: IDevices;
+let intervalSelect: NodeJS.Timer;
+
 const JoinCall: React.FC = () => {
   const [stateEnter, setStateEnter] = useState<State>("Занятие началось");
+  const [devices, setDevices] = useState<IDevices>(devicesObj);
+  const [isLoading, setLoading] = useState(true);
 
   console.log(setStateEnter);
 
-  const devices: string[][] = [
-    ["hghghg", "jhhhhhhhh"],
-    ["qqqqqq", "qvvhhhhhhhhhrrrrrrrrr", "rr"],
-    [],
-  ];
+  function getDevices() {
+    devicesObj = {
+      videoInput: [],
+      audioInput: [],
+      audioOutput: [],
+    };
+    navigator.mediaDevices
+      .enumerateDevices()
+      .then(function (devices) {
+        devices.forEach(function (device) {
+          if (
+            device.kind === "videoinput" &&
+            !device.label.includes("По умолчанию")
+          )
+            devicesObj.videoInput.push(device.label);
+          else if (
+            device.kind === "audioinput" &&
+            !device.label.includes("По умолчанию")
+          )
+            devicesObj.audioInput.push(device.label);
+          else if (
+            device.kind === "audiooutput" &&
+            !device.label.includes("По умолчанию")
+          )
+            devicesObj.audioOutput.push(device.label);
+        });
+        _.isEqual(devices, devicesObj) ? "" : setDevices(devicesObj);
+        setLoading(false);
+      })
+      .catch(function (err) {
+        console.log(err.name + ": " + err.message);
+      });
+  }
+
+  useEffect(() => {
+    intervalSelect = setInterval(getDevices, 2500);
+    return () => {
+      clearInterval(intervalSelect);
+    };
+  }, []);
 
-  const {id} = useParams();
+  const { id } = useParams();
 
   function joinLesson() {
     location.href = `/lesson/${id}`;
@@ -65,9 +112,19 @@ const JoinCall: React.FC = () => {
               <CheckDevices />
             </div>
             <div className={styles.settingsVideo}>
-              <SelectDevice title="МИКРОФОН" list={devices[0]} />
-              <SelectDevice title="КАМЕРА" list={devices[1]} />
-              <SelectDevice title="ЗВУК" list={devices[2]} />
+              {isLoading ? (
+                <>
+                  <SelectDevice title="МИКРОФОН" list={["Загрузка..."]} />
+                  <SelectDevice title="КАМЕРА" list={["Загрузка..."]} />
+                  <SelectDevice title="ЗВУК" list={["Загрузка..."]} />
+                </>
+              ) : (
+                <>
+                  <SelectDevice title="МИКРОФОН" list={devices.audioInput} />
+                  <SelectDevice title="КАМЕРА" list={devices.videoInput} />
+                  <SelectDevice title="ЗВУК" list={devices.audioOutput} />
+                </>
+              )}
             </div>
           </div>
           <div className={styles.info}>

src/pages/JoinCall/styles.module.css

@@ -12,6 +12,7 @@
   border-radius: 10px;
   box-shadow: 0px 0px 2px 0px var(--grey_4);
   overflow: hidden;
+  background: var(--grey-5, #d5dee8);
   position: relative;
 }
 
@@ -21,7 +22,7 @@
   flex-wrap: nowrap;
   padding-top: 21px;
   align-items: flex-start;
-  gap: 32px;
+  gap: 31px;
 }
 
 .info {