Browse Source

Fixes streaming tooltip. Checks if the stream id is not provided and requests the user before starting the recorder.

j8
yanas 9 years ago
parent
commit
39c350cdba
4 changed files with 97 additions and 34 deletions
  1. 1
    1
      css/videolayout_default.css
  2. 1
    1
      index.html
  3. 5
    3
      lang/main.json
  4. 90
    29
      modules/UI/recording/Recording.js

+ 1
- 1
css/videolayout_default.css View File

513
 
513
 
514
 .moveToCorner {
514
 .moveToCorner {
515
     top: 5px;
515
     top: 5px;
516
-    right: 5px;
516
+    right: 50px; /*leave free space for the HD label*/
517
     margin-right: 0px;
517
     margin-right: 0px;
518
     margin-left: auto;
518
     margin-left: auto;
519
     background: rgba(0,0,0,.3);
519
     background: rgba(0,0,0,.3);

+ 1
- 1
index.html View File

116
                     </span>
116
                     </span>
117
                     <a class="button icon-microphone" id="toolbar_button_mute" data-container="body" data-toggle="popover" data-placement="bottom" shortcut="mutePopover" data-i18n="[content]toolbar.mute" content="Mute / Unmute"></a>
117
                     <a class="button icon-microphone" id="toolbar_button_mute" data-container="body" data-toggle="popover" data-placement="bottom" shortcut="mutePopover" data-i18n="[content]toolbar.mute" content="Mute / Unmute"></a>
118
                     <a class="button icon-camera" id="toolbar_button_camera" data-container="body" data-toggle="popover" data-placement="bottom" shortcut="toggleVideoPopover" data-i18n="[content]toolbar.videomute" content="Start / stop camera"></a>
118
                     <a class="button icon-camera" id="toolbar_button_camera" data-container="body" data-toggle="popover" data-placement="bottom" shortcut="toggleVideoPopover" data-i18n="[content]toolbar.videomute" content="Start / stop camera"></a>
119
-                    <a class="button" id="toolbar_button_record" data-container="body" data-toggle="popover" data-placement="bottom" data-i18n="[content]toolbar.record" content="Record" style="display: none"></a>
119
+                    <a class="button" id="toolbar_button_record" data-container="body" data-toggle="popover" data-placement="bottom" style="display: none"></a>
120
                     <a class="button icon-security" id="toolbar_button_security" data-container="body" data-toggle="popover" data-placement="bottom" data-i18n="[content]toolbar.lock" content="Lock / unlock room"></a>
120
                     <a class="button icon-security" id="toolbar_button_security" data-container="body" data-toggle="popover" data-placement="bottom" data-i18n="[content]toolbar.lock" content="Lock / unlock room"></a>
121
                     <a class="button icon-link" id="toolbar_button_link" data-container="body" data-toggle="popover" data-placement="bottom" data-i18n="[content]toolbar.invite" content="Invite others"></a>
121
                     <a class="button icon-link" id="toolbar_button_link" data-container="body" data-toggle="popover" data-placement="bottom" data-i18n="[content]toolbar.invite" content="Invite others"></a>
122
                     <a class="button icon-chat" id="toolbar_button_chat" data-container="body" data-toggle="popover" shortcut="toggleChatPopover" data-placement="bottom" data-i18n="[content]toolbar.chat" content="Open / close chat">
122
                     <a class="button icon-chat" id="toolbar_button_chat" data-container="body" data-toggle="popover" shortcut="toggleChatPopover" data-placement="bottom" data-i18n="[content]toolbar.chat" content="Open / close chat">

+ 5
- 3
lang/main.json View File

51
         "mute": "Mute / Unmute",
51
         "mute": "Mute / Unmute",
52
         "videomute": "Start / stop camera",
52
         "videomute": "Start / stop camera",
53
         "authenticate": "Authenticate",
53
         "authenticate": "Authenticate",
54
-        "record": "Toggle recording",
55
         "lock": "Lock / unlock room",
54
         "lock": "Lock / unlock room",
56
         "invite": "Invite others",
55
         "invite": "Invite others",
57
         "chat": "Open / close chat",
56
         "chat": "Open / close chat",
264
         "pending": "Recording waiting for a participant to join...",
263
         "pending": "Recording waiting for a participant to join...",
265
         "on": "Recording",
264
         "on": "Recording",
266
         "off": "Recording stopped",
265
         "off": "Recording stopped",
267
-        "failedToStart": "Recording failed to start"
266
+        "failedToStart": "Recording failed to start",
267
+        "buttonTooltip": "Start / stop recording"
268
     },
268
     },
