diff --git a/app/assets/images/junto.gif b/app/assets/images/junto.gif new file mode 100644 index 00000000..e4a72d4b Binary files /dev/null and b/app/assets/images/junto.gif differ diff --git a/app/assets/stylesheets/mapcard.scss.erb b/app/assets/stylesheets/mapcard.scss.erb index 871b6baf..69e3b71d 100644 --- a/app/assets/stylesheets/mapcard.scss.erb +++ b/app/assets/stylesheets/mapcard.scss.erb @@ -1,144 +1,163 @@ /* Map Cards */ .map { - display:inline-block; - width:220px; - height:340px; - font-size: 12px; - text-align: left; - overflow: visible; - background: #e8e8e8; - border-radius:2px; - margin:16px; - 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; -} + display:inline-block; + width:220px; + height:340px; + font-size: 12px; + text-align: left; + overflow: visible; + background: #e8e8e8; + border-radius:2px; + margin:16px; + box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16); -.mapCard { - position:relative; - width:100%; - height:308px; - padding: 0 0 16px 0; - color: #424242; + &.newMap { + float: left; + position: relative; -.mapScreenshot { - width: 100%; - height: 220px; -} + &:hover { + background: #dcdcdc; -.mapScreenshot img { - width: 100%; -} + .newMapImage { + background-position: 0 -72px; + } + } -.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; + a { + height: 340px; + display: block; + position: relative; + } + + .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; + } + + 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; -} - -} - diff --git a/frontend/src/Metamaps/Realtime/events.js b/frontend/src/Metamaps/Realtime/events.js index 20265154..a1fabf04 100644 --- a/frontend/src/Metamaps/Realtime/events.js +++ b/frontend/src/Metamaps/Realtime/events.js @@ -1,54 +1,53 @@ /* EVENTS SENDABLE */ -export const REQUEST_LIVE_MAPS = 'REQUEST_LIVE_MAPS' -export const JOIN_MAP = 'JOIN_MAP' -export const LEAVE_MAP = 'LEAVE_MAP' -export const CHECK_FOR_CALL = 'CHECK_FOR_CALL' -export const ACCEPT_CALL = 'ACCEPT_CALL' -export const DENY_CALL = 'DENY_CALL' -export const DENY_INVITE = 'DENY_INVITE' -export const INVITE_TO_JOIN = 'INVITE_TO_JOIN' -export const INVITE_A_CALL = 'INVITE_A_CALL' -export const JOIN_CALL = 'JOIN_CALL' -export const LEAVE_CALL = 'LEAVE_CALL' -export const SEND_MAPPER_INFO = 'SEND_MAPPER_INFO' -export const SEND_COORDS = 'SEND_COORDS' -export const CREATE_MESSAGE = 'CREATE_MESSAGE' -export const DRAG_TOPIC = 'DRAG_TOPIC' -export const CREATE_TOPIC = 'CREATE_TOPIC' -export const UPDATE_TOPIC = 'UPDATE_TOPIC' -export const REMOVE_TOPIC = 'REMOVE_TOPIC' -export const DELETE_TOPIC = 'DELETE_TOPIC' -export const CREATE_SYNAPSE = 'CREATE_SYNAPSE' -export const UPDATE_SYNAPSE = 'UPDATE_SYNAPSE' -export const REMOVE_SYNAPSE = 'REMOVE_SYNAPSE' -export const DELETE_SYNAPSE = 'DELETE_SYNAPSE' -export const UPDATE_MAP = 'UPDATE_MAP' +module.exports = { + JOIN_MAP: 'JOIN_MAP', + CHECK_FOR_CALL: 'CHECK_FOR_CALL', + LEAVE_MAP: 'LEAVE_MAP', + ACCEPT_CALL: 'ACCEPT_CALL', + DENY_CALL: 'DENY_CALL', + DENY_INVITE: 'DENY_INVITE', + INVITE_TO_JOIN: 'INVITE_TO_JOIN', + INVITE_A_CALL: 'INVITE_A_CALL', + JOIN_CALL: 'JOIN_CALL', + LEAVE_CALL: 'LEAVE_CALL', + SEND_MAPPER_INFO: 'SEND_MAPPER_INFO', + SEND_COORDS: 'SEND_COORDS', + CREATE_MESSAGE: 'CREATE_MESSAGE', + DRAG_TOPIC: 'DRAG_TOPIC', + CREATE_TOPIC: 'CREATE_TOPIC', + UPDATE_TOPIC: 'UPDATE_TOPIC', + REMOVE_TOPIC: 'REMOVE_TOPIC', + DELETE_TOPIC: 'DELETE_TOPIC', + CREATE_SYNAPSE: 'CREATE_SYNAPSE', + UPDATE_SYNAPSE: 'UPDATE_SYNAPSE', + REMOVE_SYNAPSE: 'REMOVE_SYNAPSE', + DELETE_SYNAPSE: 'DELETE_SYNAPSE', + UPDATE_MAP: 'UPDATE_MAP', -/* EVENTS RECEIVABLE */ -export const INVITED_TO_CALL = 'INVITED_TO_CALL' -export const INVITED_TO_JOIN = 'INVITED_TO_JOIN' -export const CALL_ACCEPTED = 'CALL_ACCEPTED' -export const CALL_DENIED = 'CALL_DENIED' -export const INVITE_DENIED = 'INVITE_DENIED' -export const CALL_IN_PROGRESS = 'CALL_IN_PROGRESS' -export const CALL_STARTED = 'CALL_STARTED' -export const MAPPER_JOINED_CALL = 'MAPPER_JOINED_CALL' -export const MAPPER_LEFT_CALL = 'MAPPER_LEFT_CALL' -export const MAPPER_LIST_UPDATED = 'MAPPER_LIST_UPDATED' -export const NEW_MAPPER = 'NEW_MAPPER' -export const LOST_MAPPER = 'LOST_MAPPER' -export const MESSAGE_CREATED = 'MESSAGE_CREATED' -export const TOPIC_DRAGGED = 'TOPIC_DRAGGED' -export const TOPIC_CREATED = 'TOPIC_CREATED' -export const TOPIC_UPDATED = 'TOPIC_UPDATED' -export const TOPIC_REMOVED = 'TOPIC_REMOVED' -export const TOPIC_DELETED = 'TOPIC_DELETED' -export const SYNAPSE_CREATED = 'SYNAPSE_CREATED' -export const SYNAPSE_UPDATED = 'SYNAPSE_UPDATED' -export const SYNAPSE_REMOVED = 'SYNAPSE_REMOVED' -export const SYNAPSE_DELETED = 'SYNAPSE_DELETED' -export const PEER_COORDS_UPDATED = 'PEER_COORDS_UPDATED' -export const MAP_UPDATED = 'MAP_UPDATED' -export const LIVE_MAPS_RECEIVED = 'LIVE_MAPS_RECEIVED' -export const MAP_WENT_LIVE = 'MAP_WENT_LIVE' -export const MAP_CEASED_LIVE = 'MAP_CEASED_LIVE' + /* EVENTS RECEIVABLE */ + JUNTO_UPDATED: 'JUNTO_UPDATED', + INVITED_TO_CALL: 'INVITED_TO_CALL', + INVITED_TO_JOIN: 'INVITED_TO_JOIN', + CALL_ACCEPTED: 'CALL_ACCEPTED', + CALL_DENIED: 'CALL_DENIED', + INVITE_DENIED: 'INVITE_DENIED', + CALL_IN_PROGRESS: 'CALL_IN_PROGRESS', + CALL_STARTED: 'CALL_STARTED', + MAPPER_JOINED_CALL: 'MAPPER_JOINED_CALL', + MAPPER_LEFT_CALL: 'MAPPER_LEFT_CALL', + MAPPER_LIST_UPDATED: 'MAPPER_LIST_UPDATED', + NEW_MAPPER: 'NEW_MAPPER', + LOST_MAPPER: 'LOST_MAPPER', + MESSAGE_CREATED: 'MESSAGE_CREATED', + TOPIC_DRAGGED: 'TOPIC_DRAGGED', + TOPIC_CREATED: 'TOPIC_CREATED', + TOPIC_UPDATED: 'TOPIC_UPDATED', + TOPIC_REMOVED: 'TOPIC_REMOVED', + TOPIC_DELETED: 'TOPIC_DELETED', + SYNAPSE_CREATED: 'SYNAPSE_CREATED', + SYNAPSE_UPDATED: 'SYNAPSE_UPDATED', + SYNAPSE_REMOVED: 'SYNAPSE_REMOVED', + SYNAPSE_DELETED: 'SYNAPSE_DELETED', + PEER_COORDS_UPDATED: 'PEER_COORDS_UPDATED', + MAP_UPDATED: 'MAP_UPDATED' +} diff --git a/frontend/src/Metamaps/Realtime/index.js b/frontend/src/Metamaps/Realtime/index.js index e891263c..7982618a 100644 --- a/frontend/src/Metamaps/Realtime/index.js +++ b/frontend/src/Metamaps/Realtime/index.js @@ -27,6 +27,7 @@ import Views from '../Views' import Visualize from '../Visualize' import { + JUNTO_UPDATED, INVITED_TO_CALL, INVITED_TO_JOIN, CALL_ACCEPTED, @@ -34,9 +35,9 @@ import { INVITE_DENIED, CALL_IN_PROGRESS, CALL_STARTED, + MAPPER_LIST_UPDATED, MAPPER_JOINED_CALL, MAPPER_LEFT_CALL, - MAPPER_LIST_UPDATED, NEW_MAPPER, LOST_MAPPER, MESSAGE_CREATED, @@ -50,13 +51,11 @@ import { SYNAPSE_REMOVED, SYNAPSE_DELETED, PEER_COORDS_UPDATED, - LIVE_MAPS_RECEIVED, - MAP_WENT_LIVE, - MAP_CEASED_LIVE, MAP_UPDATED } from './events' import { + juntoUpdated, invitedToCall, invitedToJoin, callAccepted, @@ -64,9 +63,9 @@ import { inviteDenied, callInProgress, callStarted, + mapperListUpdated, mapperJoinedCall, mapperLeftCall, - mapperListUpdated, peerCoordsUpdated, newMapper, lostMapper, @@ -81,13 +80,9 @@ import { synapseRemoved, synapseDeleted, mapUpdated, - liveMapsReceived, - mapWentLive, - mapCeasedLive } from './receivable' import { - requestLiveMaps, joinMap, leaveMap, checkForCall, @@ -98,8 +93,8 @@ import { inviteACall, joinCall, leaveCall, - sendMapperInfo, sendCoords, + sendMapperInfo, createMessage, dragTopic, createTopic, @@ -114,6 +109,7 @@ import { } from './sendable' let Realtime = { + juntoState: { connectedPeople: {}, liveMaps: {} }, videoId: 'video-wrapper', socket: null, webrtc: null, @@ -499,12 +495,11 @@ let Realtime = { } const sendables = [ - ['requestLiveMaps',requestLiveMaps], ['joinMap',joinMap], ['leaveMap',leaveMap], ['checkForCall',checkForCall], ['acceptCall',acceptCall], - ['denyAll',denyCall], + ['denyCall',denyCall], ['denyInvite',denyInvite], ['inviteToJoin',inviteToJoin], ['inviteACall',inviteACall], @@ -529,6 +524,7 @@ sendables.forEach(sendable => { }) const subscribeToEvents = (Realtime, socket) => { + socket.on(JUNTO_UPDATED, juntoUpdated(Realtime)) socket.on(INVITED_TO_CALL, invitedToCall(Realtime)) socket.on(INVITED_TO_JOIN, invitedToJoin(Realtime)) socket.on(CALL_ACCEPTED, callAccepted(Realtime)) @@ -536,9 +532,9 @@ const subscribeToEvents = (Realtime, socket) => { socket.on(INVITE_DENIED, inviteDenied(Realtime)) socket.on(CALL_IN_PROGRESS, callInProgress(Realtime)) socket.on(CALL_STARTED, callStarted(Realtime)) + socket.on(MAPPER_LIST_UPDATED, mapperListUpdated(Realtime)) socket.on(MAPPER_JOINED_CALL, mapperJoinedCall(Realtime)) socket.on(MAPPER_LEFT_CALL, mapperLeftCall(Realtime)) - socket.on(MAPPER_LIST_UPDATED, mapperListUpdated(Realtime)) socket.on(PEER_COORDS_UPDATED, peerCoordsUpdated(Realtime)) socket.on(NEW_MAPPER, newMapper(Realtime)) socket.on(LOST_MAPPER, lostMapper(Realtime)) @@ -553,9 +549,6 @@ const subscribeToEvents = (Realtime, socket) => { socket.on(SYNAPSE_REMOVED, synapseRemoved(Realtime)) socket.on(SYNAPSE_DELETED, synapseDeleted(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 diff --git a/frontend/src/Metamaps/Realtime/receivable.js b/frontend/src/Metamaps/Realtime/receivable.js index bf974bbe..477736c5 100644 --- a/frontend/src/Metamaps/Realtime/receivable.js +++ b/frontend/src/Metamaps/Realtime/receivable.js @@ -1,7 +1,11 @@ +/* global $ */ + /* everthing in this file happens as a result of websocket events */ +import { JUNTO_UPDATED } from './events' + import Active from '../Active' import GlobalUI from '../GlobalUI' import Control from '../Control' @@ -12,6 +16,11 @@ import Synapse from '../Synapse' import Util from '../Util' import Visualize from '../Visualize' +export const juntoUpdated = self => state => { + self.juntoState = state + $(document).trigger(JUNTO_UPDATED) +} + export const synapseRemoved = self => data => { var synapse = Metamaps.Synapses.get(data.mappableid) if (synapse) { @@ -239,13 +248,13 @@ export const lostMapper = self => data => { export const mapperListUpdated = self => data => { // data.userid // data.username - // data.userimage + // data.avatar self.mappersOnMap[data.userid] = { id: data.userid, name: data.username, username: data.username, - image: data.userimage, + image: data.avatar, color: Util.getPastelColor(), inConversation: data.userinconversation, coords: { @@ -259,14 +268,14 @@ export const mapperListUpdated = self => data => { if (data.userinconversation) self.room.chat.mapperJoinedCall(data.userid) // 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 => { // data.userid // data.username - // data.userimage + // data.avatar // data.coords var firstOtherPerson = Object.keys(self.mappersOnMap).length === 0 @@ -274,13 +283,12 @@ export const newMapper = self => data => { id: data.userid, name: data.username, username: data.username, - image: data.userimage, + image: data.avatar, color: Util.getPastelColor(), - realtime: true, coords: { x: 0, y: 0 - }, + } } // 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]) // 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' if (firstOtherPerson) { @@ -324,7 +332,7 @@ export const invitedToCall = self => inviter => { self.soundId = self.room.chat.sound.play('sessioninvite') var username = self.mappersOnMap[inviter].name - var notifyText = '' + var notifyText = '' notifyText += username + ' is inviting you to a conversation. Join live?' notifyText += ' ' notifyText += ' ' @@ -391,6 +399,3 @@ export const callStarted = self => () => { self.room.conversationInProgress() } -export const liveMapsReceived = self => () => {} -export const mapWentLive = self => () => {} -export const mapCeasedLive = self => () => {} diff --git a/frontend/src/Metamaps/Realtime/sendable.js b/frontend/src/Metamaps/Realtime/sendable.js index a1ce2ea7..71abc35c 100644 --- a/frontend/src/Metamaps/Realtime/sendable.js +++ b/frontend/src/Metamaps/Realtime/sendable.js @@ -2,7 +2,6 @@ import Active from '../Active' import GlobalUI from '../GlobalUI' import { - REQUEST_LIVE_MAPS, JOIN_MAP, LEAVE_MAP, CHECK_FOR_CALL, @@ -28,15 +27,11 @@ import { UPDATE_MAP } from './events' -export const requestLiveMaps = self => () => { - self.socket.emit(REQUEST_LIVE_MAPS) -} - export const joinMap = self => () => { self.socket.emit(JOIN_MAP, { userid: Active.Mapper.id, username: Active.Mapper.get('name'), - userimage: Active.Mapper.get('image'), + avatar: Active.Mapper.get('image'), mapid: Active.Map.id, map: Active.Map.attributes }) @@ -55,7 +50,7 @@ export const sendMapperInfo = self => userid => { var update = { userToNotify: userid, username: Active.Mapper.get('name'), - userimage: Active.Mapper.get('image'), + avatar: Active.Mapper.get('image'), userid: Active.Mapper.id, userinconversation: self.inConversation, mapid: Active.Map.id diff --git a/frontend/src/Metamaps/Views/ChatView.js b/frontend/src/Metamaps/Views/ChatView.js index 8c586a0c..8febe9e1 100644 --- a/frontend/src/Metamaps/Views/ChatView.js +++ b/frontend/src/Metamaps/Views/ChatView.js @@ -159,7 +159,7 @@ var Private = { var date = (m.timestamp.getMonth() + 1) + '/' + m.timestamp.getDate() date += ' ' + addZero(m.timestamp.getHours()) + ':' + addZero(m.timestamp.getMinutes()) 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) var $html = $(this.messageTemplate(m)) this.$messages.append($html) diff --git a/frontend/src/Metamaps/Views/ExploreMaps.js b/frontend/src/Metamaps/Views/ExploreMaps.js index e843e7fe..421b3c22 100644 --- a/frontend/src/Metamaps/Views/ExploreMaps.js +++ b/frontend/src/Metamaps/Views/ExploreMaps.js @@ -4,6 +4,7 @@ import React from 'react' import ReactDOM from 'react-dom' // TODO ensure this isn't a double import import Active from '../Active' +import Realtime from '../Realtime' import Maps from '../../components/Maps' /* @@ -27,6 +28,8 @@ const ExploreMaps = { render: function (mapperObj, cb) { var self = ExploreMaps + if (!self.collection) return + if (typeof mapperObj === 'function') { cb = mapperObj mapperObj = null @@ -36,6 +39,7 @@ const ExploreMaps = { currentUser: Active.Mapper, section: self.collection.id, maps: self.collection, + juntoState: Realtime.juntoState, moreToLoad: self.collection.page != 'loadedAll', user: mapperObj, loadMore: self.loadMore diff --git a/frontend/src/Metamaps/Views/index.js b/frontend/src/Metamaps/Views/index.js index d13482d0..39104b18 100644 --- a/frontend/src/Metamaps/Views/index.js +++ b/frontend/src/Metamaps/Views/index.js @@ -1,7 +1,18 @@ +/* global $ */ + import ExploreMaps from './ExploreMaps' import ChatView from './ChatView' import VideoView from './VideoView' 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 diff --git a/frontend/src/Metamaps/index.js b/frontend/src/Metamaps/index.js index 44bbfdb6..bf2e2d60 100644 --- a/frontend/src/Metamaps/index.js +++ b/frontend/src/Metamaps/index.js @@ -88,7 +88,7 @@ document.addEventListener('DOMContentLoaded', function () { if (Metamaps.currentSection === 'explore') { 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') { Views.ExploreMaps.fetchUserThenRender() } else { diff --git a/frontend/src/components/Maps/MapCard.js b/frontend/src/components/Maps/MapCard.js index 3a1557ee..1cb99530 100644 --- a/frontend/src/components/Maps/MapCard.js +++ b/frontend/src/components/Maps/MapCard.js @@ -1,8 +1,19 @@ 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 { 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) { return string.charAt(0).toUpperCase() + string.slice(1) @@ -59,6 +70,8 @@ class MapCard extends Component { + { hasMapper &&
} + { hasConversation && } @@ -69,6 +82,7 @@ class MapCard extends Component { MapCard.propTypes = { map: PropTypes.object.isRequired, + juntoState: PropTypes.object, currentUser: PropTypes.object } diff --git a/frontend/src/components/Maps/index.js b/frontend/src/components/Maps/index.js index 670f5aaf..a714e4ca 100644 --- a/frontend/src/components/Maps/index.js +++ b/frontend/src/components/Maps/index.js @@ -41,7 +41,7 @@ class Maps extends Component { } 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' } return ( @@ -50,7 +50,7 @@ class Maps extends Component {