From 240f28935db04d3e1ed6ebf40080ff50890b0d8f Mon Sep 17 00:00:00 2001
From: DmitriyB <dimasik_burdin@inbox.ru>
Date: Tue, 7 Mar 2023 15:59:17 +0500
Subject: [PATCH] ui update progress

---
 public/assets/locales/ru/translation.json     |  2 +-
 src/App.css                                   |  7 +++++
 src/App.tsx                                   | 12 +++++---
 .../PopupComponent/PopupComponent.tsx         |  2 +-
 src/components/pages/Main/Card/Card.tsx       |  2 +-
 .../Stream/ControlButton/ControlButton.tsx    |  2 +-
 .../pages/Stream/MicroButton/MicroButton.tsx  |  2 +-
 .../PlayerComponent/PlayerComponent.tsx       | 14 ++++++++--
 .../pages/Stream/Sidebar/Sidebar.tsx          |  9 +++++-
 .../Stream/SidebarDesktop/SidebarDesktop.tsx  |  6 ++--
 .../Stream/SidebarMobile/SidebarMobile.tsx    | 20 +++++++++++--
 src/components/pages/Stream/User/User.css     | 15 ++++++++++
 src/components/pages/Stream/User/User.tsx     |  7 +++--
 .../pages/Stream/UserList/UserList.tsx        |  2 +-
 .../Stream/UserListMoblie/UserListMobile.tsx  | 18 ++++++++++++
 src/hooks/useWindowDimensions.ts              |  7 +++--
 src/index.css                                 | 28 ++++++++++++++++++-
 src/store/reducers/ActionCreator.ts           | 28 +++++++++++++++----
 src/store/reducers/cardSlice.ts               |  1 +
 src/store/reducers/sessionSlice.ts            |  2 +-
 20 files changed, 155 insertions(+), 31 deletions(-)
 create mode 100644 src/components/pages/Stream/UserListMoblie/UserListMobile.tsx

diff --git a/public/assets/locales/ru/translation.json b/public/assets/locales/ru/translation.json
index 11baeaa..a9bdb24 100644
--- a/public/assets/locales/ru/translation.json
+++ b/public/assets/locales/ru/translation.json
@@ -22,7 +22,7 @@
   "popup-control-btn-active": "Ссылка скопирована",
   "language-control-btn": "Русский язык",
   "exit-control-btn": "Выйти",
-  "popup-control-exit-title": "Вы уверены, что хотите закончить демонстрацию??",
+  "popup-control-exit-title": "Вы уверены, что хотите закончить демонстрацию?",
   "popup-control-yes": "Закончить",
   "popup-control-no": "Остаться"
 
