Finishing UI and improvments to broadcast flow

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

@@ -16,7 +16,6 @@
     font-size: 50px;
   }
   & .--play-solid {
-    fill: var(--color-white);
     fill: white;
   }
 }
@@ -38,7 +37,6 @@
   & .current-setting {
     display: inline-block;
     text-decoration: none;
-    color: var(--color-dark);
     color: black;
   }
 

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

@@ -77,9 +77,8 @@ Template.broadcastView.onDestroyed(function() {
 		this.mediaRecorder.get().stop();
 		this.mediaRecorder.set(null);
 	}
-	if (this.mediaStream) {
-		const mediaStream = this.mediaStream.get();
-		mediaStream.getTracks().map((track) => track.stop());
+	if (this.mediaStream.get()) {
+		this.mediaStream.get().getTracks().map((track) => track.stop());
 		this.mediaStream.set(null);
 	}
 });
@@ -127,7 +126,18 @@ Template.broadcastView.onRendered(async function() {
 Template.broadcastView.events({
 	async 'startStreaming .streaming-popup'(e, i) {
 		await call('setLivestreamStatus', {broadcastId: i.data.broadcast.id, status: 'live'});
-		await call('saveRoomSettings', Session.get('openedRoom'), 'streamingOptions', {id: i.data.broadcast.id, url: `https://www.youtube.com/embed/${ i.data.broadcast.id }`, thumbnail: `https://img.youtube.com/vi/${ i.data.broadcast.id }/0.jpg`});
 		document.querySelector('.streaming-popup').dispatchEvent(new Event('broadcastStream'));
+		await call('saveRoomSettings', Session.get('openedRoom'), 'streamingOptions', {id: i.data.broadcast.id, url: `https://www.youtube.com/embed/${ i.data.broadcast.id }`, thumbnail: `https://img.youtube.com/vi/${ i.data.broadcast.id }/0.jpg`});
+	},
+	async 'stopStreaming .streaming-popup'(e, i) {
+		await call('setBroadcastStatus', { broadcastId: i.data.broadcast.id, status: 'complete' });
+		if (i.mediaRecorder.get()) {
+			i.mediaRecorder.get().stop();
+			i.mediaRecorder.set(null);
+		}
+		if (i.mediaStream.get()) {
+			i.mediaStream.get().getTracks().map((track) => track.stop());
+			i.mediaStream.set(null);
+		}
 	}
 });

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

@@ -11,7 +11,7 @@ const p = fn => new Promise(function(resolve, reject) {
 	});
 });
 
