refactor: replace ReactiveVar in VideoRecorder with Emitter + hook

VideoRecorder used meteor/reactive-var for cameraStarted, but the React
consumer never subscribed reactively (no useTracker / useSyncExternalStore),
so the send button only re-evaluated its disabled state by accident.

Drop meteor/reactive-var from this module and restore reactivity using
@rocket.chat/emitter — the pattern already used elsewhere in the client —
plus a useSyncExternalStore-based useVideoRecorderCameraStarted hook so
VideoMessageRecorder re-renders when the camera starts/stops. Private
recording/recordingAvailable flags become plain booleans since they were
only read internally.

Author: ggazzo

apps/meteor/app/ui/client/lib/recorderjs/videoRecorder.spec.ts

@@ -1,18 +1,6 @@
 import { VideoRecorder } from './videoRecorder';
 import { createDeferredPromise } from '../../../../../tests/mocks/utils/createDeferredMockFn';
 
-jest.mock('meteor/reactive-var', () => ({
-	ReactiveVar: jest.fn().mockImplementation((initialValue) => {
-		let value = initialValue;
-		return {
-			get: jest.fn(() => value),
-			set: jest.fn((newValue) => {
-				value = newValue;
-			}),
-		};
-	}),
-}));
-
 describe('VideoRecorder', () => {
 	let mockStream: MediaStream;
 	let mockVideoTrack: MediaStreamTrack;
@@ -93,7 +81,7 @@ describe('VideoRecorder', () => {
 			streamDeferred.resolve(mockStream);
 			await jest.runAllTimersAsync();
 
-			expect(VideoRecorder.cameraStarted.get()).toBe(false);
+			expect(VideoRecorder.cameraStarted).toBe(false);
 		});
 
 		it('should handle multiple start/stop cycles', async () => {
@@ -115,7 +103,7 @@ describe('VideoRecorder', () => {
 			await jest.runAllTimersAsync();
 
 			expect(cb).toHaveBeenCalledWith(true);
-			expect(VideoRecorder.cameraStarted.get()).toBe(true);
+			expect(VideoRecorder.cameraStarted).toBe(true);
 		});
 
 		it('should invalidate pending callbacks from previous start when new start is called', async () => {
@@ -155,19 +143,19 @@ describe('VideoRecorder', () => {
 			await jest.runAllTimersAsync();
 
 			expect(cb).toHaveBeenCalledWith(true);
-			expect(VideoRecorder.cameraStarted.get()).toBe(true);
+			expect(VideoRecorder.cameraStarted).toBe(true);
 		});
 
 		it('should stop camera tracks', () => {
 			(VideoRecorder as any).stream = mockStream;
 			(VideoRecorder as any).started = true;
-			VideoRecorder.cameraStarted.set(true);
+			(VideoRecorder as any)._cameraStarted = true;
 
 			VideoRecorder.stop();
 
 			expect(mockVideoTrack.stop).toHaveBeenCalled();
 			expect(mockAudioTrack.stop).toHaveBeenCalled();
-			expect(VideoRecorder.cameraStarted.get()).toBe(false);
+			expect(VideoRecorder.cameraStarted).toBe(false);
 		});
 
 		it('should return supported mime types', () => {

apps/meteor/app/ui/client/lib/recorderjs/videoRecorder.ts

@@ -1,13 +1,18 @@
-import { ReactiveVar } from 'meteor/reactive-var';
+import { Emitter } from '@rocket.chat/emitter';
+import { useCallback, useSyncExternalStore } from 'react';
 
-class VideoRecorder {
-	public cameraStarted = new ReactiveVar(false);
+type VideoRecorderEvents = {
+	cameraStartedChange: boolean;
+};
+
+class VideoRecorder extends Emitter<VideoRecorderEvents> {
+	private _cameraStarted = false;
 
 	private started = false;
 
-	private recording = new ReactiveVar(false);
+	private recording = false;
 
-	private recordingAvailable = new ReactiveVar(false);
+	private recordingAvailable = false;
 
 	private videoel: HTMLVideoElement | undefined;
 
@@ -19,6 +24,18 @@ class VideoRecorder {
 
 	private sessionId = 0;
 
+	public get cameraStarted(): boolean {
+		return this._cameraStarted;
+	}
+
+	private setCameraStarted(value: boolean) {
+		if (this._cameraStarted === value) {
+			return;
+		}
+		this._cameraStarted = value;
+		this.emit('cameraStartedChange', value);
+	}
+
 	public getSupportedMimeTypes() {
 		if (window.MediaRecorder.isTypeSupported('video/webm')) {
 			return 'video/webm; codecs=vp8,opus';
@@ -71,12 +88,12 @@ class VideoRecorder {
 		this.mediaRecorder = new MediaRecorder(this.stream, { mimeType: this.getSupportedMimeTypes() });
 		this.mediaRecorder.ondataavailable = (blobev) => {
 			this.chunks.push(blobev.data);
-			if (!this.recordingAvailable.get()) {
-				return this.recordingAvailable.set(true);
+			if (!this.recordingAvailable) {
+				this.recordingAvailable = true;
 			}
 		};
 		this.mediaRecorder.start();
-		return this.recording.set(true);
+		this.recording = true;
 	}
 
 	private stopStreamTracks(stream: MediaStream) {
@@ -109,7 +126,7 @@ class VideoRecorder {
 		}
 
 		this.started = true;
-		return this.cameraStarted.set(true);
+		this.setCameraStarted(true);
 	}
 
 	public stop(cb?: (blob: Blob) => void) {
@@ -128,8 +145,8 @@ class VideoRecorder {
 
 		const wasStarted = this.started;
 		this.started = false;
-		this.cameraStarted.set(false);
-		this.recordingAvailable.set(false);
+		this.setCameraStarted(false);
+		this.recordingAvailable = false;
 
 		if (cb && this.chunks && wasStarted) {
 			const blob = new Blob(this.chunks);
@@ -141,16 +158,22 @@ class VideoRecorder {
 	}
 
 	public stopRecording() {
-		if (!this.started || !this.recording || !this.mediaRecorder) {
+		if (!this.started || !this.mediaRecorder) {
 			return;
 		}
 
 		this.mediaRecorder.stop();
-		this.recording.set(false);
+		this.recording = false;
 		delete this.mediaRecorder;
 	}
 }
 
 const instance = new VideoRecorder();
 
 export { instance as VideoRecorder };
+
+export const useVideoRecorderCameraStarted = (): boolean =>
+	useSyncExternalStore(
+		useCallback((onStoreChange) => instance.on('cameraStartedChange', onStoreChange), []),
+		() => instance.cameraStarted,
+	);

apps/meteor/client/views/composer/VideoMessageRecorder/VideoMessageRecorder.tsx

@@ -7,7 +7,7 @@ import type { AllHTMLAttributes, RefObject } from 'react';
 import { useRef, useEffect, useState } from 'react';
 
 import { UserAction, USER_ACTIVITIES } from '../../../../app/ui/client/lib/UserAction';
-import { VideoRecorder } from '../../../../app/ui/client/lib/recorderjs/videoRecorder';
+import { VideoRecorder, useVideoRecorderCameraStarted } from '../../../../app/ui/client/lib/recorderjs/videoRecorder';
 import { useChat } from '../../room/contexts/ChatContext';
 
 type VideoMessageRecorderProps = {
@@ -45,7 +45,8 @@ const VideoMessageRecorder = ({ rid, tmid, reference }: VideoMessageRecorderProp
 	const [recordingState, setRecordingState] = useState<'idle' | 'loading' | 'recording'>('idle');
 	const [recordingInterval, setRecordingInterval] = useState<ReturnType<typeof setInterval> | null>(null);
 	const isRecording = recordingState === 'recording';
-	const sendButtonDisabled = !(VideoRecorder.cameraStarted.get() && !(recordingState === 'recording'));
+	const cameraStarted = useVideoRecorderCameraStarted();
+	const sendButtonDisabled = !(cameraStarted && !isRecording);
 
 	const chat = useChat();