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'); console.log('connected');
self.startActiveMap(); self.startActiveMap();
}); });
self.webrtc = new SimpleWebRTC({
if (Metamaps.Active.Mapper) {
self.webrtc = new SimpleWebRTC({
connection: self.socket, connection: self.socket,
localVideoEl: self.videoId, localVideoEl: self.videoId,
remoteVideosEl: '', remoteVideosEl: '',
@ -1965,45 +1967,45 @@ Metamaps.Realtime = {
audio: true audio: true
}, },
nick: Metamaps.Active.Mapper.id 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 var
$video = $('<video></video>').attr('id', self.videoId); $video = $('<video></video>').attr('id', self.videoId);
self.localVideo = { self.localVideo = {
$video: $video, $video: $video,
view: new Metamaps.Views.videoView($video[0], $('body'), 'me', true, { view: new Metamaps.Views.videoView($video[0], $('body'), 'me', true, {
DOUBLE_CLICK_TOLERANCE: 200, DOUBLE_CLICK_TOLERANCE: 200,
avatar: Metamaps.Active.Mapper ? Metamaps.Active.Mapper.get('image') : '' avatar: Metamaps.Active.Mapper ? Metamaps.Active.Mapper.get('image') : ''
}), })
}; };
self.room = new Metamaps.Views.room({ self.room = new Metamaps.Views.room({
webrtc: self.webrtc, webrtc: self.webrtc,
socket: self.socket, socket: self.socket,
username: Metamaps.Active.Mapper ? Metamaps.Active.Mapper.get('name') : '', username: Metamaps.Active.Mapper ? Metamaps.Active.Mapper.get('name') : '',
image: Metamaps.Active.Mapper ? Metamaps.Active.Mapper.get('image') : '', image: Metamaps.Active.Mapper ? Metamaps.Active.Mapper.get('image') : '',
room: 'global', room: 'global',
$video: self.localVideo.$video, $video: self.localVideo.$video,
myVideoView: self.localVideo.view, myVideoView: self.localVideo.view,
config: { DOUBLE_CLICK_TOLERANCE: 200 } config: { DOUBLE_CLICK_TOLERANCE: 200 }
}); });
if (Metamaps.Messages) self.room.messages.add(Metamaps.Messages); if (Metamaps.Messages) self.room.messages.add(Metamaps.Messages);
self.room.videoAdded(self.handleVideoAdded);
self.createChat(); self.createChat();
//self.webrtc.startLocalVideo(); } // 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 () { startActiveMap: function () {
var self = Metamaps.Realtime; var self = Metamaps.Realtime;
@ -2053,30 +2055,86 @@ Metamaps.Realtime = {
self.status = true; self.status = true;
//$(".sidebarCollaborateIcon").addClass("blue"); //$(".sidebarCollaborateIcon").addClass("blue");
$(".collabCompass").show(); $(".collabCompass").show();
self.localVideo.view.$container.show();
self.room.room = 'map-' + Metamaps.Active.Map.id; self.room.room = 'map-' + Metamaps.Active.Map.id;
self.room.join(function (err, roomDesc) { self.checkForACallToJoin();
//attachMediaStream(self.webrtc.webrtc.localStream, self.localVideo.$video[0]); },
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) { console.log(data);
// random position for now var notifyText = 'There\'s a conversation happening, want to join?';
var top = Math.floor((Math.random() * ($('#wrapper').height() - 100)) + 1); notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.joinCall()">Yes</button>';
var left = Math.floor((Math.random() * ($('#wrapper').width() - 100)) + 1); notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.GlobalUI.clearNotify()">No</button>';
//var right = Math.floor((Math.random() * (468 - 100)) + 1); Metamaps.GlobalUI.notifyUser(notifyText);
v.setParent($('#wrapper')); },
$('#wrapper').append(v.$container); invitedToCall: function (inviter) {
v.$container.css({ var self = Metamaps.Realtime;
top: top + 'px',
left: left + 'px'
});
}
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) { var username = self.mappersOnMap[userid].name;
addVideo(self.room.videos[peer]); 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() { startVideo: function() {
var var
@ -2134,6 +2192,13 @@ Metamaps.Realtime = {
mapid: Metamaps.Active.Map.id 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 // if you're the 'new guy' update your list with who's already online
socket.on(myId + '-' + Metamaps.Active.Map.id + '-UpdateMapperList', self.updateMapperList); 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.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(){ attachMapListener: function(){
var self = Metamaps.Realtime; var self = Metamaps.Realtime;
@ -2291,6 +2366,7 @@ Metamaps.Realtime = {
// data.userrealtime // data.userrealtime
self.mappersOnMap[data.userid] = { self.mappersOnMap[data.userid] = {
id: data.userid,
name: data.username, name: data.username,
username: data.username, username: data.username,
image: data.userimage, image: data.userimage,
@ -2330,8 +2406,10 @@ Metamaps.Realtime = {
// data.username // data.username
// data.userimage // data.userimage
// data.coords // data.coords
var firstOtherPerson = Object.keys(self.mappersOnMap).length === 0;
self.mappersOnMap[data.userid] = { self.mappersOnMap[data.userid] = {
id: data.userid,
name: data.username, name: data.username,
username: data.username, username: data.username,
image: data.userimage, image: data.userimage,
@ -2357,7 +2435,11 @@ Metamaps.Realtime = {
// create a div for the collaborators compass // create a div for the collaborators compass
self.createCompass(data.username, data.userid, data.userimage, self.mappersOnMap[data.userid].color, !self.status); 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 // send this new mapper back your details, and the awareness that you've loaded the map
var update = { 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='chat-message-time'>{{ timestamp }}</div>" +
"<div class='clearfloat'></div>" + "<div class='clearfloat'></div>" +
"</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-image'><img src='{{ image }}' /></div>" +
"<div class='chat-participant-name'>{{ username }}</div>" + "<div class='chat-participant-name'>{{ username }}</div>" +
"<div class='clearfloat'></div>" + "<div class='clearfloat'></div>" +
@ -151,7 +151,7 @@ Metamaps.Views.chatView = (function () {
this.$participants.append(html); this.$participants.append(html);
}, },
removeParticipant: function(participant) { 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); this.webrtc.joinRoom(this.room, cb);
} }
room.prototype.leaveVideoOnly = function() {
this.isActiveRoom = false;
this.webrtc.leaveRoom();
}
room.prototype.leave = function() { room.prototype.leave = function() {
for (var id in this.videos) { for (var id in this.videos) {
this.removeVideo(id); this.removeVideo(id);
@ -51,10 +56,6 @@ Metamaps.Views.room = (function () {
room.prototype.init = function () { room.prototype.init = function () {
var self = this; 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) { $(document).on(VideoView.events.audioControlClick, function (event, videoView) {
if (!videoView.audioStatus) self.webrtc.mute(); if (!videoView.audioStatus) self.webrtc.mute();
else if (videoView.audioStatus) self.webrtc.unmute(); else if (videoView.audioStatus) self.webrtc.unmute();
@ -70,7 +71,6 @@ Metamaps.Views.room = (function () {
var mapper = Metamaps.Realtime.mappersOnMap[peer.nick]; var mapper = Metamaps.Realtime.mappersOnMap[peer.nick];
peer.avatar = mapper.image; peer.avatar = mapper.image;
peer.username = mapper.name; peer.username = mapper.name;
console.log(peer);
if (self.isActiveRoom) { if (self.isActiveRoom) {
self.addVideo(peer); self.addVideo(peer);
} }
@ -148,7 +148,6 @@ Metamaps.Views.room = (function () {
id = this.webrtc.getDomId(peer), id = this.webrtc.getDomId(peer),
video = attachMediaStream(peer.stream); video = attachMediaStream(peer.stream);
$(video).prop('muted', true); // until the viewer accepts the viewing
var var
v = new VideoView(video, null, id, false, { DOUBLE_CLICK_TOLERANCE: 200, avatar: peer.avatar, username: peer.username }); 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]) { if (this.videos[id]) {
this.videos[id].remove(); this.videos[id].remove();
delete this.videos[id]; 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 * @static
*/ */
room.events = { room.events = {
newMessage: "Room:newMessage" newMessage: "Room:newMessage",
callEnded: "Room:callEnded"
}; };
return room; return room;

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

@ -98,14 +98,14 @@ Metamaps.Views.videoView = (function () {
this.videoStatus = !this.videoStatus; this.videoStatus = !this.videoStatus;
$(document).trigger(videoView.events.videoControlClick, [this]); $(document).trigger(videoView.events.videoControlClick, [this]);
}, },
yesReceiveClick: function () { /*yesReceiveClick: function () {
this.$receiveContainer.hide(); this.$receiveContainer.hide();
this.$avatar.hide(); this.$avatar.hide();
$(this.video).prop('muted', false); $(this.video).prop('muted', false);
}, },
noReceiveClick: function () { noReceiveClick: function () {
this.$container.hide(); this.$container.hide();
} }*/
}; };
var videoView = function(video, $parent, id, isMyself, config) { var videoView = function(video, $parent, id, isMyself, config) {
@ -135,6 +135,7 @@ Metamaps.Views.videoView = (function () {
$vidContainer.addClass('video-cutoff'); $vidContainer.addClass('video-cutoff');
$vidContainer.append(this.video); $vidContainer.append(this.video);
/*
if (!isMyself) { 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.$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); this.$container.append(this.$receiveContainer);
@ -144,7 +145,7 @@ Metamaps.Views.videoView = (function () {
this.$container.find('.btn-no').on('click', function (event) { this.$container.find('.btn-no').on('click', function (event) {
Handlers.noReceiveClick.call(self, event); Handlers.noReceiveClick.call(self, event);
}); });
} }*/
this.avatar = config.avatar; this.avatar = config.avatar;
this.$avatar = $('<img draggable="false" class="collaborator-video-avatar" src="' + config.avatar + '" width="150" height="150" />'); 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) { if (isMyself) {
this.$avatar.hide();
Private.addControls.call(this); Private.addControls.call(this);
} }

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

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

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

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

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

@ -20,7 +20,6 @@
<div class="upperRightUI"> <div class="upperRightUI">
<div class="supportUs upperRightEl openLightbox" data-open="donate">SUPPORT US!</div> <div class="supportUs upperRightEl openLightbox" data-open="donate">SUPPORT US!</div>
<div class="mapElement upperRightEl upperRightMapButtons"> <div class="mapElement upperRightEl upperRightMapButtons">
<div class="startVideo upperRightEl">start my video</div>
<!-- filtering --> <!-- filtering -->
<div class="sidebarFilter upperRightEl"> <div class="sidebarFilter upperRightEl">
<div class="sidebarFilterIcon upperRightIcon"><div class="tooltipsUnder">Filter</div></div> <div class="sidebarFilterIcon upperRightIcon"><div class="tooltipsUnder">Filter</div></div>
@ -37,7 +36,7 @@
<% end %> <% end %>
<div class="clearfloat"></div> <div class="clearfloat"></div>
</div> <!-- end mapElement --> </div> <!-- end mapElement -->
<% if authenticated? %> <% if authenticated? %>
<!-- create new map --> <!-- 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); 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 // this will ping everyone on a map that there's a person just joined the map
socket.on('newMapperNotify', function (data) { socket.on('newMapperNotify', function (data) {
socket.set('mapid', data.mapid); 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 // this will ping everyone on a map that there's a person just left the map
socket.on('disconnect', end); socket.on('disconnect', end);
socket.on('endMapperNotify', end); socket.on('endMapperNotify', end);
// this will ping everyone on a map that someone just turned on realtime // this will ping everyone on a map that someone just turned on realtime
socket.on('notifyStartRealtime', function (data) { socket.on('notifyStartRealtime', function (data) {
var newUser = { var newUser = {
@ -66,7 +83,7 @@ function start() {
socket.broadcast.emit('maps-' + data.mapid + '-newrealtime', newUser); socket.broadcast.emit('maps-' + data.mapid + '-newrealtime', newUser);
}); });
// this will ping everyone on a map that someone just turned on realtime // this will ping everyone on a map that someone just turned on realtime
socket.on('notifyStopRealtime', function (data) { socket.on('notifyStopRealtime', function (data) {
var newUser = { 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 = { client.resources = {
screen: false, screen: false,
video: false, video: true,
audio: false audio: false
}; };
@ -54,17 +54,6 @@ module.exports = function(io, stunservers) {
}); });
client.on('join', join); 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) { function removeFeed(type) {
if (client.room) { if (client.room) {