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

[WIP] keep client fresh with junto info globally (#791)

Browse source 
* push state to client

* junto status is live on map cards XD

* little fixes

* eslint stuff

* remove object rest spread

* i think this makes realtime work without needing babel-node
This commit is contained in:
Connor Turland 2016-10-21 09:29:04 -04:00 committed by GitHub
parent 7a09a1c620
commit fb427a11f0
20 changed files with 387 additions and 289 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
app/assets/images/junto.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 30 KiB

287
app/assets/stylesheets/mapcard.scss.erb
View file

@ -1,144 +1,163 @@
/* Map Cards */ /* Map Cards */
.map { .map {
display:inline-block; display:inline-block;
width:220px; width:220px;
height:340px; height:340px;
font-size: 12px; font-size: 12px;
text-align: left; text-align: left;
overflow: visible; overflow: visible;
background: #e8e8e8; background: #e8e8e8;
border-radius:2px; border-radius:2px;
margin:16px; margin:16px;
box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16); box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
}
.map.newMap {
float: left;
position: relative;
}
.map.newMap:hover {
background: #dcdcdc;
}
.map.newMap a {
height: 340px;
display: block;
position: relative;
}
.newMap .newMapImage {
display: block;
width: 72px;
height: 72px;
background-image: url("<%= asset_data_uri('newmap_sprite.png') %>");
background-repeat: no-repeat;
background-position: 0 0;
position: absolute;
left: 50%;
margin-left: -36px;
top: 50%;
margin-top: -36px;
}
.map:hover .newMapImage {
background-position: 0 -72px;
}
.newMap span {
font-family: 'din-regular', sans-serif;
font-size: 18px;
line-height: 22px;
text-align: center;
display: block;
padding-top: 220px;
}
.mapCard { &.newMap {
position:relative; float: left;
width:100%; position: relative;
height:308px;
padding: 0 0 16px 0;
color: #424242;
.mapScreenshot { &:hover {
width: 100%; background: #dcdcdc;
height: 220px;
}
.mapScreenshot img { .newMapImage {
width: 100%; background-position: 0 -72px;
} }
}
.title { a {
word-wrap: break-word; height: 340px;
font-size:18px; display: block;
line-height:22px; position: relative;
height: 71px; }
display:table;
padding: 0 16px; .newMapImage {
font-family: 'din-regular', sans-serif; display: block;
margin: 0 auto; width: 72px;
height: 72px;
background-image: url("<%= asset_data_uri('newmap_sprite.png') %>");
background-repeat: no-repeat;
background-position: 0 0;
position: absolute;
left: 50%;
margin-left: -36px;
top: 50%;
margin-top: -36px;
}
span {
font-family: 'din-regular', sans-serif;
font-size: 18px;
line-height: 22px;
text-align: center;
display: block;
padding-top: 220px;
}
}
.mapCard {
position:relative;
width:100%;
height:308px;
padding: 0 0 16px 0;
color: #424242;
.mapHasMapper, .mapHasConversation {
position: absolute;
top: 5px;
left: 5px;
width: 32px;
height: 32px;
}
.mapHasMapper {
background: url('<%= asset_path('junto.png') %>');
}
.mapHasConversation {
background: url('<%= asset_path('junto.gif') %>');
}
.mapScreenshot {
width: 100%;
height: 220px;
}
.mapScreenshot img {
width: 100%;
}
.title {
word-wrap: break-word;
font-size:18px;
line-height:22px;
height: 71px;
display:table;
padding: 0 16px;
font-family: 'din-regular', sans-serif;
margin: 0 auto;
.innerTitle {
display: table-cell;
vertical-align: middle;
text-align: center;
}
}
.creatorAndPerm {
padding: 8px;
}
.creatorImage {
display: inline-block;
border-radius: 16px;
vertical-align: middle;
width: 32px;
height: 32px;
}
span.creatorName {
margin-left: 8px;
}
.scroll {
display:block;
font-family: helvetica, sans-serif;
font-size: 12px;
word-wrap: break-word;
text-align: center;
margin-top: 16px;
}
&:hover .mainContent {
filter: blur(2px);
}
&:hover .mapMetadata {
display: block;
}
.mapMetadata {
display: none;
position: absolute;
top: 0;
left: 0;
padding: 40px 20px 0;
height: 300px;
font-family: 'din-regular', sans-serif;
font-size: 12px;
color: #FFF;
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.43) 81%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.43) 81%,rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.43) 81%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
}
.metadataSection {
padding: 16px 0;
width: 90px;
float: left;
font-family: 'din-medium', sans-serif;
text-align: center;
}
.innerTitle {
display: table-cell;
vertical-align: middle;
text-align: center;
} }
} }
.creatorAndPerm {
padding: 8px;
}
.creatorImage {
display: inline-block;
border-radius: 16px;
vertical-align: middle;
width: 32px;
height: 32px;
}
span.creatorName {
margin-left: 8px;
}
.scroll {
display:block;
font-family: helvetica, sans-serif;
font-size: 12px;
word-wrap: break-word;
text-align: center;
margin-top: 16px;
}
&:hover .mainContent {
filter: blur(2px);
}
&:hover .mapMetadata {
display: block;
}
.mapMetadata {
display: none;
position: absolute;
top: 0;
left: 0;
padding: 40px 20px 0;
height: 300px;
font-family: 'din-regular', sans-serif;
font-size: 12px;
color: #FFF;
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.43) 81%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.43) 81%,rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.43) 81%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
}
.metadataSection {
padding: 16px 0;
width: 90px;
float: left;
font-family: 'din-medium', sans-serif;
text-align: center;
}
}

103
frontend/src/Metamaps/Realtime/events.js
View file

