DmitriyB/pixelstreamingv2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added i18next language lib and some style fixes

Browse Source
This commit is contained in:
VyacheslavShtyrlin
2022-12-27 19:49:00 +05:00
parent c21a5c55a0
commit 5c8403fd7f
29 changed files with 732 additions and 335 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ControlPanel/ControlPanel.tsx
+4 -1
View File
@@ -8,12 +8,15 @@ import React, { useState, useEffect } from "react";
export const ControlPanel: React.FC<any> = ({
handleOpenSharePopup,
handleOpenExitPopup,
handleMuteClick,
isMuted
}) => {
return (
<div className="toolbar-field-part">
<div className="toolbar-button-container-border-line"></div>
<ControlButton onClick={() => console.log("click!")}></ControlButton>
<MicroButton></MicroButton>
<MicroButton isMuted={isMuted} onClick={handleMuteClick}></MicroButton>
<div className="toolbar-button-container-border-line"></div>
<ShareButton onClick={handleOpenSharePopup}></ShareButton>
<LanguageButton onClick={() => console.log("click!")}></LanguageButton>
src/components/ExitPopup/ExitPopup.tsx
+33 -16
View File
@@ -1,19 +1,36 @@
import '../PopupShare/sharePopup.css'
import './ExitPopup.css'
import { TSidebarPopup } from '../../utils/types'
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'>Вы уверены, что хотите закончить демонстрацию?</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'>Остаться</button>
<button onClick={() => onExit?.()} className='exit-popup-button exit-popup-button_finish'>Закончить</button>
</div>
</div>
)
}
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>
);
};
src/components/LanguagePopup/LanguagePopup.tsx
+36 -10
View File
@@ -1,12 +1,38 @@
import '../sidebar/toolbar.css'
import "../sidebar/toolbar.css";
import { languageSlice } from "../../store/reducers/languageSlice";
import { useAppDispatch, useAppSelector } from "../../hooks/redux";
export const LanguagePopup: React.FC<any> = ({ setOpen}) => {
return (<div className="toolbar-language-popup">
<div className='toolbar-button-area '>
<button onClick={() => setOpen(false)} className='toolbar-button toolbar-button.language.ru'>RU</button>
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 className='toolbar-button-area '>
<button onClick={() => setOpen(false)} className='toolbar-button toolbar-button.language.en'>EN</button>
</div>
</div>)
}
))}
</div>
);
};
src/components/Main/Main.tsx
+1 -3
View File
@@ -11,7 +11,7 @@ import {
connectSession,
} from "../../store/reducers/ActionCreator";
export const Main: React.FC<any> = ({ text, visible, setVisible }) => {
export const Main: React.FC<any> = ({ visible, setVisible }) => {
const [value, setValue] = useState<string>("");
const dispatch = useAppDispatch();
const { popup1, popup2 } = visible;
@@ -33,7 +33,6 @@ export const Main: React.FC<any> = ({ text, visible, setVisible }) => {
isLoading={isLoading}
logo={currentCard?.image.logo}
onConnect={() => dispatch(createSession(currentCard.title))}
text={text.popupConnect}
visible={visible}
setVisible={setVisible}
></PopupConnect>
@@ -55,7 +54,6 @@ export const Main: React.FC<any> = ({ text, visible, setVisible }) => {
onConnect={() => dispatch(connectSession(value))}
visible={visible}
setVisible={setVisible}
text={text.popupConnectEx}
></PopupConnectEx>
</motion.div>
)}
src/components/PopupShare/PopupShare.tsx
+7 -4
View File
@@ -1,6 +1,7 @@
import './sharePopup.css'
import { useState, useEffect } from 'react'
import { TSidebarPopup } from '../../utils/types'
import { useTranslation } from 'react-i18next'
export const PopupShare: React.FC<any> = ({ setClose, data }) => {
const [copy, setCopy] = useState(false)
@@ -19,26 +20,28 @@ export const PopupShare: React.FC<any> = ({ setClose, data }) => {
useEffect(() => () => setCopy(false), []);
const {t} = useTranslation();
return (
<div className='share-popup-container'>
<div className='mobile-users-part-header share-header-popup'>
<span className='mobile-users-part-header-title'>Пригласить на демонстрацию</span>
<span className='mobile-users-part-header-title'>{t('popup-control-invite-title')}</span>
<button onClick={closePopup} className='mobile-users-part-header-close-button'></button>
</div>
<div className='share-popup-data-container'>
<span className='share-popup-data-title'>Код подключения</span>
<span className='share-popup-data-title'>{t('popup-control-code')}</span>
<input className='share-popup-data-input share-popup-data-input code' value={data.connection_code} readOnly></input>
</div>
<div className='border-line'></div>
<div className='share-popup-data-container'>
<span className='share-popup-data-title'>Ссылка для подключения</span>
<span className='share-popup-data-title'>{t('popup-control-link')}</span>
<input className='share-popup-data-input href' value={window.location.href} readOnly></input>
</div>
<div className='share-popup-data-container'>
<button className='share-popup-copy-button '>
<span className='share-popup-copy-button-icon'></span>
<span onClick={copyLink} className='share-popup-copy-button-title'>{copy ? 'Скопировано' : 'Скопировать'}</span>
<span onClick={copyLink} className='share-popup-copy-button-title'>{copy ? t('popup-control-btn-active') : t('popup-control-btn')}</span>
</button>
</div>
</div>
src/components/demos/demos.css
+20 -1
View File
@@ -139,7 +139,11 @@
@media screen and (min-width: 1600px) {
.demo__icon {
top: 57%;
top: 56%;
}
.demo_image {
height: 360px;
}
.title__demo {
@@ -157,6 +161,14 @@
.caption2 {
font-size: 16px;
}
.demo {
height: 700px;
}
.demo__container {
gap: 30px;
}
}
@media screen and (max-width: 1279px) {
@@ -202,6 +214,10 @@
gap: 12px;
padding: 24px;
}
.demo {
height: 434px;
}
}
@media screen and (max-width: 1024px) {
@@ -256,6 +272,9 @@
.demos__tittle {
font-size: 28px;
width: 300px;
}
.demo {
height: 436px;
}
}
src/components/demos/demos.tsx
+21 -4
View File
@@ -3,9 +3,12 @@ import "../../styles/styles.css";
import building1 from "./building1.png";
import iconButton from "./iconButton.svg";
import { Link } from "react-router-dom";
import { useAppSelector } from "../../hooks/redux";
export const Demos: React.FC<any> = ({ item, onClick }) => {
console.log(item)
const { currentLang } = useAppSelector((state) => state.languageReducer);
console.log(currentLang);
return (
<div onClick={() => onClick()} className="main-block__container">
<div className="demos_container">
@@ -20,13 +23,27 @@ export const Demos: React.FC<any> = ({ item, onClick }) => {
></img>
<div className="demo_info">
<div className="title__block">
<h4 className="title__demo">{item.title_full.ru}</h4>
<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">{item.description.ru}</p>
{item.description_second ? <p className="caption">{item.description_second.ru}</p> : <></>}
<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>
src/components/header/header.tsx
+94 -57
View File
@@ -4,81 +4,118 @@ import chevron from "./chevronIcon.svg";
import "./header.css";
import "../../styles/styles.css";
import { useLocation } from "react-router-dom";
import { useAppSelector, useAppDispatch } from "../../hooks/redux";
import { languageSlice } from "../../store/reducers/languageSlice";
export type THeader = {
language: string;
changeLanguage: (language: string) => void;
text?: any;
};
export const Header: React.FC<THeader> =
({ changeLanguage, language, text }) => {
const [open, setOpen] = useState<boolean>(false)
const [menuOpen, setMenuOpen] = useState(false)
const [opacity, setOpacity] = useState(false)
const userLanguage = language === 'RU';
const location = useLocation()
console.log(location)
export const Header: React.FC = ({}) => {
const [open, setOpen] = useState<boolean>(false);
const [menuOpen, setMenuOpen] = useState(false);
const [opacity, setOpacity] = useState(false);
const location = useLocation();
const { handleChangeLanguage } = languageSlice.actions;
const { currentLang } = useAppSelector((state) => state.languageReducer);
const dispatch = useAppDispatch();
function handleUpdateLanguage(value: string) {
changeLanguage(value)
setOpen(prev => !prev)
}
function handleUpdateLanguage(value: string) {
dispatch(handleChangeLanguage(value));
setOpen((prev) => !prev);
}
function handleOpen() {
setOpen(prev => !prev)
}
function handleOpen() {
setOpen((prev) => !prev);
}
function handleOpacity() {
setOpacity(true)
}
function handleOpacity() {
setOpacity(true);
}
const style = {
background: 'rgba(235, 235, 235, 0.2'
};
const style = {
background: "rgba(235, 235, 235, 0.2",
};
const iconTransform = {
transform: 'rotate(-90deg)'
} as CSSProperties
const iconTransform = {
transform: "rotate(-90deg)",
} as CSSProperties;
const setBackground = opacity && !open as boolean;
const setBackground = opacity && (!open as boolean);
function setOpacityAndMenu() {
setMenuOpen(true)
const targetElement = document.querySelector('body') as HTMLElement
targetElement.style.overflow = 'hidden'
}
function setOpacityAndMenu() {
setMenuOpen(true);
const targetElement = document.querySelector("body") as HTMLElement;
targetElement.style.overflow = "hidden";
}
function openMenu() {
setMenuOpen(false);
const targetElement = document.querySelector("body") as HTMLElement;
targetElement.style.overflow = "visible";
}
function openMenu() {
setMenuOpen(false)
const targetElement = document.querySelector('body') as HTMLElement
targetElement.style.overflow = 'visible'
}
return (
<div className={location.pathname === 'connect-page' ? 'header' : 'header-main'}>
<div className="header-container">
<img className="header-logo" alt="company-logo" src={logo} />
<div className="header-buttons">
<div className={open ? "header-lang-button header-lang-button_active" : 'header-lang-button header-lang-button_disabled'} style={setBackground ? style : { background: 'transparent' }}>
<img alt="img" src={chevron} className="header-select__icon" style={open ? iconTransform : {
transform: 'rotate(0deg)'
}}></img>
<div className="wrapper__button">
<div onMouseEnter={handleOpacity} onMouseLeave={() => setOpacity(false)} onClick={handleOpen} className=" header-lang-button-picked">{language}</div>
return (
<div
className={
location.pathname === "connect-page" ? "header" : "header-main"
}
>
<div className="header-container">
<img className="header-logo" alt="company-logo" src={logo} />
<div className="header-buttons">
<div
className={
open
? "header-lang-button header-lang-button_active"
: "header-lang-button header-lang-button_disabled"
}
style={setBackground ? style : { background: "transparent" }}
>
<img
alt="img"
src={chevron}
className="header-select__icon"
style={
open
? iconTransform
: {
transform: "rotate(0deg)",
}
}
></img>
<div className="wrapper__button">
<div
onMouseEnter={handleOpacity}
onMouseLeave={() => setOpacity(false)}
onClick={handleOpen}
className=" header-lang-button-picked"
>
{currentLang.toLocaleUpperCase()}
</div>
{language === 'RU' ? (<button value={'EN'} onClick={(e: any) => handleUpdateLanguage(e.target.value)} className="header-lang-button-text">EN</button>
) : (<button onClick={(e: any) => handleUpdateLanguage(e.target.value)} value={'RU'} className="header-lang-button-text">RU</button>)}
</div>
{currentLang === "ru" ? (
<button
value={"en"}
onClick={(e: any) => handleUpdateLanguage(e.target.value)}
className="header-lang-button-text"
>
EN
</button>
) : (
<button
onClick={(e: any) => handleUpdateLanguage(e.target.value)}
value={"ru"}
className="header-lang-button-text"
>
RU
</button>
)}
</div>
</div>
</div>
);
}
</div>
);
};
src/components/popupConnect/popupConnect.tsx
+8 -12
View File
@@ -1,22 +1,18 @@
import { useHistory } from "react-router-dom";
import { useAppSelector } from "../../hooks/redux";
import "../../styles/styles.css";
import { PayloadAction } from "@reduxjs/toolkit";
import { IData } from "../../models/IData";
import { sessionState } from "../../store/reducers/sessionSlice";
import { useTranslation } from "react-i18next";
export const PopupConnect: React.FC<any> = ({
setVisible,
text,
onConnect,
logo,
isLoading
isLoading,
}) => {
const history = useHistory();
const { t } = useTranslation();
const handleConnect = () => {
onConnect().then((res: any) => {
console.log(res);
if (!res.error) {
history.push(`/stream/${res.payload.connection_code}`);
} else {
@@ -30,18 +26,18 @@ export const PopupConnect: React.FC<any> = ({
<img alt="logoRC" className="logo__popup" src={logo}></img>
<div className="popup">
<div className="button__container">
<p className="button__title">{text.caption} </p>
<p className="button__title">{t("popup-main-title")} </p>
<button
disabled={isLoading}
onClick={handleConnect}
className="button"
>
{text.button.connectEx}
{t("popup-main-btn-start")}
</button>
<span className="line"></span>
</div>
<div className="button__container">
<p className="button__title">{text.caption1} </p>
<p className="button__title">{t("popup-main-caption")} </p>
<button
className="button button__disabled"
onClick={() =>
@@ -51,11 +47,11 @@ export const PopupConnect: React.FC<any> = ({
})
}
>
{text.button.connectNew}
{t("popup-main-btn-connect")}
</button>
<span className="line"></span>
<button onClick={() => history.goBack()} className="popup__caption">
{text.caption2}
{t("popup-main-select")}
</button>
</div>
</div>
src/components/popupConnectEx/popupConnectEx.tsx
+5 -4
View File
@@ -1,10 +1,10 @@
import "../../styles/styles.css";
import "./popupConnect.css";
import { useHistory } from "react-router-dom";
import { useTranslation } from "react-i18next";
export const PopupConnectEx: React.FC<any> = ({
setVisible,
text,
onConnect,
logo,
setValue,
@@ -12,6 +12,7 @@ export const PopupConnectEx: React.FC<any> = ({
isLoading,
}) => {
const history = useHistory();
const { t } = useTranslation();
const handleConnect = () => {
onConnect().then((res: any) => {
@@ -28,7 +29,7 @@ export const PopupConnectEx: React.FC<any> = ({
<div className="popup__container">
<div className="popup__content">
<img alt="logoRC" className="logo__popup_ex" src={logo}></img>
<p className="popup__title">{text.caption}</p>
<p className="popup__title">{t("popup-connect-title")}</p>
<input
value={value}
onChange={(e) => setValue(e.target.value)}
@@ -42,7 +43,7 @@ export const PopupConnectEx: React.FC<any> = ({
!!value || isLoading ? "button" : "button button__disabled"
}
>
{text.button}
{t("popup-connect-btn-continue")}
</button>
<span className="line"></span>
<button
@@ -54,7 +55,7 @@ export const PopupConnectEx: React.FC<any> = ({
}
className="popup__caption"
>
{text.caption1}
{t("popup-connect-btn-mode")}
</button>
</div>
</div>
src/components/sidebar/sidebar.tsx
+5 -16
View File
@@ -1,5 +1,5 @@
import "./toolbar.css";
import React, { useState, useEffect, useCallback } from "react";
import React, { useState, useEffect } from "react";
import { UserList } from "../UserList/UserList";
import { FullscreenButton } from "../ui/FullscreenButton/FullscreenButton";
import { PopupShare } from "../PopupShare/PopupShare";
@@ -8,7 +8,6 @@ import { ControlPanel } from "../ControlPanel/ControlPanel";
import { AnimatePresence, motion } from "framer-motion";
import { sidebarVariants, popupAnimation } from "../../utils/animationProps";
type link = {
id: string;
};
@@ -16,29 +15,22 @@ const userLocal = {
id: Math.floor(Math.random() * 100),
};
export const Sidebar: React.FC<any> = ({
closeStream,
data,
}) => {
export const Sidebar: React.FC<any> = ({ closeStream, data }) => {
const [open, setOpen] = useState(true);
const [popup, setPopup] = useState({
popup1: false,
popup2: false,
});
const [selected, setSelected] = useState(false);
const [icon, setIcon] = useState("");
const [isMuted, setMuted] = useState(true);
const handleMuteClick = () => {
setMuted((prev) => !prev);
};
function handleClosePopups() {
setPopup({
popup1: false,
@@ -65,7 +57,6 @@ export const Sidebar: React.FC<any> = ({
setSelected(false);
}
useEffect(() => () => unmountComponent(), []);
function unmountComponent() {
@@ -77,7 +68,6 @@ export const Sidebar: React.FC<any> = ({
}
return (
<div>
<motion.div
@@ -88,12 +78,11 @@ export const Sidebar: React.FC<any> = ({
<div className="toolbar-field">
<div className="toolbar-field-part">
<FullscreenButton></FullscreenButton>
<UserList
selected={selected}
setSelected={setSelected}
></UserList>
<UserList selected={selected} setSelected={setSelected}></UserList>
</div>
<ControlPanel
isMuted={isMuted}
handleMuteClick={handleMuteClick}
handleOpenSharePopup={handleOpenSharePopup}
handleOpenExitPopup={handleOpenExitPopup}
></ControlPanel>
src/components/sidebar/toolbar.css
+4
View File
@@ -151,6 +151,10 @@
padding: 0px;
}
.toolbar-button-active {
background: #567ece;
}
.user-icon {
position: relative;
width: 40px;
src/components/ui/ControlButton/ControlButton.tsx
+2 -2
View File
@@ -8,8 +8,8 @@ export const ControlButton: React.FC<THOC> = ({ onClick }) => {
const [active, setActive] = useState(false);
const button = {
icon: control,
active: "Запрет управления",
inactive: "Запрос управления",
active: "request-control-btn",
inactive: "request-control-btn-disable",
type: "control",
};
src/components/ui/ExitButton/ExitButton.tsx
+2 -2
View File
@@ -7,8 +7,8 @@ export const ExitButton: React.FC<THOC> = ({ onClick }) => {
const [active, setActive] = useState(false);
const button = {
icon: exit,
active: "Завершить презентацию",
inactive: "Завершить презентацию",
active: "exit-control-btn",
inactive: "exit-control-btn",
type: "exit",
};
src/components/ui/FullscreenButton/FullscreenButton.tsx
+13 -16
View File
@@ -3,43 +3,40 @@ import { Button } from "../button/button";
import fullscreen from "../../../images/icons/fullscreen.svg";
import fullscreenOff from "../../../images/icons/fullscreenOff.svg";
export const FullscreenButton = ({ }) => {
export const FullscreenButton = ({}) => {
const [active, setActive] = useState(false);
const [button, setButton] = useState({
icon: fullscreen,
active: "Развернуть",
inactive: "Свернуть",
inactive: "fullscreen-control-btn",
active: "fullscreen-control-btn-active",
type: "fullscreen",
})
});
function handleClick() {
setActive((prev) => !prev);
setButton({
icon: active ? fullscreen : fullscreenOff,
active: "Развернуть",
inactive: "Свернуть",
inactive: "fullscreen-control-btn",
active: "fullscreen-control-btn-active",
type: "fullscreen",
})
});
if (active) {
document.exitFullscreen()
document.exitFullscreen();
} else {
document.body.requestFullscreen()
document.body.requestFullscreen();
}
}
useEffect(() => {
return () => {
document.exitFullscreen()
}
}, [])
document.exitFullscreen();
};
}, []);
return (
<div className="toolbar-button-area">
<Button button={button} active={active} onClick={handleClick}></Button>
</div>
);
};
};
src/components/ui/LanguageButton/LanguageButton.tsx
+21 -20
View File
@@ -6,33 +6,31 @@ import { AnimatePresence, motion } from "framer-motion";
const container = {
hidden: {
opacity: 0,
transition: { duration: 0.2, ease: 'easeOut' }
transition: { duration: 0.2, ease: "easeOut" },
},
show: {
opacity: 1,
transition: { delay: 0.15, duration: 0.2, ease: 'easeIn' },
transition: { delay: 0.15, duration: 0.2, ease: "easeIn" },
},
exit: {
opacity: 0,
transition: { duration: 0.2, ease: 'easeOut' }
}
}
transition: { duration: 0.2, ease: "easeOut" },
},
};
export const LanguageButton: React.FC<any> = ({ hover, setHover }) => {
const [active, setActive] = useState(false);
const [open, setOpen] = useState(false)
const [open, setOpen] = useState(false);
const button = {
icon: microOn,
active: "Язык",
inactive: "Язык",
active: "language-control-btn",
inactive: "language-control-btn",
type: "language",
};
function handleClick() {
setOpen(true)
setOpen(true);
setActive((prev) => !prev);
}
@@ -40,14 +38,17 @@ export const LanguageButton: React.FC<any> = ({ hover, setHover }) => {
<div className="toolbar-button-area">
<Button button={button} onClick={handleClick}></Button>
<AnimatePresence>
{open && (<motion.div
variants={container}
initial={'hidden'}
animate={'show'}
exit={'hidden'}>
<LanguagePopup setOpen={setOpen}></LanguagePopup>
</motion.div>)}
{open && (
<motion.div
variants={container}
initial={"hidden"}
animate={"show"}
exit={"hidden"}
>
<LanguagePopup setOpen={setOpen}></LanguagePopup>
</motion.div>
)}
</AnimatePresence>
</div>
);
};
};
src/components/ui/MicroButton/MicroButton.tsx
+8 -9
View File
@@ -1,23 +1,22 @@
import { useState } from "react";
import { Button } from "../button/button";
import microOn from "../../../images/icons/MicroOn.svg";
import { THOC } from "../../../utils/types";
export const MicroButton: React.FC<any> = ({ onClick, isMuted }) => {
export const MicroButton: React.FC<any> = ({
onClick,
isMuted,
translation,
}) => {
const button = {
icon: microOn,
active: "Включить микрофон",
inactive: "Выключить микрофон",
active: "mute-control-btn",
inactive: "mute-control-btn-disable",
type: "microphone",
};
function handleClick() {
onClick()
onClick();
}
return (
<div className="toolbar-button-area">
<Button button={button} active={isMuted} onClick={handleClick}></Button>
src/components/ui/ShareButton/ShareButton.tsx
+2 -2
View File
@@ -6,8 +6,8 @@ export const ShareButton: React.FC<any> = ({ onClick }) => {
const button = {
icon: share,
active: "Поделиться",
inactive: "Поделиться",
active: "share-contro-btn",
inactive: "share-contro-btn",
type: "share",
};
src/components/ui/button/button.tsx
+32 -18
View File
@@ -1,45 +1,59 @@
import "../../sidebar/toolbar.css";
import disabledImg from "../../../images/icons/line.svg";
import { useEffect, useState } from "react";
import { useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { animationButton } from "../../../utils/animationProps";
import { TButton } from "../../../utils/types";
import { useTranslation } from "react-i18next";
import { useAppSelector } from "../../../hooks/redux";
export const Button: React.FC<any> = ({ button, onClick, active }) => {
const [hover, setHover] = useState(false);
const { currentLang } = useAppSelector((state) => state.languageReducer);
const [hover, setHover] = useState(false)
const typeButton =
button.type !== 'fullscreen' && button.type !== 'language'
const typeButton = button.type !== "fullscreen" && button.type !== "language";
function handleClick() {
onClick()
onClick();
}
const { t } = useTranslation();
return (
<div >
<div>
<motion.button
onClick={handleClick}
onHoverStart={() => setHover(true)}
onHoverEnd={() => setHover(false)}
className={button.type === 'exit' ? 'toolbar-button_exit toolbar-button' : 'toolbar-button'}>
className={
button.type === "exit"
? "toolbar-button_exit toolbar-button"
: "toolbar-button"
}
>
{button.type === "language" ? (
<span className="language-caption">EN</span>
<span className="language-caption">{currentLang.toUpperCase()}</span>
) : (
<img alt="icon" className="toolbar-icon" src={button.icon} />
)}
{active && typeButton && <img alt="iconDisabled" className="toolbar-disabled" src={disabledImg}></img>}
{active && typeButton && (
<img
alt="iconDisabled"
className="toolbar-disabled"
src={disabledImg}
></img>
)}
</motion.button>
<AnimatePresence>
{hover && (
<motion.div variants={animationButton}
initial={'hidden'}
animate={'show'}
exit={'hidden'}
className="toolbar-button-description-container">
<motion.div
variants={animationButton}
initial={"hidden"}
animate={"show"}
exit={"hidden"}
className="toolbar-button-description-container"
>
<span className="toolbar-button-description-triangle"></span>
<span className="toolbar-button-description-rectangle">
{active ? button.active : button.inactive}
{active ? t(button.active) : t(button.inactive)}
</span>
</motion.div>
)}