[NEW] Livestream tab

.meteor/packages

@@ -83,6 +83,7 @@ rocketchat:katex
 rocketchat:ldap
 rocketchat:lib
 rocketchat:livechat
+rocketchat:livestream
 rocketchat:logger
 rocketchat:login-token
 rocketchat:mailer

.meteor/versions

@@ -170,6 +170,7 @@ rocketchat:katex@0.0.1
 rocketchat:ldap@0.0.1
 rocketchat:lib@0.0.1
 rocketchat:livechat@0.0.1
+rocketchat:livestream@0.0.2
 rocketchat:logger@0.0.1
 rocketchat:login-token@1.0.0
 rocketchat:mailer@0.0.1

packages/rocketchat-channel-settings/server/methods/saveRoomSettings.js

@@ -10,7 +10,7 @@ Meteor.methods({
 				method: 'saveRoomSettings'
 			});
 		}
-		if (!['roomName', 'roomTopic', 'roomAnnouncement', 'roomDescription', 'roomType', 'readOnly', 'reactWhenReadOnly', 'systemMessages', 'default', 'joinCode', 'tokenpass'].some((s) => s === setting)) {
+		if (!['roomName', 'roomTopic', 'roomAnnouncement', 'roomDescription', 'roomType', 'readOnly', 'reactWhenReadOnly', 'systemMessages', 'default', 'joinCode', 'tokenpass', 'streamingOptions'].some((s) => s === setting)) {
 			throw new Meteor.Error('error-invalid-settings', 'Invalid settings provided', {
 				method: 'saveRoomSettings'
 			});
@@ -75,6 +75,9 @@ Meteor.methods({
 					});
 					RocketChat.saveRoomTokenpass(rid, value);
 					break;
+				case 'streamingOptions':
+					RocketChat.saveStreamingOptions(rid, value);
+					break;
 				case 'readOnly':
 					if (value !== room.ro) {
 						RocketChat.saveRoomReadOnly(rid, value, Meteor.user());

packages/rocketchat-i18n/i18n/en.i18n.json

@@ -1126,6 +1126,10 @@
   "Livechat_title": "Livechat Title",
   "Livechat_title_color": "Livechat Title Background Color",
   "Livechat_Users": "Livechat Users",
+  "Livestream_title": "LiveStream",
+  "Livestream_not_found": "Livestream not found",
+  "Livestream_popout": "Open Livestream in Popout",
+  "Livestream_url": "Livestream url",
   "Load_more": "Load more",
   "Loading...": "Loading...",
   "Loading_more_from_history": "Loading more from history",

packages/rocketchat-livestream/client/tabBar.js

@@ -0,0 +1,16 @@
+Meteor.startup(function() {
+	Tracker.autorun(function() {
+		if (RocketChat.settings.get('Livestream_enabled')) {
+			return RocketChat.TabBar.addButton({
+				groups: ['channel', 'group'],
+				id: 'livestream',
+				i18nTitle: 'Livestream',
+				icon: 'podcast',
+				template: 'liveStreamTab',
+				order: 3
+			});
+		} else {
+			RocketChat.TabBar.removeButton('livestream');
+		}
+	});
+});

packages/rocketchat-livestream/client/views/liveStreamTab.html

@@ -0,0 +1,28 @@
+<template name="liveStreamTab">
+	<div class="contextual-bar__header flex-tab__header">
+		<div class="title">
+			<h2>{{_ "Livestream_title" }}</h2>
+		</div>
+	</div>
+	<section class="contextual-bar__content flex-tab-bar">
+		{{#if canEdit}}
+			{{#if editing}}
+				<form class="liveStreamTab__form">
+					<input type="text" name="streamingOptions" class="rc-input__element content-background-color editing" placeholder="{{_ "Livestream_url"}}" value="{{ streamingSource }}"/>
+						<button type="button" class="rc-button rc-button--nude js-cancel button-block" title="{{_ 'Cancel'}}" >{{_ "Cancel"}}</button>
+						<button type="button" class="rc-button rc-button--primary js-save button-block">{{_ "Save"}}</button>
+				</form>
+			{{else}}
+				<div class="setting-block">
+					<span class="current-setting streamingSourceSetting"> {{ streamingSource }} </span>
+				</div>
+			{{/if}}
+		{{/if}}
+		{{#if hasSource}}
+			{{> liveStreamView streamingSource=streamingSource }}
+			<button type="button" name="livestream-popout" class="rc-button rc-button--primary livestreamPopout"> {{_ "Livestream_popout" }} </button>
+		{{else}}
+		 {{_ "Livestream_not_found" }}
+		{{/if}}
+	</section>
+</template>

packages/rocketchat-livestream/client/views/liveStreamTab.js

@@ -0,0 +1,79 @@
+/* globals popout */
+import toastr from 'toastr';
+
+function parseUrl(url) {
+	const parsedUrl = url.match(/(http:|https:|)\/\/(clips.|player.|www.)?(twitch\.tv|vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com))\/(video\/|embed\/|watch\?v=|v\/|embed\?clip=)?([A-Za-z0-9._%-]*)(\&\S+)?/);
+	let source = url;
+	if (parsedUrl != null) {
+		if (parsedUrl[3].includes('youtu')) {
+			source = `https://www.youtube.com/embed/${ parsedUrl[6] }?showinfo=0`;
+		} else if (parsedUrl[3].includes('vimeo')) {
+			source = `https://player.vimeo.com/video/${ parsedUrl[6] }`;
+		} else if (parsedUrl[3].includes('twitch')) {
+			source = `http://player.twitch.tv/?channel=${ parsedUrl[6] }`;
+		}
+		// @TODO add support for other urls
+		return source;
+	}
+}
+
+Template.liveStreamTab.helpers({
+	streamingSource() {
+		return Template.instance().streamingOptions.get() ? Template.instance().streamingOptions.get().url : '';
+	},
+	hasSource() {
+		return !!Template.instance().streamingOptions.get() && Template.instance().streamingOptions.get().url !== '';
+	},
+	canEdit() {
+		return RocketChat.authz.hasAllPermission('edit-room', this.rid);
+	},
+	editing() {
+		return Template.instance().editing.get() || Template.instance().streamingOptions.get() == null || (Template.instance().streamingOptions.get() != null && Template.instance().streamingOptions.get().url === '');
+	}
+});
+
+Template.liveStreamTab.onCreated(function() {
+	this.editing = new ReactiveVar(false);
+	this.streamingOptions = new ReactiveVar();
+
+	this.autorun(() => {
+		const room = RocketChat.models.Rooms.findOne(this.data.rid, { fields: { streamingOptions : 1 } });
+		this.streamingOptions.set(room.streamingOptions);
+	});
+});
+
+Template.liveStreamTab.events({
+	'click .js-cancel'(e, i) {
+		e.preventDefault();
+		i.editing.set(false);
+	},
+	'click .js-save'(e, i) {
+		e.preventDefault();
+
+		const streamingOptions = {
+			url: parseUrl(i.find('[name=streamingOptions]').value)
+		};
+
+		Meteor.call('saveRoomSettings', this.rid, 'streamingOptions', streamingOptions, function(err) {
+			if (err) {
+				return handleError(err);
+			}
+			i.editing.set(false);
+			i.streamingOptions.set(streamingOptions);
+			return toastr.success(TAPi18n.__('Streaming_source_changed_succesfully'));
+		});
+	},
+	'click .streamingSourceSetting'(e, i) {
+		e.preventDefault();
+		i.editing.set(true);
+	},
+	'click .livestreamPopout'(e, i) {
+		e.preventDefault();
+		popout.open({
+			content: 'liveStreamView',
+			data: {
+				'streamingSource': i.streamingOptions.get().url
+			}
+		});
+	}
+});

packages/rocketchat-livestream/client/views/liveStreamView.html

@@ -0,0 +1,7 @@
+<template name="liveStreamView">
+  <div class="streaming-popup">
+    <iframe width="356" height="350" src="{{ streamingSource }}"
+      frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen>
+    </iframe>
+  </div>
+</template>

packages/rocketchat-livestream/package.js

@@ -0,0 +1,27 @@
+Package.describe({
+	name: 'rocketchat:livestream',
+	version: '0.0.2',
+	summary: 'Embed livestream to Rocket.Chat channels',
+	git: ''
+});
+
+Package.onUse(function(api) {
+	api.use('templating', 'client');
+	api.use([
+		'ecmascript',
+		'rocketchat:lib'
+	]);
+	api.addFiles([
+		'client/views/liveStreamTab.html',
+		'client/views/liveStreamTab.js',
+		'client/views/liveStreamView.html',
+		'client/views/liveStreamView.js',
+		'client/tabBar.js'
+	], 'client');
+
+	api.addFiles([
+		'server/models/Rooms.js',
+		'server/functions/saveStreamingOptions.js',
+		'server/settings.js'
+	], 'server');
+});

packages/rocketchat-livestream/server/functions/saveStreamingOptions.js

@@ -0,0 +1,9 @@
+RocketChat.saveStreamingOptions = function(rid, streamingOptions) {
+	if (!Match.test(rid, String)) {
+		throw new Meteor.Error('invalid-room', 'Invalid room', {
+			'function': 'RocketChat.saveStreamingOptions'
+		});
+	}
+
+	return RocketChat.models.Rooms.setStreamingOptionsById(rid, streamingOptions);
+};

packages/rocketchat-livestream/server/models/Rooms.js

@@ -0,0 +1,8 @@
+RocketChat.models.Rooms.setStreamingOptionsById = function(_id, streamingOptions) {
+	const update = {
+		$set: {
+			streamingOptions
+		}
+	};
+	return this.update({ _id }, update);
+};

packages/rocketchat-livestream/server/settings.js

@@ -0,0 +1,10 @@
+Meteor.startup(function() {
+	RocketChat.settings.addGroup('LiveStream', function() {
+		this.add('Livestream_enabled', false, {
+			type: 'boolean',
+			i18nLabel: 'Enabled',
+			public: true,
+			alert: 'This feature is currently in beta! Please report bugs to github.com/RocketChat/Rocket.Chat/issues'
+		});
+	});
+});