Chore: improve/media-recorder

apps/meteor/app/theme/client/imports/components/message-box.css

@@ -167,8 +167,7 @@
 
 		&-done,
 		&-cancel,
-		&-timer,
-		&-loading {
+		&-timer {
 			display: none;
 		}
 
@@ -205,12 +204,6 @@
 			}
 		}
 
-		&-loading {
-			cursor: pointer;
-
-			animation: spin 1s linear infinite;
-		}
-
 		&--recording {
 			.rc-message-box__audio-message-mic,
 			.rc-message-box__audio-message-loading {

apps/meteor/app/ui-message/client/messageBox/messageBox.html

@@ -32,7 +32,7 @@
 					{{> Template.dynamic template=customAction.template data=customAction.data }}
 				{{ else }}
 					{{#if canSend}}
-						{{> messageBoxAudioMessage rid=rid tmid=tmid}}
+						{{> AudioMessageRecorder rid=rid tmid=tmid }}
 						<span class="rc-message-box__action-menu js-action-menu" data-desktop aria-haspopup="true" data-qa-id="menu-more-actions">
 							{{#if actions}}
 								<span class="rc-message-box__icon">

apps/meteor/app/ui-message/client/messageBox/messageBox.ts

@@ -25,7 +25,6 @@ import { roomCoordinator } from '../../../../client/lib/rooms/roomCoordinator';
 import './messageBoxActions';
 import './messageBoxReplyPreview.ts';
 import './userActionIndicator.ts';
-import './messageBoxAudioMessage.ts';
 import './messageBox.html';
 
 type MessageBoxTemplateInstance = Blaze.TemplateInstance<{

apps/meteor/app/ui-message/client/messageBox/messageBoxActions.ts

@@ -53,7 +53,7 @@ messageBox.actions.add('Add_files_from', 'Computer', {
 				};
 			});
 
-			fileUpload(filesToUpload, $('.js-input-message', messageBox).get(0) as HTMLTextAreaElement | undefined, { rid, tmid });
+			fileUpload(filesToUpload, $('.js-input-message', messageBox).get(0) as HTMLTextAreaElement, { rid, tmid });
 			$input.remove();
 		});
 

apps/meteor/app/ui/client/index.ts

@@ -22,6 +22,6 @@ export { fileUpload } from './lib/fileUpload';
 export { UserAction, USER_ACTIVITIES } from './lib/UserAction';
 export { KonchatNotification } from './lib/notification';
 export { Login, Button } from './lib/rocket';
-export { AudioRecorder } from './lib/recorderjs/audioRecorder';
+export { AudioRecorder } from './lib/recorderjs/AudioRecorder';
 export { VideoRecorder } from './lib/recorderjs/videoRecorder';
 export * from './lib/userPopoverStatus';

apps/meteor/app/ui/client/lib/fileUpload.ts

@@ -158,7 +158,7 @@ export type FileUploadProp = SingleOrArray<{
 /* @deprecated */
 export const fileUpload = async (
 	f: FileUploadProp,
-	input: HTMLTextAreaElement | undefined,
+	input: HTMLInputElement | ArrayLike<HTMLInputElement> | HTMLTextAreaElement,
 	{
 		rid,
 		tmid,

apps/meteor/app/ui/client/lib/recorderjs/audioEncoder.js → apps/meteor/app/ui/client/lib/recorderjs/AudioEncoder.ts

@@ -1,10 +1,12 @@
 import { Meteor } from 'meteor/meteor';
 import { Emitter } from '@rocket.chat/emitter';
 
-import { settings } from '../../../../settings';
+export class AudioEncoder extends Emitter {
+	private worker: Worker;
 
-class AudioEncoder extends Emitter {
-	constructor(source, { bufferLen = 4096, numChannels = 1, bitRate = settings.get('Message_Audio_bitRate') || 32 } = {}) {
+	private scriptNode: ScriptProcessorNode;
+
+	constructor(source: MediaStreamAudioSourceNode, { bufferLen = 4096, numChannels = 1, bitRate = 32 } = {}) {
 		super();
 
 		const workerPath = Meteor.absoluteUrl('workers/mp3-encoder/index.js');
@@ -21,12 +23,7 @@ class AudioEncoder extends Emitter {
 			},
 		});
 
-		this.scriptNode = (source.context.createScriptProcessor || source.context.createJavaScriptNode).call(
-			source.context,
-			bufferLen,
-			numChannels,
-			numChannels,
-		);
+		this.scriptNode = source.context.createScriptProcessor(bufferLen, numChannels, numChannels);
 		this.scriptNode.onaudioprocess = this.handleAudioProcess;
 
 		source.connect(this.scriptNode);
@@ -37,7 +34,7 @@ class AudioEncoder extends Emitter {
 		this.worker.postMessage({ command: 'finish' });
 	}
 
-	handleWorkerMessage = (event) => {
+	handleWorkerMessage = (event: MessageEvent) => {
 		switch (event.data.command) {
 			case 'end': {
 				// prepend mp3 magic number to the buffer
@@ -51,7 +48,7 @@ class AudioEncoder extends Emitter {
 		}
 	};
 
-	handleAudioProcess = (event) => {
+	handleAudioProcess = (event: AudioProcessingEvent) => {
 		for (let channel = 0; channel < event.inputBuffer.numberOfChannels; channel++) {
 			const buffer = event.inputBuffer.getChannelData(channel);
 			this.worker.postMessage({
@@ -61,5 +58,3 @@ class AudioEncoder extends Emitter {
 		}
 	};
 }
-
-export { AudioEncoder };