269
     "liveStreaming":
269
     "liveStreaming":
270
     {
270
     {
272
         "on": "Live Streaming",
272
         "on": "Live Streaming",
273
         "off": "Live Streaming Stopped",
273
         "off": "Live Streaming Stopped",
274
         "unavailable": "The live streaming service is currently unavailable. Please try again later.",
274
         "unavailable": "The live streaming service is currently unavailable. Please try again later.",
275
-        "failedToStart": "Live streaming failed to start"
275
+        "failedToStart": "Live streaming failed to start",
276
+        "buttonTooltip": "Start / stop live stream",
277
+        "streamIdRequired": "Please fill in the stream id in order to launch the live streaming."
276
     }
278
     }
277
 }
279
 }

+ 90
- 29
modules/UI/recording/Recording.js View File

32
  * @returns {Promise}
32
  * @returns {Promise}
33
  */
33
  */
34
 function _requestLiveStreamId() {
34
 function _requestLiveStreamId() {
35
-    let msg = APP.translation.generateTranslationHTML("dialog.liveStreaming");
36
-    let token = APP.translation.translateString("dialog.streamKey");
35
+    const msg = APP.translation.generateTranslationHTML("dialog.liveStreaming");
36
+    const token = APP.translation.translateString("dialog.streamKey");
37
+    const cancelButton
38
+        = APP.translation.generateTranslationHTML("dialog.Cancel");
39
+    const backButton = APP.translation.generateTranslationHTML("dialog.Back");
40
+    const startStreamingButton
41
+        = APP.translation.generateTranslationHTML("dialog.startLiveStreaming");
42
+    const streamIdRequired
43
+        = APP.translation.generateTranslationHTML(
44
+            "liveStreaming.streamIdRequired");
45
+
37
     return new Promise(function (resolve, reject) {
46
     return new Promise(function (resolve, reject) {
38
-        APP.UI.messageHandler.openTwoButtonDialog(
39
-            null, null, null,
40
-            `<h2>${msg}</h2>
41
-             <input name="streamId" type="text"
47
+        let dialog = APP.UI.messageHandler.openDialogWithStates({
48
+            state0: {
49
+                html:
50
+                    `<h2>${msg}</h2>
51
+                    <input name="streamId" type="text"
42
                     data-i18n="[placeholder]dialog.streamKey"
52
                     data-i18n="[placeholder]dialog.streamKey"
43
                     placeholder="${token}" autofocus>`,
53
                     placeholder="${token}" autofocus>`,
44
-            false, "dialog.startLiveStreaming",
45
-            function (e, v, m, f) {
46
-                if (v && f.streamId) {
47
-                    resolve(UIUtil.escapeHtml(f.streamId));
48
-                } else {
49
-                    reject();
54
+                persistent: false,
55
+                buttons: [
56
+                    {title: cancelButton, value: false},
57
+                    {title: startStreamingButton, value: true}
58
+                ],
59
+                focus: ':input:first',
60
+                defaultButton: 1,
61
+                submit: function (e, v, m, f) {
62
+                    e.preventDefault();
63
+
64
+                    if (v) {
65
+                        if (f.streamId && f.streamId.length > 0) {
66
+                            resolve(UIUtil.escapeHtml(f.streamId));
67
+                            dialog.close();
68
+                            return;
69
+                        }
70
+                        else {
71
+                            dialog.goToState('state1');
72
+                            return false;
73
+                        }
74
+                    } else {
75
+                        reject();
76
+                        dialog.close();
77
+                        return false;
78
+                    }
50
                 }
79
                 }
51
             },
80
             },
52
-            null,
53
-            function () { },
54
-            ':input:first'
55
-        );
81
+
82
+            state1: {
83
+                html: `<h2>${msg}</h2> ${streamIdRequired}`,
84
+                persistent: false,
85
+                buttons: [
86
+                    {title: cancelButton, value: false},
87
+                    {title: backButton, value: true}
88
+                ],
89
+                focus: ':input:first',
90
+                defaultButton: 1,
91
+                submit: function (e, v, m, f) {
92
+                    e.preventDefault();
93
+                    if (v === 0) {
94
+                        reject();
95
+                        dialog.close();
96
+                    } else {
97
+                        dialog.goToState('state0');
98
+                    }
99
+                }
100
+            }
101
+        });
56
     });
102
     });
