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

[WIP] display whether a map is live on every map card (#775)

Browse source 
* tidy up

* checkwhethertosave was no longer correct
This commit is contained in:
Connor Turland 2016-10-17 22:27:15 -04:00 committed by GitHub
parent 6e75274737
commit fe0da255dd
3 changed files with 57 additions and 141 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
frontend/src/Metamaps/JIT.js
View file

@ -938,20 +938,8 @@ const JIT = {
// check whether to save mappings // check whether to save mappings
const checkWhetherToSave = function () { const checkWhetherToSave = function () {
const map = Active.Map const map = Active.Map
if (!map) return false if (!map) return false
return map.authorizeToEdit(Active.Mapper)
const mapper = Active.Mapper
// this case
// covers when it is a public map owned by you
// and also when it's a private map
const activeMappersMap = map.authorizePermissionChange(mapper)
const commonsMap = map.get('permission') === 'commons'
const realtimeOn = Realtime.status
// don't save if commons map, and you have realtime off,
// even if you're map creator
return map && mapper && ((commonsMap && realtimeOn) || (activeMappersMap && !commonsMap))
} }
if (checkWhetherToSave()) { if (checkWhetherToSave()) {

138
frontend/src/Metamaps/Realtime.js
View file

@ -36,7 +36,6 @@ const Realtime = {
mappersOnMap: {}, mappersOnMap: {},
disconnected: false, disconnected: false,
chatOpen: false, chatOpen: false,
status: true, // stores whether realtime is True/On or False/Off,
soundId: null, soundId: null,
broadcastingStatus: false, broadcastingStatus: false,
inConversation: false, inConversation: false,
@ -51,6 +50,7 @@ const Realtime = {
console.log('connected') console.log('connected')
if (!self.disconnected) { if (!self.disconnected) {
self.startActiveMap() self.startActiveMap()
self.subscribeToLiveMaps()
} else self.disconnected = false } else self.disconnected = false
}) })
self.socket.on('disconnect', function () { self.socket.on('disconnect', function () {
@ -104,6 +104,22 @@ const Realtime = {
$('body').prepend(self.room.chat.$container) $('body').prepend(self.room.chat.$container)
} // if Active.Mapper } // if Active.Mapper
}, },
subscribeToLiveMaps: function () {
var self = Metamaps.Realtime
// Handles livemaps array on the UI
var liveMaps = []
self.socket.emit('requestLiveMaps')
self.socket.on('receiveLiveMaps', function (maps) {
console.log(maps)
liveMaps.push(maps)
})
self.socket.on('map_went_live', function (map) {
liveMaps.push(map)
})
self.socket.on('map_no_longer_live', function (data) {
// remove from liveMaps
})
},
addJuntoListeners: function () { addJuntoListeners: function () {
var self = Realtime var self = Realtime
@ -210,7 +226,6 @@ const Realtime = {
if (self.inConversation) self.leaveCall() if (self.inConversation) self.leaveCall()
self.socket.emit('endMapperNotify') self.socket.emit('endMapperNotify')
$('.collabCompass').remove() $('.collabCompass').remove()
self.status = false
if (self.room) { if (self.room) {
self.room.leave() self.room.leave()
self.room.chat.$container.hide() self.room.chat.$container.hide()
@ -220,8 +235,6 @@ const Realtime = {
turnOn: function (notify) { turnOn: function (notify) {
var self = Realtime var self = Realtime
if (notify) self.sendRealtimeOn()
self.status = true
$('.collabCompass').show() $('.collabCompass').show()
self.room.chat.$container.show() self.room.chat.$container.show()
self.room.room = 'map-' + Active.Map.id self.room.room = 'map-' + Active.Map.id
@ -434,7 +447,7 @@ const Realtime = {
self.localVideo.view.manuallyPositioned = false self.localVideo.view.manuallyPositioned = false
self.positionVideos() self.positionVideos()
self.localVideo.view.$container.show() self.localVideo.view.$container.show()
if (self.localVideo && self.status) { if (self.localVideo) {
$('#wrapper').append(self.localVideo.view.$container) $('#wrapper').append(self.localVideo.view.$container)
} }
self.room.join() self.room.join()
@ -467,20 +480,6 @@ const Realtime = {
self.callEnded() self.callEnded()
} }
}, },
turnOff: function (silent) {
var self = Realtime
if (self.status) {
if (!silent) self.sendRealtimeOff()
// $(".rtMapperSelf").removeClass('littleRtOn').addClass('littleRtOff')
// $('.rtOn').removeClass('active')
// $('.rtOff').addClass('active')
self.status = false
// $(".sidebarCollaborateIcon").removeClass("blue")
$('.collabCompass').hide()
$('#' + self.videoId).remove()
}
},
setupSocket: function () { setupSocket: function () {
var self = Realtime var self = Realtime
var socket = Realtime.socket var socket = Realtime.socket
@ -490,7 +489,8 @@ const Realtime = {
userid: myId, userid: myId,
username: Active.Mapper.get('name'), username: Active.Mapper.get('name'),
userimage: Active.Mapper.get('image'), userimage: Active.Mapper.get('image'),
mapid: Active.Map.id mapid: Active.Map.id,
map: Active.Map.attributes
}) })
socket.on(myId + '-' + Active.Map.id + '-invitedToCall', self.invitedToCall) // new call socket.on(myId + '-' + Active.Map.id + '-invitedToCall', self.invitedToCall) // new call
@ -515,12 +515,6 @@ const Realtime = {
// receive word that a mapper left the map // receive word that a mapper left the map
socket.on('maps-' + Active.Map.id + '-lostmapper', self.lostPeerOnMap) socket.on('maps-' + Active.Map.id + '-lostmapper', self.lostPeerOnMap)
// receive word that there's a mapper turned on realtime
socket.on('maps-' + Active.Map.id + '-newrealtime', self.newCollaborator)
// receive word that there's a mapper turned on realtime
socket.on('maps-' + Active.Map.id + '-lostrealtime', self.lostCollaborator)
// //
socket.on('maps-' + Active.Map.id + '-topicDrag', self.topicDrag) socket.on('maps-' + Active.Map.id + '-topicDrag', self.topicDrag)
@ -622,30 +616,6 @@ const Realtime = {
socket.on('mapChangeFromServer', self.mapChange) socket.on('mapChangeFromServer', self.mapChange)
}, },
sendRealtimeOn: function () {
var self = Realtime
var socket = Realtime.socket
// send this new mapper back your details, and the awareness that you're online
var update = {
username: Active.Mapper.get('name'),
userid: Active.Mapper.id,
mapid: Active.Map.id
}
socket.emit('notifyStartRealtime', update)
},
sendRealtimeOff: function () {
var self = Realtime
var socket = Realtime.socket
// send this new mapper back your details, and the awareness that you're online
var update = {
username: Active.Mapper.get('name'),
userid: Active.Mapper.id,
mapid: Active.Map.id
}
socket.emit('notifyStopRealtime', update)
},
updateMapperList: function (data) { updateMapperList: function (data) {
var self = Realtime var self = Realtime
var socket = Realtime.socket var socket = Realtime.socket
@ -653,7 +623,6 @@ const Realtime = {
// data.userid // data.userid
// data.username // data.username
// data.userimage // data.userimage
// data.userrealtime
self.mappersOnMap[data.userid] = { self.mappersOnMap[data.userid] = {
id: data.userid, id: data.userid,
@ -661,7 +630,6 @@ const Realtime = {
username: data.username, username: data.username,
image: data.userimage, image: data.userimage,
color: Util.getPastelColor(), color: Util.getPastelColor(),
realtime: data.userrealtime,
inConversation: data.userinconversation, inConversation: data.userinconversation,
coords: { coords: {
x: 0, x: 0,
@ -674,7 +642,7 @@ const Realtime = {
if (data.userinconversation) self.room.chat.mapperJoinedCall(data.userid) if (data.userinconversation) self.room.chat.mapperJoinedCall(data.userid)
// 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)
} }
}, },
newPeerOnMap: function (data) { newPeerOnMap: function (data) {
@ -701,12 +669,12 @@ const Realtime = {
} }
// create an item for them in the realtime box // create an item for them in the realtime box
if (data.userid !== Active.Mapper.id && self.status) { if (data.userid !== Active.Mapper.id) {
self.room.chat.sound.play('joinmap') self.room.chat.sound.play('joinmap')
self.room.chat.addParticipant(self.mappersOnMap[data.userid]) self.room.chat.addParticipant(self.mappersOnMap[data.userid])
// 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)
var notifyMessage = data.username + ' just joined the map' var notifyMessage = data.username + ' just joined the map'
if (firstOtherPerson) { if (firstOtherPerson) {
@ -720,14 +688,13 @@ const Realtime = {
username: Active.Mapper.get('name'), username: Active.Mapper.get('name'),
userimage: Active.Mapper.get('image'), userimage: Active.Mapper.get('image'),
userid: Active.Mapper.id, userid: Active.Mapper.id,
userrealtime: self.status,
userinconversation: self.inConversation, userinconversation: self.inConversation,
mapid: Active.Map.id mapid: Active.Map.id
} }
socket.emit('updateNewMapperList', update) socket.emit('updateNewMapperList', update)
} }
}, },
createCompass: function (name, id, image, color, hide) { createCompass: function (name, id, image, color) {
var str = '<img width="28" height="28" src="' + image + '" /><p>' + name + '</p>' var str = '<img width="28" height="28" src="' + image + '" /><p>' + name + '</p>'
str += '<div id="compassArrow' + id + '" class="compassArrow"></div>' str += '<div id="compassArrow' + id + '" class="compassArrow"></div>'
$('#compass' + id).remove() $('#compass' + id).remove()
@ -735,9 +702,6 @@ const Realtime = {
id: 'compass' + id, id: 'compass' + id,
class: 'collabCompass' class: 'collabCompass'
}).html(str).appendTo('#wrapper') }).html(str).appendTo('#wrapper')
if (hide) {
$('#compass' + id).hide()
}
$('#compass' + id + ' img').css({ $('#compass' + id + ' img').css({
'border': '2px solid ' + color 'border': '2px solid ' + color
}) })
@ -765,37 +729,10 @@ const Realtime = {
self.callEnded() self.callEnded()
} }
}, },
newCollaborator: function (data) {
var self = Realtime
var socket = Realtime.socket
// data.userid
// data.username
self.mappersOnMap[data.userid].realtime = true
// $('#mapper' + data.userid).removeClass('littleRtOff').addClass('littleRtOn')
$('#compass' + data.userid).show()
GlobalUI.notifyUser(data.username + ' just turned on realtime')
},
lostCollaborator: function (data) {
var self = Realtime
var socket = Realtime.socket
// data.userid
// data.username
self.mappersOnMap[data.userid].realtime = false
// $('#mapper' + data.userid).removeClass('littleRtOn').addClass('littleRtOff')
$('#compass' + data.userid).hide()
GlobalUI.notifyUser(data.username + ' just turned off realtime')
},
updatePeerCoords: function (data) { updatePeerCoords: function (data) {
var self = Realtime var self = Realtime
var socket = Realtime.socket var socket = Realtime.socket
if (!self.mappersOnMap[data.userid]) return
self.mappersOnMap[data.userid].coords = {x: data.usercoords.x,y: data.usercoords.y} self.mappersOnMap[data.userid].coords = {x: data.usercoords.x,y: data.usercoords.y}
self.positionPeerIcon(data.userid) self.positionPeerIcon(data.userid)
@ -804,13 +741,8 @@ const Realtime = {
var self = Realtime var self = Realtime
var socket = Realtime.socket var socket = Realtime.socket
if (self.status) { // if i have realtime turned on for (var key in self.mappersOnMap) {
for (var key in self.mappersOnMap) { self.positionPeerIcon(key)
var mapper = self.mappersOnMap[key]
if (mapper.realtime) {
self.positionPeerIcon(key)
}
}
} }
}, },
positionPeerIcon: function (id) { positionPeerIcon: function (id) {
@ -875,7 +807,7 @@ const Realtime = {
var map = Active.Map var map = Active.Map
var mapper = Active.Mapper var mapper = Active.Mapper
if (self.status && map.authorizeToEdit(mapper) && socket) { if (map.authorizeToEdit(mapper) && socket) {
var update = { var update = {
usercoords: coords, usercoords: coords,
userid: Active.Mapper.id, userid: Active.Mapper.id,
@ -888,7 +820,7 @@ const Realtime = {
var self = Realtime var self = Realtime
var socket = self.socket var socket = self.socket
if (Active.Map && self.status) { if (Active.Map) {
positions.mapid = Active.Map.id positions.mapid = Active.Map.id
socket.emit('topicDrag', positions) socket.emit('topicDrag', positions)
} }
@ -900,7 +832,7 @@ const Realtime = {
var topic var topic
var node var node
if (Active.Map && self.status) { if (Active.Map) {
for (var key in positions) { for (var key in positions) {
topic = Metamaps.Topics.get(key) topic = Metamaps.Topics.get(key)
if (topic) node = topic.get('node') if (topic) node = topic.get('node')
@ -1009,7 +941,7 @@ const Realtime = {
var self = Realtime var self = Realtime
var socket = self.socket var socket = self.socket
if (Active.Map && self.status) { if (Active.Map) {
data.mapperid = Active.Mapper.id data.mapperid = Active.Mapper.id
data.mapid = Active.Map.id data.mapid = Active.Map.id
socket.emit('newTopic', data) socket.emit('newTopic', data)
@ -1021,8 +953,6 @@ const Realtime = {
var self = Realtime var self = Realtime
var socket = self.socket var socket = self.socket
if (!self.status) return
function waitThenRenderTopic () { function waitThenRenderTopic () {
if (topic && mapping && mapper) { if (topic && mapping && mapper) {
Topic.renderTopic(mapping, topic, false, false) Topic.renderTopic(mapping, topic, false, false)
@ -1085,8 +1015,6 @@ const Realtime = {
var self = Realtime var self = Realtime
var socket = self.socket var socket = self.socket
if (!self.status) return
var topic = Metamaps.Topics.get(data.mappableid) var topic = Metamaps.Topics.get(data.mappableid)
if (topic) { if (topic) {
var node = topic.get('node') var node = topic.get('node')
@ -1113,8 +1041,6 @@ const Realtime = {
var self = Realtime var self = Realtime
var socket = self.socket var socket = self.socket
if (!self.status) return
function waitThenRenderSynapse () { function waitThenRenderSynapse () {
if (synapse && mapping && mapper) { if (synapse && mapping && mapper) {
topic1 = synapse.getTopic1() topic1 = synapse.getTopic1()
@ -1182,8 +1108,6 @@ const Realtime = {
var self = Realtime var self = Realtime
var socket = self.socket var socket = self.socket
if (!self.status) return
var synapse = Metamaps.Synapses.get(data.mappableid) var synapse = Metamaps.Synapses.get(data.mappableid)
if (synapse) { if (synapse) {
var edge = synapse.get('edge') var edge = synapse.get('edge')

46
realtime/realtime-server.js
View file

@ -6,11 +6,17 @@ var
io.set('log', false); io.set('log', false);
function start() { function start() {
var livemaps = {}
signalServer(io, stunservers); signalServer(io, stunservers);
io.on('connection', function (socket) { io.on('connection', function (socket) {
socket.on('requestLiveMaps', function (activeUser) {
//constrain response to maps visible to user
var maps = Object.keys(livemaps).map(function(key) { return livemaps[key] })
socket.emit('receiveLiveMaps', maps)
})
// this will ping a new person with awareness of who's already on the map // this will ping a new person with awareness of who's already on the map
socket.on('updateNewMapperList', function (data) { socket.on('updateNewMapperList', function (data) {
var existingUser = { var existingUser = {
@ -56,6 +62,16 @@ function start() {
// 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) {
if (!livemaps[data.mapid]) {
livemaps[data.mapid] = data.map // { name: '', desc: '', numTopics: '' }
livemaps[data.mapid].mapper_count = 1
io.sockets.emit('map_went_live', livemaps[data.mapid])
}
else {
livemaps[data.mapid].mapper_count++
}
socket.set('mapid', data.mapid); socket.set('mapid', data.mapid);
socket.set('userid', data.userid); socket.set('userid', data.userid);
socket.set('username', data.username); socket.set('username', data.username);
@ -70,6 +86,7 @@ function start() {
}); });
var end = function () { var end = function () {
var socketUserName, socketUserID; var socketUserName, socketUserID;
socket.get('userid', function (err, id) { socket.get('userid', function (err, id) {
socketUserID = id; socketUserID = id;
@ -82,6 +99,13 @@ function start() {
userid: socketUserID userid: socketUserID
}; };
socket.get('mapid', function (err, mapid) { socket.get('mapid', function (err, mapid) {
if (livemaps[mapid] && livemaps[mapid].mapper_count == 1) {
delete livemaps[mapid]
io.sockets.emit('map_no_longer_live', { id: mapid })
}
else if (livemaps[mapid]) {
livemaps[mapid].mapper_count--
}
socket.broadcast.emit('maps-' + mapid + '-lostmapper', data); socket.broadcast.emit('maps-' + mapid + '-lostmapper', data);
}); });
}; };
@ -89,26 +113,6 @@ function start() {
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
socket.on('notifyStartRealtime', function (data) {
var newUser = {
userid: data.userid,
username: data.username
};
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 = {
userid: data.userid,
username: data.username
};
socket.broadcast.emit('maps-' + data.mapid + '-lostrealtime', newUser);
});
socket.on('updateMapperCoords', function (data) { socket.on('updateMapperCoords', function (data) {
var peer = { var peer = {
userid: data.userid, userid: data.userid,