From eebe4a5ca37b355078ccadde239223d3d3204795 Mon Sep 17 00:00:00 2001 From: Gabriel Delavald Date: Tue, 13 Mar 2018 16:15:00 -0300 Subject: [PATCH] Finishing UId improvments to broadcast flow --- packages/rocketchat-auditing | 1 - .../client/styles/liveStreamTab.css | 2 -- .../client/views/broadcastView.js | 18 ++++++++--- .../server/functions/livestream.js | 28 +++++++++++++++-- .../rocketchat-livestream/server/methods.js | 31 +++++++++++++++++-- .../client/imports/components/popout.css | 12 +++---- .../client/views/app/popout.html | 2 ++ .../rocketchat-ui/client/views/app/popout.js | 14 ++++++--- 8 files changed, 86 insertions(+), 22 deletions(-) delete mode 120000 packages/rocketchat-auditing diff --git a/packages/rocketchat-auditing b/packages/rocketchat-auditing deleted file mode 120000 index 04e5bb8416e1..000000000000 --- a/packages/rocketchat-auditing +++ /dev/null @@ -1 +0,0 @@ -../../dev/Rocket.Chat.Enterprise/rocketchat-auditing/ \ No newline at end of file diff --git a/packages/rocketchat-livestream/client/styles/liveStreamTab.css b/packages/rocketchat-livestream/client/styles/liveStreamTab.css index 81b04efb3ad3..10438af2c7c0 100644 --- a/packages/rocketchat-livestream/client/styles/liveStreamTab.css +++ b/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; } diff --git a/packages/rocketchat-livestream/client/views/broadcastView.js b/packages/rocketchat-livestream/client/views/broadcastView.js index 58fe8ad58a1d..925e320f9a54 100644 --- a/packages/rocketchat-livestream/client/views/broadcastView.js +++ b/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); + } } }); diff --git a/packages/rocketchat-livestream/server/functions/livestream.js b/packages/rocketchat-livestream/server/functions/livestream.js index 2ea67ce9acbc..7affb1e94bf6 100644 --- a/packages/rocketchat-livestream/server/functions/livestream.js +++ b/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, diff --git a/packages/rocketchat-livestream/server/methods.js b/packages/rocketchat-livestream/server/methods.js index 7db96e295f3b..dbee392045f4 100644 --- a/packages/rocketchat-livestream/server/methods.js +++ b/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') + }); + } }); diff --git a/packages/rocketchat-theme/client/imports/components/popout.css b/packages/rocketchat-theme/client/imports/components/popout.css index a9727dd05785..96ba48dec29d 100644 --- a/packages/rocketchat-theme/client/imports/components/popout.css +++ b/packages/rocketchat-theme/client/imports/components/popout.css @@ -113,12 +113,7 @@ stroke: currentColor; } - &.recording { - color: red; - animation: loading 2s infinite; - } - - &.loading { + &.preparing { animation: loading 2s infinite; pointer-events: none; } @@ -126,6 +121,11 @@ color: red; } } + & span { + text-transform: capitalize; + font-size: 15px; + line-height: 18px; + } } &__content-icon { diff --git a/packages/rocketchat-ui/client/views/app/popout.html b/packages/rocketchat-ui/client/views/app/popout.html index 574f4dc8b3e4..4d2691f965c4 100644 --- a/packages/rocketchat-ui/client/views/app/popout.html +++ b/packages/rocketchat-ui/client/views/app/popout.html @@ -20,6 +20,7 @@

{{> icon icon="podcast"}}

{{#if showStreamControls}}
+ {{ getStreamStatus }}
{{/if}} {{#unless isAudioOnly}} @@ -54,6 +55,7 @@

{{> icon icon="podcast"}}

{{#if showStreamControls}}
+ {{ getStreamStatus }}
{{/if}} diff --git a/packages/rocketchat-ui/client/views/app/popout.js b/packages/rocketchat-ui/client/views/app/popout.js index dd67bb3ba166..8073eb635fc5 100644 --- a/packages/rocketchat-ui/client/views/app/popout.js +++ b/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,8 +162,14 @@ 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(); @@ -171,7 +177,7 @@ Template.popout.events({ }, '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();