From ead36d026dcc7cd9b45aa94154383f4170a7f3b2 Mon Sep 17 00:00:00 2001 From: Leonard Kim Date: Mon, 16 Apr 2018 18:12:34 -0700 Subject: [PATCH] feat(recording): show the YouTube live stream URL - From the start live stream dialog, push up the broadcast ID of the chosen broadcast. It is assumed the ID can be used to create the YouTube link. - Listen for lib-jitsi-meet to emit updates of the known live stream URL, shove it into redux, and have InfoDialog display it. --- conference.js | 7 +++ css/modals/invite/_info.scss | 7 +-- lang/main.json | 1 + modules/UI/recording/Recording.js | 13 ++++-- .../components/info-dialog/InfoDialog.web.js | 46 +++++++++++++++++-- .../LiveStream/BroadcastsDropdown.web.js | 6 +-- .../LiveStream/StartLiveStreamDialog.web.js | 28 ++++++++--- 7 files changed, 86 insertions(+), 22 deletions(-) diff --git a/conference.js b/conference.js index a1a70ef61..8597f9d88 100644 --- a/conference.js +++ b/conference.js @@ -28,6 +28,7 @@ import { redirectWithStoredParams, reloadWithStoredParams } from './react/features/app'; +import { updateRecordingState } from './react/features/recording'; import EventEmitter from 'events'; @@ -1851,6 +1852,12 @@ export default { APP.store.dispatch(dominantSpeakerChanged(id)); }); + room.on(JitsiConferenceEvents.LIVE_STREAM_URL_CHANGED, + (from, liveStreamViewURL) => + APP.store.dispatch(updateRecordingState({ + liveStreamViewURL + }))); + if (!interfaceConfig.filmStripOnly) { room.on(JitsiConferenceEvents.CONNECTION_INTERRUPTED, () => { APP.UI.markVideoInterrupted(true); diff --git a/css/modals/invite/_info.scss b/css/modals/invite/_info.scss index b5c849fb5..2fe6ab83c 100644 --- a/css/modals/invite/_info.scss +++ b/css/modals/invite/_info.scss @@ -59,7 +59,8 @@ } } - .info-dialog-conference-url { + .info-dialog-conference-url, + .info-dialog-live-stream-url { width: max-content; width: -moz-max-content; width: -webkit-max-content; @@ -81,8 +82,8 @@ font-size: 16px; } - .info-dialog-invite-link, - .info-dialog-invite-link:hover { + .info-dialog-hidden-link, + .info-dialog-hidden-link:hover { color: inherit; cursor: inherit; } diff --git a/lang/main.json b/lang/main.json index d0a415515..e3ecf3eeb 100644 --- a/lang/main.json +++ b/lang/main.json @@ -519,6 +519,7 @@ "invitePhone": "To join by phone, dial __number__ and enter this PIN: __conferenceID__#", "invitePhoneAlternatives": "To view more phone numbers, click this link: __url__", "inviteURL": "To join the video meeting, click this link: __url__", + "livestreamURL": "Livestream link:", "moreNumbers": "More numbers", "noNumbers": "No dial-in numbers.", "noPassword": "None", diff --git a/modules/UI/recording/Recording.js b/modules/UI/recording/Recording.js index af6deb155..537b414ac 100644 --- a/modules/UI/recording/Recording.js +++ b/modules/UI/recording/Recording.js @@ -109,7 +109,10 @@ function _requestLiveStreamId() { return new Promise((resolve, reject) => APP.store.dispatch(openDialog(StartLiveStreamDialog, { onCancel: reject, - onSubmit: resolve + onSubmit: (streamId, broadcastId) => resolve({ + broadcastId, + streamId + }) }))); } @@ -257,7 +260,6 @@ const Recording = { * @param recordingState gives us the current recording state */ updateRecordingUI(recordingState) { - const oldState = this.currentState; this.currentState = recordingState; @@ -388,10 +390,13 @@ const Recording = { case JitsiRecordingStatus.OFF: { if (this.recordingType === 'jibri') { _requestLiveStreamId() - .then(streamId => { + .then(({ broadcastId, streamId }) => { this.eventEmitter.emit( UIEvents.RECORDING_TOGGLED, - { streamId }); + { + broadcastId, + streamId + }); // The confirm button on the start recording dialog was // clicked diff --git a/react/features/invite/components/info-dialog/InfoDialog.web.js b/react/features/invite/components/info-dialog/InfoDialog.web.js index fa8302d3e..889e3a85a 100644 --- a/react/features/invite/components/info-dialog/InfoDialog.web.js +++ b/react/features/invite/components/info-dialog/InfoDialog.web.js @@ -67,6 +67,11 @@ class InfoDialog extends Component { */ _inviteURL: PropTypes.string, + /** + * The current known URL for a live stream in progress. + */ + _liveStreamViewURL: PropTypes.string, + /** * The value for how the conference is locked (or undefined if not * locked) as defined by room-lock constants. @@ -147,7 +152,7 @@ class InfoDialog extends Component { this._copyElement = null; // Bind event handlers so they are only bound once for every instance. - this._onClickInviteURL = this._onClickInviteURL.bind(this); + this._onClickHiddenURL = this._onClickHiddenURL.bind(this); this._onCopyInviteURL = this._onCopyInviteURL.bind(this); this._onPasswordRemove = this._onPasswordRemove.bind(this); this._onPasswordSubmit = this._onPasswordSubmit.bind(this); @@ -199,7 +204,7 @@ class InfoDialog extends Component { * @returns {ReactElement} */ render() { - const { onMouseOver, t } = this.props; + const { _liveStreamViewURL, onMouseOver, t } = this.props; return (
  + onClick = { this._onClickHiddenURL } > { this._getURLToDisplay() } @@ -231,6 +236,7 @@ class InfoDialog extends Component {
{ this._renderDialInDisplay() }
+ { _liveStreamViewURL && this._renderLiveStreamURL() }
+ + { t('info.livestreamURL') } + +   + + + { _liveStreamViewURL } + + +
+ ); + } + /** * Returns whether or not dial-in related UI should be displayed. * @@ -533,6 +567,7 @@ class InfoDialog extends Component { * _conferenceName: string, * _dialIn: Object, * _inviteURL: string, + * _liveStreamViewURL: string, * _locked: string, * _password: string * }} @@ -560,6 +595,7 @@ function _mapStateToProps(state) { _conferenceName: room, _dialIn: state['features/invite'], _inviteURL: getInviteURL(state), + _liveStreamViewURL: state['features/recording'].liveStreamViewURL, _locked: locked, _password: password }; diff --git a/react/features/recording/components/LiveStream/BroadcastsDropdown.web.js b/react/features/recording/components/LiveStream/BroadcastsDropdown.web.js index fd4f1aafb..f7b0bc631 100644 --- a/react/features/recording/components/LiveStream/BroadcastsDropdown.web.js +++ b/react/features/recording/components/LiveStream/BroadcastsDropdown.web.js @@ -44,7 +44,7 @@ class BroadcastsDropdown extends PureComponent { * The boundStreamID of the broadcast that should display as selected in * the dropdown. */ - selectedBroadcastID: PropTypes.string, + selectedBoundStreamID: PropTypes.string, /** * Invoked to obtain translated strings. @@ -84,7 +84,7 @@ class BroadcastsDropdown extends PureComponent { * @returns {ReactElement} */ render() { - const { broadcasts, selectedBroadcastID, t } = this.props; + const { broadcasts, selectedBoundStreamID, t } = this.props; const dropdownItems = broadcasts.map(broadcast => // eslint-disable-next-line react/jsx-wrap-multilines @@ -96,7 +96,7 @@ class BroadcastsDropdown extends PureComponent { ); const selected = this.props.broadcasts.find( - broadcast => broadcast.boundStreamID === selectedBroadcastID); + broadcast => broadcast.boundStreamID === selectedBoundStreamID); const triggerText = (selected && selected.title) || t('liveStreaming.choose'); diff --git a/react/features/recording/components/LiveStream/StartLiveStreamDialog.web.js b/react/features/recording/components/LiveStream/StartLiveStreamDialog.web.js index a3b70a4d1..7f0c71045 100644 --- a/react/features/recording/components/LiveStream/StartLiveStreamDialog.web.js +++ b/react/features/recording/components/LiveStream/StartLiveStreamDialog.web.js @@ -89,6 +89,8 @@ class StartLiveStreamDialog extends Component { * available for use for the logged in Google user's YouTube account. * @property {string} googleProfileEmail - The email of the user currently * logged in to the Google web client application. + * @property {string} selectedBoundStreamID - The boundStreamID of the + * broadcast currently selected in the broadcast dropdown. * @property {string} streamKey - The selected or entered stream key to use * for YouTube live streaming. */ @@ -96,7 +98,7 @@ class StartLiveStreamDialog extends Component { broadcasts: undefined, googleAPIState: GOOGLE_API_STATES.NEEDS_LOADING, googleProfileEmail: '', - selectedBroadcastID: undefined, + selectedBoundStreamID: undefined, streamKey: '' }; @@ -291,7 +293,7 @@ class StartLiveStreamDialog extends Component { _onStreamKeyChange(event) { this._setStateIfMounted({ streamKey: event.target.value, - selectedBroadcastID: undefined + selectedBoundStreamID: undefined }); } @@ -304,11 +306,22 @@ class StartLiveStreamDialog extends Component { * closing, true to close the modal. */ _onSubmit() { - if (!this.state.streamKey) { + const { streamKey, selectedBoundStreamID } = this.state; + + if (!streamKey) { return false; } - this.props.onSubmit(this.state.streamKey); + let selectedBroadcastID = null; + + if (selectedBoundStreamID) { + const selectedBroadcast = this.state.broadcasts.find( + broadcast => broadcast.boundStreamID === selectedBoundStreamID); + + selectedBroadcastID = selectedBroadcast && selectedBroadcast.id; + } + + this.props.onSubmit(streamKey, selectedBroadcastID); return true; } @@ -333,7 +346,7 @@ class StartLiveStreamDialog extends Component { this._setStateIfMounted({ streamKey, - selectedBroadcastID: boundStreamID + selectedBoundStreamID: boundStreamID }); }); } @@ -358,6 +371,7 @@ class StartLiveStreamDialog extends Component { if (boundStreamID && !parsedBroadcasts[boundStreamID]) { parsedBroadcasts[boundStreamID] = { boundStreamID, + id: broadcast.id, status: broadcast.status.lifeCycleStatus, title: broadcast.snippet.title }; @@ -378,7 +392,7 @@ class StartLiveStreamDialog extends Component { const { broadcasts, googleProfileEmail, - selectedBroadcastID + selectedBoundStreamID } = this.state; let googleContent, helpText; @@ -399,7 +413,7 @@ class StartLiveStreamDialog extends Component { + selectedBoundStreamID = { selectedBoundStreamID } /> ); /**