feat(recording): use google api to get stream key (jitsi#2481)

* feat(recording): use google api to get stream key * squash: renaming pass * squash: return full load promise * sqush: use google api state enum * squash: workaround for lib not loading * another new design... * increase timeout workaround for gapi load issue * styling pass * tweak copy * squash: auto select first broadcast
DyncMing · Mar 21, 2018 · 823481d · 823481d
1 parent b5b9930
commit 823481d
Show file tree

Hide file tree

Showing 18 changed files with 1,225 additions and 104 deletions.
diff --git 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
@@ -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
diff --git 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
@@ -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:
-                    `<input  class="input-control"
-                    name="streamId" type="text"
-                    data-i18n="[placeholder]dialog.streamKey"
-                    autofocus><div style="text-align: right">
-                    <a class="helper-link" target="_new"
-                    href="${interfaceConfig.LIVE_STREAMING_HELP_LINK}">${
-    streamIdHelp
-}</a></div>`,
-                persistent: false,
-                buttons: [
-                    { title: cancelButton,
-                        value: false },
-                    { title: startStreamingButton,
-                        value: true }
-                ],
-                focus: ':input:first',
-                defaultButton: 1,
-                submit(e, v, m, f) { // eslint-disable-line max-params
-                    e.preventDefault();
-
-                    if (v) {
-                        if (f.streamId && f.streamId.length > 0) {
-                            resolve(UIUtil.escapeHtml(f.streamId));
-                            dialog.close();
-
-                            return;
-                        }
-                        dialog.goToState('state1');
-
-                        return false;
-
-                    }
-                    reject(APP.UI.messageHandler.CANCEL);
-                    dialog.close();
-
-                    return false;
-
-                }
-            },
-
-            state1: {
-                titleKey: 'dialog.liveStreaming',
-                html: streamIdRequired,
-                persistent: false,
-                buttons: [
-                    { title: cancelButton,
-                        value: false },
-                    { title: backButton,
-                        value: true }
-                ],
-                focus: ':input:first',
-                defaultButton: 1,
-                submit(e, v) {
-                    e.preventDefault();
-                    if (v === 0) {
-                        reject(APP.UI.messageHandler.CANCEL);
-                        dialog.close();
-                    } else {
-                        dialog.goToState('state0');
-                    }
-                }
-            }
-        }, {
-            close() {
-                dialog = null;
-            }
-        });
-    });
+    return new Promise((resolve, reject) =>
+        APP.store.dispatch(openDialog(StartLiveStreamDialog, {
+            onCancel: reject,
+            onSubmit: resolve
+        })));
 }
 
 /**
@@ -232,25 +155,20 @@ function _requestRecordingToken() {
  * @private
  */
 function _showStopRecordingPrompt(recordingType) {
-    let title;
-    let message;
-    let buttonKey;
-
     if (recordingType === 'jibri') {
-        title = 'dialog.liveStreaming';
-        message = 'dialog.stopStreamingWarning';
-        buttonKey = 'dialog.stopLiveStreaming';
-    } else {
-        title = 'dialog.recording';
-        message = 'dialog.stopRecordingWarning';
-        buttonKey = 'dialog.stopRecording';
+        return new Promise((resolve, reject) => {
+            APP.store.dispatch(openDialog(StopLiveStreamDialog, {
+                onCancel: reject,
+                onSubmit: resolve
+            }));
+        });
     }
 
     return new Promise((resolve, reject) => {
         dialog = APP.UI.messageHandler.openTwoButtonDialog({
-            titleKey: title,
-            msgKey: message,
-            leftButtonKey: buttonKey,
+            titleKey: 'dialog.recording',
+            msgKey: 'dialog.stopRecordingWarning',
+            leftButtonKey: 'dialog.stopRecording',
             submitFunction: (e, v) => (v ? resolve : reject)(),
             closeFunction: () => {
                 dialog = null;

diff --git a/react/features/recording/components/LiveStream/BroadcastsDropdown.native.js b/react/features/recording/components/LiveStream/BroadcastsDropdown.native.js