Convert ui-vrecord Package to JS

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()

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');

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);
+	}
+};

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() {

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');
 });