Briq
/
multiparty-meeting
7
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add button to leave meeting

master
Håvar Aambø Fosstveit 2018-03-01 15:49:12 +01:00
parent 98b2b9c764
commit 9a7e149c35
2 changed files with 102 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

176
app/lib/components/Room.jsx
View File

@ -11,96 +11,109 @@ import Me from './Me';
import Peers from './Peers'; import Peers from './Peers';
import Notifications from './Notifications'; import Notifications from './Notifications';
const Room = ( class Room extends React.Component
{
room,
me,
amActiveSpeaker,
onRoomLinkCopy,
onSetAudioMode,
onRestartIce
}) =>
{ {
return ( render()
<Appear duration={300}> {
<div data-component='Room'> const {
<Notifications /> room,
me,
amActiveSpeaker,
onRoomLinkCopy,
onSetAudioMode,
onRestartIce,
onLeaveMeeting
} = this.props;
<div className='state'> return (
<div className={classnames('icon', room.state)} /> <Appear duration={300}>
<p className={classnames('text', room.state)}>{room.state}</p> <div data-component='Room'>
</div> <Notifications />
<div className='room-link-wrapper'> <div className='state' data-tip='Server status'>
<div className='room-link'> <div className={classnames('icon', room.state)} />
<ClipboardButton <p className={classnames('text', room.state)}>{room.state}</p>
component='a'
className='link'
button-href={room.url}
button-target='_blank'
data-clipboard-text={room.url}
onSuccess={onRoomLinkCopy}
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
</ClipboardButton>
</div> </div>
</div>
<Peers /> <div className='room-link-wrapper'>
<div className='room-link'>
<ClipboardButton
component='a'
className='link'
button-href={room.url}
button-target='_blank'
data-tip='Click to copy room link'
data-clipboard-text={room.url}
onSuccess={onRoomLinkCopy}
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;
}
<div event.preventDefault();
className={classnames('me-container', { }}
'active-speaker' : amActiveSpeaker >
})} invitation link
> </ClipboardButton>
<Me /> </div>
</div> </div>
<div className='sidebar'> <Peers />
<div
className={classnames('button', 'audio-only', {
on : me.audioOnly,
disabled : me.audioOnlyInProgress
})}
data-tip='Toggle audio only mode'
data-type='dark'
onClick={() => onSetAudioMode(!me.audioOnly)}
/>
<div <div
className={classnames('button', 'restart-ice', { className={classnames('me-container', {
disabled : me.restartIceInProgress 'active-speaker' : amActiveSpeaker
})} })}
data-tip='Restart ICE' >
data-type='dark' <Me />
onClick={() => onRestartIce()} </div>
<div className='sidebar'>
<div
className={classnames('button', 'audio-only', {
on : me.audioOnly,
disabled : me.audioOnlyInProgress
})}
data-tip='Toggle audio only mode'
data-type='dark'
onClick={() => onSetAudioMode(!me.audioOnly)}
/>
<div
className={classnames('button', 'restart-ice', {
disabled : me.restartIceInProgress
})}
data-tip='Restart ICE'
data-type='dark'
onClick={() => onRestartIce()}
/>
<div
className={classnames('button', 'leave-meeting')}
data-tip='Leave meeting'
data-type='dark'
onClick={() => onLeaveMeeting()}
/>
</div>
<ReactTooltip
effect='solid'
delayShow={100}
delayHide={100}
/> />
</div> </div>
</Appear>
<ReactTooltip );
effect='solid' }
delayShow={100} }
delayHide={100}
/>
</div>
</Appear>
);
};
Room.propTypes = Room.propTypes =
{ {
@ -109,7 +122,8 @@ Room.propTypes =
amActiveSpeaker : PropTypes.bool.isRequired, amActiveSpeaker : PropTypes.bool.isRequired,
onRoomLinkCopy : PropTypes.func.isRequired, onRoomLinkCopy : PropTypes.func.isRequired,
onSetAudioMode : PropTypes.func.isRequired, onSetAudioMode : PropTypes.func.isRequired,
onRestartIce : PropTypes.func.isRequired onRestartIce : PropTypes.func.isRequired,
onLeaveMeeting : PropTypes.func.isRequired
}; };
const mapStateToProps = (state) => const mapStateToProps = (state) =>
@ -141,6 +155,10 @@ const mapDispatchToProps = (dispatch) =>
onRestartIce : () => onRestartIce : () =>
{ {
dispatch(requestActions.restartIce()); dispatch(requestActions.restartIce());
},
onLeaveMeeting : () =>
{
dispatch(requestActions.leaveRoom());
} }
}; };
}; };

6
app/stylus/components/Room.styl
View File

@ -191,7 +191,7 @@
background-position: center; background-position: center;
background-size: 75%; background-size: 75%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: rgba(#fff, 0.15); background-color: rgba(#fff, 0.3);
cursor: pointer; cursor: pointer;
transition-property: opacity, background-color; transition-property: opacity, background-color;
transition-duration: 0.15s; transition-duration: 0.15s;
@ -231,6 +231,10 @@
background-image: url('/resources/images/icon_restart_ice__black.svg'); background-image: url('/resources/images/icon_restart_ice__black.svg');
} }
} }
&.leave-meeting {
background-image: url('/resources/images/leave-meeting.svg');
}
} }
} }
} }