From 48e3061c0979392cc11156304ea44e538f498d8c Mon Sep 17 00:00:00 2001 From: VyacheslavShtyrlin Date: Fri, 3 Mar 2023 00:37:22 +0500 Subject: [PATCH] Mobile: Inprogress --- .../AdditionalButton/AdditionalButton.tsx | 21 ++ .../Stream/ControlButton/ControlButton.tsx | 20 +- .../Stream/ControlPanel/ControlPanel.tsx | 7 +- .../pages/Stream/MicroButton/MicroButton.tsx | 17 +- .../PlayerComponent/PlayerComponent.tsx | 46 ++++- .../Stream/PlayerComponent/PlayerStyles.css | 20 +- .../pages/Stream/Sidebar/Sidebar.css | 2 + .../pages/Stream/Sidebar/Sidebar.tsx | 190 +++--------------- .../Stream/SidebarDesktop/SidebarDesktop.tsx | 169 ++++++++++++++++ .../Stream/SidebarMobile/SidebarMobile.tsx | 64 ++++++ .../UserButtonMobile/UserButtonMobile.tsx | 20 ++ src/hooks/useMobile.ts | 18 ++ src/hooks/useWindowDimensions.ts | 26 +++ src/images/icons/More.svg | 5 + src/images/icons/Persons.svg | 5 + src/images/icons/collapseButton.svg | 4 + src/index.css | 2 +- 17 files changed, 444 insertions(+), 192 deletions(-) create mode 100644 src/components/pages/Stream/AdditionalButton/AdditionalButton.tsx create mode 100644 src/components/pages/Stream/SidebarDesktop/SidebarDesktop.tsx create mode 100644 src/components/pages/Stream/SidebarMobile/SidebarMobile.tsx create mode 100644 src/components/pages/Stream/UserButtonMobile/UserButtonMobile.tsx create mode 100644 src/hooks/useMobile.ts create mode 100644 src/hooks/useWindowDimensions.ts create mode 100644 src/images/icons/More.svg create mode 100644 src/images/icons/Persons.svg create mode 100644 src/images/icons/collapseButton.svg diff --git a/src/components/pages/Stream/AdditionalButton/AdditionalButton.tsx b/src/components/pages/Stream/AdditionalButton/AdditionalButton.tsx new file mode 100644 index 0000000..f3c6468 --- /dev/null +++ b/src/components/pages/Stream/AdditionalButton/AdditionalButton.tsx @@ -0,0 +1,21 @@ +import { Button } from "components/shared/Button/Button"; +import more from "images/icons/More.svg"; + + +export const AdditionalButton: React.FC = ({ active, onClick }) => { + const button = { + icon: more, + inactive: "", + active: "", + type: "", + }; + return ( +
onClick()} + > + +
+ ); +}; diff --git a/src/components/pages/Stream/ControlButton/ControlButton.tsx b/src/components/pages/Stream/ControlButton/ControlButton.tsx index 32c68ea..f738459 100644 --- a/src/components/pages/Stream/ControlButton/ControlButton.tsx +++ b/src/components/pages/Stream/ControlButton/ControlButton.tsx @@ -6,11 +6,13 @@ import { useTranslation } from "react-i18next"; import { Button } from "components/shared/Button/Button"; - -export const ControlButton: React.FC = ({ onClick, isSidebarWide }) => { +export const ControlButton: React.FC = ({ + onClick, + isSidebarWide, + isActive, +}) => { const { t } = useTranslation(); - const [active, setActive] = useState(false); const [button, setButton] = useState({ icon: control, active: "request-control-btn", @@ -19,23 +21,19 @@ export const ControlButton: React.FC = ({ onClick, isSidebarWide }) => { }); useEffect(() => { - setButton({ ...button, icon: active ? control : controlOff }); - }, [active]); + setButton({ ...button, icon: isActive ? control : controlOff }); + }, [isActive]); function handleClick() { onClick(); - setActive((prev) => !prev); } return ( -
+
); diff --git a/src/components/pages/Stream/ControlPanel/ControlPanel.tsx b/src/components/pages/Stream/ControlPanel/ControlPanel.tsx index 2c71a19..d86ebc2 100644 --- a/src/components/pages/Stream/ControlPanel/ControlPanel.tsx +++ b/src/components/pages/Stream/ControlPanel/ControlPanel.tsx @@ -8,15 +8,18 @@ export const ControlPanel: React.FC = ({ handleOpenSharePopup, handleOpenExitPopup, handleMuteClick, + handleControlClick, + isMuted, + isControl, isSidebarWide }) => { return (
- console.log("click!")}> - + +
console.log("click!")}> diff --git a/src/components/pages/Stream/MicroButton/MicroButton.tsx b/src/components/pages/Stream/MicroButton/MicroButton.tsx index 7d2527a..ad00cac 100644 --- a/src/components/pages/Stream/MicroButton/MicroButton.tsx +++ b/src/components/pages/Stream/MicroButton/MicroButton.tsx @@ -8,7 +8,7 @@ import { Button } from "components/shared/Button/Button"; export const MicroButton: React.FC = ({ onClick, - isMuted, + isActive, isSidebarWide, }) => { const { t } = useTranslation(); @@ -19,27 +19,20 @@ export const MicroButton: React.FC = ({ type: "microphone", }); - const [active, setActive] = useState(false); - useEffect(() => { - setButton({ ...button, icon: active ? microOn : microOff }); - }, [active]); + setButton({ ...button, icon: isActive ? microOn : microOff }); + }, [isActive]); function handleClick() { onClick(); - setActive((prev) => !prev); } return ( -
+
); diff --git a/src/components/pages/Stream/PlayerComponent/PlayerComponent.tsx b/src/components/pages/Stream/PlayerComponent/PlayerComponent.tsx index bb66b73..6d63c22 100644 --- a/src/components/pages/Stream/PlayerComponent/PlayerComponent.tsx +++ b/src/components/pages/Stream/PlayerComponent/PlayerComponent.tsx @@ -1,7 +1,9 @@ import "./PlayerStyles.css"; import React, { useEffect, useState } from "react"; -import { useHistory, useParams } from "react-router-dom"; +import { useParams } from "react-router-dom"; +import useWindowDimensions from "hooks/useWindowDimensions"; +import useMobile from "hooks/useMobile"; import { Sidebar } from "components/pages/Stream/Sidebar/Sidebar"; import { connectSession } from "store/reducers/ActionCreator"; @@ -13,11 +15,18 @@ type link = { }; export const PlayerComponent: React.FC = ({ closeStream }) => { + const { isMobile } = useMobile(); + const windowDimensions = useWindowDimensions(); + const width = windowDimensions.width; + const height = windowDimensions.height; + const [popup, setPopup] = useState(false); + + console.log(popup); + const { id } = useParams(); - const [click, setClick] = useState(false) + const [click, setClick] = useState(false); const dispatch = useAppDispatch(); const { cleanErrors } = sessionSlice.actions; - const history = useHistory(); useEffect(() => { dispatch(connectSession(id)).then((res: any) => { @@ -27,19 +36,37 @@ export const PlayerComponent: React.FC = ({ closeStream }) => { }); return () => { dispatch(cleanErrors()); + window.removeEventListener("change ", (event: any) => { + setPopup(false); + }); }; }, []); const { url } = useAppSelector((state) => state.sessionReducer); const exitPopup = () => { - setClick(prev => !prev) - } + setClick((prev) => !prev); + }; + + useEffect(() => { + if (isMobile) { + if (width < height) { + setPopup(true); + } else { + setPopup(false); + } + } + }, [width, height, isMobile]); return ( <> + {popup && ( +
+

Переверните устройство

+
+ )} - + ); }; diff --git a/src/components/pages/Stream/PlayerComponent/PlayerStyles.css b/src/components/pages/Stream/PlayerComponent/PlayerStyles.css index a0de0e4..c775620 100644 --- a/src/components/pages/Stream/PlayerComponent/PlayerStyles.css +++ b/src/components/pages/Stream/PlayerComponent/PlayerStyles.css @@ -5,4 +5,22 @@ .playerOff { pointer-events: none; -} \ No newline at end of file +} + +.popup-screen { + position: absolute; + top: 0; + left: 0; + right: 0; + display: flex; + z-index: 99; + background: #1C1D21; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 125%; + align-items: center; + justify-content: center; + +} + diff --git a/src/components/pages/Stream/Sidebar/Sidebar.css b/src/components/pages/Stream/Sidebar/Sidebar.css index 3182ee8..cf28947 100644 --- a/src/components/pages/Stream/Sidebar/Sidebar.css +++ b/src/components/pages/Stream/Sidebar/Sidebar.css @@ -105,6 +105,8 @@ } .toolbar-button-area { + border-radius: 4px; + cursor: pointer; align-items: center; position: relative; diff --git a/src/components/pages/Stream/Sidebar/Sidebar.tsx b/src/components/pages/Stream/Sidebar/Sidebar.tsx index b4df732..8335938 100644 --- a/src/components/pages/Stream/Sidebar/Sidebar.tsx +++ b/src/components/pages/Stream/Sidebar/Sidebar.tsx @@ -1,175 +1,49 @@ import "./Sidebar.css"; -import React, { useState, useEffect } from "react"; -import { AnimatePresence, motion } from "framer-motion"; +import React, { useEffect, useState } from "react"; -import { UserList } from "components/pages/Stream/UserList/UserList"; -import { FullscreenButton } from "components/pages/Stream/FullscreenButton/FullscreenButton"; -import { PopupShare } from "components/pages/Stream/PopupShare/PopupShare"; -import { PopupExit } from "components/pages/Stream/PopupExit/PopupExit"; -import { ControlPanel } from "../ControlPanel/ControlPanel"; -import { WideSidebarButton } from "components/pages/Stream/WideSidebarButton/WideSidebarButton"; - -import { - sidebarVariants, - popupAnimation, - wideSidebarVariants, - wideSidebarAdminVariants, -} from "utils/animationProps"; - -export const Sidebar: React.FC = ({ closeStream, exitPopup }) => { - const [open, setOpen] = useState(false); - const [popup, setPopup] = useState({ - popup1: false, - popup2: false, - }); +import { SidebarDesktop } from "../SidebarDesktop/SidebarDesktop"; +import { SidebarMobile } from "../SidebarMobile/SidebarMobile"; - useEffect(() => { - console.log('test') - }, [exitPopup]) - - const isAdmin = true; - - const [selected, setSelected] = useState(false); - const [wideSidebar, setWideSidebar] = useState(false); - +export const Sidebar: React.FC = ({ closeStream, exitPopup, isMobile, heightDevice }) => { const [isMuted, setMuted] = useState(true); + const [isControl, setControl] = useState(false); + const [height, setHeight] = useState(heightDevice); + + + + + console.log(isMobile); const handleMuteClick = () => { setMuted((prev) => !prev); }; - function handleClosePopups() { - setPopup({ - popup1: false, - popup2: false, - }); - } - - function handleOpenSharePopup() { - setPopup({ - popup1: true, - popup2: false, - }); - } - - function handleOpenExitPopup() { - setPopup({ - popup1: false, - popup2: true, - }); - } - - function closeSideBar() { - setSelected(false); - setOpen(false); - setWideSidebar(false); - } - - useEffect(() => () => unmountComponent(), []); - - - function unmountComponent() { - setOpen(false); - setPopup({ - popup1: false, - popup2: false, - }); - } - - const setAnimation = () => { - if (isAdmin) return wideSidebarAdminVariants; - else { - return wideSidebarVariants; - } + const handleControlClick = () => { + setControl((prev) => !prev); }; return ( <> - /// closeSideBar()} - initial={false} - animate={open ? "open" : "closed"} - variants={wideSidebar ? setAnimation() : sidebarVariants} - className="toolbar-container" - > -
-
- -
- -
- setWideSidebar(true)} - className="toolbar-field-part" - > - - - -
- - {!open && ( - setOpen(true)} - className="toolbar-open-button" - > - - - )} - - - - {popup.popup1 && ( - - - - )} - - {popup.popup2 && ( - - - - )} - + {isMobile ? ( + + ) : ( + + )} ); }; -function getElementById(arg0: string) { - throw new Error("Function not implemented."); -} - diff --git a/src/components/pages/Stream/SidebarDesktop/SidebarDesktop.tsx b/src/components/pages/Stream/SidebarDesktop/SidebarDesktop.tsx new file mode 100644 index 0000000..616327a --- /dev/null +++ b/src/components/pages/Stream/SidebarDesktop/SidebarDesktop.tsx @@ -0,0 +1,169 @@ +import React, { useState, useEffect } from "react"; +import { AnimatePresence, motion } from "framer-motion"; + +import { UserList } from "components/pages/Stream/UserList/UserList"; +import { FullscreenButton } from "components/pages/Stream/FullscreenButton/FullscreenButton"; +import { PopupShare } from "components/pages/Stream/PopupShare/PopupShare"; +import { PopupExit } from "components/pages/Stream/PopupExit/PopupExit"; +import { ControlPanel } from "../ControlPanel/ControlPanel"; +import { WideSidebarButton } from "components/pages/Stream/WideSidebarButton/WideSidebarButton"; + +import { + sidebarVariants, + popupAnimation, + wideSidebarVariants, + wideSidebarAdminVariants, +} from "utils/animationProps"; + +export const SidebarDesktop: React.FC = ({ + closeStream, + exitPopup, + isMuted, + isControl, + handleMuteClick, + handleControlClick, +}) => { + const [open, setOpen] = useState(false); + const [popup, setPopup] = useState({ + popup1: false, + popup2: false, + }); + + useEffect(() => { + console.log("test"); + }, [exitPopup]); + + const isAdmin = true; + + const [wideSidebar, setWideSidebar] = useState(false); + + function handleClosePopups() { + setPopup({ + popup1: false, + popup2: false, + }); + } + + function handleOpenSharePopup() { + setPopup({ + popup1: true, + popup2: false, + }); + } + + function handleOpenExitPopup() { + setPopup({ + popup1: false, + popup2: true, + }); + } + + function closeSideBar() { + setOpen(false); + setWideSidebar(false); + } + + useEffect(() => () => unmountComponent(), []); + + function unmountComponent() { + setOpen(false); + setPopup({ + popup1: false, + popup2: false, + }); + } + + const setAnimation = () => { + if (isAdmin) return wideSidebarAdminVariants; + else { + return wideSidebarVariants; + } + }; + + return ( + <> + /// closeSideBar()} + initial={false} + animate={open ? "open" : "closed"} + variants={wideSidebar ? setAnimation() : sidebarVariants} + className="toolbar-container" + > +
+
+ +
+ +
+ setWideSidebar(true)} + className="toolbar-field-part" + > + + + +
+ + {!open && ( + setOpen(true)} + className="toolbar-open-button" + > + + + )} + + + + {popup.popup1 && ( + + + + )} + + {popup.popup2 && ( + + + + )} + + + ); +}; diff --git a/src/components/pages/Stream/SidebarMobile/SidebarMobile.tsx b/src/components/pages/Stream/SidebarMobile/SidebarMobile.tsx new file mode 100644 index 0000000..1d00cd1 --- /dev/null +++ b/src/components/pages/Stream/SidebarMobile/SidebarMobile.tsx @@ -0,0 +1,64 @@ +import { FullscreenButton } from "../FullscreenButton/FullscreenButton"; +import { AnimatePresence, motion } from "framer-motion"; +import { + sidebarVariants, + popupAnimation, + wideSidebarVariants, + wideSidebarAdminVariants, +} 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"; + +export const SidebarMobile: React.FC = ({ height }) => { + const [open, setOpen] = useState(false); + const [userList, setUserList] = useState(false); + const [popupAdditional, setPopupAdditipnal] = useState(false); + return ( + +
+
+ + setOpen(false)}> +
+ setUserList(true)} + > +
+
+ + +
+ setPopupAdditipnal(true)} + > +
+ + {!open && ( + setOpen(true)} + className="toolbar-open-button" + > + + + )} + +
+ + ); +}; diff --git a/src/components/pages/Stream/UserButtonMobile/UserButtonMobile.tsx b/src/components/pages/Stream/UserButtonMobile/UserButtonMobile.tsx new file mode 100644 index 0000000..8f57322 --- /dev/null +++ b/src/components/pages/Stream/UserButtonMobile/UserButtonMobile.tsx @@ -0,0 +1,20 @@ +import persons from "images/icons/Persons.svg"; +import { Button } from "components/shared/Button/Button"; + +export const UserButtonMobile: React.FC = ({ active, onClick }) => { + const button = { + icon: persons, + inactive: "", + active: "", + type: "", + }; + return ( +
onClick()} + > + +
+ ); +}; diff --git a/src/hooks/useMobile.ts b/src/hooks/useMobile.ts new file mode 100644 index 0000000..710cd04 --- /dev/null +++ b/src/hooks/useMobile.ts @@ -0,0 +1,18 @@ +import { useState, useEffect } from "react"; + +export default function useDeviceDetect() { + const [isMobile, setMobile] = useState(false); + + useEffect(() => { + const userAgent = + typeof window.navigator === "undefined" ? "" : navigator.userAgent; + const mobile = Boolean( + userAgent.match( + /Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i + ) + ); + setMobile(mobile); + }, []); + + return { isMobile }; +} diff --git a/src/hooks/useWindowDimensions.ts b/src/hooks/useWindowDimensions.ts new file mode 100644 index 0000000..f8072a6 --- /dev/null +++ b/src/hooks/useWindowDimensions.ts @@ -0,0 +1,26 @@ +import { useState, useEffect } from "react"; + +function getWindowDimensions() { + const { width: width, height: height } = window.visualViewport; + return { + width, + height, + }; +} + +export default function useWindowDimensions() { + const [windowDimensions, setWindowDimensions] = useState( + getWindowDimensions() + ); + + useEffect(() => { + function handleResize() { + setWindowDimensions(getWindowDimensions()); + } + + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, []); + + return windowDimensions; +} diff --git a/src/images/icons/More.svg b/src/images/icons/More.svg new file mode 100644 index 0000000..c1f0eb1 --- /dev/null +++ b/src/images/icons/More.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/Persons.svg b/src/images/icons/Persons.svg new file mode 100644 index 0000000..b180118 --- /dev/null +++ b/src/images/icons/Persons.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/collapseButton.svg b/src/images/icons/collapseButton.svg new file mode 100644 index 0000000..e11606a --- /dev/null +++ b/src/images/icons/collapseButton.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/index.css b/src/index.css index 6ae54d7..98e9d16 100644 --- a/src/index.css +++ b/src/index.css @@ -27,7 +27,7 @@ button { } .main { - margin: 240px auto 0 auto; + margin: 0 auto; width: 1440px; box-sizing: border-box; }