added loader-popup

2023-02-07 18:04:18 +05:00
parent 9f0de105d6
commit e7360919fe
15 changed files with 387 additions and 323 deletions
@@ -0,0 +1,142 @@
+.popup__content {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.popup__title {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 22px;
+  line-height: 130%;
+  /* identical to box height, or 29px */
+  margin: 0;
+
+  /* App/White */
+
+  color: #ffffff;
+}
+
+.logo__popup {
+  height: auto;
+  width: 100%;
+  margin-bottom: 48px;
+  object-fit: cover;
+}
+
+.logo__popup_ex {
+  display: none;
+}
+
+.popup__input {
+  padding: 5px 0px;
+  border-radius: 12px;
+  background: #404040;
+  height: 76px;
+  font-style: normal;
+  font-weight: 300;
+  font-size: 38px;
+  line-height: 46px;
+  /* identical to box height */
+  text-align: center;
+
+  letter-spacing: 0.3em;
+
+  /* App/White */
+  box-sizing: border-box;
+  border: none;
+  outline: none;
+  color: #ffffff;
+}
+
+@media screen and (max-width: 639px) {
+  .logo__popup {
+    margin-bottom: 40px;
+  }
+
+  .logo__popup_ex {
+    display: block;
+    height: auto;
+    width: 100%;
+    margin-bottom: 24px;
+    object-fit: cover;
+  }
+
+  .popup__input {
+    height: 48px;
+    font-size: 30px;
+  }
+
+  .popup__title {
+    font-size: 16px;
+    width: 78%;
+  }
+
+  .popup__content {
+    gap: 16px;
+  }
+}
+
+.loader-container {
+  width: 494px;
+  box-sizing: border-box;
+  background-color: #262626;
+  border: 1px solid #404040;
+  border-radius: 32px;
+  padding: 45px 0 51px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 51px;
+  align-items: center;
+}
+
+.loading-caption {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 22px;
+  line-height: 130%;
+  /* identical to box height, or 29px */
+
+  text-align: center;
+
+  /* Landing/White */
+
+  color: #ebebeb;
+}
+
+.loader {
+  width: 106px;
+  height: 106px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  background: conic-gradient(
+    from 135deg at 50% 50%,
+    rgba(255, 255, 255, 0) -6.26deg,
+    #ffffff 314.83deg,
+    rgba(255, 255, 255, 0) 353.74deg,
+    #ffffff 674.83deg
+  );
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+.loader::after {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background: #262626;
+}
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
@@ -0,0 +1,17 @@
+import "../../styles/styles.css";
+import "./LoadingPopup.css";
+import loader from "./loader.svg";
+import { useHistory } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+export const LoadingPopup: React.FC<any> = ({}) => {
+  const history = useHistory();
+  const { t } = useTranslation();
+
+  return (
+    <div className="loader-container">
+      <span className="loading-caption">Пожалуйста подождите</span>
+      <span className="loader"></span>
+    </div>
+  );
+};
@@ -0,0 +1,9 @@
+<svg width="106" height="106" viewBox="0 0 106 106" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M103.35 53C104.814 53 106.007 51.8126 105.934 50.3509C105.354 38.7527 100.977 27.6378 93.4384 18.7402C85.328 9.16712 74.0844 2.78179 61.7081 0.720288C49.3319 -1.34121 36.6256 1.05484 25.85 7.48211C15.0745 13.9094 6.92854 23.951 2.86158 35.8204C-1.20539 47.6898 -0.929606 60.6171 3.63985 72.3022C8.2093 83.9873 16.7761 93.6725 27.8159 99.6343C38.8558 105.596 51.6527 107.448 63.9298 104.861C75.3406 102.456 85.6145 96.361 93.1857 87.5559C94.1399 86.4462 93.9256 84.7764 92.7696 83.8789V83.8789C91.6136 82.9813 89.9541 83.1964 88.9938 84.3008C82.1966 92.1174 73.0197 97.5286 62.8368 99.6747C51.7874 102.003 40.2702 100.337 30.3343 94.9709C20.3985 89.6052 12.6884 80.8886 8.57587 70.372C4.46336 59.8554 4.21516 48.2208 7.87542 37.5384C11.5357 26.8559 18.867 17.8184 28.565 12.0339C38.263 6.24936 49.6987 4.09292 60.8373 5.94826C71.976 7.80361 82.0952 13.5504 89.3946 22.1662C96.1215 30.1063 100.051 40.0084 100.626 50.3511C100.708 51.8124 101.886 53 103.35 53V53Z" fill="url(#paint0_angular_2745_13429)"/>
+<defs>
+<radialGradient id="paint0_angular_2745_13429" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(53 53) rotate(45) scale(52.4673)">
+<stop offset="0.874517" stop-color="white"/>
+<stop offset="0.982613" stop-color="white" stop-opacity="0"/>
+</radialGradient>
+</defs>
+</svg>
@@ -3,38 +3,45 @@ import { useEffect, useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";

 import { PopupConnect } from "../popupConnect/popupConnect";
-import { PopupConnectEx } from "../popupConnectEx/popupConnectEx";
+import { LoadingPopup } from "../LoadingPopup/LoadingPopup";
 import { popupAnimation } from "../../utils/animationProps";
 import { useAppDispatch, useAppSelector } from "../../hooks/redux";
-import {
-  createSession,
-} from "../../store/reducers/ActionCreator";
+import { createSession } from "../../store/reducers/ActionCreator";
+import { sessionSlice } from "../../store/reducers/sessionSlice";

-export const Main: React.FC<any> = ({ visible, setVisible }) => {
-  const [value, setValue] = useState<string>("");
+export const Main: React.FC = () => {
  const dispatch = useAppDispatch();
-  const { popup1, popup2 } = visible;
-  const { currentCard } = useAppSelector(
-    (state) => state.cardReducer
-  );
+  const { currentCard } = useAppSelector((state) => state.cardReducer);
+  const [visible, setVisible] = useState({
+    connectPopup: true,
+    loadingPopup: false,
+  });

-  const { isLoading } = useAppSelector((state) => state.sessionReducer)
+  const { cleanErrors } = sessionSlice.actions;
+
+  const { isLoading, error } = useAppSelector((state) => state.sessionReducer);
+
+  const { connectPopup, loadingPopup } = visible;
+
+  useEffect(() => {
+    if (isLoading) {
+      setVisible({ connectPopup: false, loadingPopup: true });
+      return;
+    } else if (error) {
+      setVisible({ connectPopup: false, loadingPopup: false });
+      return;
+    }
+  }, [isLoading, error]);

  useEffect(() => {
    return () => {
-      setVisible({
-        popup1: true,
-        popup2: false,
-      })
-    }
-  }, [])
-
-
-
+      dispatch(cleanErrors());
+    };
+  }, []);

  return (
    <AnimatePresence mode="wait">
-      {popup1 && (
+      {connectPopup && (
        <motion.div
          key={1}
          variants={popupAnimation}
@@ -45,12 +52,11 @@ export const Main: React.FC<any> = ({ visible, setVisible }) => {
          <PopupConnect
            isLoading={isLoading}
            logo={currentCard.image.logo}
-            onConnect={() => dispatch(createSession(currentCard.title))} visible={visible}
-            setVisible={setVisible}
+            onConnect={() => dispatch(createSession(currentCard.title))}
          ></PopupConnect>
        </motion.div>
      )}
-      {popup2 && (
+      {loadingPopup && (
        <motion.div
          key={2}
          variants={popupAnimation}
@@ -58,13 +64,7 @@ export const Main: React.FC<any> = ({ visible, setVisible }) => {
          animate={"show"}
          exit={"hidden"}
        >
-          <PopupConnectEx
-            value={value}
-            setValue={setValue}
-            logo={currentCard.image.logo}
-            visible={visible}
-            setVisible={setVisible}
-          ></PopupConnectEx>
+          <LoadingPopup></LoadingPopup>
        </motion.div>
      )}
    </AnimatePresence>
@@ -1,52 +1,53 @@
-import './sharePopup.css'
-import { useState, useEffect } from 'react'
-import { TSidebarPopup } from '../../utils/types'
-import { useTranslation } from 'react-i18next'
-import { useAppSelector } from '../../hooks/redux'
+import "./sharePopup.css";
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";

 export const PopupShare: React.FC<any> = ({ setClose }) => {
+  const [copy, setCopy] = useState(false);

-    const { id } = useAppSelector((state) => state.sessionReducer);
+  function copyLink() {
+    navigator.clipboard.writeText(window.location.href);
+    setCopy((prev) => !prev);
+  }

-    const [copy, setCopy] = useState(false)
+  function closePopup() {
+    setClose();
+    setCopy(false);
+  }

+  useEffect(() => () => setCopy(false), []);

-    function copyLink() {
-        navigator.clipboard.writeText(window.location.href)
-        setCopy(prev => !prev)
-    }
+  const { t } = useTranslation();

-    function closePopup() {
-        setClose()
-        setCopy(false)
-    }
-
-    useEffect(() => () => setCopy(false), []);
-
-    const { t } = useTranslation();
-
-
-    return (
-        <div className='share-popup-container'>
-            <div className='mobile-users-part-header share-header-popup'>
-                <span className='mobile-users-part-header-title'>{t('popup-control-invite-title')}</span>
-                <button onClick={closePopup} className='mobile-users-part-header-close-button'></button>
-            </div>
-            <div className='share-popup-data-container'>
-                <span className='share-popup-data-title'>{t('popup-control-code')}</span>
-                <input className='share-popup-data-input share-popup-data-input code' value={id} readOnly></input>
-            </div>
-            <div className='border-line'></div>
-            <div className='share-popup-data-container'>
-                <span className='share-popup-data-title'>{t('popup-control-link')}</span>
-                <input className='share-popup-data-input href' value={window.location.href} readOnly></input>
-            </div>
-            <div className='share-popup-data-container'>
-                <button className='share-popup-copy-button '>
-                    <span className='share-popup-copy-button-icon'></span>
-                    <span onClick={copyLink} className='share-popup-copy-button-title'>{copy ? t('popup-control-btn-active') : t('popup-control-btn')}</span>
-                </button>
-            </div>
-        </div>
-    )
-}
+  return (
+    <div className="share-popup-container">
+      <div className="mobile-users-part-header share-header-popup">
+        <span className="mobile-users-part-header-title">
+          {t("popup-control-invite-title")}
+        </span>
+        <button
+          onClick={closePopup}
+          className="mobile-users-part-header-close-button"
+        ></button>
+      </div>
+      <div className="share-popup-data-container">
+        <span className="share-popup-data-title">
+          {t("popup-control-link")}
+        </span>
+        <input
+          className="share-popup-data-input href"
+          value={window.location.href}
+          readOnly
+        ></input>
+      </div>
+      <div className="share-popup-data-container">
+        <button className="share-popup-copy-button ">
+          <span className="share-popup-copy-button-icon"></span>
+          <span onClick={copyLink} className="share-popup-copy-button-title">
+            {copy ? t("popup-control-btn-active") : t("popup-control-btn")}
+          </span>
+        </button>
+      </div>
+    </div>
+  );
+};
@@ -12,8 +12,7 @@
    background-color: #333333;
    color: #FFFFFF;
    padding: 48px;
-    /* gap: 24px; */
-    justify-content: space-between;
+    gap: 24px;
 }

 .share-header-popup {
@@ -1,9 +1,10 @@
 import "./playerStyles.css";
-import { useParams } from "react-router-dom";
+import { useHistory, useParams } from "react-router-dom";
 import React, { useEffect } from "react";
 import { Sidebar } from "../sidebar/sidebar";
 import { connectSession } from "../../store/reducers/ActionCreator";
 import { useAppDispatch, useAppSelector } from "../../hooks/redux";
+import { sessionSlice } from "../../store/reducers/sessionSlice";

 type link = {
  id: string;
@@ -12,14 +13,23 @@ type link = {
 export const PlayerComponent: React.FC<any> = ({ closeStream }) => {
  const { id } = useParams<link>();
  const dispatch = useAppDispatch();
+  const { cleanErrors } = sessionSlice.actions;
+  const history = useHistory()

  useEffect(() => {
-    dispatch(connectSession(id));
+    dispatch(connectSession(id)).then((res: any) => {
+      if (res.error) {
+        alert(res.payload);
+        history.push('/')
+      }
+    });
+    return () => {
+      dispatch(cleanErrors());
+    };
  }, []);

  const { url } = useAppSelector((state) => state.sessionReducer);

-
  return (
    <>
      <iframe
@@ -2,12 +2,7 @@ import { useHistory } from "react-router-dom";
 import "../../styles/styles.css";
 import { useTranslation } from "react-i18next";

-export const PopupConnect: React.FC<any> = ({
-  setVisible,
-  onConnect,
-  logo,
-  isLoading,
-}) => {
+export const PopupConnect: React.FC<any> = ({ onConnect, logo, isLoading }) => {
  const history = useHistory();
  const { t } = useTranslation();

@@ -17,6 +12,7 @@ export const PopupConnect: React.FC<any> = ({
        history.push(`/stream/${res.payload.session_id}`);
      } else {
        alert(res.payload);
+        history.push('/')
      }
    });
  };
@@ -34,21 +30,8 @@ export const PopupConnect: React.FC<any> = ({
          >
            {t("popup-main-btn-start")}
          </button>
-          <span className="line"></span>
        </div>
        <div className="button__container">
-          <p className="button__title">{t("popup-main-caption")} </p>
-          <button
-            className="button button__disabled"
-            onClick={() =>
-              setVisible({
-                popup1: false,
-                popup2: true,
-              })
-            }
-          >
-            {t("popup-main-btn-connect")}
-          </button>
          <span className="line"></span>
          <button onClick={() => history.goBack()} className="popup__caption">
            {t("popup-main-select")}
@@ -1,84 +0,0 @@
-.popup__content {
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-}
-
-.popup__title {
-    font-style: normal;
-    font-weight: 400;
-    font-size: 22px;
-    line-height: 130%;
-    /* identical to box height, or 29px */
-    margin: 0;
-
-    /* App/White */
-
-    color: #FFFFFF;
-
-}
-
-.logo__popup {
-    height: auto;
-    width: 100%;
-    margin-bottom: 48px;
-    object-fit: cover;
-  }
-
-  .logo__popup_ex {
-    display: none;
-  }
-  
-
-.popup__input {
-    padding: 5px 0px;
-    border-radius: 12px;
-    background: #404040;
-    height: 76px;
-    font-style: normal;
-    font-weight: 300;
-    font-size: 38px;
-    line-height: 46px;
-    /* identical to box height */
-    text-align: center;
-
-    letter-spacing: 0.3em;
-
-    /* App/White */
-    box-sizing: border-box;
-    border: none;
-    outline: none;
-    color: #FFFFFF;
-
-}
-
-
-@media screen and (max-width: 639px) {
-
-    .logo__popup {
-        margin-bottom: 40px;
-      }
-
-      .logo__popup_ex {
-        display: block;
-        height: auto;
-        width: 100%;
-        margin-bottom: 24px;
-        object-fit: cover;    
-      }
-    
-    .popup__input {
-        height: 48px;
-        font-size: 30px;
-    }
-
-    .popup__title {
-        font-size: 16px;
-        width: 78%;
-    }
-
-    .popup__content {
-        gap: 16px;
-    }
-    
-}
@@ -1,54 +0,0 @@
-import "../../styles/styles.css";
-import "./popupConnect.css";
-import { useHistory } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-
-export const PopupConnectEx: React.FC<any> = ({
-  setVisible,
-  logo,
-  setValue,
-  value,
-}) => {
-  const history = useHistory();
-  const { t } = useTranslation();
-
-  const handleConnect = () => {
-    history.push(`/stream/${value}`);
-  };
-
-  return (
-    <div className="popup__container">
-      <div className="popup__content">
-        <img alt="logoRC" className="logo__popup_ex" src={logo}></img>
-        <p className="popup__title">{t("popup-connect-title")}</p>
-        <input
-          value={value}
-          onChange={(e) => setValue(e.target.value)}
-          className="popup__input"
-        ></input>
-        <button
-          onClick={handleConnect}
-          disabled={!!!value}
-          type="submit"
-          className={
-            !!value ? "button" : "button button__disabled"
-          }
-        >
-          {t("popup-connect-btn-continue")}
-        </button>
-        <span className="line"></span>
-        <button
-          onClick={() =>
-            setVisible({
-              popup1: true,
-              popup2: false,
-            })
-          }
-          className="popup__caption"
-        >
-          {t("popup-connect-btn-mode")}
-        </button>
-      </div>
-    </div>
-  );
-};