refactoring

src/components/pages/ConnectPage/LoadingPopup/LoadingPopup.tsx

@@ -2,8 +2,6 @@ import "./LoadingPopup.css";
 import { useHistory } from "react-router-dom";
 
 import { useTranslation } from "react-i18next";
-import { useAppDispatch, useAppSelector } from "hooks/redux";
-
 
 export const LoadingPopup: React.FC<any> = ({ logo }) => {
 
@@ -17,7 +15,7 @@ export const LoadingPopup: React.FC<any> = ({ logo }) => {
         <div className="popup-img-container">
           <img className="popup-logo" src={logo} alt="лого" />
         </div>
-        <span className="loading-caption">Пожалуйста подождите</span>
+        <span className="loading-caption">{t('popup-loading')}</span>
       </div>
       <span className="loader"></span>
     </div>

src/components/pages/ConnectPage/PopupComponent/PopupComponent.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 
 import { popupAnimation } from "utils/animationProps";
@@ -6,16 +6,13 @@ import { popupAnimation } from "utils/animationProps";
 import { PopupConnect } from "components/pages/ConnectPage/PopupConnect/PopupConnect";
 import { LoadingPopup } from "components/pages/ConnectPage/LoadingPopup/LoadingPopup";
 
-import { useAppDispatch, useAppSelector } from "hooks/redux";
+import { useAppDispatch } from "hooks/redux";
 import { sessionSlice } from "store/reducers/sessionSlice";
 
-export const PopupComponent: React.FC = () => {
+export const PopupComponent: React.FC<any> = ({isLoading, handleConnect, currentCard, cleanErrors}) => {
   const dispatch = useAppDispatch();
-  const { currentCard } = useAppSelector((state) => state.cardReducer);
 
-  const { cleanErrors } = sessionSlice.actions;
 
-  const { isLoading } = useAppSelector((state) => state.sessionReducer);
 
 
 
@@ -39,6 +36,7 @@ export const PopupComponent: React.FC = () => {
             title={currentCard.app_title}
             isLoading={isLoading}
             logo={currentCard.logo}
+            handleConnect={handleConnect}
           ></PopupConnect>
         </motion.div>
       )}

src/components/pages/ConnectPage/PopupConnect/PopupConnect.tsx

@@ -7,24 +7,9 @@ import { useAppDispatch } from "hooks/redux";
 
 import { useTranslation } from "react-i18next";
 
-export const PopupConnect: React.FC<any> = ({ onConnect, logo, isLoading, title }) => {
+export const PopupConnect: React.FC<any> = ({ logo, isLoading, title, handleConnect }) => {
   const history = useHistory();
   const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-
-
-  const handleConnect = () => {
-    dispatch(createSession(title)).unwrap().then((res) => {
-      history.push(`/stream/${res.payload.session_id}`);
-    }).catch((res) => {
-      alert(res);
-      history.push("/");
-    })
-  };
-
-
-
-  console.log(isLoading)
 
   return (
     <div className="popup">
@@ -32,7 +17,7 @@ export const PopupConnect: React.FC<any> = ({ onConnect, logo, isLoading, title
         <img className="popup-logo" src={logo} alt="лого" />
       </div>
       <div className="popup-button-container">
-        <button disabled={isLoading} onClick={handleConnect} className="button button-primary">
+        <button disabled={isLoading} onClick={() => handleConnect(title)} className="button button-primary">
           {t("popup-main-btn-start")}
         </button>
         <div className="line"></div>

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

@@ -1,12 +1,10 @@
 import "./PlayerStyles.css";
 import React, { useEffect, useState } from "react";
-import { useParams, useHistory } from "react-router-dom";
+import { useHistory, useParams } from "react-router-dom";
 
 import { connectSession } from "store/reducers/ActionCreator";
 import { useAppDispatch, useAppSelector } from "hooks/redux";
-import { sessionSlice } from "store/reducers/sessionSlice";
 import useWindowDimensions from "hooks/useWindowDimensions";
-import { load as loadStream, usersArray } from "utils/app";
 import useMobile from "hooks/useMobile";
 
 import { Sidebar } from "components/pages/Stream/Sidebar/Sidebar";
@@ -18,7 +16,7 @@ type link = {
 
 
 
-export const PlayerComponent: React.FC<any> = ({ }) => {
+export const PlayerComponent: React.FC<any> = ({ cleanErrors, handleDisconnect, loadStream }) => {
   const { isMobile } = useMobile();
   const windowDimensions = useWindowDimensions();
   const width = windowDimensions.width;
@@ -32,18 +30,19 @@ export const PlayerComponent: React.FC<any> = ({ }) => {
   const { id } = useParams<link>();
   const [click, setClick] = useState(false);
   const dispatch = useAppDispatch();
-  const { cleanErrors } = sessionSlice.actions;
+  const history = useHistory()
 
 
   useEffect(() => {
     dispatch(connectSession(id)).unwrap().then(() => {
+      loadStream()
     }).catch((res) => {
       alert(res);
-    }).finally(() => {
-      loadStream()
-    });
+      history.push('/')
+    })
     return () => {
       dispatch(cleanErrors());
+      handleDisconnect()
       window.removeEventListener("change ", (event: any) => {
         setPopup(false);
       });
@@ -65,7 +64,6 @@ export const PlayerComponent: React.FC<any> = ({ }) => {
 
   return (
     <>
-    <span>{playerCount}</span>
       {popup && (
         <div className="popup-screen" style={{ height: height }}>
           <h2>Переверните устройство</h2>
@@ -73,6 +71,7 @@ export const PlayerComponent: React.FC<any> = ({ }) => {
       )}
       <Player></Player>
       <Sidebar
+        handleDisconnect={handleDisconnect}
         players={playerCount}
         heightDevice={height}
         isMobile={isMobile}

src/components/pages/Stream/Sidebar/Sidebar.tsx

@@ -9,10 +9,9 @@ import { SidebarMobile } from "../SidebarMobile/SidebarMobile";
 import { closeStream } from "utils/app";
 import { useAppSelector } from "hooks/redux";
 
-export const Sidebar: React.FC<any> = ({ exitPopup, isMobile, heightDevice, players }) => {
+export const Sidebar: React.FC<any> = ({ exitPopup, isMobile, heightDevice, players, handleDisconnect }) => {
   const [isMuted, setMuted] = useState(true);
   const [isControl, setControl] = useState(false);
-  const history = useHistory()
 
   const { playerCount } = useAppSelector((state) => state.sessionReducer);
 
@@ -22,8 +21,7 @@ export const Sidebar: React.FC<any> = ({ exitPopup, isMobile, heightDevice, play
 
 
   const handleCloseStream = () => {
-    closeStream()
-    history.push('/')
+    handleDisconnect()
   }
 
   const handleMuteClick = () => {
@@ -46,11 +44,11 @@ export const Sidebar: React.FC<any> = ({ exitPopup, isMobile, heightDevice, play
           handleMuteClick={handleMuteClick}
           handleControlClick={handleControlClick}
           closeStream={handleCloseStream}
+          handleOpenExitPopup={handleCloseStream}
         ></SidebarMobile>
       ) : (
         <SidebarDesktop
           userArr={playerCount}
-
           height={heightDevice}
           isMobile={isMobile}
           isMuted={isMuted}

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

@@ -86,7 +86,8 @@ export const SidebarDesktop: React.FC<any> = ({
   return (
     <>
       <motion.div
-        onHoverEnd={() => closeSideBar()}
+        onHoverStart={() => setWideSidebar(true)}
+        onHoverEnd={() => setWideSidebar(false)}
         initial={false}
         animate={open ? "open" : "closed"}
         variants={wideSidebar ? setAnimation() : sidebarVariants}
@@ -110,7 +111,6 @@ export const SidebarDesktop: React.FC<any> = ({
             ></UserList>
           </div>
           <motion.div
-            onHoverStart={() => setWideSidebar(true)}
             className="toolbar-field-part"
           >
             <WideSidebarButton

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

@@ -3,8 +3,6 @@ import { AnimatePresence, motion } from "framer-motion";
 import {
   sidebarVariants,
   popupAnimation,
-  wideSidebarVariants,
-  wideSidebarAdminVariants,
 } from "utils/animationProps";
 import { useState } from "react";
 import { WideSidebarButton } from "../WideSidebarButton/WideSidebarButton";
@@ -13,11 +11,12 @@ 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 }) => {
+export const SidebarMobile: React.FC<any> = ({ height, isMobile, handleOpenExitPopup }) => {
   const [open, setOpen] = useState(false);
   const [userList, setUserList] = useState(false);
-  const [popupAdditional, setPopupAdditipnal] = 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
@@ -41,10 +40,7 @@ export const SidebarMobile: React.FC<any> = ({ height, isMobile }) => {
           <ControlButton></ControlButton>
           <MicroButton></MicroButton>
           <div className="toolbar-button-container-border-line"></div>
-          <AdditionalButton
-            active={popupAdditional}
-            onClick={() => setPopupAdditipnal(true)}
-          ></AdditionalButton>
+          <ExitButton isSidebarWide={false} onClick={handleOpenExitPopup}></ExitButton> 
         </div>
         <AnimatePresence>
           {!open && (

src/components/pages/Stream/WideSidebarButton/WideSidebarButton.tsx

@@ -10,8 +10,8 @@ export const WideSidebarButton: React.FC<any> = ({ close, isSidebarWide }) => {
   const [active, setActive] = useState(false);
   const [button, setButton] = useState({
     icon: wideButton,
-    inactive: "Скрыть меню",
-    active: "Скрыть меню",
+    inactive: "sidebar-hide",
+    active: "sidebar-hide",
     type: "fullscreen",
     noHover: true,
   });