Skip to content

Commit

Permalink
WIP cleanup: Integration of screensharing handling and MCU recording.
Browse files Browse the repository at this point in the history
  • Loading branch information
Let Choo committed Sep 5, 2017
1 parent af8a1eb commit dc2ef62
Show file tree
Hide file tree
Showing 4 changed files with 421 additions and 484 deletions.
2 changes: 1 addition & 1 deletion source/jsx/components/chat.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ define([
'marked'

], function (

React,
Utils,
Constants,
Expand All @@ -28,6 +27,7 @@ define([
if(e.target.tagName === 'A') {
return;
}

Dispatcher.toggleControls(false);
Dispatcher.toggleChat();
},
Expand Down
240 changes: 122 additions & 118 deletions source/jsx/components/controls.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,35 +19,51 @@ define([
) {

var Controls = React.createClass({
/**
* Handle when controls are updated
*/
componentDidUpdate: function() {
var $mcu = document.getElementById('mcu');
var $forceturn = document.getElementById('forceturn');

if($mcu) {
$mcu.checked = this.props.state.room.flags.mcu;
}

if($forceturn) {
$forceturn.checked = this.props.state.room.flags.forceturn;
}
},

/**
* Handle MCU toggle button
*/
handleMCUClick: function(e) {
Dispatcher.setMCU(e.target.checked);
Dispatcher.flags('mcu', e.target.checked);
},

/**
* Handle when controls are updated
* Handle force TURN toggle button
*/
componentDidUpdate: function() {
var $mcu = document.getElementById('mcu');
if($mcu) {
$mcu.checked = this.props.state.room.useMCU;
}
handleforceTURNClick: function(e) {
Dispatcher.flags('forceturn', e.target.checked);
},

/**
* Handle start a call button
*/
handleStartRoom: function() {
//var room = this.props.state.room.useMCU ? 'm' : '';
var room = Utils.uuid(6);
var room = Utils.uuid(9);
var url = '/' + room;

if (this.props.state.room.useMCU) {
if (this.props.state.room.flags.mcu) {
url += '?mcu=1';
}

if (this.props.state.room.flags.forceturn) {
url += '?forceturn=1';
}

// Check if history is supported, or else just redirect immdediately
if (window.historyNotSupported) {
window.location.href = url;
Expand Down Expand Up @@ -81,75 +97,49 @@ define([
* Handle the toggle mute video button
*/
handleVideoMute: function() {
var user = this.props.state.users.filter(function (user) {
return user.id === 0;
})[0];

if (!user.hasVideo) {
if (!this.props.state.users[0].video) {
return;
}

Skylink[user.videoMute ? 'enableVideo' : 'disableVideo']();
Skylink[this.props.state.users[0].video.muted ? 'enableVideo' : 'disableVideo']();
},

/**
* Handle the toggle mute audio button
*/
handleAudioMute: function() {
var user = this.props.state.users.filter(function (user) {
return user.id === 0;
})[0];

if (!user.hasAudio) {
if (!this.props.state.users[0].audio) {
return;
}

Skylink[user.audioMute ? 'enableAudio' : 'disableAudio']();
Skylink[this.props.state.users[0].audio.muted ? 'enableAudio' : 'disableAudio']();
},

/**
* Handles the room lock button
*/
handleRoomLock: function() {
if(this.props.state.users.length < Configs.maxUsers) {
Skylink[this.props.state.room.isLocked ? 'unlockRoom' : 'lockRoom']();
}
Skylink[this.props.state.room.states.locked ? 'unlockRoom' : 'lockRoom']();
},

/**
* Handles the screensharing button
*/
handleScreenshare: function() {
// Disable user from pressing multiple times invokes
// until screensharing screen has processed
// Disable user from pressing multiple times invokes until screensharing screen has processed
if (this.props.state.room.preventScreenshare) {
return;
}

var user = this.props.state.users.filter(function (user) {
return user.id === 0;
})[0];
var sharing = false;

if(!user.screensharing) {
if (!user.screensharing) {
// Prevent multiple clicks
this.props.state.room.preventScreenshare = true;
sharing = true;
Skylink.shareScreen(true);
} else {
sharing = false;
}

if (sharing) {
this.props.state.users[0].screensharingPriority = (new Date ()).getTime();

Skylink.setUserData(Utils.extend(Skylink.getUserData(), {
screensharingPriority: this.props.state.users[0].screensharingPriority
}));

Skylink.shareScreen();

} else {
// Dispatch to all element
//Dispatcher.sharescreen(false);
// Stop sharing screen
Skylink.stopScreen();
}
},
Expand All @@ -158,13 +148,12 @@ define([
* Handles the recording option
*/
handleRecording: function () {
if (this.props.state.room.preventRecording || this.props.state.room.preventRecordingOneUser ||
!this.props.state.room.hasMCU) {
if (this.props.state.room.preventRecording) {
return;
}

if(!this.props.state.room.isRecording) {
// Prevent multiple clicks for now
// Prevent multiple clicks
this.props.state.room.preventRecording = true;
Skylink.startRecording();

Expand Down Expand Up @@ -199,92 +188,107 @@ define([
*/
render: function() {
var res = [];
var user = this.props.state.users.filter(function (user) {
return user.id === 0;
})[0];

res.push(<div className={'logo ' + (this.props.state.room.status === Constants.RoomState.CONNECTED ? 'joinRoom' : '')}>getaroom.io</div>);

// Controls state when in foyer
if(this.props.state.state === Constants.AppState.FOYER) {
res.push(
<button className="joinRoom mainControl" onClick={this.handleStartRoom}>
Start a new call
</button>
);

res.push(
<div className="description">
<p>
Start a FREE call<br />with up to {Configs.maxUsers} people
</p>
<p>
Just hit the &quot;Start a new call&quot; button below and share the link.<br /><br />
This app is a <a href="https://temasys.github.io" target="_blank">SkylinkJS</a> tech demo and you can fork the <a href="https://github.com/Temasys/getaroom" target="_blank">code on github</a>.
</p>
</div>
);

res.push(
<div className="link">
<input type="checkbox" id="mcu" name="mcu" onClick={this.handleMCUClick} /> <label for="mcu">Use Skylink Media Relay</label>
</div>
);

// Controls state when in Room
} else if(this.props.state.state === Constants.AppState.IN_ROOM) {
res.push(
<button className="leaveRoom mainControl" onClick={this.handleLeaveRoom}>
Leave this call
</button>
);

res.push(
<div className="link">
Invite others to join this call at this link:<br />
<input type="text" value={location.toString()} onClick={this.handleLinkClick} readOnly />
</div>
);

res.push(
<div className="status">
<span>Status: {this.props.state.room.status}</span>
<p className="statusMessage">{this.props.state.room.error}</p>
</div>
);

if(this.props.state.room.status === Constants.RoomState.CONNECTED && user.stream != null) {
// Render the logo first
res.push(<div className={'logo' + (this.props.state.room.status === Constants.RoomState.CONNECTED ? ' joinRoom' : '') +
(this.props.state.room.states.recording ? ' recording' : '')}>getaroom.io</div>);

switch (this.props.state.state) {
//// Controls state when in foyer
case Constants.AppState.FOYER:
// Render "Start call" button
res.push(
<button id="videoMute" onClick={this.handleVideoMute} className={this.props.state.users[0].hasVideo ? (user.videoMute ? '' : 'on') : 'off muted'} title="Mute/Unmute Video"></button>
<button className="joinRoom mainControl" onClick={this.handleStartRoom}>
Start a new call
</button>
);

// Render the text
res.push(
<button id="audioMute" onClick={this.handleAudioMute} className={this.props.state.users[0].hasAudio ? (user.audioMute ? '' : 'on') : 'off muted'} title="Mute/Unmute Audio"></button>
<div className="description">
<p>
Start a FREE call<br/>with up to 4 people
</p>
<p>
Just hit the &quot;Start a new call&quot; button below and share the link.<br /><br />
This app is a <a href="https://skylink.io" target="_blank">SkylinkJS</a> tech demo and you can fork the <a href="https://github.com/Temasys/getaroom" target="_blank">code on github</a>.
</p>
</div>
);


// Render the checkbox to allow MCU
res.push(
<button id="screenshare" onClick={this.handleScreenshare} className={(user.screensharing ? 'on' : '') + ' ' + (this.props.state.room.preventScreenshare ? 'muted' : '')} title="Share your screen"></button>
<div className="link">
<input type="checkbox" id="mcu" name="mcu" onClick={this.handleMCUClick} /> <label for="mcu">Use Skylink Media Relay</label>
</div>
);

// Render the checkbox to force TURN connections
res.push(
<button id="roomLock" onClick={this.handleRoomLock} className={this.props.state.room.isLocked ? '' : 'on'} title="Lock/Unlock Room"></button>
<div className="link">
<input type="checkbox" id="forceturn" name="forceturn" onClick={this.handleForceTURNClick} /> <label for="forceturn">Force Skylink TURN Connections</label>
</div>
);
break;

if (this.props.state.room.hasMCU) {
res.push(
<button id="recording" onClick={this.handleRecording} className={(this.props.state.room.isRecording ? 'on' : '') + ' ' + (this.props.state.room.preventRecording || this.props.state.room.preventRecordingOneUser ? 'muted' : '')} title="Start/Stop Recording"></button>
);
}
//// Controls state when in Room
case Constants.AppState.IN_ROOM:
res.push(
<button className="leaveRoom mainControl" onClick={this.handleLeaveRoom}>
Leave this call
</button>
);

res.push(
<div className="displayName">
<span>Display Name</span>
<input id="displayName" type="text" value={user.name} placeholder="Display Name"
title="Your Display Name in Chat" onChange={this.handleDisplayName} />
<div className="link">
Invite others to join this call at this link:<br />
<input type="text" value={location.toString()} onClick={this.handleLinkClick} readOnly />
</div>
);

res.push(
<div className="status">
<span>Status: {this.props.state.room.status}</span>
<p className="statusMessage">{this.props.state.room.error}</p>
</div>
);

if(this.props.state.room.status === Constants.RoomState.CONNECTED && this.props.state.users[0].stream.current != null) {
if (this.props.state.users[0].video) {
res.push(
<button id="videoMute" onClick={this.handleVideoMute} className={this.props.state.users[0].stream.video.muted ? 'off' : 'on'} title="Mute/Unmute Video"></button>
);
}

if (this.props.state.users[0].audio) {
res.push(
<button id="audioMute" onClick={this.handleAudioMute} className={this.props.state.users[0].stream.audio.muted ? 'off' : 'on'} title="Mute/Unmute Audio"></button>
);
}

}
res.push(
<button id="screenshare" onClick={this.handleScreenshare} className={(this.props.state.users[0].screensharing ? 'on' : '') + ' ' + (this.props.state.room.prevent.screenshare ? 'muted' : '')} title="Share your screen"></button>
);

res.push(
<button id="roomLock" onClick={this.handleRoomLock} className={this.props.state.room.states.locked ? '' : 'on'} title="Lock/Unlock Room"></button>
);

if (this.props.state.room.states.mcu) {
res.push(
<button id="recording" onClick={this.handleRecording} className={(this.props.state.room.states.recording ? 'on' : '') + ' ' + (this.props.state.room.prevent.recording ? 'muted' : '')} title="Start/Stop Recording"></button>
);
}

res.push(
<div className="displayName">
<span>Display Name</span>
<input id="displayName" type="text" value={this.props.state.users[0].name} placeholder="Display Name"
title="Your Display Name in Chat" onChange={this.handleDisplayName} />
</div>
);

}
}

return (
Expand Down
2 changes: 1 addition & 1 deletion source/jsx/components/userareas.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ define([
<UserAreaList users={this.props.state.users} /> : <div id='noUser'></div>;

return (
<section id="userareas" className={this.props.state.room.screensharing ? 'screensharing' : 'split' + this.props.state.users.length}>
<section id="userareas" className={this.props.state.room.screensharing.length > 0 ? 'screensharing' : 'split' + this.props.state.users.length}>
{showList}
</section>
);
Expand Down
Loading

0 comments on commit dc2ef62

Please sign in to comment.