add privated fetch

public/assets/locales/en/translation.json

@@ -26,5 +26,14 @@
   "popup-control-yes": "Finish",
   "popup-control-no": "Stay",
   "popup-loading": "Please, wait",
-  "sidebar-hide": "Hide menu"
+  "sidebar-hide": "Hide menu",
+  "language-button": "Language",
+  "popup-additional": "Additional",
+  "popup-userlist": "Spectrators",
+  "user": "User",
+  "popup-change-language": "Change Language"
+
+
+
+
 }

public/assets/locales/ru/translation.json

@@ -26,5 +26,10 @@
   "popup-control-yes": "Закончить",
   "popup-control-no": "Остаться",
   "popup-loading": "Пожалуйста, подождите",
-  "sidebar-hide": "Скрыть меню"
+  "sidebar-hide": "Скрыть меню",
+  "language-button": "Язык",
+  "popup-additional": "Дополнительно",
+  "popup-userlist": "Участники демонстрации",
+  "user": "Пользователь",
+  "popup-change-language": "Выбор языка"
 }

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,25 +10,20 @@ 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 { PlayerComponent } from "components/pages/Stream/PlayerComponent/PlayerComponent";
+import { SessionStartComponent } from "components/pages/ConnectPage/SessionStartComponent/SessionStartComponent";
+import { PlayerComponent } from "components/pages/Stream/components/PlayerComponent/PlayerComponent";
 import { PlanComponent } from "components/pages/Plan/PlanComponent";
 
 import { useAppDispatch, useAppSelector } from "hooks/redux";
-import { fetchCards } from "store/reducers/ActionCreator";
+import { fetchCards, fetchPrivateCards } from "store/reducers/ActionCreator";
 import { cardSlice } from "store/reducers/cardSlice";
 import { sessionSlice } from "store/reducers/sessionSlice";
 import { languageSlice } from "store/reducers/languageSlice";
 import { createSession } from "store/reducers/ActionCreator";
 
-
 import { ICards } from "models/ICards";
 import { closeStream, load as loadStream } from "utils/app";
 
-
-
-
-
 const App: React.FC = () => {
   const dispatch = useAppDispatch();
   const history = useHistory();
@@ -36,59 +31,63 @@ const App: React.FC = () => {
   const { handleChangeLanguage } = languageSlice.actions;
   const { cleanErrors } = sessionSlice.actions;
 
-
-  const { cards, currentCard, error } = useAppSelector((state) => state.cardReducer);
+  const { cards, currentCard, error } = useAppSelector(
+    (state) => state.cardReducer
+  );
   const { currentLang } = useAppSelector((state) => state.languageReducer);
   const { isLoading } = useAppSelector((state) => state.sessionReducer);
-  const query = useQuery()
+  const query = useQuery();
 
-  const langQuery = query.get('lang')
+  const langQuery = query.get("lang");
 
-  const langArray = ['en', 'ru']
+  const langArray = ["en", "ru"];
 
-  const browserLanguage = window.navigator.language
+  const browserLanguage = window.navigator.language;
 
   const handleBrowserLanguage = () => {
-    return langArray.includes(browserLanguage)
-  }
+    return langArray.includes(browserLanguage);
+  };
 
   const handleCookiesLanguage = () => {
-    const language = cookies.get("i18next")
-    return language
-  }
+    const language = cookies.get("i18next");
+    return language;
+  };
   useEffect(() => {
     if (langArray.includes(langQuery as string)) {
       dispatch(handleChangeLanguage(langQuery as string));
-      return
+      return;
+    } else if (handleCookiesLanguage()) {
+      const languageCookies = handleCookiesLanguage();
+      dispatch(handleChangeLanguage(languageCookies as string));
+      return;
     }
-    else if (handleCookiesLanguage()) {
-      const languageCookies = handleCookiesLanguage()
-      console.log(languageCookies)
-      dispatch(handleChangeLanguage(languageCookies as string))
-      return
-    }
-    let isSupported = handleBrowserLanguage()
-    dispatch(handleChangeLanguage(isSupported ? browserLanguage : 'en'));
-  }, [])
-
+    let isSupported = handleBrowserLanguage();
+    dispatch(handleChangeLanguage(isSupported ? browserLanguage : "en"));
+  }, []);
 
   const handleConnect = (title: string) => {
-    dispatch(createSession(title)).unwrap().then((res) => {
-      history.push(`/stream/${res.session_id}`);
-    }).catch((res) => {
-      alert(res);
-      history.push("/");
-    })
+    dispatch(createSession(title))
+      .unwrap()
+      .then((res) => {
+        history.push(`/stream/${res.session_id}`);
+      })
+      .catch((res) => {
+        alert(res);
+        history.push("/");
+      });
   };
 
-
   useEffect(() => {
     if (currentLang) {
-      dispatch(fetchCards(currentLang))
+      const key = new URLSearchParams(history.location.search).get("key");
+
+      if (key) {
+        dispatch(fetchPrivateCards(key));
+      } else {
+        dispatch(fetchCards(currentLang));
+      }
     }
-  }, [currentLang])
-
-
+  }, [currentLang]);
 
   const handleCards = (card: ICards) => {
     dispatch(handleCurrentCard(card));
@@ -96,9 +95,9 @@ const App: React.FC = () => {
   };
 
   const handleDisconnect = () => {
-    closeStream()
-    history.push('/')
-  }
+    closeStream();
+    history.push("/");
+  };
 
   const { t } = useTranslation();
 
