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.
2018-04-16 18:12:34 -07:00 · 2018-04-16 18:12:34 -07:00 · ead36d026d
parent 008645568c
commit ead36d026d
7 changed files with 86 additions and 22 deletions
--- 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);
--- 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;
    }
--- 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",
--- 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
--- 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 (
            <div
@ -221,9 +226,9 @@ class InfoDialog extends Component {
                        <span className = 'spacer'>&nbsp;</span>
                        <span className = 'info-value'>
                            <a
-                                className = 'info-dialog-invite-link'
+                                className = 'info-dialog-hidden-link'
                                href = { this.props._inviteURL }
-                                onClick = { this._onClickInviteURL } >
+                                onClick = { this._onClickHiddenURL } >
                                { this._getURLToDisplay() }
                            </a>
                        </span>
@ -231,6 +236,7 @@ class InfoDialog extends Component {
                    <div className = 'info-dialog-dial-in'>
                        { this._renderDialInDisplay() }
                    </div>
+                    { _liveStreamViewURL && this._renderLiveStreamURL() }
                    <div className = 'info-dialog-password'>
                        <PasswordForm
                            editEnabled = { this.state.passwordEditEnabled }
@ -362,7 +368,7 @@ class InfoDialog extends Component {
     * @private
     * @returns {void}
     */
-    _onClickInviteURL(event) {
+    _onClickHiddenURL(event) {
        event.preventDefault();
    }

@ -490,6 +496,34 @@ class InfoDialog extends Component {
            : null;
    }

+    /**
+     * Returns a ReactElement for display a link to the current url of a
+     * live stream in progress.
+     *
+     * @private
+     * @returns {null|ReactElement}
+     */
+    _renderLiveStreamURL() {
+        const { _liveStreamViewURL, t } = this.props;
+
+        return (
+            <div className = 'info-dialog-live-stream-url'>
+                <span className = 'info-label'>
+                    { t('info.livestreamURL') }
+                </span>
+                <span className = 'spacer'>&nbsp;</span>
+                <span className = 'info-value'>
+                    <a
+                        className = 'info-dialog-hidden-link'
+                        href = { _liveStreamViewURL }
+                        onClick = { this._onClickHiddenURL } >
+                        { _liveStreamViewURL }
+                    </a>
+                </span>
+            </div>
+        );
+    }
+
    /**
     * 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
    };
--- 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 {
            </DropdownItem>
        );
        const selected = this.props.broadcasts.find(
-            broadcast => broadcast.boundStreamID === selectedBroadcastID);
+            broadcast => broadcast.boundStreamID === selectedBoundStreamID);
        const triggerText = (selected && selected.title)
            || t('liveStreaming.choose');

--- 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 {
                <BroadcastsDropdown
                    broadcasts = { broadcasts }
                    onBroadcastSelected = { this._onYouTubeBroadcastIDSelected }
-                    selectedBroadcastID = { selectedBroadcastID } />
+                    selectedBoundStreamID = { selectedBoundStreamID } />
            );

            /**