2018-05-16 14:00:16 +00:00
|
|
|
// @flow
|
2018-03-21 18:26:52 +00:00
|
|
|
|
|
|
|
import Spinner from '@atlaskit/spinner';
|
2018-07-05 11:17:45 +00:00
|
|
|
import React from 'react';
|
2018-03-21 18:26:52 +00:00
|
|
|
import { connect } from 'react-redux';
|
|
|
|
|
|
|
|
import { translate } from '../../../base/i18n';
|
|
|
|
|
2018-08-02 21:56:36 +00:00
|
|
|
import {
|
|
|
|
GOOGLE_API_STATES,
|
Google & Microsoft calendar API integration (#3340)
* Refactor calendar-sync feature to be loaded on web.
For the web part it just adds new property to enable/disable calendar web integration, disabled by default.
* Initial implementation of retrieving google calendar events.
* Initial implementation of retrieving microsoft calendar events.
* Fixes comments.
* Rework to use the promise part of microsoft-graph-client api.
* Moves dispatching some actions, fixing comments.
* Makes sure we do not initializeClient google-api client multiple times.
* Do not try to login when fetching calendar entries.
The case where there is a calendar type google selected, but not logged in, trying to login on loading welcome page will show a warning that it tried to open a popup, which was denied by browser.
* Updates profile display data on sign in.
* Propagate google-api state to calendar-sync only if we use google cal.
* Adds sign out action.
* Clears the event listener when the popup closes.
* Clears calendarIntegrationInstance on signOut.
* WIP: UI for calendar settings, refactor auth flows
* Clean up some unused constants, functions and exports.
* break circular dependency of function and constant
* Exports only isCalendarEnabled from functions.
* Checks isSignedIn when doing fetchCalendarEntries on web.
* address comments
List microsoftApiApplicationClientID in undocument config.
remove unused SET_CALENDAR_TYPE action
use helper for calendar enabled in bootstrap
reorder actions
reorder imports
change order of signin -> set type -> update profile
add logging for signout error
reword setting dialog desc to avoid redundancy
add jsdoc to microsoft button props
reorder calendar constants
move default state to reducer (not reused anywhere)
update comment about calendar-sync due to removal of getCalendarState
update comment for getCalendarIntegration
remove vague comment
alpha order reducer, return default state on reset
alpha order persistence registry
remove unnecessary getType from apis
update comments in microsoftCalendar
alpha order google-api exports, use api.get in loadGoogleAPI
set jsdoc for google signin props
alpha order googleapi methods
fix calendartab docs
* Moves fetching calendar from APP_WILL_MOUNT to SET_CONFIG.
The web part needs configuration in order to refresh tokens (Microsoft).
* Fixes storing token expire time and refreshing tokens in Microsoft impl.
* Address comments
updateProfile changed to getCurrentEmail
rename result to results
stop storing integration in redux, store if ready for use
use existing helpers to parse redirect url
* update jsdocs, get google app id from redux
* clear integration instead of actual sign out
2018-08-15 20:11:54 +00:00
|
|
|
GoogleSignInButton,
|
2018-08-02 21:56:36 +00:00
|
|
|
loadGoogleAPI,
|
|
|
|
requestAvailableYouTubeBroadcasts,
|
|
|
|
requestLiveStreamsForYouTubeBroadcast,
|
|
|
|
showAccountSelection,
|
Google & Microsoft calendar API integration (#3340)
* Refactor calendar-sync feature to be loaded on web.
For the web part it just adds new property to enable/disable calendar web integration, disabled by default.
* Initial implementation of retrieving google calendar events.
* Initial implementation of retrieving microsoft calendar events.
* Fixes comments.
* Rework to use the promise part of microsoft-graph-client api.
* Moves dispatching some actions, fixing comments.
* Makes sure we do not initializeClient google-api client multiple times.
* Do not try to login when fetching calendar entries.
The case where there is a calendar type google selected, but not logged in, trying to login on loading welcome page will show a warning that it tried to open a popup, which was denied by browser.
* Updates profile display data on sign in.
* Propagate google-api state to calendar-sync only if we use google cal.
* Adds sign out action.
* Clears the event listener when the popup closes.
* Clears calendarIntegrationInstance on signOut.
* WIP: UI for calendar settings, refactor auth flows
* Clean up some unused constants, functions and exports.
* break circular dependency of function and constant
* Exports only isCalendarEnabled from functions.
* Checks isSignedIn when doing fetchCalendarEntries on web.
* address comments
List microsoftApiApplicationClientID in undocument config.
remove unused SET_CALENDAR_TYPE action
use helper for calendar enabled in bootstrap
reorder actions
reorder imports
change order of signin -> set type -> update profile
add logging for signout error
reword setting dialog desc to avoid redundancy
add jsdoc to microsoft button props
reorder calendar constants
move default state to reducer (not reused anywhere)
update comment about calendar-sync due to removal of getCalendarState
update comment for getCalendarIntegration
remove vague comment
alpha order reducer, return default state on reset
alpha order persistence registry
remove unnecessary getType from apis
update comments in microsoftCalendar
alpha order google-api exports, use api.get in loadGoogleAPI
set jsdoc for google signin props
alpha order googleapi methods
fix calendartab docs
* Moves fetching calendar from APP_WILL_MOUNT to SET_CONFIG.
The web part needs configuration in order to refresh tokens (Microsoft).
* Fixes storing token expire time and refreshing tokens in Microsoft impl.
* Address comments
updateProfile changed to getCurrentEmail
rename result to results
stop storing integration in redux, store if ready for use
use existing helpers to parse redirect url
* update jsdocs, get google app id from redux
* clear integration instead of actual sign out
2018-08-15 20:11:54 +00:00
|
|
|
signIn,
|
|
|
|
updateProfile
|
2018-08-02 21:56:36 +00:00
|
|
|
} from '../../../google-api';
|
2018-03-21 18:26:52 +00:00
|
|
|
|
2018-07-05 11:17:45 +00:00
|
|
|
import AbstractStartLiveStreamDialog, {
|
|
|
|
_mapStateToProps,
|
|
|
|
type Props
|
|
|
|
} from './AbstractStartLiveStreamDialog';
|
2018-08-10 10:30:00 +00:00
|
|
|
import StreamKeyPicker from './StreamKeyPicker';
|
2018-03-21 18:26:52 +00:00
|
|
|
import StreamKeyForm from './StreamKeyForm';
|
|
|
|
|
2018-05-16 14:00:16 +00:00
|
|
|
/**
|
|
|
|
* A React Component for requesting a YouTube stream key to use for live
|
|
|
|
* streaming of the current conference.
|
|
|
|
*
|
|
|
|
* @extends Component
|
|
|
|
*/
|
2018-07-05 11:17:45 +00:00
|
|
|
class StartLiveStreamDialog
|
2018-08-10 10:30:00 +00:00
|
|
|
extends AbstractStartLiveStreamDialog<Props> {
|
2018-03-21 18:26:52 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Initializes a new {@code StartLiveStreamDialog} instance.
|
|
|
|
*
|
|
|
|
* @param {Props} props - The React {@code Component} props to initialize
|
|
|
|
* the new {@code StartLiveStreamDialog} instance with.
|
|
|
|
*/
|
2018-05-16 14:00:16 +00:00
|
|
|
constructor(props: Props) {
|
2018-03-21 18:26:52 +00:00
|
|
|
super(props);
|
|
|
|
|
|
|
|
// Bind event handlers so they are only bound once per instance.
|
|
|
|
this._onGetYouTubeBroadcasts = this._onGetYouTubeBroadcasts.bind(this);
|
|
|
|
this._onInitializeGoogleApi = this._onInitializeGoogleApi.bind(this);
|
2018-08-02 21:56:36 +00:00
|
|
|
this._onGoogleSignIn = this._onGoogleSignIn.bind(this);
|
2018-03-21 18:26:52 +00:00
|
|
|
this._onRequestGoogleSignIn = this._onRequestGoogleSignIn.bind(this);
|
|
|
|
this._onYouTubeBroadcastIDSelected
|
|
|
|
= this._onYouTubeBroadcastIDSelected.bind(this);
|
|
|
|
|
2018-07-05 11:17:45 +00:00
|
|
|
this._renderDialogContent = this._renderDialogContent.bind(this);
|
2018-03-21 18:26:52 +00:00
|
|
|
}
|
|
|
|
|
2018-08-10 10:30:00 +00:00
|
|
|
/**
|
|
|
|
* Implements {@link Component#componentDidMount()}. Invoked immediately
|
|
|
|
* after this component is mounted.
|
|
|
|
*
|
|
|
|
* @inheritdoc
|
|
|
|
* @returns {void}
|
|
|
|
*/
|
|
|
|
componentDidMount() {
|
|
|
|
super.componentDidMount();
|
|
|
|
|
|
|
|
if (this.props._googleApiApplicationClientID) {
|
|
|
|
this._onInitializeGoogleApi();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-07-05 11:17:45 +00:00
|
|
|
_onInitializeGoogleApi: () => Promise<*>;
|
2018-05-16 14:00:16 +00:00
|
|
|
|
2018-03-21 18:26:52 +00:00
|
|
|
/**
|
|
|
|
* 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() {
|
2018-08-02 21:56:36 +00:00
|
|
|
this.props.dispatch(
|
|
|
|
loadGoogleAPI(this.props._googleApiApplicationClientID))
|
|
|
|
.catch(response => this._parseErrorFromResponse(response));
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Automatically selects the input field's value after starting to edit the
|
|
|
|
* display name.
|
|
|
|
*
|
|
|
|
* @inheritdoc
|
|
|
|
* @returns {void}
|
|
|
|
*/
|
|
|
|
componentDidUpdate(previousProps) {
|
|
|
|
if (previousProps._googleAPIState === GOOGLE_API_STATES.LOADED
|
|
|
|
&& this.props._googleAPIState === GOOGLE_API_STATES.SIGNED_IN) {
|
|
|
|
this._onGetYouTubeBroadcasts();
|
|
|
|
}
|
2018-03-21 18:26:52 +00:00
|
|
|
}
|
|
|
|
|
2018-07-05 11:17:45 +00:00
|
|
|
_onGetYouTubeBroadcasts: () => Promise<*>;
|
2018-05-16 14:00:16 +00:00
|
|
|
|
2018-03-21 18:26:52 +00:00
|
|
|
/**
|
|
|
|
* Asks the user to sign in, if not already signed in, and then requests a
|
|
|
|
* list of the user's YouTube broadcasts.
|
|
|
|
*
|
|
|
|
* @private
|
2018-08-02 21:56:36 +00:00
|
|
|
* @returns {void}
|
2018-03-21 18:26:52 +00:00
|
|
|
*/
|
|
|
|
_onGetYouTubeBroadcasts() {
|
2018-08-02 21:56:36 +00:00
|
|
|
this.props.dispatch(updateProfile())
|
|
|
|
.catch(response => this._parseErrorFromResponse(response));
|
2018-03-21 18:26:52 +00:00
|
|
|
|
2018-08-02 21:56:36 +00:00
|
|
|
this.props.dispatch(requestAvailableYouTubeBroadcasts())
|
|
|
|
.then(broadcasts => {
|
2018-03-21 18:26:52 +00:00
|
|
|
this._setStateIfMounted({
|
|
|
|
broadcasts
|
|
|
|
});
|
|
|
|
|
2018-08-02 21:56:36 +00:00
|
|
|
if (broadcasts.length === 1) {
|
2018-03-21 18:26:52 +00:00
|
|
|
const broadcast = broadcasts[0];
|
|
|
|
|
|
|
|
this._onYouTubeBroadcastIDSelected(broadcast.boundStreamID);
|
|
|
|
}
|
|
|
|
})
|
2018-08-02 21:56:36 +00:00
|
|
|
.catch(response => this._parseErrorFromResponse(response));
|
|
|
|
}
|
|
|
|
|
|
|
|
_onGoogleSignIn: () => Object;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 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}
|
|
|
|
*/
|
|
|
|
_onGoogleSignIn() {
|
|
|
|
this.props.dispatch(signIn())
|
|
|
|
.catch(response => this._parseErrorFromResponse(response));
|
2018-03-21 18:26:52 +00:00
|
|
|
}
|
|
|
|
|
2018-05-16 14:00:16 +00:00
|
|
|
_onRequestGoogleSignIn: () => Object;
|
|
|
|
|
2018-03-21 18:26:52 +00:00
|
|
|
/**
|
|
|
|
* 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() {
|
2018-08-02 21:56:36 +00:00
|
|
|
// when there is an error we show the google sign-in button.
|
|
|
|
// once we click it we want to clear the error from the state
|
|
|
|
this.props.dispatch(showAccountSelection())
|
|
|
|
.then(() =>
|
|
|
|
this._setStateIfMounted({
|
|
|
|
broadcasts: undefined,
|
|
|
|
errorType: undefined
|
|
|
|
}))
|
2018-03-21 18:26:52 +00:00
|
|
|
.then(() => this._onGetYouTubeBroadcasts());
|
|
|
|
}
|
|
|
|
|
2018-07-05 11:17:45 +00:00
|
|
|
_onStreamKeyChange: string => void;
|
2018-03-21 18:26:52 +00:00
|
|
|
|
2018-05-16 14:00:16 +00:00
|
|
|
_onYouTubeBroadcastIDSelected: (string) => Object;
|
|
|
|
|
2018-03-21 18:26:52 +00:00
|
|
|
/**
|
|
|
|
* 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) {
|
2018-08-02 21:56:36 +00:00
|
|
|
this.props.dispatch(
|
|
|
|
requestLiveStreamsForYouTubeBroadcast(boundStreamID))
|
|
|
|
.then(({ streamKey, selectedBoundStreamID }) =>
|
2018-03-21 18:26:52 +00:00
|
|
|
this._setStateIfMounted({
|
|
|
|
streamKey,
|
2018-08-02 21:56:36 +00:00
|
|
|
selectedBoundStreamID
|
|
|
|
}));
|
2018-03-21 18:26:52 +00:00
|
|
|
|
2018-04-13 20:49:24 +00:00
|
|
|
}
|
|
|
|
|
2018-05-30 01:53:52 +00:00
|
|
|
/**
|
2018-08-02 21:56:36 +00:00
|
|
|
* Only show an error if an external request was made with the Google api.
|
|
|
|
* Do not error if the login in canceled.
|
|
|
|
* And searches in a Google API error response for the error type.
|
2018-05-30 01:53:52 +00:00
|
|
|
*
|
|
|
|
* @param {Object} response - The Google API response that may contain an
|
|
|
|
* error.
|
|
|
|
* @private
|
|
|
|
* @returns {string|null}
|
|
|
|
*/
|
|
|
|
_parseErrorFromResponse(response) {
|
2018-08-02 21:56:36 +00:00
|
|
|
|
|
|
|
if (!response || !response.result) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2018-05-30 01:53:52 +00:00
|
|
|
const result = response.result;
|
|
|
|
const error = result.error;
|
|
|
|
const errors = error && error.errors;
|
|
|
|
const firstError = errors && errors[0];
|
|
|
|
|
2018-08-02 21:56:36 +00:00
|
|
|
this._setStateIfMounted({
|
|
|
|
errorType: (firstError && firstError.reason) || null
|
|
|
|
});
|
2018-05-30 01:53:52 +00:00
|
|
|
}
|
|
|
|
|
2018-07-05 11:17:45 +00:00
|
|
|
_renderDialogContent: () => React$Component<*>
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Renders the platform specific dialog content.
|
|
|
|
*
|
|
|
|
* @returns {React$Component}
|
|
|
|
*/
|
|
|
|
_renderDialogContent() {
|
|
|
|
const { _googleApiApplicationClientID } = this.props;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className = 'live-stream-dialog'>
|
|
|
|
{ _googleApiApplicationClientID
|
|
|
|
? this._renderYouTubePanel() : null }
|
|
|
|
<StreamKeyForm
|
|
|
|
onChange = { this._onStreamKeyChange }
|
|
|
|
value = { this.state.streamKey || this.props._streamKey } />
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2018-03-21 18:26:52 +00:00
|
|
|
/**
|
|
|
|
* Renders a React Element for authenticating with the Google web client.
|
|
|
|
*
|
|
|
|
* @private
|
|
|
|
* @returns {ReactElement}
|
|
|
|
*/
|
|
|
|
_renderYouTubePanel() {
|
2018-08-02 21:56:36 +00:00
|
|
|
const {
|
|
|
|
t,
|
|
|
|
_googleProfileEmail
|
|
|
|
} = this.props;
|
2018-03-21 18:26:52 +00:00
|
|
|
const {
|
|
|
|
broadcasts,
|
2018-04-20 17:28:16 +00:00
|
|
|
selectedBoundStreamID
|
2018-03-21 18:26:52 +00:00
|
|
|
} = this.state;
|
|
|
|
|
|
|
|
let googleContent, helpText;
|
|
|
|
|
2018-08-02 21:56:36 +00:00
|
|
|
switch (this.props._googleAPIState) {
|
2018-03-21 18:26:52 +00:00
|
|
|
case GOOGLE_API_STATES.LOADED:
|
2018-08-10 10:30:00 +00:00
|
|
|
googleContent
|
|
|
|
= <GoogleSignInButton onClick = { this._onGoogleSignIn } />;
|
2018-03-21 18:26:52 +00:00
|
|
|
helpText = t('liveStreaming.signInCTA');
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
case GOOGLE_API_STATES.SIGNED_IN:
|
2018-08-06 16:09:32 +00:00
|
|
|
googleContent = (
|
2018-08-10 10:30:00 +00:00
|
|
|
<StreamKeyPicker
|
2018-03-21 18:26:52 +00:00
|
|
|
broadcasts = { broadcasts }
|
|
|
|
onBroadcastSelected = { this._onYouTubeBroadcastIDSelected }
|
2018-04-20 17:28:16 +00:00
|
|
|
selectedBoundStreamID = { selectedBoundStreamID } />
|
2018-03-21 18:26:52 +00:00
|
|
|
);
|
|
|
|
|
|
|
|
/**
|
|
|
|
* FIXME: Ideally this help text would be one translation string
|
|
|
|
* that also accepts the anchor. This can be done using the Trans
|
|
|
|
* component of react-i18next but I couldn't get it working...
|
|
|
|
*/
|
2018-08-06 16:09:32 +00:00
|
|
|
helpText = (
|
2018-03-21 18:26:52 +00:00
|
|
|
<div>
|
|
|
|
{ `${t('liveStreaming.chooseCTA',
|
2018-08-02 21:56:36 +00:00
|
|
|
{ email: _googleProfileEmail })} ` }
|
2018-03-21 18:26:52 +00:00
|
|
|
<a onClick = { this._onRequestGoogleSignIn }>
|
|
|
|
{ t('liveStreaming.changeSignIn') }
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
case GOOGLE_API_STATES.NEEDS_LOADING:
|
|
|
|
default:
|
2018-08-06 16:09:32 +00:00
|
|
|
googleContent = (
|
2018-03-21 18:26:52 +00:00
|
|
|
<Spinner
|
|
|
|
isCompleting = { false }
|
|
|
|
size = 'medium' />
|
|
|
|
);
|
|
|
|
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
2018-08-02 21:56:36 +00:00
|
|
|
if (this.state.errorType !== undefined) {
|
2018-08-06 16:09:32 +00:00
|
|
|
googleContent = (
|
2018-08-02 21:56:36 +00:00
|
|
|
<GoogleSignInButton
|
2018-08-10 10:30:00 +00:00
|
|
|
onClick = { this._onRequestGoogleSignIn } />
|
2018-08-02 21:56:36 +00:00
|
|
|
);
|
|
|
|
helpText = this._getGoogleErrorMessageToDisplay();
|
|
|
|
}
|
|
|
|
|
2018-03-21 18:26:52 +00:00
|
|
|
return (
|
|
|
|
<div className = 'google-panel'>
|
|
|
|
<div className = 'live-stream-cta'>
|
|
|
|
{ helpText }
|
|
|
|
</div>
|
|
|
|
<div className = 'google-api'>
|
|
|
|
{ googleContent }
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2018-07-05 11:17:45 +00:00
|
|
|
_setStateIfMounted: Object => void
|
|
|
|
|
2018-05-30 01:53:52 +00:00
|
|
|
/**
|
|
|
|
* Returns the error message to display for the current error state.
|
|
|
|
*
|
|
|
|
* @private
|
|
|
|
* @returns {string} The error message to display.
|
|
|
|
*/
|
|
|
|
_getGoogleErrorMessageToDisplay() {
|
2018-06-13 15:19:09 +00:00
|
|
|
let text;
|
|
|
|
|
2018-05-30 01:53:52 +00:00
|
|
|
switch (this.state.errorType) {
|
|
|
|
case 'liveStreamingNotEnabled':
|
2018-06-13 15:19:09 +00:00
|
|
|
text = this.props.t(
|
2018-05-30 01:53:52 +00:00
|
|
|
'liveStreaming.errorLiveStreamNotEnabled',
|
2018-08-02 21:56:36 +00:00
|
|
|
{ email: this.props._googleProfileEmail });
|
2018-06-13 15:19:09 +00:00
|
|
|
break;
|
2018-05-30 01:53:52 +00:00
|
|
|
default:
|
2018-06-13 15:19:09 +00:00
|
|
|
text = this.props.t('liveStreaming.errorAPI');
|
|
|
|
break;
|
2018-05-30 01:53:52 +00:00
|
|
|
}
|
2018-06-13 15:19:09 +00:00
|
|
|
|
|
|
|
return <div className = 'google-error'>{ text }</div>;
|
2018-05-30 01:53:52 +00:00
|
|
|
}
|
2018-03-21 18:26:52 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
export default translate(connect(_mapStateToProps)(StartLiveStreamDialog));
|