diff --git a/src/App.css b/src/App.css
index fc141e3..71b4a63 100644
--- a/src/App.css
+++ b/src/App.css
@@ -28,7 +28,9 @@
 .card-container {
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
   gap: 30px;
+  margin-bottom: 128px;
 }
 
 .card-title {
@@ -61,12 +63,14 @@
 
   .card-container {
     gap: 24px;
+    margin-bottom: 76px;
   }
 }
 
 @media screen and (max-width: 1152px) {
   .card-container {
     gap: 20px;
+
   }
 
   .card-title {
@@ -77,6 +81,8 @@
 @media screen and (max-width: 1024px) {
   .card-container {
     gap: 10px;
+    margin-bottom: 10px;
+
   }
 }
 
@@ -92,6 +98,7 @@
   .card-container {
     flex-direction: column;
     gap: 10px;
+    margin-bottom: 115px;
   }
 
   .content__container {
diff --git a/src/App.tsx b/src/App.tsx
index 7cd4180..adfbf0a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -22,9 +22,10 @@ const App: React.FC = () => {
   const dispatch = useAppDispatch();
   const history = useHistory();
   const { handleCurrentCard } = cardSlice.actions;
-  const { cards, currentCard } = useAppSelector((state) => state.cardReducer);
+  const { cards, currentCard, error } = useAppSelector((state) => state.cardReducer);
+  const { isLoading } = useAppSelector((state) => state.sessionReducer)
   const { currentLang } = useAppSelector((state) => state.languageReducer);
-
+  console.log(error)  
 
   useEffect(() => {
     dispatch(fetchCards(cookies.get("i18next")));
@@ -45,11 +46,13 @@ const App: React.FC = () => {
 
   const { t } = useTranslation();
 
+  console.log(isLoading, 'LOADING')
+
   return (
     <Switch>
       <Route exact path="/">
         <div className="main">
-          <h2 className="card-title">{t("demo-title")}</h2>
+          <h2 className="card-title">{error ? error : t("demo-title")}</h2>
           <div className="card-container">
             {cards.map((i: ICards) => (
               <Card onClick={() => handleCards(i)} key={i._id} item={i}></Card>
@@ -60,7 +63,8 @@ const App: React.FC = () => {
       <Route path="/connect-page">
         {currentCard ? (
           <div className="background">
-            <Header></Header>
+            {isLoading && (<Header></Header>
+            )}
             <div className="popup-container">
               <div className="content__container">
                 <PopupComponent></PopupComponent>
diff --git a/src/components/pages/ConnectPage/PopupComponent/PopupComponent.tsx b/src/components/pages/ConnectPage/PopupComponent/PopupComponent.tsx
index 18a932a..8735451 100644
--- a/src/components/pages/ConnectPage/PopupComponent/PopupComponent.tsx
+++ b/src/components/pages/ConnectPage/PopupComponent/PopupComponent.tsx
@@ -53,7 +53,7 @@ export const PopupComponent: React.FC = () => {
           <PopupConnect
             isLoading={true}
             logo={currentCard.logo}
-            onConnect={() => dispatch(createSession(currentCard.title))}
+            onConnect={() => dispatch(createSession(currentCard.app_title))}
           ></PopupConnect>
         </motion.div>
       )}
diff --git a/src/components/pages/Main/Card/Card.tsx b/src/components/pages/Main/Card/Card.tsx
index 708df8a..ccba53a 100644
--- a/src/components/pages/Main/Card/Card.tsx
+++ b/src/components/pages/Main/Card/Card.tsx
@@ -14,7 +14,7 @@ export const Card: React.FC<any> = ({ item, onClick }) => {
         <div className="card-header">
           <img src={item.icon} className="card-icon" alt="лого" />
           <div className="card-name">
-            <h2 className="caption-name">{item.app_title}</h2>
+            <h2 className="caption-name">{item.title}</h2>
             <h2 className="card-location">{item.location}</h2>
           </div>
         </div>
diff --git a/src/components/pages/Stream/ControlButton/ControlButton.tsx b/src/components/pages/Stream/ControlButton/ControlButton.tsx
index f738459..0911c1e 100644
--- a/src/components/pages/Stream/ControlButton/ControlButton.tsx
+++ b/src/components/pages/Stream/ControlButton/ControlButton.tsx
@@ -29,7 +29,7 @@ export const ControlButton: React.FC<any> = ({
   }
 
   return (
-    <div onClick={handleClick} className="toolbar-button-area">
+    <div style={{pointerEvents: "none"}} onClick={handleClick} className="toolbar-button-area">
       <Button
         isSidebarWide={isSidebarWide}
         button={button}
diff --git a/src/components/pages/Stream/MicroButton/MicroButton.tsx b/src/components/pages/Stream/MicroButton/MicroButton.tsx
index ad00cac..183ac6d 100644
--- a/src/components/pages/Stream/MicroButton/MicroButton.tsx
+++ b/src/components/pages/Stream/MicroButton/MicroButton.tsx
@@ -28,7 +28,7 @@ export const MicroButton: React.FC<any> = ({
   }
 
   return (
-    <div tabIndex={-1} onClick={handleClick} className="toolbar-button-area">
+    <div  style={{pointerEvents: "none"}} tabIndex={-1} onClick={handleClick} className="toolbar-button-area">
       <Button
         isSidebarWide={isSidebarWide}
         button={button}
diff --git a/src/components/pages/Stream/PlayerComponent/PlayerComponent.tsx b/src/components/pages/Stream/PlayerComponent/PlayerComponent.tsx
index 6d63c22..6754721 100644
--- a/src/components/pages/Stream/PlayerComponent/PlayerComponent.tsx
+++ b/src/components/pages/Stream/PlayerComponent/PlayerComponent.tsx
@@ -1,6 +1,6 @@
 import "./PlayerStyles.css";
-import React, { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
+import React, { useEffect, useState, useRef } from "react";
+import { useHistory, useParams } from "react-router-dom";
 import useWindowDimensions from "hooks/useWindowDimensions";
 
 import useMobile from "hooks/useMobile";
@@ -15,12 +15,13 @@ type link = {
 };
 
 export const PlayerComponent: React.FC<any> = ({ closeStream }) => {
+  const frameRef = useRef<HTMLIFrameElement>()
   const { isMobile } = useMobile();
   const windowDimensions = useWindowDimensions();
   const width = windowDimensions.width;
   const height = windowDimensions.height;
   const [popup, setPopup] = useState(false);
-
+  const history = useHistory()
   console.log(popup);
 
   const { id } = useParams<link>();
@@ -58,6 +59,8 @@ export const PlayerComponent: React.FC<any> = ({ closeStream }) => {
     }
   }, [width, height, isMobile]);
 
+
+
   return (
     <>
       {popup && (
@@ -66,6 +69,7 @@ export const PlayerComponent: React.FC<any> = ({ closeStream }) => {
         </div>
       )}
       <iframe
+        ref={frameRef}
         onLoad={(e: any) => e.target.focus()}
         id="player"
         onBlur={(e) => e.target.focus()} /// element loosing focus and keyboard input doesn't work
@@ -84,3 +88,7 @@ export const PlayerComponent: React.FC<any> = ({ closeStream }) => {
     </>
   );
 };
+function getElementById(arg0: string) {
+  throw new Error("Function not implemented.");
+}
+
diff --git a/src/components/pages/Stream/Sidebar/Sidebar.tsx b/src/components/pages/Stream/Sidebar/Sidebar.tsx
index 8335938..c273881 100644
--- a/src/components/pages/Stream/Sidebar/Sidebar.tsx
+++ b/src/components/pages/Stream/Sidebar/Sidebar.tsx
@@ -10,10 +10,15 @@ export const Sidebar: React.FC<any> = ({ closeStream, exitPopup, isMobile, heigh
   const [isControl, setControl] = useState(false);
   const [height, setHeight] = useState(heightDevice);
 
+  useEffect(() => {
+    if (isMobile) {
+      setHeight(heightDevice)
+    }
+  }, [heightDevice])
+
 
 
 
-  console.log(isMobile);
 
   const handleMuteClick = () => {
     setMuted((prev) => !prev);
@@ -27,6 +32,7 @@ export const Sidebar: React.FC<any> = ({ closeStream, exitPopup, isMobile, heigh
     <>
       {isMobile ? (
         <SidebarMobile
+          isMobile={isMobile}
           height={height}
           isMuted={isMuted}
           isControl={isControl}
@@ -36,6 +42,7 @@ export const Sidebar: React.FC<any> = ({ closeStream, exitPopup, isMobile, heigh
         ></SidebarMobile>
       ) : (
         <SidebarDesktop
+          isMobile={isMobile}
           isMuted={isMuted}
           isControl={isControl}
           handleMuteClick={handleMuteClick}
diff --git a/src/components/pages/Stream/SidebarDesktop/SidebarDesktop.tsx b/src/components/pages/Stream/SidebarDesktop/SidebarDesktop.tsx
index 616327a..2190e95 100644
--- a/src/components/pages/Stream/SidebarDesktop/SidebarDesktop.tsx
+++ b/src/components/pages/Stream/SidebarDesktop/SidebarDesktop.tsx
@@ -22,6 +22,7 @@ export const SidebarDesktop: React.FC<any> = ({
   isControl,
   handleMuteClick,
   handleControlClick,
+  isMobile
 }) => {
   const [open, setOpen] = useState(false);
   const [popup, setPopup] = useState({
@@ -33,7 +34,7 @@ export const SidebarDesktop: React.FC<any> = ({
     console.log("test");
   }, [exitPopup]);
 
-  const isAdmin = true;
+  const isAdmin = false;
 
   const [wideSidebar, setWideSidebar] = useState(false);
 
@@ -83,7 +84,7 @@ export const SidebarDesktop: React.FC<any> = ({
   return (
     <>
       <motion.div
-        /// onHoverEnd={() => /// closeSideBar()}
+        onHoverEnd={() => closeSideBar()}
         initial={false}
         animate={open ? "open" : "closed"}
         variants={wideSidebar ? setAnimation() : sidebarVariants}
@@ -97,6 +98,7 @@ export const SidebarDesktop: React.FC<any> = ({
             <FullscreenButton isSidebarWide={wideSidebar}> </FullscreenButton>
             <div className="toolbar-button-container-border-line"></div>
             <UserList
+              isMobile={isMobile}
               closeSidebar={closeSideBar}
               isSidebarWide={wideSidebar} /// this is for disable showhing button's caption
               isAdmin={isAdmin}
diff --git a/src/components/pages/Stream/SidebarMobile/SidebarMobile.tsx b/src/components/pages/Stream/SidebarMobile/SidebarMobile.tsx
index 1d00cd1..e6d0d26 100644
--- a/src/components/pages/Stream/SidebarMobile/SidebarMobile.tsx
+++ b/src/components/pages/Stream/SidebarMobile/SidebarMobile.tsx
@@ -12,17 +12,19 @@ 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";
 
-export const SidebarMobile: React.FC<any> = ({ height }) => {
+export const SidebarMobile: React.FC<any> = ({ height, isMobile }) => {
   const [open, setOpen] = useState(false);
   const [userList, setUserList] = useState(false);
   const [popupAdditional, setPopupAdditipnal] = useState(false);
+  console.log(userList, 'popup')
   return (
-    <motion.div
+    <>    <motion.div
       initial={false}
       animate={open ? "open" : "closed"}
       variants={sidebarVariants}
-      style={{ height: height}}
+      style={{ height: height }}
       className="toolbar-container"
     >
       <div className="toolbar-field">
@@ -60,5 +62,17 @@ export const SidebarMobile: React.FC<any> = ({ height }) => {
         </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>
+    </>
+
   );
 };
diff --git a/src/components/pages/Stream/User/User.css b/src/components/pages/Stream/User/User.css
index fd68b65..81af5ba 100644
--- a/src/components/pages/Stream/User/User.css
+++ b/src/components/pages/Stream/User/User.css
@@ -7,6 +7,14 @@
   justify-content: space-between;
 }
 
+.user-container-mobile {
+  box-sizing: border-box;
+  padding: 8px;
+  background: #1C1D21;
+border-radius: 4px;
+
+}
+
 .user {
   display: flex;
   align-items: center;
@@ -59,6 +67,13 @@
   padding: 8px;
 }
 
+.user-button-container-mobile {
+  background: #1C1D21;
+  padding: 0px 8px 8px 8px;
+}
+
+
+
 .icon-container {
   cursor: pointer;
   padding: 8px;
diff --git a/src/components/pages/Stream/User/User.tsx b/src/components/pages/Stream/User/User.tsx
index 337ed78..788f678 100644
--- a/src/components/pages/Stream/User/User.tsx
+++ b/src/components/pages/Stream/User/User.tsx
@@ -22,11 +22,12 @@ export const User: React.FC<any> = ({
   isAdmin,
   isSidebarWide,
   closeSidebar,
+  isMobile
 }) => {
   const [hover, setHover] = useState(false);
   const [expand, setExpand] = useState(false);
   const [mute, setMute] = useState(true);
-  const [isControl, setControl] = useState(false);
+  const [isControl, setControl] = useState(true);
 
   useEffect(() => {
     setExpand(false);
@@ -45,7 +46,7 @@ export const User: React.FC<any> = ({
         animate={expand ? "open" : "closed"}
         className="user-wrapper"
       >
-        <div onClick={expandMenu} className="user-container">
+        <div onClick={expandMenu} className={isMobile ? "user-container-mobile user-container" : "user-container"}>
           <div className="user">
             <motion.div
               onHoverStart={() => setHover(true)}
@@ -111,7 +112,7 @@ export const User: React.FC<any> = ({
               initial={"hidden"}
               animate={"show"}
               exit={"hidden"}
-              className="user-button-container"
+              className={isMobile ? "user-button-container user-button-container-mobile" : "user-button-container"}
             >
               <div
                 onClick={() => setControl((prev) => !prev)}
diff --git a/src/components/pages/Stream/UserList/UserList.tsx b/src/components/pages/Stream/UserList/UserList.tsx
index de69e58..33895a6 100644
--- a/src/components/pages/Stream/UserList/UserList.tsx
+++ b/src/components/pages/Stream/UserList/UserList.tsx
@@ -1,6 +1,6 @@
 import { User } from "components/pages/Stream/User/User";
 
-export const UserList: React.FC<any> = ({ isSidebarWide, isAdmin, closeSidebar }) => {
+export const UserList: React.FC<any> = ({ isSidebarWide, isAdmin, closeSidebar, isMobile }) => {
   return (
     <div className="toolbar-field-part">
       <User closeSidebar={closeSidebar} isAdmin={isAdmin} isSidebarWide={isSidebarWide}></User>
diff --git a/src/components/pages/Stream/UserListMoblie/UserListMobile.tsx b/src/components/pages/Stream/UserListMoblie/UserListMobile.tsx
new file mode 100644
index 0000000..061efb6
--- /dev/null
+++ b/src/components/pages/Stream/UserListMoblie/UserListMobile.tsx
@@ -0,0 +1,18 @@
+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>)
+}
\ No newline at end of file
diff --git a/src/hooks/useWindowDimensions.ts b/src/hooks/useWindowDimensions.ts
index f8072a6..af411d4 100644
--- a/src/hooks/useWindowDimensions.ts
+++ b/src/hooks/useWindowDimensions.ts
@@ -17,9 +17,12 @@ export default function useWindowDimensions() {
     function handleResize() {
       setWindowDimensions(getWindowDimensions());
     }
-
+    window.addEventListener("orientationchange", handleResize)
     window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize)
+      window.removeEventListener('orientationchange', handleResize)
+    }
   }, []);
 
   return windowDimensions;
diff --git a/src/index.css b/src/index.css
index 98e9d16..dc558a9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -11,6 +11,32 @@ body {
   width: 100%;
 }
 
+.popup-mobile {
+  position: absolute;
+  background: #151619;
+  width: calc(100% - 60px);
+  height: 100%;
+  top: 0px;
+  left: 59px;
+  padding: 30px 32px;
+  box-sizing: border-box;
+}
+
+.popup-mobile-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  position: relative;
+}
+
+.user-mobile-container {
+  background: #1C1D21;
+  border-radius: 4px;
+  padding: 8px 24px 8px 8px;
+  box-sizing: border-box;
+
+}
+
 
 button {
   cursor: pointer;
@@ -64,4 +90,4 @@ button {
   .main {
     padding: 0 10px;
   }
-}
+}
\ No newline at end of file
diff --git a/src/store/reducers/ActionCreator.ts b/src/store/reducers/ActionCreator.ts
index 665d1ea..47e8b27 100644
--- a/src/store/reducers/ActionCreator.ts
+++ b/src/store/reducers/ActionCreator.ts
@@ -2,7 +2,7 @@ import { createAsyncThunk } from "@reduxjs/toolkit";
 import axios from 'axios';
 
 const instance = axios.create({
-  baseURL: 'https://a1.test.coord.graff.tech',
+  baseURL: 'https://a1.coord.graff.tech',
 });
 
 instance.defaults.headers.post['Content-Type'] = 'application/json';
@@ -11,13 +11,19 @@ instance.defaults.headers.post['Content-Type'] = 'application/json';
 
 export const fetchCards = createAsyncThunk(
   "cards/FetchAll",
-  async (language: string, thunkAPI) => {
+  async (language: string, thunkApi) => {
     try {
       const { data } = await instance.get('/title/get_for_language/', { params: { start: 0, count: 100, language: language } });
       return data;
     } catch (e: any) {
       const { response } = e
-      return thunkAPI.rejectWithValue(response.data.message);
+      if (!response) {
+        return thunkApi.rejectWithValue('Произошла ошибка, попробуйте позже');
+
+      } else {
+        return thunkApi.rejectWithValue(response.data.message);
+
+      }
     }
 
   }
@@ -32,7 +38,13 @@ export const createSession = createAsyncThunk(
       return data;
     } catch (e: any) {
       const { response } = e
-      return thunkApi.rejectWithValue(response.data.message);
+      if (!response) {
+        return thunkApi.rejectWithValue('Произошла ошибка, попробуйте позже');
+
+      } else {
+        return thunkApi.rejectWithValue(response.data.message);
+
+      }
     }
   }
 );
@@ -45,7 +57,13 @@ export const connectSession = createAsyncThunk(
       return data;
     } catch (e: any) {
       const { response } = e
-      return thunkApi.rejectWithValue(response.data.message);
+      if (!response) {
+        return thunkApi.rejectWithValue('Произошла ошибка, попробуйте позже');
+
+      } else {
+        return thunkApi.rejectWithValue(response.data.message);
+
+      }
     }
   }
 );
diff --git a/src/store/reducers/cardSlice.ts b/src/store/reducers/cardSlice.ts
index ffe0d2a..b73be67 100644
--- a/src/store/reducers/cardSlice.ts
+++ b/src/store/reducers/cardSlice.ts
@@ -34,6 +34,7 @@ export const cardSlice = createSlice({
       state.isLoading = true;
     },
     [fetchCards.rejected.type]: (state, action: PayloadAction<any>) => {
+      console.log(action.payload)
       state.isLoading = false;
       state.error = action.payload;
     },
diff --git a/src/store/reducers/sessionSlice.ts b/src/store/reducers/sessionSlice.ts
index 49359ea..bf5834c 100644
--- a/src/store/reducers/sessionSlice.ts
+++ b/src/store/reducers/sessionSlice.ts
@@ -53,7 +53,7 @@ export const sessionSlice = createSlice({
       action: PayloadAction<ConnectSessionResponseInterface>
     ) => {
       state.isLoading = false;
-      const url = action.payload.websocket_url.replace("wss://", "https://");
+      const url = action.payload.websocket_url.replace("wss://", "https://") + '?offerToReceive=true';
       state.url = url;
     },
     [connectSession.rejected.type]: (state, action: PayloadAction<any>) => {