refactor some of the ChatView functions
This commit is contained in:
Connor Turland
parent
7d43abeefe
commit
34a44dccd6
3 changed files with 74 additions and 45 deletions
|
|
@ -18,6 +18,8 @@ const linker = new Autolinker({ newWindow: true, truncate: 50, email: false, pho
|
|||
|
||||
const ChatView = {
|
||||
isOpen: false,
|
||||
conversationLive: false,
|
||||
isParticipating: false,
|
||||
mapChat: null,
|
||||
domId: 'chat-box-wrapper',
|
||||
init: function(urls) {
|
||||
|
|
@ -37,12 +39,13 @@ const ChatView = {
|
|||
const self = ChatView
|
||||
self.room = room
|
||||
self.mapper = mapper
|
||||
self.messages = messages
|
||||
|
||||
self.messages = messages // is a backbone collection
|
||||
self.conversationLive = false
|
||||
self.isParticipating = false
|
||||
self.alertSound = true // whether to play sounds on arrival of new messages or not
|
||||
self.cursorsShowing = true
|
||||
self.videosShowing = true
|
||||
self.participants = []
|
||||
self.participants = new Backbone.Collection()
|
||||
self.render()
|
||||
},
|
||||
show: () => {
|
||||
|
|
@ -55,11 +58,13 @@ const ChatView = {
|
|||
if (!Active.Map) return
|
||||
const self = ChatView
|
||||
self.mapChat = ReactDOM.render(React.createElement(MapChat, {
|
||||
conversationLive: self.conversationLive,
|
||||
isParticipating: self.isParticipating,
|
||||
onOpen: self.onOpen,
|
||||
onClose: self.onClose,
|
||||
leaveCall: Realtime.leaveCall,
|
||||
joinCall: Realtime.joinCall,
|
||||
participants: self.participants,
|
||||
participants: self.participants.models.map(p => p.attributes),
|
||||
messages: self.messages.models.map(m => m.attributes),
|
||||
videoToggleClick: self.videoToggleClick,
|
||||
cursorToggleClick: self.cursorToggleClick,
|
||||
|
|
@ -76,14 +81,11 @@ const ChatView = {
|
|||
$(document).trigger(ChatView.events.closeTray)
|
||||
},
|
||||
addParticipant: participant => {
|
||||
// TODO this should probably be using a Backbone collection????
|
||||
const p = participant.attributes ? clone(participant.attributes) : participant
|
||||
ChatView.participants.push(p)
|
||||
ChatView.participants.add(participant)
|
||||
ChatView.render()
|
||||
},
|
||||
removeParticipant: participant => {
|
||||
const remove_id = participant.get('id')
|
||||
ChatView.participants = ChatView.participants.filter(p => p.id !== remove_id)
|
||||
ChatView.participants.remove(participant)
|
||||
ChatView.render()
|
||||
},
|
||||
addMessage: (message, isInitial, wasMe) => {
|
||||
|
|
@ -115,29 +117,56 @@ const ChatView = {
|
|||
if (!wasMe && !isInitial && self.alertSound) self.sound.play('receivechat')
|
||||
},
|
||||
handleInputMessage: text => {
|
||||
// TODO use backbone
|
||||
ChatView.addMessage(text, false, false)
|
||||
$(document).trigger(ChatView.events.message + '-' + self.room, [{ message: text }])
|
||||
},
|
||||
leaveConversation: () => {
|
||||
// TODO refactor
|
||||
// this.$participants.removeClass('is-participating')
|
||||
ChatView.isParticipating = false
|
||||
ChatView.render()
|
||||
},
|
||||
mapperJoinedCall: () => {
|
||||
mapperJoinedCall: id => {
|
||||
// TODO refactor
|
||||
// this.$participants.find('.participant-' + id).addClass('active')
|
||||
const mapper = ChatView.participants.findWhere({id})
|
||||
mapper && mapper.set('isParticipating', true)
|
||||
ChatView.render()
|
||||
},
|
||||
mapperLeftCall: () => {
|
||||
// TODO refactor
|
||||
// this.$participants.find('.participant-' + id).removeClass('active')
|
||||
const mapper = ChatView.participants.findWhere({id})
|
||||
mapper && mapper.set('isParticipating', false)
|
||||
ChatView.render()
|
||||
},
|
||||
invitationPending: () => {
|
||||
invitationPending: id => {
|
||||
// TODO refactor
|
||||
// this.$participants.find('.participant-' + id).addClass('pending')
|
||||
const mapper = ChatView.participants.findWhere({id})
|
||||
mapper && mapper.set('isPending', true)
|
||||
ChatView.render()
|
||||
},
|
||||
invitationAnswered: () => {
|
||||
invitationAnswered: id => {
|
||||
// TODO refactor
|
||||
// this.$participants.find('.participant-' + id).removeClass('pending')
|
||||
const mapper = ChatView.participants.findWhere({id})
|
||||
mapper && mapper.set('isPending', false)
|
||||
ChatView.render()
|
||||
},
|
||||
conversationInProgress: participating => {
|
||||
ChatView.conversationLive = true
|
||||
ChatView.isParticipating = participating
|
||||
ChatView.render()
|
||||
},
|
||||
conversationEnded: () => {
|
||||
ChatView.conversationLive = false
|
||||
ChatView.isParticipating = false
|
||||
// go through and remove isParticipating from all other participants too
|
||||
ChatView.render()
|
||||
},
|
||||
removeParticipants: () => {
|
||||
ChatView.participants.remove(ChatView.participants.models)
|
||||
ChatView.render()
|
||||
},
|
||||
close: () => {
|
||||
// TODO how to do focus with react
|
||||
|
|
@ -186,10 +215,6 @@ const ChatView = {
|
|||
// this.$participants.find('.participant').removeClass('pending')
|
||||
// }
|
||||
|
||||
// ChatView.prototype.removeParticipants = function() {
|
||||
// this.participants.remove(this.participants.models)
|
||||
// }
|
||||
|
||||
// ChatView.prototype.addMessage = function(message, isInitial, wasMe) {
|
||||
// this.messages.add(message)
|
||||
// Private.addMessage.call(this, message, isInitial, wasMe)
|
||||
|
|
@ -209,11 +234,6 @@ const ChatView = {
|
|||
// this.$messages.empty()
|
||||
// }
|
||||
|
||||
// ChatView.prototype.remove = function() {
|
||||
// this.$button.off()
|
||||
// this.$container.remove()
|
||||
// }
|
||||
|
||||
/**
|
||||
* @class
|
||||
* @static
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React, { PropTypes, Component } from 'react'
|
|||
|
||||
class Participant extends Component {
|
||||
render() {
|
||||
const { id, self, image, username, selfName, color } = this.props
|
||||
const { conversationLive, mapperIsLive, isParticipating, isPending, id, self, image, username, selfName, color } = this.props
|
||||
return (
|
||||
<div className={`participant participant-${id} ${self ? 'is-self' : ''}`}>
|
||||
<div className="chat-participant-image">
|
||||
|
|
@ -11,17 +11,17 @@ class Participant extends Component {
|
|||
<div className="chat-participant-name">
|
||||
{username} {self ? '(me)' : ''}
|
||||
</div>
|
||||
<button
|
||||
{!conversationLive && <button
|
||||
className='button chat-participant-invite-call'
|
||||
onClick={this.props.inviteACall} // Realtime.inviteACall(id)
|
||||
/>
|
||||
<button
|
||||
/>}
|
||||
{mapperIsLive && !isParticipating && <button
|
||||
className="button chat-participant-invite-join"
|
||||
onClick={this.props.inviteToJoin} // Realtime.inviteToJoin(id)
|
||||
/>
|
||||
<span className="chat-participant-participating">
|
||||
/>}
|
||||
{isParticipating && <span className="chat-participant-participating">
|
||||
<div className="green-dot"></div>
|
||||
</span>
|
||||
</span>}
|
||||
<div className="clearfloat"></div>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -29,6 +29,10 @@ class Participant extends Component {
|
|||
}
|
||||
|
||||
Participant.propTypes = {
|
||||
conversationLive: PropTypes.bool,
|
||||
mapperIsLive: PropTypes.bool,
|
||||
isParticipating: PropTypes.bool,
|
||||
isPending: PropTypes.bool,
|
||||
color: PropTypes.string, // css color
|
||||
id: PropTypes.number,
|
||||
image: PropTypes.string, // image url
|
||||
|
|
|
|||
|
|
@ -68,6 +68,7 @@ class MapChat extends Component {
|
|||
|
||||
render = () => {
|
||||
const rightOffset = this.state.open ? '0' : '-300px'
|
||||
const { conversationLive } = this.props
|
||||
const { videosShowing, cursorsShowing, alertSound, unreadMessages } = this.state
|
||||
return (
|
||||
<div className="chat-box"
|
||||
|
|
@ -79,18 +80,21 @@ class MapChat extends Component {
|
|||
<div onClick={this.toggleCursorsShowing} className={`cursor-toggle ${cursorsShowing ? '' : 'active'}`} />
|
||||
</div>
|
||||
<div className="participants">
|
||||
<div className="conversation-live">
|
||||
{conversationLive && <div className="conversation-live">
|
||||
LIVE
|
||||
<span className="call-action leave" onClick={this.props.leaveCall}>
|
||||
LEAVE
|
||||
</span>
|
||||
<span className="call-action join" onClick={this.props.joinCall}>
|
||||
JOIN
|
||||
</span>
|
||||
</div>
|
||||
{this.props.participants.map(participant => {
|
||||
return <Participant key={participant.id} {...participant} />
|
||||
})}
|
||||
{isParticipating && <span className="call-action leave" onClick={this.props.leaveCall}>
|
||||
LEAVE
|
||||
</span>}
|
||||
{!isParticipating && <span className="call-action join" onClick={this.props.joinCall}>
|
||||
JOIN
|
||||
</span>}
|
||||
</div>}
|
||||
{participants.map(participant => <Participant
|
||||
key={participant.id}
|
||||
{...participant}
|
||||
conversationLive={conversationLive}
|
||||
mapperIsLive={isParticipating}/>
|
||||
)}
|
||||
</div>
|
||||
<div className="chat-header">
|
||||
CHAT
|
||||
|
|
@ -101,9 +105,7 @@ class MapChat extends Component {
|
|||
<Unread count={unreadMessages} />
|
||||
</div>
|
||||
<div className="chat-messages">
|
||||
{this.props.messages.map(message => {
|
||||
return <Message key={message.id} {...message} />
|
||||
})}
|
||||
{messages.map(message => <Message key={message.id} {...message} />)}
|
||||
</div>
|
||||
<textarea className="chat-input"
|
||||
placeholder="Send a message..."
|
||||
|
|
@ -119,6 +121,8 @@ class MapChat extends Component {
|
|||
}
|
||||
|
||||
MapChat.propTypes = {
|
||||
conversationLive: PropTypes.bool,
|
||||
isParticipating: PropTypes.bool,
|
||||
onOpen: PropTypes.func,
|
||||
onClose: PropTypes.func,
|
||||
leaveCall: PropTypes.func,
|
||||
|
|
@ -131,7 +135,8 @@ MapChat.propTypes = {
|
|||
id: PropTypes.number,
|
||||
image: PropTypes.string, // image url
|
||||
self: PropTypes.bool,
|
||||
username: PropTypes.string
|
||||
username: PropTypes.string,
|
||||
isParticipating: PropTypes.bool
|
||||
}))
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue