feat(ui) - assist ui - wip
This commit is contained in:
Shekar Siri
parent
250eaf1eb6
commit
54ebc487cc
12 changed files with 40 additions and 27 deletions
|
|
@ -15,7 +15,7 @@
|
|||
&.disabled {
|
||||
/* background-color: red; */
|
||||
& svg {
|
||||
fill: red;
|
||||
fill: $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,17 +28,17 @@ function ChatControls({ stream, endCall, videoEnabled, setVideoEnabled } : Props
|
|||
return (
|
||||
<div className={cn(stl.controls, "flex items-center w-full justify-start bottom-0 px-2")}>
|
||||
<div className="flex items-center">
|
||||
<div className={cn(stl.btnWrapper, { [stl.disabled]: !audioEnabled})}>
|
||||
<Button plain size="small" onClick={toggleAudio} noPadding className="flex items-center">
|
||||
<div className={cn(stl.btnWrapper, { [stl.disabled]: audioEnabled})}>
|
||||
<Button plain size="small" onClick={toggleAudio} noPadding className="flex items-center" hover>
|
||||
<Icon name={audioEnabled ? 'mic' : 'mic-mute'} size="16" />
|
||||
<span className="ml-2 color-gray-medium text-sm">{audioEnabled ? 'Mute' : 'Unmute'}</span>
|
||||
<span className={cn("ml-1 color-gray-medium text-sm", { 'color-red' : audioEnabled })}>{audioEnabled ? 'Mute' : 'Unmute'}</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className={cn(stl.btnWrapper, { [stl.disabled]: !videoEnabled})}>
|
||||
<Button plain size="small" onClick={toggleVideo} noPadding className="flex items-center">
|
||||
<div className={cn(stl.btnWrapper, { [stl.disabled]: videoEnabled})}>
|
||||
<Button plain size="small" onClick={toggleVideo} noPadding className="flex items-center" hover>
|
||||
<Icon name={ videoEnabled ? 'camera-video' : 'camera-video-off' } size="16" />
|
||||
<span className="ml-2 color-gray-medium text-sm">{videoEnabled ? 'Stop Video' : 'Start Video'}</span>
|
||||
<span className={cn("ml-1 color-gray-medium text-sm", { 'color-red' : videoEnabled })}>{videoEnabled ? 'Stop Video' : 'Start Video'}</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@ const ChatWindow: FC<Props> = function ChatWindow({ userId, incomeStream, localS
|
|||
const [localVideoEnabled, setLocalVideoEnabled] = useState(false)
|
||||
const [remoteVideoEnabled, setRemoteVideoEnabled] = useState(false)
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (!incomeStream) { return }
|
||||
const iid = setInterval(() => {
|
||||
|
|
@ -42,9 +41,9 @@ const ChatWindow: FC<Props> = function ChatWindow({ userId, incomeStream, localS
|
|||
className={cn(stl.wrapper, "fixed radius bg-white shadow-xl mt-16")}
|
||||
style={{ width: '280px' }}
|
||||
>
|
||||
<div className="handle flex items-center p-2 cursor-move select-none">
|
||||
<div className={stl.headerTitle}><b>Meeting</b> {userId}</div>
|
||||
<Counter startTime={new Date().getTime() } className="text-sm ml-auto" />
|
||||
<div className="handle flex items-center p-2 cursor-move select-none border-b">
|
||||
<div className={stl.headerTitle}><b>Talking to </b> {userId ? userId : 'Anonymous User'}</div>
|
||||
<Counter startTime={new Date().getTime() } className="text-sm ml-auto" />
|
||||
</div>
|
||||
<div className={cn(stl.videoWrapper, {'hidden' : minimize}, 'relative')}>
|
||||
<VideoContainer stream={ incomeStream } />
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
.wrapper {
|
||||
background-color: white;
|
||||
border: solid thin #000;
|
||||
border: solid thin $gray-light;
|
||||
border-radius: 3px;
|
||||
position: fixed;
|
||||
width: 300px;
|
||||
width: 300px;
|
||||
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.headerTitle {
|
||||
|
|
|
|||
|
|
@ -117,7 +117,7 @@ function AssistActions({ toggleChatWindow, userId, calling, peerConnectionStatus
|
|||
color={ onCall ? "red" : "gray-darkest" }
|
||||
/>
|
||||
<span className={cn("ml-2", { 'color-red' : onCall })}>{ onCall ? 'End Call' : 'Call' }</span> */}
|
||||
<IconButton size="small" primary={!onCall} red={onCall} label="Call" icon="headset" />
|
||||
<IconButton size="small" primary={!onCall} red={onCall} label={onCall ? 'End' : 'Call'} icon="headset" />
|
||||
</div>
|
||||
}
|
||||
content={ cannotCall ? "You don’t have the permissions to perform this action." : `Call ${userId ? userId : 'User'}` }
|
||||
|
|
|
|||
|
|
@ -126,6 +126,11 @@ export default class PlayerBlockHeader extends React.PureComponent {
|
|||
<HeaderInfo icon={ osIcon(userOs) } label={ userOs } /> */}
|
||||
|
||||
<div className='ml-auto flex items-center'>
|
||||
{ live && hasSessionsPath && (
|
||||
<div className={stl.liveSwitchButton} onClick={() => this.props.setSessionPath('')}>
|
||||
This Session is Now Continuing Live
|
||||
</div>
|
||||
)}
|
||||
<div className={ stl.divider } />
|
||||
<Popup
|
||||
trigger={(
|
||||
|
|
@ -144,19 +149,13 @@ export default class PlayerBlockHeader extends React.PureComponent {
|
|||
hideOnScroll
|
||||
/>
|
||||
<div className={ stl.divider } />
|
||||
|
||||
{ live && hasSessionsPath && (
|
||||
<div className={stl.liveSwitchButton} onClick={() => this.props.setSessionPath('')}>
|
||||
This Session is Now Continuing Live
|
||||
</div>
|
||||
)}
|
||||
{ _live && <AssistActions isLive userId={userId} /> }
|
||||
{ !_live && (
|
||||
<>
|
||||
<Autoplay />
|
||||
<div className={ stl.divider } />
|
||||
<IconButton
|
||||
className="mr-2"
|
||||
// className="mr-2"
|
||||
tooltip="Bookmark"
|
||||
tooltipPosition="top right"
|
||||
onClick={ this.toggleFavorite }
|
||||
|
|
@ -164,13 +163,14 @@ export default class PlayerBlockHeader extends React.PureComponent {
|
|||
icon={ favorite ? 'star-solid' : 'star' }
|
||||
plain
|
||||
/>
|
||||
<div className={ stl.divider } />
|
||||
<SharePopup
|
||||
entity="sessions"
|
||||
id={ sessionId }
|
||||
showCopyLink={true}
|
||||
trigger={
|
||||
<IconButton
|
||||
className="mr-2"
|
||||
// className="mr-2"
|
||||
tooltip="Share Session"
|
||||
tooltipPosition="top right"
|
||||
disabled={ disabled }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export default function MetaItem(props: Props) {
|
|||
const { className = '', label, value } = props
|
||||
return (
|
||||
<div className={cn("flex items-center rounded", className)}>
|
||||
<span className="rounded-tl rounded-bl bg-gray-light-shade px-2 color-gray-medium capitalize" style={{ maxWidth: "80px"}}>
|
||||
<span className="rounded-tl rounded-bl bg-gray-light-shade px-2 color-gray-medium capitalize" style={{ maxWidth: "100px"}}>
|
||||
<TextEllipsis text={label} className="p-0" popupProps={{ size: 'small' }} />
|
||||
</span>
|
||||
<span className="rounded-tr rounded-br bg-gray-lightest px-2 color-gray-dark capitalize" style={{ maxWidth: "100px"}}>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default function MetaMoreButton(props: Props) {
|
|||
content={
|
||||
<div className="flex flex-col">
|
||||
{list.slice(maxLength).map(({ label, value }, index) => (
|
||||
<MetaItem key={index} label={label} value={value} className="mb-2" />
|
||||
<MetaItem key={index} label={label} value={value} className="mb-3" />
|
||||
))}
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ const Confirmation = ({
|
|||
content={confirmation}
|
||||
header={header}
|
||||
className="confirmCustom"
|
||||
confirmButton={<Button size="small" id="confirm-button" primary>{ confirmButton }</Button>}
|
||||
confirmButton={<Button size="small" id="confirm-button" className="ml-0" primary>{ confirmButton }</Button>}
|
||||
cancelButton={<Button size="small" id="cancel-button" plain className={ stl.cancelButton }>{ cancelButton }</Button>}
|
||||
onCancel={() => proceed(false)}
|
||||
onConfirm={() => proceed(true)}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import cn from 'classnames';
|
||||
import { countries } from 'App/constants';
|
||||
import { Popup } from 'UI';
|
||||
import { Popup, Icon } from 'UI';
|
||||
import stl from './countryFlag.css';
|
||||
|
||||
const CountryFlag = React.memo(({ country, className, style = {}, label = false }) => {
|
||||
|
|
@ -13,7 +13,8 @@ const CountryFlag = React.memo(({ country, className, style = {}, label = false
|
|||
<Popup
|
||||
trigger={ knownCountry
|
||||
? <div className={ cn(`flag flag-${ countryFlag }`, className, stl.default) } />
|
||||
: <div className={ cn('text-sm', className) }>{ "N/A" }</div>
|
||||
: <Icon name="flag-na" size="22" className="-mx-1" />
|
||||
// : <div className={ cn('text-sm', className) }>{ "N/A" }</div>
|
||||
}
|
||||
content={ countryName }
|
||||
inverted
|
||||
|
|
|
|||
|
|
@ -336,4 +336,13 @@ a:hover {
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.ui.mini.modal>.header:not(.ui) {
|
||||
padding: 10px 17px !important;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
.ui.modal>.content {
|
||||
padding: 10px 17px !important;
|
||||
}
|
||||
3
frontend/app/svg/icons/flag-na.svg
Normal file
3
frontend/app/svg/icons/flag-na.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="22" height="14" viewBox="0 0 22 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0C0.895431 0 0 0.89543 0 2V12C0 13.1046 0.89543 14 2 14H20C21.1046 14 22 13.1046 22 12V2C22 0.895431 21.1046 0 20 0H2ZM11.0757 10V3.60156H9.98145V8.19385L7.10303 3.60156H6V10H7.10303V5.4165L9.97266 10H11.0757ZM15.0396 3.60156H15.3032L17.7202 10H16.5601L16.0423 8.50146H13.5654L13.0488 10H11.8931L14.3013 3.60156H14.5605H15.0396ZM13.8668 7.62695H15.7402L14.8024 4.91255L13.8668 7.62695Z" fill="#C4C4C4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 559 B |
Loading…
Add table
Reference in a new issue