瀏覽代碼

fix(audio-only): remove button from toolbar and set label cursor

Audio only mode will be toggleable only from the VideoStatusLabel,
so remove AudioOnlyButton from the toolbar and delete the component
itself. As a result of the button being removed, a truthy check in
VideoStatusLabel was also removed to ensure it will display as it
is now the only way to toggle audio only mode. Also set the cursor
on VideoStatusLabel to always be default, so it can never show the
text cursor.
j8
Leonard Kim 8 年之前
父節點
當前提交
a1476c68f1

+ 1
- 1
css/_videolayout_default.scss 查看文件

496
 }
496
 }
497
 
497
 
498
 .audio-only-label {
498
 .audio-only-label {
499
-    cursor: default;
500
     display: flex;
499
     display: flex;
501
     height: auto;
500
     height: auto;
502
     justify-content: center;
501
     justify-content: center;
507
 .video-state-indicator {
506
 .video-state-indicator {
508
     background: $videoStateIndicatorBackground;
507
     background: $videoStateIndicatorBackground;
509
     color: $videoStateIndicatorColor;
508
     color: $videoStateIndicatorColor;
509
+    cursor: default;
510
     font-size: 13px;
510
     font-size: 13px;
511
     height: 40px;
511
     height: 40px;
512
     line-height: 20px;
512
     line-height: 20px;

+ 1
- 1
interface_config.js 查看文件

38
         //main toolbar
38
         //main toolbar
39
         'microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'hangup',
39
         'microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'hangup',
40
         //extended toolbar
40
         //extended toolbar
41
-        'profile', 'contacts', 'chat', 'audioonly', 'recording', 'etherpad', 'sharedvideo', 'sip', 'settings', 'raisehand', 'filmstrip'], // jshint ignore:line
41
+        'profile', 'contacts', 'chat', 'recording', 'etherpad', 'sharedvideo', 'sip', 'settings', 'raisehand', 'filmstrip'], // jshint ignore:line
42
     /**
42
     /**
43
      * Main Toolbar Buttons
43
      * Main Toolbar Buttons
44
      * All of them should be in TOOLBAR_BUTTONS
44
      * All of them should be in TOOLBAR_BUTTONS

+ 0
- 103
react/features/toolbox/components/AudioOnlyButton.js 查看文件

1
-import React, { Component } from 'react';
2
-import { connect } from 'react-redux';
3
-
4
-import { toggleAudioOnly } from '../../base/conference';
5
-
6
-import ToolbarButton from './ToolbarButton';
7
-
8
-/**
9
- * React {@code Component} for toggling audio only mode.
10
- *
11
- * @extends Component
12
- */
13
-class AudioOnlyButton extends Component {
14
-    /**
15
-     * {@code AudioOnlyButton}'s property types.
16
-     *
17
-     * @static
18
-     */
19
-    static propTypes = {
20
-        /**
21
-         * Whether or not audio only mode is enabled.
22
-         */
23
-        _audioOnly: React.PropTypes.bool,
24
-
25
-        /**
26
-         * Invoked to toggle audio only mode.
27
-         */
28
-        dispatch: React.PropTypes.func,
29
-
30
-        /**
31
-         * From which side the button tooltip should appear.
32
-         */
33
-        tooltipPosition: React.PropTypes.string
34
-    }
35
-
36
-    /**
37
-     * Initializes a new {@code AudioOnlyButton} instance.
38
-     *
39
-     * @param {Object} props - The read-only properties with which the new
40
-     * instance is to be initialized.
41
-     */
42
-    constructor(props) {
43
-        super(props);
44
-
45
-        // Bind event handlers so they are only bound once for every instance.
46
-        this._onClick = this._onClick.bind(this);
47
-    }
48
-
49
-    /**
50
-     * Implements React's {@link Component#render()}.
51
-     *
52
-     * @inheritdoc
53
-     * @returns {ReactElement}
54
-     */
55
-    render() {
56
-        const buttonConfiguration = {
57
-            buttonName: 'audioonly',
58
-            classNames: [ 'button', 'icon-visibility' ],
59
-            enabled: true,
60
-            id: 'toolbar_button_audioonly',
61
-            tooltipKey: 'toolbar.audioonly'
62
-        };
63
-
64
-        if (this.props._audioOnly) {
65
-            buttonConfiguration.classNames.push('toggled button-active');
66
-        }
67
-
68
-        return (
69
-            <ToolbarButton
70
-                button = { buttonConfiguration }
71
-                onClick = { this._onClick }
72
-                tooltipPosition = { this.props.tooltipPosition } />
73
-        );
74
-    }
75
-
76
-    /**
77
-     * Dispatches an action to toggle audio only mode.
78
-     *
79
-     * @private
80
-     * @returns {void}
81
-     */
82
-    _onClick() {
83
-        this.props.dispatch(toggleAudioOnly());
84
-    }
85
-}
86
-
87
-/**
88
- * Maps (parts of) the Redux state to the associated {@code AudioOnlyButton}'s
89
- * props.
90
- *
91
- * @param {Object} state - The Redux state.
92
- * @private
93
- * @returns {{
94
- *     _audioOnly: boolean
95
- * }}
96
- */
97
-function _mapStateToProps(state) {
98
-    return {
99
-        _audioOnly: state['features/base/conference'].audioOnly
100
-    };
101
-}
102
-
103
-export default connect(_mapStateToProps)(AudioOnlyButton);

+ 0
- 1
react/features/toolbox/components/index.js 查看文件

1
-export { default as AudioOnlyButton } from './AudioOnlyButton';
2
 export { default as Toolbox } from './Toolbox';
1
 export { default as Toolbox } from './Toolbox';

+ 0
- 10
react/features/toolbox/defaultToolbarButtons.js 查看文件

6
 
6
 
7
 import { openInviteDialog } from '../invite';
7
 import { openInviteDialog } from '../invite';
8
 
8
 
9
-import { AudioOnlyButton } from './components';
10
-
11
 declare var APP: Object;
9
 declare var APP: Object;
12
 declare var config: Object;
10
 declare var config: Object;
13
 declare var JitsiMeetJS: Object;
11
 declare var JitsiMeetJS: Object;
44
  * All toolbar buttons' descriptors.
42
  * All toolbar buttons' descriptors.
45
  */
43
  */
46
 export default {
44
 export default {
47
-    /**
48
-     * The descriptor of the audio only toolbar button. Defers actual
49
-     * descriptor implementation to the {@code AudioOnlyButton} component.
50
-     */
51
-    audioonly: {
52
-        component: AudioOnlyButton
53
-    },
54
-
55
     /**
45
     /**
56
      * The descriptor of the camera toolbar button.
46
      * The descriptor of the camera toolbar button.
57
      */
47
      */

+ 4
- 8
react/features/video-status-label/components/VideoStatusLabel.js 查看文件

66
     render() {
66
     render() {
67
         const { _audioOnly, _conferenceStarted, _largeVideoHD, t } = this.props;
67
         const { _audioOnly, _conferenceStarted, _largeVideoHD, t } = this.props;
68
 
68
 
69
-        // FIXME These truthy checks should not be necessary. The
70
-        // _conferenceStarted check is used to be defensive against toggling
71
-        // audio only mode while there is no conference and hides the need for
72
-        // error handling around audio only mode toggling. The _largeVideoHD
73
-        // check is used to prevent the label from displaying while the video
74
-        // resolution status is unknown but ties this component to the
75
-        // LargeVideoManager.
76
-        if (!_conferenceStarted || _largeVideoHD === undefined) {
69
+        // FIXME The _conferenceStarted check is used to be defensive against
70
+        // toggling audio only mode while there is no conference and hides the
71
+        // need for error handling around audio only mode toggling.
72
+        if (!_conferenceStarted) {
77
             return null;
73
             return null;
78
         }
74
         }
79
 
75
 

Loading…
取消
儲存