Browse Source

ref(thumbnail): pass in position of remote menu popover

j8
Leonard Kim 7 years ago
parent
commit
aaaa3e05d1

+ 3
- 0
modules/UI/videolayout/RemoteVideo.js View File

163
     const onVolumeChange = this._setAudioVolume;
163
     const onVolumeChange = this._setAudioVolume;
164
     const { isModerator } = APP.conference;
164
     const { isModerator } = APP.conference;
165
     const participantID = this.id;
165
     const participantID = this.id;
166
+    const menuPosition = interfaceConfig.VERTICAL_FILMSTRIP
167
+        ? 'left bottom' : 'top center';
166
 
168
 
167
     ReactDOM.render(
169
     ReactDOM.render(
168
         <Provider store = { APP.store }>
170
         <Provider store = { APP.store }>
172
                         initialVolumeValue = { initialVolumeValue }
174
                         initialVolumeValue = { initialVolumeValue }
173
                         isAudioMuted = { this.isAudioMuted }
175
                         isAudioMuted = { this.isAudioMuted }
174
                         isModerator = { isModerator }
176
                         isModerator = { isModerator }
177
+                        menuPosition = { menuPosition }
175
                         onMenuDisplay
178
                         onMenuDisplay
176
                             = {this._onRemoteVideoMenuDisplay.bind(this)}
179
                             = {this._onRemoteVideoMenuDisplay.bind(this)}
177
                         onRemoteControlToggle = { onRemoteControlToggle }
180
                         onRemoteControlToggle = { onRemoteControlToggle }

+ 59
- 49
react/features/remote-video-menu/components/RemoteVideoMenuTriggerButton.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
-import PropTypes from 'prop-types';
4
 import React, { Component } from 'react';
3
 import React, { Component } from 'react';
5
 
4
 
6
 import { Popover } from '../../base/popover';
5
 import { Popover } from '../../base/popover';
16
 declare var $: Object;
15
 declare var $: Object;
17
 declare var interfaceConfig: Object;
16
 declare var interfaceConfig: Object;
18
 
17
 
18
+/**
19
+ * The type of the React {@code Component} props of
20
+ * {@link RemoteVideoMenuTriggerButton}.
21
+ */
22
+type Props = {
23
+
24
+    /**
25
+     * A value between 0 and 1 indicating the volume of the participant's
26
+     * audio element.
27
+     */
28
+    initialVolumeValue: number,
29
+
30
+    /**
31
+     * Whether or not the participant is currently muted.
32
+     */
33
+    isAudioMuted: boolean,
34
+
35
+    /**
36
+     * Whether or not the participant is a conference moderator.
37
+     */
38
+    isModerator: boolean,
39
+
40
+    /**
41
+     * Callback to invoke when the popover has been displayed.
42
+     */
43
+    onMenuDisplay: Function,
44
+
45
+    /**
46
+     * Callback to invoke choosing to start a remote control session with
47
+     * the participant.
48
+     */
49
+    onRemoteControlToggle: Function,
50
+
51
+    /**
52
+     * Callback to invoke when changing the level of the participant's
53
+     * audio element.
54
+     */
55
+    onVolumeChange: Function,
56
+
57
+    /**
58
+     * The position relative to the trigger the remote menu should display
59
+     * from. Valid values are those supported by AtlasKit
60
+     * {@code InlineDialog}.
61
+     */
62
+    menuPosition: string,
63
+
64
+    /**
65
+     * The ID for the participant on which the remote video menu will act.
66
+     */
67
+    participantID: string,
68
+
69
+    /**
70
+     * The current state of the participant's remote control session.
71
+     */
72
+    remoteControlState: number
73
+};
74
+
19
 /**
75
 /**
20
  * React {@code Component} for displaying an icon associated with opening the
76
  * React {@code Component} for displaying an icon associated with opening the
21
  * the {@code RemoteVideoMenu}.
77
  * the {@code RemoteVideoMenu}.
22
  *
78
  *
23
  * @extends {Component}
79
  * @extends {Component}
24
  */
80
  */
25
-class RemoteVideoMenuTriggerButton extends Component<*> {
26
-    static propTypes = {
27
-        /**
28
-         * A value between 0 and 1 indicating the volume of the participant's
29
-         * audio element.
30
-         */
31
-        initialVolumeValue: PropTypes.number,
32
-
33
-        /**
34
-         * Whether or not the participant is currently muted.
35
-         */
36
-        isAudioMuted: PropTypes.bool,
37
-
38
-        /**
39
-         * Whether or not the participant is a conference moderator.
40
-         */
41
-        isModerator: PropTypes.bool,
42
-
43
-        /**
44
-         * Callback to invoke when the popover has been displayed.
45
-         */
46
-        onMenuDisplay: PropTypes.func,
47
-
48
-        /**
49
-         * Callback to invoke choosing to start a remote control session with
50
-         * the participant.
51
-         */
52
-        onRemoteControlToggle: PropTypes.func,
53
-
54
-        /**
55
-         * Callback to invoke when changing the level of the participant's
56
-         * audio element.
57
-         */
58
-        onVolumeChange: PropTypes.func,
59
-
60
-        /**
61
-         * The ID for the participant on which the remote video menu will act.
62
-         */
63
-        participantID: PropTypes.string,
64
-
65
-        /**
66
-         * The current state of the participant's remote control session.
67
-         */
68
-        remoteControlState: PropTypes.number
69
-    };
70
-
81
+class RemoteVideoMenuTriggerButton extends Component<Props> {
71
     /**
82
     /**
72
      * The internal reference to topmost DOM/HTML element backing the React
83
      * The internal reference to topmost DOM/HTML element backing the React
73
      * {@code Component}. Accessed directly for associating an element as
84
      * {@code Component}. Accessed directly for associating an element as
108
             <Popover
119
             <Popover
109
                 content = { content }
120
                 content = { content }
110
                 onPopoverOpen = { this._onShowRemoteMenu }
121
                 onPopoverOpen = { this._onShowRemoteMenu }
111
-                position = { interfaceConfig.VERTICAL_FILMSTRIP
112
-                    ? 'left bottom' : 'top center' }>
122
+                position = { this.props.menuPosition }>
113
                 <span
123
                 <span
114
                     className = 'popover-trigger remote-video-menu-trigger'>
124
                     className = 'popover-trigger remote-video-menu-trigger'>
115
                     <i
125
                     <i

Loading…
Cancel
Save