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

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

@ -11,22 +11,26 @@ 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
{
render()
{ {
const {
room, room,
me, me,
amActiveSpeaker, amActiveSpeaker,
onRoomLinkCopy, onRoomLinkCopy,
onSetAudioMode, onSetAudioMode,
onRestartIce onRestartIce,
}) => onLeaveMeeting
{ } = this.props;
return ( return (
<Appear duration={300}> <Appear duration={300}>
<div data-component='Room'> <div data-component='Room'>
<Notifications /> <Notifications />
<div className='state'> <div className='state' data-tip='Server status'>
<div className={classnames('icon', room.state)} /> <div className={classnames('icon', room.state)} />
<p className={classnames('text', room.state)}>{room.state}</p> <p className={classnames('text', room.state)}>{room.state}</p>
</div> </div>
@ -38,6 +42,7 @@ const Room = (
className='link' className='link'
button-href={room.url} button-href={room.url}
button-target='_blank' button-target='_blank'
data-tip='Click to copy room link'
data-clipboard-text={room.url} data-clipboard-text={room.url}
onSuccess={onRoomLinkCopy} onSuccess={onRoomLinkCopy}
onClick={(event) => onClick={(event) =>
@ -90,6 +95,13 @@ const Room = (
data-type='dark' data-type='dark'
onClick={() => onRestartIce()} onClick={() => onRestartIce()}
/> />
<div
className={classnames('button', 'leave-meeting')}
data-tip='Leave meeting'
data-type='dark'
onClick={() => onLeaveMeeting()}
/>
</div> </div>
<ReactTooltip <ReactTooltip
@ -100,7 +112,8 @@ const Room = (
</div> </div>
</Appear> </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');
}
} }
} }
} }