glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

convert to something more 'call' style

Browse source
This commit is contained in:
Connor Turland 2015-12-12 19:00:51 -05:00
parent be2997d7e4
commit 8b090be0b3
9 changed files with 214 additions and 111 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

196
app/assets/javascripts/src/Metamaps.js.erb
View file

@ -1948,7 +1948,9 @@ Metamaps.Realtime = {
console.log('connected');
self.startActiveMap();
});
self.webrtc = new SimpleWebRTC({
if (Metamaps.Active.Mapper) {
self.webrtc = new SimpleWebRTC({
connection: self.socket,
localVideoEl: self.videoId,
remoteVideosEl: '',
@ -1965,45 +1967,45 @@ Metamaps.Realtime = {
audio: true
},
nick: Metamaps.Active.Mapper.id
});
self.webrtc.on('readyToCall', function () {
console.log('readyToCall');
self.videoInitialized = true;
self.readyToCall = true;
if (self.localVideo && self.status) {
$('#wrapper').append(self.localVideo.view.$container);
}
self.socket.emit('videoAdded');
self.webrtc.webrtc.peers.forEach(function (p) {
p.pc.addStream(self.webrtc.webrtc.localStream);
p.start();
});
});
var
$video = $('<video></video>').attr('id', self.videoId);
self.localVideo = {
$video: $video,
view: new Metamaps.Views.videoView($video[0], $('body'), 'me', true, {
DOUBLE_CLICK_TOLERANCE: 200,
avatar: Metamaps.Active.Mapper ? Metamaps.Active.Mapper.get('image') : ''
}),
};
var
$video = $('<video></video>').attr('id', self.videoId);
self.localVideo = {
$video: $video,
view: new Metamaps.Views.videoView($video[0], $('body'), 'me', true, {
DOUBLE_CLICK_TOLERANCE: 200,
avatar: Metamaps.Active.Mapper ? Metamaps.Active.Mapper.get('image') : ''
})
};
self.room = new Metamaps.Views.room({
webrtc: self.webrtc,
socket: self.socket,
username: Metamaps.Active.Mapper ? Metamaps.Active.Mapper.get('name') : '',
image: Metamaps.Active.Mapper ? Metamaps.Active.Mapper.get('image') : '',
room: 'global',
$video: self.localVideo.$video,
myVideoView: self.localVideo.view,
config: { DOUBLE_CLICK_TOLERANCE: 200 }
});
if (Metamaps.Messages) self.room.messages.add(Metamaps.Messages);
self.room = new Metamaps.Views.room({
webrtc: self.webrtc,
socket: self.socket,
username: Metamaps.Active.Mapper ? Metamaps.Active.Mapper.get('name') : '',
image: Metamaps.Active.Mapper ? Metamaps.Active.Mapper.get('image') : '',
room: 'global',
$video: self.localVideo.$video,
myVideoView: self.localVideo.view,
config: { DOUBLE_CLICK_TOLERANCE: 200 }
});
if (Metamaps.Messages) self.room.messages.add(Metamaps.Messages);
self.room.videoAdded(self.handleVideoAdded);
self.createChat();
//self.webrtc.startLocalVideo();
self.createChat();
} // if Metamaps.Active.Mapper
},
handleVideoAdded: function (v) {
// random position for now
var top = Math.floor((Math.random() * ($('#wrapper').height() - 100)) + 1);
var left = Math.floor((Math.random() * ($('#wrapper').width() - 100)) + 1);
//var right = Math.floor((Math.random() * (468 - 100)) + 1);
v.setParent($('#wrapper'));
$('#wrapper').append(v.$container);
v.$container.css({
top: top + 'px',
left: left + 'px'
});
},
startActiveMap: function () {
var self = Metamaps.Realtime;
@ -2053,30 +2055,86 @@ Metamaps.Realtime = {
self.status = true;
//$(".sidebarCollaborateIcon").addClass("blue");
$(".collabCompass").show();
self.localVideo.view.$container.show();
self.room.room = 'map-' + Metamaps.Active.Map.id;
self.room.join(function (err, roomDesc) {
//attachMediaStream(self.webrtc.webrtc.localStream, self.localVideo.$video[0]);
self.checkForACallToJoin();
},
checkForACallToJoin: function () {
var self = Metamaps.Realtime;
self.socket.emit('checkForCall', { room: self.room.room, mapid: Metamaps.Active.Map.id });
},
promptToJoin: function (data) {
var self = Metamaps.Realtime;
function addVideo(v) {
// random position for now
var top = Math.floor((Math.random() * ($('#wrapper').height() - 100)) + 1);
var left = Math.floor((Math.random() * ($('#wrapper').width() - 100)) + 1);
//var right = Math.floor((Math.random() * (468 - 100)) + 1);
v.setParent($('#wrapper'));
$('#wrapper').append(v.$container);
v.$container.css({
top: top + 'px',
left: left + 'px'
});
}
console.log(data);
var notifyText = 'There\'s a conversation happening, want to join?';
notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.joinCall()">Yes</button>';
notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.GlobalUI.clearNotify()">No</button>';
Metamaps.GlobalUI.notifyUser(notifyText);
},
invitedToCall: function (inviter) {
var self = Metamaps.Realtime;
self.room.videoAdded(addVideo);
var username = self.mappersOnMap[inviter].name;
var notifyText = username + ' is suggesting a video call. What do you think?';
notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.acceptCall(' + inviter + ')">Yes</button>';
notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.Realtime.denyCall(' + inviter + ')">No</button>';
Metamaps.GlobalUI.notifyUser(notifyText);
},
acceptCall: function (userid) {
var self = Metamaps.Realtime;
self.socket.emit('callAccepted', {
mapid: Metamaps.Active.Map.id,
invited: Metamaps.Active.Mapper.id,
inviter: userid
});
self.joinCall();
Metamaps.GlobalUI.clearNotify();
},
denyCall: function (userid) {
var self = Metamaps.Realtime;
self.socket.emit('callDenied', {
mapid: Metamaps.Active.Map.id,
invited: Metamaps.Active.Mapper.id,
inviter: userid
});
Metamaps.GlobalUI.clearNotify();
},
inviteACall: function (userid) {
var self = Metamaps.Realtime;
self.socket.emit('inviteACall', {
mapid: Metamaps.Active.Map.id,
inviter: Metamaps.Active.Mapper.id,
invited: userid
});
},
callAccepted: function (userid) {
var self = Metamaps.Realtime;
for (peer in self.room.videos) {
addVideo(self.room.videos[peer]);
}
});
var username = self.mappersOnMap[userid].name;
Metamaps.GlobalUI.notifyUser(username + ' liked your suggestion! Video call starting...');
self.joinCall();
},
callDenied: function (userid) {
var self = Metamaps.Realtime;
var username = self.mappersOnMap[userid].name;
Metamaps.GlobalUI.notifyUser(username + ' isn\'t feeling it right now...');
},
joinCall: function () {
var self = Metamaps.Realtime;
self.webrtc.off('readyToCall');
self.webrtc.on('readyToCall', function () {
self.videoInitialized = true;
self.readyToCall = true;
self.localVideo.view.$container.show();
if (self.localVideo && self.status) {
$('#wrapper').append(self.localVideo.view.$container);
}
self.room.join();
});
self.webrtc.startLocalVideo();
Metamaps.GlobalUI.clearNotify();
},
startVideo: function() {
var
@ -2134,6 +2192,13 @@ Metamaps.Realtime = {
mapid: Metamaps.Active.Map.id
});
socket.on(myId + '-' + Metamaps.Active.Map.id + '-invitedToCall', self.invitedToCall);
socket.on(myId + '-' + Metamaps.Active.Map.id + '-callAccepted', self.callAccepted);
socket.on(myId + '-' + Metamaps.Active.Map.id + '-callDenied', self.callDenied);
// receive word that there's a conversation in progress
socket.on('maps-' + Metamaps.Active.Map.id + '-callInProgress', self.promptToJoin);
// if you're the 'new guy' update your list with who's already online
socket.on(myId + '-' + Metamaps.Active.Map.id + '-UpdateMapperList', self.updateMapperList);
@ -2244,6 +2309,16 @@ Metamaps.Realtime = {
};
$(document).on(Metamaps.Views.room.events.newMessage, sendNewMessage);
$(document).on(Metamaps.Views.room.events.callEnded, function () {
Metamaps.GlobalUI.notifyUser('Conversation has ended.');
self.localVideo.view.$container.hide();
self.webrtc.webrtc.localStreams.forEach(function (stream) {
stream.getTracks().forEach(function (track) {
track.stop();
});
});
});
},
attachMapListener: function(){
var self = Metamaps.Realtime;
@ -2291,6 +2366,7 @@ Metamaps.Realtime = {
// data.userrealtime
self.mappersOnMap[data.userid] = {
id: data.userid,
name: data.username,
username: data.username,
image: data.userimage,
@ -2330,8 +2406,10 @@ Metamaps.Realtime = {
// data.username
// data.userimage
// data.coords
var firstOtherPerson = Object.keys(self.mappersOnMap).length === 0;
self.mappersOnMap[data.userid] = {
id: data.userid,
name: data.username,
username: data.username,
image: data.userimage,
@ -2357,7 +2435,11 @@ Metamaps.Realtime = {
// create a div for the collaborators compass
self.createCompass(data.username, data.userid, data.userimage, self.mappersOnMap[data.userid].color, !self.status);
Metamaps.GlobalUI.notifyUser(data.username + ' just joined the map');
var notifyMessage = data.username + ' just joined the map';
if (firstOtherPerson) {
notifyMessage += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.inviteACall(' + data.userid + ')">Suggest A Video Call</button>';
}
Metamaps.GlobalUI.notifyUser(notifyMessage);
// send this new mapper back your details, and the awareness that you've loaded the map
var update = {

4
app/assets/javascripts/src/views/chatView.js.erb
View file

@ -12,7 +12,7 @@ Metamaps.Views.chatView = (function () {
"<div class='chat-message-time'>{{ timestamp }}</div>" +
"<div class='clearfloat'></div>" +
"</div>",
participantHTML: "<div class='participant participant-{{ username }}'>" +
participantHTML: "<div class='participant participant-{{ id }}'>" +
"<div class='chat-participant-image'><img src='{{ image }}' /></div>" +
"<div class='chat-participant-name'>{{ username }}</div>" +
"<div class='clearfloat'></div>" +
@ -151,7 +151,7 @@ Metamaps.Views.chatView = (function () {
this.$participants.append(html);
},
removeParticipant: function(participant) {
this.$container.find('.participant-' + participant.get('username')).remove();
this.$container.find('.participant-' + participant.get('id')).remove();
}
};

18
app/assets/javascripts/src/views/room.js
View file

@ -33,6 +33,11 @@ Metamaps.Views.room = (function () {
this.webrtc.joinRoom(this.room, cb);
}
room.prototype.leaveVideoOnly = function() {
this.isActiveRoom = false;
this.webrtc.leaveRoom();
}
room.prototype.leave = function() {
for (var id in this.videos) {
this.removeVideo(id);
@ -51,10 +56,6 @@ Metamaps.Views.room = (function () {
room.prototype.init = function () {
var self = this;
/*this.roomRef.child('messages').on('child_added', function (snap) {
self.messages.add(snap.val());
});*/
$(document).on(VideoView.events.audioControlClick, function (event, videoView) {
if (!videoView.audioStatus) self.webrtc.mute();
else if (videoView.audioStatus) self.webrtc.unmute();
@ -70,7 +71,6 @@ Metamaps.Views.room = (function () {
var mapper = Metamaps.Realtime.mappersOnMap[peer.nick];
peer.avatar = mapper.image;
peer.username = mapper.name;
console.log(peer);
if (self.isActiveRoom) {
self.addVideo(peer);
}
@ -148,7 +148,6 @@ Metamaps.Views.room = (function () {
id = this.webrtc.getDomId(peer),
video = attachMediaStream(peer.stream);
$(video).prop('muted', true); // until the viewer accepts the viewing
var
v = new VideoView(video, null, id, false, { DOUBLE_CLICK_TOLERANCE: 200, avatar: peer.avatar, username: peer.username });
@ -162,6 +161,10 @@ Metamaps.Views.room = (function () {
if (this.videos[id]) {
this.videos[id].remove();
delete this.videos[id];
if (Object.keys(this.videos).length === 0) {
this.leaveVideoOnly();
$(document).trigger(room.events.callEnded);
}
}
}
@ -190,7 +193,8 @@ Metamaps.Views.room = (function () {
* @static
*/
room.events = {
newMessage: "Room:newMessage"
newMessage: "Room:newMessage",
callEnded: "Room:callEnded"
};
return room;

8
app/assets/javascripts/src/views/videoView.js
View file

@ -98,14 +98,14 @@ Metamaps.Views.videoView = (function () {
this.videoStatus = !this.videoStatus;
$(document).trigger(videoView.events.videoControlClick, [this]);
},
yesReceiveClick: function () {
/*yesReceiveClick: function () {
this.$receiveContainer.hide();
this.$avatar.hide();
$(this.video).prop('muted', false);
},
noReceiveClick: function () {
this.$container.hide();
}
}*/
};
var videoView = function(video, $parent, id, isMyself, config) {
@ -135,6 +135,7 @@ Metamaps.Views.videoView = (function () {
$vidContainer.addClass('video-cutoff');
$vidContainer.append(this.video);
/*
if (!isMyself) {
this.$receiveContainer = $('<div class="video-receive"><div class="video-statement">' + config.username + ' is sharing their audio and video. Do you wish to receive it?</div><div class="btn-group"><button type="button" class="button btn-yes">Yes</button><button type="button" class="button btn-no">No</button></div></div>');
this.$container.append(this.$receiveContainer);
@ -144,7 +145,7 @@ Metamaps.Views.videoView = (function () {
this.$container.find('.btn-no').on('click', function (event) {
Handlers.noReceiveClick.call(self, event);
});
}
}*/
this.avatar = config.avatar;
this.$avatar = $('<img draggable="false" class="collaborator-video-avatar" src="' + config.avatar + '" width="150" height="150" />');
@ -157,7 +158,6 @@ Metamaps.Views.videoView = (function () {
});
if (isMyself) {
this.$avatar.hide();
Private.addControls.call(this);
}

11
app/assets/stylesheets/application.css.erb
View file

@ -132,6 +132,17 @@ a.button:active,
input[type="submit"]:active {
background: #429B46;
}
button.button.btn-no {
background-color: #c04f4f;
}
button.button.btn-no:hover {
background-color: #A54242;
}
.toast .toast-button {
margin-top: -10px;
margin-left: 10px;
}
/*
* Utility
*/

1
app/assets/stylesheets/junto.css.erb
View file

@ -54,6 +54,7 @@
-o-user-select: none;
user-select: none;
-webkit-user-drag: none;
display: none;
}
.collaborator-video .video-audio {
position: absolute;

1
app/views/layouts/_upperelements.html.erb
View file

@ -20,7 +20,6 @@
<div class="upperRightUI">
<div class="supportUs upperRightEl openLightbox" data-open="donate">SUPPORT US!</div>
<div class="mapElement upperRightEl upperRightMapButtons">
<div class="startVideo upperRightEl">start my video</div>
<!-- filtering -->
<div class="sidebarFilter upperRightEl">
<div class="sidebarFilterIcon upperRightIcon"><div class="tooltipsUnder">Filter</div></div>

17
realtime/realtime-server.js
View file

@ -22,6 +22,23 @@ function start() {
socket.broadcast.emit(data.userToNotify + '-' + data.mapid + '-UpdateMapperList', existingUser);
});
// as a new mapper check whether there's a call in progress to join
socket.on('checkForCall', function (data) {
var socketsInRoom = io.sockets.clients(data.room);
if (socketsInRoom.length) socket.emit('maps-' + data.mapid + '-callInProgress', socketsInRoom.length);
});
// send the invitation to start a call
socket.on('inviteACall', function (data) {
socket.broadcast.emit(data.invited + '-' + data.mapid + '-invitedToCall', data.inviter);
});
// send response back to the inviter
socket.on('callAccepted', function (data) {
socket.broadcast.emit(data.inviter + '-' + data.mapid + '-callAccepted', data.invited);
});
socket.on('callDenied', function (data) {
socket.broadcast.emit(data.inviter + '-' + data.mapid + '-callDenied', data.invited);
});
// this will ping everyone on a map that there's a person just joined the map
socket.on('newMapperNotify', function (data) {
socket.set('mapid', data.mapid);

13
realtime/signal.js
View file

@ -29,7 +29,7 @@ module.exports = function(io, stunservers) {
client.resources = {
screen: false,
video: false,
video: true,
audio: false
};
@ -54,17 +54,6 @@ module.exports = function(io, stunservers) {
});
client.on('join', join);
client.on('videoAdded', videoAdded);
function videoAdded(data) {
var socketsInRoom = io.sockets.clients(client.room);
client.resources.video = true;
socketsInRoom.forEach(function(socket) {
if (socket.id !== client.id) {
socket.emit('addVideo', { id: client.id });
}
});
}
function removeFeed(type) {
if (client.room) {