Added support for locking rooms

This commit is contained in:
Håvar Aambø Fosstveit
2019-02-15 12:23:05 +01:00
parent 4fd3c6c8b1
commit 1c5f90cff6
11 changed files with 331 additions and 108 deletions
+31 -3
View File
@@ -59,11 +59,13 @@ class Sidebar extends Component
roomClient,
toolbarsVisible,
me,
screenProducer
screenProducer,
locked
} = this.props;
let screenState;
let screenTip;
let lockState = 'unlocked';
if (me.needExtension)
{
@@ -86,6 +88,11 @@ class Sidebar extends Component
screenTip = 'Start screen sharing';
}
if (locked)
{
lockState = 'locked';
}
return (
<div
className={classnames('sidebar room-controls', {
@@ -161,6 +168,25 @@ class Sidebar extends Component
</Otherwise>
</Choose>
</If>
<div
className={classnames('button', 'lock', lockState, {
on : locked
})}
data-tip={`Room is ${lockState}`}
data-place='right'
data-type='dark'
onClick={() =>
{
if (locked)
{
roomClient.unlockRoom();
}
else
{
roomClient.lockRoom();
}
}}
/>
<div
className={classnames('button', 'raise-hand', {
on : me.raiseHand,
@@ -188,7 +214,8 @@ Sidebar.propTypes = {
roomClient : PropTypes.any.isRequired,
toolbarsVisible : PropTypes.bool.isRequired,
me : appPropTypes.Me.isRequired,
screenProducer : appPropTypes.Producer
screenProducer : appPropTypes.Producer,
locked : PropTypes.bool.isRequired
};
const mapStateToProps = (state) =>
@@ -196,7 +223,8 @@ const mapStateToProps = (state) =>
toolbarsVisible : state.room.toolbarsVisible,
screenProducer : Object.values(state.producers)
.find((producer) => producer.source === 'screen'),
me : state.me
me : state.me,
locked : state.room.locked
});
export default withRoomContext(connect(
+102 -85
View File
@@ -73,97 +73,114 @@ class Room extends React.Component
democratic : Peers
}[room.mode];
return (
<Fragment>
<Appear duration={300}>
<div data-component='Room'>
<CookieConsent>
This website uses cookies to enhance the user experience.
</CookieConsent>
<FullScreenView advancedMode={room.advancedMode} />
<VideoWindow advancedMode={room.advancedMode} />
<div className='room-wrapper'>
<div data-component='Logo' />
<AudioPeers />
<Notifications />
<If condition={room.advancedMode}>
<div className='state' data-tip='Server status'>
<div className={classnames('icon', room.state)} />
<p className={classnames('text', room.state)}>{room.state}</p>
</div>
</If>
<div
className={classnames('room-link-wrapper room-controls', {
'visible' : this.props.room.toolbarsVisible
})}
>
<div className='room-link'>
<CopyToClipboard
text={room.url}
onCopy={onRoomLinkCopy}
>
<a
className='link'
href={room.url}
target='_blank'
data-tip='Click to copy room link'
rel='noopener noreferrer'
onClick={(event) =>
{
// If this is a 'Open in new window/tab' don't prevent
// click default action.
if (
event.ctrlKey || event.shiftKey || event.metaKey ||
// Middle click (IE > 9 and everyone else).
(event.button && event.button === 1)
)
{
return;
}
event.preventDefault();
}}
>
invitation link
</a>
</CopyToClipboard>
</div>
if (room.lockedOut)
{
return (
<Fragment>
<Appear duration={300}>
<div data-component='Room'>
<div className='locked-out'>
This room is locked at the moment, try again later.
</div>
<View advancedMode={room.advancedMode} />
<Draggable handle='.me-container' bounds='body' cancel='.display-name'>
</div>
</Appear>
</Fragment>
);
}
else
{
return (
<Fragment>
<Appear duration={300}>
<div data-component='Room'>
<CookieConsent>
This website uses cookies to enhance the user experience.
</CookieConsent>
<FullScreenView advancedMode={room.advancedMode} />
<VideoWindow advancedMode={room.advancedMode} />
<div className='room-wrapper'>
<div data-component='Logo' />
<AudioPeers />
<Notifications />
<If condition={room.advancedMode}>
<div className='state' data-tip='Server status'>
<div className={classnames('icon', room.state)} />
<p className={classnames('text', room.state)}>{room.state}</p>
</div>
</If>
<div
className={classnames('me-container', {
'active-speaker' : amActiveSpeaker
className={classnames('room-link-wrapper room-controls', {
'visible' : this.props.room.toolbarsVisible
})}
>
<Me
advancedMode={room.advancedMode}
/>
<div className='room-link'>
<CopyToClipboard
text={room.url}
onCopy={onRoomLinkCopy}
>
<a
className='link'
href={room.url}
target='_blank'
data-tip='Click to copy room link'
rel='noopener noreferrer'
onClick={(event) =>
{
// If this is a 'Open in new window/tab' don't prevent
// click default action.
if (
event.ctrlKey || event.shiftKey || event.metaKey ||
// Middle click (IE > 9 and everyone else).
(event.button && event.button === 1)
)
{
return;
}
event.preventDefault();
}}
>
invitation link
</a>
</CopyToClipboard>
</div>
</div>
</Draggable>
<Sidebar />
<ReactTooltip
effect='solid'
delayShow={100}
delayHide={100}
/>
<View advancedMode={room.advancedMode} />
<Draggable handle='.me-container' bounds='body' cancel='.display-name'>
<div
className={classnames('me-container', {
'active-speaker' : amActiveSpeaker
})}
>
<Me
advancedMode={room.advancedMode}
/>
</div>
</Draggable>
<Sidebar />
<ReactTooltip
effect='solid'
delayShow={100}
delayHide={100}
/>
</div>
<ToolArea />
</div>
<ToolArea />
</div>
</Appear>
</Fragment>
);
</Appear>
</Fragment>
);
}
}
}