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

organize more sanely

Browse source
This commit is contained in:
Connor Turland 2016-12-19 17:09:49 -05:00
parent b5e8fa0fc2
commit 7d43abeefe
6 changed files with 76 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/views/layouts/application.html.erb
View file

@ -9,6 +9,8 @@
<body class="<%= authenticated? ? "authenticated" : "unauthenticated" %> controller-<%= controller_name %> action-<%= action_name %>">
<div id="chat-box-wrapper"></div>
<a class='feedback-icon' target='_blank' href='https://hylo.com/c/metamaps'></a>
<%= content_tag :div, class: "main" do %>

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

@ -8,6 +8,7 @@ import DataModel from '../DataModel'
import JIT from '../JIT'
import Util from '../Util'
import Views from '../Views'
import { ChatView } from '../Views'
import Visualize from '../Visualize'
import {
@ -178,17 +179,9 @@ let Realtime = {
room: 'global',
$video: self.localVideo.$video,
myVideoView: self.localVideo.view,
config: { DOUBLE_CLICK_TOLERANCE: 200 },
soundUrls: [
serverData['sounds/MM_sounds.mp3'],
serverData['sounds/MM_sounds.ogg']
]
config: { DOUBLE_CLICK_TOLERANCE: 200 }
})
self.room.videoAdded(self.handleVideoAdded)
if (Active.Map) {
self.room.chat.render()
}
} // if Active.Mapper
},
addJuntoListeners: function() {
@ -237,14 +230,14 @@ let Realtime = {
$('.collabCompass').remove()
if (self.room) {
self.room.leave()
self.room.chat.hide()
self.room.chat.close()
ChatView.hide()
ChatView.close()
}
},
turnOn: function(notify) {
var self = Realtime
$('.collabCompass').show()
self.room.chat.show()
ChatView.show()
self.room.room = 'map-' + Active.Map.id
self.activeMapper = {
id: Active.Mapper.id,
@ -257,7 +250,7 @@ let Realtime = {
self.localVideo.view.$container.find('.video-cutoff').css({
border: '4px solid ' + self.activeMapper.color
})
self.room.chat.addParticipant(self.activeMapper)
ChatView.addParticipant(self.activeMapper)
},
setupSocket: function() {
var self = Realtime

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

@ -10,6 +10,7 @@ import ReactDOM from 'react-dom'
// TODO is this line good or bad
// Backbone.$ = window.$
import Active from '../Active'
import Realtime from '../Realtime'
import MapChat from '../../components/MapChat'
@ -18,7 +19,21 @@ const linker = new Autolinker({ newWindow: true, truncate: 50, email: false, pho
const ChatView = {
isOpen: false,
mapChat: null,
init: function(messages, mapper, room, opts = {}) {
domId: 'chat-box-wrapper',
init: function(urls) {
const self = ChatView
self.sound = new Howl({
src: urls,
sprite: {
joinmap: [0, 561],
leavemap: [1000, 592],
receivechat: [2000, 318],
sendchat: [3000, 296],
sessioninvite: [4000, 5393, true]
}
})
},
setNewMap: function(messages, mapper, room) {
const self = ChatView
self.room = room
self.mapper = mapper
@ -28,20 +43,16 @@ const ChatView = {
self.cursorsShowing = true
self.videosShowing = true
self.participants = []
self.sound = new Howl({
src: opts.soundUrls,
sprite: {
joinmap: [0, 561],
leavemap: [1000, 592],
receivechat: [2000, 318],
sendchat: [3000, 296],
sessioninvite: [4000, 5393, true]
}
})
$('body').prepend('<div id="chat-box-wrapper"></div>')
self.render()
},
show: () => {
$('#' + ChatView.domId).show()
},
hide: () => {
$('#' + ChatView.domId).hide()
},
render: () => {
if (!Active.Map) return
const self = ChatView
self.mapChat = ReactDOM.render(React.createElement(MapChat, {
onOpen: self.onOpen,
@ -55,11 +66,8 @@ const ChatView = {
soundToggleClick: self.soundToggleClick,
inputBlur: self.inputBlur,
inputFocus: self.inputFocus,
videosShowing: self.videosShowing,
cursorsShowing: self.cursorsShowing,
alertSound: self.alertSound,
handleInputMessage: self.handleInputMessage
}), document.getElementById('chat-box-wrapper'))
}), document.getElementById(ChatView.domId))
},
onOpen: () => {
$(document).trigger(ChatView.events.openTray)
@ -144,21 +152,15 @@ const ChatView = {
// this.scrollMessages(0)
},
videoToggleClick: function() {
const self = ChatView
self.videosShowing = !self.videosShowing
$(document).trigger(self.videosShowing ? ChatView.events.videosOn : ChatView.events.videosOff)
ChatView.render()
ChatView.videosShowing = !ChatView.videosShowing
$(document).trigger(ChatView.videosShowing ? ChatView.events.videosOn : ChatView.events.videosOff)
},
cursorToggleClick: function() {
const self = ChatView
self.cursorsShowing = !self.cursorsShowing
$(document).trigger(self.cursorsShowing ? ChatView.events.cursorsOn : ChatView.events.cursorsOff)
ChatView.render()
ChatView.cursorsShowing = !ChatView.cursorsShowing
$(document).trigger(ChatView.cursorsShowing ? ChatView.events.cursorsOn : ChatView.events.cursorsOff)
},
soundToggleClick: function() {
const self = ChatView
this.alertSound = !this.alertSound
ChatView.render()
ChatView.alertSound = !ChatView.alertSound
},
inputFocus: () => {
$(document).trigger(ChatView.events.inputFocus)

24
frontend/src/Metamaps/Views/Room.js
View file

@ -26,10 +26,7 @@ const Room = function(opts = {}) {
this.messages = new Backbone.Collection()
this.currentMapper = new Backbone.Model({ name: opts.username, image: opts.image })
this.chat = ChatView
this.chat.init(this.messages, this.currentMapper, this.room, {
soundUrls: opts.soundUrls
})
ChatView.setNewMap(this.messages, this.currentMapper, this.room)
this.videos = {}
@ -39,19 +36,19 @@ const Room = function(opts = {}) {
Room.prototype.join = function(cb) {
this.isActiveRoom = true
this.webrtc.joinRoom(this.room, cb)
this.chat.conversationInProgress(true) // true indicates participation
ChatView.conversationInProgress(true) // true indicates participation
}
Room.prototype.conversationInProgress = function() {
this.chat.conversationInProgress(false) // false indicates not participating
ChatView.conversationInProgress(false) // false indicates not participating
}
Room.prototype.conversationEnding = function() {
this.chat.conversationEnded()
ChatView.conversationEnded()
}
Room.prototype.leaveVideoOnly = function() {
this.chat.leaveConversation() // the conversation will carry on without you
ChatView.leaveConversation() // the conversation will carry on without you
for (var id in this.videos) {
this.removeVideo(id)
}
@ -67,9 +64,9 @@ Room.prototype.leave = function() {
this.isActiveRoom = false
this.webrtc.leaveRoom()
this.webrtc.stopLocalVideo()
this.chat.conversationEnded()
this.chat.removeParticipants()
this.chat.clearMessages()
ChatView.conversationEnded()
ChatView.removeParticipants()
ChatView.clearMessages()
this.messages.reset()
}
@ -161,8 +158,7 @@ Room.prototype.removeVideo = function(peer) {
Room.prototype.sendChatMessage = function(data) {
var self = this
// this.roomRef.child('messages').push(data)
if (self.chat.alertSound) self.chat.sound.play('sendchat')
if (ChatView.alertSound) ChatView.sound.play('sendchat')
var m = new DataModel.Message({
message: data.message,
resource_id: Active.Map.id,
@ -185,7 +181,7 @@ Room.prototype.addMessages = function(messages, isInitial, wasMe) {
var self = this
messages.models.forEach(function(message) {
self.chat.addMessage(message, isInitial, wasMe)
ChatView.addMessage(message, isInitial, wasMe)
})
}

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

@ -7,8 +7,9 @@ import Room from './Room'
import { JUNTO_UPDATED } from '../Realtime/events'
const Views = {
init: () => {
init: (serverData) => {
$(document).on(JUNTO_UPDATED, () => ExploreMaps.render())
ChatView.init([serverData['sounds/MM_sounds.mp3'],serverData['sounds/MM_sounds.ogg']])
},
ExploreMaps,
ChatView,

32
frontend/src/components/MapChat/index.js
View file

@ -10,7 +10,10 @@ class MapChat extends Component {
this.state = {
unreadMessages: 0,
open: false,
messageText: ''
messageText: '',
alertSound: true, // whether to play sounds on arrival of new messages or not
cursorsShowing: true,
videosShowing: true
}
}
@ -33,6 +36,21 @@ class MapChat extends Component {
else if (!this.state.open) this.open()
}
toggleAlertSound = () => {
this.setState({alertSound: !this.state.alertSound})
this.props.soundToggleClick()
}
toggleCursorsShowing = () => {
this.setState({cursorsShowing: !this.state.cursorsShowing})
this.props.cursorToggleClick()
}
toggleVideosShowing = () => {
this.setState({videosShowing: !this.state.videosShowing})
this.props.videoToggleClick()
}
handleChange = key => e => {
this.setState({
[key]: e.target.value
@ -50,16 +68,15 @@ class MapChat extends Component {
render = () => {
const rightOffset = this.state.open ? '0' : '-300px'
const { videosShowing, cursorsShowing, alertSound } = this.props
const { unreadMessages } = this.state
const { videosShowing, cursorsShowing, alertSound, unreadMessages } = this.state
return (
<div className="chat-box"
style={{ right: rightOffset }}
>
<div className="junto-header">
PARTICIPANTS
<div className={`video-toggle ${videosShowing ? 'active' : ''}`} />
<div className={`cursor-toggle ${cursorsShowing ? 'active' : ''}`} />
<div onClick={this.toggleVideosShowing} className={`video-toggle ${videosShowing ? '' : 'active'}`} />
<div onClick={this.toggleCursorsShowing} className={`cursor-toggle ${cursorsShowing ? '' : 'active'}`} />
</div>
<div className="participants">
<div className="conversation-live">
@ -77,7 +94,7 @@ class MapChat extends Component {
</div>
<div className="chat-header">
CHAT
<div className={`sound-toggle ${alertSound ? 'active' : ''}`}></div>
<div onClick={this.toggleAlertSound} className={`sound-toggle ${alertSound ? '' : 'active'}`}></div>
</div>
<div className="chat-button" onClick={this.toggleDrawer}>
<div className="tooltips">Chat</div>
@ -106,6 +123,9 @@ MapChat.propTypes = {
onClose: PropTypes.func,
leaveCall: PropTypes.func,
joinCall: PropTypes.func,
videoToggleClick: PropTypes.func,
cursorToggleClick: PropTypes.func,
soundToggleClick: PropTypes.func,
participants: PropTypes.arrayOf(PropTypes.shape({
color: PropTypes.string, // css color
id: PropTypes.number,