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

ui update progress

Browse Source
This commit is contained in:
DmitriyB
2023-03-07 15:59:17 +05:00
parent 4107a85a4d
commit 240f28935d
20 changed files with 155 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/ConnectPage/PopupComponent/PopupComponent.tsx
+1 -1
View File
@@ -53,7 +53,7 @@ export const PopupComponent: React.FC = () => {
<PopupConnect
isLoading={true}
logo={currentCard.logo}
onConnect={() => dispatch(createSession(currentCard.title))}
onConnect={() => dispatch(createSession(currentCard.app_title))}
></PopupConnect>
</motion.div>
)}
src/components/pages/Main/Card/Card.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ export const Card: React.FC<any> = ({ item, onClick }) => {
<div className="card-header">
<img src={item.icon} className="card-icon" alt="лого" />
<div className="card-name">
<h2 className="caption-name">{item.app_title}</h2>
<h2 className="caption-name">{item.title}</h2>
<h2 className="card-location">{item.location}</h2>
</div>
</div>
src/components/pages/Stream/ControlButton/ControlButton.tsx
+1 -1
View File
@@ -29,7 +29,7 @@ export const ControlButton: React.FC<any> = ({
}
return (
<div onClick={handleClick} className="toolbar-button-area">
<div style={{pointerEvents: "none"}} onClick={handleClick} className="toolbar-button-area">
<Button
isSidebarWide={isSidebarWide}
button={button}
src/components/pages/Stream/MicroButton/MicroButton.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ export const MicroButton: React.FC<any> = ({
}
return (
<div tabIndex={-1} onClick={handleClick} className="toolbar-button-area">
<div style={{pointerEvents: "none"}} tabIndex={-1} onClick={handleClick} className="toolbar-button-area">
<Button
isSidebarWide={isSidebarWide}
button={button}
src/components/pages/Stream/PlayerComponent/PlayerComponent.tsx
+11 -3
View File
@@ -1,6 +1,6 @@
import "./PlayerStyles.css";
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import React, { useEffect, useState, useRef } from "react";
import { useHistory, useParams } from "react-router-dom";
import useWindowDimensions from "hooks/useWindowDimensions";
import useMobile from "hooks/useMobile";
@@ -15,12 +15,13 @@ type link = {
};
export const PlayerComponent: React.FC<any> = ({ closeStream }) => {
const frameRef = useRef<HTMLIFrameElement>()
const { isMobile } = useMobile();
const windowDimensions = useWindowDimensions();
const width = windowDimensions.width;
const height = windowDimensions.height;
const [popup, setPopup] = useState(false);
const history = useHistory()
console.log(popup);
const { id } = useParams<link>();
@@ -58,6 +59,8 @@ export const PlayerComponent: React.FC<any> = ({ closeStream }) => {
}
}, [width, height, isMobile]);
return (
<>
{popup && (
@@ -66,6 +69,7 @@ export const PlayerComponent: React.FC<any> = ({ closeStream }) => {
</div>
)}
<iframe
ref={frameRef}
onLoad={(e: any) => e.target.focus()}
id="player"
onBlur={(e) => e.target.focus()} /// element loosing focus and keyboard input doesn't work
@@ -84,3 +88,7 @@ export const PlayerComponent: React.FC<any> = ({ closeStream }) => {
</>
);
};
function getElementById(arg0: string) {
throw new Error("Function not implemented.");
}
src/components/pages/Stream/Sidebar/Sidebar.tsx
+8 -1
View File
@@ -10,10 +10,15 @@ export const Sidebar: React.FC<any> = ({ closeStream, exitPopup, isMobile, heigh
const [isControl, setControl] = useState(false);
const [height, setHeight] = useState(heightDevice);
useEffect(() => {
if (isMobile) {
setHeight(heightDevice)
}
}, [heightDevice])
console.log(isMobile);
const handleMuteClick = () => {
setMuted((prev) => !prev);
@@ -27,6 +32,7 @@ export const Sidebar: React.FC<any> = ({ closeStream, exitPopup, isMobile, heigh
<>
{isMobile ? (
<SidebarMobile
isMobile={isMobile}
height={height}
isMuted={isMuted}
isControl={isControl}
@@ -36,6 +42,7 @@ export const Sidebar: React.FC<any> = ({ closeStream, exitPopup, isMobile, heigh
></SidebarMobile>
) : (
<SidebarDesktop
isMobile={isMobile}
isMuted={isMuted}
isControl={isControl}
handleMuteClick={handleMuteClick}
src/components/pages/Stream/SidebarDesktop/SidebarDesktop.tsx
+4 -2
View File
@@ -22,6 +22,7 @@ export const SidebarDesktop: React.FC<any> = ({
isControl,
handleMuteClick,
handleControlClick,
isMobile
}) => {
const [open, setOpen] = useState(false);
const [popup, setPopup] = useState({
@@ -33,7 +34,7 @@ export const SidebarDesktop: React.FC<any> = ({
console.log("test");
}, [exitPopup]);
const isAdmin = true;
const isAdmin = false;
const [wideSidebar, setWideSidebar] = useState(false);
@@ -83,7 +84,7 @@ export const SidebarDesktop: React.FC<any> = ({
return (
<>
<motion.div
/// onHoverEnd={() => /// closeSideBar()}
onHoverEnd={() => closeSideBar()}
initial={false}
animate={open ? "open" : "closed"}
variants={wideSidebar ? setAnimation() : sidebarVariants}
@@ -97,6 +98,7 @@ export const SidebarDesktop: React.FC<any> = ({
<FullscreenButton isSidebarWide={wideSidebar}> </FullscreenButton>
<div className="toolbar-button-container-border-line"></div>
<UserList
isMobile={isMobile}
closeSidebar={closeSideBar}
isSidebarWide={wideSidebar} /// this is for disable showhing button's caption
isAdmin={isAdmin}
src/components/pages/Stream/SidebarMobile/SidebarMobile.tsx
+17 -3
View File
@@ -12,17 +12,19 @@ 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";
export const SidebarMobile: React.FC<any> = ({ height }) => {
export const SidebarMobile: React.FC<any> = ({ height, isMobile }) => {
const [open, setOpen] = useState(false);
const [userList, setUserList] = useState(false);
const [popupAdditional, setPopupAdditipnal] = useState(false);
console.log(userList, 'popup')
return (
<motion.div
<> <motion.div
initial={false}
animate={open ? "open" : "closed"}
variants={sidebarVariants}
style={{ height: height}}
style={{ height: height }}
className="toolbar-container"
>
<div className="toolbar-field">
@@ -60,5 +62,17 @@ export const SidebarMobile: React.FC<any> = ({ height }) => {
</AnimatePresence>
</div>
</motion.div>
<AnimatePresence>
{userList && (<motion.div key={1}
variants={popupAnimation}
initial={"hidden"}
animate={"show"}
exit={"hidden"}
>
<UserListMobile closePopup={() => setUserList(false)} isMobile={isMobile}></UserListMobile>
</motion.div>)}
</AnimatePresence>
</>
);
};
src/components/pages/Stream/User/User.css
+15
View File
@@ -7,6 +7,14 @@
justify-content: space-between;
}
.user-container-mobile {
box-sizing: border-box;
padding: 8px;
background: #1C1D21;
border-radius: 4px;
}
.user {
display: flex;
align-items: center;
@@ -59,6 +67,13 @@
padding: 8px;
}
.user-button-container-mobile {
background: #1C1D21;
padding: 0px 8px 8px 8px;
}
.icon-container {
cursor: pointer;
padding: 8px;
src/components/pages/Stream/User/User.tsx
+4 -3
View File
@@ -22,11 +22,12 @@ export const User: React.FC<any> = ({
isAdmin,
isSidebarWide,
closeSidebar,
isMobile
}) => {
const [hover, setHover] = useState(false);
const [expand, setExpand] = useState(false);
const [mute, setMute] = useState(true);
const [isControl, setControl] = useState(false);
const [isControl, setControl] = useState(true);
useEffect(() => {
setExpand(false);
@@ -45,7 +46,7 @@ export const User: React.FC<any> = ({
animate={expand ? "open" : "closed"}
className="user-wrapper"
>
<div onClick={expandMenu} className="user-container">
<div onClick={expandMenu} className={isMobile ? "user-container-mobile user-container" : "user-container"}>
<div className="user">
<motion.div
onHoverStart={() => setHover(true)}
@@ -111,7 +112,7 @@ export const User: React.FC<any> = ({
initial={"hidden"}
animate={"show"}
exit={"hidden"}
className="user-button-container"
className={isMobile ? "user-button-container user-button-container-mobile" : "user-button-container"}
>
<div
onClick={() => setControl((prev) => !prev)}
src/components/pages/Stream/UserList/UserList.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { User } from "components/pages/Stream/User/User";
export const UserList: React.FC<any> = ({ isSidebarWide, isAdmin, closeSidebar }) => {
export const UserList: React.FC<any> = ({ isSidebarWide, isAdmin, closeSidebar, isMobile }) => {
return (
<div className="toolbar-field-part">
<User closeSidebar={closeSidebar} isAdmin={isAdmin} isSidebarWide={isSidebarWide}></User>
src/components/pages/Stream/UserListMoblie/UserListMobile.tsx
+18
View File
@@ -0,0 +1,18 @@
import { User } from "../User/User"
import close from 'images/icons/close.svg'
export const UserListMobile: React.FC<any> = ({ isMobile, closePopup }) => {
return (<div className="popup-mobile">
<div className="popup-mobile-container">
<div style={{top:"-20px", right: "-20px"}} onClick={closePopup} className="icon-close-container">
<img src={close}></img>
</div>
<h2 style={{ marginBottom: "20px" }}>Участники демонстрации</h2>
<User isMobile={isMobile} closeSidebar={closePopup}
isSidebarWide={true} /// this is for disable showhing button's caption
isAdmin={false}
></User>
</div>
</div>)
}