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