Feature/JS-5339: Voice messages

package.json

@@ -96,6 +96,7 @@
 		"@viz-js/viz": "^3.2.4",
 		"amplitude-js": "^5.11.0",
 		"array-move": "^2.2.2",
+		"audio-react-recorder": "^1.0.5",
 		"blueimp-load-image": "^2.31.0",
 		"copy-webpack-plugin": "^12.0.2",
 		"d3": "^7.0.1",

src/json/constant.ts

@@ -73,7 +73,7 @@ export default {
 		image:			 [ 'jpg', 'jpeg', 'png', 'gif', 'svg', 'webp' ],
 		video:			 [ 'mp4', 'm4v', 'mov' ],
 		cover:			 [ 'jpg', 'jpeg', 'png', 'gif', 'webp' ],
-		audio:			 [ 'mp3', 'm4a', 'flac', 'ogg', 'wav' ],
+		audio:			 [ 'mp3', 'm4a', 'flac', 'ogg', 'wav', 'wave', 'x-wav' ],
 		pdf:			 [ 'pdf' ],
 		import: {
 			1:			 [ 'zip', 'md' ],

src/json/text.json

@@ -684,6 +684,7 @@
 	"blockChatButtonObject": "Add object",
 	"blockChatButtonEmoji": "Add emoji",
 	"blockChatButtonMention": "Add mention",
+	"blockChatButtonVoice": "Record voice message",
 	"blockChatNewMessages": "New messages",
 	"blockChatMessageEdited": "(edited)",
 	"blockChatEditing": "Editing message",

src/scss/block/chat/form.scss

@@ -75,6 +75,8 @@
 		.icon.text { background-image: url('~img/icon/chat/buttons/text.svg'); }
 		.icon.emoji { background-image: url('~img/icon/chat/buttons/emoji.svg'); }
 		.icon.mention { background-image: url('~img/icon/chat/buttons/mention.svg'); }
+		.icon.voice { background-image: url('~img/icon/chat/buttons/voice0.svg'); background-size: 20px 20px; }
+		.icon.isActive.voice { background-image: url('~img/icon/chat/buttons/voice1.svg'); background-color: var(--color-red) !important; }
 
 		/* Text buttons */
 		.icon.bold { background-image: url('~img/icon/menu/action/mark/bold0.svg'); }
@@ -111,6 +113,8 @@
 			.inner.textColor-teal { background: var(--color-teal); }
 			.inner.textColor-lime { background: var(--color-lime); }
 		}
+
+		.audio-react-recorder { position: absolute; width: 0px; height: 0px; opacity: 0; overflow: hidden; }
 	}
 
 	.icon.send { position: absolute; bottom: 10px; right: 16px; width: 20px; height: 20px; background: url('~img/icon/chat/buttons/send.svg'); }

src/ts/component/block/chat/attachment/index.tsx

@@ -52,6 +52,15 @@ const ChatAttachment = observer(class ChatAttachment extends React.Component<Pro
 							content = this.renderImage();
 							break;
 						};
+						case 'audio': {
+							if (!J.Constant.fileExtension.audio.includes(t2)) {
+								break;
+							};
+
+							cn.push('isAudio');
+							content = this.renderAudio();
+							break;
+						};
 					};
 				};
 				break;