@@ -122,7 +121,12 @@ 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>
@@ -131,7 +135,11 @@ const App: React.FC = () => {
         )}
       </Route>
       <Route exact path="/stream/:id">
-        <PlayerComponent handleDisconnect={handleDisconnect} loadStream={loadStream} cleanErrors={cleanErrors} ></PlayerComponent>
+        <PlayerComponent
+          handleDisconnect={handleDisconnect}
+          loadStream={loadStream}
+          cleanErrors={cleanErrors}
+        ></PlayerComponent>
       </Route>
       <Route path="/plan">
         <Header></Header>

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/ControlPanel/ControlPanel.tsx

@@ -1,30 +0,0 @@
-import { ControlButton } from "components/pages/Stream/ControlButton/ControlButton";
-import { MicroButton } from "components/pages/Stream/MicroButton/MicroButton";
-import { ShareButton } from "components/pages/Stream/ShareButton/ShareButton";
-import { LanguageButton } from "components/pages/Stream/LanguageButton/LanguageButton";
-import { ExitButton } from "components/pages/Stream/ExitButton/ExitButton";
-
-export const ControlPanel: React.FC<any> = ({
-  handleOpenSharePopup,
-  handleOpenExitPopup,
-  handleMuteClick,
-  handleControlClick,
-
-  isMuted,
-  isControl,
-  isSidebarWide
-}) => {
-  
-  return (
-    <div className="toolbar-field-part">
-      <div className="toolbar-button-container-border-line"></div>
-      <ControlButton isActive={false} isSidebarWide={isSidebarWide} onClick={() => console.log('handleControlClick()')}></ControlButton>
-      <MicroButton isSidebarWide={isSidebarWide} isActive={false} onClick={() => console.log('handleMuteClick()')}></MicroButton>
-      <div className="toolbar-button-container-border-line"></div>
-      <ShareButton isSidebarWide={isSidebarWide} onClick={handleOpenSharePopup}></ShareButton>
-      <LanguageButton isSidebarWide={isSidebarWide} onClick={() => console.log("click!")}></LanguageButton>
-      <div className="toolbar-button-container-border-line"></div>
-      <ExitButton isSidebarWide={isSidebarWide} onClick={handleOpenExitPopup}></ExitButton>
-    </div>
-  );
-};

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