@ -1,54 +1,53 @@
/* EVENTS SENDABLE */ /* EVENTS SENDABLE */
export const REQUEST_LIVE_MAPS = 'REQUEST_LIVE_MAPS' module.exports = {
export const JOIN_MAP = 'JOIN_MAP' JOIN_MAP: 'JOIN_MAP',
export const LEAVE_MAP = 'LEAVE_MAP' CHECK_FOR_CALL: 'CHECK_FOR_CALL',
export const CHECK_FOR_CALL = 'CHECK_FOR_CALL' LEAVE_MAP: 'LEAVE_MAP',
export const ACCEPT_CALL = 'ACCEPT_CALL' ACCEPT_CALL: 'ACCEPT_CALL',
export const DENY_CALL = 'DENY_CALL' DENY_CALL: 'DENY_CALL',
export const DENY_INVITE = 'DENY_INVITE' DENY_INVITE: 'DENY_INVITE',
export const INVITE_TO_JOIN = 'INVITE_TO_JOIN' INVITE_TO_JOIN: 'INVITE_TO_JOIN',
export const INVITE_A_CALL = 'INVITE_A_CALL' INVITE_A_CALL: 'INVITE_A_CALL',
export const JOIN_CALL = 'JOIN_CALL' JOIN_CALL: 'JOIN_CALL',
export const LEAVE_CALL = 'LEAVE_CALL' LEAVE_CALL: 'LEAVE_CALL',
export const SEND_MAPPER_INFO = 'SEND_MAPPER_INFO' SEND_MAPPER_INFO: 'SEND_MAPPER_INFO',
export const SEND_COORDS = 'SEND_COORDS' SEND_COORDS: 'SEND_COORDS',
export const CREATE_MESSAGE = 'CREATE_MESSAGE' CREATE_MESSAGE: 'CREATE_MESSAGE',
export const DRAG_TOPIC = 'DRAG_TOPIC' DRAG_TOPIC: 'DRAG_TOPIC',
export const CREATE_TOPIC = 'CREATE_TOPIC' CREATE_TOPIC: 'CREATE_TOPIC',
export const UPDATE_TOPIC = 'UPDATE_TOPIC' UPDATE_TOPIC: 'UPDATE_TOPIC',
export const REMOVE_TOPIC = 'REMOVE_TOPIC' REMOVE_TOPIC: 'REMOVE_TOPIC',
export const DELETE_TOPIC = 'DELETE_TOPIC' DELETE_TOPIC: 'DELETE_TOPIC',
export const CREATE_SYNAPSE = 'CREATE_SYNAPSE' CREATE_SYNAPSE: 'CREATE_SYNAPSE',
export const UPDATE_SYNAPSE = 'UPDATE_SYNAPSE' UPDATE_SYNAPSE: 'UPDATE_SYNAPSE',
export const REMOVE_SYNAPSE = 'REMOVE_SYNAPSE' REMOVE_SYNAPSE: 'REMOVE_SYNAPSE',
export const DELETE_SYNAPSE = 'DELETE_SYNAPSE' DELETE_SYNAPSE: 'DELETE_SYNAPSE',
export const UPDATE_MAP = 'UPDATE_MAP' UPDATE_MAP: 'UPDATE_MAP',
/* EVENTS RECEIVABLE */ /* EVENTS RECEIVABLE */
export const INVITED_TO_CALL = 'INVITED_TO_CALL' JUNTO_UPDATED: 'JUNTO_UPDATED',
export const INVITED_TO_JOIN = 'INVITED_TO_JOIN' INVITED_TO_CALL: 'INVITED_TO_CALL',
export const CALL_ACCEPTED = 'CALL_ACCEPTED' INVITED_TO_JOIN: 'INVITED_TO_JOIN',
export const CALL_DENIED = 'CALL_DENIED' CALL_ACCEPTED: 'CALL_ACCEPTED',
export const INVITE_DENIED = 'INVITE_DENIED' CALL_DENIED: 'CALL_DENIED',
export const CALL_IN_PROGRESS = 'CALL_IN_PROGRESS' INVITE_DENIED: 'INVITE_DENIED',
export const CALL_STARTED = 'CALL_STARTED' CALL_IN_PROGRESS: 'CALL_IN_PROGRESS',
export const MAPPER_JOINED_CALL = 'MAPPER_JOINED_CALL' CALL_STARTED: 'CALL_STARTED',
export const MAPPER_LEFT_CALL = 'MAPPER_LEFT_CALL' MAPPER_JOINED_CALL: 'MAPPER_JOINED_CALL',
export const MAPPER_LIST_UPDATED = 'MAPPER_LIST_UPDATED' MAPPER_LEFT_CALL: 'MAPPER_LEFT_CALL',
export const NEW_MAPPER = 'NEW_MAPPER' MAPPER_LIST_UPDATED: 'MAPPER_LIST_UPDATED',
export const LOST_MAPPER = 'LOST_MAPPER' NEW_MAPPER: 'NEW_MAPPER',
export const MESSAGE_CREATED = 'MESSAGE_CREATED' LOST_MAPPER: 'LOST_MAPPER',
export const TOPIC_DRAGGED = 'TOPIC_DRAGGED' MESSAGE_CREATED: 'MESSAGE_CREATED',
export const TOPIC_CREATED = 'TOPIC_CREATED' TOPIC_DRAGGED: 'TOPIC_DRAGGED',
export const TOPIC_UPDATED = 'TOPIC_UPDATED' TOPIC_CREATED: 'TOPIC_CREATED',
export const TOPIC_REMOVED = 'TOPIC_REMOVED' TOPIC_UPDATED: 'TOPIC_UPDATED',
export const TOPIC_DELETED = 'TOPIC_DELETED' TOPIC_REMOVED: 'TOPIC_REMOVED',
export const SYNAPSE_CREATED = 'SYNAPSE_CREATED' TOPIC_DELETED: 'TOPIC_DELETED',
export const SYNAPSE_UPDATED = 'SYNAPSE_UPDATED' SYNAPSE_CREATED: 'SYNAPSE_CREATED',
export const SYNAPSE_REMOVED = 'SYNAPSE_REMOVED' SYNAPSE_UPDATED: 'SYNAPSE_UPDATED',
export const SYNAPSE_DELETED = 'SYNAPSE_DELETED' SYNAPSE_REMOVED: 'SYNAPSE_REMOVED',
export const PEER_COORDS_UPDATED = 'PEER_COORDS_UPDATED' SYNAPSE_DELETED: 'SYNAPSE_DELETED',
export const MAP_UPDATED = 'MAP_UPDATED' PEER_COORDS_UPDATED: 'PEER_COORDS_UPDATED',
export const LIVE_MAPS_RECEIVED = 'LIVE_MAPS_RECEIVED' MAP_UPDATED: 'MAP_UPDATED'
export const MAP_WENT_LIVE = 'MAP_WENT_LIVE' }
export const MAP_CEASED_LIVE = 'MAP_CEASED_LIVE'