57
 }
103
 }
58
 
104
 
129
         selector.removeClass(moveToCornerClass);
175
         selector.removeClass(moveToCornerClass);
130
 }
176
 }
131
 
177
 
178
+var Status = {
179
+    ON: "on",
180
+    OFF: "off",
181
+    AVAILABLE: "available",
182
+    UNAVAILABLE: "unavailable",
183
+    PENDING: "pending"
184
+}
185
+
132
 var Recording = {
186
 var Recording = {
133
     /**
187
     /**
134
      * Initializes the recording UI.
188
      * Initializes the recording UI.
135
      */
189
      */
136
     init (emitter, recordingType) {
190
     init (emitter, recordingType) {
137
         this.eventEmitter = emitter;
191
         this.eventEmitter = emitter;
192
+        // Use recorder states directly from the library.
193
+        this.currentState = Status.UNAVAILABLE;
138
 
194
 
139
         this.initRecordingButton(recordingType);
195
         this.initRecordingButton(recordingType);
140
     },
196
     },
148
             this.recordingOffKey = "liveStreaming.off";
204
             this.recordingOffKey = "liveStreaming.off";
149
             this.recordingPendingKey = "liveStreaming.pending";
205
             this.recordingPendingKey = "liveStreaming.pending";
150
             this.failedToStartKey = "liveStreaming.failedToStart";
206
             this.failedToStartKey = "liveStreaming.failedToStart";
207
+            this.recordingButtonTooltip = "liveStreaming.buttonTooltip";
151
         }
208
         }
152
         else {
209
         else {
153
             this.baseClass = "icon-recEnable";
210
             this.baseClass = "icon-recEnable";
155
             this.recordingOffKey = "recording.off";
212
             this.recordingOffKey = "recording.off";
156
             this.recordingPendingKey = "recording.pending";
213
             this.recordingPendingKey = "recording.pending";
157
             this.failedToStartKey = "recording.failedToStart";
214
             this.failedToStartKey = "recording.failedToStart";
215
+            this.recordingButtonTooltip = "recording.buttonTooltip";
158
         }
216
         }
159
 
217
 
160
         selector.addClass(this.baseClass);
218
         selector.addClass(this.baseClass);
219
+        selector.attr("data-i18n", "[content]" + this.recordingButtonTooltip);
220
+        selector.attr("content",
221
+            APP.translation.translateString(this.recordingButtonTooltip));
161
 
222
 
162
         var self = this;
223
         var self = this;
