diff --git a/packages/rocketchat-ui-message/client/messageBox.coffee b/packages/rocketchat-ui-message/client/messageBox.coffee
index a6b4cfa610bd..4ac263590443 100644
--- a/packages/rocketchat-ui-message/client/messageBox.coffee
+++ b/packages/rocketchat-ui-message/client/messageBox.coffee
@@ -1,6 +1,7 @@
 import toastr from 'toastr'
 import mime from 'mime-type/with-db'
 import moment from 'moment'
+import {VRecDialog} from 'meteor/rocketchat:ui-vrecord'
 
 katexSyntax = ->
 	if RocketChat.katex.katex_enabled()
diff --git a/packages/rocketchat-ui-message/package.js b/packages/rocketchat-ui-message/package.js
index 48e01dd650e4..4d26d912832f 100644
--- a/packages/rocketchat-ui-message/package.js
+++ b/packages/rocketchat-ui-message/package.js
@@ -19,7 +19,8 @@ Package.onUse(function(api) {
 		'underscore',
 		'tracker',
 		'rocketchat:lib',
-		'rocketchat:ui-account'
+		'rocketchat:ui-account',
+		'rocketchat:ui-vrecord'
 	]);
 
 	api.addFiles('client/message.html', 'client');
diff --git a/packages/rocketchat-ui-vrecord/client/VRecDialog.coffee b/packages/rocketchat-ui-vrecord/client/VRecDialog.coffee
deleted file mode 100644
index fdd65c19fff4..000000000000
--- a/packages/rocketchat-ui-vrecord/client/VRecDialog.coffee
+++ /dev/null
@@ -1,47 +0,0 @@
-@VRecDialog = new class
-	opened: false
-	initiated: false
-	width: 400
-	height: 280
-
-	init: ->
-		if @initiated
-			return
-
-		@initiated = true
-		Blaze.render(Template.vrecDialog, document.body)
-
-	open: (source) ->
-		if not @initiated
-			@init()
-
-		@source = source
-		dialog = $('.vrec-dialog')
-		@setPosition(dialog, source)
-		dialog.addClass('show')
-		@opened = true
-
-		@initializeCamera()
-
-	close: ->
-		$('.vrec-dialog').removeClass('show')
-		@opened = false
-
-		if @video?
-			VideoRecorder.stop()
-
-	setPosition: (dialog, source) ->
-		sourcePos = $(source).offset()
-		left = sourcePos.left - @width + 100
-		top = sourcePos.top - @height - 40
-
-		left = 10 if left < 0
-		top = 10 if top < 0
-
-		dialog.css({ top: top + 'px', left: left + 'px' })
-
-	initializeCamera: ->
-		@video = $('.vrec-dialog video').get('0')
-		if not @video
-			return
-		VideoRecorder.start @video
diff --git a/packages/rocketchat-ui-vrecord/client/VRecDialog.js b/packages/rocketchat-ui-vrecord/client/VRecDialog.js
new file mode 100644
index 000000000000..fe1588de8057
--- /dev/null
+++ b/packages/rocketchat-ui-vrecord/client/VRecDialog.js
@@ -0,0 +1,63 @@
+export const VRecDialog = new class {
+	static initClass() {
+		this.prototype.opened = false;
+		this.prototype.initiated = false;
+		this.prototype.width = 400;
+		this.prototype.height = 280;
+	}
+
+	init() {
+		if (this.initiated) {
+			return;
+		}
+
+		this.initiated = true;
+		return Blaze.render(Template.vrecDialog, document.body);
+	}
+
+	open(source) {
+		if (!this.initiated) {
+			this.init();
+		}
+
+		this.source = source;
+		const dialog = $('.vrec-dialog');
+		this.setPosition(dialog, source);
+		dialog.addClass('show');
+		this.opened = true;
+
+		return this.initializeCamera();
+	}
+
+	close() {
+		$('.vrec-dialog').removeClass('show');
+		this.opened = false;
+
+		if (this.video != null) {
+			return VideoRecorder.stop();
+		}
+	}
+
+	setPosition(dialog, source) {
+		const sourcePos = $(source).offset();
+		let left = (sourcePos.left - this.width) + 100;
+		let top = sourcePos.top - this.height - 40;
+
+		if (left < 0) {
+			left = 10;
+		}
+		if (top < 0) {
+			top = 10;
+		}
+
+		return dialog.css({ top: `${ top }px`, left: `${ left }px` });
+	}
+
+	initializeCamera() {
+		this.video = $('.vrec-dialog video').get('0');
+		if (!this.video) {
+			return;
+		}
+		return VideoRecorder.start(this.video);
+	}
+};
diff --git a/packages/rocketchat-ui-vrecord/client/vrecord.js b/packages/rocketchat-ui-vrecord/client/vrecord.js
index a72a7a14d58e..fb02b9529997 100644
--- a/packages/rocketchat-ui-vrecord/client/vrecord.js
+++ b/packages/rocketchat-ui-vrecord/client/vrecord.js
@@ -1,4 +1,5 @@
-/* globals VideoRecorder, VRecDialog, fileUpload */
+/* globals VideoRecorder, fileUpload */
+import {VRecDialog} from './VRecDialog';
 
 Template.vrecDialog.helpers({
 	recordIcon() {
diff --git a/packages/rocketchat-ui-vrecord/package.js b/packages/rocketchat-ui-vrecord/package.js
index f6aa26f3b965..90c1d75785b4 100644
--- a/packages/rocketchat-ui-vrecord/package.js
+++ b/packages/rocketchat-ui-vrecord/package.js
@@ -10,7 +10,6 @@ Package.onUse(function(api) {
 		'mongo',
 		'ecmascript',
 		'templating',
-		'coffeescript',
 		'underscore',
 		'tracker',
 		'rocketchat:lib',
@@ -22,7 +21,7 @@ Package.onUse(function(api) {
 
 	api.addFiles('client/vrecord.html', 'client');
 	api.addFiles('client/vrecord.js', 'client');
-	api.addFiles('client/VRecDialog.coffee', 'client');
 
 	api.addFiles('server/settings.js', 'server');
+	api.mainModule('client/VRecDialog.js', 'client');
 });