fix(livestreaming): show separate message for live streaming not enabled (#3063)

lang/main.json

@@ -416,6 +416,7 @@
         "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.",
+        "errorLiveStreamNotEnabled": "Live Streaming is not enabled on __email__. Please enable live streaming or log into an account with live streaming enabled.",
         "failedToStart": "Live Streaming failed to start",
         "off": "Live Streaming stopped",
         "on": "Live Streaming",

react/features/recording/components/LiveStream/StartLiveStreamDialog.web.js

@@ -85,6 +85,12 @@ type State = {
      */
     broadcasts: ?Array<Object>,
 
+    /**
+     * The error type, as provided by Google, for the most recent error
+     * encountered by the Google API.
+     */
+    errorType: ?string,
+
     /**
      * The current state of interactions with the Google API. Determines what
      * Google related UI should display.
@@ -129,6 +135,7 @@ class StartLiveStreamDialog extends Component<Props, State> {
 
         this.state = {
             broadcasts: undefined,
+            errorType: undefined,
             googleAPIState: GOOGLE_API_STATES.NEEDS_LOADING,
             googleProfileEmail: '',
             selectedBoundStreamID: undefined,
@@ -293,6 +300,7 @@ class StartLiveStreamDialog extends Component<Props, State> {
                 // Google api. Do not error if the login in canceled.
                 if (response && response.result) {
                     this._setStateIfMounted({
+                        errorType: this._parseErrorFromResponse(response),
                         googleAPIState: GOOGLE_API_STATES.ERROR
                     });
                 }
@@ -427,6 +435,23 @@ class StartLiveStreamDialog extends Component<Props, State> {
         return Object.values(parsedBroadcasts);
     }
 
+    /**
+     * Searches in a Google API error response for the error type.
+     *
+     * @param {Object} response - The Google API response that may contain an
+     * error.
+     * @private
+     * @returns {string|null}
+     */
+    _parseErrorFromResponse(response) {
+        const result = response.result;
+        const error = result.error;
+        const errors = error && error.errors;
+        const firstError = errors && errors[0];
+
+        return (firstError && firstError.reason) || null;
+    }
+
     /**
      * Renders a React Element for authenticating with the Google web client.
      *
@@ -485,7 +510,7 @@ class StartLiveStreamDialog extends Component<Props, State> {
                     onClick = { this._onRequestGoogleSignIn }
                     text = { t('liveStreaming.signIn') } />
             );
-            helpText = t('liveStreaming.errorAPI');
+            helpText = this._getGoogleErrorMessageToDisplay();
 
             break;
 
@@ -512,6 +537,23 @@ class StartLiveStreamDialog extends Component<Props, State> {
         );
     }
 
+    /**
+     * Returns the error message to display for the current error state.
+     *
+     * @private
+     * @returns {string} The error message to display.
+     */
+    _getGoogleErrorMessageToDisplay() {
+        switch (this.state.errorType) {
+        case 'liveStreamingNotEnabled':
+            return this.props.t(
+                'liveStreaming.errorLiveStreamNotEnabled',
+                { email: this.state.googleProfileEmail });
+        default:
+            return this.props.t('liveStreaming.errorAPI');
+        }
+    }
+
     /**
      * Updates the internal state if the component is still mounted. This is a
      * workaround for all the state setting that occurs after ajax.