Selaa lähdekoodia

React Toolbox

j8
Lyubo Marinov 8 vuotta sitten
vanhempi
commit
1e2d88cd5d
30 muutettua tiedostoa jossa 429 lisäystä ja 437 poistoa
  1. 1
    1
      conference.js
  2. 8
    12
      modules/UI/UI.js
  3. 3
    3
      modules/UI/recording/Recording.js
  4. 4
    4
      modules/UI/shared_video/SharedVideo.js
  5. 5
    5
      modules/UI/side_pannels/chat/Chat.js
  6. 42
    43
      react/features/conference/components/Conference.native.js
  7. 2
    2
      react/features/conference/components/Conference.web.js
  8. 2
    2
      react/features/film-strip/components/FilmStrip.js
  9. 0
    98
      react/features/toolbar/actionTypes.js
  10. 0
    1
      react/features/toolbar/components/index.js
  11. 0
    39
      react/features/toolbar/middleware.js
  12. 95
    0
      react/features/toolbox/actionTypes.js
  13. 57
    52
      react/features/toolbox/actions.native.js
  14. 35
    48
      react/features/toolbox/actions.web.js
  15. 0
    0
      react/features/toolbox/components/AbstractToolbarButton.js
  16. 0
    0
      react/features/toolbox/components/Notice.js
  17. 5
    7
      react/features/toolbox/components/PrimaryToolbar.web.js
  18. 5
    6
      react/features/toolbox/components/SecondaryToolbar.web.js
  19. 6
    5
      react/features/toolbox/components/Toolbar.web.js
  20. 0
    0
      react/features/toolbox/components/ToolbarButton.native.js
  21. 0
    0
      react/features/toolbox/components/ToolbarButton.web.js
  22. 5
    5
      react/features/toolbox/components/Toolbox.native.js
  23. 27
    26
      react/features/toolbox/components/Toolbox.web.js
  24. 1
    0
      react/features/toolbox/components/index.js
  25. 3
    2
      react/features/toolbox/components/styles.js
  26. 20
    20
      react/features/toolbox/defaultToolbarButtons.js
  27. 22
    20
      react/features/toolbox/functions.js
  28. 0
    0
      react/features/toolbox/index.js
  29. 39
    0
      react/features/toolbox/middleware.js
  30. 42
    36
      react/features/toolbox/reducer.js

+ 1
- 1
conference.js Näytä tiedosto

20
 
20
 
21
 import EventEmitter from "events";
21
 import EventEmitter from "events";
22
 
22
 
23
-import { showDesktopSharingButton } from './react/features/toolbar';
23
+import { showDesktopSharingButton } from './react/features/toolbox';
24
 
24
 
25
 import {
25
 import {
26
     AVATAR_ID_COMMAND,
26
     AVATAR_ID_COMMAND,

+ 8
- 12
modules/UI/UI.js Näytä tiedosto

29
 } from '../../react/features/base/media';
29
 } from '../../react/features/base/media';
30
 import {
30
 import {
31
     checkAutoEnableDesktopSharing,
31
     checkAutoEnableDesktopSharing,
32
-    dockToolbar,
32
+    dockToolbox,
33
     setAudioIconEnabled,
33
     setAudioIconEnabled,
34
     setToolbarButton,
34
     setToolbarButton,
35
     setVideoIconEnabled,
35
     setVideoIconEnabled,
37
     showEtherpadButton,
37
     showEtherpadButton,
38
     showSharedVideoButton,
38
     showSharedVideoButton,
39
     showSIPCallButton,
39
     showSIPCallButton,
40
-    showToolbar
41
-} from '../../react/features/toolbar';
40
+    showToolbox
41
+} from '../../react/features/toolbox';
42
 
42
 
43
 var EventEmitter = require("events");
43
 var EventEmitter = require("events");
44
 UI.messageHandler = require("./util/MessageHandler");
44
 UI.messageHandler = require("./util/MessageHandler");
202
  * Sets the local "raised hand" status.
202
  * Sets the local "raised hand" status.
203
  */
203
  */
204
 UI.setLocalRaisedHandStatus
204
 UI.setLocalRaisedHandStatus
205
-    = raisedHandStatus => 
205
+    = raisedHandStatus =>
206
         VideoLayout.setRaisedHandStatus(
206
         VideoLayout.setRaisedHandStatus(
207
             APP.conference.getMyUserId(),
207
             APP.conference.getMyUserId(),
208
             raisedHandStatus);
208
             raisedHandStatus);
739
     videos[videoIndex].click();
739
     videos[videoIndex].click();
740
 };
740
 };
741
 
741
 
742
-//Used by torture
743
-UI.showToolbar = function (timeout) {
744
-    APP.store.dispatch(showToolbar(timeout));
745
-};
742
+// Used by torture.
743
+UI.showToolbar = timeout => APP.store.dispatch(showToolbox(timeout));
746
 
744
 
747
-//Used by torture
748
-UI.dockToolbar = function (isDock) {
749
-    APP.store.dispatch(dockToolbar(isDock));
750
-};
745
+// Used by torture.
746
+UI.dockToolbar = dock => APP.store.dispatch(dockToolbox(dock));
751
 
747
 
752
 /**
748
 /**
753
  * Updates the avatar for participant.
749
  * Updates the avatar for participant.

+ 3
- 3
modules/UI/recording/Recording.js Näytä tiedosto

21
 import VideoLayout from '../videolayout/VideoLayout';
21
 import VideoLayout from '../videolayout/VideoLayout';
22
 import Feedback from '../feedback/Feedback.js';
22
 import Feedback from '../feedback/Feedback.js';
23
 
23
 
24
-import { hideToolbar } from '../../../react/features/toolbar';
24
+import { hideToolbox } from '../../../react/features/toolbox';
25
 
25
 
26
 /**
26
 /**
27
  * The dialog for user input.
27
  * The dialog for user input.
65
                     name="streamId" type="text"
65
                     name="streamId" type="text"
66
                     data-i18n="[placeholder]dialog.streamKey"
66
                     data-i18n="[placeholder]dialog.streamKey"
67
                     autofocus><div style="text-align: right">
67
                     autofocus><div style="text-align: right">
68
-                    <a class="helper-link" target="_new" 
68
+                    <a class="helper-link" target="_new"
69
                     href="${interfaceConfig.LIVE_STREAMING_HELP_LINK}">`
69
                     href="${interfaceConfig.LIVE_STREAMING_HELP_LINK}">`
70
                         + streamIdHelp
70
                         + streamIdHelp
71
                         + `</a></div>`,
71
                         + `</a></div>`,
264
                 APP.conference.getMyUserId(), false);
264
                 APP.conference.getMyUserId(), false);
265
             VideoLayout.setLocalVideoVisible(false);
265
             VideoLayout.setLocalVideoVisible(false);
266
             Feedback.enableFeedback(false);
266
             Feedback.enableFeedback(false);
267
-            APP.store.dispatch(hideToolbar());
267
+            APP.store.dispatch(hideToolbox());
268
             APP.UI.messageHandler.enableNotifications(false);
268
             APP.UI.messageHandler.enableNotifications(false);
269
             APP.UI.messageHandler.enablePopups(false);
269
             APP.UI.messageHandler.enablePopups(false);
270
         }
270
         }

+ 4
- 4
modules/UI/shared_video/SharedVideo.js Näytä tiedosto

10
 import SmallVideo from '../videolayout/SmallVideo';
10
 import SmallVideo from '../videolayout/SmallVideo';
11
 import FilmStrip from '../videolayout/FilmStrip';
11
 import FilmStrip from '../videolayout/FilmStrip';
12
 
12
 
13
-import { dockToolbar, showToolbar } from '../../../react/features/toolbar';
13
+import { dockToolbox, showToolbox } from '../../../react/features/toolbox';
14
 
14
 
15
 export const SHARED_VIDEO_CONTAINER_TYPE = "sharedvideo";
15
 export const SHARED_VIDEO_CONTAINER_TYPE = "sharedvideo";
16
 
16
 
579
                 self.bodyBackground = document.body.style.background;
579
                 self.bodyBackground = document.body.style.background;
580
                 document.body.style.background = 'black';
580
                 document.body.style.background = 'black';
581
                 this.$iframe.css({opacity: 1});
581
                 this.$iframe.css({opacity: 1});
582
-                APP.store.dispatch(dockToolbar(true));
582
+                APP.store.dispatch(dockToolbox(true));
583
                 resolve();
583
                 resolve();
584
             });
584
             });
585
         });
585
         });
587
 
587
 
588
     hide () {
588
     hide () {
589
         let self = this;
589
         let self = this;
590
-        APP.store.dispatch(dockToolbar(false));
590
+        APP.store.dispatch(dockToolbox(false));
591
         return new Promise(resolve => {
591
         return new Promise(resolve => {
592
             this.$iframe.fadeOut(300, () => {
592
             this.$iframe.fadeOut(300, () => {
593
                 document.body.style.background = self.bodyBackground;
593
                 document.body.style.background = self.bodyBackground;
598
     }
598
     }
599
 
599
 
600
     onHoverIn () {
600
     onHoverIn () {
601
-        APP.store.dispatch(showToolbar());
601
+        APP.store.dispatch(showToolbox());
602
     }
602
     }
603
 
603
 
604
     get id () {
604
     get id () {

+ 5
- 5
modules/UI/side_pannels/chat/Chat.js Näytä tiedosto

9
 
9
 
10
 import { smileys } from './smileys';
10
 import { smileys } from './smileys';
11
 
11
 
12
-import { dockToolbar, setSubject } from '../../../../react/features/toolbar';
12
+import { dockToolbox, setSubject } from '../../../../react/features/toolbox';
13
 
13
 
14
 let unreadMessages = 0;
14
 let unreadMessages = 0;
15
 const sidePanelsContainerId = 'sideToolbarContainer';
15
 const sidePanelsContainerId = 'sideToolbarContainer';
25
         </div>
25
         </div>
26
 
26
 
27
         <div id="chatconversation"></div>
27
         <div id="chatconversation"></div>
28
-        <audio id="chatNotification" src="sounds/incomingMessage.wav" 
28
+        <audio id="chatNotification" src="sounds/incomingMessage.wav"
29
             preload="auto"></audio>
29
             preload="auto"></audio>
30
-        <textarea id="usermsg" autofocus 
30
+        <textarea id="usermsg" autofocus
31
             data-i18n="[placeholder]chat.messagebox"></textarea>
31
             data-i18n="[placeholder]chat.messagebox"></textarea>
32
         <div id="smileysarea">
32
         <div id="smileysarea">
33
             <div id="smileys" id="toggle_smileys">
33
             <div id="smileys" id="toggle_smileys">
60
     if (unreadMessages) {
60
     if (unreadMessages) {
61
         unreadMsgElement.innerHTML = unreadMessages.toString();
61
         unreadMsgElement.innerHTML = unreadMessages.toString();
62
 
62
 
63
-        APP.store.dispatch(dockToolbar(true));
63
+        APP.store.dispatch(dockToolbox(true));
64
 
64
 
65
         const chatButtonElement
65
         const chatButtonElement
66
             = document.getElementById('toolbar_button_chat');
66
             = document.getElementById('toolbar_button_chat');
239
                 // Undock the toolbar when the chat is shown and if we're in a
239
                 // Undock the toolbar when the chat is shown and if we're in a
240
                 // video mode.
240
                 // video mode.
241
                 if (VideoLayout.isLargeVideoVisible()) {
241
                 if (VideoLayout.isLargeVideoVisible()) {
242
-                    APP.store.dispatch(dockToolbar(false));
242
+                    APP.store.dispatch(dockToolbox(false));
243
                 }
243
                 }
244
 
244
 
245
                 // if we are in conversation mode focus on the text input
245
                 // if we are in conversation mode focus on the text input

+ 42
- 43
react/features/conference/components/Conference.native.js Näytä tiedosto

6
 import { Container } from '../../base/react';
6
 import { Container } from '../../base/react';
7
 import { FilmStrip } from '../../film-strip';
7
 import { FilmStrip } from '../../film-strip';
8
 import { LargeVideo } from '../../large-video';
8
 import { LargeVideo } from '../../large-video';
9
-import { setToolbarVisible, Toolbar } from '../../toolbar';
9
+import { setToolboxVisible, Toolbox } from '../../toolbox';
10
 
10
 
11
 import { styles } from './styles';
11
 import { styles } from './styles';
12
 
12
 
13
 /**
13
 /**
14
- * The timeout in milliseconds after which the toolbar will be hidden.
14
+ * The timeout in milliseconds after which the Toolbox will be hidden.
15
  *
15
  *
16
  * @private
16
  * @private
17
  * @type {number}
17
  * @type {number}
18
  */