163
         selector.click(function () {
224
         selector.click(function () {
164
-            console.log("BUTTON CLICKED", self.currentState);
165
             switch (self.currentState) {
225
             switch (self.currentState) {
166
-                case "on": {
226
+                case Status.ON:
227
+                case Status.PENDING: {
167
                     _showStopRecordingPrompt(recordingType).then(() =>
228
                     _showStopRecordingPrompt(recordingType).then(() =>
168
                         self.eventEmitter.emit(UIEvents.RECORDING_TOGGLED));
229
                         self.eventEmitter.emit(UIEvents.RECORDING_TOGGLED));
169
-                }
170
                     break;
230
                     break;
171
-                case "available":
172
-                case "off": {
231
+                }
232
+                case Status.AVAILABLE:
233
+                case Status.OFF: {
173
                     if (recordingType === 'jibri')
234
                     if (recordingType === 'jibri')
174
                         _requestLiveStreamId().then((streamId) => {
235
                         _requestLiveStreamId().then((streamId) => {
175
                             self.eventEmitter.emit( UIEvents.RECORDING_TOGGLED,
236
                             self.eventEmitter.emit( UIEvents.RECORDING_TOGGLED,
187
                                 {token: token});
248
                                 {token: token});
188
                         });
249
                         });
189
                     }
250
                     }
190
-                }
191
                     break;
251
                     break;
252
+                }
192
                 default: {
253
                 default: {
193
                     APP.UI.messageHandler.openMessageDialog(
254
                     APP.UI.messageHandler.openMessageDialog(
194
                         "dialog.liveStreaming",
255
                         "dialog.liveStreaming",
222
         let labelSelector = $('#recordingLabel');
283
         let labelSelector = $('#recordingLabel');
223
 
284
 
224
         // TODO: handle recording state=available
285
         // TODO: handle recording state=available
225
-        if (recordingState === 'on') {
286
+        if (recordingState === Status.ON) {
226
 
287
 
227
             buttonSelector.removeClass(this.baseClass);
288
             buttonSelector.removeClass(this.baseClass);
228
             buttonSelector.addClass(this.baseClass + " active");
289
             buttonSelector.addClass(this.baseClass + " active");
231
             moveToCorner(labelSelector, true, 3000);
292
             moveToCorner(labelSelector, true, 3000);
232
             labelSelector
293
             labelSelector
233
                 .text(APP.translation.translateString(this.recordingOnKey));
294
                 .text(APP.translation.translateString(this.recordingOnKey));
234
-        } else if (recordingState === 'off'
235
-                    || recordingState === 'unavailable') {
295
+        } else if (recordingState === Status.OFF
296
+                    || recordingState === Status.UNAVAILABLE) {
236
 
297
 
237
             // We don't want to do any changes if this is
298
             // We don't want to do any changes if this is
238
             // an availability change.
299
             // an availability change.
239
-            if (this.currentState === "available"
240
-                || this.currentState === "unavailable")
300
+            if (this.currentState === Status.AVAILABLE
301
+                || this.currentState === Status.UNAVAILABLE)
241
                 return;
302
                 return;
242
 
303
 
243
             buttonSelector.removeClass(this.baseClass + " active");
304
             buttonSelector.removeClass(this.baseClass + " active");
245
 
306
 
246
             moveToCorner(labelSelector, false);
307
             moveToCorner(labelSelector, false);
247
             let messageKey;
308
             let messageKey;
248
-            if (this.currentState === "pending")
309
+            if (this.currentState === Status.PENDING)
249
                 messageKey = this.failedToStartKey;
310
                 messageKey = this.failedToStartKey;
250
             else
311
             else
251
                 messageKey = this.recordingOffKey;
312
                 messageKey = this.recordingOffKey;
257
                 $('#recordingLabel').css({display: "none"});
318
                 $('#recordingLabel').css({display: "none"});
258
             }, 5000);
319
             }, 5000);
259
         }
320
         }
260
-        else if (recordingState === 'pending') {
321
+        else if (recordingState === Status.PENDING) {
261
 
322
 
262
             buttonSelector.removeClass(this.baseClass + " active");
323
             buttonSelector.removeClass(this.baseClass + " active");
263
             buttonSelector.addClass(this.baseClass);
324
             buttonSelector.addClass(this.baseClass);

Loading…
Cancel
Save