some filestructure fixes

src/App.css

@@ -5,33 +5,6 @@
 }
 
 
-.content__container {
-  height: 100vh;
-  width: 400px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-width: 0px 2px;
-  border-style: solid;
-  border-color: #23242a;
-}
-
-.popup {
-  border-radius: 4px;
-  width: 100%;
-  background: transparent;
-  padding: 56px;
-  box-sizing: border-box;
-  z-index: 99;
-}
-
-.card-title-container {
-  margin-top: 136px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 64px;
-}
 
 
 .card-container {
@@ -63,10 +36,7 @@
   border-radius: 16px;
 }
 
-.popup-container {
-  display: flex;
-  justify-content: center;
-}
+
 
 
 
@@ -83,6 +53,7 @@
   .card-title-container {
     margin-top: 96px;
   }
+
   .card-container {
     gap: 20px;
 

src/App.tsx

@@ -10,7 +10,7 @@ import cookies from "js-cookie";
 
 import { Header } from "components/shared/Header/Header";
 import { Card } from "components/pages/Main/Card/Card";
-import { PopupComponent } from "components/pages/ConnectPage/PopupComponent/PopupComponent";
+import { SessionStartComponent } from "components/pages/ConnectPage/SessionStartComponent/SessionStartComponent";
 import { PlayerComponent } from "components/pages/Stream/components/PlayerComponent/PlayerComponent";
 import { PlanComponent } from "components/pages/Plan/PlanComponent";
 
@@ -63,7 +63,6 @@ const App: React.FC = () => {
     }
     else if (handleCookiesLanguage()) {
       const languageCookies = handleCookiesLanguage()
-      console.log(languageCookies)
       dispatch(handleChangeLanguage(languageCookies as string))
       return
     }
@@ -122,7 +121,7 @@ const App: React.FC = () => {
           <div className="background">
             <div className="popup-container">
               <div className="content__container">
-                <PopupComponent cleanErrors={cleanErrors} handleConnect={handleConnect} isLoading={isLoading} currentCard={currentCard}></PopupComponent>
+                <SessionStartComponent cleanErrors={cleanErrors} handleConnect={handleConnect} isLoading={isLoading} currentCard={currentCard}></SessionStartComponent>
               </div>
             </div>
           </div>

src/components/pages/ConnectPage/ConnectComponent/ConnectComponent.css

@@ -0,0 +1,79 @@
+
+.content__container {
+    height: 100vh;
+    width: 400px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-width: 0px 2px;
+    border-style: solid;
+    border-color: #23242a;
+  }
+
+  .popup-container {
+    display: flex;
+    justify-content: center;
+  }
+  
+  .popup {
+    border-radius: 4px;
+    width: 100%;
+    background: transparent;
+    padding: 56px;
+    box-sizing: border-box;
+    z-index: 99;
+  }
+  
+  .card-title-container {
+    margin-top: 136px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 64px;
+  }
+  
+
+
+.popup-img-container {
+    height: 94px;
+    width: 100%;
+    padding: 0 21px 16px 0;
+    margin-bottom: 32px;
+    box-sizing: border-box;
+
+}
+
+.popup-logo {
+    height: 78px;
+    width: 267px;
+    object-fit: contain;
+
+}
+
+.popup-button-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.line {
+    height: 1px;
+    background-color: #23242A;
+    width: 100%;
+}
+
+
+
+
+@media screen and (max-width: 1000px) {
+    .popup-img-container {
+        margin-bottom: 16px;
+    }
+    
+}
+
+@media screen and (max-width: 640px) {
+    .popup-connect {
+      padding: 16px;
+    }
+  }

src/components/pages/ConnectPage/ConnectComponent/ConnectComponent.tsx

@@ -1,13 +1,11 @@
-import "./PopupConnect.css";
+import "./ConnectComponent.css";
 
 import { useHistory } from "react-router-dom";
-import { createSession } from "store/reducers/ActionCreator";
-import { useAppDispatch } from "hooks/redux";
 
 
 import { useTranslation } from "react-i18next";
 
-export const PopupConnect: React.FC<any> = ({ logo, isLoading, title, handleConnect }) => {
+export const ConnectComponent: React.FC<any> = ({ logo, isLoading, title, handleConnect }) => {
   const history = useHistory();
   const { t } = useTranslation();
 

src/components/pages/ConnectPage/LoaderComponent/LoaderComponent.tsx

@@ -1,12 +1,10 @@
-import "./LoadingPopup.css";
-import { useHistory } from "react-router-dom";
+import "./LoaderComponent.css";
 
 import { useTranslation } from "react-i18next";
 
-export const LoadingPopup: React.FC<any> = ({ logo }) => {
+export const LoaderComponent: React.FC<any> = ({ logo }) => {
 
 
-  const history = useHistory();
   const { t } = useTranslation();
 
   return (

src/components/pages/ConnectPage/PopupConnect/PopupConnect.css

@@ -1,44 +0,0 @@
-
-.popup-img-container {
-    height: 94px;
-    width: 100%;
-    padding: 0 21px 16px 0;
-    margin-bottom: 32px;
-    box-sizing: border-box;
-
-}
-
-.popup-logo {
-    height: 78px;
-    width: 267px;
-    object-fit: contain;
-
-}
-
-.popup-button-container {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-}
-
-.line {
-    height: 1px;
-    background-color: #23242A;
-    width: 100%;
-}
-
-
-
-
-@media screen and (max-width: 1000px) {
-    .popup-img-container {
-        margin-bottom: 16px;
-    }
-    
-}
-
-@media screen and (max-width: 640px) {
-    .popup-connect {
-      padding: 16px;
-    }
-  }

src/components/pages/ConnectPage/SessionStartComponent/SessionStartComponent.tsx

@@ -3,19 +3,15 @@ import { motion, AnimatePresence } from "framer-motion";
 
 import { popupAnimation } from "utils/animationProps";
 
-import { PopupConnect } from "components/pages/ConnectPage/PopupConnect/PopupConnect";
-import { LoadingPopup } from "components/pages/ConnectPage/LoadingPopup/LoadingPopup";
+import { ConnectComponent } from "components/pages/ConnectPage/ConnectComponent/ConnectComponent";
+import { LoaderComponent } from "components/pages/ConnectPage/LoaderComponent/LoaderComponent";
 
 import { useAppDispatch } from "hooks/redux";
-import { sessionSlice } from "store/reducers/sessionSlice";
 
-export const PopupComponent: React.FC<any> = ({isLoading, handleConnect, currentCard, cleanErrors}) => {
+export const SessionStartComponent: React.FC<any> = ({isLoading, handleConnect, currentCard, cleanErrors}) => {
   const dispatch = useAppDispatch();
 
 
-
-
-
   useEffect(() => {
     return () => {
       dispatch(cleanErrors());
@@ -32,12 +28,12 @@ export const PopupComponent: React.FC<any> = ({isLoading, handleConnect, current
           animate={"show"}
           exit={"hidden"}
         >
-          <PopupConnect
+          <ConnectComponent
             title={currentCard.app_title}
             isLoading={isLoading}
             logo={currentCard.logo}
             handleConnect={handleConnect}
-          ></PopupConnect>
+          ></ConnectComponent>
         </motion.div>
       )}
       {isLoading && (
@@ -48,7 +44,7 @@ export const PopupComponent: React.FC<any> = ({isLoading, handleConnect, current
           animate={"show"}
           exit={"hidden"}
         >
-          <LoadingPopup logo={currentCard.logo}></LoadingPopup>
+          <LoaderComponent logo={currentCard.logo}></LoaderComponent>
         </motion.div>
       )}
     </AnimatePresence>

src/components/pages/Stream/components/Player/player.css

@@ -39,12 +39,6 @@
 	background: #151619;
 }
 
-body {
-	margin: 0px;
-	background-color: #151619;
-
-	font-family: 'Montserrat', sans-serif;
-}
 
 h2 {
 	font-family: "GilroyWebRegular";

src/components/pages/Stream/components/Sidebar/Sidebar.css

@@ -81,7 +81,7 @@
   width: 32px;
   height: 128px;
   border: none;
-  background: url("openToolbarBackIcon.svg") 50% 50% no-repeat;
+  background: url("../../../../../images/icons/openToolbarBackIcon.svg") 50% 50% no-repeat;
   background-size: 100% 100%;
 
   /* background-color: #2F80ED; */
@@ -92,11 +92,11 @@
 .toolbar-open-button-icon {
   width: 24px;
   height: 24px;
-  background: url("pointerIcon.svg") 50% 50% no-repeat;
+  background: url("../../../../../images/icons/pointerIcon.svg") 50% 50% no-repeat;
 }
 
 .toolbar-container.opened .toolbar-open-button-icon {
-  background: url("closeToolbarIcon.svg") 50% 50% no-repeat;
+  background: url("../../../../../images/icons/closeToolbarIcon.svg") 50% 50% no-repeat;
 }
 
 .toolbar-button-area-container {
@@ -267,7 +267,7 @@
   width: 18px;
   height: 26px;
   background-color: #eb5757;
-  background: url("icons/newCaptTriangleIcon.svg");
+  background: url("../../../../../images/icons/newCaptTriangleIcon.svg");
 }
 
 .user-control-popup {
@@ -288,12 +288,12 @@
 }
 
 .toolbar-button.fullscreen.on {
-  background: url("./icons/openFullscreenIcon.svg") 50% 50% no-repeat;
+  background: url("../../../../../images/icons/openFullscreenIcon.svg") 50% 50% no-repeat;
   background-color: #4f4f4f;
 }
 
 .toolbar-button.fullscreen {
-  background: url("./icons/closeFullscreenIcon.svg") 50% 50% no-repeat;
+  background: url("../../../../../images/icons/fullscreen.svg") 50% 50% no-repeat;
   background-color: #4f4f4f;
 }
 
@@ -312,57 +312,57 @@
 }
 
 .toolbar-button.users {
-  background: url("./icons/usersIcon.svg") 50% 50% no-repeat;
+  background: url("../../../../../images/icons/usersIcon.svg") 50% 50% no-repeat;
   background-color: #4f4f4f;
 }
 
 .toolbar-button.micro {
-  background: url("./icons/microOffIcon.svg") 50% 50% no-repeat;
+  background: url("../../../../../images/icons/microOffIcon.svg") 50% 50% no-repeat;
   background-color: #4f4f4f;
 }
 
 .toolbar-button.micro.on {
-  background: url("./icons/microOnIcon.svg") 50% 50% no-repeat;
+  background: url("../../../../../images/icons/microOnIcon.svg") 50% 50% no-repeat;
   background-color: #4f4f4f;
 }
 
 .toolbar-button.control {
-  background: url("./icons/constrolOffIcon.svg") 50% 50% no-repeat;
+  background: url("../../../../../images/icons/constrolOffIcon.svg") 50% 50% no-repeat;
   background-color: #4f4f4f;
 }
 
 .toolbar-button.control.on {
-  background: url("./icons/constrolOnIcon.svg") 50% 50% no-repeat;
+  background: url("../../../../../images/icons/constrolOnIcon.svg") 50% 50% no-repeat;
   background-color: #4f4f4f;
 }
 
 .toolbar-button.other {
-  background: url("./icons/othertIcon.svg") 50% 50% no-repeat;
+  background: url("../../../../../images/icons/othertIcon.svg") 50% 50% no-repeat;
   background-color: #4f4f4f;
 }
 
 .toolbar-button.sound {
-  background: url("./icons/soundOffIcon.svg") 50% 50% no-repeat;
+  background: url("../../../../../images/icons/soundOffIcon.svg") 50% 50% no-repeat;
   background-color: #4f4f4f;
 }
 
 .toolbar-button.sound.on {
-  background: url("./icons/soundOnIcon.svg") 50% 50% no-repeat;
+  background: url("../../../../../images/icons/soundOnIcon.svg") 50% 50% no-repeat;
   background-color: #4f4f4f;
 }
 
 .toolbar-button.exit {
-  background: url("./icons/exitIcon.svg") 50% 50% no-repeat;
+  background: url("../../../../../images/icons/exitIcon.svg") 50% 50% no-repeat;
   background-color: #eb5757;
 }
 
 .toolbar-button.copy {
-  background: url("./icons/copyIcon.svg") 50% 50% no-repeat;
+  background: url("../../../../../images/icons/copyIcon.svg") 50% 50% no-repeat;
   background-color: #4f4f4f;
 }
 
 .toolbar-button.share {
-  background: url("./icons/shareIcon.svg") 50% 50% no-repeat;
+  background: url("../../../../../images/icons/shareIcon.svg") 50% 50% no-repeat;
   background-color: #4f4f4f;
 }
 
@@ -371,12 +371,12 @@
 }
 
 .toolbar-button.language.ru {
-  background: url("./icons/ruIcon.svg") 50% 50% no-repeat;
+  background: url("../../../../../images/icons/ruIcon.svg") 50% 50% no-repeat;
   background-color: #4f4f4f;
 }
 
 .toolbar-button.language.en {
-  background: url("./icons/enIcon.svg") 50% 50% no-repeat;
+  background: url("../../../../../images/icons/enIcon.svg") 50% 50% no-repeat;
   background-color: #4f4f4f;
 }
 
@@ -431,14 +431,14 @@
 .toolbar-button.large.control .toolbar-button-large-view-icon {
   width: 24px;
   height: 24px;
-  background: url("icons/constrolOffIcon.svg") 50% 50% no-repeat;
+  background: url("../../../../../images/icons/constrolOffIcon.svg") 50% 50% no-repeat;
   background-size: 100% 100%;
 }
 
 .toolbar-button.large.control.on .toolbar-button-large-view-icon {
   width: 24px;
   height: 24px;
-  background: url("icons/constrolOnIcon.svg") 50% 50% no-repeat;
+  background: url("../../../../../images/icons/constrolOnIcon.svg") 50% 50% no-repeat;
   background-size: 100% 100%;
 }
 
@@ -471,7 +471,7 @@
 .toolbar-button.yes .toolbar-button-medium-view-icon {
   width: 24px;
   height: 24px;
-  background: url("icons/constrolOnIcon.svg") 50% 50% no-repeat;
+  background: url("../../../../../images/icons/constrolOnIcon.svg") 50% 50% no-repeat;
   background-size: 100% 100%;
 }
 
@@ -487,7 +487,7 @@
 .toolbar-button.no .toolbar-button-medium-view-icon {
   width: 24px;
   height: 24px;
-  background: url("icons/constrolOffIcon.svg") 50% 50% no-repeat;
+  background: url("../../../../../images/icons/constrolOffIcon.svg") 50% 50% no-repeat;
   background-size: 100% 100%;
 }
 

src/components/pages/Stream/components/SidebarDesktop/SidebarDesktop.tsx

@@ -165,7 +165,7 @@ export const SidebarDesktop: React.FC<any> = ({
             exit={"hidden"}
           >
             <PopupExit
-              onExit={closeStream}
+              closeStream={closeStream}
               setClose={handleClosePopups}
             ></PopupExit>
           </motion.div>

src/components/pages/Stream/components/SidebarMobile/SidebarMobile.tsx

@@ -90,7 +90,7 @@ export const SidebarMobile: React.FC<any> = ({ height, isMobile, handleLanguage,
           animate={"show"}
           exit={"hidden"}
         >
-          <UserListMobilePopup userArr={userArr} closePopup={() => setUserListPopup(false)} isMobile={isMobile}></UserListMobilePopup>
+          <UserListMobilePopup height={height} userArr={userArr} closePopup={() => setUserListPopup(false)} isMobile={isMobile}></UserListMobilePopup>
         </motion.div>)}
         {popupAdditional && (<motion.div key={2} variants={popupAnimation} initial={"hidden"}
           animate={"show"}

src/components/pages/Stream/components/buttons/ShareButton/ShareButton.tsx

@@ -20,7 +20,6 @@ export const ShareButton: React.FC<any> = ({ onClick, isSidebarWide }) => {
 
   return (
     <button
-      tabIndex={-1}
       onClick={handleClick}
       className="toolbar-button-area"
     >

src/components/pages/Stream/components/popups/PopupExit/PopupExit.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next";
 
 import { TSidebarPopup } from "utils/types";
 
-export const PopupExit: React.FC<TSidebarPopup> = ({ setClose, onExit }) => {
+export const PopupExit: React.FC<any> = ({ setClose, closeStream }) => {
   const { t } = useTranslation();
 
   return (
@@ -20,6 +20,7 @@ export const PopupExit: React.FC<TSidebarPopup> = ({ setClose, onExit }) => {
             {t("popup-control-no")}
           </button>
           <button
+            onClick={closeStream}
             style={{ height: "48px" }}
             className=" button button-secondary"
           >

src/components/pages/Stream/components/popups/UserListMobliePopup/UserListMobilePopup.tsx

@@ -2,9 +2,9 @@ import { User } from "components/pages/Stream/components/User/User"
 import close from 'images/icons/close.svg'
 import { useTranslation } from "react-i18next"
 
-export const UserListMobilePopup: React.FC<any> = ({ isMobile, closePopup, userArr }) => {
+export const UserListMobilePopup: React.FC<any> = ({ isMobile, closePopup, userArr, height }) => {
     const {t} = useTranslation()
-    return (<div className="popup-mobile">
+    return (<div style={{height: height}} className="popup-mobile">
         <div className="popup-mobile-container">
             <div style={{ top: "-20px", right: "-20px" }} onClick={closePopup} className="icon-close-container">
                 <img src={close}></img>

src/components/shared/Button/Button.tsx

@@ -5,14 +5,11 @@ import { AnimatePresence, motion } from "framer-motion";
 import { useTranslation } from "react-i18next";
 
 import { animationButton } from "utils/animationProps";
-import { useAppSelector } from "hooks/redux";
 
 export const Button: React.FC<any> = ({ button, active, isSidebarWide }) => {
 
   const [hover, setHover] = useState(false);
-  const { currentLang } = useAppSelector((state) => state.languageReducer);
 
-  const typeButton = button.type !== "fullscreen" && button.type !== "language";
 
   const { t } = useTranslation();
 

src/index.css

@@ -57,13 +57,14 @@ button {
 
 @media screen and (max-width: 1440px) {
   .main {
-    margin: 120px auto 0 auto;
-    width: 1200px;
+    padding: 15px 12px;
+    width: 100%;
   }
 }
 
 @media screen and (max-width: 1199px) {
   .main {
+
     width: 1000px;
   }
 }
@@ -77,14 +78,8 @@ button {
 @media screen and (max-width: 920px) {
   .main {
     gap: 0;
-    padding: 0 20px;
+    padding: 8px 10px;    
     margin: 0 auto;
 
   }
 }
-
-@media screen and (max-width: 640px) {
-  .main {
-    padding: 0 10px;
-  }
-}

src/store/reducers/ActionCreator.ts

@@ -2,7 +2,7 @@ import { createAsyncThunk } from "@reduxjs/toolkit";
 import axios from 'axios';
 
 const instance = axios.create({
-  baseURL: 'https://a1.coord.graff.tech',
+  baseURL: 'https://a1.test.coord.graff.tech',
 });
 
 instance.defaults.headers.post['Content-Type'] = 'application/json';

src/store/reducers/sessionSlice.ts

@@ -1,4 +1,3 @@
-import { IData } from "../../models/IData";
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { createSession, connectSession } from "./ActionCreator";
 
@@ -36,7 +35,7 @@ export const sessionSlice = createSlice({
 
     setUserCount(state, action) {
       console.log(action.payload)
-      const newArr = new Array(action.payload).fill('user')
+      const newArr = new Array(action.payload).fill('user') ///пока нет авторизации и отслеживания пользователей в сессии, нужно как-то отслеживать подключенных пользователей, временное решение для этого.
       state.playerCount = newArr
     }
   },

src/utils/app.js

@@ -2882,6 +2882,7 @@ export function closeStream() {
         }
         // Close the peer connection and associated webrtc machinery.
         webRtcPlayerObj.close();
+        ws.close()
         webRtcPlayerObj = undefined;
     }
 }