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

modules/UI/videolayout/RemoteVideo.js

@@ -163,6 +163,8 @@ RemoteVideo.prototype._generatePopupContent = function() {
     const onVolumeChange = this._setAudioVolume;
     const { isModerator } = APP.conference;
     const participantID = this.id;
+    const menuPosition = interfaceConfig.VERTICAL_FILMSTRIP
+        ? 'left bottom' : 'top center';
 
     ReactDOM.render(
         <Provider store = { APP.store }>
@@ -172,6 +174,7 @@ RemoteVideo.prototype._generatePopupContent = function() {
                         initialVolumeValue = { initialVolumeValue }
                         isAudioMuted = { this.isAudioMuted }
                         isModerator = { isModerator }
+                        menuPosition = { menuPosition }
                         onMenuDisplay
                             = {this._onRemoteVideoMenuDisplay.bind(this)}
                         onRemoteControlToggle = { onRemoteControlToggle }

react/features/remote-video-menu/components/RemoteVideoMenuTriggerButton.js

@@ -1,6 +1,5 @@
 // @flow
 
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { Popover } from '../../base/popover';
@@ -17,57 +16,69 @@ declare var $: Object;
 declare var interfaceConfig: Object;
 
 /**
- * React {@code Component} for displaying an icon associated with opening the
+ * The type of the React {@code Component} props of
- * the {@code RemoteVideoMenu}.
+ * {@link RemoteVideoMenuTriggerButton}.
- *
- * @extends {Component}
  */
-class RemoteVideoMenuTriggerButton extends Component<*> {
+type Props = {
-    static propTypes = {
+
     /**
      * A value between 0 and 1 indicating the volume of the participant's
      * audio element.
      */
-        initialVolumeValue: PropTypes.number,
+    initialVolumeValue: number,
 
     /**
      * Whether or not the participant is currently muted.
      */
-        isAudioMuted: PropTypes.bool,
+    isAudioMuted: boolean,
 
     /**
      * Whether or not the participant is a conference moderator.
      */
-        isModerator: PropTypes.bool,
+    isModerator: boolean,
 
     /**
      * Callback to invoke when the popover has been displayed.
      */
-        onMenuDisplay: PropTypes.func,
+    onMenuDisplay: Function,
 
     /**
      * Callback to invoke choosing to start a remote control session with
      * the participant.
      */
-        onRemoteControlToggle: PropTypes.func,
+    onRemoteControlToggle: Function,
 
     /**
      * Callback to invoke when changing the level of the participant's
      * audio element.
      */
-        onVolumeChange: PropTypes.func,
+    onVolumeChange: Function,
+
+    /**
+     * The position relative to the trigger the remote menu should display
+     * from. Valid values are those supported by AtlasKit
+     * {@code InlineDialog}.
+     */
+    menuPosition: string,
 
     /**
      * The ID for the participant on which the remote video menu will act.
      */
-        participantID: PropTypes.string,
+    participantID: string,
 
     /**
      * The current state of the participant's remote control session.
      */
-        remoteControlState: PropTypes.number
+    remoteControlState: number
 };
 
+/**
+ * React {@code Component} for displaying an icon associated with opening the
+ * the {@code RemoteVideoMenu}.
+ *
+ * @extends {Component}
+ */
+class RemoteVideoMenuTriggerButton extends Component<Props> {
     /**
      * The internal reference to topmost DOM/HTML element backing the React
      * {@code Component}. Accessed directly for associating an element as
@@ -108,8 +119,7 @@ class RemoteVideoMenuTriggerButton extends Component<*> {
             <Popover
                 content = { content }
                 onPopoverOpen = { this._onShowRemoteMenu }
-                position = { interfaceConfig.VERTICAL_FILMSTRIP
+                position = { this.props.menuPosition }>
-                    ? 'left bottom' : 'top center' }>
                 <span
                     className = 'popover-trigger remote-video-menu-trigger'>
                     <i