glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases 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);
}

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

@ -76,7 +76,7 @@ body,
html {
}
}
body {
background: #d8d9da url(<%= asset_data_uri('shattered_@2X.png') %>);
font-family: 'din-medium', helvetica, sans-serif;
@ -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
*/
@ -717,7 +728,7 @@ label {
text-transform: uppercase;
text-align: left;
font-size: 14px;
line-height: 14px;
line-height: 14px;
position:relative;
}
.accountInnerArrow {
@ -1026,7 +1037,7 @@ h3.filterBox {
text-align: center;
}
.sidebarFilterBox li:hover {
}
#filter_by_mapper li img {
width: 40px;
@ -1071,13 +1082,13 @@ h3.filterBox {
margin-top:8px;
}
#filter_by_metacode {
}
#filter_by_mapper {
}
#filter_by_synapse {
}
/* end filter by metacode */
@ -1115,7 +1126,7 @@ h3.filterBox {
padding: 0;
}
.rightclickmenu > ul {
}
.rightclickmenu li {
list-style: none;
@ -1192,7 +1203,7 @@ h3.filterBox {
.rc-metacode li img {
display: inline-block;
}
.rightclickmenu .rc-permission ul,
.rightclickmenu .rc-permission ul,
.rightclickmenu .rc-metacode ul,
.rightclickmenu .rc-siblings ul {
display: none;
@ -1205,7 +1216,7 @@ h3.filterBox {
border-top-right-radius: 2px;
box-shadow: 0px 3px 3px rgba(0,0,0,0.12), 0 3px 3px rgba(0,0,0,0.24);
}
.rightclickmenu .rc-permission:hover > ul,
.rightclickmenu .rc-permission:hover > ul,
.rightclickmenu .rc-metacode:hover > ul,
.rightclickmenu .rc-siblings:hover > ul {
display: block;
@ -1214,7 +1225,7 @@ h3.filterBox {
padding: 7px;
}
.rightclickmenu li.changeP {
}
.rightclickmenu li.changeP .rc-perm-icon {
position: absolute;
@ -1276,13 +1287,13 @@ h3.filterBox {
top: -7px;
}
.moveMenusUp .rc-metacode ul,
.moveMenusUp .rc-metacode ul,
.moveMenusUp .rc-permission ul,
.moveMenusUp .rc-siblings ul {
top: auto;
bottom: 0;
}
.moveMenusToLeft .rc-metacode ul,
.moveMenusToLeft .rc-metacode ul,
.moveMenusToLeft .rc-permission ul,
.moveMenusToLeft .rc-siblings ul {
left: auto;
@ -1305,7 +1316,7 @@ h3.filterBox {
#new_synapse .tt-suggestion.tt-cursor {
background: #E0E0E0;
}
#new_topic .tt-suggestion,
#new_topic .tt-suggestion,
#new_synapse .tt-dataset h3,
#new_synapse .tt-suggestion {
background: #F5F5F5;
@ -1329,7 +1340,7 @@ h3.filterBox {
font-size: 14px;
padding: 9px 0 9px 4px;
}
#new_synapse .synapseDesc,
#new_synapse .synapseDesc,
#new_synapse .genericSynapseDesc {
width: 190px;
line-height: 14px;
@ -1967,7 +1978,7 @@ and it won't be important on password protected instances */
}
#svi1 > p, #svi2 > p {
width: 150px;
width: 150px;
}
.lightboxContent {
font-family: 'din-regular';
@ -2046,7 +2057,7 @@ and it won't be important on password protected instances */
display: none !important;
}
.ui-tabs-vertical {
}
.ui-tabs-vertical .ui-tabs-nav {
float: left;
@ -2220,7 +2231,7 @@ and it won't be important on password protected instances */
#colophon a {
color: #c04f4f;
text-decoration: underline;
text-decoration: underline;
}
#colophonCols {
@ -2291,15 +2302,15 @@ and it won't be important on password protected instances */
background: url(<%= asset_data_uri 'browser_icons.png' %>) no-repeat -220px 0;
}
#chromeIcon:hover{
#chromeIcon:hover{
opacity: 1;
}
#fireFoxIcon:hover{
#fireFoxIcon:hover{
opacity: 1;
}
#safariIcon:hover{
#safariIcon:hover{
opacity: 1;
}
@ -2519,7 +2530,7 @@ and it won't be important on password protected instances */
margin: 5px 0;
font-size: 14px;
line-height: 18px;
font-family: 'din-regular';
font-family: 'din-regular';
}
#cheatSheet .csItem a {
@ -2719,7 +2730,7 @@ and it won't be important on password protected instances */
word-wrap: break-word;
}
.blackBox td.iconColor {
}
.blackBox .field {
margin: 15px 0 5px;
@ -2845,7 +2856,7 @@ and it won't be important on password protected instances */
display: none;
background-color: #4fb5c0;
color: #FFFFFF;
padding: 2px 8px 2px 8px;
padding: 2px 8px 2px 8px;
position: absolute;
top: 7px;
left:28px;
@ -2878,7 +2889,7 @@ and it won't be important on password protected instances */
background-position: 16px 8px;
-webkit-transform-origin: left center;
transform-origin: left center;
}
}
.blockchain-btn {
display: inline;
float: right;

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;

3
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>
@ -37,7 +36,7 @@
<% end %>
<div class="clearfloat"></div>
</div> <!-- end mapElement -->
</div> <!-- end mapElement -->
<% if authenticated? %>
<!-- create new map -->

23
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);
@ -56,7 +73,7 @@ function start() {
// this will ping everyone on a map that there's a person just left the map
socket.on('disconnect', end);
socket.on('endMapperNotify', end);
// this will ping everyone on a map that someone just turned on realtime
socket.on('notifyStartRealtime', function (data) {
var newUser = {
@ -66,7 +83,7 @@ function start() {
socket.broadcast.emit('maps-' + data.mapid + '-newrealtime', newUser);
});
// this will ping everyone on a map that someone just turned on realtime
socket.on('notifyStopRealtime', function (data) {
var newUser = {
@ -151,4 +168,4 @@ function start() {
});
}
start();
start();

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) {