[IMPROVE] Added timer in video message recorder (#16221)

app/ui-vrecord/client/vrecord.html

@@ -5,7 +5,7 @@
 		</div>
 		<div class="buttons">
 			<button class="rc-button rc-button--primary record rc-button--small {{recordDisabled}}" {{recordDisabled}}>
-				<i class="{{recordIcon}}"></i>
+				<i class="{{recordIcon}}"></i><span>{{time}}</span>
 			</button>
 			<span class="buttons__wrapper">
 				<button class="rc-button rc-button--nude rc-button--small cancel">{{_ "Cancel"}}</button>

app/ui-vrecord/client/vrecord.js

@@ -24,20 +24,44 @@ Template.vrecDialog.helpers({
 	recordDisabled() {
 		return VideoRecorder.cameraStarted.get() ? '' : 'disabled';
 	},
+
+	time() {
+		return Template.instance().time.get();
+	},
+
 });
 
+const recordingInterval = new ReactiveVar(null);
 
 Template.vrecDialog.events({
-	'click .vrec-dialog .cancel'() {
+	'click .vrec-dialog .cancel'(e, t) {
 		VideoRecorder.stop();
 		VRecDialog.close();
+		t.time.set('');
+		if (recordingInterval.get()) {
+			clearInterval(recordingInterval.get());
+			recordingInterval.set(null);
+		}
 	},
 
-	'click .vrec-dialog .record'() {
+	'click .vrec-dialog .record'(e, t) {
 		if (VideoRecorder.recording.get()) {
 			VideoRecorder.stopRecording();
+			if (recordingInterval.get()) {
+				clearInterval(recordingInterval.get());
+				recordingInterval.set(null);
+			}
 		} else {
 			VideoRecorder.record();
+			t.time.set('00:00');
+			const startTime = new Date();
+			recordingInterval.set(setInterval(() => {
+				const now = new Date();
+				const distance = (now.getTime() - startTime.getTime()) / 1000;
+				const minutes = Math.floor(distance / 60);
+				const seconds = Math.floor(distance % 60);
+				t.time.set(`${ String(minutes).padStart(2, '0') }:${ String(seconds).padStart(2, '0') }`);
+			}, 1000));
 		}
 	},
 
@@ -48,6 +72,11 @@ Template.vrecDialog.events({
 			VRecDialog.close();
 		};
 		VideoRecorder.stop(cb);
+		instance.time.set('');
+		if (recordingInterval.get()) {
+			clearInterval(recordingInterval.get());
+			recordingInterval.set(null);
+		}
 	},
 });
 
@@ -58,6 +87,7 @@ Template.vrecDialog.onCreated(function() {
 	this.rid = new ReactiveVar();
 	this.tmid = new ReactiveVar();
 	this.input = new ReactiveVar();
+	this.time = new ReactiveVar('');
 	this.update = ({ rid, tmid, input }) => {
 		this.rid.set(rid);
 		this.tmid.set(tmid);