|
|
@ -36,8 +36,8 @@ interface State {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export class SessionCompositionBox extends React.Component<Props, State> {
|
|
|
|
export class SessionCompositionBox extends React.Component<Props, State> {
|
|
|
|
private textarea: React.RefObject<HTMLTextAreaElement>;
|
|
|
|
private readonly textarea: React.RefObject<HTMLTextAreaElement>;
|
|
|
|
private fileInput: React.RefObject<HTMLInputElement>;
|
|
|
|
private readonly fileInput: React.RefObject<HTMLInputElement>;
|
|
|
|
private emojiPanel: any;
|
|
|
|
private emojiPanel: any;
|
|
|
|
|
|
|
|
|
|
|
|
constructor(props: any) {
|
|
|
|
constructor(props: any) {
|
|
|
@ -84,7 +84,7 @@ export class SessionCompositionBox extends React.Component<Props, State> {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
public async componentWillMount(){
|
|
|
|
public async componentWillMount(){
|
|
|
|
const mediaSetting = await window.getMediaPermissions();
|
|
|
|
const mediaSetting = await window.getSettingValue('media-permissions');
|
|
|
|
this.setState({mediaSetting});
|
|
|
|
this.setState({mediaSetting});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
@ -126,7 +126,7 @@ export class SessionCompositionBox extends React.Component<Props, State> {
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
public toggleEmojiPanel() {
|
|
|
|
private toggleEmojiPanel() {
|
|
|
|
if (this.state.showEmojiPanel) {
|
|
|
|
if (this.state.showEmojiPanel) {
|
|
|
|
this.hideEmojiPanel();
|
|
|
|
this.hideEmojiPanel();
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
@ -234,10 +234,12 @@ export class SessionCompositionBox extends React.Component<Props, State> {
|
|
|
|
contentType: MIME.AUDIO_WEBM,
|
|
|
|
contentType: MIME.AUDIO_WEBM,
|
|
|
|
size: file.size,
|
|
|
|
size: file.size,
|
|
|
|
data: fileBuffer,
|
|
|
|
data: fileBuffer,
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// Push if size is nonzero
|
|
|
|
// Push if size is nonzero
|
|
|
|
attachment.data.byteLength && attachments.push(attachment);
|
|
|
|
if (attachment.data.byteLength) {
|
|
|
|
|
|
|
|
attachments.push(attachment);
|
|
|
|
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
this.setState({attachments});
|
|
|
|
this.setState({attachments});
|
|
|
@ -254,14 +256,18 @@ export class SessionCompositionBox extends React.Component<Props, State> {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
private onSendMessage(){
|
|
|
|
private onSendMessage() {
|
|
|
|
const messageInput = this.textarea.current;
|
|
|
|
const messageInput = this.textarea.current;
|
|
|
|
if (!messageInput) return;
|
|
|
|
if (!messageInput) {
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Verify message length
|
|
|
|
// Verify message length
|
|
|
|
const messagePlaintext = messageInput.value;
|
|
|
|
const messagePlaintext = messageInput.value;
|
|
|
|
const msgLen = messagePlaintext.length;
|
|
|
|
const msgLen = messagePlaintext.length;
|
|
|
|
if (msgLen === 0 || msgLen > window.CONSTANTS.MAX_MESSAGE_BODY_LENGTH) return;
|
|
|
|
if (msgLen === 0 || msgLen > window.CONSTANTS.MAX_MESSAGE_BODY_LENGTH) {
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// handle Attachments
|
|
|
|
// handle Attachments
|
|
|
@ -283,7 +289,7 @@ export class SessionCompositionBox extends React.Component<Props, State> {
|
|
|
|
undefined,
|
|
|
|
undefined,
|
|
|
|
undefined,
|
|
|
|
undefined,
|
|
|
|
null,
|
|
|
|
null,
|
|
|
|
{},
|
|
|
|
{}
|
|
|
|
).then(() => {
|
|
|
|
).then(() => {
|
|
|
|
// Message sending sucess
|
|
|
|
// Message sending sucess
|
|
|
|
this.props.onMessageSuccess();
|
|
|
|
this.props.onMessageSuccess();
|
|
|
@ -302,7 +308,9 @@ export class SessionCompositionBox extends React.Component<Props, State> {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
private async sendVoiceMessage(audioBlob: Blob) {
|
|
|
|
private async sendVoiceMessage(audioBlob: Blob) {
|
|
|
|
if (!this.state.showRecordingView) return;
|
|
|
|
if (!this.state.showRecordingView) {
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const fileBuffer = await new Response(audioBlob).arrayBuffer();
|
|
|
|
const fileBuffer = await new Response(audioBlob).arrayBuffer();
|
|
|
|
|
|
|
|
|
|
|
@ -322,7 +330,7 @@ export class SessionCompositionBox extends React.Component<Props, State> {
|
|
|
|
);
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
if (messageSuccess) {
|
|
|
|
if (messageSuccess) {
|
|
|
|
alert('MESSAGE VOICE SUCCESS');
|
|
|
|
// success!
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
console.log(`[compositionbox] Sending voice message:`, audioBlob);
|
|
|
|
console.log(`[compositionbox] Sending voice message:`, audioBlob);
|
|
|
@ -331,16 +339,17 @@ export class SessionCompositionBox extends React.Component<Props, State> {
|
|
|
|
this.onExitVoiceNoteView();
|
|
|
|
this.onExitVoiceNoteView();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
private onLoadVoiceNoteView(){
|
|
|
|
private onLoadVoiceNoteView() {
|
|
|
|
// Do stuff for component, then run callback to SessionConversation
|
|
|
|
// Do stuff for component, then run callback to SessionConversation
|
|
|
|
const {mediaSetting} = this.state;
|
|
|
|
const {mediaSetting} = this.state;
|
|
|
|
|
|
|
|
|
|
|
|
if (mediaSetting){
|
|
|
|
if (mediaSetting) {
|
|
|
|
this.setState({
|
|
|
|
this.setState({
|
|
|
|
showRecordingView: true,
|
|
|
|
showRecordingView: true,
|
|
|
|
showEmojiPanel: false,
|
|
|
|
showEmojiPanel: false,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
this.props.onLoadVoiceNoteView();
|
|
|
|
this.props.onLoadVoiceNoteView();
|
|
|
|
|
|
|
|
|
|
|
|
return;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
@ -359,7 +368,7 @@ export class SessionCompositionBox extends React.Component<Props, State> {
|
|
|
|
this.props.onExitVoiceNoteView();
|
|
|
|
this.props.onExitVoiceNoteView();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
private onDrop(){
|
|
|
|
private onDrop() {
|
|
|
|
// On drop attachments!
|
|
|
|
// On drop attachments!
|
|
|
|
// this.textarea.current?.ondrop;
|
|
|
|
// this.textarea.current?.ondrop;
|
|
|
|
// Look into react-dropzone
|
|
|
|
// Look into react-dropzone
|
|
|
@ -371,7 +380,9 @@ export class SessionCompositionBox extends React.Component<Props, State> {
|
|
|
|
|
|
|
|
|
|
|
|
private onEmojiClick({native}: any) {
|
|
|
|
private onEmojiClick({native}: any) {
|
|
|
|
const messageBox = this.textarea.current;
|
|
|
|
const messageBox = this.textarea.current;
|
|
|
|
if (!messageBox) return;
|
|
|
|
if (!messageBox) {
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const { message } = this.state;
|
|
|
|
const { message } = this.state;
|
|
|
|
const currentSelectionStart = Number(messageBox.selectionStart);
|
|
|
|
const currentSelectionStart = Number(messageBox.selectionStart);
|
|
|
|