Compare commits
2 Commits
f3b411a4de
...
443532b484
| Author | SHA1 | Date | |
|---|---|---|---|
 VyacheslavShtyrlin
|
443532b484 | ||
|
VyacheslavShtyrlin
|
c34d3ae1fe |
Generated
+14
-66
@@ -19,12 +19,12 @@
|
||||
"@types/react-redux": "^7.1.24",
|
||||
"@types/react-router": "^5.1.20",
|
||||
"@types/socket.io": "^3.0.2",
|
||||
"connected-react-router": "^6.9.3",
|
||||
"framer-motion": "^7.4.0",
|
||||
"i18next": "^22.4.6",
|
||||
"i18next-browser-languagedetector": "^7.0.1",
|
||||
"i18next-http-backend": "^2.1.1",
|
||||
"js-cookie": "^3.0.1",
|
||||
"moment": "^2.29.4",
|
||||
"peer": "^0.6.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
@@ -5777,26 +5777,6 @@
|
||||
"node": ">=0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/connected-react-router": {
|
||||
"version": "6.9.3",
|
||||
"resolved": "https://registry.npmjs.org/connected-react-router/-/connected-react-router-6.9.3.tgz",
|
||||
"integrity": "sha512-4ThxysOiv/R2Dc4Cke1eJwjKwH1Y51VDwlOrOfs1LjpdYOVvCNjNkZDayo7+sx42EeGJPQUNchWkjAIJdXGIOQ==",
|
||||
"dependencies": {
|
||||
"lodash.isequalwith": "^4.4.0",
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"immutable": "^3.8.1 || ^4.0.0",
|
||||
"seamless-immutable": "^7.1.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"history": "^4.7.2",
|
||||
"react": "^16.4.0 || ^17.0.0",
|
||||
"react-redux": "^6.0.0 || ^7.1.0",
|
||||
"react-router": "^4.3.1 || ^5.0.0",
|
||||
"redux": "^3.6.0 || ^4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/content-disposition": {
|
||||
"version": "0.5.4",
|
||||
"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
|
||||
@@ -8983,12 +8963,6 @@
|
||||
"url": "https://opencollective.com/immer"
|
||||
}
|
||||
},
|
||||
"node_modules/immutable": {
|
||||
"version": "4.2.4",
|
||||
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.4.tgz",
|
||||
"integrity": "sha512-WDxL3Hheb1JkRN3sQkyujNlL/xRjAo3rJtaU5xeufUauG66JdMr32bLj4gF+vWl84DIA3Zxw7tiAjneYzRRw+w==",
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/import-fresh": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
|
||||
@@ -11710,11 +11684,6 @@
|
||||
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
|
||||
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
|
||||
},
|
||||
"node_modules/lodash.isequalwith": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.isequalwith/-/lodash.isequalwith-4.4.0.tgz",
|
||||
"integrity": "sha512-dcZON0IalGBpRmJBmMkaoV7d3I80R2O+FrzsZyHdNSFrANq/cgDqKQNmAHE8UEj4+QYWwwhkQOVdLHiAopzlsQ=="
|
||||
},
|
||||
"node_modules/lodash.memoize": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
|
||||
@@ -12018,6 +11987,14 @@
|
||||
"mkdirp": "bin/cmd.js"
|
||||
}
|
||||
},
|
||||
"node_modules/moment": {
|
||||
"version": "2.29.4",
|
||||
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
|
||||
"integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/ms": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
|
||||
@@ -15231,12 +15208,6 @@
|
||||
"url": "https://opencollective.com/webpack"
|
||||
}
|
||||
},
|
||||
"node_modules/seamless-immutable": {
|
||||
"version": "7.1.4",
|
||||
"resolved": "https://registry.npmjs.org/seamless-immutable/-/seamless-immutable-7.1.4.tgz",
|
||||
"integrity": "sha512-XiUO1QP4ki4E2PHegiGAlu6r82o5A+6tRh7IkGGTVg/h+UoeX4nFBeCGPOhb4CYjvkqsfm/TUtvOMYC1xmV30A==",
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/select-hose": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
|
||||
@@ -21618,17 +21589,6 @@
|
||||
"resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz",
|
||||
"integrity": "sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA=="
|
||||
},
|
||||
"connected-react-router": {
|
||||
"version": "6.9.3",
|
||||
"resolved": "https://registry.npmjs.org/connected-react-router/-/connected-react-router-6.9.3.tgz",
|
||||
"integrity": "sha512-4ThxysOiv/R2Dc4Cke1eJwjKwH1Y51VDwlOrOfs1LjpdYOVvCNjNkZDayo7+sx42EeGJPQUNchWkjAIJdXGIOQ==",
|
||||
"requires": {
|
||||
"immutable": "^3.8.1 || ^4.0.0",
|
||||
"lodash.isequalwith": "^4.4.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"seamless-immutable": "^7.1.3"
|
||||
}
|
||||
},
|
||||
"content-disposition": {
|
||||
"version": "0.5.4",
|
||||
"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
|
||||
@@ -23912,12 +23872,6 @@
|
||||
"resolved": "https://registry.npmjs.org/immer/-/immer-9.0.16.tgz",
|
||||
"integrity": "sha512-qenGE7CstVm1NrHQbMh8YaSzTZTFNP3zPqr3YU0S0UY441j4bJTg4A2Hh5KAhwgaiU6ZZ1Ar6y/2f4TblnMReQ=="
|
||||
},
|
||||
"immutable": {
|
||||
"version": "4.2.4",
|
||||
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.4.tgz",
|
||||
"integrity": "sha512-WDxL3Hheb1JkRN3sQkyujNlL/xRjAo3rJtaU5xeufUauG66JdMr32bLj4gF+vWl84DIA3Zxw7tiAjneYzRRw+w==",
|
||||
"optional": true
|
||||
},
|
||||
"import-fresh": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
|
||||
@@ -25881,11 +25835,6 @@
|
||||
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
|
||||
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
|
||||
},
|
||||
"lodash.isequalwith": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.isequalwith/-/lodash.isequalwith-4.4.0.tgz",
|
||||
"integrity": "sha512-dcZON0IalGBpRmJBmMkaoV7d3I80R2O+FrzsZyHdNSFrANq/cgDqKQNmAHE8UEj4+QYWwwhkQOVdLHiAopzlsQ=="
|
||||
},
|
||||
"lodash.memoize": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
|
||||
@@ -26112,6 +26061,11 @@
|
||||
"minimist": "^1.2.6"
|
||||
}
|
||||
},
|
||||
"moment": {
|
||||
"version": "2.29.4",
|
||||
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
|
||||
"integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
|
||||
},
|
||||
"ms": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
|
||||
@@ -28241,12 +28195,6 @@
|
||||
"ajv-keywords": "^3.5.2"
|
||||
}
|
||||
},
|
||||
"seamless-immutable": {
|
||||
"version": "7.1.4",
|
||||
"resolved": "https://registry.npmjs.org/seamless-immutable/-/seamless-immutable-7.1.4.tgz",
|
||||
"integrity": "sha512-XiUO1QP4ki4E2PHegiGAlu6r82o5A+6tRh7IkGGTVg/h+UoeX4nFBeCGPOhb4CYjvkqsfm/TUtvOMYC1xmV30A==",
|
||||
"optional": true
|
||||
},
|
||||
"select-hose": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
|
||||
|
||||
+1
-1
@@ -14,12 +14,12 @@
|
||||
"@types/react-redux": "^7.1.24",
|
||||
"@types/react-router": "^5.1.20",
|
||||
"@types/socket.io": "^3.0.2",
|
||||
"connected-react-router": "^6.9.3",
|
||||
"framer-motion": "^7.4.0",
|
||||
"i18next": "^22.4.6",
|
||||
"i18next-browser-languagedetector": "^7.0.1",
|
||||
"i18next-http-backend": "^2.1.1",
|
||||
"js-cookie": "^3.0.1",
|
||||
"moment": "^2.29.4",
|
||||
"peer": "^0.6.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
|
||||
@@ -8,8 +8,8 @@
|
||||
"popup-connect-title": "Connection code",
|
||||
"popup-connect-btn-mode": "Select demonstration mode",
|
||||
"popup-connect-btn-continue": "Continue",
|
||||
"fullscreen-control-btn": "Expand",
|
||||
"fullscreen-control-btn-active": "Collapse",
|
||||
"fullscreen-control-btn": "Windowed mode",
|
||||
"fullscreen-control-btn-active": "Fullscreen mode",
|
||||
"request-control-btn": "Request control",
|
||||
"request-control-btn-disable": "Stop control",
|
||||
"mute-control-btn": "Turn On Mic",
|
||||
@@ -19,9 +19,9 @@
|
||||
"popup-control-code": "Connection code",
|
||||
"popup-control-link": "Link for connection",
|
||||
"popup-control-btn": "Copy",
|
||||
"popup-control-btn-active": "Copied!",
|
||||
"popup-control-btn-active": "Link Copied",
|
||||
"language-control-btn": "Language",
|
||||
"exit-control-btn": "Exit presintation",
|
||||
"exit-control-btn": "Exit",
|
||||
"popup-control-exit-title": "Are you sure you want to end the demo?",
|
||||
"popup-control-yes": "Finish",
|
||||
"popup-control-no": "Stay"
|
||||
|
||||
@@ -8,8 +8,8 @@
|
||||
"popup-connect-title": "Код подключения к демонстрации",
|
||||
"popup-connect-btn-mode": "Выбор способа демонстрации",
|
||||
"popup-connect-btn-continue": "Продолжить",
|
||||
"fullscreen-control-btn": "Развернуть",
|
||||
"fullscreen-control-btn-active": "Свернуть",
|
||||
"fullscreen-control-btn": "Полноэкранный режим",
|
||||
"fullscreen-control-btn-active": "Оконный режим",
|
||||
"request-control-btn": "Запрос управления",
|
||||
"request-control-btn-disable": "Запрет управления",
|
||||
"mute-control-btn": "Включить микрофон",
|
||||
@@ -19,9 +19,9 @@
|
||||
"popup-control-code": "Код подключения",
|
||||
"popup-control-link": "Ссылка для подключения",
|
||||
"popup-control-btn": "Скопировать",
|
||||
"popup-control-btn-active": "Скопировано",
|
||||
"popup-control-btn-active": "Ссылка скопирована",
|
||||
"language-control-btn": "Язык",
|
||||
"exit-control-btn": "Завершить презентацию",
|
||||
"exit-control-btn": "Выйти",
|
||||
"popup-control-exit-title": "Вы уверены, что хотите закончить демонстрацию??",
|
||||
"popup-control-yes": "Закончить",
|
||||
"popup-control-no": "Остаться"
|
||||
|
||||
+11
-17
@@ -4,8 +4,6 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.content__container {
|
||||
height: 100vh;
|
||||
width: 400px;
|
||||
@@ -17,13 +15,18 @@
|
||||
left: 50%;
|
||||
border-width: 0px 2px;
|
||||
border-style: solid;
|
||||
border-color: #23242A;
|
||||
|
||||
border-color: #23242a;
|
||||
transform: translate(-50%, -50%);
|
||||
/* This is a shorthand of */
|
||||
|
||||
}
|
||||
|
||||
.popup {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
padding: 56px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.card-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -38,8 +41,7 @@
|
||||
line-height: 100%;
|
||||
/* identical to box height, or 38px */
|
||||
|
||||
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.demos_container {
|
||||
@@ -47,12 +49,9 @@
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 1440px) {
|
||||
.card-title {
|
||||
margin: 22px 0 40px 0;
|
||||
|
||||
}
|
||||
|
||||
.card-container {
|
||||
@@ -67,15 +66,12 @@
|
||||
|
||||
.card-title {
|
||||
margin: 42px 0 40px 0;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 920px) {
|
||||
|
||||
.card-title {
|
||||
margin: 36px 0 32px 0;
|
||||
|
||||
}
|
||||
|
||||
.card-title {
|
||||
@@ -91,6 +87,4 @@
|
||||
width: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
+23
-23
@@ -1,23 +1,25 @@
|
||||
import "./App.css";
|
||||
import "styles/styles.css";
|
||||
|
||||
import { useEffect } from "react";
|
||||
import { Redirect, Route, Switch, useHistory } from "react-router-dom";
|
||||
|
||||
import { Header } from "./components/header/header";
|
||||
import { Card } from "./components/demos/Card";
|
||||
import { Main } from "./components/Main/Main";
|
||||
import { PlayerComponent } from "./components/playerComponent/playerComponent";
|
||||
|
||||
import { useAppDispatch, useAppSelector } from "./hooks/redux";
|
||||
import { fetchCards } from "./store/reducers/ActionCreator";
|
||||
import { cardSlice } from "./store/reducers/cardSlice";
|
||||
import { languageSlice } from "./store/reducers/languageSlice";
|
||||
import { ICards } from "./models/ICards";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import cookies from "js-cookie";
|
||||
|
||||
import { Header } from "components/shared/Header/Header";
|
||||
import { Card } from "components/pages/Main/Card/Card";
|
||||
import { PopupComponent } from "components/pages/ConnectPage/PopupComponent/PopupComponent";
|
||||
import { PlayerComponent } from "components/pages/Stream/PlayerComponent/PlayerComponent";
|
||||
import { PlanComponent } from "components/pages/Plan/PlanComponent";
|
||||
|
||||
import { useAppDispatch, useAppSelector } from "hooks/redux";
|
||||
import { fetchCards } from "store/reducers/ActionCreator";
|
||||
import { cardSlice } from "store/reducers/cardSlice";
|
||||
import { languageSlice } from "store/reducers/languageSlice";
|
||||
import { ICards } from "models/ICards";
|
||||
|
||||
const App: React.FC = () => {
|
||||
|
||||
|
||||
const dispatch = useAppDispatch();
|
||||
const history = useHistory();
|
||||
const { handleCurrentCard } = cardSlice.actions;
|
||||
@@ -48,11 +50,7 @@ const App: React.FC = () => {
|
||||
<h3 className="card-title">{t("demo-title")}</h3>
|
||||
<div className="card-container">
|
||||
{cards.map((i: ICards) => (
|
||||
<Card
|
||||
onClick={() => handleCards(i)}
|
||||
key={i._id}
|
||||
item={i}
|
||||
></Card>
|
||||
<Card onClick={() => handleCards(i)} key={i._id} item={i}></Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
@@ -60,9 +58,9 @@ const App: React.FC = () => {
|
||||
<Route path="/connect-page">
|
||||
{currentCard ? (
|
||||
<div className="background">
|
||||
<Header></Header>
|
||||
<div className="content__container">
|
||||
<Main></Main>
|
||||
<Header></Header>
|
||||
<div className="content__container">
|
||||
<PopupComponent></PopupComponent>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
@@ -70,9 +68,11 @@ const App: React.FC = () => {
|
||||
)}
|
||||
</Route>
|
||||
<Route exact path="/stream/:id">
|
||||
<PlayerComponent
|
||||
closeStream={closeStream}
|
||||
></PlayerComponent>
|
||||
<PlayerComponent closeStream={closeStream}></PlayerComponent>
|
||||
</Route>
|
||||
<Route path="/plan">
|
||||
<Header></Header>
|
||||
<PlanComponent></PlanComponent>
|
||||
</Route>
|
||||
</Switch>
|
||||
);
|
||||
|
||||
@@ -1,60 +0,0 @@
|
||||
.exit-popup-container {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 494px;
|
||||
height: 330px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #4F4F4F;
|
||||
border-radius: 32px;
|
||||
top: calc(50% - 469px / 2);
|
||||
left: calc(50% - 494px / 2);
|
||||
background-color: #333333;
|
||||
color: #FFFFFF;
|
||||
padding: 48px;
|
||||
/* gap: 24px; */
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.exit-popup-button-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.exit-popup-button {
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
color: white;
|
||||
height: 60px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.exit-popup-button_confirm {
|
||||
background: #567ECE;
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
|
||||
.exit-popup-button_finish {
|
||||
background: #404040;
|
||||
}
|
||||
|
||||
.exit-popup-button-title {
|
||||
width: 366px;
|
||||
|
||||
}
|
||||
|
||||
.exit-popup-button_confirm:hover {
|
||||
opacity: 0.7;
|
||||
transition: .3s;
|
||||
|
||||
}
|
||||
|
||||
.exit-popup-header {
|
||||
align-items: normal;
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
import "../PopupShare/sharePopup.css";
|
||||
import "./ExitPopup.css";
|
||||
import { TSidebarPopup } from "../../utils/types";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export const ExitPopup: React.FC<TSidebarPopup> = ({ setClose, onExit }) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="exit-popup-container">
|
||||
<div className="mobile-users-part-header exit-popup-header">
|
||||
<span className="mobile-users-part-header-title exit-popup-button-title">
|
||||
{t("popup-control-exit-title")}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setClose()}
|
||||
className="mobile-users-part-header-close-button"
|
||||
></button>
|
||||
</div>
|
||||
<div className="exit-popup-button-container">
|
||||
<button
|
||||
onClick={() => setClose()}
|
||||
className="exit-popup-button exit-popup-button_confirm"
|
||||
>
|
||||
{t("popup-control-no")}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onExit?.()}
|
||||
className="exit-popup-button exit-popup-button_finish"
|
||||
>
|
||||
{t("popup-control-yes")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,38 +0,0 @@
|
||||
import "../sidebar/toolbar.css";
|
||||
import { languageSlice } from "../../store/reducers/languageSlice";
|
||||
import { useAppDispatch, useAppSelector } from "../../hooks/redux";
|
||||
|
||||
export const LanguagePopup: React.FC<any> = ({ setOpen }) => {
|
||||
const { handleChangeLanguage } = languageSlice.actions;
|
||||
|
||||
const buttons = [{ value: "ru" }, { value: "en" }];
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const onChange = (value: string) => {
|
||||
dispatch(handleChangeLanguage(value));
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const { currentLang } = useAppSelector((state) => state.languageReducer);
|
||||
|
||||
return (
|
||||
<div className="toolbar-language-popup">
|
||||
{buttons.map((i) => (
|
||||
<div className="toolbar-button-area">
|
||||
<button
|
||||
key={i.value}
|
||||
value={i.value}
|
||||
onClick={(e: any) => onChange(e.target.value)}
|
||||
className={
|
||||
currentLang === i.value
|
||||
? "toolbar-button toolbar-button-active"
|
||||
: "toolbar-button"
|
||||
}
|
||||
>
|
||||
{i.value.toUpperCase()}
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 189 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 12L16.9996 17M12 12L17 7M12 12L7 17M12 12L7.00002 7" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 233 B |
@@ -1,112 +0,0 @@
|
||||
.navigation {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #E3DDE5;
|
||||
padding: 8px 10px;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
top: 66px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #0E0E0E;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.nav__close {
|
||||
cursor: pointer;
|
||||
object-fit: cover;
|
||||
width: 24px;
|
||||
|
||||
}
|
||||
|
||||
.button__container {
|
||||
}
|
||||
|
||||
|
||||
|
||||
.nav__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 42px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 31px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.button__nav_container {
|
||||
margin-top: 28px;
|
||||
padding: 1px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav__button {
|
||||
appearance: none;
|
||||
background-color: transparent;
|
||||
color: #ebebeb;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
border: none;
|
||||
height: 13px;
|
||||
-webkit-appearance: none;
|
||||
padding: 0;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.language__container {
|
||||
border-bottom: 1px solid transparent;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.language__container_active {
|
||||
box-sizing: border-box;
|
||||
height: 20px;
|
||||
border-bottom: 1px solid #EBEBEB;
|
||||
}
|
||||
|
||||
.nav__button_active {
|
||||
border-bottom: 1px solid #EBEBEB;
|
||||
}
|
||||
.nav__title {
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
line-height: 100%;
|
||||
/* identical to box height, or 24px */
|
||||
color: #FFFFFF;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav__line {
|
||||
background-color: #454545;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.nav__title_container {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
|
||||
}
|
||||
|
||||
.icon_chevron {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.nav__buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
@@ -1,185 +0,0 @@
|
||||
import './navigation.css'
|
||||
import '../header/header.css'
|
||||
import "../../styles/styles.css"
|
||||
import write from '../footer/send.svg'
|
||||
import phone from '../footer/phone.svg'
|
||||
import iconButton from "../../styles/iconButton.svg"
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import chevron from '../header/chevronIcon.svg'
|
||||
type THeader = {
|
||||
menuOpen?: boolean,
|
||||
language: string,
|
||||
setOpen?: (value: boolean) => void
|
||||
changeLanguage: (language: string) => void;
|
||||
setOpacity?: (value: boolean) => void;
|
||||
text?: any;
|
||||
|
||||
}
|
||||
|
||||
const container = {
|
||||
hidden: {
|
||||
translateX: '100%',
|
||||
transition: { duration: 0.2, ease: 'easeOut' }
|
||||
},
|
||||
show: {
|
||||
translateX: '0%',
|
||||
transition: { duration: 0.2, ease: 'easeIn' },
|
||||
},
|
||||
exit: {
|
||||
translateX: '0%',
|
||||
transition: { duration: 0.2, ease: 'easeOut' }
|
||||
}
|
||||
}
|
||||
|
||||
const staggeredVariants = {
|
||||
hidden: {
|
||||
transition: {
|
||||
}
|
||||
},
|
||||
show: {
|
||||
transition: {
|
||||
staggerChildren: 0.35,
|
||||
staggerDirection: -1,
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
exit: {
|
||||
transition: {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const items = {
|
||||
hidden: {
|
||||
opacity: 0,
|
||||
},
|
||||
show: {
|
||||
opacity: 1,
|
||||
transition: { ease: 'easeIn' },
|
||||
|
||||
},
|
||||
|
||||
exit: {
|
||||
opacity: 1,
|
||||
}
|
||||
}
|
||||
|
||||
export const Nav: React.FC<THeader> = ({ menuOpen, language, changeLanguage, text }) => {
|
||||
|
||||
const userLanguage = language === 'RU';
|
||||
|
||||
const { cardLarge, cardLarge1, cardSmall, cardSmall1 } = text
|
||||
|
||||
const langArray = [{
|
||||
value: 'ru-RU',
|
||||
name: 'RU'
|
||||
},
|
||||
{
|
||||
value: 'en-EN',
|
||||
name: 'EN'
|
||||
}]
|
||||
|
||||
|
||||
function langActive(lang: string, language: string) {
|
||||
if (lang === language) {
|
||||
return 'language__container_active'
|
||||
}
|
||||
|
||||
else {
|
||||
return 'language__container'
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{menuOpen && (
|
||||
<motion.nav
|
||||
variants={container}
|
||||
initial={'hidden'}
|
||||
animate={'show'}
|
||||
exit={'hidden'}
|
||||
className={`navigation`}>
|
||||
<motion.div
|
||||
variants={staggeredVariants}
|
||||
initial={'hidden'}
|
||||
animate={'show'}
|
||||
exit={'exit'}
|
||||
className='nav__buttons'>
|
||||
<motion.div
|
||||
variants={items}
|
||||
className='nav__header'>
|
||||
<div className='button__nav_container'>
|
||||
{langArray.map((lang, i) => (
|
||||
<div className={langActive(lang.name, language)}>
|
||||
<button value={lang.value} key={i} onClick={() => changeLanguage(lang.name)} className='nav__button'>{lang.name}</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className='nav__title_container'>
|
||||
<a target='_blank' rel="noreferrer" href={userLanguage ? 'https://graff.tech/' : 'http://en.graff.tech/'} className='nav__title'>{text.captionCompain}</a>
|
||||
<img alt='icon' className='icon_chevron' src={chevron}></img>
|
||||
</div>
|
||||
<span className='nav__line'></span>
|
||||
</motion.div>
|
||||
|
||||
<motion.a
|
||||
href={userLanguage ? 'mailto:info@graff.tech' : 'mailto:waseem@graff.tech'}
|
||||
variants={items}
|
||||
className='footer__card_2'>
|
||||
<div className='ellipse__container'>
|
||||
<div className="main-block__icon_container">
|
||||
<img alt='icon' src={iconButton} className="main-block__icon"></img>
|
||||
</div>
|
||||
</div>
|
||||
<div className={'card__write'}>
|
||||
<img alt='icon' src={write} className='card__icon'></img>
|
||||
<p className='card__caption'>{cardSmall.caption}</p>
|
||||
</div>
|
||||
</motion.a>
|
||||
<motion.a
|
||||
href={userLanguage ? 'tel:+7-800-770-00-76' : 'tel:+971-50-938-8902'}
|
||||
variants={items}
|
||||
className='footer__card_2'>
|
||||
<div className='ellipse__container'>
|
||||
<div className="main-block__icon_container">
|
||||
<img alt='icon' src={iconButton} className="main-block__icon"></img>
|
||||
</div>
|
||||
</div>
|
||||
<div className='card__write'>
|
||||
<img alt='icon' src={phone} className='card__icon'></img>
|
||||
<p className='card__caption'>{cardSmall1.caption}</p>
|
||||
</div>
|
||||
</motion.a>
|
||||
<motion.div
|
||||
variants={items}
|
||||
className={'footer__card_l'}>
|
||||
<div className='card__contacts'>
|
||||
<p className='card__email'>info@graff.tech</p>
|
||||
<p className='card__tel'>+7 800 770 00 76</p>
|
||||
</div>
|
||||
<div className='card__adress'>
|
||||
<p className='card__street'>{cardLarge.address}</p>
|
||||
<p className='card_city'>{cardLarge.city}</p>
|
||||
</div>
|
||||
<p className='card_country'>{cardLarge.country}</p>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
variants={items}
|
||||
className='footer__card_l'>
|
||||
<div className='card__contacts'>
|
||||
<p className='card__email'>waseem@graff.tech</p>
|
||||
<p className='card__tel'>+971 50 938 8902</p>
|
||||
</div>
|
||||
<div className='card__adress card__adress_uae'>
|
||||
<p className='card_city'>{cardLarge1.address}</p>
|
||||
</div>
|
||||
<p className='card_country'>{cardLarge1.country}</p>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</motion.nav>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
)
|
||||
}
|
||||
@@ -1,141 +0,0 @@
|
||||
.share-popup-container {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 494px;
|
||||
height: 469px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #4F4F4F;
|
||||
border-radius: 32px;
|
||||
top: calc(50% - 469px / 2);
|
||||
left: calc(50% - 494px / 2);
|
||||
background-color: #333333;
|
||||
color: #FFFFFF;
|
||||
padding: 48px;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.share-header-popup {
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.border-line {
|
||||
width: 80%;
|
||||
height: 1px;
|
||||
background-color: #404040;
|
||||
}
|
||||
|
||||
.share-popup-data-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.share-popup-data-title {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.share-popup-data-input {
|
||||
background-color: #4F4F4F;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
color: #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mobile-users-part-header-title {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
line-height: 130%;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.mobile-users-part-header-close-button {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
background: url(../../images/icons/close.svg) 50% 50% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.share-popup-data-input.code {
|
||||
height: 76px;
|
||||
font-weight: 300;
|
||||
font-size: 38px;
|
||||
line-height: 46px;
|
||||
letter-spacing: 0.3em;
|
||||
text-align: center;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.share-popup-data-input.href {
|
||||
height: 48px;
|
||||
padding: 14.5px 16px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
}
|
||||
|
||||
.share-popup-copy-button {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
width: 176px;
|
||||
height: 48px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 12px;
|
||||
background-color: #567ECE;
|
||||
border: none;
|
||||
color: #FFFFFF;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
gap: 4px;
|
||||
cursor: pointer;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.share-popup-copy-button:hover {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.share-popup-copy-button.copied {
|
||||
background-color: #219653;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.share-popup-copy-button-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: url('copyIcon.svg') 50% 50% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.show-share-popup-enter {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.show-share-popup-enter-active {
|
||||
opacity: 1;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.show-share-popup-exit {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.show-share-popup-exit-active {
|
||||
opacity: 0;
|
||||
transition: .3s;
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
import { Route, Redirect } from "react-router-dom";
|
||||
|
||||
export const ProtectedComponent: React.FC<any> = ({ children, ...props }) => {
|
||||
console.log(props)
|
||||
return (
|
||||
<Route>
|
||||
{() => (props.currentCard ? children : <Redirect to="/" />)}
|
||||
</Route>
|
||||
)
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
|
||||
export const UserList: React.FC<any> = ({ selected, setSelected }) => {
|
||||
return <></>;
|
||||
};
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 213 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 182 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 166 KiB |
@@ -1,33 +0,0 @@
|
||||
import "../../styles/styles.css"
|
||||
import './demonstration.css'
|
||||
|
||||
import building from './building.png'
|
||||
|
||||
import iconButton from "./iconButton.svg"
|
||||
|
||||
|
||||
export const Demostration: React.FC<any> = ({text}) => {
|
||||
const { card } = text;
|
||||
return (
|
||||
<div className="block">
|
||||
<a href='https://stream.graff.tech/' target='_blank' rel="noreferrer" className='demos_container demos__route'>
|
||||
<div className="main-block__icon_container demo__icon">
|
||||
<img alt="icon" src={iconButton} className="main-block__icon"></img>
|
||||
</div>
|
||||
<div className='demo'>
|
||||
<img alt='buildingImg' src={building} className='demo_image'></img>
|
||||
<div className='demo_info'>
|
||||
<div className='title__block'>
|
||||
<h4 className='title__demo'>{card.title}</h4>
|
||||
<p className='caption'>{card.subTitle}</p>
|
||||
</div>
|
||||
<div className='body__block'>
|
||||
<p className='caption1'>{card.caption}</p>
|
||||
<p className='caption2'>{card.caption1}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,152 +0,0 @@
|
||||
.demonstration__title {
|
||||
margin: 0 0 44px 0;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 40px;
|
||||
line-height: 100%;
|
||||
/* or 40px */
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.demos-card__container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 24px;
|
||||
|
||||
}
|
||||
|
||||
.demo__icon {
|
||||
right: 36px;
|
||||
top: 36px;
|
||||
|
||||
}
|
||||
|
||||
.demo-card__header {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.demos-card {
|
||||
background: #1E1E1E;
|
||||
border-radius: 24px;
|
||||
width: 384px;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin-top: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.demo-card__image {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
border-radius: 24px;
|
||||
|
||||
}
|
||||
|
||||
.demo-card__info {
|
||||
padding: 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.demo-card__icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.demo-card__title {
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
line-height: 130%;
|
||||
color: #EBEBEB;
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
|
||||
.demo-card__subtitle {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 130%;
|
||||
/* or 18px */
|
||||
|
||||
|
||||
/* Landing/White */
|
||||
|
||||
color: #EBEBEB;
|
||||
|
||||
opacity: 0.5;
|
||||
|
||||
}
|
||||
|
||||
.demo-card__text {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 130%;
|
||||
/* or 21px */
|
||||
|
||||
|
||||
/* Landing/White */
|
||||
margin: 0 0 10px 0;
|
||||
color: #EBEBEB;
|
||||
}
|
||||
|
||||
.demo-card__subtext {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 130%;
|
||||
/* or 18px */
|
||||
/* Landing/White */
|
||||
color: #EBEBEB;
|
||||
opacity: 0.5;
|
||||
|
||||
}
|
||||
|
||||
.demos-card {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.demos-card:hover>div>div>div>img {
|
||||
transition: opacity ease-out 0.2s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.demos__route {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.block {
|
||||
padding: 0 20px 80px;
|
||||
}
|
||||
|
||||
.demos-card__container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.demos-card {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.demo-card__image {
|
||||
width: 200px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 639px) {
|
||||
.demo__icon {
|
||||
right: 19px;
|
||||
top: 186px;
|
||||
|
||||
}
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.35356 9.35355C5.1583 9.54881 4.84171 9.54882 4.64645 9.35356C4.45119 9.1583 4.45118 8.84171 4.64644 8.64645L5.35356 9.35355ZM9 4.99993L9.35355 4.64637C9.44732 4.74014 9.5 4.86731 9.5 4.99992C9.5 5.13253 9.44732 5.25971 9.35356 5.35348L9 4.99993ZM4.64645 1.35356C4.45119 1.1583 4.45118 0.841714 4.64644 0.64645C4.8417 0.451186 5.15829 0.451183 5.35355 0.646443L4.64645 1.35356ZM1 5.49993C0.723858 5.49993 0.5 5.27607 0.5 4.99993C0.5 4.72378 0.723858 4.49993 1 4.49993V5.49993ZM4.64644 8.64645L8.64644 4.64638L9.35356 5.35348L5.35356 9.35355L4.64644 8.64645ZM8.64645 5.35348L4.64645 1.35356L5.35355 0.646443L9.35355 4.64637L8.64645 5.35348ZM9 5.49993H1V4.49993H9V5.49993Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 801 B |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 12L16.9996 17M12 12L17 7M12 12L7 17M12 12L7.00002 7" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 233 B |
+17
-5
@@ -1,8 +1,4 @@
|
||||
.loader-container {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
padding: 56px;
|
||||
box-sizing: border-box;
|
||||
.popup-type-loader {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 58px;
|
||||
@@ -14,6 +10,22 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.popup-img-container {
|
||||
height: 94px;
|
||||
width: 100%;
|
||||
padding: 0 21px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
box-sizing: border-box;
|
||||
|
||||
}
|
||||
|
||||
.popup-logo {
|
||||
height: 78px;
|
||||
width: 267px;
|
||||
object-fit: contain;
|
||||
|
||||
}
|
||||
|
||||
.loading-caption {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
+5
-4
@@ -1,7 +1,6 @@
|
||||
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> = ({ logo }) => {
|
||||
@@ -9,9 +8,11 @@ export const LoadingPopup: React.FC<any> = ({ logo }) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="loader-container">
|
||||
<div className="popup popup-type-loader">
|
||||
<div className="loading-logo-container">
|
||||
<img className="popup-logo" src={logo} alt="лого" />
|
||||
<div className="popup-img-container">
|
||||
<img className="popup-logo" src={logo} alt="лого" />
|
||||
</div>
|
||||
<span className="loading-caption">Пожалуйста подождите</span>
|
||||
</div>
|
||||
<span className="loader"></span>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
+10
-10
@@ -1,15 +1,16 @@
|
||||
import "./main.css";
|
||||
import { useEffect, useState } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
|
||||
import { PopupConnect } from "../popupConnect/popupConnect";
|
||||
import { LoadingPopup } from "../LoadingPopup/LoadingPopup";
|
||||
import { popupAnimation } from "../../utils/animationProps";
|
||||
import { useAppDispatch, useAppSelector } from "../../hooks/redux";
|
||||
import { createSession } from "../../store/reducers/ActionCreator";
|
||||
import { sessionSlice } from "../../store/reducers/sessionSlice";
|
||||
import { popupAnimation } from "utils/animationProps";
|
||||
|
||||
export const Main: React.FC = () => {
|
||||
import { PopupConnect } from "components/pages/ConnectPage/PopupConnect/PopupConnect";
|
||||
import { LoadingPopup } from "components/pages/ConnectPage/LoadingPopup/LoadingPopup";
|
||||
|
||||
import { useAppDispatch, useAppSelector } from "hooks/redux";
|
||||
import { createSession } from "store/reducers/ActionCreator";
|
||||
import { sessionSlice } from "store/reducers/sessionSlice";
|
||||
|
||||
export const PopupComponent: React.FC = () => {
|
||||
const dispatch = useAppDispatch();
|
||||
const { currentCard } = useAppSelector((state) => state.cardReducer);
|
||||
const [visible, setVisible] = useState({
|
||||
@@ -64,8 +65,7 @@ export const Main: React.FC = () => {
|
||||
animate={"show"}
|
||||
exit={"hidden"}
|
||||
>
|
||||
<LoadingPopup logo={currentCard.image.logo}
|
||||
></LoadingPopup>
|
||||
<LoadingPopup logo={currentCard.image.logo}></LoadingPopup>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
@@ -0,0 +1,44 @@
|
||||
|
||||
.popup-img-container {
|
||||
height: 94px;
|
||||
width: 100%;
|
||||
padding: 0 21px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
box-sizing: border-box;
|
||||
|
||||
}
|
||||
|
||||
.popup-logo {
|
||||
height: 78px;
|
||||
width: 267px;
|
||||
object-fit: contain;
|
||||
|
||||
}
|
||||
|
||||
.popup-button-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 1px;
|
||||
background-color: #23242A;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.popup-img-container {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
.popup-connect {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
+13
-10
@@ -1,5 +1,7 @@
|
||||
import "./PopupConnect.css";
|
||||
|
||||
import { useHistory } from "react-router-dom";
|
||||
import "./popupConnect.css";
|
||||
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export const PopupConnect: React.FC<any> = ({ onConnect, logo, isLoading }) => {
|
||||
@@ -12,24 +14,25 @@ export const PopupConnect: React.FC<any> = ({ onConnect, logo, isLoading }) => {
|
||||
history.push(`/stream/${res.payload.session_id}`);
|
||||
} else {
|
||||
alert(res.payload);
|
||||
history.push('/')
|
||||
history.push("/");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="popup-connect">
|
||||
<img className="popup-logo" src={logo} alt="лого" />
|
||||
<div className="popup">
|
||||
<div className="popup-img-container">
|
||||
<img className="popup-logo" src={logo} alt="лого" />
|
||||
</div>
|
||||
<div className="popup-button-container">
|
||||
<button
|
||||
onClick={handleConnect}
|
||||
className="button-connect">{t("popup-main-btn-start")}
|
||||
<button onClick={handleConnect} className="button-primary">
|
||||
{t("popup-main-btn-start")}
|
||||
</button>
|
||||
<div className="popup-line"></div>
|
||||
<button onClick={() => history.goBack()} className="button-back">{t("popup-main-select")}
|
||||
</button>
|
||||
<button onClick={() => history.goBack()} className="button-secondary">
|
||||
{t("popup-main-select")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
};
|
||||
@@ -1,7 +1,7 @@
|
||||
import "./Card.css";
|
||||
import "../../styles/styles.css";
|
||||
import iconButton from "./iconButton.svg";
|
||||
import { useAppSelector } from "../../hooks/redux";
|
||||
|
||||
import { useAppSelector } from "hooks/redux";
|
||||
|
||||
export const Card: React.FC<any> = ({ item, onClick }) => {
|
||||
const { currentLang } = useAppSelector((state) => state.languageReducer);
|
||||
|
Before Width: | Height: | Size: 602 KiB After Width: | Height: | Size: 602 KiB |
|
Before Width: | Height: | Size: 792 KiB After Width: | Height: | Size: 792 KiB |
|
Before Width: | Height: | Size: 666 KiB After Width: | Height: | Size: 666 KiB |
|
Before Width: | Height: | Size: 864 B After Width: | Height: | Size: 864 B |
@@ -0,0 +1,18 @@
|
||||
<svg width="158" height="46" viewBox="0 0 158 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M28.4185 28.2237L27.7756 25.8035C26.7887 26.0609 25.8072 26.3338 24.8311 26.6222C24.3508 25.0028 23.8303 23.3976 23.2697 21.8068C20.5345 14.1008 16.8199 6.77268 12.2156 0L10.1248 1.39958C14.6103 7.99685 18.2283 15.1359 20.8907 22.6434C21.4441 24.2056 21.955 25.7815 22.4232 27.3711C18.1602 28.7491 13.9995 30.4214 9.97168 32.376L16.8926 18.5948L14.6379 17.4794L6.17355 34.3207C4.07608 35.454 2.01823 36.6658 0 37.9564L1.36689 40.0602C2.28536 39.4727 3.21345 38.9013 4.15113 38.346L0.959882 44.6968L3.21644 45.814L8.07892 36.1457C12.8901 33.5957 17.9164 31.4671 23.1004 29.7842C24.4945 35.0348 25.4254 40.396 25.8828 45.8069L28.4041 45.5941C27.9318 40.0028 26.9677 34.4633 25.5226 29.0388C26.4831 28.7552 27.4532 28.4859 28.4329 28.2309" fill="#F2F2F2"/>
|
||||
<path d="M125.712 28.2183H127.115V17.6616H125.712V28.2183ZM131.894 17.6616L127.318 22.7076L127.275 22.7487L127.322 22.7916L132.824 28.2129H134.612L129.017 22.6986L133.591 17.6562L131.894 17.6616Z" fill="#F2F2F2"/>
|
||||
<path d="M115.989 22.9526C115.984 21.8684 116.412 20.8264 117.18 20.0556C117.948 19.2847 118.994 18.8481 120.086 18.8414C121.02 18.8353 121.943 19.0375 122.787 19.4331V17.9477C121.923 17.6277 121.008 17.4654 120.086 17.4687C119.354 17.4555 118.626 17.5873 117.946 17.8564C117.266 18.1254 116.646 18.5262 116.124 19.0355C115.601 19.5448 115.186 20.1523 114.903 20.8225C114.62 21.4928 114.474 22.2123 114.474 22.9392C114.474 23.666 114.62 24.3855 114.903 25.0558C115.186 25.726 115.601 26.3335 116.124 26.8428C116.646 27.3521 117.266 27.7529 117.946 28.0219C118.626 28.291 119.354 28.4228 120.086 28.4096C121.008 28.4129 121.923 28.2506 122.787 27.9306V26.4631C121.943 26.8601 121.02 27.063 120.086 27.0565C118.994 27.0499 117.948 26.6132 117.18 25.8424C116.412 25.0715 115.984 24.0296 115.989 22.9454" fill="#F2F2F2"/>
|
||||
<path d="M44.3371 20.4106L46.201 24.2053H42.4713L44.3371 20.4106ZM39.0586 28.2181H40.4993L41.8572 25.4565H46.8169L48.173 28.2181H49.6138L44.3353 17.4756L39.0586 28.2181Z" fill="#F2F2F2"/>
|
||||
<path d="M60.3495 17.4726L52.7965 25.1801V17.6621H51.3936V28.4082L58.9448 20.7008V28.2188H60.3495V17.4726ZM60.9042 13.1613L60.2541 12.0889C58.3865 13.2127 56.8372 14.7891 55.7518 16.6701L56.8485 17.2903C57.8277 15.5945 59.2251 14.1737 60.9096 13.1613" fill="#F2F2F2"/>
|
||||
<path d="M101.841 22.9527C101.832 23.755 101.584 24.5367 101.129 25.1995C100.673 25.8624 100.03 26.3766 99.2809 26.6775C98.5315 26.9785 97.7091 27.0527 96.9174 26.8907C96.1256 26.7288 95.3998 26.3381 94.8313 25.7676C94.2628 25.1972 93.877 24.4726 93.7226 23.685C93.5681 22.8974 93.6518 22.0821 93.9632 21.3417C94.2746 20.6012 94.7997 19.9687 95.4725 19.5239C96.1452 19.079 96.9355 18.8416 97.7439 18.8415C98.8363 18.8482 99.8813 19.2848 100.65 20.0557C101.418 20.8265 101.846 21.8685 101.841 22.9527ZM103.255 22.9527C103.255 21.8704 102.932 20.8123 102.326 19.9123C101.721 19.0122 100.86 18.3107 99.8525 17.8963C98.8452 17.482 97.7366 17.3735 96.6671 17.5845C95.5976 17.7956 94.6152 18.3167 93.8441 19.082C93.073 19.8473 92.548 20.8224 92.3353 21.8839C92.1227 22.9454 92.232 24.0457 92.6495 25.0455C93.0669 26.0453 93.7738 26.8998 94.6806 27.5009C95.5874 28.1019 96.6535 28.4226 97.7439 28.4222C99.2055 28.4222 100.607 27.846 101.641 26.8202C102.674 25.7945 103.255 24.4033 103.255 22.9527Z" fill="#F2F2F2"/>
|
||||
<path d="M89.9872 20.3855C89.9872 18.7768 88.5879 17.472 86.8608 17.472C85.9714 17.4638 85.0897 17.6353 84.2693 17.976V19.3952L84.3629 19.3363C85.1039 18.9357 85.9381 18.736 86.7815 18.7571C87.8027 18.7571 88.6311 19.5186 88.6311 20.457C88.6311 21.3954 87.8027 22.1551 86.7815 22.1551H85.7892V23.4063H87.23C88.3231 23.4063 89.211 24.2303 89.211 25.2438C89.211 26.2572 88.2511 27.0813 87.0679 27.0813C85.7316 27.0813 84.5664 26.7023 83.9541 26.1446V27.6247C84.9012 28.1548 85.9735 28.425 87.0607 28.4076C89.0039 28.4076 90.5797 27.0634 90.5797 25.4028C90.5797 24.0855 89.8593 23.0792 88.8166 22.6538C89.1748 22.3913 89.4666 22.0498 89.6688 21.6561C89.8711 21.2624 89.9782 20.8274 89.9818 20.3855" fill="#F2F2F2"/>
|
||||
<path d="M69.5334 25.1866C69.5334 25.6591 69.3449 26.1124 69.0091 26.4474C68.6733 26.7823 68.2176 26.9717 67.7415 26.9741H64.9249V23.4135H67.7415C68.2176 23.4158 68.6733 23.6052 69.0091 23.9402C69.3449 24.2751 69.5334 24.7284 69.5334 25.2009V25.1866ZM68.379 20.5536C68.379 20.9835 68.2069 21.3959 67.9006 21.6999C67.5943 22.004 67.1788 22.1748 66.7456 22.1748H64.9249V18.9127H66.7456C67.1787 18.9132 67.5938 19.0841 67.9001 19.3881C68.2063 19.692 68.3785 20.1041 68.379 20.5339V20.5536ZM68.8905 22.5001C69.1686 22.2449 69.3908 21.9356 69.5432 21.5915C69.6956 21.2474 69.7751 20.8758 69.7765 20.4999C69.7765 18.9377 68.4186 17.6704 66.7456 17.6704H63.5273V28.2271H67.7469C69.4902 28.2074 70.8949 26.8865 70.8949 25.2581C70.8844 24.6513 70.6873 24.0621 70.3301 23.5695C69.9728 23.0769 69.4724 22.7044 68.8959 22.5019" fill="#F2F2F2"/>
|
||||
<path d="M157.447 17.4722L149.894 25.1796V17.6616H148.491V28.4078L156.042 20.7003V28.2183H157.447V17.4722ZM158 12.7086L156.905 12.0884C155.926 13.7842 154.528 15.205 152.844 16.2174L153.492 17.2898C155.36 16.166 156.909 14.5896 157.995 12.7086" fill="#F2F2F2"/>
|
||||
<path d="M77.2385 20.4106L79.1024 24.2053H75.3727L77.2385 20.4106ZM71.96 28.2181H73.4007L74.7568 25.4565H79.7165L81.0726 28.2181H82.5134L77.2349 17.4756L71.96 28.2181Z" fill="#F2F2F2"/>
|
||||
<path d="M111.686 25.1866C111.686 25.6607 111.496 26.1153 111.158 26.4505C110.821 26.7857 110.363 26.9741 109.885 26.9741H107.068V23.4135H109.885C110.363 23.4135 110.821 23.6018 111.158 23.937C111.496 24.2722 111.686 24.7269 111.686 25.2009V25.1866ZM110.53 20.5536C110.53 20.9835 110.358 21.3959 110.051 21.6999C109.745 22.004 109.329 22.1748 108.896 22.1748H107.075V18.9127H108.896C109.329 18.9132 109.744 19.0841 110.051 19.3881C110.357 19.692 110.529 20.1041 110.53 20.5339V20.5536ZM111.041 22.5001C111.319 22.2449 111.541 21.9356 111.694 21.5915C111.846 21.2474 111.926 20.8758 111.927 20.4999C111.927 18.9377 110.571 17.6704 108.896 17.6704H105.669V28.2271H109.888C111.632 28.2074 113.038 26.8865 113.038 25.2581C113.027 24.6511 112.83 24.0619 112.472 23.5693C112.115 23.0767 111.614 22.7043 111.037 22.5019" fill="#F2F2F2"/>
|
||||
<path d="M145.32 17.4722L137.769 25.1796V17.6616H136.364V28.4078L143.915 20.6985V28.2165H145.32V17.4722Z" fill="#F2F2F2"/>
|
||||
<path d="M51.6 35.25H50.1953V45.7959H51.6V35.25Z" fill="#F2F2F2"/>
|
||||
<path d="M61.9211 36.5012V35.25H54.0078V36.5012H57.2639V45.7959H58.6668V36.5012H61.9211Z" fill="#F2F2F2"/>
|
||||
<path d="M71.2448 35.2412L68.1094 39.8546H68.0968L64.9614 35.2412H63.3027L67.4016 41.272V45.7961H68.8045V41.272L72.9034 35.2412H71.2448Z" fill="#F2F2F2"/>
|
||||
<path d="M40.476 40.5234C40.4708 39.4392 40.8993 38.3972 41.6675 37.6264C42.4357 36.8555 43.4808 36.4189 44.5731 36.4122C45.5072 36.4053 46.4307 36.6082 47.2745 37.0057V35.5382C46.4106 35.218 45.4953 35.0557 44.5731 35.0591C43.1286 35.0851 41.752 35.6728 40.7397 36.6959C39.7274 37.719 39.1602 39.0956 39.1602 40.5296C39.1602 41.9636 39.7274 43.3402 40.7397 44.3633C41.752 45.3864 43.1286 45.9742 44.5731 46.0001C45.4953 46.0035 46.4106 45.8413 47.2745 45.5211V44.0446C46.4307 44.4421 45.5072 44.645 44.5731 44.6381C43.4809 44.631 42.4361 44.1941 41.668 43.4234C40.8999 42.6526 40.4713 41.611 40.476 40.5269" fill="#F2F2F2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.1 KiB |
@@ -0,0 +1,46 @@
|
||||
.calender-container {
|
||||
width: 312px;
|
||||
}
|
||||
|
||||
.weekday-table {
|
||||
user-select: none;
|
||||
background: transparent;
|
||||
cursor: auto;
|
||||
padding: 3px 5px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 140%;
|
||||
color: #f2f2f2;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
.calendar-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.calendar-nav {
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.calendar-nav:hover {
|
||||
background: rgba(86, 126, 206, 0.2);
|
||||
}
|
||||
|
||||
.calendar-nav-left {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
import "./CalendarComponent.css";
|
||||
import chevron from "images/icons/ChevronRight.svg";
|
||||
|
||||
import * as moment from "moment";
|
||||
import "moment/locale/ru";
|
||||
import { motion, useAnimationControls } from "framer-motion";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
import { planSlice } from "store/reducers/planSlice";
|
||||
import { useAppDispatch, useAppSelector } from "hooks/redux";
|
||||
import { variantsCalendar } from "utils/animationProps.js";
|
||||
|
||||
export const CalendarComponent: React.FC<any> = ({ time, pickedTime }) => {
|
||||
const controls = useAnimationControls();
|
||||
const dispatch = useAppDispatch();
|
||||
const { handleNavigation, handleTimeValue } = planSlice.actions;
|
||||
|
||||
const [calendar, setCalendar] = useState([]);
|
||||
const [value, setValue] = useState(time);
|
||||
const currDate = time;
|
||||
const startDay = value.clone().startOf("month").startOf("week");
|
||||
const endDay = value.clone().endOf("month").endOf("week");
|
||||
const weekDays = ["ПН", "ВT", "СР", "ЧТ", "ПТ", "СБ", "ВС"];
|
||||
|
||||
useEffect(() => {
|
||||
controls.start({
|
||||
opacity: 1,
|
||||
});
|
||||
}, [nextMonth, prevMonth]);
|
||||
|
||||
useEffect(() => {
|
||||
const day = startDay.clone().subtract("1", "day");
|
||||
const a = [];
|
||||
while (day.isBefore(endDay, "day")) {
|
||||
a.push(
|
||||
Array(7)
|
||||
.fill(0)
|
||||
.map(() => day.add(1, "day").clone())
|
||||
);
|
||||
}
|
||||
setCalendar(a);
|
||||
}, [value]);
|
||||
|
||||
function prevMonth() {
|
||||
return value.clone().subtract(1, "month");
|
||||
}
|
||||
|
||||
function nextMonth() {
|
||||
return value.clone().add(1, "month").startOf("month");
|
||||
}
|
||||
|
||||
function thisMonth() {
|
||||
return value.isSame(new Date(), "month");
|
||||
}
|
||||
|
||||
function hide(day: any) {
|
||||
if (value.isSame(day, "month")) {
|
||||
if (currDate.isSame(day, "day")) {
|
||||
const cellClass = "calendar-cell_active calendar-cell";
|
||||
return cellClass;
|
||||
}
|
||||
return "calendar-cell calendar-cell_day";
|
||||
} else {
|
||||
return "calendar-cell-none";
|
||||
}
|
||||
}
|
||||
|
||||
const handleValue = (day: moment.Moment) => {
|
||||
const temp = currDate.clone().subtract(1, "day");
|
||||
if (day.isBefore(temp)) {
|
||||
return;
|
||||
} else {
|
||||
dispatch(
|
||||
handleNavigation({
|
||||
isDone: false,
|
||||
isCalendar: false,
|
||||
isTimepicker: true,
|
||||
isForm: false,
|
||||
})
|
||||
);
|
||||
dispatch(handleTimeValue(day));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="calendar-container">
|
||||
<h3 className="plan-title">Выберите дату.</h3>
|
||||
<div className="calendar">
|
||||
<div className="calendar-header">
|
||||
<img
|
||||
alt="prev-mouth"
|
||||
onClick={() => !thisMonth() && setValue(prevMonth())}
|
||||
className="calendar-nav calendar-nav-left"
|
||||
src={chevron}
|
||||
></img>
|
||||
<span className="calendar-date">
|
||||
{value.format("MMMM")}, {value.format("YYYY")}
|
||||
</span>
|
||||
<img
|
||||
alt="next-mouth"
|
||||
onClick={() => setValue(nextMonth())}
|
||||
className="calendar-nav"
|
||||
src={chevron}
|
||||
></img>
|
||||
</div>
|
||||
<div className="weekday-table">
|
||||
{weekDays.map((day, i) => (
|
||||
<div key={i} className="calendar-cell">
|
||||
{day}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{calendar.map((week, i) => (
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={variantsCalendar}
|
||||
key={Math.random()}
|
||||
className="calendar-table"
|
||||
>
|
||||
{week.map((day: any, i: number) => (
|
||||
<div
|
||||
key={i}
|
||||
onClick={() => handleValue(day)}
|
||||
className={hide(day)}
|
||||
>
|
||||
{day.format("D")}
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,26 @@
|
||||
.finish-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.finish-title {
|
||||
margin: 0;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 38px;
|
||||
line-height: 100%;
|
||||
/* or 38px */
|
||||
/* White */
|
||||
color: #f2f2f2;
|
||||
}
|
||||
|
||||
.finish-text {
|
||||
margin: 0;
|
||||
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 140%;
|
||||
color: #c5c7ce;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import "./Finish.css";
|
||||
|
||||
export const Finish: React.FC<any> = () => {
|
||||
return (
|
||||
<div className="finish-container">
|
||||
<h2 className="finish-title">Просмотр запланирован.</h2>
|
||||
<p className="finish-text">
|
||||
Ссылка для подключения и другая дополнительная информация будут
|
||||
отправлены на ваш почтовый адрес.
|
||||
</p>
|
||||
<button style={{ marginTop: "16px" }} className="button button-primary">
|
||||
На сайт жилого комплекса
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,42 @@
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.form-input-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
background: #23242a;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
border-radius: 2px;
|
||||
padding: 12px 16px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 135%;
|
||||
color: #c5c7ce;
|
||||
border: 10px solid transparent;
|
||||
border-image-slice: 1;
|
||||
border-width: 1px;
|
||||
|
||||
}
|
||||
|
||||
.form-input-caption {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 140%;
|
||||
color: #c5c7ce;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
border-image-source: linear-gradient(180deg, #bc75ff 0%, #798fff 100%);
|
||||
}
|
||||
|
||||
.form-input:invalid {
|
||||
border: 1px solid #E94444;
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
import chevron from "images/icons/ChevronLeft.svg";
|
||||
import "./Form.css";
|
||||
|
||||
import { planSlice } from "store/reducers/planSlice";
|
||||
import { useAppDispatch, useAppSelector } from "hooks/redux";
|
||||
|
||||
export const Form: React.FC<any> = ({ time }) => {
|
||||
const dispatch = useAppDispatch();
|
||||
const { handleNavigation, handleTimeValue } = planSlice.actions;
|
||||
|
||||
const handleValue = (day: moment.Moment) => {
|
||||
dispatch(
|
||||
handleNavigation({
|
||||
isDone: false,
|
||||
isCalendar: false,
|
||||
isTimepicker: true,
|
||||
isForm: false,
|
||||
})
|
||||
);
|
||||
|
||||
dispatch(handleTimeValue(day));
|
||||
};
|
||||
|
||||
const handleReturn = () => {
|
||||
dispatch(
|
||||
handleNavigation({
|
||||
isDone: false,
|
||||
isCalendar: false,
|
||||
isTimepicker: true,
|
||||
isForm: false,
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="calendar-container">
|
||||
<h3 className="plan-title plan-title-plan">
|
||||
Расскажите <br></br> о себе.
|
||||
</h3>
|
||||
<button
|
||||
onClick={() => handleReturn()}
|
||||
style={{ width: "141px", padding: "4px 16px 4px 4px", height: "32px" }}
|
||||
className="button button-type-small button-plan"
|
||||
>
|
||||
<img src={chevron}></img>
|
||||
Выбор времени
|
||||
</button>
|
||||
<div className="calendar" style={{ height: "auto" }}>
|
||||
<div className="calendar-header">
|
||||
<span className="calendar-date">{time.format("DD MMM, LT")}</span>
|
||||
</div>
|
||||
<form className="form">
|
||||
<div className="form-input-container">
|
||||
<span className="form-input-caption">Имя</span>
|
||||
<input min={2} max={30} className="form-input" type="text"></input>
|
||||
</div>
|
||||
<div className="form-input-container">
|
||||
<span className="form-input-caption">E-mail</span>
|
||||
<input className="form-input" type="e-mail"></input>
|
||||
</div>
|
||||
<button
|
||||
style={{ marginTop: "32px" }}
|
||||
className="button button-primary"
|
||||
>
|
||||
Запланировать
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,145 @@
|
||||
.content-container-plan {
|
||||
height: 100vh;
|
||||
width: 428px;
|
||||
justify-content: center;
|
||||
padding: 24px 56px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
box-sizing: border-box;
|
||||
border-width: 0px 2px;
|
||||
border-style: solid;
|
||||
border-color: #23242a;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.calendar-position {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.plan-logo {
|
||||
width: 158px;
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
.plan-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 32px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 38px;
|
||||
line-height: 100%;
|
||||
color: #f2f2f2;
|
||||
}
|
||||
|
||||
.calendar-date {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 120%;
|
||||
color: #f2f2f2;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.calendar-table {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.calendar-table:nth-child(odd) {
|
||||
background: #1c1d21;
|
||||
}
|
||||
|
||||
.calendar-cell {
|
||||
user-select: none;
|
||||
background: transparent;
|
||||
cursor: auto;
|
||||
padding: 3px 5px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 140%;
|
||||
color: #f2f2f2;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.calendar-cell_day {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.calendar-cell_day:hover {
|
||||
background: #23242a;
|
||||
}
|
||||
|
||||
.calendar-cell-none {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.line-calendar {
|
||||
margin-top: 32px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.button-plan {
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.plan-title-plan {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 920px) {
|
||||
.calendar-position {
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 430px) {
|
||||
|
||||
|
||||
.content-container-plan {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.plan-logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.plan-title {
|
||||
margin-top: 32px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 125%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 380px) {
|
||||
.calendar-position {
|
||||
top: 60%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
import "./PlanComponent.css";
|
||||
import logo from "./Aivaz.svg";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
import * as moment from "moment";
|
||||
import "moment/locale/ru";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
|
||||
import { CalendarComponent } from "./CalendarComponent/CalendarComponent";
|
||||
import { TimepickerComponent } from "./TimepickerComponent/TimepickerComponent";
|
||||
import { Form } from "./Form/Form";
|
||||
|
||||
import { Finish } from "./Finish/Finish";
|
||||
import { useAppSelector } from "hooks/redux";
|
||||
import { popupAnimation } from "utils/animationProps";
|
||||
|
||||
export const PlanComponent: React.FC<any> = () => {
|
||||
const { isDone, isCalendar, isTimepicker, isForm, time } = useAppSelector(
|
||||
(state) => state.planReducer
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="content-container-plan">
|
||||
<img alt="logo" src={logo} className="plan-logo"></img>
|
||||
<div className="calendar-position">
|
||||
<AnimatePresence mode="wait">
|
||||
{isCalendar && (
|
||||
<motion.div
|
||||
style={{ height: "560px" }}
|
||||
key={1}
|
||||
variants={popupAnimation}
|
||||
initial={"hidden"}
|
||||
animate={"show"}
|
||||
exit={"hidden"}
|
||||
>
|
||||
<CalendarComponent time={time}></CalendarComponent>
|
||||
</motion.div>
|
||||
)}
|
||||
{isTimepicker && (
|
||||
<motion.div
|
||||
style={{ height: "560px" }}
|
||||
key={2}
|
||||
variants={popupAnimation}
|
||||
initial={"hidden"}
|
||||
animate={"show"}
|
||||
exit={"hidden"}
|
||||
>
|
||||
<TimepickerComponent time={time}></TimepickerComponent>
|
||||
</motion.div>
|
||||
)}
|
||||
{isForm && (
|
||||
<motion.div
|
||||
style={{ height: "560px" }}
|
||||
key={3}
|
||||
variants={popupAnimation}
|
||||
initial={"hidden"}
|
||||
animate={"show"}
|
||||
exit={"hidden"}
|
||||
>
|
||||
<Form time={time}></Form>
|
||||
</motion.div>
|
||||
)}
|
||||
{isDone && (
|
||||
<motion.div
|
||||
style={{ height: "560px" }}
|
||||
key={4}
|
||||
variants={popupAnimation}
|
||||
initial={"hidden"}
|
||||
animate={"show"}
|
||||
exit={"hidden"}
|
||||
>
|
||||
<Finish></Finish>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
{!isDone && (
|
||||
<>
|
||||
<div className="line line-calendar"></div>
|
||||
<button className="button button-type-small">
|
||||
На сайт жилого комплекса
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,30 @@
|
||||
.button-plan {
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.plan-title-plan {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.timepicker-cell {
|
||||
padding: 9px 18px;
|
||||
width: 72px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.timepicker-cell:hover {
|
||||
background: #23242a;
|
||||
}
|
||||
|
||||
.timepicker-table {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.timepicker-table:nth-child(even) {
|
||||
background: #1c1d21;
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
import chevron from "images/icons/ChevronLeft.svg";
|
||||
import "./TimepickerComponent.css";
|
||||
|
||||
import { planSlice } from "store/reducers/planSlice";
|
||||
import { useAppDispatch, useAppSelector } from "hooks/redux";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export const TimepickerComponent: React.FC<any> = ({ time }) => {
|
||||
const dispatch = useAppDispatch();
|
||||
const { handleNavigation, handleTimeValue } = planSlice.actions;
|
||||
|
||||
const [timePicker, settimePicker] = useState([]);
|
||||
const startTime = time.clone().hours(8).minutes(0);
|
||||
const endTime = time.clone().hours(19).minutes(0);
|
||||
|
||||
useEffect(() => {
|
||||
const temp = startTime.clone().subtract("30", "minute");
|
||||
const a = [];
|
||||
while (temp.isBefore(endTime, "minute")) {
|
||||
a.push(
|
||||
Array(8)
|
||||
.fill(0)
|
||||
.map(() => temp.add(30, "minutes").clone())
|
||||
);
|
||||
}
|
||||
settimePicker(a);
|
||||
}, [time]);
|
||||
|
||||
const handleValue = (time: moment.Moment) => {
|
||||
dispatch(
|
||||
handleNavigation({
|
||||
isDone: false,
|
||||
isCalendar: false,
|
||||
isTimepicker: false,
|
||||
isForm: true,
|
||||
})
|
||||
);
|
||||
dispatch(handleTimeValue(time));
|
||||
};
|
||||
|
||||
const handleReturn = () => {
|
||||
dispatch(
|
||||
handleNavigation({
|
||||
isDone: false,
|
||||
isCalendar: true,
|
||||
isTimepicker: false,
|
||||
isForm: false,
|
||||
})
|
||||
);
|
||||
};
|
||||
return (
|
||||
<div className="calendar-container">
|
||||
<h3 className="plan-title plan-title-plan">Выберите время.</h3>
|
||||
<button
|
||||
onClick={() => handleReturn()}
|
||||
style={{ width: "120px", padding: "4px 16px 4px 4px", height: "32px" }}
|
||||
className="button button-type-small button-plan"
|
||||
>
|
||||
<img src={chevron}></img>
|
||||
Выбор даты
|
||||
</button>
|
||||
<div className="calendar">
|
||||
<div className="calendar-header">
|
||||
<span className="calendar-date">{time.format("DD MMMM")}</span>
|
||||
</div>
|
||||
{timePicker.map((day, i) => (
|
||||
<div key={i} className="timepicker-table">
|
||||
{day.map((time: any, i: number) => (
|
||||
<div
|
||||
onClick={() => handleValue(time)}
|
||||
key={i}
|
||||
className="calendar-cell timepicker-cell"
|
||||
>
|
||||
{time.format("LT")}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,42 @@
|
||||
import control from "images/icons/control.svg";
|
||||
import controlOff from "images/icons/HandOff.svg";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { Button } from "components/shared/Button/Button";
|
||||
|
||||
|
||||
export const ControlButton: React.FC<any> = ({ onClick, isSidebarWide }) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [active, setActive] = useState(false);
|
||||
const [button, setButton] = useState({
|
||||
icon: control,
|
||||
active: "request-control-btn",
|
||||
inactive: "request-control-btn-disable",
|
||||
type: "control",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setButton({ ...button, icon: active ? control : controlOff });
|
||||
}, [active]);
|
||||
|
||||
function handleClick() {
|
||||
onClick();
|
||||
setActive((prev) => !prev);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={handleClick}
|
||||
className="toolbar-button-area"
|
||||
>
|
||||
<Button
|
||||
isSidebarWide={isSidebarWide}
|
||||
button={button}
|
||||
active={active}
|
||||
></Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
+5
-6
@@ -1,9 +1,8 @@
|
||||
import { ControlButton } from "../ui/ControlButton/ControlButton";
|
||||
import { MicroButton } from "../ui/MicroButton/MicroButton";
|
||||
import { ShareButton } from "../ui/ShareButton/ShareButton";
|
||||
import { LanguageButton } from "../ui/LanguageButton/LanguageButton";
|
||||
import { ExitButton } from "../ui/ExitButton/ExitButton";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { ControlButton } from "components/pages/Stream/ControlButton/ControlButton";
|
||||
import { MicroButton } from "components/pages/Stream/MicroButton/MicroButton";
|
||||
import { ShareButton } from "components/pages/Stream/ShareButton/ShareButton";
|
||||
import { LanguageButton } from "components/pages/Stream/LanguageButton/LanguageButton";
|
||||
import { ExitButton } from "components/pages/Stream/ExitButton/ExitButton";
|
||||
|
||||
export const ControlPanel: React.FC<any> = ({
|
||||
handleOpenSharePopup,
|
||||
+13
-9
@@ -1,7 +1,8 @@
|
||||
import exit from "images/icons/exit.svg";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Button } from "../button/button";
|
||||
import exit from "../../../images/icons/exit.svg";
|
||||
import { THOC } from "../../../utils/types";
|
||||
|
||||
import { Button } from "components/shared/Button/Button";
|
||||
|
||||
export const ExitButton: React.FC<any> = ({ onClick, isSidebarWide }) => {
|
||||
const [active, setActive] = useState(false);
|
||||
@@ -13,14 +14,17 @@ export const ExitButton: React.FC<any> = ({ onClick, isSidebarWide }) => {
|
||||
};
|
||||
|
||||
function handleClick() {
|
||||
console.log("click");
|
||||
setActive((prev) => !prev);
|
||||
onClick()
|
||||
onClick();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="toolbar-button-area">
|
||||
<Button isSidebarWide={isSidebarWide} button={button} onClick={handleClick}></Button>
|
||||
</div>
|
||||
<button
|
||||
tabIndex={-1}
|
||||
onClick={handleClick}
|
||||
className="toolbar-button-area"
|
||||
>
|
||||
<Button isSidebarWide={isSidebarWide} button={button}></Button>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,57 @@
|
||||
import fullscreen from "images/icons/fullscreen.svg";
|
||||
import fullscreenOff from "images/icons/fullscreenOff.svg";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { Button } from "components/shared/Button/Button";
|
||||
|
||||
export const FullscreenButton: React.FC<any> = ({ isSidebarWide }) => {
|
||||
|
||||
const [active, setActive] = useState(Boolean(document.fullscreenElement));
|
||||
const [button, setButton] = useState({
|
||||
icon: fullscreen,
|
||||
inactive: "fullscreen-control-btn",
|
||||
active: "fullscreen-control-btn-active",
|
||||
type: "fullscreen",
|
||||
});
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
const handleClick = () => {
|
||||
setActive(Boolean(document.fullscreenElement));
|
||||
if (!document.fullscreenElement) {
|
||||
document.body.requestFullscreen();
|
||||
} else {
|
||||
document.exitFullscreen();
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setButton({
|
||||
icon: !active ? fullscreen : fullscreenOff,
|
||||
inactive: "fullscreen-control-btn",
|
||||
active: "fullscreen-control-btn-active",
|
||||
type: "fullscreen",
|
||||
});
|
||||
}, [active]);
|
||||
|
||||
useEffect(() => {
|
||||
const onFullscreenChange = () => {
|
||||
setActive(Boolean(document.fullscreenElement));
|
||||
};
|
||||
document.addEventListener("fullscreenchange", onFullscreenChange);
|
||||
return () =>
|
||||
document.removeEventListener("fullscreenchange", onFullscreenChange);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div tabIndex={-1} onClick={handleClick} className="toolbar-button-area">
|
||||
<Button
|
||||
isSidebarWide={isSidebarWide}
|
||||
button={button}
|
||||
active={active}
|
||||
></Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
+5
-4
@@ -1,8 +1,10 @@
|
||||
import microOn from "images/icons/MicroOn.svg";
|
||||
|
||||
import { useState } from "react";
|
||||
import { LanguagePopup } from "../../LanguagePopup/LanguagePopup";
|
||||
import { Button } from "../button/button";
|
||||
import microOn from "../../../images/icons/MicroOn.svg";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
|
||||
import { Button } from "components/shared/Button/Button";
|
||||
|
||||
const container = {
|
||||
hidden: {
|
||||
opacity: 0,
|
||||
@@ -45,7 +47,6 @@ export const LanguageButton: React.FC<any> = ({ hover, setHover, isSidebarWide }
|
||||
animate={"show"}
|
||||
exit={"hidden"}
|
||||
>
|
||||
<LanguagePopup setOpen={setOpen}></LanguagePopup>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
@@ -0,0 +1,46 @@
|
||||
import microOn from "images/icons/MicroOn.svg";
|
||||
import microOff from "images/icons/MicroOff.svg";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { Button } from "components/shared/Button/Button";
|
||||
|
||||
export const MicroButton: React.FC<any> = ({
|
||||
onClick,
|
||||
isMuted,
|
||||
isSidebarWide,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const [button, setButton] = useState({
|
||||
icon: microOn,
|
||||
active: "mute-control-btn",
|
||||
inactive: "mute-control-btn-disable",
|
||||
type: "microphone",
|
||||
});
|
||||
|
||||
const [active, setActive] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setButton({ ...button, icon: active ? microOn : microOff });
|
||||
}, [active]);
|
||||
|
||||
function handleClick() {
|
||||
onClick();
|
||||
setActive((prev) => !prev);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
tabIndex={-1}
|
||||
onClick={handleClick}
|
||||
className="toolbar-button-area"
|
||||
>
|
||||
<Button
|
||||
isSidebarWide={isSidebarWide}
|
||||
button={button}
|
||||
active={isMuted}
|
||||
></Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
+12
-9
@@ -1,10 +1,12 @@
|
||||
import "./playerStyles.css";
|
||||
import { useHistory, useParams } from "react-router-dom";
|
||||
import "./PlayerStyles.css";
|
||||
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";
|
||||
import { useHistory, useParams } from "react-router-dom";
|
||||
|
||||
import { Sidebar } from "components/pages/Stream/Sidebar/Sidebar";
|
||||
|
||||
import { connectSession } from "store/reducers/ActionCreator";
|
||||
import { useAppDispatch, useAppSelector } from "hooks/redux";
|
||||
import { sessionSlice } from "store/reducers/sessionSlice";
|
||||
|
||||
type link = {
|
||||
id: string;
|
||||
@@ -14,13 +16,12 @@ export const PlayerComponent: React.FC<any> = ({ closeStream }) => {
|
||||
const { id } = useParams<link>();
|
||||
const dispatch = useAppDispatch();
|
||||
const { cleanErrors } = sessionSlice.actions;
|
||||
const history = useHistory()
|
||||
const history = useHistory();
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(connectSession(id)).then((res: any) => {
|
||||
if (res.error) {
|
||||
alert(res.payload);
|
||||
history.push('/')
|
||||
}
|
||||
});
|
||||
return () => {
|
||||
@@ -33,11 +34,13 @@ export const PlayerComponent: React.FC<any> = ({ closeStream }) => {
|
||||
return (
|
||||
<>
|
||||
<iframe
|
||||
id='player'
|
||||
id="player"
|
||||
onFocus={() => console.log('focus')}
|
||||
onBlur={(e) => e.target.focus()} /// element loosing focus and keyboard input doesn't work
|
||||
src={url}
|
||||
className={"player playerOn"}
|
||||
security={""}
|
||||
allowFullScreen={true}
|
||||
></iframe>
|
||||
<Sidebar closeStream={closeStream}></Sidebar>
|
||||
</>
|
||||
@@ -0,0 +1,50 @@
|
||||
.exit-popup-container {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background-color: #333333;
|
||||
color: #ffffff;
|
||||
padding: 40px;
|
||||
top: 50%;
|
||||
width: 400px;
|
||||
left: 50%;
|
||||
background: #151619;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
/* gap: 24px; */
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.exit-popup-button-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.exit-popup-button {
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
color: white;
|
||||
height: 60px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.exit-popup-button_confirm {
|
||||
background: #567ece;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.exit-popup-button_finish {
|
||||
background: #404040;
|
||||
}
|
||||
|
||||
|
||||
.exit-popup-button_confirm:hover {
|
||||
opacity: 0.7;
|
||||
transition: 0.3s;
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import "../PopupShare/sharePopup.css";
|
||||
import "./PopupExit.css";
|
||||
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { TSidebarPopup } from "utils/types";
|
||||
|
||||
export const PopupExit: React.FC<TSidebarPopup> = ({ setClose, onExit }) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="popup exit-popup-container popup">
|
||||
<div className="popup-position-container">
|
||||
<div className="mobile-users-part-header">
|
||||
<span className="mobile-users-part-header-title exit-popup-button-title">
|
||||
{t("popup-control-exit-title")}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setClose()}
|
||||
className="mobile-users-part-header-close-button"
|
||||
></button>
|
||||
</div>
|
||||
<div className="exit-popup-button-container">
|
||||
<button onClick={() => setClose()} className="button button-primary">
|
||||
{t("popup-control-no")}
|
||||
</button>
|
||||
<button
|
||||
style={{ height: "48px" }}
|
||||
onClick={() => onExit?.()}
|
||||
className=" button button-secondary"
|
||||
>
|
||||
{t("popup-control-yes")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
+16
-7
@@ -1,5 +1,7 @@
|
||||
import "./sharePopup.css";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export const PopupShare: React.FC<any> = ({ setClose }) => {
|
||||
@@ -20,7 +22,7 @@ export const PopupShare: React.FC<any> = ({ setClose }) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="share-popup-container">
|
||||
<div className="share-popup-container popup">
|
||||
<div className="mobile-users-part-header share-header-popup">
|
||||
<span className="mobile-users-part-header-title">
|
||||
{t("popup-control-invite-title")}
|
||||
@@ -41,12 +43,19 @@ export const PopupShare: React.FC<any> = ({ setClose }) => {
|
||||
></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>
|
||||
{!copy ? (
|
||||
<button onClick={copyLink} className="button button-primary ">
|
||||
<span className="share-popup-copy-button-icon"></span>
|
||||
<span className="">
|
||||
{copy ? t("popup-control-btn-active") : t("popup-control-btn")}
|
||||
</span>
|
||||
</button>
|
||||
) : (
|
||||
<button onClick={copyLink} className="button button-teritary">
|
||||
<span className="share-popup-copied-button-icon"></span>
|
||||
<span className="">{t("popup-control-btn-active")}</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 12L10 17L19 8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 211 B |
@@ -0,0 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 7H10C9.44772 7 9 7.44772 9 8V20C9 20.5523 9.44772 21 10 21H18C18.5523 21 19 20.5523 19 20V8C19 7.44772 18.5523 7 18 7Z" fill="white"/>
|
||||
<path d="M5 5V17C5 17.5523 5.44772 18 6 18C6.55228 18 7 17.5523 7 17V6C7 5.44772 7.44772 5 8 5H15C15.5523 5 16 4.55228 16 4C16 3.44772 15.5523 3 15 3H7C5.89543 3 5 3.89543 5 5Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 444 B |
@@ -0,0 +1,162 @@
|
||||
.share-popup-container {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
background: #151619;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 4px;
|
||||
width: 400px;
|
||||
color: #ffffff;
|
||||
padding: 40px;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.share-header-popup {
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.border-line {
|
||||
width: 80%;
|
||||
height: 1px;
|
||||
background-color: #404040;
|
||||
}
|
||||
|
||||
.share-popup-data-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.share-popup-data-title {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.share-popup-data-input {
|
||||
background: #23242a;
|
||||
|
||||
border: 1px solid #23242a;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.share-popup-copied-button-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: url("copiedIcon.svg") 50% 50% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.button-copy {
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
padding: 12px 24px 12px 16px;
|
||||
}
|
||||
|
||||
.mobile-users-part-header-title {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 125%;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.popup-position-container {
|
||||
position: relative;
|
||||
}
|
||||
.mobile-users-part-header-close-button {
|
||||
top: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
background: url(images/icons/close.svg) 50% 50% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.share-popup-data-input.code {
|
||||
height: 76px;
|
||||
font-weight: 300;
|
||||
font-size: 38px;
|
||||
line-height: 46px;
|
||||
letter-spacing: 0.3em;
|
||||
text-align: center;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.share-popup-data-input.href {
|
||||
height: 48px;
|
||||
padding: 14.5px 16px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
}
|
||||
|
||||
.share-popup-copy-button {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
width: 176px;
|
||||
height: 48px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 12px;
|
||||
background-color: #567ece;
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
gap: 4px;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.share-popup-copy-button:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.share-popup-copy-button.copied {
|
||||
background-color: #219653;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.share-popup-copy-button-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: url("copyIcon.svg") 50% 50% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.show-share-popup-enter {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.show-share-popup-enter-active {
|
||||
opacity: 1;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.show-share-popup-exit {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.show-share-popup-exit-active {
|
||||
opacity: 0;
|
||||
transition: 0.3s;
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import share from "images/icons/Share.svg";
|
||||
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { Button } from "components/shared/Button/Button";
|
||||
|
||||
export const ShareButton: React.FC<any> = ({ onClick, isSidebarWide }) => {
|
||||
const button = {
|
||||
icon: share,
|
||||
active: "share-contro-btn",
|
||||
inactive: "share-contro-btn",
|
||||
type: "share",
|
||||
};
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
function handleClick() {
|
||||
onClick();
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
tabIndex={-1}
|
||||
onClick={handleClick}
|
||||
className="toolbar-button-area"
|
||||
>
|
||||
<Button isSidebarWide={isSidebarWide} button={button}></Button>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
+32
-55
@@ -1,15 +1,12 @@
|
||||
.toolbar-container {
|
||||
user-select: none;
|
||||
display: flex;
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
/* width: 74px; */
|
||||
width: 64px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
/* transform: translateX(-60px); */
|
||||
|
||||
border-right: 1px solid #4f4f4f;
|
||||
background: #333333;
|
||||
padding: 10px;
|
||||
background: #1c1d21;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -18,7 +15,6 @@
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
|
||||
.toolbar-confirm-block {
|
||||
@@ -29,14 +25,13 @@
|
||||
.mobile-users-part-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 24px;
|
||||
align-items: flex-start;
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.toolbar-field {
|
||||
background: #333333;
|
||||
overflow: hidden;
|
||||
padding: 14px 15px;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@@ -46,11 +41,23 @@
|
||||
}
|
||||
|
||||
.toolbar-field-part {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.toolbar-button-caption {
|
||||
color: #c5c7ce;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 140%;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toolbar-button-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -98,12 +105,13 @@
|
||||
}
|
||||
|
||||
.toolbar-button-area {
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
/* background-color: #333333; */
|
||||
/* border-top-left-radius: 50px solid #4f4f4f; */
|
||||
padding: 8px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.toolbar-button-area.hidden {
|
||||
@@ -142,17 +150,12 @@
|
||||
}
|
||||
|
||||
.toolbar-button {
|
||||
background-color: #4f4f4f;
|
||||
background: transparent;
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
@@ -165,28 +168,9 @@
|
||||
background: #567ece;
|
||||
}
|
||||
|
||||
.user-icon {
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
background-size: 100% 100%;
|
||||
background-color: #4f4f4f;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
justify-content: center;
|
||||
line-height: 17px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.toolbar-button_exit {
|
||||
background: #eb5757;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.language-caption {
|
||||
@@ -196,8 +180,8 @@
|
||||
}
|
||||
|
||||
.toolbar-icon {
|
||||
object-fit: cover;
|
||||
width: 45%;
|
||||
width: 24px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.empty__block {
|
||||
@@ -244,7 +228,7 @@
|
||||
margin-left: 2px;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
left: 126%;
|
||||
height: 24px;
|
||||
top: calc(50% - 12px);
|
||||
/* background-color: #27AE60; */
|
||||
@@ -256,15 +240,15 @@
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
|
||||
.toolbar-button-description-rectangle {
|
||||
/* display: inline-block; */
|
||||
white-space: nowrap;
|
||||
/* flex-shrink: 0; */
|
||||
background-color: #333333;
|
||||
background: #23242a;
|
||||
height: 24px;
|
||||
border-top-right-radius: 50px;
|
||||
border-bottom-right-radius: 50px;
|
||||
border: 1px solid #4f4f4f;
|
||||
border-left: none;
|
||||
color: white;
|
||||
display: flex;
|
||||
@@ -311,9 +295,7 @@
|
||||
background-color: #4f4f4f;
|
||||
}
|
||||
|
||||
.toolbar-button.user {
|
||||
background: url("icons/userIcon.svg") 50% 50% no-repeat;
|
||||
}
|
||||
|
||||
|
||||
.toolbar-button.admin {
|
||||
background-color: #2f80ed;
|
||||
@@ -594,13 +576,8 @@
|
||||
|
||||
@media screen and (max-height: 700px) {
|
||||
.toolbar-field {
|
||||
padding: 20px 14px;
|
||||
}
|
||||
|
||||
.toolbar-button {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.toolbar-button:hover {
|
||||
opacity: 1;
|
||||
+63
-28
@@ -1,14 +1,20 @@
|
||||
import "./toolbar.css";
|
||||
import "./Sidebar.css";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { UserList } from "../UserList/UserList";
|
||||
import { FullscreenButton } from "../ui/FullscreenButton/FullscreenButton";
|
||||
import { PopupShare } from "../PopupShare/PopupShare";
|
||||
import { ExitPopup } from "../ExitPopup/ExitPopup";
|
||||
import { ControlPanel } from "../ControlPanel/ControlPanel";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { sidebarVariants, popupAnimation, wideSidebarVariants } from "../../utils/animationProps";
|
||||
import { WideSidebarButton } from "../ui/WideSidebarButton/WideSidebarButton";
|
||||
|
||||
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 }) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
@@ -17,8 +23,10 @@ export const Sidebar: React.FC<any> = ({ closeStream }) => {
|
||||
popup2: false,
|
||||
});
|
||||
|
||||
const isAdmin = true;
|
||||
|
||||
const [selected, setSelected] = useState(false);
|
||||
const [wideSidebar, setWideSidebar] = useState(false)
|
||||
const [wideSidebar, setWideSidebar] = useState(false);
|
||||
|
||||
const [isMuted, setMuted] = useState(true);
|
||||
|
||||
@@ -50,11 +58,9 @@ export const Sidebar: React.FC<any> = ({ closeStream }) => {
|
||||
function closeSideBar() {
|
||||
setSelected(false);
|
||||
setOpen(false);
|
||||
setWideSidebar(false)
|
||||
setWideSidebar(false);
|
||||
}
|
||||
|
||||
|
||||
|
||||
useEffect(() => () => unmountComponent(), []);
|
||||
|
||||
function unmountComponent() {
|
||||
@@ -65,24 +71,42 @@ export const Sidebar: React.FC<any> = ({ closeStream }) => {
|
||||
});
|
||||
}
|
||||
|
||||
console.log(wideSidebar, 'wide', open, 'open')
|
||||
const setAnimation = () => {
|
||||
if (isAdmin) return wideSidebarAdminVariants;
|
||||
else {
|
||||
return wideSidebarVariants;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<motion.div
|
||||
initial={false}
|
||||
animate={open ? "open" : "closed"}
|
||||
variants={wideSidebar ? wideSidebarVariants : sidebarVariants}
|
||||
variants={wideSidebar ? setAnimation() : sidebarVariants}
|
||||
className="toolbar-container"
|
||||
>
|
||||
<div style={wideSidebar ? {width: "220px"} : {width: "60px"}} className="toolbar-field">
|
||||
<div
|
||||
style={wideSidebar ? { overflow: "hidden" } : { overflow: "visible" }}
|
||||
className="toolbar-field"
|
||||
>
|
||||
<div className="toolbar-field-part">
|
||||
<FullscreenButton isSidebarWide={wideSidebar}
|
||||
> </FullscreenButton>
|
||||
<UserList isSidebarWide={wideSidebar} /// this is for disable showhing button's caption
|
||||
selected={selected} setSelected={setSelected}></UserList>
|
||||
<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
|
||||
onHoverStart={() => setWideSidebar(true)}
|
||||
className="toolbar-field-part"
|
||||
>
|
||||
<WideSidebarButton
|
||||
isSidebarWide={wideSidebar}
|
||||
close={closeSideBar}
|
||||
></WideSidebarButton>
|
||||
</motion.div>
|
||||
<ControlPanel
|
||||
isSidebarWide={wideSidebar}
|
||||
@@ -92,9 +116,20 @@ export const Sidebar: React.FC<any> = ({ closeStream }) => {
|
||||
handleOpenExitPopup={handleOpenExitPopup}
|
||||
></ControlPanel>
|
||||
</div>
|
||||
{!open && <motion.div onClick={() => setOpen(true)} className="toolbar-open-button">
|
||||
<span className="toolbar-open-button-icon"></span>
|
||||
</motion.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 && (
|
||||
@@ -117,13 +152,13 @@ export const Sidebar: React.FC<any> = ({ closeStream }) => {
|
||||
animate={"show"}
|
||||
exit={"hidden"}
|
||||
>
|
||||
<ExitPopup
|
||||
<PopupExit
|
||||
onExit={closeStream}
|
||||
setClose={handleClosePopups}
|
||||
></ExitPopup>
|
||||
></PopupExit>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
Before Width: | Height: | Size: 284 B After Width: | Height: | Size: 284 B |
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 233 B After Width: | Height: | Size: 233 B |
|
Before Width: | Height: | Size: 921 B After Width: | Height: | Size: 921 B |
|
Before Width: | Height: | Size: 793 B After Width: | Height: | Size: 793 B |
|
Before Width: | Height: | Size: 1018 B After Width: | Height: | Size: 1018 B |
|
Before Width: | Height: | Size: 430 B After Width: | Height: | Size: 430 B |
|
Before Width: | Height: | Size: 495 B After Width: | Height: | Size: 495 B |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 581 B After Width: | Height: | Size: 581 B |
|
Before Width: | Height: | Size: 554 B After Width: | Height: | Size: 554 B |
|
Before Width: | Height: | Size: 485 B After Width: | Height: | Size: 485 B |
|
Before Width: | Height: | Size: 432 B After Width: | Height: | Size: 432 B |
+1
-1
@@ -3,6 +3,6 @@
|
||||
<path d="M17.5 -2C17.5 -2.18939 17.393 -2.36252 17.2236 -2.44721C17.0542 -2.53191 16.8515 -2.51363 16.7 -2.4L-1.16667 11C-2.5 12 -2.5 14 -1.16667 15L16.7 28.4C16.8515 28.5136 17.0542 28.5319 17.2236 28.4472C17.393 28.3625 17.5 28.1894 17.5 28V-2Z" fill="#333333" stroke="#4F4F4F" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_688_6251)">
|
||||
<path d="M18.5 1C18.5 0.815602 18.3985 0.646172 18.2359 0.559163C18.0734 0.472153 17.8761 0.481689 17.7227 0.583975L2.2188 10.9199C0.734468 11.9094 0.734468 14.0906 2.2188 15.0801L17.7227 25.416C17.8761 25.5183 18.0734 25.5278 18.2359 25.4408C18.3985 25.3538 18.5 25.1844 18.5 25V1Z" fill="#333333" stroke="#4F4F4F" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M18.5 1C18.5 0.815602 18.3985 0.646172 18.2359 0.559163C18.0734 0.472153 17.8761 0.481689 17.7227 0.583975L2.2188 10.9199C0.734468 11.9094 0.734468 14.0906 2.2188 15.0801L17.7227 25.416C17.8761 25.5183 18.0734 25.5278 18.2359 25.4408C18.3985 25.3538 18.5 25.1844 18.5 25V1Z" fill="#23242A" stroke="#23242A" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 957 B After Width: | Height: | Size: 957 B |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 529 B After Width: | Height: | Size: 529 B |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 671 B After Width: | Height: | Size: 671 B |
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 5.7 KiB |
+5
-5
@@ -1,7 +1,7 @@
|
||||
<svg width="26" height="130" viewBox="0 0 26 130" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 0.5H0.5V1V129V129.5H1H4.69231H4.96719L5.11447 129.268L23.8655 99.7209C24.9331 98.0386 25.5 96.0872 25.5 94.0947V35.9053C25.5 33.9128 24.9331 31.9614 23.8655 30.2791L5.11447 0.732088L4.96719 0.5H4.69231H1Z" stroke="#4F4F4F"/>
|
||||
<path d="M0 0H3.69231L22.4805 30.0683C23.4735 31.6574 24 33.4935 24 35.3674V94.6326C24 96.5064 23.4735 98.3426 22.4805 99.9317L3.69231 130H0V0Z" fill="#333333"/>
|
||||
<path d="M1 1H4.69231L23.4433 30.547C24.4601 32.1492 25 34.0076 25 35.9053V94.0947C25 95.9924 24.4601 97.8508 23.4433 99.453L4.69231 129H1V1Z" fill="#333333"/>
|
||||
<rect x="1" width="4" height="2" fill="#333333"/>
|
||||
<rect x="1" y="128" width="4" height="2" fill="#333333"/>
|
||||
<path d="M1 0.5H0.5V1V129V129.5H1H4.69231H4.96719L5.11447 129.268L23.8655 99.7209C24.9331 98.0386 25.5 96.0872 25.5 94.0947V35.9053C25.5 33.9128 24.9331 31.9614 23.8655 30.2791L5.11447 0.732088L4.96719 0.5H4.69231H1Z" stroke="#1C1D21"/>
|
||||
<path d="M0 0H3.69231L22.4805 30.0683C23.4735 31.6574 24 33.4935 24 35.3674V94.6326C24 96.5064 23.4735 98.3426 22.4805 99.9317L3.69231 130H0V0Z" fill="#1C1D21"/>
|
||||
<path d="M1 1H4.69231L23.4433 30.547C24.4601 32.1492 25 34.0076 25 35.9053V94.0947C25 95.9924 24.4601 97.8508 23.4433 99.453L4.69231 129H1V1Z" fill="#1C1D21"/>
|
||||
<rect x="1" width="4" height="2" fill="#1C1D21"/>
|
||||
<rect x="1" y="128" width="4" height="2" fill="#1C1D21"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 772 B After Width: | Height: | Size: 772 B |
|
Before Width: | Height: | Size: 610 B After Width: | Height: | Size: 610 B |
|
Before Width: | Height: | Size: 610 B After Width: | Height: | Size: 610 B |
|
Before Width: | Height: | Size: 265 B After Width: | Height: | Size: 265 B |
|
Before Width: | Height: | Size: 284 B After Width: | Height: | Size: 284 B |
@@ -0,0 +1,78 @@
|
||||
.user-container {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 140%;
|
||||
color: #c5c7ce;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.you-caption {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 130%;
|
||||
/* identical to box height, or 16px */
|
||||
|
||||
/* Button_3 */
|
||||
|
||||
color: #73788c;
|
||||
}
|
||||
|
||||
.user-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.user-wrapper:nth-child(1) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.user-button-container {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.control-circle {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #798fff;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.user-control-caption {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 130%;
|
||||
align-items: center;
|
||||
color: #798fff;
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
import "./User.css";
|
||||
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
import userPic from "images/icons/Person.svg";
|
||||
import chevronDown from "images/icons/ChevronDown.svg";
|
||||
import control from "images/icons/control.svg";
|
||||
import controlOff from "images/icons/HandOff.svg";
|
||||
import microOn from "images/icons/MicroOn.svg";
|
||||
import microOff from "images/icons/MicroOff.svg";
|
||||
|
||||
import {
|
||||
popupAnimation,
|
||||
userMenuAnimation,
|
||||
animationButton,
|
||||
transition,
|
||||
iconAnimation,
|
||||
} from "utils/animationProps";
|
||||
|
||||
export const User: React.FC<any> = ({
|
||||
isAdmin,
|
||||
isSidebarWide,
|
||||
closeSidebar,
|
||||
}) => {
|
||||
const [hover, setHover] = useState(false);
|
||||
const [expand, setExpand] = useState(false);
|
||||
const [mute, setMute] = useState(true);
|
||||
const [isControl, setControl] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setExpand(false);
|
||||
}, [closeSidebar]);
|
||||
|
||||
const expandMenu = () => {
|
||||
if (isSidebarWide) {
|
||||
if (isAdmin) setExpand((prev) => !prev);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<motion.div
|
||||
variants={userMenuAnimation}
|
||||
animate={expand ? "open" : "closed"}
|
||||
className="user-wrapper"
|
||||
>
|
||||
<div onClick={expandMenu} className="user-container">
|
||||
<div className="user">
|
||||
<motion.div
|
||||
onHoverStart={() => setHover(true)}
|
||||
onHoverEnd={() => setHover(false)}
|
||||
className="icon-container"
|
||||
>
|
||||
<img
|
||||
alt="иконка пользователя"
|
||||
className="user-icon"
|
||||
src={userPic}
|
||||
></img>
|
||||
</motion.div>
|
||||
<motion.span
|
||||
initial={false}
|
||||
variants={animationButton}
|
||||
animate={isSidebarWide ? "show" : "hidden"}
|
||||
className="user-name"
|
||||
>
|
||||
Пользователь
|
||||
</motion.span>
|
||||
</div>
|
||||
{isSidebarWide && (
|
||||
<AnimatePresence>
|
||||
{!isControl && (
|
||||
<motion.div
|
||||
variants={popupAnimation}
|
||||
initial={"hidden"}
|
||||
animate={"show"}
|
||||
exit={"hidden"}
|
||||
className="user-control-caption"
|
||||
>
|
||||
<div className="control-circle"></div>
|
||||
<span className="user-control-caption">Управление</span>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
)}
|
||||
{isAdmin && (
|
||||
<motion.div
|
||||
initial={false}
|
||||
variants={animationButton}
|
||||
animate={isSidebarWide ? "show" : "hidden"}
|
||||
className="icon-container"
|
||||
>
|
||||
<motion.img
|
||||
initial={false}
|
||||
transition={transition}
|
||||
variants={iconAnimation}
|
||||
animate={expand ? "open" : "closed"}
|
||||
src={chevronDown}
|
||||
className="arrow-caption"
|
||||
></motion.img>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
{expand && (
|
||||
<AnimatePresence>
|
||||
<motion.div
|
||||
variants={popupAnimation}
|
||||
initial={"hidden"}
|
||||
animate={"show"}
|
||||
exit={"hidden"}
|
||||
className="user-button-container"
|
||||
>
|
||||
<div
|
||||
onClick={() => setControl((prev) => !prev)}
|
||||
className="button button-secondary"
|
||||
>
|
||||
<img src={isControl ? control : controlOff}></img>
|
||||
<span>
|
||||
{isControl ? "Передать управление" : "Вернуть управление"}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
style={{width: "40px", padding: "16px"}}
|
||||
onClick={() => setMute((prev) => !prev)}
|
||||
className="button button-teritary"
|
||||
>
|
||||
<img
|
||||
alt="иконка звук выкл"
|
||||
src={mute ? microOn : microOff}
|
||||
className="mic"
|
||||
></img>
|
||||
</div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
)}
|
||||
</motion.div>
|
||||
<AnimatePresence initial={false}>
|
||||
{!isSidebarWide && hover && (
|
||||
<motion.div
|
||||
variants={animationButton}
|
||||
initial={"hidden"}
|
||||
animate={"show"}
|
||||
exit={"hidden"}
|
||||
className="toolbar-button-description-container toolbar-button-description-user"
|
||||
>
|
||||
<span className="toolbar-button-description-triangle"></span>
|
||||
<span className="toolbar-button-description-rectangle">
|
||||
Пользователь
|
||||
</span>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,10 @@
|
||||
import { User } from "components/pages/Stream/User/User";
|
||||
|
||||
export const UserList: React.FC<any> = ({ isSidebarWide, isAdmin, closeSidebar }) => {
|
||||
return (
|
||||
<div className="toolbar-field-part">
|
||||
<User closeSidebar={closeSidebar} isAdmin={isAdmin} isSidebarWide={isSidebarWide}></User>
|
||||
<div className="toolbar-button-container-border-line"></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user