@@ -1,74 +0,0 @@
-import { FullscreenButton } from "../FullscreenButton/FullscreenButton";
-import { AnimatePresence, motion } from "framer-motion";
-import {
-  sidebarVariants,
-  popupAnimation,
-} from "utils/animationProps";
-import { useState } from "react";
-import { WideSidebarButton } from "../WideSidebarButton/WideSidebarButton";
-import { UserButtonMobile } from "../UserButtonMobile/UserButtonMobile";
-import { ControlButton } from "../ControlButton/ControlButton";
-import { MicroButton } from "../MicroButton/MicroButton";
-import { AdditionalButton } from "../AdditionalButton/AdditionalButton";
-import { UserListMobile } from "../UserListMoblie/UserListMobile";
-import { ExitButton } from "../ExitButton/ExitButton";
-
-export const SidebarMobile: React.FC<any> = ({ height, isMobile, handleOpenExitPopup }) => {
-  const [open, setOpen] = useState(false);
-  const [userList, setUserList] = useState(false);
-  const [popupAdditional, setPopupAdditipnal] = useState(false); //should be insted of exit button, but popup doesn't ready yet
-  console.log(userList, 'popup')
-  return (
-    <>    <motion.div
-      initial={false}
-      animate={open ? "open" : "closed"}
-      variants={sidebarVariants}
-      style={{ height: height }}
-      className="toolbar-container"
-    >
-      <div className="toolbar-field">
-        <div className="toolbar-field-part">
-          <FullscreenButton isSidebarWide={false}> </FullscreenButton>
-          <WideSidebarButton close={() => setOpen(false)}></WideSidebarButton>
-          <div className="toolbar-button-container-border-line"></div>
-          <UserButtonMobile
-            active={userList}
-            onClick={() => setUserList(true)}
-          ></UserButtonMobile>
-        </div>
-        <div className="toolbar-field-part">
-          <ControlButton></ControlButton>
-          <MicroButton></MicroButton>
-          <div className="toolbar-button-container-border-line"></div>
-          <ExitButton isSidebarWide={false} onClick={handleOpenExitPopup}></ExitButton> 
-        </div>
-        <AnimatePresence>
-          {!open && (
-            <motion.div
-              variants={popupAnimation}
-              initial={"hidden"}
-              animate={"show"}
-              exit={"hidden"}
-              onClick={() => setOpen(true)}
-              className="toolbar-open-button"
-            >
-              <span className="toolbar-open-button-icon"></span>
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </div>
-    </motion.div>
-      <AnimatePresence>
-        {userList && (<motion.div key={1}
-          variants={popupAnimation}
-          initial={"hidden"}
-          animate={"show"}
-          exit={"hidden"}
-        >
-          <UserListMobile closePopup={() => setUserList(false)} isMobile={isMobile}></UserListMobile>
-        </motion.div>)}
-      </AnimatePresence>
-    </>
-
-  );
-};

src/components/pages/Stream/UserListMoblie/UserListMobile.tsx

@@ -1,18 +0,0 @@
-import { User } from "../User/User"
-import close from 'images/icons/close.svg'
-
-export const UserListMobile: React.FC<any> = ({ isMobile, closePopup }) => {
-    return (<div className="popup-mobile">
-        <div className="popup-mobile-container">
-            <div style={{top:"-20px", right: "-20px"}} onClick={closePopup} className="icon-close-container">
-                <img src={close}></img>
-            </div>
-            <h2 style={{ marginBottom: "20px" }}>Участники демонстрации</h2>
-            <User isMobile={isMobile} closeSidebar={closePopup}
-                isSidebarWide={true} /// this is for disable showhing button's caption
-                isAdmin={false}
-            ></User>
-        </div>
-
-    </div>)
-}

src/components/pages/Stream/components/ControlPanel/ControlPanel.tsx

@@ -0,0 +1,26 @@
+import { ControlButton } from "components/pages/Stream/components/buttons/ControlButton/ControlButton";
+import { MicroButton } from "components/pages/Stream/components/buttons/MicroButton/MicroButton";
+import { ShareButton } from "components/pages/Stream/components/buttons/ShareButton/ShareButton";
+import { LanguageButton } from "components/pages/Stream/components/buttons/LanguageButton/LanguageButton";
+import { ExitButton } from "components/pages/Stream/components/buttons/ExitButton/ExitButton";
+
+export const ControlPanel: React.FC<any> = ({
+  handleOpenSharePopup,
+  handleOpenExitPopup,
+  handleMuteClick,
+  handleControlClick,
+
+  isMuted,
+  isControl,
+  isSidebarWide
+}) => {
+  
+  return (
+    <div className="toolbar-field-part">
+      <ShareButton isSidebarWide={isSidebarWide} onClick={handleOpenSharePopup}></ShareButton>
+      <LanguageButton isSidebarWide={isSidebarWide} onClick={() => console.log("click!")}></LanguageButton>
+      <div className="toolbar-button-container-border-line"></div>
+      <ExitButton isSidebarWide={isSidebarWide} onClick={handleOpenExitPopup}></ExitButton>
+    </div>
+  );
+};

src/components/pages/Stream/components/ControlPanelMobile/ContolPanelMobile.css

@@ -0,0 +1,63 @@
+.popup-mobile-button-container {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    justify-content: space-between;
+}
+
+.menu-item-button {
+    justify-content: space-between;
+    width: 50%;
+    background: #23242A;
+    border-radius: 4px;
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 140%;
+    /* or 22px */
+
+    display: flex;
+    align-items: center;
+
+    /* White */
+    padding: 12px;
+    box-sizing: border-box;
+    color: #F2F2F2;
+}
+
+
+
+.menu-item-container {
+    height: 24px;
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+}
+
+.menu-item-language-caption {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 130%;
+    /* identical to box height, or 16px */
+    align-items: center;
+    text-align: right;
+    /* Button_3 */
+    color: #73788C;
+}
+
+.menu-item-language {
+    display: flex;
+    flex-direction: row;
+    gap: 4px;
+    align-items: center;
+}
+
+.menu-item-button-exit {
+    position: absolute;
+    width: 118px;
+    right: 0%;
+    bottom: 0%;
+}

src/components/pages/Stream/components/ControlPanelMobile/ControlPanelMobile.tsx

@@ -0,0 +1,45 @@
+import './ContolPanelMobile.css'
+import close from 'images/icons/close.svg'
+import share from 'images/icons/Share.svg'
+import right from 'images/icons/ChevronRight.svg'
+import exit from 'images/icons/exit.svg'
+import language from 'images/icons/Language.svg'
+import { useTranslation } from 'react-i18next'
+
+
+export const ControlPanelMobile: React.FC<any> = ({ closePopup, currentLang, setPopupExit, setPopupShare, setLanguagePopup }) => {
+    const { t } = useTranslation()
+    return (
+        <>
+            <div style={{ top: "-20px", right: "-20px" }} onClick={closePopup} className="icon-close-container">
+                <img src={close}></img>
+            </div>
+            <h2 style={{ marginBottom: "20px" }}>{t('popup-additional')}</h2>
+            <div className='popup-mobile-button-container'>
+                <button onClick={setPopupShare} className='menu-item-button'>
+                    <div className='menu-item-container'>
+                        <img src={share} className='menu-item-icon' />
+                        <span className='menu-item-caption'>{t('share-contro-btn')}</span>
+                    </div>
+                    <img src={right} className='menu-item-arrow' />
+                </button>
+                <button onClick={setLanguagePopup} className='menu-item-button'>
+                    <div className='menu-item-container'>
+                        <img src={language} className='menu-item-icon' />
+                        <span className='menu-item-caption'>{t('language-button')}</span>
+                    </div>
+                    <div className="menu-item-language">
+                        <span className='menu-item-language-caption'>{currentLang === 'ru' ? 'Русский' : 'English'}</span>
+                        <img src={right} className='menu-item-arrow' />
+                    </div>
+                </button>
+            </div>
+            <button onClick={setPopupExit} className='menu-item-button-exit button button-teritary'>
+                <img src={exit} className='' />
+                <span>{t('exit-control-btn')}</span>
+            </button>
+        </>
+
+    )
+
+}

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";
@@ -582,9 +576,6 @@ video {
 	min-width: 75%;
 }
 
-input {
-	text-align: right;
-}
 
 .warning {
 	box-sizing: border-box;

src/components/pages/Stream/components/PlayerComponent/PlayerComponent.tsx

@@ -7,8 +7,8 @@ import { useAppDispatch, useAppSelector } from "hooks/redux";
 import useWindowDimensions from "hooks/useWindowDimensions";
 import useMobile from "hooks/useMobile";
 
-import { Sidebar } from "components/pages/Stream/Sidebar/Sidebar";
-import { Player } from "components/pages/Stream/Player/Player";
+import { Sidebar } from "components/pages/Stream/components/Sidebar/Sidebar";
+import { Player } from "components/pages/Stream/components/Player/Player";
 
 type link = {
   id: string;
@@ -28,7 +28,6 @@ export const PlayerComponent: React.FC<any> = ({ cleanErrors, handleDisconnect,
 
 
   const { id } = useParams<link>();
-  const [click, setClick] = useState(false);
   const dispatch = useAppDispatch();
   const history = useHistory()
 
@@ -75,7 +74,6 @@ export const PlayerComponent: React.FC<any> = ({ cleanErrors, handleDisconnect,
         players={playerCount}
         heightDevice={height}
         isMobile={isMobile}
-        exitPopup={click}
       ></Sidebar>
     </>
   );

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/Sidebar/Sidebar.tsx

@@ -1,13 +1,12 @@
 import "./Sidebar.css";
-import React, { useEffect, useState } from "react";
-import { useHistory } from "react-router";
+import React, { useState } from "react";
 
 
 import { SidebarDesktop } from "../SidebarDesktop/SidebarDesktop";
 import { SidebarMobile } from "../SidebarMobile/SidebarMobile";
 
-import { closeStream } from "utils/app";
-import { useAppSelector } from "hooks/redux";
+import { useAppDispatch, useAppSelector } from "hooks/redux";
+import { languageSlice } from "store/reducers/languageSlice";
 
 export const Sidebar: React.FC<any> = ({ exitPopup, isMobile, heightDevice, players, handleDisconnect }) => {
   const [isMuted, setMuted] = useState(true);
@@ -15,15 +14,20 @@ export const Sidebar: React.FC<any> = ({ exitPopup, isMobile, heightDevice, play
 
   const { playerCount } = useAppSelector((state) => state.sessionReducer);
 
+  const { currentLang } = useAppSelector((state) => state.languageReducer)
+  const { handleChangeLanguage } = languageSlice.actions;
 
-
-
+  const dispatch = useAppDispatch()
 
 
   const handleCloseStream = () => {
     handleDisconnect()
   }
 
+  const handleLanguage = (value: string) => {
+    dispatch(handleChangeLanguage(value))
+  }
+
   const handleMuteClick = () => {
     setMuted((prev) => !prev);
   };
@@ -36,6 +40,8 @@ export const Sidebar: React.FC<any> = ({ exitPopup, isMobile, heightDevice, play
     <>
       {isMobile ? (
         <SidebarMobile
+          handleLanguage={handleLanguage}
+          currentLang={currentLang}
           userArr={playerCount}
           isMobile={isMobile}
           height={heightDevice}

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

@@ -1,12 +1,13 @@
 import React, { useState, useEffect } from "react";
+
 import { AnimatePresence, motion } from "framer-motion";
 
-import { UserList } from "components/pages/Stream/UserList/UserList";
-import { FullscreenButton } from "components/pages/Stream/FullscreenButton/FullscreenButton";
-import { PopupShare } from "components/pages/Stream/PopupShare/PopupShare";
-import { PopupExit } from "components/pages/Stream/PopupExit/PopupExit";
+import { UserList } from "components/pages/Stream/components/UserList/UserList";
+import { FullscreenButton } from "components/pages/Stream/components/buttons/FullscreenButton/FullscreenButton";
+import { PopupShare } from "components/pages/Stream/components/popups/PopupShare/PopupShare";
+import { PopupExit } from "components/pages/Stream/components/popups/PopupExit/PopupExit";
 import { ControlPanel } from "../ControlPanel/ControlPanel";
-import { WideSidebarButton } from "components/pages/Stream/WideSidebarButton/WideSidebarButton";
+import { WideSidebarButton } from "components/pages/Stream/components/buttons/WideSidebarButton/WideSidebarButton";
 
 import {
   sidebarVariants,
@@ -101,7 +102,6 @@ export const SidebarDesktop: React.FC<any> = ({
         >
           <div className="toolbar-field-part">
             <FullscreenButton isSidebarWide={wideSidebar}> </FullscreenButton>
-            <div className="toolbar-button-container-border-line"></div>
             <UserList
               userArr={userArr}
               isMobile={isMobile}
@@ -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

@@ -0,0 +1,105 @@
+import { AnimatePresence, motion } from "framer-motion";
+
+import {
+  sidebarVariants,
+  popupAnimation,
+} from "utils/animationProps";
+
+import { useEffect, useState } from "react";
+
+import { FullscreenButton } from "components/pages/Stream/components/buttons/FullscreenButton/FullscreenButton";
+import { WideSidebarButton } from "components/pages/Stream/components/buttons/WideSidebarButton/WideSidebarButton";
+import { UserButtonMobile } from "components/pages/Stream/components/buttons/UserButtonMobile/UserButtonMobile";
+import { ControlButton } from "components/pages/Stream/components/buttons/ControlButton/ControlButton";
+import { MicroButton } from "components/pages/Stream/components/buttons/MicroButton/MicroButton";
+import { AdditionalButton } from "components/pages/Stream/components/buttons/AdditionalButton/AdditionalButton";
+import { UserListMobilePopup } from "components/pages/Stream/components/popups/UserListMobliePopup/UserListMobilePopup";
+import { ExitButton } from "components/pages/Stream/components/buttons/ExitButton/ExitButton";
+import { PopupAdditional } from 'components/pages/Stream/components/popups/PopupAdditional/PopupAdditional'
+
+export const SidebarMobile: React.FC<any> = ({ height, isMobile, handleLanguage, userArr, currentLang, closeStream }) => {
+  const [open, setOpen] = useState(false);
+  const [userListPopup, setUserListPopup] = useState(false);
+  const [popupAdditional, setPopupAdditional] = useState(false); //should be insted of exit button, but popup doesn't ready yet
+
+  const handleOpenPopupAdditional = () => {
+    if (userListPopup) {
+      setUserListPopup(false)
+    }
+    setPopupAdditional(true)
+  }
+
+  const handleOpenPopupUserList = () => {
+    if (popupAdditional) {
+      setPopupAdditional(false)
+    }
+    setUserListPopup(true)
+  }
+
+  const handleClosePopups = () => {
+    setPopupAdditional(false)
+    setUserListPopup(false)
+  }
+
+
+  useEffect(() => () => handleClosePopups(), []);
+
+
+  return (
+    <>    <motion.div
+      initial={false}
+      animate={open ? "open" : "closed"}
+      variants={sidebarVariants}
+      style={{ height: height }}
+      className="toolbar-container"
+    >
+      <div className="toolbar-field">
+        <div className="toolbar-field-part">
+          <FullscreenButton isSidebarWide={false}> </FullscreenButton>
+          <WideSidebarButton close={() => setOpen(false)}></WideSidebarButton>
+          <div className="toolbar-button-container-border-line"></div>
+          <UserButtonMobile
+            active={userListPopup}
+            onClick={handleOpenPopupUserList}
+          ></UserButtonMobile>
+        </div>
+        <div className="toolbar-field-part">
+          <div className="toolbar-button-container-border-line"></div>
+          <AdditionalButton active={popupAdditional} isSidebarWide={false} onClick={handleOpenPopupAdditional}></AdditionalButton>
+        </div>
+        <AnimatePresence>
+          {!open && (
+            <motion.div
+              variants={popupAnimation}
+              initial={"hidden"}
+              animate={"show"}
+              exit={"hidden"}
+              onClick={() => setOpen(true)}
+              className="toolbar-open-button"
+            >
+              <span className="toolbar-open-button-icon"></span>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </motion.div>
+      <AnimatePresence mode="wait">
+        {userListPopup && (<motion.div key={1}
+          variants={popupAnimation}
+          initial={"hidden"}
+          animate={"show"}
+          exit={"hidden"}
+        >
+          <UserListMobilePopup height={height} userArr={userArr} closePopup={() => setUserListPopup(false)} isMobile={isMobile}></UserListMobilePopup>
+        </motion.div>)}
+        {popupAdditional && (<motion.div key={2} variants={popupAnimation} initial={"hidden"}
+          animate={"show"}
+          exit={"hidden"}
+        >
+          <PopupAdditional height={height} handleLanguage={handleLanguage} closeStream={closeStream} active={popupAdditional} currentLang={currentLang} closePopup={() => setPopupAdditional(false)}></PopupAdditional>
+        </motion.div>)}
+      </AnimatePresence>
+    </>
+
+  );
+};

src/components/pages/Stream/components/User/User.tsx

@@ -17,6 +17,7 @@ import {
   transition,
   iconAnimation,
 } from "utils/animationProps";
+import { useTranslation } from "react-i18next";
 
 export const User: React.FC<any> = ({
   isAdmin,
@@ -28,6 +29,7 @@ export const User: React.FC<any> = ({
   const [expand, setExpand] = useState(false);
   const [mute, setMute] = useState(true);
   const [isControl, setControl] = useState(true);
+  const {t} = useTranslation()
 
   useEffect(() => {
     setExpand(false);
@@ -65,7 +67,7 @@ export const User: React.FC<any> = ({
               animate={isSidebarWide ? "show" : "hidden"}
               className="user-name"
             >
-              Пользователь
+              {t('user')}
             </motion.span>
           </div>
           {isSidebarWide && (

src/components/pages/Stream/components/UserList/UserList.tsx

@@ -1,4 +1,4 @@
-import { User } from "components/pages/Stream/User/User";
+import { User } from "components/pages/Stream/components/User/User";
 
 export const UserList: React.FC<any> = ({ isSidebarWide, isAdmin, closeSidebar, isMobile, userArr }) => {
   console.log(userArr)

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/PopupAdditional/PopupAdditional.tsx

@@ -0,0 +1,65 @@
+import '../popup.css'
+import { ControlPanelMobile } from "components/pages/Stream/components/ControlPanelMobile/ControlPanelMobile"
+import { PopupInviteMobile } from "../PopupInviteMobile/PopupInviteMobile"
+import { PopupExitMobile } from '../PopupExitMobile/PopupExitMobile'
+import { PopupLanguageMobile } from '../PopupLanguageMobile/PopupLanguageMobile'
+import { useEffect, useState } from 'react'
+
+export const PopupAdditional: React.FC<any> = ({ closePopup, currentLang, active, closeStream, handleLanguage, height }) => {
+    const [popup, setPopup] = useState(true)
+    const [popupShare, setPopupShare] = useState(false)
+    const [popupLanguage, setPopupLanguage] = useState(false)
+    const [popupExit, setPopupExit] = useState(false)
+
+    const handleCloseComponent = () => {
+        setPopup(true)
+        setPopupExit(false)
+        setPopupShare(false)
+        setPopupLanguage(false)
+
+    }
+
+    useEffect(() => {
+        if (active) {
+        handleCloseComponent()
+        }
+    }, [active])
+
+    useEffect(() => () => handleCloseComponent(), []);
+
+
+    const handleMainPopupOff = () => {
+        setPopup(false)
+    }
+
+    const handlePopupShare = () => {
+        handleMainPopupOff()
+        setPopupShare(true)
+    }
+
+    const handlePopupExit = () => {
+        handleMainPopupOff()
+        setPopupExit(true)
+    }
+
+
+    const handleLanguagePopup = () => {
+        handleMainPopupOff()
+        setPopupLanguage(true)
+    }
+
+    console.log(height)
+
+    return (<div style={{height: height}} className="popup-mobile">
+        <div className="popup-mobile-container">
+            {popup && (<ControlPanelMobile closePopup={closePopup} currentLang={currentLang} handleReturn={() => setPopup(true)} setPopupExit={handlePopupExit} setPopupShare={handlePopupShare} setPopupInvite={handlePopupShare} setLanguagePopup={handleLanguagePopup}></ControlPanelMobile>
+            )}
+            {popupShare && (<PopupInviteMobile handleReturn={() => setPopup(true)} setPopup={() => setPopupShare(false)}></PopupInviteMobile>
+            )}
+            {popupLanguage && (<PopupLanguageMobile handleLanguage={handleLanguage} currentLang={currentLang} handleReturn={() => setPopup(true)} setPopup={() => setPopupLanguage(false)}></PopupLanguageMobile>
+            )}
+            {popupExit && (<PopupExitMobile closeStream={closeStream} handleReturn={() => setPopup(true)} setPopup={() => setPopupExit(false)}></PopupExitMobile>
+            )}
+        </div>
+    </div>)
+}

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

@@ -4,9 +4,7 @@ import "./PopupExit.css";
 
 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,8 +18,8 @@ export const PopupExit: React.FC<TSidebarPopup> = ({ setClose, onExit }) => {
             {t("popup-control-no")}
           </button>
           <button
+            onClick={closeStream}
             style={{ height: "48px" }}
-            onClick={() => onExit?.()}
             className=" button button-secondary"
           >
             {t("popup-control-yes")}

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

@@ -0,0 +1,27 @@
+import { useTranslation } from "react-i18next"
+
+export const PopupExitMobile: React.FC<any> = ({ handleReturn, setPopup, closeStream }) => {
+    const onReturnClick = () => {
+        setPopup()
+        handleReturn()
+    }
+
+    const { t } = useTranslation()
+    return (<div className="popup-exit-container">
+        <h2 style={{ marginBottom: "24px" }} className="mobile-users-part-header-title">
+            {t("popup-control-exit-title")}
+        </h2>
+        <div className="popup-exit-button-container-mobile">
+            <button onClick={onReturnClick} className="button button-primary">
+                {t("popup-control-no")}
+            </button>
+            <button
+                onClick={closeStream}
+                style={{ height: "48px" }}
+                className=" button button-secondary"
+            >
+                {t("popup-control-yes")}
+            </button>
+        </div>
+    </div>)
+}

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

@@ -0,0 +1,50 @@
+import back from 'images/icons/Back.svg'
+import { useTranslation } from 'react-i18next'
+import { useState } from 'react'
+
+
+export const PopupInviteMobile: React.FC<any> = ({ setPopup, handleReturn }) => {
+    const { t } = useTranslation()
+    const [copy, setCopy] = useState(false);
+
+    function copyLink() {
+        navigator.clipboard.writeText(window.location.href);
+        setCopy((prev) => !prev);
+    }
+
+    const onReturnClick = () => {
+        setPopup()
+        handleReturn()
+    }
+
+    return (
+        <>
+            <div style={{ marginBottom: "28px" }} className='popup-header-mobile'>
+                <img onClick={onReturnClick} src={back}></img>
+                <h2>{t('popup-control-invite-title')}</h2>
+            </div>
+            <div className='popup-invite-container'>
+                <p className='popup-invite-title'>{t('popup-control-link')}</p>
+                <input
+                    className="share-popup-data-input href"
+                    value={window.location.href}
+                    readOnly
+                ></input>
+                {!copy ? (
+                    <button style={{ width: '171px' }} onClick={copyLink} className="button button-primary ">
+                        <span className="share-popup-copy-button-icon"></span>
+                        <span className="">
+                            {copy ? t("popup-control-btn-active") : t("popup-control-btn")}
+                        </span>
+                    </button>
+                ) : (
+                    <button style={{ width: '171px' }} onClick={copyLink} className="button button-teritary">
+                        <span className="share-popup-copied-button-icon"></span>
+                        <span className="">{t("popup-control-btn-active")}</span>
+                    </button>
+                )}
+
+            </div>
+        </>
+    )
+}

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

@@ -0,0 +1,44 @@
+import back from 'images/icons/Back.svg'
+import ok from 'images/icons/OK.svg'
+import { useTranslation } from 'react-i18next'
+
+export const PopupLanguageMobile: React.FC<any> = ({ currentLang, setPopup, handleReturn, handleLanguage }) => {
+    console.log(currentLang)
+    const buttonArray = [{
+        value: 'ru',
+        captionInt: "Русский",
+        caption: 'Русский',
+    }, {
+        value: 'en',
+        captionInt: "English",
+        caption: 'Английский',
+    }]
+    const { t } = useTranslation()
+
+    const onReturnClick = () => {
+        setPopup()
+        handleReturn()
+    }
+    return (
+        <>
+            <div style={{ marginBottom: "28px" }} className='popup-header-mobile'>
+                <img onClick={onReturnClick} src={back}></img>
+                <h2>{t('popup-change-language')}</h2>
+            </div>
+            <div className="popup-exit-button-container-mobile">
+                {buttonArray.map((i, index) => (
+                    <button onClick={() => handleLanguage(i.value)} disabled={i.value === currentLang} key={index} className='popup-button-language'>
+                        <div className='popup-button-container-language'>
+                            <span>{i.caption}</span>
+                            <span style={{ fontSize: "12px" }}>{i.captionInt}</span>
+                        </div>
+                        {currentLang === i.value && (<img className='popup-button-icon-active' src={ok} />
+                        )}
+                    </button>
+                ))}
+
+            </div>
+
+        </>
+    )
+}

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

@@ -0,0 +1,21 @@
+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, height }) => {
+    const {t} = useTranslation()
+    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>
+            </div>
+            <h2 style={{ marginBottom: "20px" }}>{t('popup-userlist')}</h2>
+            {userArr.map((i: any) => (<User isMobile={isMobile} closeSidebar={closePopup}
+                isSidebarWide={true} /// this is for disable showhing button's caption
+                isAdmin={false}
+            ></User>
+            ))}
+        </div>
+
+    </div>)
+}

src/components/pages/Stream/components/popups/popup.css

@@ -0,0 +1,65 @@
+.popup-header-mobile {
+    display: flex;
+    flex-direction: row;
+    gap: 12px;
+    align-items: center;
+}
+
+.popup-invite-title {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 120%;
+    /* identical to box height, or 24px */
+
+
+    /* Graff/White/Inactive */
+
+    color: #C5C7CE;
+    margin: 0;
+}
+
+.popup-invite-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.popup-exit-container {
+    padding-top: 48px;
+}
+
+.popup-exit-button-container-mobile {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+}
+
+.popup-button-language {
+    position: relative;
+    text-align: left;
+    font-family: 'Inter';
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 50%;
+    color: #FFFFFF;
+    padding: 16px 12px;
+    position: relative;
+    /* Button_1 */
+    background: #23242A;
+    border-radius: 4px;
+}
+
+.popup-button-container-language {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.popup-button-icon-active {
+    position: absolute;
+    right: 12px;
+    top: 20px;
+}

src/components/shared/Button/Button.tsx

@@ -1,18 +1,15 @@
-import "components/pages/Stream/Sidebar/Sidebar.css";
+import "components/pages/Stream/components/Sidebar/Sidebar.css";
 import { useState } from "react";
 
 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/images/icons/Back.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 12L18 12M6 12L12.3636 18M6 12L12.3636 6" stroke="#C5C7CE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/images/icons/Language.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.4242 11.6364L12.9393 7.57131C12.6193 6.69547 11.3806 6.69547 11.0607 7.57131L9.57576 11.6364M14.4242 11.6364H9.57576M14.4242 11.6364L15 13.0398M9.57576 11.6364L9 13.0398M11.6571 16.8182H3C2.44772 16.8182 2 16.3705 2 15.8182V4C2 3.44772 2.44772 3 3 3H21C21.5523 3 22 3.44772 22 4V15.8182C22 16.3705 21.5523 16.8182 21 16.8182H19.6667C19.1144 16.8182 18.6667 17.2659 18.6667 17.8182V19.9562C18.6667 20.7882 17.7099 21.2563 17.053 20.7457L12.2708 17.0286C12.0953 16.8922 11.8793 16.8182 11.6571 16.8182Z" stroke="#C5C7CE" stroke-width="2" stroke-linecap="round"/>
+</svg>

src/images/icons/OK.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 12L10 17L19 8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/index.css

@@ -12,6 +12,9 @@ body {
 }
 
 .popup-mobile {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
   position: absolute;
   background: #151619;
   width: calc(100% - 60px);
@@ -23,6 +26,7 @@ body {
 }
 
 .popup-mobile-container {
+  height: 100%;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -53,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;
   }
 }
@@ -73,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

@@ -1,49 +1,62 @@
 import { createAsyncThunk } from "@reduxjs/toolkit";
-import axios from 'axios';
+import axios from "axios";
 
 const instance = axios.create({
-  baseURL: 'https://a1.coord.graff.tech',
+  baseURL: "https://a1.coord.graff.tech",
 });
 
-instance.defaults.headers.post['Content-Type'] = 'application/json';
-
-
+instance.defaults.headers.post["Content-Type"] = "application/json";
 
 export const fetchCards = createAsyncThunk(
   "cards/FetchAll",
   async (language: string, thunkApi) => {
     try {
-      const { data } = await instance.get('/title/get_for_language/', { params: { start: 0, count: 100, language: language } });
+      const { data } = await instance.get("/title/get_for_language/", {
+        params: { start: 0, count: 100, language: language },
+      });
       return data;
     } catch (e: any) {
-      const { response } = e
+      const { response } = e;
       if (!response) {
-        return thunkApi.rejectWithValue('Произошла ошибка, попробуйте позже');
-
+        return thunkApi.rejectWithValue("Произошла ошибка, попробуйте позже");
       } else {
         return thunkApi.rejectWithValue(response.data.message);
-
       }
     }
-
   }
 );
 
+export const fetchPrivateCards = createAsyncThunk(
+  "cards/FetchAll",
+  async (key: string, thunkApi) => {
+    try {
+      const { data } = await instance.get("/title/get_private/", {
+        params: { key },
+      });
+      return data;
+    } catch (e: any) {
+      const { response } = e;
+      if (!response) {
+        return thunkApi.rejectWithValue("Произошла ошибка, попробуйте позже");
+      } else {
+        return thunkApi.rejectWithValue(response.data.message);
+      }
+    }
+  }
+);
 
 export const createSession = createAsyncThunk(
   "session/Create",
   async (title: string, thunkApi) => {
     try {
-      const { data } = await instance.post('/session/create', { title });
+      const { data } = await instance.post("/session/create", { title });
       return data;
     } catch (e: any) {
-      const { response } = e
+      const { response } = e;
       if (!response) {
-        return thunkApi.rejectWithValue('Произошла ошибка, попробуйте позже');
-
+        return thunkApi.rejectWithValue("Произошла ошибка, попробуйте позже");
       } else {
         return thunkApi.rejectWithValue(response.data.message);
-
       }
     }
   }
@@ -53,16 +66,16 @@ export const connectSession = createAsyncThunk(
   "session/Connect",
   async (code: string, thunkApi) => {
     try {
-      const { data } = await instance.get('/session/connect', { params: { session_id: code } });
+      const { data } = await instance.get("/session/connect", {
+        params: { session_id: code },
+      });
       return data;
     } catch (e: any) {
-      const { response } = e
+      const { response } = e;
       if (!response) {
-        return thunkApi.rejectWithValue('Произошла ошибка, попробуйте позже');
-
+        return thunkApi.rejectWithValue("Произошла ошибка, попробуйте позже");
       } else {
         return thunkApi.rejectWithValue(response.data.message);
-
       }
     }
   }

src/store/reducers/languageSlice.ts

@@ -27,6 +27,7 @@ i18next
 
 
 
+
 interface LanguageState {
   currentLang: string;
 }

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/connectData.tsx

@@ -1,7 +0,0 @@
-export const ConnectData = {
-   // pixelIp: "192.168.1.170",
-   pixelIp: 'stream.graff.tech',
-   // url: `http://192.168.1.170`,
-   url: `https://stream.graff.tech`,
-   port: 13001
-}

src/utils/types.tsx

@@ -1,91 +0,0 @@
-export type TMain = {
-  code: any;
-  text: any;
-  onConnectSess: () => void;
-  setCode: (code: string) => void;
-  onConnectSessEx: (code: string) => void;
-};
-
-export type TObject = {
-  popup1: boolean;
-  popup2: boolean;
-};
-
-export type TPopup = {
-  visible: TObject;
-  text: any;
-  setVisible: (object: TObject) => void;
-  onConnectSess?: () => void;
-  onConnectSessEx?: (code: string) => void;
-  setCode?: (code: string) => void;
-};
-
-export type TData = {
-  port: string;
-  id: string;
-};
-
-export type TSideBar = {
-  currentUser: (user: any) => void
-  closeStream: () => void;
-  data: TData;
-
-}
-export type TPlayerComponent = {
-  closeStream: () => void;
-  data: TData;
-};
-
-export type TUserList = {
-  handleReturnControl: () => void;
-  handleControl: (user: object) => void;
-  selected: any;
-  setSelected: (user: any) => void;
-  message: any;
-  localUser: any;
-  audio: any;
-  users: any;
-  sendControlRequest: (user: object) => void;
-};
-
-export type TUserButton = {
-  handleReturnControl: () => void;
-  handleControl: (user: object) => void;
-  setSelected: (user: any) => void;
-  message: any;
-  sendControlRequest: (user: object) => void;
-  audio: any;
-  user: any;
-  selected: boolean;
-  isAdmin: (user: object) => boolean;
-  localUser: any;
-};
-
-export type TUserControl = {
-  setMuted: (state: boolean) => void;
-  isMuted: boolean;
-  handleReturnControl: () => void;
-  setNotification: (state: boolean) => void;
-  handleControl: (user: object) => void;
-  localUser: any;
-  user: any;
-  isAdmin: (user: object) => boolean;
-  sendControlRequest: (user: object) => void;
-};
-
-export type TButton = {
-  button: any;
-  active?: boolean;
-  onClick: () => void;
-};
-
-export type THOC = {
-  onClick: () => void;
-  isMuted?: boolean;
-};
-
-export type TSidebarPopup = {
-  setClose: () => void;
-  data?: TData;
-  onExit?: () => void;
-};