diff --git a/config.js b/config.js
index f2e2084524..a815c49cdf 100644
--- a/config.js
+++ b/config.js
@@ -333,7 +333,6 @@ var config = {
// userRegion: "asia"
}
-
// List of undocumented settings used in jitsi-meet
/**
alwaysVisibleToolbar
@@ -353,6 +352,7 @@ var config = {
etherpad_base
externalConnectUrl
firefox_fake_device
+ googleApiApplicationClientID
iAmRecorder
iAmSipGateway
peopleSearchQueryTypes
diff --git a/css/_recording.scss b/css/_recording.scss
index b3577f38eb..fbead3f207 100644
--- a/css/_recording.scss
+++ b/css/_recording.scss
@@ -1,3 +1,81 @@
.recordingSpinner {
vertical-align: top;
}
+
+.live-stream-dialog {
+ /**
+ * Set font-size to be consistent with Atlaskit FieldText.
+ */
+ font-size: 14px;
+
+ .broadcast-dropdown,
+ .broadcast-dropdown-trigger {
+ text-align: left;
+ }
+
+ .form-footer {
+ text-align: right;
+ }
+
+ .live-stream-cta {
+ a {
+ cursor: pointer;
+ }
+ }
+
+ .google-api {
+ margin-top: 10px;
+ min-height: 36px;
+ text-align: center;
+ width: 100%;
+ }
+
+ /**
+ * The Google sign in button must follow Google's design guidelines.
+ * See: https://developers.google.com/identity/branding-guidelines
+ */
+ .google-sign-in {
+ background-color: #4285f4;
+ border-radius: 2px;
+ cursor: pointer;
+ display: inline-flex;
+ font-family: Roboto, arial, sans-serif;
+ font-size: 14px;
+ padding: 1px;
+
+ .google-cta {
+ color: white;
+ display: inline-block;
+ /**
+ * Hack the line height for vertical centering of text.
+ */
+ line-height: 32px;
+ margin: 0 15px;
+ }
+
+ .google-logo {
+ background-color: white;
+ border-radius: 2px;
+ display: inline-block;
+ padding: 8px;
+ height: 18px;
+ width: 18px;
+ }
+ }
+
+ .google-panel {
+ align-items: center;
+ border-bottom: 2px solid rgba(0, 0, 0, 0.3);
+ display: flex;
+ flex-direction: column;
+ padding-bottom: 10px;
+ }
+
+ .stream-key-form {
+ .helper-link {
+ display: inline-block;
+ cursor: pointer;
+ margin-top: 5px;
+ }
+ }
+}
diff --git a/images/googleLogo.svg b/images/googleLogo.svg
new file mode 100644
index 0000000000..1e74ba4094
--- /dev/null
+++ b/images/googleLogo.svg
@@ -0,0 +1,11 @@
+
+
+
+
+
+
diff --git a/lang/main.json b/lang/main.json
index d1d68c00d1..a0eba2ba9a 100644
--- a/lang/main.json
+++ b/lang/main.json
@@ -285,8 +285,8 @@
"thankYou": "Thank you for using __appName__!",
"sorryFeedback": "We're sorry to hear that. Would you like to tell us more?",
"liveStreaming": "Live Streaming",
- "streamKey": "Stream name/key",
- "startLiveStreaming": "Start live streaming",
+ "streamKey": "Live stream key",
+ "startLiveStreaming": "Go live now",
"stopStreamingWarning": "Are you sure you would like to stop the live streaming?",
"stopRecordingWarning": "Are you sure you would like to stop the recording?",
"stopLiveStreaming": "Stop live streaming",
@@ -396,14 +396,21 @@
"busy": "We're working on freeing streaming resources. Please try again in a few minutes.",
"busyTitle": "All streamers are currently busy",
"buttonTooltip": "Start / Stop Live Stream",
+ "changeSignIn": "Switch accounts.",
+ "choose": "Choose a live stream",
+ "chooseCTA": "Choose a streaming option. You're currently logged in as __email__.",
+ "enterStreamKey": "Enter your YouTube live stream key here.",
"error": "Live Streaming failed. Please try again.",
+ "errorAPI": "An error occurred while accessing your YouTube broadcasts. Please try logging in again.",
"failedToStart": "Live Streaming failed to start",
"off": "Live Streaming stopped",
"on": "Live Streaming",
"pending": "Starting Live Stream...",
"serviceName": "Live Streaming service",
- "streamIdRequired": "Please fill in the stream id in order to launch the Live Streaming.",
- "streamIdHelp": "Where do I find this?",
+ "signIn": "Sign in with Google",
+ "signInCTA": "Sign in or enter your live stream key from YouTube.",
+ "start": "Start a livestream",
+ "streamIdHelp": "What's this?",
"unavailableTitle": "Live Streaming unavailable"
},
"videoSIPGW":
diff --git a/modules/UI/recording/Recording.js b/modules/UI/recording/Recording.js
index 2151d1b99f..fcbdca41e2 100644
--- a/modules/UI/recording/Recording.js
+++ b/modules/UI/recording/Recording.js
@@ -20,6 +20,7 @@ import UIEvents from '../../../service/UI/UIEvents';
import UIUtil from '../util/UIUtil';
import VideoLayout from '../videolayout/VideoLayout';
+import { openDialog } from '../../../react/features/base/dialog';
import {
JitsiRecordingStatus
} from '../../../react/features/base/lib-jitsi-meet';
@@ -31,6 +32,8 @@ import {
import { setToolboxEnabled } from '../../../react/features/toolbox';
import { setNotificationsEnabled } from '../../../react/features/notifications';
import {
+ StartLiveStreamDialog,
+ StopLiveStreamDialog,
hideRecordingLabel,
updateRecordingState
} from '../../../react/features/recording';
@@ -102,91 +105,11 @@ function _isRecordingButtonEnabled() {
* @returns {Promise}
*/
function _requestLiveStreamId() {
- const cancelButton
- = APP.translation.generateTranslationHTML('dialog.Cancel');
- const backButton = APP.translation.generateTranslationHTML('dialog.Back');
- const startStreamingButton
- = APP.translation.generateTranslationHTML('dialog.startLiveStreaming');
- const streamIdRequired
- = APP.translation.generateTranslationHTML(
- 'liveStreaming.streamIdRequired');
- const streamIdHelp
- = APP.translation.generateTranslationHTML(
- 'liveStreaming.streamIdHelp');
-
- return new Promise((resolve, reject) => {
- dialog = APP.UI.messageHandler.openDialogWithStates({
- state0: {
- titleKey: 'dialog.liveStreaming',
- html:
- ` this._onSelect(broadcast.boundStreamID) }>
+ { broadcast.title }
+
+ );
+ const selected = this.props.broadcasts.find(
+ broadcast => broadcast.boundStreamID === selectedBroadcastID);
+ const triggerText = (selected && selected.title)
+ || t('liveStreaming.choose');
+
+ return (
+
+
+
+ { dropdownItems }
+
+
+
+ );
+ }
+
+ /**
+ * Transforms the passed in broadcasts into an array of objects that can
+ * be parsed by {@code DropdownMenuStateless}.
+ *
+ * @param {Array} broadcasts - The YouTube broadcasts to display.
+ * @private
+ * @returns {Array}
+ */
+ _formatBroadcasts(broadcasts) {
+ return broadcasts.map(broadcast => {
+ return {
+ content: broadcast.title,
+ value: broadcast
+ };
+ });
+ }
+
+ /**
+ * Sets the dropdown to be displayed or not based on the passed in event.
+ *
+ * @param {Object} dropdownEvent - The event passed from
+ * {@code DropdownMenuStateless} indicating if the dropdown should be open
+ * or closed.
+ * @private
+ * @returns {void}
+ */
+ _onDropdownOpenChange(dropdownEvent) {
+ this.setState({
+ isDropdownOpen: dropdownEvent.isOpen
+ });
+ }
+
+ /**
+ * Callback invoked when an item has been clicked in the dropdown menu.
+ *
+ * @param {Object} boundStreamID - The bound stream ID for the selected
+ * broadcast.
+ * @returns {void}
+ */
+ _onSelect(boundStreamID) {
+ this.props.onBroadcastSelected(boundStreamID);
+ }
+}
+
+export default translate(BroadcastsDropdown);
diff --git a/react/features/recording/components/LiveStream/GoogleSignInButton.native.js b/react/features/recording/components/LiveStream/GoogleSignInButton.native.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/react/features/recording/components/LiveStream/GoogleSignInButton.web.js b/react/features/recording/components/LiveStream/GoogleSignInButton.web.js
new file mode 100644
index 0000000000..e6854a857e
--- /dev/null
+++ b/react/features/recording/components/LiveStream/GoogleSignInButton.web.js
@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+
+/**
+ * A React Component showing a button to sign in with Google.
+ *
+ * @extends Component
+ */
+export default class GoogleSignInButton extends Component {
+ /**
+ * {@code GoogleSignInButton} component's property types.
+ *
+ * @static
+ */
+ static propTypes = {
+ /**
+ * The callback to invoke when the button is clicked.
+ */
+ onClick: PropTypes.func,
+
+ /**
+ * The text to display in the button.
+ */
+ text: PropTypes.string
+ };
+
+ /**
+ * Implements React's {@link Component#render()}.
+ *
+ * @inheritdoc
+ * @returns {ReactElement}
+ */
+ render() {
+ return (
+
+
+
+ { this.props.text }
+
+
+
+ { _googleApiApplicationClientID
+ ? this._renderYouTubePanel() : null }
+
+
+ );
+ }
+
+ /**
+ * Loads the Google web client application used for fetching stream keys.
+ * If the user is already logged in, then a request for available YouTube
+ * broadcasts is also made.
+ *
+ * @private
+ * @returns {Promise}
+ */
+ _onInitializeGoogleApi() {
+ return googleApi.get()
+ .then(() => googleApi.initializeClient(
+ this.props._googleApiApplicationClientID))
+ .then(() => this._setStateIfMounted({
+ googleAPIState: GOOGLE_API_STATES.LOADED
+ }))
+ .then(() => googleApi.isSignedIn())
+ .then(isSignedIn => {
+ if (isSignedIn) {
+ return this._onGetYouTubeBroadcasts();
+ }
+ })
+ .catch(() => {
+ this._setStateIfMounted({
+ googleAPIState: GOOGLE_API_STATES.ERROR
+ });
+ });
+ }
+
+ /**
+ * Invokes the passed in {@link onCancel} callback and closes
+ * {@code StartLiveStreamDialog}.
+ *
+ * @private
+ * @returns {boolean} True is returned to close the modal.
+ */
+ _onCancel() {
+ this.props.onCancel(APP.UI.messageHandler.CANCEL);
+
+ return true;
+ }
+
+ /**
+ * Asks the user to sign in, if not already signed in, and then requests a
+ * list of the user's YouTube broadcasts.
+ *
+ * @private
+ * @returns {Promise}
+ */
+ _onGetYouTubeBroadcasts() {
+ return googleApi.get()
+ .then(() => googleApi.signInIfNotSignedIn())
+ .then(() => googleApi.getCurrentUserProfile())
+ .then(profile => {
+ this._setStateIfMounted({
+ googleProfileEmail: profile.getEmail(),
+ googleAPIState: GOOGLE_API_STATES.SIGNED_IN
+ });
+ })
+ .then(() => googleApi.requestAvailableYouTubeBroadcasts())
+ .then(response => {
+ const broadcasts = response.result.items.map(item => {
+ return {
+ title: item.snippet.title,
+ boundStreamID: item.contentDetails.boundStreamId,
+ status: item.status.lifeCycleStatus
+ };
+ });
+
+ this._setStateIfMounted({
+ broadcasts
+ });
+
+ if (broadcasts.length === 1 && !this.state.streamKey) {
+ const broadcast = broadcasts[0];
+
+ this._onYouTubeBroadcastIDSelected(broadcast.boundStreamID);
+ }
+ })
+ .catch(response => {
+ // Only show an error if an external request was made with the
+ // Google api. Do not error if the login in canceled.
+ if (response && response.result) {
+ this._setStateIfMounted({
+ googleAPIState: GOOGLE_API_STATES.ERROR
+ });
+ }
+ });
+ }
+
+ /**
+ * Forces the Google web client application to prompt for a sign in, such as
+ * when changing account, and will then fetch available YouTube broadcasts.
+ *
+ * @private
+ * @returns {Promise}
+ */
+ _onRequestGoogleSignIn() {
+ return googleApi.showAccountSelection()
+ .then(() => this._setStateIfMounted({ broadcasts: undefined }))
+ .then(() => this._onGetYouTubeBroadcasts());
+ }
+
+ /**
+ * Callback invoked to update the {@code StartLiveStreamDialog} component's
+ * display of the entered YouTube stream key.
+ *
+ * @param {Object} event - DOM Event for value change.
+ * @private
+ * @returns {void}
+ */
+ _onStreamKeyChange(event) {
+ this._setStateIfMounted({
+ streamKey: event.target.value,
+ selectedBroadcastID: undefined
+ });
+ }
+
+ /**
+ * Invokes the passed in {@link onSubmit} callback with the entered stream
+ * key, and then closes {@code StartLiveStreamDialog}.
+ *
+ * @private
+ * @returns {boolean} False if no stream key is entered to preventing
+ * closing, true to close the modal.
+ */
+ _onSubmit() {
+ if (!this.state.streamKey) {
+ return false;
+ }
+
+ this.props.onSubmit(this.state.streamKey);
+
+ return true;
+ }
+
+ /**
+ * Fetches the stream key for a YouTube broadcast and updates the internal
+ * state to display the associated stream key as being entered.
+ *
+ * @param {string} boundStreamID - The bound stream ID associated with the
+ * broadcast from which to get the stream key.
+ * @private
+ * @returns {Promise}
+ */
+ _onYouTubeBroadcastIDSelected(boundStreamID) {
+ return googleApi.requestLiveStreamsForYouTubeBroadcast(boundStreamID)
+ .then(response => {
+ const found = response.result.items[0];
+ const streamKey = found.cdn.ingestionInfo.streamName;
+
+ this._setStateIfMounted({
+ streamKey,
+ selectedBroadcastID: boundStreamID
+ });
+ });
+ }
+
+ /**
+ * Renders a React Element for authenticating with the Google web client.
+ *
+ * @private
+ * @returns {ReactElement}
+ */
+ _renderYouTubePanel() {
+ const { t } = this.props;
+ const {
+ broadcasts,
+ googleProfileEmail,
+ selectedBroadcastID
+ } = this.state;
+
+ let googleContent, helpText;
+
+ switch (this.state.googleAPIState) {
+ case GOOGLE_API_STATES.LOADED:
+ googleContent = ( // eslint-disable-line no-extra-parens
+
+
+ { helpText }
+
+
+ { googleContent }
+
+
+ { this.props.t('dialog.stopStreamingWarning') }
+
+ );
+ }
+
+ /**
+ * Callback invoked when stopping of live streaming is confirmed.
+ *
+ * @private
+ * @returns {boolean} True to close the modal.
+ */
+ _onSubmit() {
+ this.props.onSubmit();
+
+ return true;
+ }
+}
+
+export default translate(StopLiveStreamDialog);
diff --git a/react/features/recording/components/LiveStream/StreamKeyForm.native.js b/react/features/recording/components/LiveStream/StreamKeyForm.native.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/react/features/recording/components/LiveStream/StreamKeyForm.web.js b/react/features/recording/components/LiveStream/StreamKeyForm.web.js
new file mode 100644
index 0000000000..7e5c711ead
--- /dev/null
+++ b/react/features/recording/components/LiveStream/StreamKeyForm.web.js
@@ -0,0 +1,115 @@
+import { FieldTextStateless } from '@atlaskit/field-text';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+
+import { translate } from '../../../base/i18n';
+
+/**
+ * A React Component for entering a key for starting a YouTube live stream.
+ *
+ * @extends Component
+ */
+class StreamKeyForm extends Component {
+ /**
+ * {@code StreamKeyForm} component's property types.
+ *
+ * @static
+ */
+ static propTypes = {
+ /**
+ * The URL to the page with more information for manually finding the
+ * stream key for a YouTube broadcast.
+ */
+ helpURL: PropTypes.string,
+
+ /**
+ * Callback invoked when the entered stream key has changed.
+ */
+ onChange: PropTypes.func,
+
+ /**
+ * Invoked to obtain translated strings.
+ */
+ t: PropTypes.func,
+
+ /**
+ * The stream key value to display as having been entered so far.
+ */
+ value: PropTypes.string
+ };
+
+ /**
+ * Initializes a new {@code StreamKeyForm} instance.
+ *
+ * @param {Props} props - The React {@code Component} props to initialize
+ * the new {@code StreamKeyForm} instance with.
+ */
+ constructor(props) {
+ super(props);
+
+ // Bind event handlers so they are only bound once per instance.
+ this._onInputChange = this._onInputChange.bind(this);
+ this._onOpenHelp = this._onOpenHelp.bind(this);
+ }
+
+ /**
+ * Implements React's {@link Component#render()}.
+ *
+ * @inheritdoc
+ * @returns {ReactElement}
+ */
+ render() {
+ const { t } = this.props;
+
+ return (
+
+
+ { this.props.helpURL
+ ?
+ : null
+ }
+