-export const statusBroadcast = async({
+export const getBroadcastStatus = async({
 	id,
 	access_token,
 	refresh_token,
@@ -24,13 +24,11 @@ export const statusBroadcast = async({
 		access_token,
 		refresh_token
 	});
-	console.log('asd', id);
 	const youtube = google.youtube({ version:'v3', auth });
 	const result = await p(resolve => youtube.liveBroadcasts.list({
 		part:'id,status',
 		id
 	}, resolve));
-
 	return result.items && result.items[0] && result.items[0].status.lifeCycleStatus;
 };
 
@@ -80,6 +78,30 @@ export const statusLiveStream = ({
 	}, resolve));
 };
 
+export const setBroadcastStatus = ({
+	id,
+	access_token,
+	refresh_token,
+	clientId,
+	clientSecret,
+	status
+}) => {
+	const auth = new OAuth2(clientId, clientSecret);
+
+	auth.setCredentials({
+		access_token,
+		refresh_token
+	});
+
+	const youtube = google.youtube({ version:'v3', auth });
+
+	return p(resolve => youtube.liveBroadcasts.transition({
+		part:'id,status',
+		id,
+		broadcastStatus: status
+	}, resolve));
+};
+
 export const createLiveStream = async({
 	room,
 	access_token,

packages/rocketchat-livestream/server/methods.js

@@ -1,5 +1,5 @@
 import {Meteor} from 'meteor/meteor';
-import { createLiveStream, statusLiveStream, statusStreamLiveStream, statusBroadcast } from './functions/livestream';
+import { createLiveStream, statusLiveStream, statusStreamLiveStream, getBroadcastStatus, setBroadcastStatus } from './functions/livestream';
 
 const selectLivestreamSettings = (user) => user && user.settings && user.settings.livestream;
 
@@ -103,12 +103,39 @@ Meteor.methods({
 
 		const {access_token, refresh_token} = livestreamSettings;
 
-		return await statusBroadcast({
+		return await getBroadcastStatus({
 			id: broadcastId,
 			access_token,
 			refresh_token,
 			clientId: RocketChat.settings.get('Broadcasting_client_id'),
 			clientSecret: RocketChat.settings.get('Broadcasting_client_secret')
 		});
+	},
+	async setBroadcastStatus({broadcastId, status}) {
+		if (!broadcastId) {
+			// TODO: change error
+			throw new Meteor.Error('error-not-allowed', 'Broadcast ID not found', {
+				method: 'setBroadcastStatus'
+			});
+		}
+		const livestreamSettings = selectLivestreamSettings(Meteor.user());
+
+		if (!livestreamSettings) {
+			throw new Meteor.Error('error-not-allowed', 'You have no settings to stream', {
+				method: 'setBroadcastStatus'
+			});
+		}
+
+		const {access_token, refresh_token} = livestreamSettings;
+
+		return await setBroadcastStatus({
+			id: broadcastId,
+			access_token,
+			refresh_token,
+			status,
+			clientId: RocketChat.settings.get('Broadcasting_client_id'),
+			clientSecret: RocketChat.settings.get('Broadcasting_client_secret')
+		});
+
 	}
 });

packages/rocketchat-theme/client/imports/components/popout.css

@@ -113,19 +113,19 @@
 				stroke: currentColor;
 			}
 
-			&.recording {
-				color: red;
-				animation: loading 2s infinite;
-			}
-
-			&.loading {
+			&.preparing {
 				animation: loading 2s infinite;
 				pointer-events: none;
 			}
 			&.broadcasting {
 				color: red;
 			}
 		}
+		& span {
+			text-transform: capitalize;
+			font-size: 15px;
+			line-height: 18px;
+		}
 	}
 
 	&__content-icon {

packages/rocketchat-ui/client/views/app/popout.html

@@ -20,6 +20,7 @@ <h1 class="rc-popout__title">{{> icon icon="podcast"}}</h1>
 				{{#if showStreamControls}}
 					<div class="rc-popout__controls">
 							<button class="rc-popout__controls--record {{ getStreamStatus }}"> {{> icon icon="circle" }} </button>
+							<span> {{ getStreamStatus }} </span>
 					</div>
 				{{/if}}
 				{{#unless isAudioOnly}}
@@ -54,6 +55,7 @@ <h1 class="rc-popout__title">{{> icon icon="podcast"}}</h1>
 				{{#if showStreamControls}}
 					<div class="rc-popout__controls">
 						<button class="rc-popout__controls--record {{ getStreamStatus }}"> {{> icon icon="circle" }} </button>
+						<span> {{ getStreamStatus }} </span>
 					</div>
 				{{/if}}
 			</main>

packages/rocketchat-ui/client/views/app/popout.js

@@ -113,7 +113,7 @@ Template.popout.onCreated(function() {
 
 	this.isMuted = new ReactiveVar(false);
 	this.isPlaying = new ReactiveVar(true);
-	this.streamStatus = new ReactiveVar('loading');
+	this.streamStatus = new ReactiveVar('preparing');
 	document.body.addEventListener('dragstart', popout.dragstart, true);
 	document.body.addEventListener('dragover', popout.dragover, true);
 	document.body.addEventListener('dragend', popout.dragend, true);
@@ -162,16 +162,22 @@ Template.popout.events({
 	},
 	'click .rc-popout__controls--record'(e, i) {
 		e.preventDefault();
-		document.querySelector('.streaming-popup').dispatchEvent(new Event('startStreaming'));
-		i.streamStatus.set('starting');
+		if (i.streamStatus.get() === 'ready') {
+			document.querySelector('.streaming-popup').dispatchEvent(new Event('startStreaming'));
+			i.streamStatus.set('starting');
+		} else if (i.streamStatus.get() === 'broadcasting') {
+			document.querySelector('.streaming-popup').dispatchEvent(new Event('stopStreaming'));
+			i.streamStatus.set('finished');
+			setTimeout(() => popout && popout.close(), 2000);
+		}
 	},
 	'broadcastStreamReady .streaming-popup'(e, i) {
 		e.preventDefault();
 		i.streamStatus.set('ready');
 	},
 	'broadcastStream .streaming-popup'(e, i) {
 		e.preventDefault();
-		i.streamStatus.set('recording');
+		i.streamStatus.set('broadcasting');
 	},
 	'click .rc-popout__controls--play'(e, i) {
 		window.liveStreamPlayer.playVideo();