25
frontend/src/Metamaps/Realtime/index.js
View file

@ -27,6 +27,7 @@ import Views from '../Views'
import Visualize from '../Visualize' import Visualize from '../Visualize'
import { import {
JUNTO_UPDATED,
INVITED_TO_CALL, INVITED_TO_CALL,
INVITED_TO_JOIN, INVITED_TO_JOIN,
CALL_ACCEPTED, CALL_ACCEPTED,
@ -34,9 +35,9 @@ import {
INVITE_DENIED, INVITE_DENIED,
CALL_IN_PROGRESS, CALL_IN_PROGRESS,
CALL_STARTED, CALL_STARTED,
MAPPER_LIST_UPDATED,
MAPPER_JOINED_CALL, MAPPER_JOINED_CALL,
MAPPER_LEFT_CALL, MAPPER_LEFT_CALL,
MAPPER_LIST_UPDATED,
NEW_MAPPER, NEW_MAPPER,
LOST_MAPPER, LOST_MAPPER,
MESSAGE_CREATED, MESSAGE_CREATED,
@ -50,13 +51,11 @@ import {
SYNAPSE_REMOVED, SYNAPSE_REMOVED,
SYNAPSE_DELETED, SYNAPSE_DELETED,
PEER_COORDS_UPDATED, PEER_COORDS_UPDATED,
LIVE_MAPS_RECEIVED,
MAP_WENT_LIVE,
MAP_CEASED_LIVE,
MAP_UPDATED MAP_UPDATED
} from './events' } from './events'
import { import {
juntoUpdated,
invitedToCall, invitedToCall,
invitedToJoin, invitedToJoin,
callAccepted, callAccepted,
@ -64,9 +63,9 @@ import {
inviteDenied, inviteDenied,
callInProgress, callInProgress,
callStarted, callStarted,
mapperListUpdated,
mapperJoinedCall, mapperJoinedCall,
mapperLeftCall, mapperLeftCall,
mapperListUpdated,
peerCoordsUpdated, peerCoordsUpdated,
newMapper, newMapper,
lostMapper, lostMapper,
@ -81,13 +80,9 @@ import {
synapseRemoved, synapseRemoved,
synapseDeleted, synapseDeleted,
mapUpdated, mapUpdated,
liveMapsReceived,
mapWentLive,
mapCeasedLive
} from './receivable' } from './receivable'
import { import {
requestLiveMaps,
joinMap, joinMap,
leaveMap, leaveMap,
checkForCall, checkForCall,
@ -98,8 +93,8 @@ import {
inviteACall, inviteACall,
joinCall, joinCall,
leaveCall, leaveCall,
sendMapperInfo,
sendCoords, sendCoords,
sendMapperInfo,
createMessage, createMessage,
dragTopic, dragTopic,
createTopic, createTopic,
@ -114,6 +109,7 @@ import {
} from './sendable' } from './sendable'
let Realtime = { let Realtime = {
juntoState: { connectedPeople: {}, liveMaps: {} },
videoId: 'video-wrapper', videoId: 'video-wrapper',
socket: null, socket: null,
webrtc: null, webrtc: null,
@ -499,12 +495,11 @@ let Realtime = {
} }
const sendables = [ const sendables = [
['requestLiveMaps',requestLiveMaps],
['joinMap',joinMap], ['joinMap',joinMap],
['leaveMap',leaveMap], ['leaveMap',leaveMap],
['checkForCall',checkForCall], ['checkForCall',checkForCall],
['acceptCall',acceptCall], ['acceptCall',acceptCall],
['denyAll',denyCall], ['denyCall',denyCall],
['denyInvite',denyInvite], ['denyInvite',denyInvite],
['inviteToJoin',inviteToJoin], ['inviteToJoin',inviteToJoin],
['inviteACall',inviteACall], ['inviteACall',inviteACall],
@ -529,6 +524,7 @@ sendables.forEach(sendable => {
}) })
const subscribeToEvents = (Realtime, socket) => { const subscribeToEvents = (Realtime, socket) => {
socket.on(JUNTO_UPDATED, juntoUpdated(Realtime))
socket.on(INVITED_TO_CALL, invitedToCall(Realtime)) socket.on(INVITED_TO_CALL, invitedToCall(Realtime))
socket.on(INVITED_TO_JOIN, invitedToJoin(Realtime)) socket.on(INVITED_TO_JOIN, invitedToJoin(Realtime))
socket.on(CALL_ACCEPTED, callAccepted(Realtime)) socket.on(CALL_ACCEPTED, callAccepted(Realtime))
@ -536,9 +532,9 @@ const subscribeToEvents = (Realtime, socket) => {
socket.on(INVITE_DENIED, inviteDenied(Realtime)) socket.on(INVITE_DENIED, inviteDenied(Realtime))
socket.on(CALL_IN_PROGRESS, callInProgress(Realtime)) socket.on(CALL_IN_PROGRESS, callInProgress(Realtime))
socket.on(CALL_STARTED, callStarted(Realtime)) socket.on(CALL_STARTED, callStarted(Realtime))
socket.on(MAPPER_LIST_UPDATED, mapperListUpdated(Realtime))
socket.on(MAPPER_JOINED_CALL, mapperJoinedCall(Realtime)) socket.on(MAPPER_JOINED_CALL, mapperJoinedCall(Realtime))
socket.on(MAPPER_LEFT_CALL, mapperLeftCall(Realtime)) socket.on(MAPPER_LEFT_CALL, mapperLeftCall(Realtime))
socket.on(MAPPER_LIST_UPDATED, mapperListUpdated(Realtime))
socket.on(PEER_COORDS_UPDATED, peerCoordsUpdated(Realtime)) socket.on(PEER_COORDS_UPDATED, peerCoordsUpdated(Realtime))
socket.on(NEW_MAPPER, newMapper(Realtime)) socket.on(NEW_MAPPER, newMapper(Realtime))
socket.on(LOST_MAPPER, lostMapper(Realtime)) socket.on(LOST_MAPPER, lostMapper(Realtime))
@ -553,9 +549,6 @@ const subscribeToEvents = (Realtime, socket) => {
socket.on(SYNAPSE_REMOVED, synapseRemoved(Realtime)) socket.on(SYNAPSE_REMOVED, synapseRemoved(Realtime))
socket.on(SYNAPSE_DELETED, synapseDeleted(Realtime)) socket.on(SYNAPSE_DELETED, synapseDeleted(Realtime))
socket.on(MAP_UPDATED, mapUpdated(Realtime)) socket.on(MAP_UPDATED, mapUpdated(Realtime))
socket.on(LIVE_MAPS_RECEIVED, liveMapsReceived(Realtime))
socket.on(MAP_WENT_LIVE, mapWentLive(Realtime))
socket.on(MAP_CEASED_LIVE, mapCeasedLive(Realtime))
} }
export default Realtime export default Realtime

29
frontend/src/Metamaps/Realtime/receivable.js
View file

@ -1,7 +1,11 @@
/* global $ */
/* /*
everthing in this file happens as a result of websocket events everthing in this file happens as a result of websocket events
*/ */
import { JUNTO_UPDATED } from './events'
import Active from '../Active' import Active from '../Active'
import GlobalUI from '../GlobalUI' import GlobalUI from '../GlobalUI'
import Control from '../Control' import Control from '../Control'
@ -12,6 +16,11 @@ import Synapse from '../Synapse'
import Util from '../Util' import Util from '../Util'
import Visualize from '../Visualize' import Visualize from '../Visualize'
export const juntoUpdated = self => state => {
self.juntoState = state
$(document).trigger(JUNTO_UPDATED)
}
export const synapseRemoved = self => data => { export const synapseRemoved = self => data => {
var synapse = Metamaps.Synapses.get(data.mappableid) var synapse = Metamaps.Synapses.get(data.mappableid)
if (synapse) { if (synapse) {
@ -239,13 +248,13 @@ export const lostMapper = self => data => {
export const mapperListUpdated = self => data => { export const mapperListUpdated = self => data => {
// data.userid // data.userid
// data.username // data.username
// data.userimage // data.avatar
self.mappersOnMap[data.userid] = { self.mappersOnMap[data.userid] = {
id: data.userid, id: data.userid,
name: data.username, name: data.username,
username: data.username, username: data.username,
image: data.userimage, image: data.avatar,
color: Util.getPastelColor(), color: Util.getPastelColor(),
inConversation: data.userinconversation, inConversation: data.userinconversation,
coords: { coords: {
@ -259,14 +268,14 @@ export const mapperListUpdated = self => data => {
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.createCompass(data.username, data.userid, data.avatar, self.mappersOnMap[data.userid].color)
} }
} }
export const newMapper = self => data => { export const newMapper = self => data => {
// data.userid // data.userid
// data.username // data.username
// data.userimage // data.avatar
// data.coords // data.coords
var firstOtherPerson = Object.keys(self.mappersOnMap).length === 0 var firstOtherPerson = Object.keys(self.mappersOnMap).length === 0
@ -274,13 +283,12 @@ export const newMapper = self => data => {
id: data.userid, id: data.userid,
name: data.username, name: data.username,
username: data.username, username: data.username,
image: data.userimage, image: data.avatar,
color: Util.getPastelColor(), color: Util.getPastelColor(),
realtime: true,
coords: { coords: {
x: 0, x: 0,
y: 0 y: 0
}, }
} }
// create an item for them in the realtime box // create an item for them in the realtime box
@ -289,7 +297,7 @@ export const newMapper = self => data => {
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.createCompass(data.username, data.userid, data.avatar, 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) {
@ -324,7 +332,7 @@ export const invitedToCall = self => inviter => {
self.soundId = self.room.chat.sound.play('sessioninvite') self.soundId = self.room.chat.sound.play('sessioninvite')
var username = self.mappersOnMap[inviter].name var username = self.mappersOnMap[inviter].name
var notifyText = '<img src="' + Metamaps.Erb['junto_spinner_darkgrey.gif'] + '" style="display: inline-block; margin-top: -12px; vertical-align: top;" />' var notifyText = '<img src="' + Metamaps.Erb['junto_spinner_darkgrey.gif'] + '" style="display: inline-block; margin-top: -12px; margin-bottom: -6px; vertical-align: top;" />'
notifyText += username + ' is inviting you to a conversation. Join live?' notifyText += username + ' is inviting you to a conversation. Join live?'
notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.acceptCall(' + inviter + ')">Yes</button>' 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>' notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.Realtime.denyCall(' + inviter + ')">No</button>'
@ -391,6 +399,3 @@ export const callStarted = self => () => {
self.room.conversationInProgress() self.room.conversationInProgress()
} }
export const liveMapsReceived = self => () => {}
export const mapWentLive = self => () => {}
export const mapCeasedLive = self => () => {}

9
frontend/src/Metamaps/Realtime/sendable.js
View file

@ -2,7 +2,6 @@ import Active from '../Active'
import GlobalUI from '../GlobalUI' import GlobalUI from '../GlobalUI'
import { import {
REQUEST_LIVE_MAPS,
JOIN_MAP, JOIN_MAP,
LEAVE_MAP, LEAVE_MAP,
CHECK_FOR_CALL, CHECK_FOR_CALL,
@ -28,15 +27,11 @@ import {
UPDATE_MAP UPDATE_MAP
} from './events' } from './events'
export const requestLiveMaps = self => () => {
self.socket.emit(REQUEST_LIVE_MAPS)
}
export const joinMap = self => () => { export const joinMap = self => () => {
self.socket.emit(JOIN_MAP, { self.socket.emit(JOIN_MAP, {
userid: Active.Mapper.id, userid: Active.Mapper.id,
username: Active.Mapper.get('name'), username: Active.Mapper.get('name'),
userimage: Active.Mapper.get('image'), avatar: Active.Mapper.get('image'),
mapid: Active.Map.id, mapid: Active.Map.id,
map: Active.Map.attributes map: Active.Map.attributes
}) })
@ -55,7 +50,7 @@ export const sendMapperInfo = self => userid => {
var update = { var update = {
userToNotify: userid, userToNotify: userid,
username: Active.Mapper.get('name'), username: Active.Mapper.get('name'),
userimage: Active.Mapper.get('image'), avatar: Active.Mapper.get('image'),
userid: Active.Mapper.id, userid: Active.Mapper.id,
userinconversation: self.inConversation, userinconversation: self.inConversation,
mapid: Active.Map.id mapid: Active.Map.id

2
frontend/src/Metamaps/Views/ChatView.js
View file

@ -159,7 +159,7 @@ var Private = {
var date = (m.timestamp.getMonth() + 1) + '/' + m.timestamp.getDate() var date = (m.timestamp.getMonth() + 1) + '/' + m.timestamp.getDate()
date += ' ' + addZero(m.timestamp.getHours()) + ':' + addZero(m.timestamp.getMinutes()) date += ' ' + addZero(m.timestamp.getHours()) + ':' + addZero(m.timestamp.getMinutes())
m.timestamp = date m.timestamp = date
m.image = m.user_image || 'http://www.hotpepper.ca/wp-content/uploads/2014/11/default_profile_1_200x200.png' // TODO: remove m.image = m.user_image
m.message = linker.link(m.message) m.message = linker.link(m.message)
var $html = $(this.messageTemplate(m)) var $html = $(this.messageTemplate(m))
this.$messages.append($html) this.$messages.append($html)

4
frontend/src/Metamaps/Views/ExploreMaps.js
View file

@ -4,6 +4,7 @@ import React from 'react'
import ReactDOM from 'react-dom' // TODO ensure this isn't a double import import ReactDOM from 'react-dom' // TODO ensure this isn't a double import
import Active from '../Active' import Active from '../Active'
import Realtime from '../Realtime'
import Maps from '../../components/Maps' import Maps from '../../components/Maps'
/* /*
@ -27,6 +28,8 @@ const ExploreMaps = {
render: function (mapperObj, cb) { render: function (mapperObj, cb) {
var self = ExploreMaps var self = ExploreMaps
if (!self.collection) return
if (typeof mapperObj === 'function') { if (typeof mapperObj === 'function') {
cb = mapperObj cb = mapperObj
mapperObj = null mapperObj = null
@ -36,6 +39,7 @@ const ExploreMaps = {
currentUser: Active.Mapper, currentUser: Active.Mapper,
section: self.collection.id, section: self.collection.id,
maps: self.collection, maps: self.collection,
juntoState: Realtime.juntoState,
moreToLoad: self.collection.page != 'loadedAll', moreToLoad: self.collection.page != 'loadedAll',
user: mapperObj, user: mapperObj,
loadMore: self.loadMore loadMore: self.loadMore

13
frontend/src/Metamaps/Views/index.js
View file

@ -1,7 +1,18 @@
/* global $ */
import ExploreMaps from './ExploreMaps' import ExploreMaps from './ExploreMaps'
import ChatView from './ChatView' import ChatView from './ChatView'
import VideoView from './VideoView' import VideoView from './VideoView'
import Room from './Room' import Room from './Room'
import { JUNTO_UPDATED } from '../Realtime/events'
const Views = { ExploreMaps, ChatView, VideoView, Room } const Views = {
init: () => {
$(document).on(JUNTO_UPDATED, () => ExploreMaps.render())
},
ExploreMaps,
ChatView,
VideoView,
Room
}
export default Views export default Views

2
frontend/src/Metamaps/index.js
View file

@ -88,7 +88,7 @@ document.addEventListener('DOMContentLoaded', function () {
if (Metamaps.currentSection === 'explore') { if (Metamaps.currentSection === 'explore') {
const capitalize = Metamaps.currentPage.charAt(0).toUpperCase() + Metamaps.currentPage.slice(1) const capitalize = Metamaps.currentPage.charAt(0).toUpperCase() + Metamaps.currentPage.slice(1)
Metamaps.Views.ExploreMaps.setCollection(Metamaps.Maps[capitalize]) Views.ExploreMaps.setCollection(Metamaps.Maps[capitalize])
if (Metamaps.currentPage === 'mapper') { if (Metamaps.currentPage === 'mapper') {
Views.ExploreMaps.fetchUserThenRender() Views.ExploreMaps.fetchUserThenRender()
} else { } else {

16
frontend/src/components/Maps/MapCard.js
View file

@ -1,8 +1,19 @@
import React, { Component, PropTypes } from 'react' import React, { Component, PropTypes } from 'react'
import { find, values } from 'lodash'
const IN_CONVERSATION = 1 // shared with /realtime/reducer.js
const MapperList = (props) => {
}
class MapCard extends Component { class MapCard extends Component {
render = () => { render = () => {
const { map, currentUser } = this.props const { map, juntoState, currentUser } = this.props
const hasMap = juntoState.liveMaps[map.id]
const hasConversation = hasMap && find(values(hasMap), v => v === IN_CONVERSATION)
const hasMapper = hasMap && !hasConversation
function capitalize (string) { function capitalize (string) {
return string.charAt(0).toUpperCase() + string.slice(1) return string.charAt(0).toUpperCase() + string.slice(1)
@ -59,6 +70,8 @@ class MapCard extends Component {
</div> </div>
</div> </div>
</div> </div>
{ hasMapper && <div className='mapHasMapper'></div> }
{ hasConversation && <div className='mapHasConversation'></div> }
</div> </div>
</div> </div>
</a> </a>
@ -69,6 +82,7 @@ class MapCard extends Component {
MapCard.propTypes = { MapCard.propTypes = {
map: PropTypes.object.isRequired, map: PropTypes.object.isRequired,
juntoState: PropTypes.object,
currentUser: PropTypes.object currentUser: PropTypes.object
} }

5
frontend/src/components/Maps/index.js
View file

@ -41,7 +41,7 @@ class Maps extends Component {
} }
render = () => { render = () => {
const { maps, currentUser, section, user, moreToLoad, loadMore } = this.props const { maps, currentUser, juntoState, section, user, moreToLoad, loadMore } = this.props
const style = { width: this.state.mapsWidth + 'px' } const style = { width: this.state.mapsWidth + 'px' }
return ( return (
@ -50,7 +50,7 @@ class Maps extends Component {
<div style={ style }> <div style={ style }>
{ user ? <MapperCard user={ user } /> : null } { user ? <MapperCard user={ user } /> : null }
{ currentUser && !user ? <div className="map newMap"><a href="/maps/new"><div className="newMapImage"></div><span>Create new map...</span></a></div> : null } { currentUser && !user ? <div className="map newMap"><a href="/maps/new"><div className="newMapImage"></div><span>Create new map...</span></a></div> : null }
{ maps.models.map(map => <MapCard key={ map.id } map={ map } currentUser={ currentUser } />) } { maps.models.map(map => <MapCard key={ map.id } map={ map } juntoState={ juntoState } currentUser={ currentUser } />) }
<div className='clearfloat'></div> <div className='clearfloat'></div>
{!moreToLoad ? null : [ {!moreToLoad ? null : [
<button className="button loadMore" onClick={ loadMore }>load more</button>, <button className="button loadMore" onClick={ loadMore }>load more</button>,
@ -70,6 +70,7 @@ class Maps extends Component {
Maps.propTypes = { Maps.propTypes = {
section: PropTypes.string.isRequired, section: PropTypes.string.isRequired,
maps: PropTypes.object.isRequired, maps: PropTypes.object.isRequired,
juntoState: PropTypes.object.isRequired,
moreToLoad: PropTypes.bool.isRequired, moreToLoad: PropTypes.bool.isRequired,
user: PropTypes.object, user: PropTypes.object,
currentUser: PropTypes.object, currentUser: PropTypes.object,

1
package.json
View file

@ -40,6 +40,7 @@
"react": "15.3.2", "react": "15.3.2",
"react-dom": "15.3.2", "react-dom": "15.3.2",
"react-dropzone": "3.6.0", "react-dropzone": "3.6.0",
"redux": "^3.6.0",
"simplewebrtc": "2.2.0", "simplewebrtc": "2.2.0",
"socket.io": "1.3.7", "socket.io": "1.3.7",
"underscore": "1.4.4", "underscore": "1.4.4",

54
realtime/global.js
View file

@ -1,17 +1,15 @@
const {
import {
// server sendable, client receivable // server sendable, client receivable
TOPIC_UPDATED, TOPIC_UPDATED,
TOPIC_DELETED, TOPIC_DELETED,
SYNAPSE_UPDATED, SYNAPSE_UPDATED,
SYNAPSE_DELETED, SYNAPSE_DELETED,
LIVE_MAPS_RECEIVED,
MAP_WENT_LIVE,
MAP_CEASED_LIVE,
MAP_UPDATED, MAP_UPDATED,
JUNTO_UPDATED,
// server receivable, client sendable // server receivable, client sendable
REQUEST_LIVE_MAPS, JOIN_CALL,
LEAVE_CALL,
JOIN_MAP, JOIN_MAP,
LEAVE_MAP, LEAVE_MAP,
UPDATE_TOPIC, UPDATE_TOPIC,
@ -19,43 +17,23 @@ import {
UPDATE_SYNAPSE, UPDATE_SYNAPSE,
DELETE_SYNAPSE, DELETE_SYNAPSE,
UPDATE_MAP UPDATE_MAP
} from '../frontend/src/Metamaps/Realtime/events' } = require('../frontend/src/Metamaps/Realtime/events')
const adjustAndBroadcast = (io, socket, state, event, data) => { module.exports = function (io, store) {
if (event === JOIN_MAP) { store.subscribe(() => {
if (!state.liveMaps[data.mapid]) { console.log(store.getState())
state.liveMaps[data.mapid] = data.map // { name: '', desc: '', numTopics: '' } io.sockets.emit(JUNTO_UPDATED, store.getState())
state.liveMaps[data.mapid].mapper_count = 1 })
io.sockets.emit(MAP_WENT_LIVE, state.liveMaps[data.mapid])
}
else {
state.liveMaps[data.mapid].mapper_count++
}
}
else if (event === LEAVE_MAP) {
const mapid = socket.mapid
if (state.liveMaps[mapid] && state.liveMaps[mapid].mapper_count == 1) {
delete state.liveMaps[mapid]
io.sockets.emit(MAP_CEASED_LIVE, { id: mapid })
}
else if (state.liveMaps[mapid]) {
state.liveMaps[mapid].mapper_count--
}
}
}
module.exports = function (io, state) {
io.on('connection', function (socket) { io.on('connection', function (socket) {
socket.on(REQUEST_LIVE_MAPS, function (activeUser) { io.sockets.emit(JUNTO_UPDATED, store.getState())
//constrain response to maps visible to user
var maps = Object.keys(state.liveMaps).map(function(key) { return state.liveMaps[key] })
socket.emit(LIVE_MAPS_RECEIVED, maps)
})
socket.on(JOIN_MAP, data => adjustAndBroadcast(io, socket, state, JOIN_MAP, data)) socket.on(JOIN_MAP, data => store.dispatch({ type: JOIN_MAP, payload: data }))
socket.on(LEAVE_MAP, () => adjustAndBroadcast(io, socket, state, LEAVE_MAP)) socket.on(LEAVE_MAP, () => store.dispatch({ type: LEAVE_MAP, payload: socket }))
socket.on('disconnect', () => adjustAndBroadcast(io, socket, state, LEAVE_MAP)) socket.on(JOIN_CALL, data => store.dispatch({ type: JOIN_CALL, payload: data }))
socket.on(LEAVE_CALL, () => store.dispatch({ type: LEAVE_CALL, payload: socket }))
socket.on('disconnect', () => store.dispatch({ type: 'DISCONNECT', payload: socket }))
socket.on(UPDATE_TOPIC, function (data) { socket.on(UPDATE_TOPIC, function (data) {
socket.broadcast.emit(TOPIC_UPDATED, data) socket.broadcast.emit(TOPIC_UPDATED, data)

13
realtime/junto.js
View file

@ -1,4 +1,4 @@
import { const {
INVITED_TO_CALL, INVITED_TO_CALL,
INVITED_TO_JOIN, INVITED_TO_JOIN,
CALL_ACCEPTED, CALL_ACCEPTED,
@ -17,11 +17,11 @@ import {
INVITE_A_CALL, INVITE_A_CALL,
JOIN_CALL, JOIN_CALL,
LEAVE_CALL LEAVE_CALL
} from '../frontend/src/Metamaps/Realtime/events' } = require('../frontend/src/Metamaps/Realtime/events')
const { mapRoom, userMapRoom } = require('./rooms') const { mapRoom, userMapRoom } = require('./rooms')
module.exports = function (io, state) { module.exports = function (io, store) {
io.on('connection', function (socket) { io.on('connection', function (socket) {
socket.on(CHECK_FOR_CALL, function (data) { socket.on(CHECK_FOR_CALL, function (data) {
@ -39,6 +39,8 @@ module.exports = function (io, state) {
socket.on(ACCEPT_CALL, function (data) { socket.on(ACCEPT_CALL, function (data) {
socket.broadcast.in(userMapRoom(data.inviter, data.mapid)).emit(CALL_ACCEPTED, data.invited) socket.broadcast.in(userMapRoom(data.inviter, data.mapid)).emit(CALL_ACCEPTED, data.invited)
// convert this so that it broadcasts to all sockets and includes the map id
// and who's participating
socket.broadcast.in(mapRoom(data.mapid)).emit(CALL_STARTED) socket.broadcast.in(mapRoom(data.mapid)).emit(CALL_STARTED)
}) })
@ -51,12 +53,15 @@ module.exports = function (io, state) {
}) })
socket.on(JOIN_CALL, function (data) { socket.on(JOIN_CALL, function (data) {
// convert this so that it broadcasts to all sockets and includes the map id
// and info about who joined
socket.broadcast.in(mapRoom(data.mapid)).emit(MAPPER_JOINED_CALL, data.id) socket.broadcast.in(mapRoom(data.mapid)).emit(MAPPER_JOINED_CALL, data.id)
}) })
socket.on(LEAVE_CALL, function (data) { socket.on(LEAVE_CALL, function (data) {
// convert this so that it broadcasts to all sockets and includes the map id
// and info about who joined
socket.broadcast.in(mapRoom(data.mapid)).emit(MAPPER_LEFT_CALL, data.id) socket.broadcast.in(mapRoom(data.mapid)).emit(MAPPER_LEFT_CALL, data.id)
}) })
}) })
} }

15
realtime/map.js
View file

@ -1,5 +1,4 @@
const {
import {
MAPPER_LIST_UPDATED, MAPPER_LIST_UPDATED,
NEW_MAPPER, NEW_MAPPER,
LOST_MAPPER, LOST_MAPPER,
@ -13,19 +12,19 @@ import {
JOIN_MAP, JOIN_MAP,
LEAVE_MAP, LEAVE_MAP,
SEND_MAPPER_INFO,
SEND_COORDS, SEND_COORDS,
SEND_MAPPER_INFO,
CREATE_MESSAGE, CREATE_MESSAGE,
DRAG_TOPIC, DRAG_TOPIC,
CREATE_TOPIC, CREATE_TOPIC,
REMOVE_TOPIC, REMOVE_TOPIC,
CREATE_SYNAPSE, CREATE_SYNAPSE,
REMOVE_SYNAPSE REMOVE_SYNAPSE
} from '../frontend/src/Metamaps/Realtime/events' } = require('../frontend/src/Metamaps/Realtime/events')
const { mapRoom, userMapRoom } = require('./rooms') const { mapRoom, userMapRoom } = require('./rooms')
module.exports = function (io, state) { module.exports = function (io, store) {
io.on('connection', function (socket) { io.on('connection', function (socket) {
// 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
@ -33,11 +32,11 @@ module.exports = function (io, state) {
socket.mapid = data.mapid socket.mapid = data.mapid
socket.userid = data.userid socket.userid = data.userid
socket.username = data.username socket.username = data.username
socket.userimage = data.userimage socket.avatar = data.avatar
var newUser = { var newUser = {
userid: data.userid, userid: data.userid,
username: data.username, username: data.username,
userimage: data.userimage avatar: data.avatar
} }
socket.join(mapRoom(data.mapid)) socket.join(mapRoom(data.mapid))
socket.join(userMapRoom(data.userid, data.mapid)) socket.join(userMapRoom(data.userid, data.mapid))
@ -63,7 +62,7 @@ module.exports = function (io, state) {
userid: data.userid, userid: data.userid,
username: data.username, username: data.username,
userinconversation: data.userinconversation, userinconversation: data.userinconversation,
userimage: data.userimage avatar: data.avatar
} }
socket.broadcast.in(userMapRoom(data.userToNotify, data.mapid)).emit(MAPPER_LIST_UPDATED, existingUser) socket.broadcast.in(userMapRoom(data.userToNotify, data.mapid)).emit(MAPPER_LIST_UPDATED, existingUser)
}) })

19
realtime/realtime-server.js
View file

@ -6,13 +6,14 @@ map = require('./map'),
global = require('./global'), global = require('./global'),
stunservers = [{"url": "stun:stun.l.google.com:19302"}] stunservers = [{"url": "stun:stun.l.google.com:19302"}]
var state = { const { createStore } = require('redux')
connectedPeople: {}, const { reducer } = require('./reducer')
liveMaps: {}
}
signalling(io, stunservers, state)
junto(io, state)
map(io, state)
global(io, state)
io.listen(5001)
let store = createStore(reducer)
global(io, store)
signalling(io, stunservers, store)
junto(io, store)
map(io, store)
io.listen(5001)

75
realtime/reducer.js Normal file
View file

@ -0,0 +1,75 @@
const { omit, omitBy, isNil, mapValues } = require('lodash')
const {
JOIN_MAP,
LEAVE_MAP,
JOIN_CALL,
LEAVE_CALL
} = require('../frontend/src/Metamaps/Realtime/events')
const NOT_IN_CONVERSATION = 0
const IN_CONVERSATION = 1
const addMapperToMap = (map, userId) => { return { ...map, [userId]: NOT_IN_CONVERSATION }}
const reducer = (state = { connectedPeople: {}, liveMaps: {} }, action) => {
const { type, payload } = action
const { connectedPeople, liveMaps } = state
const map = payload && liveMaps[payload.mapid]
const mapWillEmpty = map && Object.keys(map).length === 1
const callWillFinish = map && (type === LEAVE_CALL || type === 'DISCONNECT') && Object.keys(map).length === 2
switch (type) {
case JOIN_MAP:
return Object.assign({}, state, {
connectedPeople: Object.assign({}, connectedPeople, {
[payload.userid]: {
id: payload.userid,
username: payload.username,
avatar: payload.avatar
}
}),
liveMaps: Object.assign({}, liveMaps, {
[payload.mapid]: addMapperToMap(map || {}, payload.userid)
})
})
case LEAVE_MAP:
// if the map will empty, remove it from liveMaps, if the map will not empty, just remove the mapper
const newLiveMaps = mapWillEmpty
? omit(liveMaps, payload.mapid)
: Object.assign({}, liveMaps, { [payload.mapid]: omit(map, payload.userid) })
return {
connectedPeople: omit(connectedPeople, payload.userid),
liveMaps: omitBy(newLiveMaps, isNil)
}
case JOIN_CALL:
// update the user (payload.id is user id) in the given map to be marked in the conversation
return Object.assign({}, state, {
liveMaps: Object.assign({}, liveMaps, {
[payload.mapid]: Object.assign({}, map, {
[payload.id]: IN_CONVERSATION
})
})
})
case LEAVE_CALL:
const newMap = callWillFinish
? mapValues(map, () => NOT_IN_CONVERSATION)
: Object.assign({}, map, { [payload.userid]: NOT_IN_CONVERSATION })
return Object.assign({}, state, {
liveMaps: Object.assign({}, liveMaps, { map: newMap })
})
case 'DISCONNECT':
const mapWithoutUser = omit(map, payload.userid)
const newMap = callWillFinish ? mapValues(mapWithoutUser, () => NOT_IN_CONVERSATION) : mapWithoutUser
const newLiveMaps = mapWillEmpty ? omit(liveMaps, payload.mapid) : Object.assign({}, liveMaps, { [payload.mapid]: newMap })
return {
connectedPeople: omit(connectedPeople, payload.userid),
liveMaps: omitBy(newLiveMaps, isNil)
}
default:
return state
}
}
module.exports = reducer

1
realtime/rooms.js
View file

@ -1,4 +1,3 @@
module.exports = { module.exports = {
mapRoom: mapId => `maps/${mapId}`, mapRoom: mapId => `maps/${mapId}`,
userMapRoom: (mapperId, mapId) => `mappers/${mapperId}/maps/${mapId}`, userMapRoom: (mapperId, mapId) => `mappers/${mapperId}/maps/${mapId}`,

3
realtime/signal.js
View file

@ -1,4 +1,4 @@
var uuid = require('node-uuid') const uuid = require('node-uuid')
// based off of https://github.com/andyet/signalmaster // based off of https://github.com/andyet/signalmaster
// since it was updated to socket.io 1.3.7 // since it was updated to socket.io 1.3.7
@ -12,7 +12,6 @@ function safeCb(cb) {
} }
module.exports = function(io, stunservers, state) { module.exports = function(io, stunservers, state) {
io.on('connection', function (socket) { io.on('connection', function (socket) {
socket.resources = { socket.resources = {
screen: false, screen: false,