ui update progress

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": "Остаться"
 

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 {

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>

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>
       )}

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>

src/components/pages/Plan/Form/Form.tsx

@@ -5,9 +5,10 @@ import { planSlice } from "store/reducers/planSlice";
 import useFormWithValidation from "hooks/useFormWithValidation";
 import { useAppDispatch, useAppSelector } from "hooks/redux";
 
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 export const Form: React.FC<any> = ({ time }) => {
+  const inputRef = useRef()
   const [error, showError] = useState(false)
   const { values, handleChangeState, resetForm, errors, isValid } =
     useFormWithValidation();
@@ -40,13 +41,14 @@ export const Form: React.FC<any> = ({ time }) => {
     );
   };
 
+ 
   return (
     <div className="calendar-container">
       <h3 className="plan-title">
         Расскажите о себе.
       </h3>
       <button
-        onClick={() => handleReturn()}
+        onClick={(e) => handleReturn()}
         style={{ width: "141px", padding: "4px 16px 4px 4px", height: "32px" }}
         className="button button-type-small button-plan"
       >
@@ -60,8 +62,8 @@ export const Form: React.FC<any> = ({ time }) => {
         <form noValidate onSubmit={handleSubmit} className="form">
           <div className="form-input-container">
             <label className="form-input-caption">Имя</label>
-            <div className={errors.name ? "form-border-error" : 'form-border'}>
-              <input required onChange={handleChangeState} name='name' value={values.name} minLength={2} maxLength={30} className="form-input" type="text"></input>
+            <div onClick={(e: any) => console.log(e.target.closest('input')) } className={errors.name ? "form-border-error" : 'form-border'}>
+              <input ref={inputRef} required onChange={handleChangeState} name='name' value={values.name} minLength={2} maxLength={30} className="form-input" type="text"></input>
             </div>
             <span className={errors.name ? "error-caption error-caption-active" : "error-caption"}>{errors.name}</span>
           </div>

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}

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}

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.");
+}
+

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}

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}

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>
+    </>
+
   );
 };

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;

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)}

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>

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>)
+}

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;

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;
   }
-}
+}

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);
+
+      }
     }
   }
 );

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;
     },

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>) => {