refactoring, mobile version functional

2023-03-24 17:05:56 +05:00
parent 65bc4a011a
commit 0adbf6f4e2
82 changed files with 566 additions and 148 deletions
@@ -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"
+
+
+
+
 }
@@ -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": "Выбор языка"
 }
@@ -11,7 +11,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 { PlayerComponent } from "components/pages/Stream/PlayerComponent/PlayerComponent";
+import { PlayerComponent } from "components/pages/Stream/components/PlayerComponent/PlayerComponent";
 import { PlanComponent } from "components/pages/Plan/PlanComponent";

 import { useAppDispatch, useAppSelector } from "hooks/redux";
@@ -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>
-  );
-};
@@ -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>
-    </>
-
-  );
-};
@@ -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>)
-}
@@ -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>
+  );
+};
@@ -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%;
+}
@@ -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>
+        </>
+
+    )
+
+}
@@ -582,9 +582,6 @@ video {
 	min-width: 75%;
 }

-input {
-	text-align: right;
-}

 .warning {
 	box-sizing: border-box;
@@ -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>
    </>
  );
@@ -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}
@@ -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}
@@ -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 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>
+    </>
+
+  );
+};
@@ -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 && (
@@ -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)
@@ -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>)
+}
@@ -21,7 +21,6 @@ export const PopupExit: React.FC<TSidebarPopup> = ({ setClose, onExit }) => {
          </button>
          <button
            style={{ height: "48px" }}
-            onClick={() => onExit?.()}
            className=" button button-secondary"
          >
            {t("popup-control-yes")}
@@ -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>)
+}
@@ -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>
+        </>
+    )
+}
@@ -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>
+
+        </>
+    )
+}
@@ -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 }) => {
+    const {t} = useTranslation()
+    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" }}>{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>)
+}
@@ -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;
+}
@@ -1,4 +1,4 @@
-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";
@@ -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>
@@ -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>
@@ -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>
@@ -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;