Mobile: Inprogress

src/components/pages/Stream/AdditionalButton/AdditionalButton.tsx

@@ -0,0 +1,21 @@
+import { Button } from "components/shared/Button/Button";
+import more from "images/icons/More.svg";
+
+
+export const AdditionalButton: React.FC<any> = ({ active, onClick }) => {
+  const button = {
+    icon: more,
+    inactive: "",
+    active: "",
+    type: "",
+  };
+  return (
+    <div
+      style={active ? { background: "#2E3038" } : { background: "transparent" }}
+      className="toolbar-button-area"
+      onClick={() => onClick()}
+    >
+      <Button button={button}></Button>
+    </div>
+  );
+};

src/components/pages/Stream/ControlButton/ControlButton.tsx

@@ -6,11 +6,13 @@ import { useTranslation } from "react-i18next";
 
 import { Button } from "components/shared/Button/Button";
 
-
-export const ControlButton: React.FC<any> = ({ onClick, isSidebarWide }) => {
+export const ControlButton: React.FC<any> = ({
+  onClick,
+  isSidebarWide,
+  isActive,
+}) => {
   const { t } = useTranslation();
 
-  const [active, setActive] = useState(false);
   const [button, setButton] = useState({
     icon: control,
     active: "request-control-btn",
@@ -19,23 +21,19 @@ export const ControlButton: React.FC<any> = ({ onClick, isSidebarWide }) => {
   });
 
   useEffect(() => {
-    setButton({ ...button, icon: active ? control : controlOff });
-  }, [active]);
+    setButton({ ...button, icon: isActive ? control : controlOff });
+  }, [isActive]);
 
   function handleClick() {
     onClick();
-    setActive((prev) => !prev);
   }
 
   return (
-    <div
-      onClick={handleClick}
-      className="toolbar-button-area"
-    >
+    <div onClick={handleClick} className="toolbar-button-area">
       <Button
         isSidebarWide={isSidebarWide}
         button={button}
-        active={active}
+        active={isActive}
       ></Button>
     </div>
   );

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

@@ -8,15 +8,18 @@ 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 isSidebarWide={isSidebarWide} onClick={() => console.log("click!")}></ControlButton>
-      <MicroButton isSidebarWide={isSidebarWide} isMuted={isMuted} onClick={handleMuteClick}></MicroButton>
+      <ControlButton isActive={isControl} isSidebarWide={isSidebarWide} onClick={handleControlClick}></ControlButton>
+      <MicroButton isSidebarWide={isSidebarWide} isActive={isMuted} onClick={handleMuteClick}></MicroButton>
       <div className="toolbar-button-container-border-line"></div>
       <ShareButton isSidebarWide={isSidebarWide} onClick={handleOpenSharePopup}></ShareButton>
       <LanguageButton isSidebarWide={isSidebarWide} onClick={() => console.log("click!")}></LanguageButton>

src/components/pages/Stream/MicroButton/MicroButton.tsx

@@ -8,7 +8,7 @@ import { Button } from "components/shared/Button/Button";
 
 export const MicroButton: React.FC<any> = ({
   onClick,
-  isMuted,
+  isActive,
   isSidebarWide,
 }) => {
   const { t } = useTranslation();
@@ -19,27 +19,20 @@ export const MicroButton: React.FC<any> = ({
     type: "microphone",
   });
 
-  const [active, setActive] = useState(false);
-
   useEffect(() => {
-    setButton({ ...button, icon: active ? microOn : microOff });
-  }, [active]);
+    setButton({ ...button, icon: isActive ? microOn : microOff });
+  }, [isActive]);
 
   function handleClick() {
     onClick();
-    setActive((prev) => !prev);
   }
 
   return (
-    <div
-      tabIndex={-1}
-      onClick={handleClick}
-      className="toolbar-button-area"
-    >
+    <div tabIndex={-1} onClick={handleClick} className="toolbar-button-area">
       <Button
         isSidebarWide={isSidebarWide}
         button={button}
-        active={isMuted}
+        active={isActive}
       ></Button>
     </div>
   );

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

@@ -1,7 +1,9 @@
 import "./PlayerStyles.css";
 import React, { useEffect, useState } from "react";
