Chore: Refactor VideoMessageRecorder

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

@@ -22,7 +22,7 @@ export const createComposerAPI = (input: HTMLTextAreaElement, storageID: string)
 		input.dispatchEvent(event);
 	};
 
-	const emitter = new Emitter<{ quotedMessagesUpdate: void; editing: void; recording: void; formatting: void }>();
+	const emitter = new Emitter<{ quotedMessagesUpdate: void; editing: void; recording: void; recordingVideo: void; formatting: void }>();
 
 	let _quotedMessages: IMessage[] = [];
 
@@ -153,6 +153,21 @@ export const createComposerAPI = (input: HTMLTextAreaElement, storageID: string)
 		];
 	})();
 
+	const [recordingVideo, setRecordingVideo] = (() => {
+		let recordingVideo = false;
+
+		return [
+			{
+				get: () => recordingVideo,
+				subscribe: (callback: () => void) => emitter.on('recordingVideo', callback),
+			},
+			(value: boolean) => {
+				recordingVideo = value;
+				emitter.emit('recordingVideo');
+			},
+		];
+	})();
+
 	const setEditingMode = (editing: boolean): void => {
 		setEditing(editing);
 	};
@@ -257,6 +272,8 @@ export const createComposerAPI = (input: HTMLTextAreaElement, storageID: string)
 		setEditingMode,
 		recording,
 		setRecordingMode,
+		recordingVideo,
+		setRecordingVideo,
 		insertText,
 		setText,
 		clear,

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

@@ -3,7 +3,6 @@ import { ReactiveVar } from 'meteor/reactive-var';
 import { Tracker } from 'meteor/tracker';
 import { isRoomFederated } from '@rocket.chat/core-typings';
 
-import { VRecDialog } from '../../../ui-vrecord/client';
 import { messageBox } from '../../../ui-utils/client';
 import { settings } from '../../../settings/client';
 import { imperativeModal } from '../../../../client/lib/imperativeModal';
@@ -21,8 +20,10 @@ messageBox.actions.add('Create_new', 'Video_message', {
 		(!settings.get('FileUpload_MediaTypeBlackList') || !settings.get('FileUpload_MediaTypeBlackList').match(/video\/webm|video\/\*/i)) &&
 		(!settings.get('FileUpload_MediaTypeWhiteList') || settings.get('FileUpload_MediaTypeWhiteList').match(/video\/webm|video\/\*/i)) &&
 		window.MediaRecorder.isTypeSupported('video/webm; codecs=vp8,opus'),
-	action: ({ rid, tmid, messageBox, chat }) => {
-		VRecDialog.opened ? VRecDialog.close() : VRecDialog.open(messageBox, { rid, tmid, chat });
+	action: ({ chat }) => {
+		if (!chat?.composer?.recordingVideo.get()) {
+			chat?.composer?.setRecordingVideo(true);
+		}
 	},
 });
 

apps/meteor/client/importPackages.ts

@@ -58,7 +58,6 @@ import '../app/ui-clean-history/client';
 import '../app/ui-login';
 import '../app/ui-master/client';
 import '../app/ui-message/client';
-import '../app/ui-vrecord/client';
 import '../app/videobridge/client';
 import '../app/webdav/client';
 import '../app/webrtc/client';

apps/meteor/client/lib/chats/ChatAPI.ts

@@ -46,6 +46,9 @@ export type ComposerAPI = {
 	setRecordingMode(recording: boolean): void;
 	readonly recording: Subscribable<boolean>;
 
+	setRecordingVideo(recording: boolean): void;
+	readonly recordingVideo: Subscribable<boolean>;
+
 	readonly formatters: Subscribable<FormattingButton[]>;
 };