18
  */
19
-const _TOOLBAR_TIMEOUT_MS = 5000;
19
+const _TOOLBOX_TIMEOUT_MS = 5000;
20
 
20
 
21
 /**
21
 /**
22
  * The conference page of the mobile (i.e. React Native) application.
22
  * The conference page of the mobile (i.e. React Native) application.
45
         _onDisconnect: React.PropTypes.func,
45
         _onDisconnect: React.PropTypes.func,
46
 
46
 
47
         /**
47
         /**
48
-         * The handler which dispatches the (redux) action setTooblarVisible to
49
-         * show/hide the toolbar.
48
+         * The handler which dispatches the (redux) action setToolboxVisible to
49
+         * show/hide the Toolbox.
50
          *
50
          *
51
          * @private
51
          * @private
52
          * @type {boolean}
52
          * @type {boolean}
53
          */
53
          */
54
-        _setToolbarVisible: React.PropTypes.func,
54
+        _setToolboxVisible: React.PropTypes.func,
55
 
55
 
56
         /**
56
         /**
57
-         * The indicator which determines whether toolbar is visible.
57
+         * The indicator which determines whether the Toolbox is visible.
58
          *
58
          *
59
          * @private
59
          * @private
60
          * @type {boolean}
60
          * @type {boolean}
61
          */
61
          */
62
-        _toolbarVisible: React.PropTypes.bool
62
+        _toolboxVisible: React.PropTypes.bool
63
     };
63
     };
64
 
64
 
65
     /**
65
     /**
73
 
73
 
74
         /**
74
         /**
75
          * The numerical ID of the timeout in milliseconds after which the
75
          * The numerical ID of the timeout in milliseconds after which the
76
-         * toolbar will be hidden. To be used with
76
+         * Toolbox will be hidden. To be used with
77
          * {@link WindowTimers#clearTimeout()}.
77
          * {@link WindowTimers#clearTimeout()}.
78
          *
78
          *
79
          * @private
79
          * @private
80
          */
80
          */
81
-        this._toolbarTimeout = undefined;
81
+        this._toolboxTimeout = undefined;
82
 
82
 
83
         // Bind event handlers so they are only bound once for every instance.
83
         // Bind event handlers so they are only bound once for every instance.
84
         this._onClick = this._onClick.bind(this);
84
         this._onClick = this._onClick.bind(this);
85
     }
85
     }
86
 
86
 
87
     /**
87
     /**
88
-     * Inits the toolbar timeout after the component is initially rendered.
88
+     * Inits the Toolbox timeout after the component is initially rendered.
89
      *
89
      *
90
      * @inheritdoc
90
      * @inheritdoc
91
      * returns {void}
91
      * returns {void}
92
      */
92
      */
93
     componentDidMount() {
93
     componentDidMount() {
94
-        this._setToolbarTimeout(this.props._toolbarVisible);
94
+        this._setToolboxTimeout(this.props._toolboxVisible);
95
     }
95
     }
96
 
96
 
97
     /**
97
     /**
106
 
106
 
107
     /**
107
     /**
108
      * Destroys connection, conference and local tracks when conference screen
108
      * Destroys connection, conference and local tracks when conference screen
109
-     * is left. Clears {@link #_toolbarTimeout} before the component unmounts.
109
+     * is left. Clears {@link #_toolboxTimeout} before the component unmounts.
110
      *
110
      *
111
      * @inheritdoc
111
      * @inheritdoc
112
      * @returns {void}
112
      * @returns {void}
113
      */
113
      */
114
     componentWillUnmount() {
114
     componentWillUnmount() {
115
-        this._clearToolbarTimeout();
115
+        this._clearToolboxTimeout();
116
 
116
 
117
         this.props._onDisconnect();
117
         this.props._onDisconnect();
118
     }
118
     }
132
 
132
 
133
                 <LargeVideo />
133
                 <LargeVideo />
134
 
134
 
135
-                <Toolbar />
135
+                <Toolbox />
136
                 <FilmStrip />
136
                 <FilmStrip />
137
 
137
 
138
                 <DialogContainer />
138
                 <DialogContainer />
141
     }
141
     }
142
 
142
 
143
     /**
143
     /**
144
-     * Clears {@link #_toolbarTimeout} if any.
144
+     * Clears {@link #_toolboxTimeout} if any.
145
      *
145
      *
146
      * @private
146
      * @private
147
      * @returns {void}
147
      * @returns {void}
148
      */
148
      */
149
-    _clearToolbarTimeout() {
150
-        if (this._toolbarTimeout) {
151
-            clearTimeout(this._toolbarTimeout);
152
-            this._toolbarTimeout = undefined;
149
+    _clearToolboxTimeout() {
150
+        if (this._toolboxTimeout) {
151
+            clearTimeout(this._toolboxTimeout);
152
+            this._toolboxTimeout = undefined;
153
         }
153
         }
154
     }
154
     }
155
 
155
 
156
     /**
156
     /**
157
-     * Changes the value of the toolbarVisible state, thus allowing us to
158
-     * 'switch' between toolbar and filmstrip views and change the visibility of
159
-     * the above.
157
+     * Changes the value of the toolboxVisible state, thus allowing us to switch
158
+     * between Toolbox and FilmStrip and change their visibility.
160
      *
159
      *
161
      * @private
160
      * @private
162
      * @returns {void}
161
      * @returns {void}
163
      */
162
      */
164
     _onClick() {
163
     _onClick() {
165
-        const toolbarVisible = !this.props._toolbarVisible;
164
+        const toolboxVisible = !this.props._toolboxVisible;
166
 
165
 
167
-        this.props._setToolbarVisible(toolbarVisible);
168
-        this._setToolbarTimeout(toolbarVisible);
166
+        this.props._setToolboxVisible(toolboxVisible);
167
+        this._setToolboxTimeout(toolboxVisible);
169
     }
168
     }
170
 
169
 
171
     /**
170
     /**
172
-     * Triggers the default toolbar timeout.
171
+     * Triggers the default Toolbox timeout.
173
      *
172
      *
174
-     * @param {boolean} toolbarVisible - Indicates if the toolbar is currently
175
-     * visible.
173
+     * @param {boolean} toolboxVisible - Indicates whether the Toolbox is
174
+     * currently visible.
176
      * @private
175
      * @private
177
      * @returns {void}
176
      * @returns {void}
178
      */
177
      */
179
-    _setToolbarTimeout(toolbarVisible) {
180
-        this._clearToolbarTimeout();
181
-        if (toolbarVisible) {
182
-            this._toolbarTimeout
183
-                = setTimeout(this._onClick, _TOOLBAR_TIMEOUT_MS);
178
+    _setToolboxTimeout(toolboxVisible) {
179
+        this._clearToolboxTimeout();
180
+        if (toolboxVisible) {
181
+            this._toolboxTimeout
182
+                = setTimeout(this._onClick, _TOOLBOX_TIMEOUT_MS);
184
         }
183
         }
185
     }
184
     }
186
 }
185
 }
193
  * @returns {{
192
  * @returns {{
194
  *     _onConnect: Function,
193
  *     _onConnect: Function,
195
  *     _onDisconnect: Function,
194
  *     _onDisconnect: Function,
196
- *     _setToolbarVisible: Function
195
+ *     _setToolboxVisible: Function
197
  * }}
196
  * }}
198
  */
197
  */
199
 function _mapDispatchToProps(dispatch) {
198
 function _mapDispatchToProps(dispatch) {
219
         },
218
         },
220
 
219
 
221
         /**
220
         /**
222
-         * Dispatched an action changing visiblity of the toolbar.
221
+         * Dispatches an action changing the visiblity of the Toolbox.
223
          *
222
          *
224
-         * @param {boolean} isVisible - Flag showing whether toolbar is
225
-         * visible.
223
+         * @param {boolean} visible - True to show the Toolbox or false to hide
224
+         * it.
226
          * @returns {Object} Dispatched action.
225
          * @returns {Object} Dispatched action.
227
          * @private
226
          * @private
228
          */
227
          */
229
-        _setToolbarVisible(isVisible: boolean) {
230
-            return dispatch(setToolbarVisible(isVisible));
228
+        _setToolboxVisible(visible: boolean) {
229
+            return dispatch(setToolboxVisible(visible));
231
         }
230
         }
232
     };
231
     };
233
 }
232
 }
238
  * @param {Object} state - The Redux state.
237
  * @param {Object} state - The Redux state.
239
  * @private
238
  * @private
240
  * @returns {{
239
  * @returns {{
241
- *     _toolbarVisible: boolean
240
+ *     _toolboxVisible: boolean
242
  * }}
241
  * }}
243
  */
242
  */
244
 function _mapStateToProps(state) {
243
 function _mapStateToProps(state) {
245
     return {
244
     return {
246
         /**
245
         /**
247
-         * The indicator which determines whether toolbar is visible.
246
+         * The indicator which determines whether the Toolbox is visible.
248
          *
247
          *
249
          * @private
248
          * @private
250
          * @type {boolean}
249
          * @type {boolean}
251
          */
250
          */
252
-        _toolbarVisible: state['features/toolbar'].visible
251
+        _toolboxVisible: state['features/toolbox'].visible
253
     };
252
     };
254
 }
253
 }
255
 
254
 

+ 2
- 2
react/features/conference/components/Conference.web.js Näytä tiedosto

7
 import { DialogContainer } from '../../base/dialog';
7
 import { DialogContainer } from '../../base/dialog';
8
 import { Watermarks } from '../../base/react';
8
 import { Watermarks } from '../../base/react';
9
 import { OverlayContainer } from '../../overlay';
9
 import { OverlayContainer } from '../../overlay';
10
-import { Toolbar } from '../../toolbar';
10
+import { Toolbox } from '../../toolbox';
11
 import { HideNotificationBarStyle } from '../../unsupported-browser';
11
 import { HideNotificationBarStyle } from '../../unsupported-browser';
12
 
12
 
13
 declare var $: Function;
13
 declare var $: Function;