-import { useHistory, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
+import useWindowDimensions from "hooks/useWindowDimensions";
 
+import useMobile from "hooks/useMobile";
 import { Sidebar } from "components/pages/Stream/Sidebar/Sidebar";
 
 import { connectSession } from "store/reducers/ActionCreator";
@@ -13,11 +15,18 @@ type link = {
 };
 
 export const PlayerComponent: React.FC<any> = ({ closeStream }) => {
+  const { isMobile } = useMobile();
+  const windowDimensions = useWindowDimensions();
+  const width = windowDimensions.width;
+  const height = windowDimensions.height;
+  const [popup, setPopup] = useState(false);
+
+  console.log(popup);
+
   const { id } = useParams<link>();
-  const [click, setClick] = useState(false)
+  const [click, setClick] = useState(false);
   const dispatch = useAppDispatch();
   const { cleanErrors } = sessionSlice.actions;
-  const history = useHistory();
 
   useEffect(() => {
     dispatch(connectSession(id)).then((res: any) => {
@@ -27,19 +36,37 @@ export const PlayerComponent: React.FC<any> = ({ closeStream }) => {
     });
     return () => {
       dispatch(cleanErrors());
+      window.removeEventListener("change ", (event: any) => {
+        setPopup(false);
+      });
     };
   }, []);
 
   const { url } = useAppSelector((state) => state.sessionReducer);
 
   const exitPopup = () => {
-    setClick(prev => !prev)
-  }
+    setClick((prev) => !prev);
+  };
+
+  useEffect(() => {
+    if (isMobile) {
+      if (width < height) {
+        setPopup(true);
+      } else {
+        setPopup(false);
+      }
+    }
+  }, [width, height, isMobile]);
 
   return (
     <>
+      {popup && (
+        <div className="popup-screen" style={{ height: height }}>
+          <h2>Переверните устройство</h2>
+        </div>
+      )}
       <iframe
-        onLoad={(e: any) => e.target.focus()} 
+        onLoad={(e: any) => e.target.focus()}
         id="player"
         onBlur={(e) => e.target.focus()} /// element loosing focus and keyboard input doesn't work
         src={url}
@@ -48,7 +75,12 @@ export const PlayerComponent: React.FC<any> = ({ closeStream }) => {
         allowFullScreen={true}
       ></iframe>
 
-      <Sidebar exitPopup={click} closeStream={closeStream}></Sidebar>
+      <Sidebar
+        heightDevice={height}
+        isMobile={isMobile}
+        exitPopup={click}
+        closeStream={closeStream}
+      ></Sidebar>
     </>
   );
 };

src/components/pages/Stream/PlayerComponent/PlayerStyles.css

@@ -5,4 +5,22 @@
 
 .playerOff {
    pointer-events: none;
-}
+}
+
+.popup-screen {
+   position: absolute;
+   top: 0;
+   left: 0;
+   right: 0;
+   display: flex;
+   z-index: 99;
+   background: #1C1D21;
+   font-style: normal;
+   font-weight: 400;
+   font-size: 24px;
+   line-height: 125%;
+   align-items: center;
+   justify-content: center;
+  
+}
+

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

@@ -105,6 +105,8 @@
 }
 
 .toolbar-button-area {
+  border-radius: 4px;
+
   cursor: pointer;
   align-items: center;
   position: relative;

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

@@ -1,175 +1,49 @@
 import "./Sidebar.css";
-import React, { useState, useEffect } from "react";
-import { AnimatePresence, motion } from "framer-motion";
+import React, { useEffect, useState } from "react";
 
-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 { ControlPanel } from "../ControlPanel/ControlPanel";
-import { WideSidebarButton } from "components/pages/Stream/WideSidebarButton/WideSidebarButton";
-
-import {
-  sidebarVariants,
-  popupAnimation,
-  wideSidebarVariants,
-  wideSidebarAdminVariants,
-} from "utils/animationProps";
-
-export const Sidebar: React.FC<any> = ({ closeStream, exitPopup }) => {
-  const [open, setOpen] = useState(false);
-  const [popup, setPopup] = useState({
-    popup1: false,
-    popup2: false,
-  });
+import { SidebarDesktop } from "../SidebarDesktop/SidebarDesktop";
+import { SidebarMobile } from "../SidebarMobile/SidebarMobile";
 
 
-  useEffect(() => {
-    console.log('test')
-  }, [exitPopup])
-
-  const isAdmin = true;
-
-  const [selected, setSelected] = useState(false);
-  const [wideSidebar, setWideSidebar] = useState(false);
-
+export const Sidebar: React.FC<any> = ({ closeStream, exitPopup, isMobile, heightDevice }) => {
   const [isMuted, setMuted] = useState(true);
+  const [isControl, setControl] = useState(false);
+  const [height, setHeight] = useState(heightDevice);
+
+
+
+
+  console.log(isMobile);
 
   const handleMuteClick = () => {
     setMuted((prev) => !prev);
   };
 
-  function handleClosePopups() {
-    setPopup({
-      popup1: false,
-      popup2: false,
-    });
-  }
-
-  function handleOpenSharePopup() {
-    setPopup({
-      popup1: true,
-      popup2: false,
-    });
-  }
-
-  function handleOpenExitPopup() {
-    setPopup({
-      popup1: false,
-      popup2: true,
-    });
-  }
-
-  function closeSideBar() {
-    setSelected(false);
-    setOpen(false);
-    setWideSidebar(false);
-  }
-
-  useEffect(() => () => unmountComponent(), []);
-
-
-  function unmountComponent() {
-    setOpen(false);
-    setPopup({
-      popup1: false,
-      popup2: false,
-    });
-  }
-
-  const setAnimation = () => {
-    if (isAdmin) return wideSidebarAdminVariants;
-    else {
-      return wideSidebarVariants;
-    }
+  const handleControlClick = () => {
+    setControl((prev) => !prev);
   };
 
   return (
     <>
-      <motion.div
-       /// onHoverEnd={() => /// closeSideBar()}
-        initial={false}
-        animate={open ? "open" : "closed"}
-        variants={wideSidebar ? setAnimation() : sidebarVariants}
-        className="toolbar-container"
-      >
-        <div
-          style={wideSidebar ? { overflow: "hidden" } : { overflow: "visible" }}
-          className="toolbar-field"
-        >
-          <div className="toolbar-field-part">
-            <FullscreenButton isSidebarWide={wideSidebar}> </FullscreenButton>
-            <div className="toolbar-button-container-border-line"></div>
-            <UserList
-              closeSidebar={closeSideBar}
-              isSidebarWide={wideSidebar} /// this is for disable showhing button's caption
-              isAdmin={isAdmin}
-            ></UserList>
-          </div>
-          <motion.div
-            onHoverStart={() => setWideSidebar(true)}
-            className="toolbar-field-part"
-          >
-            <WideSidebarButton
-              isSidebarWide={wideSidebar}
-              close={closeSideBar}
-            ></WideSidebarButton>
-          </motion.div>
-          <ControlPanel
-            isSidebarWide={wideSidebar}
-            isMuted={isMuted}
-            handleMuteClick={handleMuteClick}
-            handleOpenSharePopup={handleOpenSharePopup}
-            handleOpenExitPopup={handleOpenExitPopup}
-          ></ControlPanel>
-        </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>
-      </motion.div>
-      <AnimatePresence>
-        {popup.popup1 && (
-          <motion.div
-            key={1}
-            variants={popupAnimation}
-            initial={"hidden"}
-            animate={"show"}
-            exit={"hidden"}
-          >
-            <PopupShare setClose={handleClosePopups}></PopupShare>
-          </motion.div>
-        )}
-
-        {popup.popup2 && (
-          <motion.div
-            key={2}
-            variants={popupAnimation}
-            initial={"hidden"}
-            animate={"show"}
-            exit={"hidden"}
-          >
-            <PopupExit
-              onExit={closeStream}
-              setClose={handleClosePopups}
-            ></PopupExit>
-          </motion.div>
-        )}
-      </AnimatePresence>
+      {isMobile ? (
+        <SidebarMobile
+          height={height}
+          isMuted={isMuted}
+          isControl={isControl}
+          handleMuteClick={handleMuteClick}
+          handleControlClick={handleControlClick}
+          closeStream={closeStream}
+        ></SidebarMobile>
+      ) : (
+        <SidebarDesktop
+          isMuted={isMuted}
+          isControl={isControl}
+          handleMuteClick={handleMuteClick}
+          handleControlClick={handleControlClick}
+          closeStream={closeStream}
+          exitPopup={exitPopup}
+        ></SidebarDesktop>
+      )}
     </>
   );
 };
-function getElementById(arg0: string) {
-  throw new Error("Function not implemented.");
-}
-

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

@@ -0,0 +1,169 @@
+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 { ControlPanel } from "../ControlPanel/ControlPanel";
+import { WideSidebarButton } from "components/pages/Stream/WideSidebarButton/WideSidebarButton";
+
+import {
+  sidebarVariants,
+  popupAnimation,
+  wideSidebarVariants,
+  wideSidebarAdminVariants,
+} from "utils/animationProps";
+
+export const SidebarDesktop: React.FC<any> = ({
+  closeStream,
+  exitPopup,
+  isMuted,
+  isControl,
+  handleMuteClick,
+  handleControlClick,
+}) => {
+  const [open, setOpen] = useState(false);
+  const [popup, setPopup] = useState({
+    popup1: false,
+    popup2: false,
+  });
+
+  useEffect(() => {
+    console.log("test");
+  }, [exitPopup]);
+
+  const isAdmin = true;
+
+  const [wideSidebar, setWideSidebar] = useState(false);
+
+  function handleClosePopups() {
+    setPopup({
+      popup1: false,
+      popup2: false,
+    });
+  }
+
+  function handleOpenSharePopup() {
+    setPopup({
+      popup1: true,
+      popup2: false,
+    });
+  }
+
+  function handleOpenExitPopup() {
+    setPopup({
+      popup1: false,
+      popup2: true,
+    });
+  }
+
+  function closeSideBar() {
+    setOpen(false);
+    setWideSidebar(false);
+  }
+
+  useEffect(() => () => unmountComponent(), []);
+
+  function unmountComponent() {
+    setOpen(false);
+    setPopup({
+      popup1: false,
+      popup2: false,
+    });
+  }
+
+  const setAnimation = () => {
+    if (isAdmin) return wideSidebarAdminVariants;
+    else {
+      return wideSidebarVariants;
+    }
+  };
+
+  return (
+    <>
+      <motion.div
+        /// onHoverEnd={() => /// closeSideBar()}
+        initial={false}
+        animate={open ? "open" : "closed"}
+        variants={wideSidebar ? setAnimation() : sidebarVariants}
+        className="toolbar-container"
+      >
+        <div
+          style={wideSidebar ? { overflow: "hidden" } : { overflow: "visible" }}
+          className="toolbar-field"
+        >
+          <div className="toolbar-field-part">
+            <FullscreenButton isSidebarWide={wideSidebar}> </FullscreenButton>
+            <div className="toolbar-button-container-border-line"></div>
+            <UserList
+              closeSidebar={closeSideBar}
+              isSidebarWide={wideSidebar} /// this is for disable showhing button's caption
+              isAdmin={isAdmin}
+            ></UserList>
+          </div>
+          <motion.div
+            onHoverStart={() => setWideSidebar(true)}
+            className="toolbar-field-part"
+          >
+            <WideSidebarButton
+              isSidebarWide={wideSidebar}
+              close={closeSideBar}
+            ></WideSidebarButton>
+          </motion.div>
+          <ControlPanel
+            isControl={isControl}
+            handleControlClick={handleControlClick}
+            isSidebarWide={wideSidebar}
+            isMuted={isMuted}
+            handleMuteClick={handleMuteClick}
+            handleOpenSharePopup={handleOpenSharePopup}
+            handleOpenExitPopup={handleOpenExitPopup}
+          ></ControlPanel>
+        </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>
+      </motion.div>
+      <AnimatePresence>
+        {popup.popup1 && (
+          <motion.div
+            key={1}
+            variants={popupAnimation}
+            initial={"hidden"}
+            animate={"show"}
+            exit={"hidden"}
+          >
+            <PopupShare setClose={handleClosePopups}></PopupShare>
+          </motion.div>
+        )}
+
+        {popup.popup2 && (
+          <motion.div
+            key={2}
+            variants={popupAnimation}
+            initial={"hidden"}
+            animate={"show"}
+            exit={"hidden"}
+          >
+            <PopupExit
+              onExit={closeStream}
+              setClose={handleClosePopups}
+            ></PopupExit>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </>
+  );
+};

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

@@ -0,0 +1,64 @@
+import { FullscreenButton } from "../FullscreenButton/FullscreenButton";
+import { AnimatePresence, motion } from "framer-motion";
+import {
+  sidebarVariants,
+  popupAnimation,
+  wideSidebarVariants,
+  wideSidebarAdminVariants,
+} 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";
+
+export const SidebarMobile: React.FC<any> = ({ height }) => {
+  const [open, setOpen] = useState(false);
+  const [userList, setUserList] = useState(false);
+  const [popupAdditional, setPopupAdditipnal] = useState(false);
+  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>
+          <AdditionalButton
+            active={popupAdditional}
+            onClick={() => setPopupAdditipnal(true)}
+          ></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>
+  );
+};

src/components/pages/Stream/UserButtonMobile/UserButtonMobile.tsx

@@ -0,0 +1,20 @@
+import persons from "images/icons/Persons.svg";
+import { Button } from "components/shared/Button/Button";
+
+export const UserButtonMobile: React.FC<any> = ({ active, onClick }) => {
+  const button = {
+    icon: persons,
+    inactive: "",
+    active: "",
+    type: "",
+  };
+  return (
+    <div
+      style={active ? { background: "#2E3038" } : { background: "transparent" }}
+      className="toolbar-button-area"
+      onClick={() => onClick()}
+    >
+      <Button button={button}></Button>
+    </div>
+  );
+};