ui updating: in progress
This commit is contained in:
DmitriyB
@@ -1,9 +1,9 @@
|
||||
{
|
||||
"demo-title": "Available demonstrations",
|
||||
"popup-main-title": "Start new demonstration",
|
||||
"popup-main-title": "Connect",
|
||||
"popup-main-caption": "Connect to an existing one",
|
||||
"popup-main-select": "Select residential complex",
|
||||
"popup-main-btn-start": "Start",
|
||||
"popup-main-btn-start": "Connect",
|
||||
"popup-main-btn-connect": "Connect",
|
||||
"popup-connect-title": "Connection code",
|
||||
"popup-connect-btn-mode": "Select demonstration mode",
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
{
|
||||
"demo-title": "Доступные демонстрации",
|
||||
"popup-main-title": "Начать новую демонстрацию",
|
||||
"popup-main-title": "Подключиться",
|
||||
"popup-main-caption": "Подключиться к существующией",
|
||||
"popup-main-select": "Выбор жилого комплекса",
|
||||
"popup-main-btn-start": "Начать",
|
||||
"popup-main-btn-start": "Подключиться",
|
||||
"popup-main-btn-connect": "Подключиться",
|
||||
"popup-connect-title": "Код подключения к демонстрации",
|
||||
"popup-connect-btn-mode": "Выбор способа демонстрации",
|
||||
|
||||
+73
-47
@@ -1,70 +1,96 @@
|
||||
.background {
|
||||
background-image: url(./images/background.png);
|
||||
background: #151619;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.blur {
|
||||
backdrop-filter: blur(12px);
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.content__container {
|
||||
height: 100vh;
|
||||
width: 400px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 50%; /* position the top edge of the element at the middle of the parent */
|
||||
left: 50%; /* position the left edge of the element at the middle of the parent */
|
||||
|
||||
transform: translate(-50%, -50%); /* This is a shorthand of
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
border-width: 0px 2px;
|
||||
border-style: solid;
|
||||
border-color: #23242A;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
/* This is a shorthand of */
|
||||
|
||||
}
|
||||
|
||||
.content__player {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
||||
.card-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.content__container_off {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 639px) {
|
||||
.content__container {
|
||||
display: block;
|
||||
position: static;
|
||||
}
|
||||
|
||||
.background {
|
||||
background-image: none;
|
||||
background-color: #262626;
|
||||
}
|
||||
|
||||
.blur {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.demos__tittle {
|
||||
margin: 0;
|
||||
.card-title {
|
||||
margin: 28px 0 40px 0;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 48px;
|
||||
font-size: 38px;
|
||||
line-height: 100%;
|
||||
/* or 40px */
|
||||
margin-bottom: 56px;
|
||||
/* identical to box height, or 38px */
|
||||
|
||||
color: #ffffff;
|
||||
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.demos_container {
|
||||
background: #141414;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 1440px) {
|
||||
.card-title {
|
||||
margin: 22px 0 40px 0;
|
||||
|
||||
}
|
||||
|
||||
.card-container {
|
||||
gap: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1152px) {
|
||||
.card-container {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin: 42px 0 40px 0;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 920px) {
|
||||
|
||||
.card-title {
|
||||
margin: 36px 0 32px 0;
|
||||
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.content__container {
|
||||
width: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
+5
-7
@@ -3,7 +3,7 @@ import { useEffect } from "react";
|
||||
import { Redirect, Route, Switch, useHistory } from "react-router-dom";
|
||||
|
||||
import { Header } from "./components/header/header";
|
||||
import { Demos } from "./components/demos/demos";
|
||||
import { Card } from "./components/demos/Card";
|
||||
import { Main } from "./components/Main/Main";
|
||||
import { PlayerComponent } from "./components/playerComponent/playerComponent";
|
||||
|
||||
@@ -45,14 +45,14 @@ const App: React.FC = () => {
|
||||
<Route exact path="/">
|
||||
<Header></Header>
|
||||
<div className="main">
|
||||
<h3 className="demos__tittle">{t("demo-title")}</h3>
|
||||
<div className="demo__container">
|
||||
<h3 className="card-title">{t("demo-title")}</h3>
|
||||
<div className="card-container">
|
||||
{cards.map((i: ICards) => (
|
||||
<Demos
|
||||
<Card
|
||||
onClick={() => handleCards(i)}
|
||||
key={i._id}
|
||||
item={i}
|
||||
></Demos>
|
||||
></Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
@@ -60,11 +60,9 @@ const App: React.FC = () => {
|
||||
<Route path="/connect-page">
|
||||
{currentCard ? (
|
||||
<div className="background">
|
||||
<div className="blur">
|
||||
<Header></Header>
|
||||
<div className="content__container">
|
||||
<Main></Main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
@@ -9,19 +9,20 @@ export const ControlPanel: React.FC<any> = ({
|
||||
handleOpenSharePopup,
|
||||
handleOpenExitPopup,
|
||||
handleMuteClick,
|
||||
isMuted
|
||||
isMuted,
|
||||
isSidebarWide
|
||||
}) => {
|
||||
|
||||
return (
|
||||
<div className="toolbar-field-part">
|
||||
<div className="toolbar-button-container-border-line"></div>
|
||||
<ControlButton onClick={() => console.log("click!")}></ControlButton>
|
||||
<MicroButton isMuted={isMuted} onClick={handleMuteClick}></MicroButton>
|
||||
<ControlButton isSidebarWide={isSidebarWide} onClick={() => console.log("click!")}></ControlButton>
|
||||
<MicroButton isSidebarWide={isSidebarWide} isMuted={isMuted} onClick={handleMuteClick}></MicroButton>
|
||||
<div className="toolbar-button-container-border-line"></div>
|
||||
<ShareButton onClick={handleOpenSharePopup}></ShareButton>
|
||||
<LanguageButton onClick={() => console.log("click!")}></LanguageButton>
|
||||
<ShareButton isSidebarWide={isSidebarWide} onClick={handleOpenSharePopup}></ShareButton>
|
||||
<LanguageButton isSidebarWide={isSidebarWide} onClick={() => console.log("click!")}></LanguageButton>
|
||||
<div className="toolbar-button-container-border-line"></div>
|
||||
<ExitButton onClick={handleOpenExitPopup}></ExitButton>
|
||||
<ExitButton isSidebarWide={isSidebarWide} onClick={handleOpenExitPopup}></ExitButton>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,107 +1,26 @@
|
||||
.popup__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.popup__title {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
line-height: 130%;
|
||||
/* identical to box height, or 29px */
|
||||
margin: 0;
|
||||
|
||||
/* App/White */
|
||||
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.logo__popup {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
margin-bottom: 48px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.logo__popup_ex {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.popup__input {
|
||||
padding: 5px 0px;
|
||||
border-radius: 12px;
|
||||
background: #404040;
|
||||
height: 76px;
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-size: 38px;
|
||||
line-height: 46px;
|
||||
/* identical to box height */
|
||||
text-align: center;
|
||||
|
||||
letter-spacing: 0.3em;
|
||||
|
||||
/* App/White */
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 639px) {
|
||||
.logo__popup {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.logo__popup_ex {
|
||||
display: block;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
margin-bottom: 24px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.popup__input {
|
||||
height: 48px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.popup__title {
|
||||
font-size: 16px;
|
||||
width: 78%;
|
||||
}
|
||||
|
||||
.popup__content {
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.loader-container {
|
||||
width: 494px;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
padding: 56px;
|
||||
box-sizing: border-box;
|
||||
background-color: #262626;
|
||||
border: 1px solid #404040;
|
||||
border-radius: 32px;
|
||||
padding: 45px 0 51px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 51px;
|
||||
gap: 58px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.loading-logo-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.loading-caption {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
line-height: 130%;
|
||||
/* identical to box height, or 29px */
|
||||
|
||||
text-align: center;
|
||||
|
||||
/* Landing/White */
|
||||
|
||||
color: #ebebeb;
|
||||
font-size: 16px;
|
||||
line-height: 140%;
|
||||
/* or 22px */
|
||||
color: #C5C7CE;
|
||||
}
|
||||
|
||||
.loader {
|
||||
@@ -110,16 +29,15 @@
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
background: conic-gradient(
|
||||
from 135deg at 50% 50%,
|
||||
rgba(255, 255, 255, 0) -6.26deg,
|
||||
#ffffff 314.83deg,
|
||||
rgba(255, 255, 255, 0) 353.74deg,
|
||||
#ffffff 674.83deg
|
||||
);
|
||||
background: conic-gradient(from 135deg at 50% 50%,
|
||||
rgba(255, 255, 255, 0) -6.26deg,
|
||||
#ffffff 314.83deg,
|
||||
rgba(255, 255, 255, 0) 353.74deg,
|
||||
#ffffff 674.83deg);
|
||||
box-sizing: border-box;
|
||||
animation: rotation 1s linear infinite;
|
||||
}
|
||||
|
||||
.loader::after {
|
||||
content: "";
|
||||
box-sizing: border-box;
|
||||
@@ -130,13 +48,15 @@
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
background: #262626;
|
||||
background: #151619;
|
||||
}
|
||||
|
||||
@keyframes rotation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -4,13 +4,16 @@ import loader from "./loader.svg";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export const LoadingPopup: React.FC<any> = ({}) => {
|
||||
export const LoadingPopup: React.FC<any> = ({ logo }) => {
|
||||
const history = useHistory();
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="loader-container">
|
||||
<span className="loading-caption">Пожалуйста подождите</span>
|
||||
<div className="loading-logo-container">
|
||||
<img className="popup-logo" src={logo} alt="лого" />
|
||||
<span className="loading-caption">Пожалуйста подождите</span>
|
||||
</div>
|
||||
<span className="loader"></span>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -50,7 +50,7 @@ export const Main: React.FC = () => {
|
||||
exit={"hidden"}
|
||||
>
|
||||
<PopupConnect
|
||||
isLoading={isLoading}
|
||||
isLoading={true}
|
||||
logo={currentCard.image.logo}
|
||||
onConnect={() => dispatch(createSession(currentCard.title))}
|
||||
></PopupConnect>
|
||||
@@ -64,7 +64,8 @@ export const Main: React.FC = () => {
|
||||
animate={"show"}
|
||||
exit={"hidden"}
|
||||
>
|
||||
<LoadingPopup></LoadingPopup>
|
||||
<LoadingPopup logo={currentCard.image.logo}
|
||||
></LoadingPopup>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
@@ -0,0 +1,190 @@
|
||||
.card {
|
||||
cursor: pointer;
|
||||
width: 460px;
|
||||
background: #1C1D21;
|
||||
border-radius: 4px 0px 0px 4px;
|
||||
|
||||
}
|
||||
|
||||
.card-image {
|
||||
border-radius: 4px;
|
||||
|
||||
width: 100%;
|
||||
height: 364px;
|
||||
min-height: 260px;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
box-sizing: border-box;
|
||||
padding: 20px 24px 32px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 24px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.caption-name {
|
||||
margin: 0;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 125%;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.card-location {
|
||||
margin: 0;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 130%;
|
||||
color: #73788C;
|
||||
}
|
||||
|
||||
.card-description-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
margin: 0;
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
.card-description-second {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 140%;
|
||||
/* or 22px */
|
||||
margin: 0;
|
||||
/* Graff/Gray/5 */
|
||||
|
||||
color: #73788C;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1440px) {
|
||||
.card {
|
||||
width: 384px;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 20px 20px 24px;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.card-description-second {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1152px) {
|
||||
.card {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
height: 260px;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 20px 12px 16px;
|
||||
}
|
||||
|
||||
|
||||
.caption-name {}
|
||||
|
||||
.card-description {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.card-description-second {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 920px) {
|
||||
.card {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 20px 20px 24px;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.card-description-second {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
.card {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 20px 12px 16px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.card-description {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.card-description-second {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import "./Card.css";
|
||||
import "../../styles/styles.css";
|
||||
import iconButton from "./iconButton.svg";
|
||||
import { useAppSelector } from "../../hooks/redux";
|
||||
|
||||
export const Card: React.FC<any> = ({ item, onClick }) => {
|
||||
const { currentLang } = useAppSelector((state) => state.languageReducer);
|
||||
|
||||
console.log(currentLang);
|
||||
return (
|
||||
<div onClick={() => onClick()} className="card">
|
||||
<img className="card-image" src={item.image.preview} alt='building' />
|
||||
<div className="card-body">
|
||||
<div className="card-header">
|
||||
<img src={iconButton} className="card-icon" alt="лого" />
|
||||
<div className="card-name">
|
||||
<p className="caption-name">{currentLang === "ru" ? item.title_full.ru : item.title_full.en}</p>
|
||||
<p className="card-location">{currentLang === "ru" ? item.location.ru : item.location.en}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-description-block">
|
||||
<p className="card-description"> {currentLang === "ru"
|
||||
? item.description.ru
|
||||
: item.description.en}
|
||||
</p>
|
||||
{item.description_second ? <p className="card-description-second">{currentLang === "ru"
|
||||
? item.description_second.ru
|
||||
: item.description_second.en}
|
||||
</p> : <p className="card-description-empty"></p>}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
};
|
||||
@@ -1,280 +0,0 @@
|
||||
.demo__container_mobile {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.demos_container {
|
||||
font-family: "Inter";
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
border-radius: 16px;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.demo__container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
|
||||
.demo {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 581px;
|
||||
}
|
||||
|
||||
.demo_image {
|
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
|
||||
border-radius: 16px;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.demo_info {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
padding: 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title__demo {
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
line-height: 100%;
|
||||
/* identical to box height, or 24px */
|
||||
|
||||
/* Landing/White */
|
||||
|
||||
color: #ebebeb;
|
||||
}
|
||||
|
||||
.caption {
|
||||
margin: 0;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 120%;
|
||||
/* identical to box height, or 17px */
|
||||
|
||||
/* Landing/White */
|
||||
|
||||
color: #ebebeb;
|
||||
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
|
||||
.caption1 {
|
||||
margin: 0 0 10px 0;
|
||||
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 130%;
|
||||
|
||||
/* or 25px */
|
||||
|
||||
/* Landing/White */
|
||||
|
||||
color: #ebebeb;
|
||||
}
|
||||
|
||||
.caption2 {
|
||||
margin: 0;
|
||||
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 140%;
|
||||
/* or 20px */
|
||||
|
||||
/* Landing/White */
|
||||
|
||||
color: #ebebeb;
|
||||
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.width {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.title__block {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.title__demo {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.demo__icon {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
right: 32px;
|
||||
top: 58%;
|
||||
}
|
||||
|
||||
|
||||
.demos_container:hover > div > img {
|
||||
transition: opacity ease-out 0.2s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.demos__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1600px) {
|
||||
.demo__icon {
|
||||
top: 56%;
|
||||
}
|
||||
|
||||
.demo_image {
|
||||
height: 360px;
|
||||
}
|
||||
|
||||
.title__demo {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.caption1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.caption2 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.demo {
|
||||
height: 700px;
|
||||
}
|
||||
|
||||
.demo__container {
|
||||
gap: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1279px) {
|
||||
.demo__icon {
|
||||
top: 334px;
|
||||
top: 234px;
|
||||
right: 24px;
|
||||
}
|
||||
|
||||
.demos__tittle {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.demo_image {
|
||||
height: 210px;
|
||||
}
|
||||
|
||||
.demo__container {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.demo_info {
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.title__demo {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.caption1 {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.caption2 {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.demo_info {
|
||||
gap: 12px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.demo {
|
||||
height: 434px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.title__demo {
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 1.2vw;
|
||||
}
|
||||
|
||||
.caption1 {
|
||||
font-size: 1.3vw;
|
||||
}
|
||||
|
||||
.caption2 {
|
||||
font-size: 1.1vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 639px) {
|
||||
.demo__container {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.demo__icon {
|
||||
right: 16px;
|
||||
top: 228px;
|
||||
}
|
||||
|
||||
.title__demo {
|
||||
font-size: 3.5vw;
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 2.9vw;
|
||||
}
|
||||
|
||||
.caption1 {
|
||||
font-size: 3.2vw;
|
||||
}
|
||||
|
||||
.caption2 {
|
||||
font-size: 2.9vw;
|
||||
}
|
||||
|
||||
.demo_info {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.demos__tittle {
|
||||
font-size: 28px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.demo {
|
||||
height: 436px;
|
||||
}
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
import "./demos.css";
|
||||
import "../../styles/styles.css";
|
||||
import iconButton from "./iconButton.svg";
|
||||
import { useAppSelector } from "../../hooks/redux";
|
||||
|
||||
export const Demos: React.FC<any> = ({ item, onClick }) => {
|
||||
const { currentLang } = useAppSelector((state) => state.languageReducer);
|
||||
|
||||
console.log(currentLang);
|
||||
return (
|
||||
<div onClick={() => onClick()} className="main-block__container">
|
||||
<div className="demos_container">
|
||||
<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={item.image.preview}
|
||||
className="demo_image"
|
||||
></img>
|
||||
<div className="demo_info">
|
||||
<div className="title__block">
|
||||
<h4 className="title__demo">
|
||||
{currentLang === "ru" ? item.title_full.ru : item.title_full.en}
|
||||
</h4>
|
||||
<p className="caption">{item.location.ru}</p>
|
||||
</div>
|
||||
<div className="body__block">
|
||||
<div className="description__container">
|
||||
<p className="caption1">
|
||||
{currentLang === "ru"
|
||||
? item.description.ru
|
||||
: item.description.en}
|
||||
</p>
|
||||
{item.description_second ? (
|
||||
<p className="caption">
|
||||
{currentLang === "ru"
|
||||
? item.description_second.ru
|
||||
: item.description_second.en}
|
||||
</p>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,3 +1,3 @@
|
||||
<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 width="24" height="39" viewBox="0 0 24 39" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M23.6548 23.6153L23.1272 21.5903C22.3173 21.8056 21.5119 22.034 20.7108 22.2753C20.3167 20.9203 19.8896 19.5772 19.4295 18.2461C17.1849 11.7984 14.1365 5.66681 10.358 0L8.64217 1.17105C12.3232 6.6911 15.2923 12.6645 17.4772 18.9461C17.9314 20.2532 18.3506 21.5718 18.7349 22.9019C15.2364 24.0548 11.8219 25.4541 8.51655 27.0895L14.1962 15.5586L12.3458 14.6253L5.39963 28.7167C3.67835 29.6649 1.98958 30.6789 0.333333 31.7587L1.45507 33.5191C2.2088 33.0275 2.97043 32.5494 3.73994 32.0848L1.12106 37.3986L2.97289 38.3333L6.96326 30.2437C10.9116 28.1101 15.0363 26.329 19.2906 24.9209C20.4346 29.3142 21.1986 33.8 21.5739 38.3274L23.643 38.1494C23.2555 33.4711 22.4642 28.836 21.2783 24.2973C22.0666 24.06 22.8627 23.8347 23.6667 23.6213" fill="white"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 801 B After Width: | Height: | Size: 864 B |
@@ -35,7 +35,6 @@ export const PlayerComponent: React.FC<any> = ({ closeStream }) => {
|
||||
<iframe
|
||||
id='player'
|
||||
onBlur={(e) => e.target.focus()} /// element loosing focus and keyboard input doesn't work
|
||||
title="stream"
|
||||
src={url}
|
||||
className={"player playerOn"}
|
||||
security={""}
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
.popup-connect {
|
||||
width: 100%;
|
||||
|
||||
background: transparent;
|
||||
|
||||
padding: 56px;
|
||||
box-sizing: border-box;
|
||||
|
||||
}
|
||||
|
||||
.popup-logo {
|
||||
height: 94px;
|
||||
width: 100%;
|
||||
margin-bottom: 32px;
|
||||
object-fit: contain;
|
||||
|
||||
}
|
||||
|
||||
.popup-button-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 1px;
|
||||
background-color: #23242A;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.button-connect {
|
||||
color: #FFFFFF;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 150%;
|
||||
height: 48px;
|
||||
background: linear-gradient(180deg, #BC75FF 0%, #798FFF 100%);
|
||||
border-radius: 4px;
|
||||
padding: 12px 24px;
|
||||
}
|
||||
|
||||
.button-back {
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 130%;
|
||||
color: #C5C7CE;
|
||||
background: #1C1D21;
|
||||
border-radius: 4px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
.popup-connect {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useHistory } from "react-router-dom";
|
||||
import "../../styles/styles.css";
|
||||
import "./popupConnect.css";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export const PopupConnect: React.FC<any> = ({ onConnect, logo, isLoading }) => {
|
||||
@@ -18,26 +18,18 @@ export const PopupConnect: React.FC<any> = ({ onConnect, logo, isLoading }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="popup__container">
|
||||
<img alt="logoRC" className="logo__popup" src={logo}></img>
|
||||
<div className="popup">
|
||||
<div className="button__container">
|
||||
<p className="button__title">{t("popup-main-title")} </p>
|
||||
<button
|
||||
disabled={isLoading}
|
||||
onClick={handleConnect}
|
||||
className="button"
|
||||
>
|
||||
{t("popup-main-btn-start")}
|
||||
</button>
|
||||
</div>
|
||||
<div className="button__container">
|
||||
<span className="line"></span>
|
||||
<button onClick={() => history.goBack()} className="popup__caption">
|
||||
{t("popup-main-select")}
|
||||
</button>
|
||||
</div>
|
||||
<div className="popup-connect">
|
||||
<img className="popup-logo" src={logo} alt="лого" />
|
||||
<div className="popup-button-container">
|
||||
<button
|
||||
onClick={handleConnect}
|
||||
className="button-connect">{t("popup-main-btn-start")}
|
||||
</button>
|
||||
<div className="popup-line"></div>
|
||||
<button onClick={() => history.goBack()} className="button-back">{t("popup-main-select")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
@@ -6,17 +6,19 @@ import { PopupShare } from "../PopupShare/PopupShare";
|
||||
import { ExitPopup } from "../ExitPopup/ExitPopup";
|
||||
import { ControlPanel } from "../ControlPanel/ControlPanel";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { sidebarVariants, popupAnimation } from "../../utils/animationProps";
|
||||
import { sidebarVariants, popupAnimation, wideSidebarVariants } from "../../utils/animationProps";
|
||||
import { WideSidebarButton } from "../ui/WideSidebarButton/WideSidebarButton";
|
||||
|
||||
|
||||
export const Sidebar: React.FC<any> = ({ closeStream }) => {
|
||||
const [open, setOpen] = useState(true);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [popup, setPopup] = useState({
|
||||
popup1: false,
|
||||
popup2: false,
|
||||
});
|
||||
|
||||
const [selected, setSelected] = useState(false);
|
||||
const [wideSidebar, setWideSidebar] = useState(false)
|
||||
|
||||
const [isMuted, setMuted] = useState(true);
|
||||
|
||||
@@ -46,10 +48,13 @@ export const Sidebar: React.FC<any> = ({ closeStream }) => {
|
||||
}
|
||||
|
||||
function closeSideBar() {
|
||||
setOpen((prev) => !prev);
|
||||
setSelected(false);
|
||||
setOpen(false);
|
||||
setWideSidebar(false)
|
||||
}
|
||||
|
||||
|
||||
|
||||
useEffect(() => () => unmountComponent(), []);
|
||||
|
||||
function unmountComponent() {
|
||||
@@ -60,29 +65,36 @@ export const Sidebar: React.FC<any> = ({ closeStream }) => {
|
||||
});
|
||||
}
|
||||
|
||||
console.log(wideSidebar, 'wide', open, 'open')
|
||||
|
||||
return (
|
||||
<div>
|
||||
<motion.div
|
||||
animate={open ? "open" : "closed"}
|
||||
variants={sidebarVariants}
|
||||
variants={wideSidebar ? wideSidebarVariants : sidebarVariants}
|
||||
className="toolbar-container"
|
||||
>
|
||||
<div className="toolbar-field">
|
||||
<div style={wideSidebar ? {width: "220px"} : {width: "60px"}} className="toolbar-field">
|
||||
<div className="toolbar-field-part">
|
||||
<FullscreenButton></FullscreenButton>
|
||||
<UserList selected={selected} setSelected={setSelected}></UserList>
|
||||
<FullscreenButton isSidebarWide={wideSidebar}
|
||||
> </FullscreenButton>
|
||||
<UserList isSidebarWide={wideSidebar} /// this is for disable showhing button's caption
|
||||
selected={selected} setSelected={setSelected}></UserList>
|
||||
</div>
|
||||
<motion.div onHoverStart={() => setWideSidebar(true)} className="toolbar-field-part">
|
||||
<WideSidebarButton isSidebarWide={wideSidebar} close={closeSideBar}></WideSidebarButton>
|
||||
</motion.div>
|
||||
<ControlPanel
|
||||
isSidebarWide={wideSidebar}
|
||||
isMuted={isMuted}
|
||||
handleMuteClick={handleMuteClick}
|
||||
handleOpenSharePopup={handleOpenSharePopup}
|
||||
handleOpenExitPopup={handleOpenExitPopup}
|
||||
></ControlPanel>
|
||||
</div>
|
||||
<div onClick={closeSideBar} className="toolbar-open-button">
|
||||
{!open && <motion.div onClick={() => setOpen(true)} className="toolbar-open-button">
|
||||
<span className="toolbar-open-button-icon"></span>
|
||||
</div>
|
||||
</motion.div>}
|
||||
</motion.div>
|
||||
<AnimatePresence>
|
||||
{popup.popup1 && (
|
||||
|
||||
@@ -13,6 +13,14 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.toolbar-wide-button {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
|
||||
.toolbar-confirm-block {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
@@ -26,15 +34,15 @@
|
||||
}
|
||||
|
||||
.toolbar-field {
|
||||
width: 60px;
|
||||
background: #333333;
|
||||
overflow: hidden;
|
||||
padding: 14px 15px;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.toolbar-field-part {
|
||||
@@ -90,8 +98,10 @@
|
||||
}
|
||||
|
||||
.toolbar-button-area {
|
||||
align-items: center;
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
/* background-color: #333333; */
|
||||
/* border-top-left-radius: 50px solid #4f4f4f; */
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@ import control from "../../../images/icons/control.svg";
|
||||
import { THOC } from "../../../utils/types";
|
||||
|
||||
|
||||
export const ControlButton: React.FC<THOC> = ({ onClick }) => {
|
||||
export const ControlButton: React.FC<any> = ({ onClick, isSidebarWide }) => {
|
||||
const [active, setActive] = useState(false);
|
||||
const button = {
|
||||
icon: control,
|
||||
@@ -19,6 +19,6 @@ export const ControlButton: React.FC<THOC> = ({ onClick }) => {
|
||||
}
|
||||
|
||||
return <div className="toolbar-button-area">
|
||||
<Button button={button} active={active} onClick={handleClick}></Button>
|
||||
<Button isSidebarWide={isSidebarWide} button={button} active={active} onClick={handleClick}></Button>
|
||||
</div>
|
||||
};
|
||||
|
||||
@@ -3,7 +3,7 @@ import { Button } from "../button/button";
|
||||
import exit from "../../../images/icons/exit.svg";
|
||||
import { THOC } from "../../../utils/types";
|
||||
|
||||
export const ExitButton: React.FC<THOC> = ({ onClick }) => {
|
||||
export const ExitButton: React.FC<any> = ({ onClick, isSidebarWide }) => {
|
||||
const [active, setActive] = useState(false);
|
||||
const button = {
|
||||
icon: exit,
|
||||
@@ -20,7 +20,7 @@ export const ExitButton: React.FC<THOC> = ({ onClick }) => {
|
||||
|
||||
return (
|
||||
<div className="toolbar-button-area">
|
||||
<Button button={button} onClick={handleClick}></Button>
|
||||
<Button isSidebarWide={isSidebarWide} button={button} onClick={handleClick}></Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -5,7 +5,7 @@ import fullscreen from "../../../images/icons/fullscreen.svg";
|
||||
import fullscreenOff from "../../../images/icons/fullscreenOff.svg";
|
||||
|
||||
|
||||
export const FullscreenButton = ({ }) => {
|
||||
export const FullscreenButton: React.FC<any> = ({isSidebarOpen}) => {
|
||||
const [active, setActive] = useState(Boolean(document.fullscreenElement));
|
||||
const [button, setButton] = useState({
|
||||
icon: fullscreen,
|
||||
@@ -15,7 +15,7 @@ export const FullscreenButton = ({ }) => {
|
||||
});
|
||||
|
||||
|
||||
function handleClick() {
|
||||
const handleClick = () => {
|
||||
setActive(Boolean(document.fullscreenElement))
|
||||
if (!document.fullscreenElement) {
|
||||
document.body.requestFullscreen()
|
||||
@@ -38,7 +38,7 @@ export const FullscreenButton = ({ }) => {
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
function onFullscreenChange() {
|
||||
const onFullscreenChange = () => {
|
||||
setActive(Boolean(document.fullscreenElement));
|
||||
}
|
||||
document.addEventListener('fullscreenchange', onFullscreenChange);
|
||||
|
||||
@@ -18,7 +18,7 @@ const container = {
|
||||
},
|
||||
};
|
||||
|
||||
export const LanguageButton: React.FC<any> = ({ hover, setHover }) => {
|
||||
export const LanguageButton: React.FC<any> = ({ hover, setHover, isSidebarWide }) => {
|
||||
const [active, setActive] = useState(false);
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
@@ -36,7 +36,7 @@ export const LanguageButton: React.FC<any> = ({ hover, setHover }) => {
|
||||
|
||||
return (
|
||||
<div className="toolbar-button-area">
|
||||
<Button button={button} onClick={handleClick}></Button>
|
||||
<Button isSidebarWide={isSidebarWide} button={button} onClick={handleClick}></Button>
|
||||
<AnimatePresence>
|
||||
{open && (
|
||||
<motion.div
|
||||
|
||||
@@ -4,7 +4,7 @@ import microOn from "../../../images/icons/MicroOn.svg";
|
||||
export const MicroButton: React.FC<any> = ({
|
||||
onClick,
|
||||
isMuted,
|
||||
translation,
|
||||
isSidebarWide
|
||||
}) => {
|
||||
const button = {
|
||||
icon: microOn,
|
||||
@@ -19,7 +19,7 @@ export const MicroButton: React.FC<any> = ({
|
||||
|
||||
return (
|
||||
<div className="toolbar-button-area">
|
||||
<Button button={button} active={isMuted} onClick={handleClick}></Button>
|
||||
<Button isSidebarWide={isSidebarWide} button={button} active={isMuted} onClick={handleClick}></Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -2,7 +2,7 @@ import { Button } from "../button/button";
|
||||
import share from "../../../images/icons/Share.svg";
|
||||
|
||||
|
||||
export const ShareButton: React.FC<any> = ({ onClick }) => {
|
||||
export const ShareButton: React.FC<any> = ({ onClick, isSidebarWide }) => {
|
||||
|
||||
const button = {
|
||||
icon: share,
|
||||
@@ -20,7 +20,7 @@ export const ShareButton: React.FC<any> = ({ onClick }) => {
|
||||
return (
|
||||
<>
|
||||
<div className="toolbar-button-area">
|
||||
<Button button={button} onClick={handleClick}></Button>
|
||||
<Button isSidebarWide={isSidebarWide} button={button} onClick={handleClick}></Button>
|
||||
</div>
|
||||
|
||||
</>
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M24 25L19 20L24 15" stroke="#C5C7CE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M15 30L15 20L15 10" stroke="#C5C7CE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 327 B |
@@ -0,0 +1,22 @@
|
||||
import { Button } from "../button/button"
|
||||
import { useState, useEffect } from "react";
|
||||
import wideButton from './Menu.svg'
|
||||
|
||||
export const WideSidebarButton: React.FC<any> = ({ close, isSidebarWide }) => {
|
||||
|
||||
|
||||
const [active, setActive] = useState(Boolean(document.fullscreenElement));
|
||||
const [button, setButton] = useState({
|
||||
icon: wideButton,
|
||||
inactive: "fullscreen-control-btn",
|
||||
active: "fullscreen-control-btn-active",
|
||||
type: "fullscreen",
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="toolbar-button-area">
|
||||
<Button isSidebarWide={isSidebarWide} button={button} active={active} onClick={close}></Button>
|
||||
<span style={{whiteSpace: "nowrap"}}>Скрыть меню</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -5,13 +5,16 @@ import { AnimatePresence, motion } from "framer-motion";
|
||||
import { animationButton } from "../../../utils/animationProps";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useAppSelector } from "../../../hooks/redux";
|
||||
export const Button: React.FC<any> = ({ button, onClick, active }) => {
|
||||
export const Button: React.FC<any> = ({ button, onClick, active, isSidebarWide }) => {
|
||||
const [hover, setHover] = useState(false);
|
||||
const { currentLang } = useAppSelector((state) => state.languageReducer);
|
||||
|
||||
console.log(isSidebarWide)
|
||||
|
||||
const typeButton = button.type !== "fullscreen" && button.type !== "language";
|
||||
|
||||
function handleClick() {
|
||||
setHover(false)
|
||||
onClick();
|
||||
}
|
||||
|
||||
@@ -45,7 +48,7 @@ export const Button: React.FC<any> = ({ button, onClick, active }) => {
|
||||
)}
|
||||
</motion.button>
|
||||
<AnimatePresence>
|
||||
{hover && (
|
||||
{ !isSidebarWide && hover && (
|
||||
<motion.div
|
||||
variants={animationButton}
|
||||
initial={"hidden"}
|
||||
|
||||
+20
-6
@@ -7,10 +7,17 @@ body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background: #0e0e0e;
|
||||
background: #151619;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
|
||||
}
|
||||
|
||||
.player {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
@@ -21,19 +28,20 @@ body {
|
||||
|
||||
.main {
|
||||
margin: 0 auto;
|
||||
width: 1200px;
|
||||
width: 1440px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1600px) {
|
||||
@media screen and (max-width: 1440px) {
|
||||
.main {
|
||||
width: 1440px;
|
||||
width: 1200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1279px) {
|
||||
@media screen and (max-width: 1199px) {
|
||||
.main {
|
||||
width: 1000px;
|
||||
margin: auto 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -45,10 +53,16 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
@media screen and (max-width: 920px) {
|
||||
.main {
|
||||
width: 100%;
|
||||
gap: 0;
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
.main {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import React, { Suspense, useEffect } from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
|
||||
import "./index.css";
|
||||
|
||||
@@ -21,7 +21,8 @@ export const createSession = createAsyncThunk(
|
||||
try {
|
||||
const response = await api.createSession(title);
|
||||
return response;
|
||||
} catch (e) {
|
||||
} catch (e: any) {
|
||||
console.log(e)
|
||||
return thunkApi.rejectWithValue(e);
|
||||
}
|
||||
}
|
||||
@@ -34,7 +35,6 @@ export const connectSession = createAsyncThunk(
|
||||
const response = await api.connectSession(code);
|
||||
return response;
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
return thunkApi.rejectWithValue('Error');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -41,6 +41,7 @@ export const sessionSlice = createSlice({
|
||||
state.id = action.payload.session_id;
|
||||
},
|
||||
[createSession.rejected.type]: (state, action: PayloadAction<any>) => {
|
||||
console.log(action.payload)
|
||||
state.isLoading = false;
|
||||
state.error = action.payload;
|
||||
},
|
||||
|
||||
@@ -226,17 +226,16 @@
|
||||
}
|
||||
|
||||
.popup__container {
|
||||
width: 494px;
|
||||
width: 100%;
|
||||
|
||||
background: #262626;
|
||||
background: transparent;
|
||||
|
||||
border-radius: 32px;
|
||||
padding: 40px 48px 16px;
|
||||
padding: 56px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.logo__popup {
|
||||
height: auto;
|
||||
height: 94px;
|
||||
width: 100%;
|
||||
margin-bottom: 48px;
|
||||
object-fit: cover;
|
||||
@@ -309,7 +308,7 @@
|
||||
transition: 0.3 ease;
|
||||
}
|
||||
|
||||
.line {
|
||||
.popup-line {
|
||||
height: 1px;
|
||||
background-color: #404040;
|
||||
width: 280px;
|
||||
@@ -418,9 +417,7 @@
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.logo__popup {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
|
||||
.line {
|
||||
width: 80%;
|
||||
|
||||
@@ -15,10 +15,18 @@ export const animationButton = {
|
||||
}
|
||||
|
||||
export const sidebarVariants = {
|
||||
open: { x: 0, transition: { ease: "easeIn" } },
|
||||
open: { x: -1, transition: { ease: "easeIn" } },
|
||||
closed: { x: "-61px", transition: { ease: "easeIn" } },
|
||||
};
|
||||
|
||||
export const wideSidebarVariants = {
|
||||
open: { width: "220px", transition: { ease: "easeIn" } },
|
||||
closed: { x: "-61px", transition: { ease: "easeIn" } },
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
export const popupAnimation = {
|
||||
hidden: {
|
||||
opacity: 0,
|
||||
|
||||
+5
-3
@@ -4,15 +4,17 @@ export default class MainApi {
|
||||
this._url = url;
|
||||
}
|
||||
|
||||
_checkStatus(promise: any) {
|
||||
_checkStatus(promise: Promise<any>) {
|
||||
return promise.then((res: any) => {
|
||||
if (res.ok) {
|
||||
return res.json();
|
||||
}
|
||||
return Promise.reject(`Ошибка ${res.status}`);
|
||||
console.log(res.text(), 'test')
|
||||
return Promise.reject(res.status);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
getRC() {
|
||||
const promise = fetch(`${this._url}/title/get`, {
|
||||
method: "GET",
|
||||
@@ -36,7 +38,7 @@ export default class MainApi {
|
||||
connectSession(code: any) {
|
||||
const promise = fetch(
|
||||
`${this._url}/session/connect?` +
|
||||
new URLSearchParams({ session_id: code }),
|
||||
new URLSearchParams({ session_id: code }),
|
||||
{
|
||||
method: "GET",
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user