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

добавлен контейнер для моб версии, в котором отображаются участники, либо доп настройки

Browse Source
This commit is contained in:
DmitriyB
2022-08-10 18:00:36 +05:00
parent d5dd17cf91
commit ef40a25c78
11 changed files with 294 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mainScreen/mainScreen.tsx
+44 -11
View File
@@ -2,12 +2,14 @@ import React, { useContext, useState } from "react";
import { CSSTransition } from "react-transition-group";
import { ContextWindowHeight } from "../contextWindowHeight";
import './mainScreen.css';
import { MobileAddPart } from "./mobileAddPart/mobileAddPart";
import { MobileUsersPart } from "./mobileUsersPart/mobileUsersPart";
import { Toolbar } from "./toolbar/toolbar";
export const MainScreen:React.FC = React.memo(() => {
const [showToolbar, setShowToolbar] = useState<boolean>(false);
const [showMobileUsersPart, setShowMobileUsersPart] = useState<boolean>(false);
const [showMobileOtherPart, setShowMobileOtherPart] = useState<boolean>(false);
const windowHeight = useContext(ContextWindowHeight);
function onClickToolbar() {
@@ -15,6 +17,8 @@ export const MainScreen:React.FC = React.memo(() => {
}
function openMobileUsers() {
closeMobileOther();
setShowMobileUsersPart(true);
}
@@ -22,6 +26,16 @@ export const MainScreen:React.FC = React.memo(() => {
setShowMobileUsersPart(false);
}
function openMobileOther() {
closeMobileUsers();
setShowMobileOtherPart(true);
}
function closeMobileOther() {
setShowMobileOtherPart(false);
}
return <div className="main-screen-container">
<div className="main-screen-model"></div>
<CSSTransition
@@ -33,20 +47,39 @@ export const MainScreen:React.FC = React.memo(() => {
onClickOpenButton={onClickToolbar}
isOpen={showToolbar}
onClickMobileUsers={openMobileUsers}
isOpenUsersMobilePart={showMobileUsersPart}
onClickMobileOther={openMobileOther}
isOpenOtherMobilePart={showMobileOtherPart}
/>
</CSSTransition>
{
windowHeight < 700 || navigator.userAgent.includes('iPhone') ?
<CSSTransition
in={showMobileUsersPart}
timeout={300}
classNames='show-mobile-users'
unmountOnExit
>
<MobileUsersPart
onClickClose={closeMobileUsers}
/>
</CSSTransition>
windowHeight < 700?
<>
<CSSTransition
in={showMobileUsersPart}
timeout={300}
classNames='show-mobile-users'
unmountOnExit
>
<MobileAddPart
onClickClose={closeMobileUsers}
title='Участники демонстрации'
type="users"
/>
</CSSTransition>
<CSSTransition
in={showMobileOtherPart}
timeout={300}
classNames='show-mobile-users'
unmountOnExit
>
<MobileAddPart
onClickClose={closeMobileOther}
title='Дополнительно'
type="other"
/>
</CSSTransition>
</>
: null
}
</div>
src/components/mainScreen/mobileAddPart/addPartItem.tsx
+49
View File
@@ -0,0 +1,49 @@
import React from "react";
import { ToolbarButton } from "../toolbar/toolbarButton";
import { TypeToolbarButtons } from "../toolbar/typeButtons";
import { BorderLine } from "./borderLine";
import { CaptionToolbarButtons } from "../toolbar/typeCaptionButtons";
type TProps = {
typeUser: TypeToolbarButtons
onClickMicro?: () => void
onClickControl?: () => void
onClickItem?: () => void
}
export const AddPartItem:React.FC<TProps> = React.memo((props) => {
return <div className="user-item" onClick={() => props?.onClickItem ? props?.onClickItem() : null}>
<ToolbarButton
type={props.typeUser}
caption=""
isCaption={false}
onClick={() => null}
/>
<div className="user-item-user-info-container">
<div className="user-item-user-info">
<span className="user-item-user-info-name">{CaptionToolbarButtons[props.typeUser]}</span>
{
props.typeUser.includes('user') ?
<div className="user-item-user-info-buttons">
<ToolbarButton
type="micro"
active={true}
caption=''
isCaption={false}
onClick={() => props?.onClickMicro ? props?.onClickMicro() : null}
/>
<ToolbarButton
type="control"
active={false}
caption=''
isCaption={false}
onClick={() => props?.onClickControl ? props?.onClickControl() : null }
/>
</div>
: null
}
</div>
<BorderLine />
</div>
</div>
})
src/components/mainScreen/mobileAddPart/borderLine.tsx
+5
View File
@@ -0,0 +1,5 @@
import React from "react";
export const BorderLine:React.FC = React.memo(() => {
return <div className="border-line"></div>
})
src/components/mainScreen/mobileAddPart/closeIcon.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 12L16.9996 17M12 12L17 7M12 12L7 17M12 12L7.00002 7" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 233 B

src/components/mainScreen/mobileAddPart/mobileAddPart.css
+100
View File
@@ -0,0 +1,100 @@
.mobile-users-part {
position: relative;
width: 100%;
height: 100%;
display: flex;
padding: 32px;
display: flex;
flex-direction: column;
color: #FFFFFF;
box-sizing: border-box;
background-color: #333333;
}
.border-line {
width: 100%;
height: 1px;
background-color: #4F4F4F;
}
.mobile-users-part-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 24px;
}
.mobile-users-part-header-title {
font-weight: 600;
font-size: 22px;
line-height: 130%;
}
.mobile-users-part-header-close-button {
width: 30px;
height: 30px;
border: none;
background-color: transparent;
background: url('closeIcon.svg') 50% 50% no-repeat;
background-size: 100% 100%;
}
.mobile-users-part-users-container {
display: flex;
flex-direction: column;
gap: 12px;
overflow-y: auto;
padding-top: 12px;
}
.user-item {
display: flex;
flex-direction: row;
gap: 8px;
}
.user-item-user-info-container {
display: flex;
flex-direction: column;
width: 100%;
gap: 12px;
}
.user-item-user-info {
display: flex;
justify-content: space-between;
align-items: center;
}
.user-item-user-info-name {
height: 44px;
display: flex;
align-items: center;
}
.user-item-user-info-buttons {
display: flex;
gap: 8px;
}
.show-mobile-users-enter {
transform: translateX(-15%);
opacity: 0;
}
.show-mobile-users-enter-active {
transform: translateX(0);
opacity: 1;
transition: .3s;
}
.show-mobile-users-exit {
transform: translateX(0);
opacity: 1;
}
.show-mobile-users-exit-active {
transform: translateX(-100%);
opacity: 0;
transition: .3s;
}
src/components/mainScreen/mobileAddPart/mobileAddPart.tsx
+49
View File
@@ -0,0 +1,49 @@
import React from "react";
import { BorderLine } from "./borderLine";
import { MobileAddPartHeader } from "./mobileAddPartHeader";
import './mobileAddPart.css';
import { AddPartItem } from "./addPartItem";
type TProps = {
onClickClose: () => void
title: string
type: 'users' | 'other'
users?: '???' //
onClickShare?: () => void
onClickExit?: () => void
}
export const MobileAddPart:React.FC<TProps> = React.memo((props) => {
return <div className="mobile-users-part">
<MobileAddPartHeader
onClick={props.onClickClose}
title={props.title}
/>
<BorderLine />
<div className="mobile-users-part-users-container">
{
props.type === 'users' ?
<>
<AddPartItem typeUser="user admin"/>
<AddPartItem typeUser="user self" />
<AddPartItem typeUser="user guest" />
<AddPartItem typeUser="user guest" />
<AddPartItem typeUser="user guest" />
<AddPartItem typeUser="user guest" />
<AddPartItem typeUser="user guest" />
</>
: <>
<AddPartItem
typeUser="share"
onClickItem={props?.onClickShare}
/>
<AddPartItem
typeUser="exit"
onClickItem={props?.onClickExit}
/>
</>
}
</div>
</div>
})
src/components/mainScreen/mobileAddPart/mobileAddPartHeader.tsx
+18
View File
@@ -0,0 +1,18 @@
import React from "react";
type TProps = {
onClick: () => void
title: string
}
export const MobileAddPartHeader:React.FC<TProps> = React.memo((props) => {
return <div className="mobile-users-part-header">
<span className="mobile-users-part-header-title">
{props.title}
</span>
<button
className="mobile-users-part-header-close-button"
onClick={() => props.onClick()}
></button>
</div>
})
src/components/mainScreen/toolbar/buttonContainer.tsx
+3 -1
View File
@@ -10,7 +10,8 @@ type TProps = {
onClick: () => void,
isCaption: boolean
isNotification?: boolean,
active?: boolean
active?: boolean,
isSelected?: boolean
}>
}
@@ -26,6 +27,7 @@ export const ButtonContainer:React.FC<TProps> = React.memo((props) => {
caption={CaptionToolbarButtons[button.type]}
active={button?.active}
isCaption={button.isCaption}
isSelected={button?.isSelected}
/>)}
<BorderLine />
</div>
src/components/mainScreen/toolbar/toolbar.css
+4
View File
@@ -248,6 +248,10 @@
background-color: #4F4F4F;
}
.toolbar-button.selected {
background-color: #CE56C2;
}
src/components/mainScreen/toolbar/toolbar.tsx
+7 -2
View File
@@ -9,7 +9,10 @@ import { CaptionToolbarButtons } from "./typeCaptionButtons";
type TProps = {
onClickOpenButton: () => void
onClickMobileUsers?: () => void
onClickMobileOther?: () => void
isOpen: boolean
isOpenUsersMobilePart?: boolean
isOpenOtherMobilePart?: boolean
}
export const Toolbar:React.FC<TProps> = React.memo((props) => {
@@ -37,7 +40,8 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
{
type: "users",
onClick: props.onClickMobileUsers,
isCaption: false
isCaption: false,
isSelected: props?.isOpenUsersMobilePart
}
]}
/>
@@ -62,9 +66,10 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
{/* <BorderLine /> */}
<ToolbarButton
type="other"
onClick={() => null}
onClick={props.onClickMobileOther}
caption={CaptionToolbarButtons["other"]}
isCaption={false}
isSelected={props.isOpenOtherMobilePart}
/>
</div>
</div>
src/components/mainScreen/toolbar/toolbarButton.tsx
+12 -10
View File
@@ -9,34 +9,36 @@ type TProps = {
caption: string
active?: boolean
isNotification?: boolean
isSelected?: boolean
}
export const ToolbarButton:React.FC<TProps> = React.memo((props) => {
const [isActive, setIsActive] = useState<boolean>(props?.active || false);
const [isActive2, setIsActive2] = useState(false);
const [showAddButtons, setShowAddBUttons] = useState(false)
const [showAddButtons, setShowAddButtons] = useState(false)
function onClick() {
setIsActive(!isActive)
}
function onClick2() {
setIsActive2(!isActive2)
}
function showAdd() {
setShowAddBUttons(!showAddButtons);
setShowAddButtons(!showAddButtons);
}
return <div className="toolbar-button-area">
<button
className={`toolbar-button ${props.type} ${isActive ? 'on' : ''} ${props?.isNotification ? 'notification' : ''}`}
className={
`toolbar-button
${props.type} ${isActive ? 'on' : ''}
${props?.isNotification ? 'notification' : ''}
${props?.isSelected ? 'selected' : ''}
`
}
onClick={() => {
props.onClick();
showAdd();
//@ts-ignore
if(CaptionToolbarButtons[`${props.type} on`])
onClick()
if(CaptionToolbarButtons[`${props.type} on`] || props.type === 'users' || props.type === 'other')
onClick();
}}
>
</button>