@@ -197,8 +206,9 @@ const ChatAttachment = observer(class ChatAttachment extends React.Component<Pro
 
 	renderAudio () {
 		const { object } = this.props;
+		const src = object.src || S.Common.fileUrl(object.id);
 		const playlist = [ 
-			{ name: U.File.name(object), src: S.Common.fileUrl(object.id) },
+			{ name: U.File.name(object), src },
 		];
 
 		return <MediaAudio playlist={playlist} />;
@@ -232,4 +242,4 @@ const ChatAttachment = observer(class ChatAttachment extends React.Component<Pro
 
 });
 
-export default ChatAttachment;
+export default ChatAttachment;

src/ts/component/block/chat/buttons.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { observer } from 'mobx-react';
 import { Icon } from 'Component';
 import { Action, I, J, keyboard, Mark, S, translate, U } from 'Lib';
+import AudioReactRecorder, { RecordState } from 'audio-react-recorder';
 
 interface Props extends I.BlockComponent {
 	blockId: string;
@@ -17,17 +18,21 @@ interface Props extends I.BlockComponent {
 	getObjectFromPath: (path: string) => void;
 	addAttachments: (attachments: any[], callBack?: () => void) => void;
 	removeBookmark: (url: string) => void;
+	onVoice: (audio: any) => void;
 };
 
 interface State {
 	buttons: any[];
+	recordState: any;
 };
 
 const ChatButtons = observer(class ChatButtons extends React.Component<Props, State> {
 
 	state = {
 		buttons: [],
+		recordState: null,
 	};
+	isRecording: boolean = false;
 
 	constructor (props: Props) {
 		super(props);
@@ -36,18 +41,21 @@ const ChatButtons = observer(class ChatButtons extends React.Component<Props, St
 		this.onTextButton = this.onTextButton.bind(this);
 		this.onChatButton = this.onChatButton.bind(this);
 		this.onAttachment = this.onAttachment.bind(this);
+		this.onVoice = this.onVoice.bind(this);
+		this.onRecordStop = this.onRecordStop.bind(this);
 	};
 
 	render () {
 		const { block } = this.props;
-		const { buttons } = this.state;
+		const { buttons, recordState } = this.state;
 
 		return (
 			<div className="buttons">
 				{buttons.map((item: any, i: number) => {
 					const cn = [ item.icon, 'withBackground' ];
+					const isRecording = (item.type == I.ChatButton.Voice) && this.isRecording;
 
-					if (item.isActive) {
+					if (item.isActive || isRecording) {
 						cn.push('isActive');
 					};
 
@@ -64,6 +72,8 @@ const ChatButtons = observer(class ChatButtons extends React.Component<Props, St
 						/>
 					);
 				})}
+
+				<AudioReactRecorder type={'audio/mp3'} state={recordState} onStop={this.onRecordStop} />
 			</div>
 		);
 	};
@@ -109,6 +119,13 @@ const ChatButtons = observer(class ChatButtons extends React.Component<Props, St
 				onMention();
 				break;
 			};
+
+			case I.ChatButton.Voice: {
+				this.isRecording = !this.isRecording;
+				this.onVoice();
+				this.forceUpdate();
+				break;
+			};
 		};
 	};
 
@@ -192,6 +209,7 @@ const ChatButtons = observer(class ChatButtons extends React.Component<Props, St
 			{ type: I.ChatButton.Object, icon: 'plus', name: translate('blockChatButtonObject'), caption: `${cmd} + A` },
 			{ type: I.ChatButton.Emoji, icon: 'emoji', name: translate('blockChatButtonEmoji'), caption: `${cmd} + E` },
 			{ type: I.ChatButton.Mention, icon: 'mention', name: translate('blockChatButtonMention'), caption: `${cmd} + M` },
+			{ type: I.ChatButton.Voice, icon: 'voice', name: translate('blockChatButtonVoice') },
 		];
 	};
 
@@ -311,6 +329,14 @@ const ChatButtons = observer(class ChatButtons extends React.Component<Props, St
 			});
 		})
 	};
+
+	onVoice () {
+		this.setState({ recordState: this.isRecording ? RecordState.START : RecordState.STOP });
+	};
+
+	onRecordStop (audio) {
+		this.props.onVoice(audio);
+	};
 });
 
 export default ChatButtons;

src/ts/component/block/chat/form.tsx

@@ -71,6 +71,7 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> {
 		this.removeBookmark = this.removeBookmark.bind(this);
 		this.getMarksAndRange = this.getMarksAndRange.bind(this);
 		this.getObjectFromPath = this.getObjectFromPath.bind(this);
+		this.onVoice = this.onVoice.bind(this);
 	};
 
 	render () {
@@ -187,6 +188,7 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> {
 							addAttachments={this.addAttachments}
 							onMenuClose={this.onMenuClose}
 							removeBookmark={this.removeBookmark}
+							onVoice={this.onVoice}
 						/>
 					) : ''}
 
@@ -430,9 +432,7 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> {
 		const cb = e.clipboardData || e.originalEvent.clipboardData;
 		const text = U.Common.normalizeLineEndings(String(cb.getData('text/plain') || ''));
 		const electron = U.Common.getElectron();
-		const list = U.Common.getDataTransferFiles((e.clipboardData || e.originalEvent.clipboardData).items).map((it: File) => this.getObjectFromFile(it)).filter(it => {
-			return !electron.isDirectory(it.path);
-		});
+		const list = U.Common.getDataTransferFiles((e.clipboardData || e.originalEvent.clipboardData).items).map((it: File) => this.getObjectFromFile(it));
 
 		let value = this.getTextValue();
 		let url = U.Common.matchUrl(text);
@@ -746,6 +746,22 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> {
 		});
 	};
 
+	onVoice (audio) {
+		const { blob } = audio;
+		const ext = blob.type.split('/')[1];
+		const file = new File([ blob ], `Voice Message.${ext}`, { type: blob.type });
+
+		U.Common.saveClipboardFiles([ file ], {}, (data) => {
+			if (!data.files || !data.files.length) {
+				return;
+			};
+
+			const obj = this.getObjectFromPath(data.files[0].path);
+
+			this.addAttachments([ obj ]);
+		});
+	};
+
 	getMarksAndRange (): any {
 		return { marks: this.marks, range: this.range };
 	};

src/ts/interface/block/chat.ts

@@ -5,6 +5,7 @@ export enum ChatButton {
 	Text 		 = 1,
 	Emoji 		 = 2,
 	Mention 	 = 3,
+	Voice		 = 4,
 };
 
 export enum AttachmentType {
@@ -40,4 +41,4 @@ export interface ChatMessageAttachment {
 	type: AttachmentType;
 };
 
-export interface BlockChat extends I.Block {};
+export interface BlockChat extends I.Block {};