瀏覽代碼

fix(toolbox) add back toggle camera button

master
hmuresan 4 年之前
父節點
當前提交
5b77d722d7

+ 1
- 1
react/features/base/config/constants.js 查看文件

18
     'fodeviceselection', 'hangup', 'profile', 'chat', 'recording',
18
     'fodeviceselection', 'hangup', 'profile', 'chat', 'recording',
19
     'livestreaming', 'etherpad', 'sharedvideo', 'shareaudio', 'settings', 'raisehand',
19
     'livestreaming', 'etherpad', 'sharedvideo', 'shareaudio', 'settings', 'raisehand',
20
     'videoquality', 'filmstrip', 'participants-pane', 'feedback', 'stats', 'shortcuts',
20
     'videoquality', 'filmstrip', 'participants-pane', 'feedback', 'stats', 'shortcuts',
21
-    'tileview', 'select-background', 'download', 'help', 'mute-everyone', 'mute-video-everyone',
21
+    'tileview', 'toggle-camera', 'select-background', 'download', 'help', 'mute-everyone', 'mute-video-everyone',
22
     'security'
22
     'security'
23
 ];
23
 ];

+ 75
- 0
react/features/toolbox/components/web/ToggleCameraButton.js 查看文件

1
+// @flow
2
+
3
+import { translate } from '../../../base/i18n';
4
+import { IconCameraRefresh } from '../../../base/icons';
5
+import { connect } from '../../../base/redux';
6
+import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
7
+import { isLocalCameraTrackMuted, isToggleCameraEnabled, toggleCamera } from '../../../base/tracks';
8
+
9
+/**
10
+ * The type of the React {@code Component} props of {@link ToggleCameraButton}.
11
+ */
12
+type Props = AbstractButtonProps & {
13
+
14
+    /**
15
+     * Whether the current conference is in audio only mode or not.
16
+     */
17
+    _audioOnly: boolean,
18
+
19
+    /**
20
+     * Whether video is currently muted or not.
21
+     */
22
+    _videoMuted: boolean,
23
+
24
+    /**
25
+     * The Redux dispatch function.
26
+     */
27
+    dispatch: Function
28
+};
29
+
30
+/**
31
+ * An implementation of a button for toggling the camera facing mode.
32
+ */
33
+class ToggleCameraButton extends AbstractButton<Props, any> {
34
+    accessibilityLabel = 'toolbar.accessibilityLabel.toggleCamera';
35
+    icon = IconCameraRefresh;
36
+    label = 'toolbar.toggleCamera';
37
+
38
+    /**
39
+     * Handles clicking/pressing the button.
40
+     *
41
+     * @returns {void}
42
+     */
43
+    _handleClick() {
44
+        this.props.dispatch(toggleCamera());
45
+    }
46
+
47
+    /**
48
+     * Whether this button is disabled or not.
49
+     *
50
+     * @returns {boolean}
51
+     */
52
+    _isDisabled() {
53
+        return this.props._audioOnly || this.props._videoMuted;
54
+    }
55
+}
56
+
57
+/**
58
+ * Maps (parts of) the redux state to the associated props for the
59
+ * {@code ToggleCameraButton} component.
60
+ *
61
+ * @param {Object} state - The Redux state.
62
+ * @returns {Props}
63
+ */
64
+function mapStateToProps(state): Object {
65
+    const { enabled: audioOnly } = state['features/base/audio-only'];
66
+    const tracks = state['features/base/tracks'];
67
+
68
+    return {
69
+        _audioOnly: Boolean(audioOnly),
70
+        _videoMuted: isLocalCameraTrackMuted(tracks),
71
+        visible: isToggleCameraEnabled(state)
72
+    };
73
+}
74
+
75
+export default translate(connect(mapStateToProps)(ToggleCameraButton));

+ 8
- 0
react/features/toolbox/components/web/Toolbox.js 查看文件

88
 import RaiseHandButton from './RaiseHandButton';
88
 import RaiseHandButton from './RaiseHandButton';
89
 import Separator from './Separator';
89
 import Separator from './Separator';
90
 import ShareDesktopButton from './ShareDesktopButton';
90
 import ShareDesktopButton from './ShareDesktopButton';
91
+import ToggleCameraButton from './ToggleCameraButton';
91
 import VideoSettingsButton from './VideoSettingsButton';
92
 import VideoSettingsButton from './VideoSettingsButton';
92
 
93
 
93
 /**
94
 /**
609
             group: 2
610
             group: 2
610
         };
611
         };
611
 
612
 
613
+        const toggleCamera = {
614
+            key: 'toggle-camera',
615
+            Content: ToggleCameraButton,
616
+            group: 2
617
+        };
618
+
612
         const videoQuality = {
619
         const videoQuality = {
613
             key: 'videoquality',
620
             key: 'videoquality',
614
             Content: VideoQualityButton,
621
             Content: VideoQualityButton,
741
             raisehand,
748
             raisehand,
742
             participants,
749
             participants,
743
             tileview,
750
             tileview,
751
+            toggleCamera,
744
             videoQuality,
752
             videoQuality,
745
             fullscreen,
753
             fullscreen,
746
             security,
754
             security,

Loading…
取消
儲存