From 0adbf6f4e28fd7a12b41bf50b2e8a8c04a9c4b48 Mon Sep 17 00:00:00 2001 From: DmitriyB Date: Fri, 24 Mar 2023 17:05:56 +0500 Subject: [PATCH] refactoring, mobile version functional --- public/assets/locales/en/translation.json | 11 +- public/assets/locales/ru/translation.json | 7 +- src/App.tsx | 2 +- .../Stream/ControlPanel/ControlPanel.tsx | 30 ----- .../Stream/SidebarMobile/SidebarMobile.tsx | 74 ------------ .../Stream/UserListMoblie/UserListMobile.tsx | 18 --- .../components/ControlPanel/ControlPanel.tsx | 26 +++++ .../ControlPanelMobile/ContolPanelMobile.css | 63 +++++++++++ .../ControlPanelMobile/ControlPanelMobile.tsx | 45 ++++++++ .../Stream/{ => components}/Player/Player.tsx | 0 .../Stream/{ => components}/Player/player.css | 3 - .../PlayerComponent/PlayerComponent.tsx | 6 +- .../PlayerComponent/PlayerStyles.css | 0 .../{ => components}/Sidebar/Sidebar.css | 0 .../{ => components}/Sidebar/Sidebar.tsx | 18 ++- .../Sidebar/closeToolbarIcon.svg | 0 .../Sidebar/icons/adminIcon.svg | 0 .../Sidebar/icons/closeFullscreenIcon.svg | 0 .../Sidebar/icons/closeIcon.svg | 0 .../Sidebar/icons/constrolOffIcon.svg | 0 .../Sidebar/icons/constrolOnIcon.svg | 0 .../Sidebar/icons/controlDisabledIcon.svg | 0 .../Sidebar/icons/copyIcon.svg | 0 .../Sidebar/icons/descriptTiriangleIcon.svg | 0 .../Sidebar/icons/descriptionButtonIcon.svg | 0 .../Sidebar/icons/disableFullscreenIcon.svg | 0 .../{ => components}/Sidebar/icons/enIcon.svg | 0 .../Sidebar/icons/exitIcon.svg | 0 .../Sidebar/icons/guestIcon.svg | 0 .../Sidebar/icons/handIcon.svg | 0 .../Sidebar/icons/microDisabledIcon.svg | 0 .../Sidebar/icons/microOffIcon.svg | 0 .../Sidebar/icons/microOnIcon.svg | 0 .../Sidebar/icons/newCaptTriangleIcon.svg | 0 .../Sidebar/icons/openFullscreenIcon.svg | 0 .../Sidebar/icons/othertIcon.svg | 0 .../{ => components}/Sidebar/icons/ruIcon.svg | 0 .../Sidebar/icons/selfIcon.svg | 0 .../Sidebar/icons/shareIcon.svg | 0 .../Sidebar/icons/soundOffIcon.svg | 0 .../Sidebar/icons/soundOnIcon.svg | 0 .../Sidebar/icons/userIcon.svg | 0 .../Sidebar/icons/usersIcon.svg | 0 .../Sidebar/openToolbarBackIcon.svg | 0 .../Sidebar/openToolbarBorderHoverIcon.svg | 0 .../Sidebar/openToolbarBorderIcon.svg | 0 .../Sidebar/openToolbarIcon.svg | 0 .../{ => components}/Sidebar/pointerIcon.svg | 0 .../SidebarDesktop/SidebarDesktop.tsx | 12 +- .../SidebarMobile/SidebarMobile.tsx | 105 ++++++++++++++++++ .../Stream/{ => components}/User/User.css | 0 .../Stream/{ => components}/User/User.tsx | 4 +- .../{ => components}/UserList/UserList.tsx | 2 +- .../AdditionalButton/AdditionalButton.tsx | 0 .../buttons}/ControlButton/ControlButton.tsx | 0 .../buttons}/ExitButton/ExitButton.tsx | 0 .../FullscreenButton/FullscreenButton.tsx | 0 .../buttons}/LanguageButton/EN.svg | 0 .../LanguageButton/LanguageButton.tsx | 0 .../buttons}/LanguageButton/RU.svg | 0 .../buttons}/MicroButton/MicroButton.tsx | 0 .../buttons}/ShareButton/ShareButton.tsx | 0 .../UserButtonMobile/UserButtonMobile.tsx | 0 .../buttons}/WideSidebarButton/Menu.svg | 0 .../WideSidebarButton/WideSidebarButton.tsx | 0 .../PopupAdditional/PopupAdditional.tsx | 65 +++++++++++ .../popups}/PopupExit/PopupExit.css | 0 .../popups}/PopupExit/PopupExit.tsx | 1 - .../PopupExitMobile/PopupExitMobile.tsx | 27 +++++ .../PopupInviteMobile/PopupInviteMobile.tsx | 50 +++++++++ .../PopupLanguageMobile.tsx | 44 ++++++++ .../popups}/PopupShare/PopupShare.tsx | 0 .../popups}/PopupShare/copiedIcon.svg | 0 .../popups}/PopupShare/copyIcon.svg | 0 .../popups}/PopupShare/sharePopup.css | 0 .../UserListMobilePopup.tsx | 21 ++++ .../pages/Stream/components/popups/popup.css | 65 +++++++++++ src/components/shared/Button/Button.tsx | 2 +- src/images/icons/Back.svg | 3 + src/images/icons/Language.svg | 3 + src/images/icons/OK.svg | 3 + src/index.css | 4 + 82 files changed, 566 insertions(+), 148 deletions(-) delete mode 100644 src/components/pages/Stream/ControlPanel/ControlPanel.tsx delete mode 100644 src/components/pages/Stream/SidebarMobile/SidebarMobile.tsx delete mode 100644 src/components/pages/Stream/UserListMoblie/UserListMobile.tsx create mode 100644 src/components/pages/Stream/components/ControlPanel/ControlPanel.tsx create mode 100644 src/components/pages/Stream/components/ControlPanelMobile/ContolPanelMobile.css create mode 100644 src/components/pages/Stream/components/ControlPanelMobile/ControlPanelMobile.tsx rename src/components/pages/Stream/{ => components}/Player/Player.tsx (100%) rename src/components/pages/Stream/{ => components}/Player/player.css (99%) rename src/components/pages/Stream/{ => components}/PlayerComponent/PlayerComponent.tsx (90%) rename src/components/pages/Stream/{ => components}/PlayerComponent/PlayerStyles.css (100%) rename src/components/pages/Stream/{ => components}/Sidebar/Sidebar.css (100%) rename src/components/pages/Stream/{ => components}/Sidebar/Sidebar.tsx (74%) rename src/components/pages/Stream/{ => components}/Sidebar/closeToolbarIcon.svg (100%) rename src/components/pages/Stream/{ => components}/Sidebar/icons/adminIcon.svg (100%) rename src/components/pages/Stream/{ => components}/Sidebar/icons/closeFullscreenIcon.svg (100%) rename src/components/pages/Stream/{ => components}/Sidebar/icons/closeIcon.svg (100%) rename src/components/pages/Stream/{ => components}/Sidebar/icons/constrolOffIcon.svg (100%) rename src/components/pages/Stream/{ => components}/Sidebar/icons/constrolOnIcon.svg (100%) rename src/components/pages/Stream/{ => components}/Sidebar/icons/controlDisabledIcon.svg (100%) rename src/components/pages/Stream/{ => components}/Sidebar/icons/copyIcon.svg (100%) rename src/components/pages/Stream/{ => components}/Sidebar/icons/descriptTiriangleIcon.svg (100%) rename src/components/pages/Stream/{ => components}/Sidebar/icons/descriptionButtonIcon.svg (100%) rename src/components/pages/Stream/{ => components}/Sidebar/icons/disableFullscreenIcon.svg (100%) rename src/components/pages/Stream/{ => components}/Sidebar/icons/enIcon.svg (100%) rename src/components/pages/Stream/{ => components}/Sidebar/icons/exitIcon.svg (100%) rename src/components/pages/Stream/{ => components}/Sidebar/icons/guestIcon.svg (100%) rename src/components/pages/Stream/{ => components}/Sidebar/icons/handIcon.svg (100%) rename src/components/pages/Stream/{ => components}/Sidebar/icons/microDisabledIcon.svg (100%) rename src/components/pages/Stream/{ => components}/Sidebar/icons/microOffIcon.svg (100%) rename src/components/pages/Stream/{ => components}/Sidebar/icons/microOnIcon.svg (100%) rename src/components/pages/Stream/{ => components}/Sidebar/icons/newCaptTriangleIcon.svg (100%) rename src/components/pages/Stream/{ => components}/Sidebar/icons/openFullscreenIcon.svg (100%) rename src/components/pages/Stream/{ => components}/Sidebar/icons/othertIcon.svg (100%) rename src/components/pages/Stream/{ => components}/Sidebar/icons/ruIcon.svg (100%) rename src/components/pages/Stream/{ => components}/Sidebar/icons/selfIcon.svg (100%) rename src/components/pages/Stream/{ => components}/Sidebar/icons/shareIcon.svg (100%) rename src/components/pages/Stream/{ => components}/Sidebar/icons/soundOffIcon.svg (100%) rename src/components/pages/Stream/{ => components}/Sidebar/icons/soundOnIcon.svg (100%) rename src/components/pages/Stream/{ => components}/Sidebar/icons/userIcon.svg (100%) rename src/components/pages/Stream/{ => components}/Sidebar/icons/usersIcon.svg (100%) rename src/components/pages/Stream/{ => components}/Sidebar/openToolbarBackIcon.svg (100%) rename src/components/pages/Stream/{ => components}/Sidebar/openToolbarBorderHoverIcon.svg (100%) rename src/components/pages/Stream/{ => components}/Sidebar/openToolbarBorderIcon.svg (100%) rename src/components/pages/Stream/{ => components}/Sidebar/openToolbarIcon.svg (100%) rename src/components/pages/Stream/{ => components}/Sidebar/pointerIcon.svg (100%) rename src/components/pages/Stream/{ => components}/SidebarDesktop/SidebarDesktop.tsx (89%) create mode 100644 src/components/pages/Stream/components/SidebarMobile/SidebarMobile.tsx rename src/components/pages/Stream/{ => components}/User/User.css (100%) rename src/components/pages/Stream/{ => components}/User/User.tsx (98%) rename src/components/pages/Stream/{ => components}/UserList/UserList.tsx (85%) rename src/components/pages/Stream/{ => components/buttons}/AdditionalButton/AdditionalButton.tsx (100%) rename src/components/pages/Stream/{ => components/buttons}/ControlButton/ControlButton.tsx (100%) rename src/components/pages/Stream/{ => components/buttons}/ExitButton/ExitButton.tsx (100%) rename src/components/pages/Stream/{ => components/buttons}/FullscreenButton/FullscreenButton.tsx (100%) rename src/components/pages/Stream/{ => components/buttons}/LanguageButton/EN.svg (100%) rename src/components/pages/Stream/{ => components/buttons}/LanguageButton/LanguageButton.tsx (100%) rename src/components/pages/Stream/{ => components/buttons}/LanguageButton/RU.svg (100%) rename src/components/pages/Stream/{ => components/buttons}/MicroButton/MicroButton.tsx (100%) rename src/components/pages/Stream/{ => components/buttons}/ShareButton/ShareButton.tsx (100%) rename src/components/pages/Stream/{ => components/buttons}/UserButtonMobile/UserButtonMobile.tsx (100%) rename src/components/pages/Stream/{ => components/buttons}/WideSidebarButton/Menu.svg (100%) rename src/components/pages/Stream/{ => components/buttons}/WideSidebarButton/WideSidebarButton.tsx (100%) create mode 100644 src/components/pages/Stream/components/popups/PopupAdditional/PopupAdditional.tsx rename src/components/pages/Stream/{ => components/popups}/PopupExit/PopupExit.css (100%) rename src/components/pages/Stream/{ => components/popups}/PopupExit/PopupExit.tsx (95%) create mode 100644 src/components/pages/Stream/components/popups/PopupExitMobile/PopupExitMobile.tsx create mode 100644 src/components/pages/Stream/components/popups/PopupInviteMobile/PopupInviteMobile.tsx create mode 100644 src/components/pages/Stream/components/popups/PopupLanguageMobile/PopupLanguageMobile.tsx rename src/components/pages/Stream/{ => components/popups}/PopupShare/PopupShare.tsx (100%) rename src/components/pages/Stream/{ => components/popups}/PopupShare/copiedIcon.svg (100%) rename src/components/pages/Stream/{ => components/popups}/PopupShare/copyIcon.svg (100%) rename src/components/pages/Stream/{ => components/popups}/PopupShare/sharePopup.css (100%) create mode 100644 src/components/pages/Stream/components/popups/UserListMobliePopup/UserListMobilePopup.tsx create mode 100644 src/components/pages/Stream/components/popups/popup.css create mode 100644 src/images/icons/Back.svg create mode 100644 src/images/icons/Language.svg create mode 100644 src/images/icons/OK.svg diff --git a/public/assets/locales/en/translation.json b/public/assets/locales/en/translation.json index 919dbca..3216c3b 100644 --- a/public/assets/locales/en/translation.json +++ b/public/assets/locales/en/translation.json @@ -26,5 +26,14 @@ "popup-control-yes": "Finish", "popup-control-no": "Stay", "popup-loading": "Please, wait", - "sidebar-hide": "Hide menu" + "sidebar-hide": "Hide menu", + "language-button": "Language", + "popup-additional": "Additional", + "popup-userlist": "Spectrators", + "user": "User", + "popup-change-language": "Change Language" + + + + } diff --git a/public/assets/locales/ru/translation.json b/public/assets/locales/ru/translation.json index 1e27cf8..f6cd3f8 100644 --- a/public/assets/locales/ru/translation.json +++ b/public/assets/locales/ru/translation.json @@ -26,5 +26,10 @@ "popup-control-yes": "Закончить", "popup-control-no": "Остаться", "popup-loading": "Пожалуйста, подождите", - "sidebar-hide": "Скрыть меню" + "sidebar-hide": "Скрыть меню", + "language-button": "Язык", + "popup-additional": "Дополнительно", + "popup-userlist": "Участники демонстрации", + "user": "Пользователь", + "popup-change-language": "Выбор языка" } diff --git a/src/App.tsx b/src/App.tsx index 496e6a3..13588c6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,7 +11,7 @@ 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 { PlayerComponent } from "components/pages/Stream/components/PlayerComponent/PlayerComponent"; import { PlanComponent } from "components/pages/Plan/PlanComponent"; import { useAppDispatch, useAppSelector } from "hooks/redux"; diff --git a/src/components/pages/Stream/ControlPanel/ControlPanel.tsx b/src/components/pages/Stream/ControlPanel/ControlPanel.tsx deleted file mode 100644 index 4c826ea..0000000 --- a/src/components/pages/Stream/ControlPanel/ControlPanel.tsx +++ /dev/null @@ -1,30 +0,0 @@ -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 = ({ - handleOpenSharePopup, - handleOpenExitPopup, - handleMuteClick, - handleControlClick, - - isMuted, - isControl, - isSidebarWide -}) => { - - return ( -
-
- console.log('handleControlClick()')}> - console.log('handleMuteClick()')}> -
- - console.log("click!")}> -
- -
- ); -}; diff --git a/src/components/pages/Stream/SidebarMobile/SidebarMobile.tsx b/src/components/pages/Stream/SidebarMobile/SidebarMobile.tsx deleted file mode 100644 index 65a0b59..0000000 --- a/src/components/pages/Stream/SidebarMobile/SidebarMobile.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { FullscreenButton } from "../FullscreenButton/FullscreenButton"; -import { AnimatePresence, motion } from "framer-motion"; -import { - sidebarVariants, - popupAnimation, -} from "utils/animationProps"; -import { useState } from "react"; -import { WideSidebarButton } from "../WideSidebarButton/WideSidebarButton"; -import { UserButtonMobile } from "../UserButtonMobile/UserButtonMobile"; -import { ControlButton } from "../ControlButton/ControlButton"; -import { MicroButton } from "../MicroButton/MicroButton"; -import { AdditionalButton } from "../AdditionalButton/AdditionalButton"; -import { UserListMobile } from "../UserListMoblie/UserListMobile"; -import { ExitButton } from "../ExitButton/ExitButton"; - -export const SidebarMobile: React.FC = ({ height, isMobile, handleOpenExitPopup }) => { - const [open, setOpen] = useState(false); - const [userList, setUserList] = useState(false); - const [popupAdditional, setPopupAdditipnal] = useState(false); //should be insted of exit button, but popup doesn't ready yet - console.log(userList, 'popup') - return ( - <> -
-
- - setOpen(false)}> -
- setUserList(true)} - > -
-
- - -
- -
- - {!open && ( - setOpen(true)} - className="toolbar-open-button" - > - - - )} - -
- - - {userList && ( - setUserList(false)} isMobile={isMobile}> - )} - - - - ); -}; diff --git a/src/components/pages/Stream/UserListMoblie/UserListMobile.tsx b/src/components/pages/Stream/UserListMoblie/UserListMobile.tsx deleted file mode 100644 index 061efb6..0000000 --- a/src/components/pages/Stream/UserListMoblie/UserListMobile.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { User } from "../User/User" -import close from 'images/icons/close.svg' - -export const UserListMobile: React.FC = ({ isMobile, closePopup }) => { - return (
-
-
- -
-

Участники демонстрации

- -
- -
) -} \ No newline at end of file diff --git a/src/components/pages/Stream/components/ControlPanel/ControlPanel.tsx b/src/components/pages/Stream/components/ControlPanel/ControlPanel.tsx new file mode 100644 index 0000000..4a8fa4a --- /dev/null +++ b/src/components/pages/Stream/components/ControlPanel/ControlPanel.tsx @@ -0,0 +1,26 @@ +import { ControlButton } from "components/pages/Stream/components/buttons/ControlButton/ControlButton"; +import { MicroButton } from "components/pages/Stream/components/buttons/MicroButton/MicroButton"; +import { ShareButton } from "components/pages/Stream/components/buttons/ShareButton/ShareButton"; +import { LanguageButton } from "components/pages/Stream/components/buttons/LanguageButton/LanguageButton"; +import { ExitButton } from "components/pages/Stream/components/buttons/ExitButton/ExitButton"; + +export const ControlPanel: React.FC = ({ + handleOpenSharePopup, + handleOpenExitPopup, + handleMuteClick, + handleControlClick, + + isMuted, + isControl, + isSidebarWide +}) => { + + return ( +
+ + console.log("click!")}> +
+ +
+ ); +}; diff --git a/src/components/pages/Stream/components/ControlPanelMobile/ContolPanelMobile.css b/src/components/pages/Stream/components/ControlPanelMobile/ContolPanelMobile.css new file mode 100644 index 0000000..2884f5b --- /dev/null +++ b/src/components/pages/Stream/components/ControlPanelMobile/ContolPanelMobile.css @@ -0,0 +1,63 @@ +.popup-mobile-button-container { + display: flex; + flex-direction: row; + gap: 8px; + justify-content: space-between; +} + +.menu-item-button { + justify-content: space-between; + width: 50%; + background: #23242A; + border-radius: 4px; + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 140%; + /* or 22px */ + + display: flex; + align-items: center; + + /* White */ + padding: 12px; + box-sizing: border-box; + color: #F2F2F2; +} + + + +.menu-item-container { + height: 24px; + display: flex; + flex-direction: row; + gap: 8px; +} + +.menu-item-language-caption { + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 130%; + /* identical to box height, or 16px */ + align-items: center; + text-align: right; + /* Button_3 */ + color: #73788C; +} + +.menu-item-language { + display: flex; + flex-direction: row; + gap: 4px; + align-items: center; +} + +.menu-item-button-exit { + position: absolute; + width: 118px; + right: 0%; + bottom: 0%; +} \ No newline at end of file diff --git a/src/components/pages/Stream/components/ControlPanelMobile/ControlPanelMobile.tsx b/src/components/pages/Stream/components/ControlPanelMobile/ControlPanelMobile.tsx new file mode 100644 index 0000000..56fb3cb --- /dev/null +++ b/src/components/pages/Stream/components/ControlPanelMobile/ControlPanelMobile.tsx @@ -0,0 +1,45 @@ +import './ContolPanelMobile.css' +import close from 'images/icons/close.svg' +import share from 'images/icons/Share.svg' +import right from 'images/icons/ChevronRight.svg' +import exit from 'images/icons/exit.svg' +import language from 'images/icons/Language.svg' +import { useTranslation } from 'react-i18next' + + +export const ControlPanelMobile: React.FC = ({ closePopup, currentLang, setPopupExit, setPopupShare, setLanguagePopup }) => { + const { t } = useTranslation() + return ( + <> +
+ +
+

{t('popup-additional')}

+
+ + +
+ + + + ) + +} \ No newline at end of file diff --git a/src/components/pages/Stream/Player/Player.tsx b/src/components/pages/Stream/components/Player/Player.tsx similarity index 100% rename from src/components/pages/Stream/Player/Player.tsx rename to src/components/pages/Stream/components/Player/Player.tsx diff --git a/src/components/pages/Stream/Player/player.css b/src/components/pages/Stream/components/Player/player.css similarity index 99% rename from src/components/pages/Stream/Player/player.css rename to src/components/pages/Stream/components/Player/player.css index 10d3057..e3f0a8e 100644 --- a/src/components/pages/Stream/Player/player.css +++ b/src/components/pages/Stream/components/Player/player.css @@ -582,9 +582,6 @@ video { min-width: 75%; } -input { - text-align: right; -} .warning { box-sizing: border-box; diff --git a/src/components/pages/Stream/PlayerComponent/PlayerComponent.tsx b/src/components/pages/Stream/components/PlayerComponent/PlayerComponent.tsx similarity index 90% rename from src/components/pages/Stream/PlayerComponent/PlayerComponent.tsx rename to src/components/pages/Stream/components/PlayerComponent/PlayerComponent.tsx index af338f2..26b434c 100644 --- a/src/components/pages/Stream/PlayerComponent/PlayerComponent.tsx +++ b/src/components/pages/Stream/components/PlayerComponent/PlayerComponent.tsx @@ -7,8 +7,8 @@ import { useAppDispatch, useAppSelector } from "hooks/redux"; import useWindowDimensions from "hooks/useWindowDimensions"; import useMobile from "hooks/useMobile"; -import { Sidebar } from "components/pages/Stream/Sidebar/Sidebar"; -import { Player } from "components/pages/Stream/Player/Player"; +import { Sidebar } from "components/pages/Stream/components/Sidebar/Sidebar"; +import { Player } from "components/pages/Stream/components/Player/Player"; type link = { id: string; @@ -28,7 +28,6 @@ export const PlayerComponent: React.FC = ({ cleanErrors, handleDisconnect, const { id } = useParams(); - const [click, setClick] = useState(false); const dispatch = useAppDispatch(); const history = useHistory() @@ -75,7 +74,6 @@ export const PlayerComponent: React.FC = ({ cleanErrors, handleDisconnect, players={playerCount} heightDevice={height} isMobile={isMobile} - exitPopup={click} > ); diff --git a/src/components/pages/Stream/PlayerComponent/PlayerStyles.css b/src/components/pages/Stream/components/PlayerComponent/PlayerStyles.css similarity index 100% rename from src/components/pages/Stream/PlayerComponent/PlayerStyles.css rename to src/components/pages/Stream/components/PlayerComponent/PlayerStyles.css diff --git a/src/components/pages/Stream/Sidebar/Sidebar.css b/src/components/pages/Stream/components/Sidebar/Sidebar.css similarity index 100% rename from src/components/pages/Stream/Sidebar/Sidebar.css rename to src/components/pages/Stream/components/Sidebar/Sidebar.css diff --git a/src/components/pages/Stream/Sidebar/Sidebar.tsx b/src/components/pages/Stream/components/Sidebar/Sidebar.tsx similarity index 74% rename from src/components/pages/Stream/Sidebar/Sidebar.tsx rename to src/components/pages/Stream/components/Sidebar/Sidebar.tsx index de74abe..e2a7774 100644 --- a/src/components/pages/Stream/Sidebar/Sidebar.tsx +++ b/src/components/pages/Stream/components/Sidebar/Sidebar.tsx @@ -1,13 +1,12 @@ import "./Sidebar.css"; -import React, { useEffect, useState } from "react"; -import { useHistory } from "react-router"; +import React, { useState } from "react"; import { SidebarDesktop } from "../SidebarDesktop/SidebarDesktop"; import { SidebarMobile } from "../SidebarMobile/SidebarMobile"; -import { closeStream } from "utils/app"; -import { useAppSelector } from "hooks/redux"; +import { useAppDispatch, useAppSelector } from "hooks/redux"; +import { languageSlice } from "store/reducers/languageSlice"; export const Sidebar: React.FC = ({ exitPopup, isMobile, heightDevice, players, handleDisconnect }) => { const [isMuted, setMuted] = useState(true); @@ -15,15 +14,20 @@ export const Sidebar: React.FC = ({ exitPopup, isMobile, heightDevice, play const { playerCount } = useAppSelector((state) => state.sessionReducer); + const { currentLang } = useAppSelector((state) => state.languageReducer) + const { handleChangeLanguage } = languageSlice.actions; - - + const dispatch = useAppDispatch() const handleCloseStream = () => { handleDisconnect() } + const handleLanguage = (value: string) => { + dispatch(handleChangeLanguage(value)) + } + const handleMuteClick = () => { setMuted((prev) => !prev); }; @@ -36,6 +40,8 @@ export const Sidebar: React.FC = ({ exitPopup, isMobile, heightDevice, play <> {isMobile ? ( = ({ >
-
= ({ height, isMobile, handleLanguage, userArr, currentLang, closeStream }) => { + const [open, setOpen] = useState(false); + const [userListPopup, setUserListPopup] = useState(false); + const [popupAdditional, setPopupAdditional] = useState(false); //should be insted of exit button, but popup doesn't ready yet + + const handleOpenPopupAdditional = () => { + if (userListPopup) { + setUserListPopup(false) + } + setPopupAdditional(true) + } + + const handleOpenPopupUserList = () => { + if (popupAdditional) { + setPopupAdditional(false) + } + setUserListPopup(true) + } + + const handleClosePopups = () => { + setPopupAdditional(false) + setUserListPopup(false) + } + + + useEffect(() => () => handleClosePopups(), []); + + + return ( + <> +
+
+ + setOpen(false)}> +
+ +
+
+
+ +
+ + {!open && ( + setOpen(true)} + className="toolbar-open-button" + > + + + )} + +
+ + + {userListPopup && ( + setUserListPopup(false)} isMobile={isMobile}> + )} + {popupAdditional && ( + setPopupAdditional(false)}> + )} + + + + ); +}; diff --git a/src/components/pages/Stream/User/User.css b/src/components/pages/Stream/components/User/User.css similarity index 100% rename from src/components/pages/Stream/User/User.css rename to src/components/pages/Stream/components/User/User.css diff --git a/src/components/pages/Stream/User/User.tsx b/src/components/pages/Stream/components/User/User.tsx similarity index 98% rename from src/components/pages/Stream/User/User.tsx rename to src/components/pages/Stream/components/User/User.tsx index 788f678..123333c 100644 --- a/src/components/pages/Stream/User/User.tsx +++ b/src/components/pages/Stream/components/User/User.tsx @@ -17,6 +17,7 @@ import { transition, iconAnimation, } from "utils/animationProps"; +import { useTranslation } from "react-i18next"; export const User: React.FC = ({ isAdmin, @@ -28,6 +29,7 @@ export const User: React.FC = ({ const [expand, setExpand] = useState(false); const [mute, setMute] = useState(true); const [isControl, setControl] = useState(true); + const {t} = useTranslation() useEffect(() => { setExpand(false); @@ -65,7 +67,7 @@ export const User: React.FC = ({ animate={isSidebarWide ? "show" : "hidden"} className="user-name" > - Пользователь + {t('user')}
{isSidebarWide && ( diff --git a/src/components/pages/Stream/UserList/UserList.tsx b/src/components/pages/Stream/components/UserList/UserList.tsx similarity index 85% rename from src/components/pages/Stream/UserList/UserList.tsx rename to src/components/pages/Stream/components/UserList/UserList.tsx index 038bb38..79473b6 100644 --- a/src/components/pages/Stream/UserList/UserList.tsx +++ b/src/components/pages/Stream/components/UserList/UserList.tsx @@ -1,4 +1,4 @@ -import { User } from "components/pages/Stream/User/User"; +import { User } from "components/pages/Stream/components/User/User"; export const UserList: React.FC = ({ isSidebarWide, isAdmin, closeSidebar, isMobile, userArr }) => { console.log(userArr) diff --git a/src/components/pages/Stream/AdditionalButton/AdditionalButton.tsx b/src/components/pages/Stream/components/buttons/AdditionalButton/AdditionalButton.tsx similarity index 100% rename from src/components/pages/Stream/AdditionalButton/AdditionalButton.tsx rename to src/components/pages/Stream/components/buttons/AdditionalButton/AdditionalButton.tsx diff --git a/src/components/pages/Stream/ControlButton/ControlButton.tsx b/src/components/pages/Stream/components/buttons/ControlButton/ControlButton.tsx similarity index 100% rename from src/components/pages/Stream/ControlButton/ControlButton.tsx rename to src/components/pages/Stream/components/buttons/ControlButton/ControlButton.tsx diff --git a/src/components/pages/Stream/ExitButton/ExitButton.tsx b/src/components/pages/Stream/components/buttons/ExitButton/ExitButton.tsx similarity index 100% rename from src/components/pages/Stream/ExitButton/ExitButton.tsx rename to src/components/pages/Stream/components/buttons/ExitButton/ExitButton.tsx diff --git a/src/components/pages/Stream/FullscreenButton/FullscreenButton.tsx b/src/components/pages/Stream/components/buttons/FullscreenButton/FullscreenButton.tsx similarity index 100% rename from src/components/pages/Stream/FullscreenButton/FullscreenButton.tsx rename to src/components/pages/Stream/components/buttons/FullscreenButton/FullscreenButton.tsx diff --git a/src/components/pages/Stream/LanguageButton/EN.svg b/src/components/pages/Stream/components/buttons/LanguageButton/EN.svg similarity index 100% rename from src/components/pages/Stream/LanguageButton/EN.svg rename to src/components/pages/Stream/components/buttons/LanguageButton/EN.svg diff --git a/src/components/pages/Stream/LanguageButton/LanguageButton.tsx b/src/components/pages/Stream/components/buttons/LanguageButton/LanguageButton.tsx similarity index 100% rename from src/components/pages/Stream/LanguageButton/LanguageButton.tsx rename to src/components/pages/Stream/components/buttons/LanguageButton/LanguageButton.tsx diff --git a/src/components/pages/Stream/LanguageButton/RU.svg b/src/components/pages/Stream/components/buttons/LanguageButton/RU.svg similarity index 100% rename from src/components/pages/Stream/LanguageButton/RU.svg rename to src/components/pages/Stream/components/buttons/LanguageButton/RU.svg diff --git a/src/components/pages/Stream/MicroButton/MicroButton.tsx b/src/components/pages/Stream/components/buttons/MicroButton/MicroButton.tsx similarity index 100% rename from src/components/pages/Stream/MicroButton/MicroButton.tsx rename to src/components/pages/Stream/components/buttons/MicroButton/MicroButton.tsx diff --git a/src/components/pages/Stream/ShareButton/ShareButton.tsx b/src/components/pages/Stream/components/buttons/ShareButton/ShareButton.tsx similarity index 100% rename from src/components/pages/Stream/ShareButton/ShareButton.tsx rename to src/components/pages/Stream/components/buttons/ShareButton/ShareButton.tsx diff --git a/src/components/pages/Stream/UserButtonMobile/UserButtonMobile.tsx b/src/components/pages/Stream/components/buttons/UserButtonMobile/UserButtonMobile.tsx similarity index 100% rename from src/components/pages/Stream/UserButtonMobile/UserButtonMobile.tsx rename to src/components/pages/Stream/components/buttons/UserButtonMobile/UserButtonMobile.tsx diff --git a/src/components/pages/Stream/WideSidebarButton/Menu.svg b/src/components/pages/Stream/components/buttons/WideSidebarButton/Menu.svg similarity index 100% rename from src/components/pages/Stream/WideSidebarButton/Menu.svg rename to src/components/pages/Stream/components/buttons/WideSidebarButton/Menu.svg diff --git a/src/components/pages/Stream/WideSidebarButton/WideSidebarButton.tsx b/src/components/pages/Stream/components/buttons/WideSidebarButton/WideSidebarButton.tsx similarity index 100% rename from src/components/pages/Stream/WideSidebarButton/WideSidebarButton.tsx rename to src/components/pages/Stream/components/buttons/WideSidebarButton/WideSidebarButton.tsx diff --git a/src/components/pages/Stream/components/popups/PopupAdditional/PopupAdditional.tsx b/src/components/pages/Stream/components/popups/PopupAdditional/PopupAdditional.tsx new file mode 100644 index 0000000..abd7d27 --- /dev/null +++ b/src/components/pages/Stream/components/popups/PopupAdditional/PopupAdditional.tsx @@ -0,0 +1,65 @@ +import '../popup.css' +import { ControlPanelMobile } from "components/pages/Stream/components/ControlPanelMobile/ControlPanelMobile" +import { PopupInviteMobile } from "../PopupInviteMobile/PopupInviteMobile" +import { PopupExitMobile } from '../PopupExitMobile/PopupExitMobile' +import { PopupLanguageMobile } from '../PopupLanguageMobile/PopupLanguageMobile' +import { useEffect, useState } from 'react' + +export const PopupAdditional: React.FC = ({ closePopup, currentLang, active, closeStream, handleLanguage, height }) => { + const [popup, setPopup] = useState(true) + const [popupShare, setPopupShare] = useState(false) + const [popupLanguage, setPopupLanguage] = useState(false) + const [popupExit, setPopupExit] = useState(false) + + const handleCloseComponent = () => { + setPopup(true) + setPopupExit(false) + setPopupShare(false) + setPopupLanguage(false) + + } + + useEffect(() => { + if (active) { + handleCloseComponent() + } + }, [active]) + + useEffect(() => () => handleCloseComponent(), []); + + + const handleMainPopupOff = () => { + setPopup(false) + } + + const handlePopupShare = () => { + handleMainPopupOff() + setPopupShare(true) + } + + const handlePopupExit = () => { + handleMainPopupOff() + setPopupExit(true) + } + + + const handleLanguagePopup = () => { + handleMainPopupOff() + setPopupLanguage(true) + } + + console.log(height) + + return (
+
+ {popup && ( setPopup(true)} setPopupExit={handlePopupExit} setPopupShare={handlePopupShare} setPopupInvite={handlePopupShare} setLanguagePopup={handleLanguagePopup}> + )} + {popupShare && ( setPopup(true)} setPopup={() => setPopupShare(false)}> + )} + {popupLanguage && ( setPopup(true)} setPopup={() => setPopupLanguage(false)}> + )} + {popupExit && ( setPopup(true)} setPopup={() => setPopupExit(false)}> + )} +
+
) +} \ No newline at end of file diff --git a/src/components/pages/Stream/PopupExit/PopupExit.css b/src/components/pages/Stream/components/popups/PopupExit/PopupExit.css similarity index 100% rename from src/components/pages/Stream/PopupExit/PopupExit.css rename to src/components/pages/Stream/components/popups/PopupExit/PopupExit.css diff --git a/src/components/pages/Stream/PopupExit/PopupExit.tsx b/src/components/pages/Stream/components/popups/PopupExit/PopupExit.tsx similarity index 95% rename from src/components/pages/Stream/PopupExit/PopupExit.tsx rename to src/components/pages/Stream/components/popups/PopupExit/PopupExit.tsx index 4943ee7..5c7ead5 100644 --- a/src/components/pages/Stream/PopupExit/PopupExit.tsx +++ b/src/components/pages/Stream/components/popups/PopupExit/PopupExit.tsx @@ -21,7 +21,6 @@ export const PopupExit: React.FC = ({ setClose, onExit }) => { + + + ) +} \ No newline at end of file diff --git a/src/components/pages/Stream/components/popups/PopupInviteMobile/PopupInviteMobile.tsx b/src/components/pages/Stream/components/popups/PopupInviteMobile/PopupInviteMobile.tsx new file mode 100644 index 0000000..1791dc0 --- /dev/null +++ b/src/components/pages/Stream/components/popups/PopupInviteMobile/PopupInviteMobile.tsx @@ -0,0 +1,50 @@ +import back from 'images/icons/Back.svg' +import { useTranslation } from 'react-i18next' +import { useState } from 'react' + + +export const PopupInviteMobile: React.FC = ({ setPopup, handleReturn }) => { + const { t } = useTranslation() + const [copy, setCopy] = useState(false); + + function copyLink() { + navigator.clipboard.writeText(window.location.href); + setCopy((prev) => !prev); + } + + const onReturnClick = () => { + setPopup() + handleReturn() + } + + return ( + <> +
+ +

{t('popup-control-invite-title')}

+
+
+

{t('popup-control-link')}

+ + {!copy ? ( + + ) : ( + + )} + +
+ + ) +} \ No newline at end of file diff --git a/src/components/pages/Stream/components/popups/PopupLanguageMobile/PopupLanguageMobile.tsx b/src/components/pages/Stream/components/popups/PopupLanguageMobile/PopupLanguageMobile.tsx new file mode 100644 index 0000000..42dc252 --- /dev/null +++ b/src/components/pages/Stream/components/popups/PopupLanguageMobile/PopupLanguageMobile.tsx @@ -0,0 +1,44 @@ +import back from 'images/icons/Back.svg' +import ok from 'images/icons/OK.svg' +import { useTranslation } from 'react-i18next' + +export const PopupLanguageMobile: React.FC = ({ currentLang, setPopup, handleReturn, handleLanguage }) => { + console.log(currentLang) + const buttonArray = [{ + value: 'ru', + captionInt: "Русский", + caption: 'Русский', + }, { + value: 'en', + captionInt: "English", + caption: 'Английский', + }] + const { t } = useTranslation() + + const onReturnClick = () => { + setPopup() + handleReturn() + } + return ( + <> +
+ +

{t('popup-change-language')}

+
+
+ {buttonArray.map((i, index) => ( + + ))} + +
+ + + ) +} \ No newline at end of file diff --git a/src/components/pages/Stream/PopupShare/PopupShare.tsx b/src/components/pages/Stream/components/popups/PopupShare/PopupShare.tsx similarity index 100% rename from src/components/pages/Stream/PopupShare/PopupShare.tsx rename to src/components/pages/Stream/components/popups/PopupShare/PopupShare.tsx diff --git a/src/components/pages/Stream/PopupShare/copiedIcon.svg b/src/components/pages/Stream/components/popups/PopupShare/copiedIcon.svg similarity index 100% rename from src/components/pages/Stream/PopupShare/copiedIcon.svg rename to src/components/pages/Stream/components/popups/PopupShare/copiedIcon.svg diff --git a/src/components/pages/Stream/PopupShare/copyIcon.svg b/src/components/pages/Stream/components/popups/PopupShare/copyIcon.svg similarity index 100% rename from src/components/pages/Stream/PopupShare/copyIcon.svg rename to src/components/pages/Stream/components/popups/PopupShare/copyIcon.svg diff --git a/src/components/pages/Stream/PopupShare/sharePopup.css b/src/components/pages/Stream/components/popups/PopupShare/sharePopup.css similarity index 100% rename from src/components/pages/Stream/PopupShare/sharePopup.css rename to src/components/pages/Stream/components/popups/PopupShare/sharePopup.css diff --git a/src/components/pages/Stream/components/popups/UserListMobliePopup/UserListMobilePopup.tsx b/src/components/pages/Stream/components/popups/UserListMobliePopup/UserListMobilePopup.tsx new file mode 100644 index 0000000..6722c77 --- /dev/null +++ b/src/components/pages/Stream/components/popups/UserListMobliePopup/UserListMobilePopup.tsx @@ -0,0 +1,21 @@ +import { User } from "components/pages/Stream/components/User/User" +import close from 'images/icons/close.svg' +import { useTranslation } from "react-i18next" + +export const UserListMobilePopup: React.FC = ({ isMobile, closePopup, userArr }) => { + const {t} = useTranslation() + return (
+
+
+ +
+

{t('popup-userlist')}

+ {userArr.map((i: any) => ( + ))} +
+ +
) +} \ No newline at end of file diff --git a/src/components/pages/Stream/components/popups/popup.css b/src/components/pages/Stream/components/popups/popup.css new file mode 100644 index 0000000..e222550 --- /dev/null +++ b/src/components/pages/Stream/components/popups/popup.css @@ -0,0 +1,65 @@ +.popup-header-mobile { + display: flex; + flex-direction: row; + gap: 12px; + align-items: center; +} + +.popup-invite-title { + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 120%; + /* identical to box height, or 24px */ + + + /* Graff/White/Inactive */ + + color: #C5C7CE; + margin: 0; +} + +.popup-invite-container { + display: flex; + flex-direction: column; + gap: 16px; +} + +.popup-exit-container { + padding-top: 48px; +} + +.popup-exit-button-container-mobile { + display: flex; + flex-direction: row; + gap: 8px; +} + +.popup-button-language { + position: relative; + text-align: left; + font-family: 'Inter'; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 50%; + color: #FFFFFF; + padding: 16px 12px; + position: relative; + /* Button_1 */ + background: #23242A; + border-radius: 4px; +} + +.popup-button-container-language { + display: flex; + flex-direction: column; + gap: 2px; +} + +.popup-button-icon-active { + position: absolute; + right: 12px; + top: 20px; +} \ No newline at end of file diff --git a/src/components/shared/Button/Button.tsx b/src/components/shared/Button/Button.tsx index ad576cb..227b7ae 100644 --- a/src/components/shared/Button/Button.tsx +++ b/src/components/shared/Button/Button.tsx @@ -1,4 +1,4 @@ -import "components/pages/Stream/Sidebar/Sidebar.css"; +import "components/pages/Stream/components/Sidebar/Sidebar.css"; import { useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; diff --git a/src/images/icons/Back.svg b/src/images/icons/Back.svg new file mode 100644 index 0000000..bca8722 --- /dev/null +++ b/src/images/icons/Back.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/Language.svg b/src/images/icons/Language.svg new file mode 100644 index 0000000..84c2975 --- /dev/null +++ b/src/images/icons/Language.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/OK.svg b/src/images/icons/OK.svg new file mode 100644 index 0000000..9240505 --- /dev/null +++ b/src/images/icons/OK.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/index.css b/src/index.css index a29ca96..68a3f83 100644 --- a/src/index.css +++ b/src/index.css @@ -12,6 +12,9 @@ body { } .popup-mobile { + display: flex; + flex-direction: column; + justify-content: space-between; position: absolute; background: #151619; width: calc(100% - 60px); @@ -23,6 +26,7 @@ body { } .popup-mobile-container { + height: 100%; display: flex; flex-direction: column; gap: 8px;