65
     render() {
65
     render() {
66
         return (
66
         return (
67
             <div id = 'videoconference_page'>
67
             <div id = 'videoconference_page'>
68
-                <Toolbar />
68
+                <Toolbox />
69
 
69
 
70
                 <div id = 'videospace'>
70
                 <div id = 'videospace'>
71
                     <div
71
                     <div

+ 2
- 2
react/features/film-strip/components/FilmStrip.js Näytä tiedosto

110
  * @returns {{
110
  * @returns {{
111
  *     _participants: Participant[],
111
  *     _participants: Participant[],
112
  *     _visible: boolean
112
  *     _visible: boolean
113
- *  }}
113
+ * }}
114
  */
114
  */
115
 function _mapStateToProps(state) {
115
 function _mapStateToProps(state) {
116
     return {
116
     return {
132
          * @private
132
          * @private
133
          * @type {boolean}
133
          * @type {boolean}
134
          */
134
          */
135
-        _visible: !state['features/toolbar'].visible
135
+        _visible: !state['features/toolbox'].visible
136
     };
136
     };
137
 }
137
 }
138
 
138
 

+ 0
- 98
react/features/toolbar/actionTypes.js Näytä tiedosto

1
-import { Symbol } from '../base/react';
2
-
3
-/**
4
- * The type of the action which signals that toolbar timeout should be changed.
5
- *
6
- * {
7
- *      type: CLEAR_TOOLBAR_TIMEOUT
8
- * }
9
- */
10
-export const CLEAR_TOOLBAR_TIMEOUT = Symbol('CLEAR_TOOLBAR_TIMEOUT');
11
-
12
-/**
13
- * The type of the action which signals that a value for always visible toolbar
14
- * should be changed.
15
- *
16
- * {
17
- *     type: SET_ALWAYS_VISIBLE_TOOLBAR,
18
- *     alwaysVisible: boolean
19
- * }
20
- */
21
-export const SET_ALWAYS_VISIBLE_TOOLBAR = Symbol('SET_ALWAYS_VISIBLE_TOOLBAR');
22
-
23
-/**
24
- * The type of the action which signals that a value for conference subject
25
- * should be changed.
26
- *
27
- * {
28
- *      type: SET_SUBJECT,
29
- *      subject: string
30
- * }
31
- */
32
-export const SET_SUBJECT = Symbol('SET_SUBJECT');
33
-
34
-/**
35
- * The type of the action which signals that a value of subject slide in should
36
- * be changed.
37
- *
38
- * {
39
- *     type: SET_SUBJECT_SLIDE_IN,
40
- *     subjectSlideIn: boolean
41
- * }
42
- */
43
-export const SET_SUBJECT_SLIDE_IN = Symbol('SET_SUBJECT_SLIDE_IN');
44
-
45
-/**
46
- * The type of the action which signals that a value for toolbar button should
47
- * be changed.
48
- *
49
- * {
50
- *     type: SET_TOOLBAR_BUTTON,
51
- *     button: Object,
52
- *     key: string
53
- * }
54
- */
55
-export const SET_TOOLBAR_BUTTON = Symbol('SET_TOOLBAR_BUTTON');
56
-
57
-/**
58
- * The type of the action which signals that toolbar is/isn't being hovered.
59
- *
60
- * {
61
- *     type: SET_TOOLBAR_HOVERED,
62
- *     hovered: boolean
63
- * }
64
- */
65
-export const SET_TOOLBAR_HOVERED = Symbol('SET_TOOLBAR_HOVERED');
66
-
67
-/**
68
- * The type of the action which signals that new toolbar timeout should be set
69
- * and the value of toolbar timeout should be changed.
70
- *
71
- * {
72
- *      type: SET_TOOLBAR_TIMEOUT,
73
- *      handler: Function,
74
-        toolbarTimeout: number
75
- * }
76
- */
77
-export const SET_TOOLBAR_TIMEOUT = Symbol('SET_TOOLBAR_TIMEOUT');
78
-
79
-/**
80
- * The type of the action which signals that value of toolbar timeout should
81
- * be changed.
82
- *
83
- * {
84
- *      type: SET_TOOLBAR_TIMEOUT_NUMBER,
85
- *      toolbarTimeout: number
86
- * }
87
- */
88
-export const SET_TOOLBAR_TIMEOUT_NUMBER = Symbol('SET_TOOLBAR_TIMEOUT');
89
-
90
-/**
91
- * The type of the (redux) action which shows/hides the toolbar.
92
- *
93
- * {
94
- *     type: SET_TOOLBAR_VISIBLE,
95
- *     visible: boolean
96
- * }
97
- */
98
-export const SET_TOOLBAR_VISIBLE = Symbol('SET_TOOLBAR_VISIBLE');

+ 0
- 1
react/features/toolbar/components/index.js Näytä tiedosto

1
-export { default as Toolbar } from './Toolbar';

+ 0
- 39
react/features/toolbar/middleware.js Näytä tiedosto

1
-/* @flow */
2
-
3
-import { MiddlewareRegistry } from '../base/redux';
4
-
5
-import {
6
-    CLEAR_TOOLBAR_TIMEOUT,
7
-    SET_TOOLBAR_TIMEOUT
8
-} from './actionTypes';
9
-
10
-/**
11
- * Middleware that captures toolbar actions and handle changes in toolbar
12
- * timeout.
13
- *
14
- * @param {Store} store - Redux store.
15
- * @returns {Function}
16
- */
17
-MiddlewareRegistry.register(store => next => action => {
18
-    switch (action.type) {
19
-    case CLEAR_TOOLBAR_TIMEOUT: {
20
-        const { timeoutId } = store.getState()['features/toolbar'];
21
-
22
-        clearTimeout(timeoutId);
23
-        break;
24
-    }
25
-
26
-    case SET_TOOLBAR_TIMEOUT: {
27
-        const { timeoutId } = store.getState()['features/toolbar'];
28
-        const { handler, toolbarTimeout } = action;
29
-
30
-        clearTimeout(timeoutId);
31
-        const newTimeoutId = setTimeout(handler, toolbarTimeout);
32
-
33
-        action.timeoutId = newTimeoutId;
34
-        break;
35
-    }
36
-    }
37
-
38
-    return next(action);
39
-});

+ 95
- 0
react/features/toolbox/actionTypes.js Näytä tiedosto

1
+import { Symbol } from '../base/react';
2
+
3
+/**
4
+ * The type of the action which clears the Toolbox visibility timeout.
5
+ *
6
+ * {
7
+ *     type: CLEAR_TOOLBOX_TIMEOUT
8
+ * }
9
+ */
10
+export const CLEAR_TOOLBOX_TIMEOUT = Symbol('CLEAR_TOOLBOX_TIMEOUT');
11
+
12
+/**
13
+ * The type of the action which sets the permanent visibility of the Toolbox.
14
+ *
15
+ * {
16
+ *     type: SET_TOOLBOX_ALWAYS_VISIBLE,
17
+ *     alwaysVisible: boolean
18
+ * }
19
+ */
20
+export const SET_TOOLBOX_ALWAYS_VISIBLE = Symbol('SET_TOOLBOX_ALWAYS_VISIBLE');
21
+
22
+/**
23
+ * The type of the action which sets the conference subject.
24
+ *
25
+ * {
26
+ *     type: SET_SUBJECT,
27
+ *     subject: string
28
+ * }
29
+ */
30
+export const SET_SUBJECT = Symbol('SET_SUBJECT');
31
+
32
+/**
33
+ * The type of the action which sets the subject slide in.
34
+ *
35
+ * {
36
+ *     type: SET_SUBJECT_SLIDE_IN,
37
+ *     subjectSlideIn: boolean
38
+ * }
39
+ */
40
+export const SET_SUBJECT_SLIDE_IN = Symbol('SET_SUBJECT_SLIDE_IN');
41
+
42
+/**
43
+ * The type of the action which sets the descriptor of a toolbar button.
44
+ *
45
+ * {
46
+ *     type: SET_TOOLBAR_BUTTON,
47
+ *     button: Object,
48
+ *     key: string
49
+ * }
50
+ */
51
+export const SET_TOOLBAR_BUTTON = Symbol('SET_TOOLBAR_BUTTON');
52
+
53
+/**
54
+ * The type of the action which sets the indicator which determiens whether a
55
+ * fToolbar in the Toolbox is hovered.
56
+ *
57
+ * {
58
+ *     type: SET_TOOLBAR_HOVERED,
59
+ *     hovered: boolean
60
+ * }
61
+ */
62
+export const SET_TOOLBAR_HOVERED = Symbol('SET_TOOLBAR_HOVERED');
63
+
64
+/**
65
+ * The type of the action which sets a new Toolbox visibility timeout and its
66
+ * delay.
67
+ *
68
+ * {
69
+ *     type: SET_TOOLBOX_TIMEOUT,
70
+ *     handler: Function,
71
+ *     timeoutMS: number
72
+ * }
73
+ */
74
+export const SET_TOOLBOX_TIMEOUT = Symbol('SET_TOOLBOX_TIMEOUT');
75
+
76
+/**
77
+ * The type of the action which sets the delay in milliseconds after which
78
+ * the Toolbox visibility is to be changed.
79
+ *
80
+ * {
81
+ *     type: SET_TOOLBOX_TIMEOUT_MS,
82
+ *     timeoutMS: number
83
+ * }
84
+ */
85
+export const SET_TOOLBOX_TIMEOUT_MS = Symbol('SET_TOOLBOX_TIMEOUT');
86
+
87
+/**
88
+ * The type of the (redux) action which shows/hides the Toolbox.
89
+ *
90
+ * {
91
+ *     type: SET_TOOLBOX_VISIBLE,
92
+ *     visible: boolean
93
+ * }
94
+ */
95
+export const SET_TOOLBOX_VISIBLE = Symbol('SET_TOOLBOX_VISIBLE');

react/features/toolbar/actions.native.js → react/features/toolbox/actions.native.js Näytä tiedosto

3
 import type { Dispatch } from 'redux-thunk';
3
 import type { Dispatch } from 'redux-thunk';
4
 
4
 
5
 import {
5
 import {
6
-    CLEAR_TOOLBAR_TIMEOUT,
7
-    SET_ALWAYS_VISIBLE_TOOLBAR,
6
+    CLEAR_TOOLBOX_TIMEOUT,
7
+    SET_TOOLBOX_ALWAYS_VISIBLE,
8
     SET_SUBJECT,
8
     SET_SUBJECT,
9
     SET_SUBJECT_SLIDE_IN,
9
     SET_SUBJECT_SLIDE_IN,
10
     SET_TOOLBAR_BUTTON,
10
     SET_TOOLBAR_BUTTON,
11
     SET_TOOLBAR_HOVERED,
11
     SET_TOOLBAR_HOVERED,
12
-    SET_TOOLBAR_TIMEOUT,
13
-    SET_TOOLBAR_TIMEOUT_NUMBER,
14
-    SET_TOOLBAR_VISIBLE
12
+    SET_TOOLBOX_TIMEOUT,
13
+    SET_TOOLBOX_TIMEOUT_MS,
14
+    SET_TOOLBOX_VISIBLE
15
 } from './actionTypes';
15
 } from './actionTypes';
16
 
16
 
17
 /**
17
 /**
23
 export function changeLocalRaiseHand(handRaised: boolean): Function {
23
 export function changeLocalRaiseHand(handRaised: boolean): Function {
24
     return (dispatch: Dispatch<*>, getState: Function) => {
24
     return (dispatch: Dispatch<*>, getState: Function) => {
25
         const state = getState();
25
         const state = getState();
26
-        const { secondaryToolbarButtons } = state['features/toolbar'];
26
+        const { secondaryToolbarButtons } = state['features/toolbox'];
27
         const buttonName = 'raisehand';
27
         const buttonName = 'raisehand';
28
         const button = secondaryToolbarButtons.get(buttonName);
28
         const button = secondaryToolbarButtons.get(buttonName);
29
 
29
 
34
 }
34
 }
35
 
35
 
36
 /**
36
 /**
37
- * Signals that toolbar timeout should be cleared.
37
+ * Signals that toolbox timeout should be cleared.
38
  *
38
  *
39
  * @returns {{
39
  * @returns {{
40
- *      type: CLEAR_TOOLBAR_TIMEOUT
40
+ *     type: CLEAR_TOOLBOX_TIMEOUT
41
  * }}
41
  * }}
42
  */
42
  */
43
-export function clearToolbarTimeout(): Object {
43
+export function clearToolboxTimeout(): Object {
44
     return {
44
     return {
45
-        type: CLEAR_TOOLBAR_TIMEOUT
45
+        type: CLEAR_TOOLBOX_TIMEOUT
46
     };
46
     };
47
 }
47
 }
48
 
48
 
51
  *
51
  *
52
  * @param {boolean} alwaysVisible - Value to be set in redux store.
52
  * @param {boolean} alwaysVisible - Value to be set in redux store.
53
  * @returns {{
53
  * @returns {{
54
- *     type: SET_ALWAYS_VISIBLE_TOOLBAR,
55
- *     alwaysVisible: bool
54
+ *     type: SET_TOOLBOX_ALWAYS_VISIBLE,
55
+ *     alwaysVisible: boolean
56
  * }}
56
  * }}
57
  */
57
  */
58
-export function setAlwaysVisibleToolbar(alwaysVisible: boolean): Object {
58
+export function setToolboxAlwaysVisible(alwaysVisible: boolean): Object {
59
     return {
59
     return {
60
-        type: SET_ALWAYS_VISIBLE_TOOLBAR,
60
+        type: SET_TOOLBOX_ALWAYS_VISIBLE,
61
         alwaysVisible
61
         alwaysVisible
62
     };
62
     };
63
 }
63
 }
64
 
64
 
65
 /**
65
 /**
66
- * Enables / disables audio toolbar button.
66
+ * Enables/disables audio toolbar button.
67
  *
67
  *
68
- * @param {boolean} enabled - Indicates if the button should be enabled
69
- * or disabled.
68
+ * @param {boolean} enabled - True if the button should be enabled; otherwise,
69
+ * false.
70
  * @returns {Function}
70
  * @returns {Function}
71
  */
71
  */
72
 export function setAudioIconEnabled(enabled: boolean = false): Function {
72
 export function setAudioIconEnabled(enabled: boolean = false): Function {
84
 }
84
 }
85
 
85
 
86
 /**
86
 /**
87
- *  Signals that value of conference subject should be changed.
87
+ * Signals that value of conference subject should be changed.
88
  *
88
  *
89
- *  @param {string} subject - Conference subject string.
90
- *  @returns {Object}
89
+ * @param {string} subject - Conference subject string.
90
+ * @returns {Object}
91
  */
91
  */
92
-export function setSubject(subject: string) {
92
+export function setSubject(subject: string): Object {
93
     return {
93
     return {
94
         type: SET_SUBJECT,
94
         type: SET_SUBJECT,
95
         subject
95
         subject
97
 }
97
 }
98
 
98
 
99
 /**
99
 /**
100
- * Signals that toolbar subject slide in value should be changed.
100
+ * Signals that toolbox subject slide in value should be changed.
101
  *
101
  *
102
- * @param {boolean} subjectSlideIn - Flag showing whether subject is shown.
102
+ * @param {boolean} subjectSlideIn - True if the subject is shown; otherwise,
103
+ * false.
103
  * @returns {{
104
  * @returns {{
104
  *     type: SET_SUBJECT_SLIDE_IN,
105
  *     type: SET_SUBJECT_SLIDE_IN,
105
  *     subjectSlideIn: boolean
106
  *     subjectSlideIn: boolean
119
  * @param {Object} button - Button object.
120
  * @param {Object} button - Button object.
120
  * @returns {{
121
  * @returns {{
121
  *     type: SET_TOOLBAR_BUTTON,
122
  *     type: SET_TOOLBAR_BUTTON,
122
- *     buttonName: string,
123
- *     button: Object
123
+ *     button: Object,
124
+ *     buttonName: string
124
  * }}
125
  * }}
125
  */
126
  */
126
 export function setToolbarButton(buttonName: string, button: Object): Object {
127
 export function setToolbarButton(buttonName: string, button: Object): Object {
127
     return {
128
     return {
128
         type: SET_TOOLBAR_BUTTON,
129
         type: SET_TOOLBAR_BUTTON,
129
-        buttonName,
130
-        button
130
+        button,
131
+        buttonName
131
     };
132
     };
132
 }
133
 }
133
 
134
 
147
     };
148
     };
148
 }
149
 }
149
 
150
 
151
+/* eslint-disable flowtype/space-before-type-colon */
152
+
150
 /**
153
 /**
151
  * Dispatches an action which sets new timeout and clears the previous one.
154
  * Dispatches an action which sets new timeout and clears the previous one.
152
  *
155
  *
153
  * @param {Function} handler - Function to be invoked after the timeout.
156
  * @param {Function} handler - Function to be invoked after the timeout.
154
- * @param {number} toolbarTimeout - Delay.
157
+ * @param {number} timeoutMS - Delay.
155
  * @returns {{
158
  * @returns {{
156
- *      type: SET_TOOLBAR_TIMEOUT,
157
- *      handler: Function,
158
- *      toolbarTimeout: number
159
+ *     type: SET_TOOLBOX_TIMEOUT,
160
+ *     handler: Function,
161
+ *     timeoutMS: number
159
  * }}
162
  * }}
160
  */
163
  */
161
-export function setToolbarTimeout(handler: Function,
162
-        toolbarTimeout: number): Object {
164
+export function setToolboxTimeout(handler: Function, timeoutMS: number)
165
+      : Object {
163
     return {
166
     return {
164
-        type: SET_TOOLBAR_TIMEOUT,
167
+        type: SET_TOOLBOX_TIMEOUT,
165
         handler,
168
         handler,
166
-        toolbarTimeout
169
+        timeoutMS
167
     };
170
     };
168
 }
171
 }
169
 
172
 
173
+/* eslint-enable flowtype/space-before-type-colon */
174
+
170
 /**
175
 /**
171
- * Dispatches an action which sets new toolbar timeout value.
176
+ * Dispatches an action which sets new toolbox timeout value.
172
  *
177
  *
173
- * @param {number} toolbarTimeout - Delay.
178
+ * @param {number} timeoutMS - Delay.
174
  * @returns {{
179
  * @returns {{
175
- *      type: SET_TOOLBAR_TIMEOUT_NUMBER,
176
- *      toolbarTimeout: number
180
+ *     type: SET_TOOLBOX_TIMEOUT_MS,
181
+ *     timeoutMS: number
177
  * }}
182
  * }}
178
  */
183
  */
179
-export function setToolbarTimeoutNumber(toolbarTimeout: number): Object {
184
+export function setToolboxTimeoutMS(timeoutMS: number): Object {
180
     return {
185
     return {
181
-        type: SET_TOOLBAR_TIMEOUT_NUMBER,
182
-        toolbarTimeout
186
+        type: SET_TOOLBOX_TIMEOUT_MS,
187
+        timeoutMS
183
     };
188
     };
184
 }
189
 }
185
 
190
 
186
 /**
191
 /**
187
- * Shows/hides the toolbar.
192
+ * Shows/hides the toolbox.
188
  *
193
  *
189
- * @param {boolean} visible - True to show the toolbar or false to hide it.
194
+ * @param {boolean} visible - True to show the toolbox or false to hide it.
190
  * @returns {{
195
  * @returns {{
191
- *     type: SET_TOOLBAR_VISIBLE,
196
+ *     type: SET_TOOLBOX_VISIBLE,
192
  *     visible: boolean
197
  *     visible: boolean
193
  * }}
198
  * }}
194
  */
199
  */
195
-export function setToolbarVisible(visible: boolean): Object {
200
+export function setToolboxVisible(visible: boolean): Object {
196
     return {
201
     return {
197
-        type: SET_TOOLBAR_VISIBLE,
202
+        type: SET_TOOLBOX_VISIBLE,
198
         visible
203
         visible
199
     };
204
     };
200
 }
205
 }
201
 
206
 
202
 /**
207
 /**
203
- * Enables / disables audio toolbar button.
208
+ * Enables/disables audio toolbar button.
204
  *
209
  *
205
- * @param {boolean} enabled - Indicates if the button should be enabled
206
- * or disabled.
210
+ * @param {boolean} enabled - True if the button should be enabled; otherwise,
211
+ * false.
207
  * @returns {Function}
212
  * @returns {Function}
208
  */
213
  */
209
 export function setVideoIconEnabled(enabled: boolean = false): Function {
214
 export function setVideoIconEnabled(enabled: boolean = false): Function {
243
 export function toggleFullScreen(isFullScreen: boolean): Function {
248
 export function toggleFullScreen(isFullScreen: boolean): Function {
244
     return (dispatch: Dispatch<*>, getState: Function) => {
249
     return (dispatch: Dispatch<*>, getState: Function) => {
245
         const state = getState();
250
         const state = getState();
246
-        const { primaryToolbarButtons } = state['features/toolbar'];
251
+        const { primaryToolbarButtons } = state['features/toolbox'];
247
         const buttonName = 'fullscreen';
252
         const buttonName = 'fullscreen';
248
         const button = primaryToolbarButtons.get(buttonName);
253
         const button = primaryToolbarButtons.get(buttonName);
249
 
254
 
265
         const {
270
         const {
266
             primaryToolbarButtons,
271
             primaryToolbarButtons,
267
             secondaryToolbarButtons
272
             secondaryToolbarButtons
268
-        } = state['features/toolbar'];
273
+        } = state['features/toolbox'];
269
         const button
274
         const button
270
             = primaryToolbarButtons.get(buttonName)
275
             = primaryToolbarButtons.get(buttonName)
271
                 || secondaryToolbarButtons.get(buttonName);
276
                 || secondaryToolbarButtons.get(buttonName);

react/features/toolbar/actions.web.js → react/features/toolbox/actions.web.js Näytä tiedosto

7
 import UIUtil from '../../../modules/UI/util/UIUtil';
7
 import UIUtil from '../../../modules/UI/util/UIUtil';
8
 
8
 
9
 import {
9
 import {
10
-    clearToolbarTimeout,
11
-    setAlwaysVisibleToolbar,
10
+    clearToolboxTimeout,
12
     setSubjectSlideIn,
11
     setSubjectSlideIn,
13
     setToolbarButton,
12
     setToolbarButton,
14
-    setToolbarTimeout,
15
-    setToolbarTimeoutNumber,
16
-    setToolbarVisible,
13
+    setToolboxTimeout,
14
+    setToolboxTimeoutMS,
15
+    setToolboxVisible,
17
     toggleToolbarButton
16
     toggleToolbarButton
18
 } from './actions.native';
17
 } from './actions.native';
19
 
18
 
43
 }
42
 }
44
 
43
 
45
 /**
44
 /**
46
- * Docks/undocks toolbar based on its parameter.
45
+ * Docks/undocks the Toolbox.
47
  *
46
  *
48
  * @param {boolean} dock - True if dock, false otherwise.
47
  * @param {boolean} dock - True if dock, false otherwise.
49
  * @returns {Function}
48
  * @returns {Function}
50
  */
49
  */
51
-export function dockToolbar(dock: boolean): Function {
50
+export function dockToolbox(dock: boolean): Function {
52
     return (dispatch: Dispatch<*>, getState: Function) => {
51
     return (dispatch: Dispatch<*>, getState: Function) => {
53
         if (interfaceConfig.filmStripOnly) {
52
         if (interfaceConfig.filmStripOnly) {
54
             return;
53
             return;
55
         }
54
         }
56
 
55
 
57
         const state = getState();
56
         const state = getState();
58
-        const { toolbarTimeout, visible } = state['features/toolbar'];
57
+        const { timeoutMS, visible } = state['features/toolbox'];
59
 
58
 
60
         if (dock) {
59
         if (dock) {
61
-            // First make sure the toolbar is shown.
62
-            visible || dispatch(showToolbar());
60
+            // First make sure the toolbox is shown.
61
+            visible || dispatch(showToolbox());
63
 
62
 
64
-            dispatch(clearToolbarTimeout());
63
+            dispatch(clearToolboxTimeout());
65
         } else if (visible) {
64
         } else if (visible) {
66
             dispatch(
65
             dispatch(
67
-                setToolbarTimeout(
68
-                    () => dispatch(hideToolbar()),
69
-                    toolbarTimeout));
66
+                setToolboxTimeout(
67
+                    () => dispatch(hideToolbox()),
68
+                    timeoutMS));
70
         } else {
69
         } else {
71
-            dispatch(showToolbar());
70
+            dispatch(showToolbox());
72
         }
71
         }
73
     };
72
     };
74
 }
73
 }
75
 
74
 
76
 /**
75
 /**
77
- * Hides the toolbar.
76
+ * Hides the toolbox.
78
  *
77
  *
79
- * @param {boolean} force - True to force the hiding of the toolbar without
78
+ * @param {boolean} force - True to force the hiding of the toolbox without
80
  * caring about the extended toolbar side panels.
79
  * caring about the extended toolbar side panels.
81
  * @returns {Function}
80
  * @returns {Function}
82
  */
81
  */
83
-export function hideToolbar(force: boolean = false): Function {
82
+export function hideToolbox(force: boolean = false): Function {
84
     return (dispatch: Dispatch<*>, getState: Function) => {
83
     return (dispatch: Dispatch<*>, getState: Function) => {
85
         const state = getState();
84
         const state = getState();
86
         const {
85
         const {
87
             alwaysVisible,
86
             alwaysVisible,
88
             hovered,
87
             hovered,
89
-            toolbarTimeout
90
-        } = state['features/toolbar'];
88
+            timeoutMS
89
+        } = state['features/toolbox'];
91
 
90
 
92
         if (alwaysVisible) {
91
         if (alwaysVisible) {
93
             return;
92
             return;
94
         }
93
         }
95
 
94
 
96
-        dispatch(clearToolbarTimeout());
95
+        dispatch(clearToolboxTimeout());
97
 
96
 
98
         if (!force
97
         if (!force
99
                 && (hovered
98
                 && (hovered
100
                     || APP.UI.isRingOverlayVisible()
99
                     || APP.UI.isRingOverlayVisible()
101
                     || SideContainerToggler.isVisible())) {
100
                     || SideContainerToggler.isVisible())) {
102
             dispatch(
101
             dispatch(
103
-                setToolbarTimeout(
104
-                    () => dispatch(hideToolbar()),
105
-                    toolbarTimeout));
102
+                setToolboxTimeout(
103
+                    () => dispatch(hideToolbox()),
104
+                    timeoutMS));
106
         } else {
105
         } else {
107
-            dispatch(setToolbarVisible(false));
106
+            dispatch(setToolboxVisible(false));
108
             dispatch(setSubjectSlideIn(false));
107
             dispatch(setSubjectSlideIn(false));
109
         }
108
         }
110
     };
109
     };
111
 }
110
 }
112
 
111
 
113
-/**
114
- * Action that reset always visible toolbar to default state.
115
- *
116
- * @returns {Function}
117
- */
118
-export function resetAlwaysVisibleToolbar(): Function {
119
-    return (dispatch: Dispatch<*>) => {
120
-        const alwaysVisible = config.alwaysVisibleToolbar === true;
121
-
122
-        dispatch(setAlwaysVisibleToolbar(alwaysVisible));
123
-    };
124
-}
125
-
126
 /**
112
 /**
127
  * Signals that unclickable property of profile button should change its value.
113
  * Signals that unclickable property of profile button should change its value.
128
  *
114
  *
240
 }
226
 }
241
 
227
 
242
 /**
228
 /**
243
- * Shows the toolbar for specified timeout.
229
+ * Shows the toolbox for specified timeout.
244
  *
230
  *
245
- * @param {number} timeout - Timeout for showing the toolbar.
231
+ * @param {number} timeout - Timeout for showing the toolbox.
246
  * @returns {Function}
232
  * @returns {Function}
247
  */
233
  */
248
-export function showToolbar(timeout: number = 0): Object {
234
+export function showToolbox(timeout: number = 0): Object {
249
     return (dispatch: Dispatch<*>, getState: Function) => {
235
     return (dispatch: Dispatch<*>, getState: Function) => {
250
         if (interfaceConfig.filmStripOnly) {
236
         if (interfaceConfig.filmStripOnly) {
251
             return;
237
             return;
252
         }
238
         }
253
 
239
 
254
         const state = getState();
240
         const state = getState();
255
-        const { toolbarTimeout, visible } = state['features/toolbar'];
256
-        const finalTimeout = timeout || toolbarTimeout;
241
+        const { timeoutMS, visible } = state['features/toolbox'];
257
 
242
 
258
         if (!visible) {
243
         if (!visible) {
259
-            dispatch(setToolbarVisible(true));
244
+            dispatch(setToolboxVisible(true));
260
             dispatch(setSubjectSlideIn(true));
245
             dispatch(setSubjectSlideIn(true));
261
             dispatch(
246
             dispatch(
262
-                setToolbarTimeout(() => dispatch(hideToolbar()), finalTimeout));
263
-            dispatch(setToolbarTimeoutNumber(interfaceConfig.TOOLBAR_TIMEOUT));
247
+                setToolboxTimeout(
248
+                    () => dispatch(hideToolbox()),
249
+                    timeout || timeoutMS));
250
+            dispatch(setToolboxTimeoutMS(interfaceConfig.TOOLBAR_TIMEOUT));
264
         }
251
         }
265
     };
252
     };
266
 }
253
 }
269
  * Event handler for side toolbar container toggled event.
256
  * Event handler for side toolbar container toggled event.
270
  *
257
  *
271
  * @param {string} containerId - ID of the container.
258
  * @param {string} containerId - ID of the container.
272
- * @returns {void}
259
+ * @returns {Function}
273
  */
260
  */
274
 export function toggleSideToolbarContainer(containerId: string): Function {
261
 export function toggleSideToolbarContainer(containerId: string): Function {
275
     return (dispatch: Dispatch, getState: Function) => {
262
     return (dispatch: Dispatch, getState: Function) => {
276
         const state = getState();
263
         const state = getState();
277
-        const { secondaryToolbarButtons } = state['features/toolbar'];
264
+        const { secondaryToolbarButtons } = state['features/toolbox'];
278
 
265
 
279
         for (const key of secondaryToolbarButtons.keys()) {
266
         for (const key of secondaryToolbarButtons.keys()) {
280
             const isButtonEnabled = UIUtil.isButtonEnabled(key);
267
             const isButtonEnabled = UIUtil.isButtonEnabled(key);

react/features/toolbar/components/AbstractToolbarButton.js → react/features/toolbox/components/AbstractToolbarButton.js Näytä tiedosto


react/features/toolbar/components/Notice.js → react/features/toolbox/components/Notice.js Näytä tiedosto


react/features/toolbar/components/PrimaryToolbar.web.js → react/features/toolbox/components/PrimaryToolbar.web.js Näytä tiedosto

6
 import UIEvents from '../../../../service/UI/UIEvents';
6
 import UIEvents from '../../../../service/UI/UIEvents';
7
 
7
 
8
 import { showDesktopSharingButton, toggleFullScreen } from '../actions';
8
 import { showDesktopSharingButton, toggleFullScreen } from '../actions';
9
-import BaseToolbar from './BaseToolbar';
9
+import Toolbar from './Toolbar';
10
 import { getToolbarClassNames } from '../functions';
10
 import { getToolbarClassNames } from '../functions';
11
 
11
 
12
 declare var APP: Object;
12
 declare var APP: Object;
19
  * @extends Component
19
  * @extends Component
20
  */
20
  */
21
 class PrimaryToolbar extends Component {
21
 class PrimaryToolbar extends Component {
22
-
23
     state: Object;
22
     state: Object;
24
 
23
 
25
     static propTypes = {
24
     static propTypes = {
39
         _primaryToolbarButtons: React.PropTypes.instanceOf(Map),
38
         _primaryToolbarButtons: React.PropTypes.instanceOf(Map),
40
 
39
 
41
         /**
40
         /**
42
-         * Shows whether toolbar is visible.
41
+         * Shows whether toolbox is visible.
43
          */
42
          */
44
         _visible: React.PropTypes.bool
43
         _visible: React.PropTypes.bool
45
     };
44
     };
108
         const { primaryToolbarClassName } = getToolbarClassNames(this.props);
107
         const { primaryToolbarClassName } = getToolbarClassNames(this.props);
109
 
108
 
110
         return (
109
         return (
111
-            <BaseToolbar
110
+            <Toolbar
112
                 buttonHandlers = { buttonHandlers }
111
                 buttonHandlers = { buttonHandlers }
113
                 className = { primaryToolbarClassName }
112
                 className = { primaryToolbarClassName }
114
                 splitterIndex = { splitterIndex }
113
                 splitterIndex = { splitterIndex }
164
     const {
163
     const {
165
         primaryToolbarButtons,
164
         primaryToolbarButtons,
166
         visible
165
         visible
167
-    } = state['features/toolbar'];
166
+    } = state['features/toolbox'];
168
 
167
 
169
     return {
168
     return {
170
         /**
169
         /**
176
         _primaryToolbarButtons: primaryToolbarButtons,
175
         _primaryToolbarButtons: primaryToolbarButtons,
177
 
176
 
178
         /**
177
         /**
179
-         * Shows whether toolbar is visible.
178
+         * Shows whether toolbox is visible.
180
          *
179
          *
181
          * @protected
180
          * @protected
182
          * @type {boolean}
181
          * @type {boolean}
186
 }
185
 }
187
 
186
 
188
 export default connect(_mapStateToProps, _mapDispatchToProps)(PrimaryToolbar);
187
 export default connect(_mapStateToProps, _mapDispatchToProps)(PrimaryToolbar);
189
-

react/features/toolbar/components/SecondaryToolbar.web.js → react/features/toolbox/components/SecondaryToolbar.web.js Näytä tiedosto

12
     showRecordingButton,
12
     showRecordingButton,
13
     toggleSideToolbarContainer
13
     toggleSideToolbarContainer
14
 } from '../actions';
14
 } from '../actions';
15
-import BaseToolbar from './BaseToolbar';
15
+import Toolbar from './Toolbar';
16
 import { getToolbarClassNames } from '../functions';
16
 import { getToolbarClassNames } from '../functions';
17
 
17
 
18
 declare var APP: Object;
18
 declare var APP: Object;
25
  * @extends Component
25
  * @extends Component
26
  */
26
  */
27
 class SecondaryToolbar extends Component {
27
 class SecondaryToolbar extends Component {
28
-
29
     state: Object;
28
     state: Object;
30
 
29
 
31
     /**
30
     /**
60
         _secondaryToolbarButtons: React.PropTypes.instanceOf(Map),
59
         _secondaryToolbarButtons: React.PropTypes.instanceOf(Map),
61
 
60
 
62
         /**
61
         /**
63
-         * Shows whether toolbar is visible.
62
+         * Shows whether toolbox is visible.
64
          */
63
          */
65
         _visible: React.PropTypes.bool
64
         _visible: React.PropTypes.bool
66
     };
65
     };
157
         const { secondaryToolbarClassName } = getToolbarClassNames(this.props);
156
         const { secondaryToolbarClassName } = getToolbarClassNames(this.props);
158
 
157
 
159
         return (
158
         return (
160
-            <BaseToolbar
159
+            <Toolbar
161
                 buttonHandlers = { buttonHandlers }
160
                 buttonHandlers = { buttonHandlers }
162
                 className = { secondaryToolbarClassName }
161
                 className = { secondaryToolbarClassName }
163
                 toolbarButtons = { _secondaryToolbarButtons }>
162
                 toolbarButtons = { _secondaryToolbarButtons }>
164
                 <FeedbackButton />
163
                 <FeedbackButton />
165
-            </BaseToolbar>
164
+            </Toolbar>
166
         );
165
         );
167
     }
166
     }
168
 }
167
 }
239
     const {
238
     const {
240
         secondaryToolbarButtons,
239
         secondaryToolbarButtons,
241
         visible
240
         visible
242
-    } = state['features/toolbar'];
241
+    } = state['features/toolbox'];
243
 
242
 
244
     return {
243
     return {
245
         /**
244
         /**

react/features/toolbar/components/BaseToolbar.web.js → react/features/toolbox/components/Toolbar.web.js Näytä tiedosto

13
 declare var interfaceConfig: Object;
13
 declare var interfaceConfig: Object;
14
 
14
 
15
 /**
15
 /**
16
- * Class implementing Primary Toolbar React component.
16
+ * Implements a toolbar in React/Web. It is a strip that contains a set of
17
+ * toolbar items such as buttons. Toolbar is commonly placed inside of a
18
+ * Toolbox.
17
  *
19
  *
18
- * @class PrimaryToolbar
20
+ * @class Toolbar
19
  * @extends Component
21
  * @extends Component
20
  */
22
  */
21
-class BaseToolbar extends Component {
22
-
23
+class Toolbar extends Component {
23
     _renderToolbarButton: Function;
24
     _renderToolbarButton: Function;
24
 
25
 
25
     /**
26
     /**
197
     };
198
     };
198
 }
199
 }
199
 
200
 
200
-export default connect(null, _mapDispatchToProps)(BaseToolbar);
201
+export default connect(null, _mapDispatchToProps)(Toolbar);

react/features/toolbar/components/ToolbarButton.native.js → react/features/toolbox/components/ToolbarButton.native.js Näytä tiedosto


react/features/toolbar/components/ToolbarButton.web.js → react/features/toolbox/components/ToolbarButton.web.js Näytä tiedosto


react/features/toolbar/components/Toolbar.native.js → react/features/toolbox/components/Toolbox.native.js Näytä tiedosto

15
 import ToolbarButton from './ToolbarButton';
15
 import ToolbarButton from './ToolbarButton';
16
 
16
 
17
 /**
17
 /**
18
- * Implements the conference toolbar on React Native.
18
+ * Implements the conference toolbox on React Native.
19
  */
19
  */
20
-class Toolbar extends Component {
20
+class Toolbox extends Component {
21
     /**
21
     /**
22
-     * Toolbar component's property types.
22
+     * Toolbox component's property types.
23
      *
23
      *
24
      * @static
24
      * @static
25
      */
25
      */
220
  * TODO As soon as we have common font sets for web and native, this will no
220
  * TODO As soon as we have common font sets for web and native, this will no
221
  * longer be required.
221
  * longer be required.
222
  */
222
  */
223
-Object.assign(Toolbar.prototype, {
223
+Object.assign(Toolbox.prototype, {
224
     audioIcon: 'microphone',
224
     audioIcon: 'microphone',
225
     audioMutedIcon: 'mic-disabled',
225
     audioMutedIcon: 'mic-disabled',
226
     videoIcon: 'camera',
226
     videoIcon: 'camera',
293
     };
293
     };
294
 }
294
 }
295
 
295
 
296
-export default connect(_mapStateToProps, _mapDispatchToProps)(Toolbar);
296
+export default connect(_mapStateToProps, _mapDispatchToProps)(Toolbox);

react/features/toolbar/components/Toolbar.web.js → react/features/toolbox/components/Toolbox.web.js Näytä tiedosto

5
 
5
 
6
 import UIEvents from '../../../../service/UI/UIEvents';
6
 import UIEvents from '../../../../service/UI/UIEvents';
7
 
7
 
8
-import { resetAlwaysVisibleToolbar } from '../actions';
8
+import { setToolboxAlwaysVisible } from '../actions';
9
 import {
9
 import {
10
     abstractMapStateToProps,
10
     abstractMapStateToProps,
11
     showCustomToolbarPopup
11
     showCustomToolbarPopup
19
 declare var interfaceConfig: Object;
19
 declare var interfaceConfig: Object;
20
 
20
 
21
 /**
21
 /**
22
- * Implements the conference toolbar on React.
22
+ * Implements the conference toolbox on React/Web.
23
  */
23
  */
24
-class Toolbar extends Component {
25
-
24
+class Toolbox extends Component {
26
     /**
25
     /**
27
      * App component's property types.
26
      * App component's property types.
28
      *
27
      *
30
      */
29
      */
31
     static propTypes = {
30
     static propTypes = {
32
         /**
31
         /**
33
-         * Handler dispatching reset always visible toolbar action.
32
+         * Handler dispatching reset always visible toolbox action.
34
          */
33
          */
35
-        _onResetAlwaysVisibleToolbar: React.PropTypes.func,
34
+        _setToolboxAlwaysVisible: React.PropTypes.func,
36
 
35
 
37
         /**
36
         /**
38
          * Represents conference subject.
37
          * Represents conference subject.
45
         _subjectSlideIn: React.PropTypes.bool,
44
         _subjectSlideIn: React.PropTypes.bool,
46
 
45
 
47
         /**
46
         /**
48
-         * Property containing toolbar timeout id.
47
+         * Property containing toolbox timeout id.
49
          */
48
          */
50
-        _timeoutId: React.PropTypes.number
49
+        _timeoutID: React.PropTypes.number
51
     };
50
     };
52
 
51
 
53
     /**
52
     /**
54
-     * Invokes reset always visible toolbar after mounting the component and
53
+     * Invokes reset always visible toolbox after mounting the component and
55
      * registers legacy UI listeners.
54
      * registers legacy UI listeners.
56
      *
55
      *
57
      * @returns {void}
56
      * @returns {void}
58
      */
57
      */
59
     componentDidMount(): void {
58
     componentDidMount(): void {
60
-        this.props._onResetAlwaysVisibleToolbar();
59
+        this.props._setToolboxAlwaysVisible();
61
 
60
 
62
-        APP.UI.addListener(UIEvents.SHOW_CUSTOM_TOOLBAR_BUTTON_POPUP,
61
+        APP.UI.addListener(
62
+            UIEvents.SHOW_CUSTOM_TOOLBAR_BUTTON_POPUP,
63
             showCustomToolbarPopup);
63
             showCustomToolbarPopup);
64
     }
64
     }
65
 
65
 
69
      *  @returns {void}
69
      *  @returns {void}
70
      */
70
      */
71
     componentWillUnmount(): void {
71
     componentWillUnmount(): void {
72
-        APP.UI.removeListener(UIEvents.SHOW_CUSTOM_TOOLBAR_BUTTON_POPUP,
72
+        APP.UI.removeListener(
73
+            UIEvents.SHOW_CUSTOM_TOOLBAR_BUTTON_POPUP,
73
             showCustomToolbarPopup);
74
             showCustomToolbarPopup);
74
     }
75
     }
75
 
76
 
94
     }
95
     }
95
 
96
 
96
     /**
97
     /**
97
-     * Returns React element representing toolbar subject.
98
+     * Returns React element representing toolbox subject.
98
      *
99
      *
99
      * @returns {ReactElement}
100
      * @returns {ReactElement}
100
      * @private
101
      * @private
137
      * @private
138
      * @private
138
      */
139
      */
139
     _renderToolbars(): ReactElement<*> | null {
140
     _renderToolbars(): ReactElement<*> | null {
140
-        // We should not show the toolbars till timeout object will be
141
-        // initialized.
142
-        if (this.props._timeoutId === null) {
141
+        // The toolbars should not be shown until timeoutID is initialized.
142
+        if (this.props._timeoutID === null) {
143
             return null;
143
             return null;
144
         }
144
         }
145
 
145
 
158
  *
158
  *
159
  * @param {Function} dispatch - Redux action dispatcher.
159
  * @param {Function} dispatch - Redux action dispatcher.
160
  * @returns {{
160
  * @returns {{
161
- *      _onResetAlwaysVisibleToolbar: Function
161
+ *     _setToolboxAlwaysVisible: Function
162
  * }}
162
  * }}
163
  * @private
163
  * @private
164
  */
164
  */
166
     return {
166
     return {
167
 
167
 
168
         /**
168
         /**
169
-         * Dispatches an action resetting always visible toolbar.
169
+         * Dispatches an action resetting always visible toolbox.
170
          *
170
          *
171
          * @returns {Object} Dispatched action.
171
          * @returns {Object} Dispatched action.
172
          */
172
          */
173
-        _onResetAlwaysVisibleToolbar() {
174
-            dispatch(resetAlwaysVisibleToolbar());
173
+        _setToolboxAlwaysVisible() {
174
+            dispatch(
175
+                setToolboxAlwaysVisible(config.alwaysVisibleToolbar === true));
175
         }
176
         }
176
     };
177
     };
177
 }
178
 }
178
 
179
 
179
 /**
180
 /**
180
- * Maps parts of toolbar state to component props.
181
+ * Maps parts of toolbox state to component props.
181
  *
182
  *
182
  * @param {Object} state - Redux state.
183
  * @param {Object} state - Redux state.
183
  * @private
184
  * @private
192
     const {
193
     const {
193
         subject,
194
         subject,
194
         subjectSlideIn,
195
         subjectSlideIn,
195
-        timeoutId
196
-    } = state['features/toolbar'];
196
+        timeoutID
197
+    } = state['features/toolbox'];
197
 
198
 
198
     return {
199
     return {
199
         ...abstractMapStateToProps(state),
200
         ...abstractMapStateToProps(state),
215
         _subjectSlideIn: subjectSlideIn,
216
         _subjectSlideIn: subjectSlideIn,
216
 
217
 
217
         /**
218
         /**
218
-         * Property containing toolbar timeout id.
219
+         * Property containing toolbox timeout id.
219
          *
220
          *
220
          * @protected
221
          * @protected
221
          * @type {number}
222
          * @type {number}
222
          */
223
          */
223
-        _timeoutId: timeoutId
224
+        _timeoutID: timeoutID
224
     };
225
     };
225
 }
226
 }
226
 
227
 
227
-export default connect(_mapStateToProps, _mapDispatchToProps)(Toolbar);
228
+export default connect(_mapStateToProps, _mapDispatchToProps)(Toolbox);

+ 1
- 0
react/features/toolbox/components/index.js Näytä tiedosto

1
+export { default as Toolbox } from './Toolbox';

react/features/toolbar/components/styles.js → react/features/toolbox/components/styles.js Näytä tiedosto

64
 };
64
 };
65
 
65
 
66
 /**
66
 /**
67
- * The (conference) toolbar related styles.
67
+ * The (conference) Toolbox/Toolbar related styles.
68
  */
68
  */
69
 export const styles = createStyleSheet({
69
 export const styles = createStyleSheet({
70
     /**
70
     /**
116
     },
116
     },
117
 
117
 
118
     /**
118
     /**
119
-     * The style of the root/top-level Container of Toolbar.
119
+     * The style of the root/top-level Container of Toolbar that contains
120
+     * toolbars.
120
      */
121
      */
121
     toolbarContainer: {
122
     toolbarContainer: {
122
         bottom: 0,
123
         bottom: 0,

react/features/toolbar/defaultToolbarButtons.js → react/features/toolbox/defaultToolbarButtons.js Näytä tiedosto

37
 }
37
 }
38
 
38
 
39
 /**
39
 /**
40
- * All toolbar buttons' descriptions.
40
+ * All toolbar buttons' descriptors.
41
  */
41
  */
42
 export default {
42
 export default {
43
     /**
43
     /**
44
-     * Object representing camera button.
44
+     * The descriptor of the camera toolbar button.
45
      */
45
      */
46
     camera: {
46
     camera: {
47
         classNames: [ 'button', 'icon-camera' ],
47
         classNames: [ 'button', 'icon-camera' ],
67
     },
67
     },
68
 
68
 
69
     /**
69
     /**
70
-     * The Object representing chat button.
70
+     * The descriptor of the chat toolbar button.
71
      */
71
      */
72
     chat: {
72
     chat: {
73
         classNames: [ 'button', 'icon-chat' ],
73
         classNames: [ 'button', 'icon-chat' ],
92
     },
92
     },
93
 
93
 
94
     /**
94
     /**
95
-     * The object representing contact list button.
95
+     * The descriptor of the contact list toolbar button.
96
      */
96
      */
97
     contacts: {
97
     contacts: {
98
         classNames: [ 'button', 'icon-contactList' ],
98
         classNames: [ 'button', 'icon-contactList' ],
99
         enabled: true,
99
         enabled: true,
100
 
100
 
101
-        // XXX: Hotfix to solve race condition between toolbar rendering and
101
+        // XXX: Hotfix to solve race condition between toolbox rendering and
102
         // contact list view that updates the number of active participants
102
         // contact list view that updates the number of active participants
103
         // via jQuery. There is case when contact list view updates number of
103
         // via jQuery. There is case when contact list view updates number of
104
-        // participants but toolbar has not been rendered yet. Since this issue
104
+        // participants but toolbox has not been rendered yet. Since this issue
105
         // is reproducible only for conferences with the only participant let's
105
         // is reproducible only for conferences with the only participant let's
106
         // use 1 participant as a default value for this badge. Later after
106
         // use 1 participant as a default value for this badge. Later after
107
         // reactification of contact list let's use the value of active
107
         // reactification of contact list let's use the value of active
120
     },
120
     },
121
 
121
 
122
     /**
122
     /**
123
-     * The object representing desktop sharing button.
123
+     * The descriptor of the desktop sharing toolbar button.
124
      */
124
      */
125
     desktop: {
125
     desktop: {
126
         classNames: [ 'button', 'icon-share-desktop' ],
126
         classNames: [ 'button', 'icon-share-desktop' ],
145
     },
145
     },
146
 
146
 
147
     /**
147
     /**
148
-     * The object representing dialpad button.
148
+     * The descriptor of the dialpad toolbar button.
149
      */
149
      */
150
     dialpad: {
150
     dialpad: {
151
         classNames: [ 'button', 'icon-dialpad' ],
151
         classNames: [ 'button', 'icon-dialpad' ],
161
     },
161
     },
162
 
162
 
163
     /**
163
     /**
164
-     * The object representing etherpad button.
164
+     * The descriptor of the etherpad toolbar button.
165
      */
165
      */
166
     etherpad: {
166
     etherpad: {
167
         classNames: [ 'button', 'icon-share-doc' ],
167
         classNames: [ 'button', 'icon-share-doc' ],
176
     },
176
     },
177
 
177
 
178
     /**
178
     /**
179
-     * The object representing button toggling full screen mode.
179
+     * The descriptor of the toolbar button which toggles full-screen mode.
180
      */
180
      */
181
     fullscreen: {
181
     fullscreen: {
182
         classNames: [ 'button', 'icon-full-screen' ],
182
         classNames: [ 'button', 'icon-full-screen' ],
198
     },
198
     },
199
 
199
 
200
     /**
200
     /**
201
-     * The object representing hanging the call up button.
201
+     * The descriptor of the toolbar button which hangs up the call/conference.
202
      */
202
      */
203
     hangup: {
203
     hangup: {
204
         classNames: [ 'button', 'icon-hangup', 'button_hangup' ],
204
         classNames: [ 'button', 'icon-hangup', 'button_hangup' ],
212
     },
212
     },
213
 
213
 
214
     /**
214
     /**
215
-     * The object representing button showing invite user dialog.
215
+     * The descriptor of the toolbar button which shows the invite user dialog.
216
      */
216
      */
217
     invite: {
217
     invite: {
218
         classNames: [ 'button', 'icon-link' ],
218
         classNames: [ 'button', 'icon-link' ],
226
     },
226
     },
227
 
227
 
228
     /**
228
     /**
229
-     * The object representing microphone button.
229
+     * The descriptor of the microphone toolbar button.
230
      */
230
      */
231
     microphone: {
231
     microphone: {
232
         classNames: [ 'button', 'icon-microphone' ],
232
         classNames: [ 'button', 'icon-microphone' ],
281
     },
281
     },
282
 
282
 
283
     /**
283
     /**
284
-     * The object representing profile button.
284
+     * The descriptor of the profile toolbar button.
285
      */
285
      */
286
     profile: {
286
     profile: {
287
         classNames: [ 'button' ],
287
         classNames: [ 'button' ],
299
     },
299
     },
300
 
300
 
301
     /**
301
     /**
302
-     * The object representing "Raise hand" button.
302
+     * The descriptor of the "Raise hand" toolbar button.
303
      */
303
      */
304
     raisehand: {
304
     raisehand: {
305
         classNames: [ 'button', 'icon-raised-hand' ],
305
         classNames: [ 'button', 'icon-raised-hand' ],
320
     },
320
     },
321
 
321
 
322
     /**
322
     /**
323
-     * The object representing recording button. Requires additional
324
-     * initialization in Recording module.
323
+     * The descriptor of the recording toolbar button. Requires additional
324
+     * initialization in the recording module.
325
      */
325
      */
326
     recording: {
326
     recording: {
327
         classNames: [ 'button' ],
327
         classNames: [ 'button' ],
334
     },
334
     },
335
 
335
 
336
     /**
336
     /**
337
-     * The objecr representing settings button.
337
+     * The descriptor of the settings toolbar button.
338
      */
338
      */
339
     settings: {
339
     settings: {
340
         classNames: [ 'button', 'icon-settings' ],
340
         classNames: [ 'button', 'icon-settings' ],
349
     },
349
     },
350
 
350
 
351
     /**
351
     /**
352
-     * The object representing sharing Youtube video button.
352
+     * The descriptor of the "Share YouTube video" toolbar button.
353
      */
353
      */
354
     sharedvideo: {
354
     sharedvideo: {
355
         classNames: [ 'button', 'icon-shared-video' ],
355
         classNames: [ 'button', 'icon-shared-video' ],
371
     },
371
     },
372
 
372
 
373
     /**
373
     /**
374
-     * The object representing SIP call.
374
+     * The descriptor of the SIP call toolbar button.
375
      */
375
      */
376
     sip: {
376
     sip: {
377
         classNames: [ 'button', 'icon-telephone' ],
377
         classNames: [ 'button', 'icon-telephone' ],

react/features/toolbar/functions.js → react/features/toolbox/functions.js Näytä tiedosto

8
 
8
 
9
 import defaultToolbarButtons from './defaultToolbarButtons';
9
 import defaultToolbarButtons from './defaultToolbarButtons';
10
 
10
 
11
-declare var $: Function;
12
-declare var AJS: Object;
13
-declare var interfaceConfig: Object;
14
-
15
 import type { Dispatch } from 'redux-thunk';
11
 import type { Dispatch } from 'redux-thunk';
16
 
12
 
17
 type MapOfAttributes = { [key: string]: * };
13
 type MapOfAttributes = { [key: string]: * };
18
 
14
 
15
+declare var $: Function;
16
+declare var AJS: Object;
17
+declare var interfaceConfig: Object;
18
+
19
 /**
19
 /**
20
- * Maps actions to React component props.
20
+ * Maps (redux) actions to React component props.
21
  *
21
  *
22
  * @param {Function} dispatch - Redux action dispatcher.
22
  * @param {Function} dispatch - Redux action dispatcher.
23
  * @returns {{
23
  * @returns {{
83
  */
83
  */
84
 export function abstractMapStateToProps(state: Object): Object {
84
 export function abstractMapStateToProps(state: Object): Object {
85
     const media = state['features/base/media'];
85
     const media = state['features/base/media'];
86
-    const { visible } = state['features/toolbar'];
86
+    const { visible } = state['features/toolbox'];
87
 
87
 
88
     return {
88
     return {
89
         /**
89
         /**
103
         _videoMuted: media.video.muted,
103
         _videoMuted: media.video.muted,
104
 
104
 
105
         /**
105
         /**
106
-         * Flag showing whether toolbar is visible.
106
+         * Flag showing whether toolbox is visible.
107
          *
107
          *
108
          * @protected
108
          * @protected
109
          * @type {boolean}
109
          * @type {boolean}
116
  * Takes toolbar button props and maps them to HTML attributes to set.
116
  * Takes toolbar button props and maps them to HTML attributes to set.
117
  *
117
  *
118
  * @param {Object} props - Props set to the React component.
118
  * @param {Object} props - Props set to the React component.
119
- * @returns {Object}
119
+ * @returns {MapOfAttributes}
120
  */
120
  */
121
 export function getButtonAttributesByProps(props: Object): MapOfAttributes {
121
 export function getButtonAttributesByProps(props: Object): MapOfAttributes {
122
     const classNames = [ ...props.classNames ];
122
     const classNames = [ ...props.classNames ];
156
 
156
 
157
     if (typeof interfaceConfig !== 'undefined'
157
     if (typeof interfaceConfig !== 'undefined'
158
             && interfaceConfig.TOOLBAR_BUTTONS) {
158
             && interfaceConfig.TOOLBAR_BUTTONS) {
159
-        toolbarButtons = interfaceConfig.TOOLBAR_BUTTONS.reduce(
160
-            (acc, buttonName) => {
161
-                const button = defaultToolbarButtons[buttonName];
159
+        toolbarButtons
160
+            = interfaceConfig.TOOLBAR_BUTTONS.reduce(
161
+                (acc, buttonName) => {
162
+                    const button = defaultToolbarButtons[buttonName];
162
 
163
 
163
-                if (button) {
164
-                    const place = _getToolbarButtonPlace(buttonName);
164
+                    if (button) {
165
+                        const place = _getToolbarButtonPlace(buttonName);
165
 
166
 
166
-                    button.buttonName = buttonName;
167
-                    acc[place].set(buttonName, button);
168
-                }
167
+                        button.buttonName = buttonName;
168
+                        acc[place].set(buttonName, button);
169
+                    }
169
 
170
 
170
-                return acc;
171
-            }, toolbarButtons);
171
+                    return acc;
172
+                },
173
+                toolbarButtons);
172
     }
174
     }
173
 
175
 
174
     return toolbarButtons;
176
     return toolbarButtons;
175
 }
177
 }
176
 
178
 
177
 /**
179
 /**
178
- * Get place for toolbar button.
179
- * Now it can be in main toolbar or in extended (left) toolbar.
180
+ * Get place for toolbar button. Now it can be in the primary Toolbar or in the
181
+ * secondary Toolbar.
180
  *
182
  *
181
  * @param {string} btn - Button name.
183
  * @param {string} btn - Button name.
182
  * @private
184
  * @private

react/features/toolbar/index.js → react/features/toolbox/index.js Näytä tiedosto


+ 39
- 0
react/features/toolbox/middleware.js Näytä tiedosto

1
+/* @flow */
2
+
3
+import { MiddlewareRegistry } from '../base/redux';
4
+
5
+import {
6
+    CLEAR_TOOLBOX_TIMEOUT,
7
+    SET_TOOLBOX_TIMEOUT
8
+} from './actionTypes';
9
+
10
+/**
11
+ * Middleware which intercepts Toolbox actions to handle changes to the
12
+ * visibility timeout of the Toolbox.
13
+ *
14
+ * @param {Store} store - Redux store.
15
+ * @returns {Function}
16
+ */
17
+MiddlewareRegistry.register(store => next => action => {
18
+    switch (action.type) {
19
+    case CLEAR_TOOLBOX_TIMEOUT: {
20
+        const { timeoutID } = store.getState()['features/toolbox'];
21
+
22
+        clearTimeout(timeoutID);
23
+        break;
24
+    }
25
+
26
+    case SET_TOOLBOX_TIMEOUT: {
27
+        const { timeoutID } = store.getState()['features/toolbox'];
28
+        const { handler, timeoutMS } = action;
29
+
30
+        clearTimeout(timeoutID);
31
+        const newTimeoutId = setTimeout(handler, timeoutMS);
32
+
33
+        action.timeoutID = newTimeoutId;
34
+        break;
35
+    }
36
+    }
37
+
38
+    return next(action);
39
+});

react/features/toolbar/reducer.js → react/features/toolbox/reducer.js Näytä tiedosto

3
 import { ReducerRegistry } from '../base/redux';
3
 import { ReducerRegistry } from '../base/redux';
4
 
4
 
5
 import {
5
 import {
6
-    CLEAR_TOOLBAR_TIMEOUT,
7
-    SET_ALWAYS_VISIBLE_TOOLBAR,
6
+    CLEAR_TOOLBOX_TIMEOUT,
7
+    SET_TOOLBOX_ALWAYS_VISIBLE,
8
     SET_SUBJECT,
8
     SET_SUBJECT,
9
     SET_SUBJECT_SLIDE_IN,
9
     SET_SUBJECT_SLIDE_IN,
10
     SET_TOOLBAR_BUTTON,
10
     SET_TOOLBAR_BUTTON,
11
     SET_TOOLBAR_HOVERED,
11
     SET_TOOLBAR_HOVERED,
12
-    SET_TOOLBAR_TIMEOUT,
13
-    SET_TOOLBAR_TIMEOUT_NUMBER,
14
-    SET_TOOLBAR_VISIBLE
12
+    SET_TOOLBOX_TIMEOUT,
13
+    SET_TOOLBOX_TIMEOUT_MS,
14
+    SET_TOOLBOX_VISIBLE
15
 } from './actionTypes';
15
 } from './actionTypes';
16
 import { getDefaultToolbarButtons } from './functions';
16
 import { getDefaultToolbarButtons } from './functions';
17
 
17
 
18
 declare var interfaceConfig: Object;
18
 declare var interfaceConfig: Object;
19
 
19
 
20
 /**
20
 /**
21
- * Returns initial state for toolbar's part of Redux store.
21
+ * Returns initial state for toolbox's part of Redux store.
22
  *
22
  *
23
+ * @private
23
  * @returns {{
24
  * @returns {{
25
+ *     alwaysVisible: boolean,
26
+ *     hovered: boolean,
24
  *     primaryToolbarButtons: Map,
27
  *     primaryToolbarButtons: Map,
25
- *     secondaryToolbarButtons: Map
28
+ *     secondaryToolbarButtons: Map,
29
+ *     subject: string,
30
+ *     subjectSlideIn: boolean,
31
+ *     timeoutID: number,
32
+ *     timeoutMS: number,
33
+ *     visible: boolean
26
  * }}
34
  * }}
27
- * @private
28
  */
35
  */
29
 function _getInitialState() {
36
 function _getInitialState() {
30
-    // Default toolbar timeout for mobile app.
31
-    let toolbarTimeout = 5000;
37
+    // Default toolbox timeout for mobile app.
38
+    let timeoutMS = 5000;
32
 
39
 
33
     if (typeof interfaceConfig !== 'undefined'
40
     if (typeof interfaceConfig !== 'undefined'
34
             && interfaceConfig.INITIAL_TOOLBAR_TIMEOUT) {
41
             && interfaceConfig.INITIAL_TOOLBAR_TIMEOUT) {
35
-        toolbarTimeout = interfaceConfig.INITIAL_TOOLBAR_TIMEOUT;
42
+        timeoutMS = interfaceConfig.INITIAL_TOOLBAR_TIMEOUT;
36
     }
43
     }
37
 
44
 
38
     return {
45
     return {
39
-        /**
40
-         * Contains default toolbar buttons for primary and secondary toolbars.
41
-         *
42
-         * @type {Map}
43
-         */
44
         ...getDefaultToolbarButtons(),
46
         ...getDefaultToolbarButtons(),
45
 
47
 
46
         /**
48
         /**
47
-         * Shows whether toolbar is always visible.
49
+         * The indicator which determines whether the Toolbox should always be
50
+         * visible.
48
          *
51
          *
49
          * @type {boolean}
52
          * @type {boolean}
50
          */
53
          */
51
         alwaysVisible: false,
54
         alwaysVisible: false,
52
 
55
 
53
         /**
56
         /**
54
-         * Shows whether toolbar is hovered.
57
+         * The indicator which determines whether a Toolbar in the Toolbox is
58
+         * hovered.
55
          *
59
          *
56
          * @type {boolean}
60
          * @type {boolean}
57
          */
61
          */
58
         hovered: false,
62
         hovered: false,
59
 
63
 
60
         /**
64
         /**
61
-         * Contains text of conference subject.
65
+         * The text of the conference subject.
62
          *
66
          *
63
          * @type {string}
67
          * @type {string}
64
          */
68
          */
65
         subject: '',
69
         subject: '',
66
 
70
 
67
         /**
71
         /**
68
-         * Shows whether subject is sliding in.
72
+         * The indicator which determines whether the subject is sliding in.
69
          *
73
          *
70
          * @type {boolean}
74
          * @type {boolean}
71
          */
75
          */
72
         subjectSlideIn: false,
76
         subjectSlideIn: false,
73
 
77
 
74
         /**
78
         /**
75
-         * Contains toolbar timeout id.
79
+         * A number, non-zero value which identifies the timer created by a call
80
+         * to setTimeout() with timeoutMS.
76
          *
81
          *
77
          * @type {number|null}
82
          * @type {number|null}
78
          */
83
          */
79
-        timeoutId: null,
84
+        timeoutID: null,
80
 
85
 
81
         /**
86
         /**
82
-         * Contains delay of toolbar timeout.
87
+         * The delay in milliseconds before timeoutID executes (after its
88
+         * initialization).
83
          *
89
          *
84
          * @type {number}
90
          * @type {number}
85
          */
91
          */
86
-        toolbarTimeout,
92
+        timeoutMS,
87
 
93
 
88
         /**
94
         /**
89
-         * Shows whether toolbar is visible.
95
+         * The indicator which determines whether the Toolbox is visible.
90
          *
96
          *
91
          * @type {boolean}
97
          * @type {boolean}
92
          */
98
          */
95
 }
101
 }
96
 
102
 
97
 ReducerRegistry.register(
103
 ReducerRegistry.register(
98
-    'features/toolbar',
104
+    'features/toolbox',
99
     (state: Object = _getInitialState(), action: Object) => {
105
     (state: Object = _getInitialState(), action: Object) => {
100
         switch (action.type) {
106
         switch (action.type) {
101
-        case CLEAR_TOOLBAR_TIMEOUT:
107
+        case CLEAR_TOOLBOX_TIMEOUT:
102
             return {
108
             return {
103
                 ...state,
109
                 ...state,
104
-                timeoutId: undefined
110
+                timeoutID: undefined
105
             };
111
             };
106
 
112
 
107
-        case SET_ALWAYS_VISIBLE_TOOLBAR:
113
+        case SET_TOOLBOX_ALWAYS_VISIBLE:
108
             return {
114
             return {
109
                 ...state,
115
                 ...state,
110
                 alwaysVisible: action.alwaysVisible
116
                 alwaysVisible: action.alwaysVisible
131
                 hovered: action.hovered
137
                 hovered: action.hovered
132
             };
138
             };
133
 
139
 
134
-        case SET_TOOLBAR_TIMEOUT:
140
+        case SET_TOOLBOX_TIMEOUT:
135
             return {
141
             return {
136
                 ...state,
142
                 ...state,
137
-                toolbarTimeout: action.toolbarTimeout,
138
-                timeoutId: action.timeoutId
143
+                timeoutID: action.timeoutID,
144
+                timeoutMS: action.timeoutMS
139
             };
145
             };
140
 
146
 
141
-        case SET_TOOLBAR_TIMEOUT_NUMBER:
147
+        case SET_TOOLBOX_TIMEOUT_MS:
142
             return {
148
             return {
143
                 ...state,
149
                 ...state,
144
-                toolbarTimeout: action.toolbarTimeout
150
+                timeoutMS: action.timeoutMS
145
             };
151
             };
146
 
152
 
147
-        case SET_TOOLBAR_VISIBLE:
153
+        case SET_TOOLBOX_VISIBLE:
148
             return {
154
             return {
149
                 ...state,
155
                 ...state,
150
                 visible: action.visible
156
                 visible: action.visible
161
  * @param {Object} action - Dispatched action.
167
  * @param {Object} action - Dispatched action.
162
  * @param {Object} action.button - Object describing toolbar button.
168
  * @param {Object} action.button - Object describing toolbar button.
163
  * @param {Object} action.buttonName - The name of the button.
169
  * @param {Object} action.buttonName - The name of the button.
164
- * @returns {Object}
165
  * @private
170
  * @private
171
+ * @returns {Object}
166
  */
172
  */
167
 function _setButton(state, { buttonName, button }): Object {
173
 function _setButton(state, { buttonName, button }): Object {
168
     const {
174
     const {

Loading…
Peruuta
Tallenna