mirror of https://github.com/jitsi/jitsi-meet
- Change "features/chat" to support listening for new chat messages and storing them, removing that logic from conference.js. - Combine chat.scss and side_toolbar_container.css, and remove unused scss files. Chat is the only side panel so the two concepts have been merged. - Remove direct access to the chat feature from non-react and non-redux flows. - Modify the i18n translate function to take in an options object. By default the option "wait" is set to true, but that causes components to mount after the parent has been notified of an update, which means autoscrolling down to the latest rendered messages does not work. With "wait" set to false, the children will mount and then the parent will trigger componentDidUpdate. - Create react components for chat. Chat is the side panel plus the entiren chat feature. ChatInput is a child of Chat and is used for composing messages. ChatMessage displays one message and extends PureComponent to limit re-renders. - Fix a bug where the toolbar was not showing automatically when chat is closed and a new message is received. - Import react-transition-group to time the animation of the side panel showing/hiding and unmounting the Chat component. This gets around the issue of having to control autofocus if the component were always mounted and visibility toggled, but introduces not being able to store previous scroll state (without additional work or re-work).pull/3423/head jitsi-meet_3355
Pratik Shah
6 years ago
committed by
yanas
parent
8adc8a090a
commit
b7b43e8d9c
@ -1,19 +0,0 @@ |
||||
/** |
||||
* Project animations |
||||
**/ |
||||
|
||||
/** |
||||
* Slide in animation for extended toolbar (inner) panel. |
||||
*/ |
||||
|
||||
// FIX: Can't use percentage because of breaking animation when width is changed |
||||
// (100% of 0 is also zero) Extracted this to config variable. |
||||
@include keyframes(slideInExt) { |
||||
from { left: -$sidebarWidth; } |
||||
to { left: 0; } |
||||
} |
||||
|
||||
@include keyframes(slideOutExt) { |
||||
from { left: 0; } |
||||
to { left: -$sidebarWidth; } |
||||
} |
||||
@ -1,105 +0,0 @@ |
||||
/** |
||||
* Toolbar side panel main container element. |
||||
*/ |
||||
#sideToolbarContainer { |
||||
background-color: $newToolbarBackgroundColor; |
||||
/** |
||||
* Make the sidebar flush with the top of the toolbar. Take the size of |
||||
* the toolbar and subtract from 100%. |
||||
*/ |
||||
height: calc(100% - #{$newToolbarSizeWithPadding}); |
||||
left: 0; |
||||
max-width: $sidebarWidth; |
||||
overflow: hidden; |
||||
position: absolute; |
||||
top: 0; |
||||
width: 0; |
||||
z-index: $sideToolbarContainerZ; |
||||
|
||||
/** |
||||
* Labels inside the side panel. |
||||
*/ |
||||
label { |
||||
color: $baseLight; |
||||
} |
||||
|
||||
/** |
||||
* Form elements and blocks. |
||||
*/ |
||||
input, |
||||
a, |
||||
.sideToolbarBlock, |
||||
.form-control { |
||||
display: block; |
||||
margin-top: 15px; |
||||
margin-left: 10%; |
||||
width: 80%; |
||||
} |
||||
|
||||
/** |
||||
* Specify styling of elements inside a block. |
||||
*/ |
||||
.sideToolbarBlock { |
||||
input, a { |
||||
margin-left: 0; |
||||
margin-top: 5px; |
||||
width: 100%; |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Inner container, for example settings or profile. |
||||
*/ |
||||
.sideToolbarContainer__inner { |
||||
display: none; |
||||
height: 100%; |
||||
width: $sidebarWidth; |
||||
position: absolute; |
||||
box-sizing: border-box; |
||||
color: #FFF; |
||||
|
||||
.input-control { |
||||
border: 0; |
||||
} |
||||
|
||||
/** |
||||
* Titles and subtitles of inner containers. |
||||
*/ |
||||
div.title { |
||||
margin: 24px 0 11px; |
||||
} |
||||
|
||||
/** |
||||
* Main title size. |
||||
*/ |
||||
div.title { |
||||
color: $toolbarTitleColor; |
||||
text-align: center; |
||||
font-size: $toolbarTitleFontSize; |
||||
} |
||||
|
||||
/** |
||||
* First element after a title. |
||||
*/ |
||||
.first { |
||||
margin-top: 0 !important; |
||||
} |
||||
} |
||||
|
||||
.side-toolbar-close { |
||||
background: gray; |
||||
border: 3px solid rgba(255, 255, 255, 0.1); |
||||
border-radius: 100%; |
||||
color: white; |
||||
cursor:pointer; |
||||
height: 10px; |
||||
line-height: 10px; |
||||
padding: 4px; |
||||
position: absolute; |
||||
right: 5px; |
||||
text-align: center; |
||||
top: 5px; |
||||
width: 10px; |
||||
z-index: 1; |
||||
} |
||||
} |
||||
@ -1,168 +0,0 @@ |
||||
/* global $, APP */ |
||||
import UIEvents from '../../../service/UI/UIEvents'; |
||||
import { setVisiblePanel } from '../../../react/features/side-panel'; |
||||
|
||||
/** |
||||
* Handles open and close of the extended toolbar side panel |
||||
* (chat, settings, etc.). |
||||
* |
||||
* @type {{init, toggle, isVisible, hide, show, resize}} |
||||
*/ |
||||
const SideContainerToggler = { |
||||
/** |
||||
* Initialises this toggler by registering the listeners. |
||||
* |
||||
* @param eventEmitter |
||||
*/ |
||||
init(eventEmitter) { |
||||
this.eventEmitter = eventEmitter; |
||||
|
||||
// We may not have a side toolbar container, for example, in
|
||||
// filmstrip-only mode.
|
||||
const sideToolbarContainer |
||||
= document.getElementById('sideToolbarContainer'); |
||||
|
||||
if (!sideToolbarContainer) { |
||||
return; |
||||
} |
||||
|
||||
// Adds a listener for the animationend event that would take care of
|
||||
// hiding all internal containers when the extendedToolbarPanel is
|
||||
// closed.
|
||||
sideToolbarContainer.addEventListener( |
||||
'animationend', |
||||
e => { |
||||
if (e.animationName === 'slideOutExt') { |
||||
$('#sideToolbarContainer').children() |
||||
.each(function() { |
||||
/* eslint-disable no-invalid-this */ |
||||
if ($(this).hasClass('show')) { |
||||
SideContainerToggler.hideInnerContainer($(this)); |
||||
} |
||||
/* eslint-enable no-invalid-this */ |
||||
}); |
||||
} |
||||
}, |
||||
false); |
||||
}, |
||||
|
||||
/** |
||||
* Toggles the container with the given element id. |
||||
* |
||||
* @param {String} elementId the identifier of the container element to |
||||
* toggle |
||||
*/ |
||||
toggle(elementId) { |
||||
const elementSelector = $(`#${elementId}`); |
||||
const isSelectorVisible = elementSelector.hasClass('show'); |
||||
|
||||
if (isSelectorVisible) { |
||||
this.hide(); |
||||
APP.store.dispatch(setVisiblePanel(null)); |
||||
} else { |
||||
if (this.isVisible()) { |
||||
$('#sideToolbarContainer').children() |
||||
.each(function() { |
||||
/* eslint-disable no-invalid-this */ |
||||
if ($(this).id !== elementId && $(this).hasClass('show')) { |
||||
SideContainerToggler.hideInnerContainer($(this)); |
||||
} |
||||
/* eslint-enable no-invalid-this */ |
||||
}); |
||||
} |
||||
|
||||
if (!this.isVisible()) { |
||||
this.show(); |
||||
} |
||||
|
||||
this.showInnerContainer(elementSelector); |
||||
APP.store.dispatch(setVisiblePanel(elementId)); |
||||
} |
||||
}, |
||||
|
||||
/** |
||||
* Returns {true} if the side toolbar panel is currently visible, |
||||
* otherwise returns {false}. |
||||
*/ |
||||
isVisible() { |
||||
return $('#sideToolbarContainer').hasClass('slideInExt'); |
||||
}, |
||||
|
||||
/** |
||||
* Returns {true} if the side toolbar panel is currently hovered and |
||||
* {false} otherwise. |
||||
*/ |
||||
isHovered() { |
||||
return $('#sideToolbarContainer:hover').length > 0; |
||||
}, |
||||
|
||||
/** |
||||
* Hides the side toolbar panel with a slide out animation. |
||||
*/ |
||||
hide() { |
||||
$('#sideToolbarContainer') |
||||
.removeClass('slideInExt') |
||||
.addClass('slideOutExt'); |
||||
}, |
||||
|
||||
/** |
||||
* Shows the side toolbar panel with a slide in animation. |
||||
*/ |
||||
show() { |
||||
if (!this.isVisible()) { |
||||
$('#sideToolbarContainer') |
||||
.removeClass('slideOutExt') |
||||
.addClass('slideInExt'); |
||||
} |
||||
}, |
||||
|
||||
/** |
||||
* Hides the inner container given by the selector. |
||||
* |
||||
* @param {Object} containerSelector the jquery selector for the |
||||
* element to hide |
||||
*/ |
||||
hideInnerContainer(containerSelector) { |
||||
containerSelector.removeClass('show').addClass('hide'); |
||||
|
||||
this.eventEmitter.emit(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED, |
||||
containerSelector.attr('id'), false); |
||||
}, |
||||
|
||||
/** |
||||
* Shows the inner container given by the selector. |
||||
* |
||||
* @param {Object} containerSelector the jquery selector for the |
||||
* element to show |
||||
*/ |
||||
showInnerContainer(containerSelector) { |
||||
|
||||
// Before showing the container, make sure there is no other visible.
|
||||
// If we quickly show a container, while another one is animating
|
||||
// and animation never ends, so we do not really hide the first one and
|
||||
// we end up with to shown panels
|
||||
$('#sideToolbarContainer').children() |
||||
.each(function() { |
||||
/* eslint-disable no-invalid-this */ |
||||
if ($(this).hasClass('show')) { |
||||
SideContainerToggler.hideInnerContainer($(this)); |
||||
} |
||||
/* eslint-enable no-invalid-this */ |
||||
}); |
||||
|
||||
containerSelector.removeClass('hide').addClass('show'); |
||||
|
||||
this.eventEmitter.emit(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED, |
||||
containerSelector.attr('id'), true); |
||||
}, |
||||
|
||||
/** |
||||
* TO FIX: do we need to resize the chat? |
||||
*/ |
||||
resize() { |
||||
// let [width, height] = UIUtil.getSidePanelSize();
|
||||
// Chat.resizeChat(width, height);
|
||||
} |
||||
}; |
||||
|
||||
export default SideContainerToggler; |
||||
@ -1,13 +0,0 @@ |
||||
import Chat from './chat/Chat'; |
||||
import { isButtonEnabled } from '../../../react/features/toolbox'; |
||||
|
||||
const SidePanels = { |
||||
init(eventEmitter) { |
||||
// Initialize chat
|
||||
if (isButtonEnabled('chat')) { |
||||
Chat.init(eventEmitter); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
export default SidePanels; |
||||
@ -1,404 +0,0 @@ |
||||
/* global APP, $ */ |
||||
|
||||
import { processReplacements } from './Replacement'; |
||||
import VideoLayout from '../../videolayout/VideoLayout'; |
||||
|
||||
import UIUtil from '../../util/UIUtil'; |
||||
import UIEvents from '../../../../service/UI/UIEvents'; |
||||
|
||||
import { smileys } from './smileys'; |
||||
|
||||
import { addMessage, markAllRead } from '../../../../react/features/chat'; |
||||
import { |
||||
dockToolbox, |
||||
getToolboxHeight |
||||
} from '../../../../react/features/toolbox'; |
||||
|
||||
let unreadMessages = 0; |
||||
const sidePanelsContainerId = 'sideToolbarContainer'; |
||||
const htmlStr = ` |
||||
<div id="chat_container" class="sideToolbarContainer__inner"> |
||||
<div id="nickname"> |
||||
<span data-i18n="chat.nickname.title"></span> |
||||
<form> |
||||
<input type='text' |
||||
class="input-control" id="nickinput" autofocus |
||||
data-i18n="[placeholder]chat.nickname.popover"> |
||||
</form> |
||||
</div> |
||||
|
||||
<div id="chatconversation"></div> |
||||
<textarea id="usermsg" autofocus |
||||
data-i18n="[placeholder]chat.messagebox"></textarea> |
||||
<div id="smileysarea"> |
||||
<div id="smileys"> |
||||
<img src="images/smile.svg"/> |
||||
</div> |
||||
</div> |
||||
</div>`; |
||||
|
||||
/** |
||||
* |
||||
*/ |
||||
function initHTML() { |
||||
$(`#${sidePanelsContainerId}`) |
||||
.append(htmlStr); |
||||
|
||||
// make sure we translate the panel, as adding it can be after i18n
|
||||
// library had initialized and translated already present html
|
||||
APP.translation.translateElement($(`#${sidePanelsContainerId}`)); |
||||
} |
||||
|
||||
/** |
||||
* The container id, which is and the element id. |
||||
*/ |
||||
const CHAT_CONTAINER_ID = 'chat_container'; |
||||
|
||||
/** |
||||
* Updates visual notification, indicating that a message has arrived. |
||||
*/ |
||||
function updateVisualNotification() { |
||||
// XXX The rewrite of the toolbar in React delayed the availability of the
|
||||
// element unreadMessages. In order to work around the delay, I introduced
|
||||
// and utilized unreadMsgSelector in addition to unreadMsgElement.
|
||||
const unreadMsgSelector = $('#unreadMessages'); |
||||
const unreadMsgElement |
||||
= unreadMsgSelector.length > 0 ? unreadMsgSelector[0] : undefined; |
||||
|
||||
if (unreadMessages && unreadMsgElement) { |
||||
unreadMsgElement.innerHTML = unreadMessages.toString(); |
||||
|
||||
APP.store.dispatch(dockToolbox(true)); |
||||
|
||||
const chatButtonElement |
||||
= document.getElementById('toolbar_button_chat'); |
||||
const leftIndent |
||||
= (UIUtil.getTextWidth(chatButtonElement) |
||||
- UIUtil.getTextWidth(unreadMsgElement)) / 2; |
||||
const topIndent |
||||
= ((UIUtil.getTextHeight(chatButtonElement) |
||||
- UIUtil.getTextHeight(unreadMsgElement)) / 2) - 5; |
||||
|
||||
unreadMsgElement.setAttribute( |
||||
'style', |
||||
`top:${topIndent}; left:${leftIndent};`); |
||||
} else { |
||||
unreadMsgSelector.html(''); |
||||
} |
||||
|
||||
if (unreadMsgElement) { |
||||
unreadMsgSelector.parent()[unreadMessages > 0 ? 'show' : 'hide'](); |
||||
} |
||||
} |
||||
|
||||
|
||||
/** |
||||
* Returns the current time in the format it is shown to the user |
||||
* @returns {string} |
||||
*/ |
||||
function getCurrentTime(stamp) { |
||||
const now = stamp ? new Date(stamp) : new Date(); |
||||
let hour = now.getHours(); |
||||
let minute = now.getMinutes(); |
||||
let second = now.getSeconds(); |
||||
|
||||
if (hour.toString().length === 1) { |
||||
hour = `0${hour}`; |
||||
} |
||||
if (minute.toString().length === 1) { |
||||
minute = `0${minute}`; |
||||
} |
||||
if (second.toString().length === 1) { |
||||
second = `0${second}`; |
||||
} |
||||
|
||||
return `${hour}:${minute}:${second}`; |
||||
} |
||||
|
||||
/** |
||||
* |
||||
*/ |
||||
function toggleSmileys() { |
||||
const smileys = $('#smileysContainer'); // eslint-disable-line no-shadow
|
||||
|
||||
smileys.slideToggle(); |
||||
|
||||
$('#usermsg').focus(); |
||||
} |
||||
|
||||
/** |
||||
* |
||||
*/ |
||||
function addClickFunction(smiley, number) { |
||||
smiley.onclick = function addSmileyToMessage() { |
||||
const usermsg = $('#usermsg'); |
||||
let message = usermsg.val(); |
||||
|
||||
message += smileys[`smiley${number}`]; |
||||
usermsg.val(message); |
||||
usermsg.get(0).setSelectionRange(message.length, message.length); |
||||
toggleSmileys(); |
||||
usermsg.focus(); |
||||
}; |
||||
} |
||||
|
||||
/** |
||||
* Adds the smileys container to the chat |
||||
*/ |
||||
function addSmileys() { |
||||
const smileysContainer = document.createElement('div'); |
||||
|
||||
smileysContainer.id = 'smileysContainer'; |
||||
for (let i = 1; i <= 21; i++) { |
||||
const smileyContainer = document.createElement('div'); |
||||
|
||||
smileyContainer.id = `smiley${i}`; |
||||
smileyContainer.className = 'smileyContainer'; |
||||
const smiley = document.createElement('img'); |
||||
|
||||
smiley.src = `images/smileys/smiley${i}.svg`; |
||||
smiley.className = 'smiley'; |
||||
addClickFunction(smiley, i); |
||||
smileyContainer.appendChild(smiley); |
||||
smileysContainer.appendChild(smileyContainer); |
||||
} |
||||
|
||||
$('#chat_container').append(smileysContainer); |
||||
} |
||||
|
||||
/** |
||||
* Resizes the chat conversation. |
||||
*/ |
||||
function resizeChatConversation() { |
||||
// FIXME: this function can all be done with CSS. If Chat is ever rewritten,
|
||||
// do not copy over this logic.
|
||||
const msgareaHeight = $('#usermsg').outerHeight(); |
||||
const chatspace = $(`#${CHAT_CONTAINER_ID}`); |
||||
const width = chatspace.width(); |
||||
const chat = $('#chatconversation'); |
||||
const smileys = $('#smileysarea'); // eslint-disable-line no-shadow
|
||||
|
||||
smileys.height(msgareaHeight); |
||||
$('#smileys').css('bottom', (msgareaHeight - 26) / 2); |
||||
$('#smileysContainer').css('bottom', msgareaHeight); |
||||
chat.width(width - 10); |
||||
|
||||
const maybeAMagicNumberForPaddingAndMargin = 100; |
||||
const offset = maybeAMagicNumberForPaddingAndMargin |
||||
+ msgareaHeight + getToolboxHeight(); |
||||
|
||||
chat.height(window.innerHeight - offset); |
||||
} |
||||
|
||||
/** |
||||
* Focus input after 400 ms |
||||
* Found input by id |
||||
* |
||||
* @param id {string} input id |
||||
*/ |
||||
function deferredFocus(id) { |
||||
setTimeout(() => $(`#${id}`).focus(), 400); |
||||
} |
||||
|
||||
/** |
||||
* Chat related user interface. |
||||
*/ |
||||
const Chat = { |
||||
/** |
||||
* Initializes chat related interface. |
||||
*/ |
||||
init(eventEmitter) { |
||||
initHTML(); |
||||
if (APP.conference.getLocalDisplayName()) { |
||||
Chat.setChatConversationMode(true); |
||||
} |
||||
|
||||
$('#smileys').click(() => { |
||||
Chat.toggleSmileys(); |
||||
}); |
||||
|
||||
$('#nickinput').keydown(function(event) { |
||||
if (event.keyCode === 13) { |
||||
event.preventDefault(); |
||||
const val = this.value; // eslint-disable-line no-invalid-this
|
||||
|
||||
this.value = '';// eslint-disable-line no-invalid-this
|
||||
eventEmitter.emit(UIEvents.NICKNAME_CHANGED, val); |
||||
deferredFocus('usermsg'); |
||||
} |
||||
}); |
||||
|
||||
const usermsg = $('#usermsg'); |
||||
|
||||
usermsg.keydown(function(event) { |
||||
if (event.keyCode === 13) { |
||||
event.preventDefault(); |
||||
const value = this.value; // eslint-disable-line no-invalid-this
|
||||
|
||||
usermsg.val('').trigger('autosize.resize'); |
||||
this.focus();// eslint-disable-line no-invalid-this
|
||||
|
||||
const message = UIUtil.escapeHtml(value); |
||||
|
||||
eventEmitter.emit(UIEvents.MESSAGE_CREATED, message); |
||||
} |
||||
}); |
||||
|
||||
const onTextAreaResize = function() { |
||||
resizeChatConversation(); |
||||
Chat.scrollChatToBottom(); |
||||
}; |
||||
|
||||
usermsg.autosize({ callback: onTextAreaResize }); |
||||
|
||||
eventEmitter.on(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED, |
||||
(containerId, isVisible) => { |
||||
if (containerId !== CHAT_CONTAINER_ID || !isVisible) { |
||||
return; |
||||
} |
||||
|
||||
unreadMessages = 0; |
||||
APP.store.dispatch(markAllRead()); |
||||
updateVisualNotification(); |
||||
|
||||
// Undock the toolbar when the chat is shown and if we're in a
|
||||
// video mode.
|
||||
if (VideoLayout.isLargeVideoVisible()) { |
||||
APP.store.dispatch(dockToolbox(false)); |
||||
} |
||||
|
||||
// if we are in conversation mode focus on the text input
|
||||
// if we are not, focus on the display name input
|
||||
deferredFocus( |
||||
APP.conference.getLocalDisplayName() |
||||
? 'usermsg' |
||||
: 'nickinput'); |
||||
}); |
||||
|
||||
addSmileys(); |
||||
updateVisualNotification(); |
||||
}, |
||||
|
||||
/** |
||||
* Appends the given message to the chat conversation. |
||||
*/ |
||||
// eslint-disable-next-line max-params
|
||||
updateChatConversation(id, displayName, message, stamp) { |
||||
const isFromLocalParticipant = APP.conference.isLocalId(id); |
||||
let divClassName = ''; |
||||
|
||||
if (isFromLocalParticipant) { |
||||
divClassName = 'localuser'; |
||||
} else { |
||||
divClassName = 'remoteuser'; |
||||
|
||||
if (!Chat.isVisible()) { |
||||
unreadMessages++; |
||||
updateVisualNotification(); |
||||
} |
||||
} |
||||
|
||||
// replace links and smileys
|
||||
// Strophe already escapes special symbols on sending,
|
||||
// so we escape here only tags to avoid double &
|
||||
const escMessage = message.replace(/</g, '<') |
||||
.replace(/>/g, '>') |
||||
.replace(/\n/g, '<br/>'); |
||||
const escDisplayName = UIUtil.escapeHtml(displayName); |
||||
const timestamp = getCurrentTime(stamp); |
||||
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
message = processReplacements(escMessage); |
||||
|
||||
const messageContainer |
||||
= `${'<div class="chatmessage">' |
||||
+ '<img src="images/chatArrow.svg" class="chatArrow">' |
||||
+ '<div class="username '}${divClassName}">${escDisplayName |
||||
}</div><div class="timestamp">${timestamp |
||||
}</div><div class="usermessage">${message}</div>` |
||||
+ '</div>'; |
||||
|
||||
$('#chatconversation').append(messageContainer); |
||||
$('#chatconversation').animate( |
||||
{ scrollTop: $('#chatconversation')[0].scrollHeight }, 1000); |
||||
|
||||
const markAsRead = Chat.isVisible() || isFromLocalParticipant; |
||||
|
||||
APP.store.dispatch(addMessage( |
||||
escDisplayName, message, timestamp, markAsRead)); |
||||
}, |
||||
|
||||
/** |
||||
* Appends error message to the conversation |
||||
* @param errorMessage the received error message. |
||||
* @param originalText the original message. |
||||
*/ |
||||
chatAddError(errorMessage, originalText) { |
||||
// eslint-disable-next-line no-param-reassign
|
||||
errorMessage = UIUtil.escapeHtml(errorMessage); |
||||
// eslint-disable-next-line no-param-reassign
|
||||
originalText = UIUtil.escapeHtml(originalText); |
||||
|
||||
$('#chatconversation').append( |
||||
`${'<div class="errorMessage"><b>Error: </b>Your message'}${ |
||||
originalText ? ` "${originalText}"` : '' |
||||
} was not sent.${ |
||||
errorMessage ? ` Reason: ${errorMessage}` : ''}</div>`); |
||||
$('#chatconversation').animate( |
||||
{ scrollTop: $('#chatconversation')[0].scrollHeight }, 1000); |
||||
}, |
||||
|
||||
/** |
||||
* Sets the chat conversation mode. |
||||
* Conversation mode is the normal chat mode, non conversation mode is |
||||
* where we ask user to input its display name. |
||||
* @param {boolean} isConversationMode if chat should be in |
||||
* conversation mode or not. |
||||
*/ |
||||
setChatConversationMode(isConversationMode) { |
||||
$(`#${CHAT_CONTAINER_ID}`) |
||||
.toggleClass('is-conversation-mode', isConversationMode); |
||||
}, |
||||
|
||||
/** |
||||
* Resizes the chat area. |
||||
*/ |
||||
resizeChat(width, height) { |
||||
$(`#${CHAT_CONTAINER_ID}`).width(width) |
||||
.height(height); |
||||
|
||||
resizeChatConversation(); |
||||
}, |
||||
|
||||
/** |
||||
* Indicates if the chat is currently visible. |
||||
*/ |
||||
isVisible() { |
||||
return UIUtil.isVisible( |
||||
document.getElementById(CHAT_CONTAINER_ID)); |
||||
}, |
||||
|
||||
/** |
||||
* Shows and hides the window with the smileys |
||||
*/ |
||||
toggleSmileys, |
||||
|
||||
/** |
||||
* Scrolls chat to the bottom. |
||||
*/ |
||||
scrollChatToBottom() { |
||||
setTimeout( |
||||
() => { |
||||
const chatconversation = $('#chatconversation'); |
||||
|
||||
// XXX Prevent TypeError: undefined is not an object when the
|
||||
// Web browser does not support WebRTC (yet).
|
||||
chatconversation.length > 0 |
||||
&& chatconversation.scrollTop( |
||||
chatconversation[0].scrollHeight); |
||||
}, |
||||
5); |
||||
} |
||||
}; |
||||
|
||||
export default Chat; |
||||
@ -1,63 +1,61 @@ |
||||
import { ADD_MESSAGE, SET_LAST_READ_MESSAGE } from './actionTypes'; |
||||
import { ADD_MESSAGE, SEND_MESSAGE, TOGGLE_CHAT } from './actionTypes'; |
||||
|
||||
/* eslint-disable max-params */ |
||||
|
||||
/** |
||||
* Adds a chat message to the collection of messages. |
||||
* |
||||
* @param {string} userName - The username to display of the participant that |
||||
* authored the message. |
||||
* @param {string} message - The received message to display. |
||||
* @param {string} timestamp - A timestamp to display for when the message was |
||||
* received. |
||||
* @param {boolean} hasRead - Whether or not to immediately mark the message as |
||||
* read. |
||||
* @param {Object} messageDetails - The chat message to save. |
||||
* @param {string} messageDetails.displayName - The displayName of the |
||||
* participant that authored the message. |
||||
* @param {boolean} messageDetails.hasRead - Whether or not to immediately mark |
||||
* the message as read. |
||||
* @param {string} messageDetails.message - The received message to display. |
||||
* @param {string} messageDetails.messageType - The kind of message, such as |
||||
* "error" or "local" or "remote". |
||||
* @param {string} messageDetails.timestamp - A timestamp to display for when |
||||
* the message was received. |
||||
* @returns {{ |
||||
* type: ADD_MESSAGE, |
||||
* displayName: string, |
||||
* hasRead: boolean, |
||||
* message: string, |
||||
* messageType: string, |
||||
* timestamp: string, |
||||
* userName: string |
||||
* }} |
||||
*/ |
||||
export function addMessage(userName, message, timestamp, hasRead) { |
||||
export function addMessage(messageDetails) { |
||||
return { |
||||
type: ADD_MESSAGE, |
||||
hasRead, |
||||
message, |
||||
timestamp, |
||||
userName |
||||
...messageDetails |
||||
}; |
||||
} |
||||
|
||||
/* eslint-enable max-params */ |
||||
|
||||
/** |
||||
* Sets the last read message cursor to the latest message. |
||||
* Sends a chat message to everyone in the conference. |
||||
* |
||||
* @returns {Function} |
||||
* @param {string} message - The chat message to send out. |
||||
* @returns {{ |
||||
* type: SEND_MESSAGE, |
||||
* message: string |
||||
* }} |
||||
*/ |
||||
export function markAllRead() { |
||||
return (dispatch, getState) => { |
||||
const { messages } = getState()['features/chat']; |
||||
|
||||
dispatch(setLastReadMessage(messages[messages.length - 1])); |
||||
export function sendMessage(message) { |
||||
return { |
||||
type: SEND_MESSAGE, |
||||
message |
||||
}; |
||||
} |
||||
|
||||
/** |
||||
* Updates the last read message cursor to be set at the passed in message. The |
||||
* assumption is that messages will be ordered chronologically. |
||||
* Toggles display of the chat side panel. |
||||
* |
||||
* @param {Object} message - The message from the redux state. |
||||
* @returns {{ |
||||
* type: SET_LAST_READ_MESSAGE, |
||||
* message: Object |
||||
* type: TOGGLE_CHAT |
||||
* }} |
||||
*/ |
||||
export function setLastReadMessage(message) { |
||||
export function toggleChat() { |
||||
return { |
||||
type: SET_LAST_READ_MESSAGE, |
||||
message |
||||
type: TOGGLE_CHAT |
||||
}; |
||||
} |
||||
|
||||
@ -0,0 +1,312 @@ |
||||
// @flow
|
||||
|
||||
import React, { Component } from 'react'; |
||||
import { connect } from 'react-redux'; |
||||
import Transition from 'react-transition-group/Transition'; |
||||
|
||||
import { translate } from '../../base/i18n'; |
||||
import { getLocalParticipant } from '../../base/participants'; |
||||
|
||||
import { toggleChat } from '../actions'; |
||||
|
||||
import ChatInput from './ChatInput'; |
||||
import ChatMessage from './ChatMessage'; |
||||
import DisplayNameForm from './DisplayNameForm'; |
||||
|
||||
/** |
||||
* The type of the React {@code Component} props of {@link Chat}. |
||||
*/ |
||||
type Props = { |
||||
|
||||
/** |
||||
* The JitsiConference instance to send messages to. |
||||
*/ |
||||
_conference: Object, |
||||
|
||||
/** |
||||
* Whether or not chat is displayed. |
||||
*/ |
||||
_isOpen: Boolean, |
||||
|
||||
/** |
||||
* The local participant's ID. |
||||
*/ |
||||
_localUserId: String, |
||||
|
||||
/** |
||||
* All the chat messages in the conference. |
||||
*/ |
||||
_messages: Array<Object>, |
||||
|
||||
/** |
||||
* Whether or not to block chat access with a nickname input form. |
||||
*/ |
||||
_showNamePrompt: boolean, |
||||
|
||||
/** |
||||
* Invoked to change the chat panel status. |
||||
*/ |
||||
dispatch: Dispatch<*> |
||||
}; |
||||
|
||||
/** |
||||
* The type of the React {@code Component} state of {@Chat}. |
||||
*/ |
||||
type State = { |
||||
|
||||
/** |
||||
* User provided nickname when the input text is provided in the view. |
||||
* |
||||
* @type {String} |
||||
*/ |
||||
message: string |
||||
}; |
||||
|
||||
/** |
||||
* React Component for holding the chat feature in a side panel that slides in |
||||
* and out of view. |
||||
* |
||||
* @extends Component |
||||
*/ |
||||
class Chat extends Component<Props, State> { |
||||
|
||||
/** |
||||
* Reference to the HTML element used for typing in a chat message. |
||||
*/ |
||||
_chatInput: ?HTMLElement; |
||||
|
||||
/** |
||||
* Whether or not the {@code Chat} component is off-screen, having finished |
||||
* its hiding animation. |
||||
*/ |
||||
_isExited: boolean; |
||||
|
||||
/** |
||||
* Reference to the HTML element at the end of the list of displayed chat |
||||
* messages. Used for scrolling to the end of the chat messages. |
||||
*/ |
||||
_messagesListEnd: ?HTMLElement; |
||||
|
||||
/** |
||||
* Initializes a new {@code Chat} instance. |
||||
* |
||||
* @param {Object} props - The read-only properties with which the new |
||||
* instance is to be initialized. |
||||
*/ |
||||
constructor(props: Props) { |
||||
super(props); |
||||
|
||||
this._chatInput = null; |
||||
this._isExited = true; |
||||
this._messagesListEnd = null; |
||||
|
||||
// Bind event handlers so they are only bound once for every instance.
|
||||
this._onCloseClick = this._onCloseClick.bind(this); |
||||
this._renderMessage = this._renderMessage.bind(this); |
||||
this._renderPanelContent = this._renderPanelContent.bind(this); |
||||
this._setChatInputRef = this._setChatInputRef.bind(this); |
||||
this._setMessageListEndRef = this._setMessageListEndRef.bind(this); |
||||
} |
||||
|
||||
/** |
||||
* Implements React's {@link Component#componentDidMount()}. |
||||
* |
||||
* @inheritdoc |
||||
*/ |
||||
componentDidMount() { |
||||
this._scrollMessagesToBottom(); |
||||
} |
||||
|
||||
/** |
||||
* Updates chat input focus. |
||||
* |
||||
* @inheritdoc |
||||
*/ |
||||
componentDidUpdate(prevProps) { |
||||
if (this.props._messages !== prevProps._messages) { |
||||
this._scrollMessagesToBottom(); |
||||
|
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Implements React's {@link Component#render()}. |
||||
* |
||||
* @inheritdoc |
||||
* @returns {ReactElement} |
||||
*/ |
||||
render() { |
||||
return ( |
||||
<Transition |
||||
in = { this.props._isOpen } |
||||
timeout = { 500 }> |
||||
{ this._renderPanelContent } |
||||
</Transition> |
||||
); |
||||
} |
||||
|
||||
_onCloseClick: () => void; |
||||
|
||||
/** |
||||
* Callback invoked to hide {@code Chat}. |
||||
* |
||||
* @returns {void} |
||||
*/ |
||||
_onCloseClick() { |
||||
this.props.dispatch(toggleChat()); |
||||
} |
||||
|
||||
/** |
||||
* Returns a React Element for showing chat messages and a form to send new |
||||
* chat messages. |
||||
* |
||||
* @private |
||||
* @returns {ReactElement} |
||||
*/ |
||||
_renderChat() { |
||||
const messages = this.props._messages.map(this._renderMessage); |
||||
|
||||
messages.push(<div |
||||
key = 'end-marker' |
||||
ref = { this._setMessageListEndRef } />); |
||||
|
||||
return ( |
||||
<div |
||||
className = 'sideToolbarContainer__inner' |
||||
id = 'chat_container'> |
||||
<div id = 'chatconversation'> |
||||
{ messages } |
||||
</div> |
||||
<ChatInput getChatInputRef = { this._setChatInputRef } /> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
_renderMessage: (Object) => void; |
||||
|
||||
/** |
||||
* Called by {@code _onSubmitMessage} to create the chat div. |
||||
* |
||||
* @param {string} message - The chat message to display. |
||||
* @param {string} id - The chat message ID to use as a unique key. |
||||
* @returns {Array<ReactElement>} |
||||
*/ |
||||
_renderMessage(message: Object, id: string) { |
||||
return ( |
||||
<ChatMessage |
||||
key = { id } |
||||
message = { message } /> |
||||
); |
||||
} |
||||
|
||||
_renderPanelContent: (string) => React$Node | null; |
||||
|
||||
/** |
||||
* Renders the contents of the chat panel, depending on the current |
||||
* animation state provided by {@code Transition}. |
||||
* |
||||
* @param {string} state - The current display transition state of the |
||||
* {@code Chat} component, as provided by {@code Transition}. |
||||
* @private |
||||
* @returns {ReactElement | null} |
||||
*/ |
||||
_renderPanelContent(state) { |
||||
this._isExited = state === 'exited'; |
||||
|
||||
const { _isOpen, _showNamePrompt } = this.props; |
||||
const ComponentToRender = !_isOpen && state === 'exited' |
||||
? null |
||||
: ( |
||||
<div> |
||||
<div |
||||
className = 'chat-close' |
||||
onClick = { this._onCloseClick }>X</div> |
||||
{ _showNamePrompt |
||||
? <DisplayNameForm /> : this._renderChat() } |
||||
</div> |
||||
); |
||||
let className = ''; |
||||
|
||||
if (_isOpen) { |
||||
className = 'slideInExt'; |
||||
} else if (this._isExited) { |
||||
className = 'invisible'; |
||||
} |
||||
|
||||
return ( |
||||
<div |
||||
className = { className } |
||||
id = 'sideToolbarContainer'> |
||||
{ ComponentToRender } |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
/** |
||||
* Automatically scrolls the displayed chat messages down to the latest. |
||||
* |
||||
* @private |
||||
* @returns {void} |
||||
*/ |
||||
_scrollMessagesToBottom() { |
||||
if (this._messagesListEnd) { |
||||
this._messagesListEnd.scrollIntoView({ |
||||
behavior: this._isExited ? 'auto' : 'smooth' |
||||
}); |
||||
} |
||||
} |
||||
|
||||
_setChatInputRef: (?HTMLElement) => void; |
||||
|
||||
/** |
||||
* Sets a reference to the HTML text input element used for typing in chat |
||||
* messages. |
||||
* |
||||
* @param {Object} chatInput - The input for typing chat messages. |
||||
* @private |
||||
* @returns {void} |
||||
*/ |
||||
_setChatInputRef(chatInput: ?HTMLElement) { |
||||
this._chatInput = chatInput; |
||||
} |
||||
|
||||
_setMessageListEndRef: (?HTMLElement) => void; |
||||
|
||||
/** |
||||
* Sets a reference to the HTML element at the bottom of the message list. |
||||
* |
||||
* @param {Object} messageListEnd - The HTML element. |
||||
* @private |
||||
* @returns {void} |
||||
*/ |
||||
_setMessageListEndRef(messageListEnd: ?HTMLElement) { |
||||
this._messagesListEnd = messageListEnd; |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Maps (parts of) the redux state to {@link Chat} React {@code Component} |
||||
* props. |
||||
* |
||||
* @param {Object} state - The redux store/state. |
||||
* @private |
||||
* @returns {{ |
||||
* _conference: Object, |
||||
* _isOpen: boolean, |
||||
* _messages: Array<Object>, |
||||
* _showNamePrompt: boolean |
||||
* }} |
||||
*/ |
||||
function _mapStateToProps(state) { |
||||
const { isOpen, messages } = state['features/chat']; |
||||
const localParticipant = getLocalParticipant(state); |
||||
|
||||
return { |
||||
_conference: state['features/base/conference'].conference, |
||||
_isOpen: isOpen, |
||||
_messages: messages, |
||||
_showNamePrompt: !localParticipant.name |
||||
}; |
||||
} |
||||
|
||||
export default translate(connect(_mapStateToProps)(Chat)); |
||||
@ -0,0 +1,229 @@ |
||||
// @flow
|
||||
|
||||
import React, { Component } from 'react'; |
||||
import { connect } from 'react-redux'; |
||||
|
||||
import { sendMessage } from '../actions'; |
||||
|
||||
import SmileysPanel from './SmileysPanel'; |
||||
|
||||
/** |
||||
* The type of the React {@code Component} props of {@link ChatInput}. |
||||
*/ |
||||
type Props = { |
||||
|
||||
/** |
||||
* Invoked to send chat messages. |
||||
*/ |
||||
dispatch: Dispatch<*>, |
||||
|
||||
/** |
||||
* Optional callback to get a reference to the chat input element. |
||||
*/ |
||||
getChatInputRef?: Function |
||||
}; |
||||
|
||||
/** |
||||
* The type of the React {@code Component} state of {@link ChatInput}. |
||||
*/ |
||||
type State = { |
||||
|
||||
/** |
||||
* User provided nickname when the input text is provided in the view. |
||||
*/ |
||||
message: string, |
||||
|
||||
/** |
||||
* Whether or not the smiley selector is visible. |
||||
*/ |
||||
showSmileysPanel: boolean |
||||
}; |
||||
|
||||
/** |
||||
* Implements a React Component for drafting and submitting a chat message. |
||||
* |
||||
* @extends Component |
||||
*/ |
||||
class ChatInput extends Component<Props, State> { |
||||
_textArea: ?HTMLTextAreaElement; |
||||
|
||||
state = { |
||||
message: '', |
||||
showSmileysPanel: false |
||||
}; |
||||
|
||||
/** |
||||
* Initializes a new {@code ChatInput} instance. |
||||
* |
||||
* @param {Object} props - The read-only properties with which the new |
||||
* instance is to be initialized. |
||||
*/ |
||||
constructor(props: Props) { |
||||
super(props); |
||||
|
||||
this._textArea = null; |
||||
|
||||
// Bind event handlers so they are only bound once for every instance.
|
||||
this._onDetectSubmit = this._onDetectSubmit.bind(this); |
||||
this._onMessageChange = this._onMessageChange.bind(this); |
||||
this._onSmileySelect = this._onSmileySelect.bind(this); |
||||
this._onToggleSmileysPanel = this._onToggleSmileysPanel.bind(this); |
||||
this._setTextAreaRef = this._setTextAreaRef.bind(this); |
||||
} |
||||
|
||||
/** |
||||
* Implements React's {@link Component#componentDidMount()}. |
||||
* |
||||
* @inheritdoc |
||||
*/ |
||||
componentDidMount() { |
||||
/** |
||||
* HTML Textareas do not support autofocus. Simulate autofocus by |
||||
* manually focusing. |
||||
*/ |
||||
this.focus(); |
||||
} |
||||
|
||||
/** |
||||
* Implements React's {@link Component#render()}. |
||||
* |
||||
* @inheritdoc |
||||
* @returns {ReactElement} |
||||
*/ |
||||
render() { |
||||
const smileysPanelClassName = `${this.state.showSmileysPanel |
||||
? 'show-smileys' : 'hide-smileys'} smileys-panel`;
|
||||
|
||||
return ( |
||||
<div id = 'chat-input' > |
||||
<div className = 'smiley-input'> |
||||
<div id = 'smileysarea'> |
||||
<div id = 'smileys'> |
||||
<img |
||||
onClick = { this._onToggleSmileysPanel } |
||||
src = '../../../../images/smile.svg' /> |
||||
</div> |
||||
</div> |
||||
<div className = { smileysPanelClassName }> |
||||
<SmileysPanel |
||||
onSmileySelect = { this._onSmileySelect } /> |
||||
</div> |
||||
</div> |
||||
<div className = 'usrmsg-form'> |
||||
<textarea |
||||
data-i18n = '[placeholder]chat.messagebox' |
||||
id = 'usermsg' |
||||
onChange = { this._onMessageChange } |
||||
onKeyDown = { this._onDetectSubmit } |
||||
placeholder = { 'Enter Text...' } |
||||
ref = { this._setTextAreaRef } |
||||
value = { this.state.message } /> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
/** |
||||
* Removes cursor focus on this component's text area. |
||||
* |
||||
* @returns {void} |
||||
*/ |
||||
blur() { |
||||
this._textArea && this._textArea.blur(); |
||||
} |
||||
|
||||
/** |
||||
* Place cursor focus on this component's text area. |
||||
* |
||||
* @returns {void} |
||||
*/ |
||||
focus() { |
||||
this._textArea && this._textArea.focus(); |
||||
} |
||||
|
||||
_onDetectSubmit: (Object) => void; |
||||
|
||||
/** |
||||
* Detects if enter has been pressed. If so, submit the message in the chat |
||||
* window. |
||||
* |
||||
* @param {string} event - Keyboard event. |
||||
* @private |
||||
* @returns {void} |
||||
*/ |
||||
_onDetectSubmit(event) { |
||||
if (event.keyCode === 13 |
||||
&& event.shiftKey === false) { |
||||
event.preventDefault(); |
||||
|
||||
this.props.dispatch(sendMessage(this.state.message)); |
||||
|
||||
this.setState({ message: '' }); |
||||
} |
||||
} |
||||
|
||||
_onMessageChange: (Object) => void; |
||||
|
||||
/** |
||||
* Updates the known message the user is drafting. |
||||
* |
||||
* @param {string} event - Keyboard event. |
||||
* @private |
||||
* @returns {void} |
||||
*/ |
||||
_onMessageChange(event) { |
||||
this.setState({ message: event.target.value }); |
||||
} |
||||
|
||||
_onSmileySelect: (string) => void; |
||||
|
||||
/** |
||||
* Appends a selected smileys to the chat message draft. |
||||
* |
||||
* @param {string} smileyText - The value of the smiley to append to the |
||||
* chat message. |
||||
* @private |
||||
* @returns {void} |
||||
*/ |
||||
_onSmileySelect(smileyText) { |
||||
this.setState({ |
||||
message: `${this.state.message} ${smileyText}`, |
||||
showSmileysPanel: false |
||||
}); |
||||
|
||||
this.focus(); |
||||
} |
||||
|
||||
_onToggleSmileysPanel: () => void; |
||||
|
||||
/** |
||||
* Callback invoked to hide or show the smileys selector. |
||||
* |
||||
* @private |
||||
* @returns {void} |
||||
*/ |
||||
_onToggleSmileysPanel() { |
||||
this.setState({ showSmileysPanel: !this.state.showSmileysPanel }); |
||||
|
||||
this.focus(); |
||||
} |
||||
|
||||
_setTextAreaRef: (?HTMLTextAreaElement) => void; |
||||
|
||||
/** |
||||
* Sets the reference to the HTML TextArea. |
||||
* |
||||
* @param {HTMLAudioElement} textAreaElement - The HTML text area element. |
||||
* @private |
||||
* @returns {void} |
||||
*/ |
||||
_setTextAreaRef(textAreaElement: ?HTMLTextAreaElement) { |
||||
this._textArea = textAreaElement; |
||||
|
||||
if (this.props.getChatInputRef) { |
||||
this.props.getChatInputRef(textAreaElement); |
||||
} |
||||
} |
||||
} |
||||
|
||||
export default connect()(ChatInput); |
||||
@ -0,0 +1,114 @@ |
||||
// @flow
|
||||
|
||||
import React, { PureComponent } from 'react'; |
||||
|
||||
import { translate } from '../../base/i18n'; |
||||
|
||||
import { processReplacements } from '../replacement'; |
||||
|
||||
/** |
||||
* The type of the React {@code Component} props of {@link Chat}. |
||||
*/ |
||||
type Props = { |
||||
|
||||
/** |
||||
* The redux representation of a chat message. |
||||
*/ |
||||
message: Object, |
||||
|
||||
/** |
||||
* Invoked to receive translated strings. |
||||
*/ |
||||
t: Function |
||||
}; |
||||
|
||||
/** |
||||
* Displays as passed in chat message. |
||||
* |
||||
* @extends Component |
||||
*/ |
||||
class ChatMessage extends PureComponent<Props> { |
||||
/** |
||||
* Implements React's {@link Component#render()}. |
||||
* |
||||
* @inheritdoc |
||||
* @returns {ReactElement} |
||||
*/ |
||||
render() { |
||||
const { message } = this.props; |
||||
let messageTypeClassname = ''; |
||||
let messagetoDisplay = message.message; |
||||
|
||||
switch (message.messageType) { |
||||
case 'local': |
||||
messageTypeClassname = 'localuser'; |
||||
|
||||
break; |
||||
case 'error': |
||||
messageTypeClassname = 'error'; |
||||
messagetoDisplay = this.props.t('chat.error', { |
||||
error: message.error, |
||||
originalText: messagetoDisplay |
||||
}); |
||||
break; |
||||
default: |
||||
messageTypeClassname = 'remoteuser'; |
||||
} |
||||
|
||||
// replace links and smileys
|
||||
// Strophe already escapes special symbols on sending,
|
||||
// so we escape here only tags to avoid double &
|
||||
const escMessage = messagetoDisplay.replace(/</g, '<') |
||||
.replace(/>/g, '>') |
||||
.replace(/\n/g, '<br/>'); |
||||
const messageWithHTML = processReplacements(escMessage); |
||||
|
||||
return ( |
||||
<div className = { `chatmessage ${messageTypeClassname}` }> |
||||
<img |
||||
className = 'chatArrow' |
||||
src = '../../../../images/chatArrow.svg' /> |
||||
<div className = 'display-name'> |
||||
{ message.displayName } |
||||
</div> |
||||
<div className = { 'timestamp' }> |
||||
{ ChatMessage.formatTimestamp(message.timestamp) } |
||||
</div> |
||||
<div |
||||
className = 'usermessage' |
||||
// eslint-disable-next-line react/no-danger
|
||||
dangerouslySetInnerHTML = {{ __html: messageWithHTML }} /> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
/** |
||||
* Returns a timestamp formatted for display. |
||||
* |
||||
* @param {number} timestamp - The timestamp for the chat message. |
||||
* @private |
||||
* @returns {string} |
||||
*/ |
||||
static formatTimestamp(timestamp) { |
||||
const now = new Date(timestamp); |
||||
let hour = now.getHours(); |
||||
let minute = now.getMinutes(); |
||||
let second = now.getSeconds(); |
||||
|
||||
if (hour.toString().length === 1) { |
||||
hour = `0${hour}`; |
||||
} |
||||
|
||||
if (minute.toString().length === 1) { |
||||
minute = `0${minute}`; |
||||
} |
||||
|
||||
if (second.toString().length === 1) { |
||||
second = `0${second}`; |
||||
} |
||||
|
||||
return `${hour}:${minute}:${second}`; |
||||
} |
||||
} |
||||
|
||||
export default translate(ChatMessage, { wait: false }); |
||||
@ -0,0 +1,142 @@ |
||||
// @flow
|
||||
|
||||
import { FieldTextStateless } from '@atlaskit/field-text'; |
||||
import React, { Component } from 'react'; |
||||
import { connect } from 'react-redux'; |
||||
|
||||
import { translate } from '../../base/i18n'; |
||||
import { |
||||
getLocalParticipant, |
||||
participantDisplayNameChanged |
||||
} from '../../base/participants'; |
||||
|
||||
/** |
||||
* The type of the React {@code Component} props of {@DisplayNameForm}. |
||||
*/ |
||||
type Props = { |
||||
|
||||
/** |
||||
* The ID of the local participant. |
||||
*/ |
||||
_localParticipantId: string, |
||||
|
||||
/** |
||||
* Invoked to set the local participant display name. |
||||
*/ |
||||
dispatch: Dispatch<*>, |
||||
|
||||
/** |
||||
* Invoked to obtain translated strings. |
||||
*/ |
||||
t: Function |
||||
}; |
||||
|
||||
/** |
||||
* The type of the React {@code Component} state of {@DisplayNameForm}. |
||||
*/ |
||||
type State = { |
||||
|
||||
/** |
||||
* User provided display name when the input text is provided in the view. |
||||
*/ |
||||
displayName: string |
||||
}; |
||||
|
||||
/** |
||||
* React Component for requesting the local participant to set a display name. |
||||
* |
||||
* @extends Component |
||||
*/ |
||||
class DisplayNameForm extends Component<Props, State> { |
||||
state = { |
||||
displayName: '' |
||||
}; |
||||
|
||||
/** |
||||
* Initializes a new {@code DisplayNameForm} instance. |
||||
* |
||||
* @param {Object} props - The read-only properties with which the new |
||||
* instance is to be initialized. |
||||
*/ |
||||
constructor(props: Props) { |
||||
super(props); |
||||
|
||||
// Bind event handlers so they are only bound once for every instance.
|
||||
this._onDisplayNameChange = this._onDisplayNameChange.bind(this); |
||||
this._onSubmit = this._onSubmit.bind(this); |
||||
} |
||||
|
||||
/** |
||||
* Implements React's {@link Component#render()}. |
||||
* |
||||
* @inheritdoc |
||||
* @returns {ReactElement} |
||||
*/ |
||||
render() { |
||||
const { t } = this.props; |
||||
|
||||
return ( |
||||
<div id = 'nickname'> |
||||
<span>{ this.props.t('chat.nickname.title') }</span> |
||||
<form onSubmit = { this._onSubmit }> |
||||
<FieldTextStateless |
||||
autoFocus = { true } |
||||
id = 'nickinput' |
||||
onChange = { this._onDisplayNameChange } |
||||
placeholder = { t('chat.nickname.popover') } |
||||
type = 'text' |
||||
value = { this.state.displayName } /> |
||||
</form> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
_onDisplayNameChange: (Object) => void; |
||||
|
||||
/** |
||||
* Dispatches an action update the entered display name. |
||||
* |
||||
* @param {event} event - Keyboard event. |
||||
* @private |
||||
* @returns {void} |
||||
*/ |
||||
_onDisplayNameChange(event: Object) { |
||||
this.setState({ displayName: event.target.value }); |
||||
} |
||||
|
||||
_onSubmit: (Object) => void; |
||||
|
||||
/** |
||||
* Dispatches an action to hit enter to change your display name. |
||||
* |
||||
* @param {event} event - Keyboard event |
||||
* that will check if user has pushed the enter key. |
||||
* @private |
||||
* @returns {void} |
||||
*/ |
||||
_onSubmit(event: Object) { |
||||
event.preventDefault(); |
||||
|
||||
this.props.dispatch(participantDisplayNameChanged( |
||||
this.props._localParticipantId, |
||||
this.state.displayName)); |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Maps (parts of) the Redux state to the associated props for the |
||||
* {@code DisplayNameForm} component. |
||||
* |
||||
* @param {Object} state - The Redux state. |
||||
* @private |
||||
* @returns {{ |
||||
* _localParticipantId: string |
||||
* }} |
||||
*/ |
||||
function _mapStateToProps(state) { |
||||
return { |
||||
_localParticipantId: getLocalParticipant(state).id |
||||
}; |
||||
} |
||||
|
||||
export default translate(connect(_mapStateToProps)(DisplayNameForm)); |
||||
@ -0,0 +1,69 @@ |
||||
// @flow
|
||||
|
||||
import React, { PureComponent } from 'react'; |
||||
|
||||
import { smileys } from '../smileys'; |
||||
|
||||
/** |
||||
* The type of the React {@code Component} props of {@link SmileysPanel}. |
||||
*/ |
||||
type Props = { |
||||
|
||||
/** |
||||
* Callback to invoke when a smiley is selected. The smiley will be passed |
||||
* back. |
||||
*/ |
||||
onSmileySelect: Function |
||||
}; |
||||
|
||||
/** |
||||
* Implements a React Component showing smileys that can be be shown in chat. |
||||
* |
||||
* @extends Component |
||||
*/ |
||||
class SmileysPanel extends PureComponent<Props> { |
||||
/** |
||||
* Implements React's {@link Component#render()}. |
||||
* |
||||
* @inheritdoc |
||||
* @returns {ReactElement} |
||||
*/ |
||||
render() { |
||||
const smileyItems = Object.keys(smileys).map(smileyKey => { |
||||
const onSelectFunction = this._getOnSmileySelectCallback(smileyKey); |
||||
|
||||
return ( |
||||
<div |
||||
className = 'smileyContainer' |
||||
id = { smileyKey } |
||||
key = { smileyKey }> |
||||
<img |
||||
className = 'smiley' |
||||
id = { smileyKey } |
||||
onClick = { onSelectFunction } |
||||
src = { `images/smileys/${smileyKey}.svg` } /> |
||||
</div> |
||||
); |
||||
}); |
||||
|
||||
return ( |
||||
<div id = 'smileysContainer'> |
||||
{ smileyItems } |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
/** |
||||
* Helper method to bind a smiley's click handler. |
||||
* |
||||
* @param {string} smileyKey - The key from the {@link smileys} object |
||||
* that should be added to the chat message. |
||||
* @private |
||||
* @returns {Function} |
||||
*/ |
||||
_getOnSmileySelectCallback(smileyKey) { |
||||
return () => this.props.onSmileySelect(smileys[smileyKey]); |
||||
} |
||||
} |
||||
|
||||
export default SmileysPanel; |
||||
@ -1 +1,2 @@ |
||||
export Chat from './Chat'; |
||||
export ChatCounter from './ChatCounter'; |
||||
|
||||
@ -1,29 +0,0 @@ |
||||
/** |
||||
* The type of the action which signals to close the side panel. |
||||
* |
||||
* { |
||||
* type: CLOSE_PANEL, |
||||
* } |
||||
*/ |
||||
export const CLOSE_PANEL = Symbol('CLOSE_PANEL'); |
||||
|
||||
/** |
||||
* The type of the action which to set the name of the current panel being |
||||
* displayed in the side panel. |
||||
* |
||||
* { |
||||
* type: SET_VISIBLE_PANEL, |
||||
* current: string|null |
||||
* } |
||||
*/ |
||||
export const SET_VISIBLE_PANEL = Symbol('SET_VISIBLE_PANEL'); |
||||
|
||||
/** |
||||
* The type of the action which signals to toggle the display of chat in the |
||||
* side panel. |
||||
* |
||||
* { |
||||
* type: TOGGLE_CHAT |
||||
* } |
||||
*/ |
||||
export const TOGGLE_CHAT = Symbol('TOGGLE_CHAT'); |
||||
@ -1,49 +0,0 @@ |
||||
import { |
||||
CLOSE_PANEL, |
||||
SET_VISIBLE_PANEL, |
||||
TOGGLE_CHAT |
||||
} from './actionTypes'; |
||||
|
||||
/** |
||||
* Dispatches an action to close the currently displayed side panel. |
||||
* |
||||
* @returns {Function} |
||||
*/ |
||||
export function closePanel() { |
||||
return (dispatch, getState) => { |
||||
dispatch({ |
||||
type: CLOSE_PANEL, |
||||
current: getState()['features/side-panel'].current |
||||
}); |
||||
}; |
||||
} |
||||
|
||||
/** |
||||
* Updates the redux store with the currently displayed side panel. |
||||
* |
||||
* @param {string|null} name - The name of the side panel being displayed. Null |
||||
* (or falsy) should be set if no side panel is being displayed. |
||||
* @returns {{ |
||||
* type: SET_VISIBLE_PANEL, |
||||
* current: string |
||||
* }} |
||||
*/ |
||||
export function setVisiblePanel(name = null) { |
||||
return { |
||||
type: SET_VISIBLE_PANEL, |
||||
current: name |
||||
}; |
||||
} |
||||
|
||||
/** |
||||
* Toggles display of the chat side panel. |
||||
* |
||||
* @returns {{ |
||||
* type: TOGGLE_CHAT |
||||
* }} |
||||
*/ |
||||
export function toggleChat() { |
||||
return { |
||||
type: TOGGLE_CHAT |
||||
}; |
||||
} |
||||
@ -1,62 +0,0 @@ |
||||
import PropTypes from 'prop-types'; |
||||
import React, { Component } from 'react'; |
||||
import { connect } from 'react-redux'; |
||||
|
||||
import { closePanel } from '../actions'; |
||||
|
||||
/** |
||||
* React Component for holding features in a side panel that slides in and out. |
||||
* |
||||
* @extends Component |
||||
*/ |
||||
class SidePanel extends Component { |
||||
/** |
||||
* {@code SidePanel} component's property types. |
||||
* |
||||
* @static |
||||
*/ |
||||
static propTypes = { |
||||
dispatch: PropTypes.func |
||||
}; |
||||
|
||||
/** |
||||
* Initializes a new {@code SidePanel} instance. |
||||
* |
||||
* @param {Object} props - The read-only properties with which the new |
||||
* instance is to be initialized. |
||||
*/ |
||||
constructor(props) { |
||||
super(props); |
||||
|
||||
this._onCloseClick = this._onCloseClick.bind(this); |
||||
} |
||||
|
||||
/** |
||||
* Implements React's {@link Component#render()}. |
||||
* |
||||
* @inheritdoc |
||||
* @returns {ReactElement} |
||||
*/ |
||||
render() { |
||||
return ( |
||||
<div id = 'sideToolbarContainer'> |
||||
<div |
||||
className = 'side-toolbar-close' |
||||
onClick = { this._onCloseClick }> |
||||
X |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
/** |
||||
* Callback invoked to hide {@code SidePanel}. |
||||
* |
||||
* @returns {void} |
||||
*/ |
||||
_onCloseClick() { |
||||
this.props.dispatch(closePanel()); |
||||
} |
||||
} |
||||
|
||||
export default connect()(SidePanel); |
||||
@ -1 +0,0 @@ |
||||
export { default as SidePanel } from './SidePanel'; |
||||
@ -1,6 +0,0 @@ |
||||
export * from './actions'; |
||||
export * from './actionTypes'; |
||||
export * from './components'; |
||||
|
||||
import './middleware'; |
||||
import './reducer'; |
||||
@ -1,32 +0,0 @@ |
||||
// @flow
|
||||
|
||||
import { MiddlewareRegistry } from '../base/redux'; |
||||
|
||||
import { CLOSE_PANEL, TOGGLE_CHAT } from './actionTypes'; |
||||
|
||||
declare var APP: Object; |
||||
|
||||
/** |
||||
* Middleware that catches actions related to the non-reactified web side panel. |
||||
* |
||||
* @param {Store} store - Redux store. |
||||
* @returns {Function} |
||||
*/ |
||||
// eslint-disable-next-line no-unused-vars
|
||||
MiddlewareRegistry.register(store => next => action => { |
||||
if (typeof APP !== 'object') { |
||||
return next(action); |
||||
} |
||||
|
||||
switch (action.type) { |
||||
case CLOSE_PANEL: |
||||
APP.UI.toggleSidePanel(action.current); |
||||
break; |
||||
|
||||
case TOGGLE_CHAT: |
||||
APP.UI.toggleChat(); |
||||
break; |
||||
} |
||||
|
||||
return next(action); |
||||
}); |
||||
@ -1,18 +0,0 @@ |
||||
import { ReducerRegistry } from '../base/redux'; |
||||
|
||||
import { SET_VISIBLE_PANEL } from './actionTypes'; |
||||
|
||||
/** |
||||
* Reduces the Redux actions of the feature features/side-panel. |
||||
*/ |
||||
ReducerRegistry.register('features/side-panel', (state = {}, action) => { |
||||
switch (action.type) { |
||||
case SET_VISIBLE_PANEL: |
||||
return { |
||||
...state, |
||||
current: action.current |
||||
}; |
||||
} |
||||
|
||||
return state; |
||||
}); |
||||
Loading…
Reference in new issue