Microphone
Vincent
5 years ago
parent
3055e2345c
commit
ab414ca10e
@ -1,132 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
|
|
||||||
import TextareaAutosize from 'react-autosize-textarea';
|
|
||||||
import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
|
|
||||||
import { SessionEmojiPanel } from './SessionEmojiPanel';
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
placeholder?: string;
|
|
||||||
sendMessage: any;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface State {
|
|
||||||
message: string;
|
|
||||||
showEmojiPanel: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export class SessionCompositionBox extends React.Component<Props, State> {
|
|
||||||
private textarea: React.RefObject<HTMLTextAreaElement>;
|
|
||||||
private fileInput: React.RefObject<HTMLInputElement>;
|
|
||||||
|
|
||||||
constructor(props: any) {
|
|
||||||
super(props);
|
|
||||||
|
|
||||||
this.state = {
|
|
||||||
message: '',
|
|
||||||
showEmojiPanel: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
this.textarea = React.createRef();
|
|
||||||
this.fileInput = React.createRef();
|
|
||||||
|
|
||||||
this.onKeyUp = this.onKeyUp.bind(this);
|
|
||||||
|
|
||||||
this.onChooseAttachment = this.onChooseAttachment.bind(this);
|
|
||||||
this.toggleEmojiPanel = this.toggleEmojiPanel.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { placeholder } = this.props;
|
|
||||||
const { showEmojiPanel } = this.state;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="composition-container">
|
|
||||||
<SessionIconButton
|
|
||||||
iconType={SessionIconType.CirclePlus}
|
|
||||||
iconSize={SessionIconSize.Large}
|
|
||||||
onClick={this.onChooseAttachment}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<input
|
|
||||||
ref={this.fileInput}
|
|
||||||
type='file'
|
|
||||||
/>
|
|
||||||
|
|
||||||
<SessionIconButton
|
|
||||||
iconType={SessionIconType.Microphone}
|
|
||||||
iconSize={SessionIconSize.Large}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="send-message-input">
|
|
||||||
<TextareaAutosize
|
|
||||||
rows={1}
|
|
||||||
maxRows={3}
|
|
||||||
ref={this.textarea}
|
|
||||||
placeholder={placeholder}
|
|
||||||
maxLength={window.CONSTANTS.MAX_MESSAGE_BODY_LENGTH}
|
|
||||||
onKeyUp={this.onKeyUp}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<SessionIconButton
|
|
||||||
iconType={SessionIconType.Emoji}
|
|
||||||
iconSize={SessionIconSize.Large}
|
|
||||||
onClick={this.toggleEmojiPanel}
|
|
||||||
/>
|
|
||||||
<div className="send-message-button">
|
|
||||||
<SessionIconButton
|
|
||||||
iconType={SessionIconType.Send}
|
|
||||||
iconSize={SessionIconSize.Large}
|
|
||||||
iconColor={'#FFFFFF'}
|
|
||||||
iconRotation={90}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{showEmojiPanel && <SessionEmojiPanel />}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
public toggleEmojiPanel() {
|
|
||||||
this.setState({
|
|
||||||
showEmojiPanel: !this.state.showEmojiPanel,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
private onChooseAttachment() {
|
|
||||||
this.fileInput.current?.click();
|
|
||||||
}
|
|
||||||
|
|
||||||
private onChoseAttachment() {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
private onKeyUp(event: any) {
|
|
||||||
console.log(`[vince][msg] Event: `, event);
|
|
||||||
console.log(`[vince][msg] Key `, event.key);
|
|
||||||
console.log(`[vince][msg] KeyCode `, event.keyCode);
|
|
||||||
console.log(`[vince][msg] AltKey `, event.altKey);
|
|
||||||
console.log(`[vince][msg] Ctrl: `, event.ctrlKey);
|
|
||||||
console.log(`[vince][msg] Shift: `, event.shiftKey);
|
|
||||||
|
|
||||||
if (event.key === 'Enter' && !event.shiftKey) {
|
|
||||||
// If shift, newline. Else send message.
|
|
||||||
event.preventDefault();
|
|
||||||
|
|
||||||
// FIXME VINCE: Get emoiji, attachments, etc
|
|
||||||
const messageBody = this.textarea.current?.value;
|
|
||||||
const attachments = this.fileInput.current?.value;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// this.props.sendMessage(
|
|
||||||
|
|
||||||
// );
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -0,0 +1,164 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import TextareaAutosize from 'react-autosize-textarea';
|
||||||
|
import { SessionIconButton, SessionIconSize, SessionIconType } from '../icon';
|
||||||
|
import { SessionEmojiPanel } from './SessionEmojiPanel';
|
||||||
|
|
||||||
|
import { SessionRecording } from './SessionRecording';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
placeholder?: string;
|
||||||
|
sendMessage: any;
|
||||||
|
onStartedRecording: any;
|
||||||
|
onStoppedRecording: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface State {
|
||||||
|
message: string;
|
||||||
|
isRecording: boolean;
|
||||||
|
showEmojiPanel: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class SessionCompositionBox extends React.Component<Props, State> {
|
||||||
|
private textarea: React.RefObject<HTMLTextAreaElement>;
|
||||||
|
private fileInput: React.RefObject<HTMLInputElement>;
|
||||||
|
|
||||||
|
constructor(props: any) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
message: '',
|
||||||
|
isRecording: true,
|
||||||
|
showEmojiPanel: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
this.textarea = React.createRef();
|
||||||
|
this.fileInput = React.createRef();
|
||||||
|
|
||||||
|
this.onKeyDown = this.onKeyDown.bind(this);
|
||||||
|
|
||||||
|
this.onChooseAttachment = this.onChooseAttachment.bind(this);
|
||||||
|
this.toggleEmojiPanel = this.toggleEmojiPanel.bind(this);
|
||||||
|
|
||||||
|
this.onSendMessage = this.onSendMessage.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
public componentWillReceiveProps(){
|
||||||
|
console.log(`[vince][info] Here are my composition props: `, this.props);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { placeholder } = this.props;
|
||||||
|
const { showEmojiPanel } = this.state;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="composition-container">
|
||||||
|
{ this.state.isRecording ? (
|
||||||
|
<SessionRecording
|
||||||
|
onStoppedRecording={this.props.onStoppedRecording}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<SessionIconButton
|
||||||
|
iconType={SessionIconType.CirclePlus}
|
||||||
|
iconSize={SessionIconSize.Large}
|
||||||
|
onClick={this.onChooseAttachment}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<input
|
||||||
|
className="hidden"
|
||||||
|
multiple={true}
|
||||||
|
ref={this.fileInput}
|
||||||
|
type='file'
|
||||||
|
/>
|
||||||
|
|
||||||
|
<SessionIconButton
|
||||||
|
iconType={SessionIconType.Microphone}
|
||||||
|
iconSize={SessionIconSize.Huge}
|
||||||
|
onClick={this.onStartRecording}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="send-message-input">
|
||||||
|
<TextareaAutosize
|
||||||
|
rows={1}
|
||||||
|
maxRows={3}
|
||||||
|
ref={this.textarea}
|
||||||
|
placeholder={placeholder}
|
||||||
|
maxLength={window.CONSTANTS.MAX_MESSAGE_BODY_LENGTH}
|
||||||
|
onKeyDown={this.onKeyDown}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<SessionIconButton
|
||||||
|
iconType={SessionIconType.Emoji}
|
||||||
|
iconSize={SessionIconSize.Large}
|
||||||
|
onClick={this.toggleEmojiPanel}
|
||||||
|
/>
|
||||||
|
<div className="send-message-button">
|
||||||
|
<SessionIconButton
|
||||||
|
iconType={SessionIconType.Send}
|
||||||
|
iconSize={SessionIconSize.Large}
|
||||||
|
iconColor={'#FFFFFF'}
|
||||||
|
iconRotation={90}
|
||||||
|
onClick={this.onSendMessage}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{showEmojiPanel && <SessionEmojiPanel />}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
public toggleEmojiPanel() {
|
||||||
|
this.setState({
|
||||||
|
showEmojiPanel: !this.state.showEmojiPanel,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
private onChooseAttachment() {
|
||||||
|
this.fileInput.current?.click();
|
||||||
|
}
|
||||||
|
|
||||||
|
private onChoseAttachment() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
private onKeyDown(event: any) {
|
||||||
|
if (event.key === 'Enter' && !event.shiftKey) {
|
||||||
|
// If shift, newline. Else send message.
|
||||||
|
event.preventDefault();
|
||||||
|
this.onSendMessage();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private onSendMessage(){
|
||||||
|
// FIXME VINCE: Get emoiji, attachments, etc
|
||||||
|
const messagePlaintext = this.textarea.current?.value;
|
||||||
|
const attachments = this.fileInput.current?.files;
|
||||||
|
|
||||||
|
console.log(`[vince][msg] Message:`, messagePlaintext);
|
||||||
|
console.log(`[vince][msg] Attachments:`, attachments);
|
||||||
|
|
||||||
|
|
||||||
|
if (false){
|
||||||
|
this.props.sendMessage();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private onStartRecording(){
|
||||||
|
// Do stuff for component, then run callback to SessionConversation
|
||||||
|
|
||||||
|
this.props.onStartedRecording();
|
||||||
|
}
|
||||||
|
|
||||||
|
private onStopRecording() {
|
||||||
|
// Do stuff for component, then run callback to SessionConversation
|
||||||
|
|
||||||
|
this.props.onStoppedRecording();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,147 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import { SessionIconButton, SessionIconSize, SessionIconType } from '../icon';
|
||||||
|
import { SessionButton, SessionButtonType, SessionButtonColor } from '../SessionButton';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
onStoppedRecording: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface State {
|
||||||
|
recordDuration: number;
|
||||||
|
isRecording: boolean;
|
||||||
|
isPaused: boolean;
|
||||||
|
actionHover: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class SessionRecording extends React.Component<Props, State> {
|
||||||
|
|
||||||
|
constructor(props: any) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
recordDuration: 0,
|
||||||
|
isRecording: true,
|
||||||
|
isPaused: false,
|
||||||
|
actionHover: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
this.handleHoverActions = this.handleHoverActions.bind(this);
|
||||||
|
this.handleUnhoverActions = this.handleUnhoverActions.bind(this);
|
||||||
|
|
||||||
|
this.onPlayRecording = this.onPlayRecording.bind(this);
|
||||||
|
this.onStopRecording = this.onStopRecording.bind(this);
|
||||||
|
|
||||||
|
this.onSendVoiceMessage = this.onSendVoiceMessage.bind(this);
|
||||||
|
this.onDeleteVoiceMessage = this.onDeleteVoiceMessage.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
public componentWillReceiveProps(){
|
||||||
|
console.log(`[vince][mic] Here are my composition props: `, this.props);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const actionPause = (this.state.actionHover && this.state.isRecording);
|
||||||
|
const actionPlay = (!this.state.isRecording || this.state.isPaused);
|
||||||
|
const actionDefault = !actionPause && !actionPlay;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="session-recording">
|
||||||
|
<div
|
||||||
|
className="session-recording--actions"
|
||||||
|
onMouseEnter={this.handleHoverActions}
|
||||||
|
onMouseLeave={this.handleUnhoverActions}
|
||||||
|
>
|
||||||
|
{actionPause && (
|
||||||
|
<SessionIconButton
|
||||||
|
iconType={SessionIconType.Pause}
|
||||||
|
iconSize={SessionIconSize.Medium}
|
||||||
|
// FIXME VINCE: Globalise constants for JS Session Colors
|
||||||
|
iconColor={'#FF4538'}
|
||||||
|
onClick={this.onStopRecording}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{actionPlay && (
|
||||||
|
<SessionIconButton
|
||||||
|
iconType={SessionIconType.Play}
|
||||||
|
iconSize={SessionIconSize.Medium}
|
||||||
|
onClick={this.onPlayRecording}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{actionDefault && (
|
||||||
|
<SessionIconButton
|
||||||
|
iconType={SessionIconType.Microphone}
|
||||||
|
iconSize={SessionIconSize.Huge}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div className="send-message-button">
|
||||||
|
<SessionIconButton
|
||||||
|
iconType={SessionIconType.Send}
|
||||||
|
iconSize={SessionIconSize.Large}
|
||||||
|
iconColor={'#FFFFFF'}
|
||||||
|
iconRotation={90}
|
||||||
|
onClick={this.onSendVoiceMessage}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="session-recording--delete">
|
||||||
|
<SessionButton
|
||||||
|
text={window.i18n('delete')}
|
||||||
|
buttonType={SessionButtonType.Brand}
|
||||||
|
buttonColor={SessionButtonColor.DangerAlt}
|
||||||
|
onClick={this.onDeleteVoiceMessage}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private handleHoverActions() {
|
||||||
|
if ((this.state.isRecording) && !this.state.actionHover) {
|
||||||
|
this.setState({
|
||||||
|
actionHover: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
navigator.getUserMedia();
|
||||||
|
}
|
||||||
|
|
||||||
|
private handleUnhoverActions() {
|
||||||
|
if (this.state.isRecording && this.state.actionHover) {
|
||||||
|
this.setState({
|
||||||
|
actionHover: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private onStopRecording() {
|
||||||
|
console.log(`[vince][mic] Stopped recording`);
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
isRecording: false,
|
||||||
|
isPaused: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private onPlayRecording() {
|
||||||
|
console.log(`[vince][mic] Playing recording`);
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
isRecording: false,
|
||||||
|
isPaused: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private onDeleteVoiceMessage() {
|
||||||
|
console.log(`[vince][mic] Deleting voice message`)
|
||||||
|
}
|
||||||
|
|
||||||
|
private onSendVoiceMessage() {
|
||||||
|
console.log(`[vince][mic] Sending voice message`);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue