[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.5
 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,13 @@
   "Livechat_title": "Livechat Title",
   "Livechat_title_color": "Livechat Title Background Color",
   "Livechat_Users": "Livechat Users",
+  "Livestream_title": "LiveStream",
+  "Livestream_not_found": "Livestream not Available",
+  "Livestream_popout": "Open Livestream in Popout",
+  "Livestream_url": "Livestream source url",
+  "Livestream_source_changed_succesfully": "Livestream source changed successfully",
+  "Livestream_undocked": "Livestream is undocked",
+  "Livestream_switch_to_room": "Switch to current room's livestream",
   "Load_more": "Load more",
   "Loading...": "Loading...",
   "Loading_more_from_history": "Loading more from history",

packages/rocketchat-livestream/client/styles/liveStreamTab.css

@@ -0,0 +1,52 @@
+.contextual-bar__header-title {
+    padding: 5px;
+    &h2 {
+      font-size: 20px;
+    }
+}
+
+.thumbnail-container {
+  position: relative;
+  height: 270px;
+
+  & .--absolute-center {
+    position: absolute;
+    top: calc(50% - 25px);
+    left: calc(50% - 25px);
+
+    font-size: 50px;
+  }
+  & .--play-solid {
+    fill: var(--rc-color-primary-lightest);;
+  }
+}
+.liveStreamTab__form {
+  margin: 10px auto;
+
+  & .rc-button {
+    width: 49%;
+  }
+  & .rc-switch {
+    padding: 10px 5px;
+  }
+}
+
+.livestream--url {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  margin: 10px auto;
+  padding: 10px 0;
+  font-size: 15px;
+
+  & .current-setting {
+    display: inline-block;
+    text-decoration: none;
+    color: var(--rc-color-primary-dark);
+  }
+
+  & .rc-button {
+    width: 49%
+  }
+}

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,56 @@
+<template name="liveStreamTab">
+	<div class="contextual-bar__header flex-tab__header flex-tab--livestream">
+		<div class="title contextual-bar__header-data">
+			<h2 class="contextual-bar__header-title">{{> icon block="contextual-bar__header-icon" icon="podcast"}} {{_ "Livestream_title" }}</h2>
+		</div>
+	</div>
+	<section class="contextual-bar__content flex-tab-bar">
+		{{#if hasSource}}
+			{{#if isPopoutOpen}}
+				{{#if canDock}}
+					<button type="button" class="rc-button rc-button--primary js-close button-block" title="{{_ 'Livestream_close'}}" >{{_ "Livestream_close"}}</button>
+				{{else}}
+					<button type="button" class="rc-button rc-button--primary js-close button-block" title="{{_ 'Livestream_switch_to_room'}}" >{{_ "Livestream_switch_to_room"}}</button>
+				{{/if}}
+			{{else}}
+				<!-- {{> liveStreamView streamingSource=streamingSource }} -->
+				{{#if hasThumbnail}}
+					<div class="thumbnail-container" style="background: url({{thumbnailUrl}}) 100% no-repeat no-repeat;">
+							<a href="#" class="js-popout --absolute-center">
+							{{> icon icon="play-solid"}}
+						</a>
+					</div>
+				{{/if}}
+			{{/if}}
+		{{else}}
+		 {{_ "Livestream_not_found" }}
+		{{/if}}
+		{{#if canEdit}}
+			{{#if editing}}
+				<form class="liveStreamTab__form">
+					<input type="text" name="streaming-source" class="rc-input__element content-background-color editing" placeholder="{{_ "Livestream_url"}}" value="{{ streamingSource }}"/>
+					<div class="rc-switch">
+						<label class="rc-switch__label" tabindex="-1">
+							<input type="checkbox" class="rc-switch__input" name="streaming-audio-only" checked={{isAudioOnly}}>
+							<span class="rc-switch__button">
+							<span class="rc-switch__button-inside"></span>
+						</span>
+							<span class="rc-switch__text">
+								{{_ "Livestream_enable_audio_only"}}
+							</span>
+						</label>
+						<span class="rc-switch__description">{{typeDescription}}</span>
+					</div>
+					<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 livestream--url">
+					{{> icon icon="permalink"}}
+					<a href="#" class="current-setting streaming-source-settings"> {{ streamingSource }} </a>
+				</div>
+			{{/if}}
+		{{/if}}
+
+	</section>
+</template>