mirror of https://github.com/jitsi/jitsi-meet
feat(jitsipopover): convert to InlineDialog (#1804)
* feat(small-video): use InlineDialog for stats and remote menu - Remove JitsiPopover and use InlineDialog instead. - Bring the remote menu icon into react. - Make vertical filmstrip position:fixed so popper (AtlasKit dependency) sets InlineDialogs and eventually tooltips to position:fixed. * ref(remote-menu): hook KickButton to redux * ref(remote-menu): hook MuteButton to redux * modify padding, toggle dialogs * pixel push margins to align dialogs, adjust padding of dialogs * add comment about margin for dialog, add file I forgot * modify indicator markup so the icon can be moved down while trigger stays at top of toolbarpull/1888/head jitsi-meet_2354
virtuacoplenny
7 years ago
committed by
yanas
parent
cd910e3074
commit
725d39ddcd
@ -1,92 +0,0 @@ |
||||
.jitsipopover { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
z-index: $jitsipopoverZ; |
||||
display: table; |
||||
visibility: hidden; |
||||
max-width: 300px; |
||||
min-width: 100px; |
||||
text-align: left; |
||||
color: $popoverFontColor; |
||||
background-color: $popoverBg; |
||||
background-clip: padding-box; |
||||
border-radius: $borderRadius; |
||||
/*-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);*/ |
||||
/*box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);*/ |
||||
white-space: normal; |
||||
margin-top: -$popoverMenuPadding; |
||||
|
||||
|
||||
&__menu-padding, |
||||
&__menu-padding-top { |
||||
position: absolute; |
||||
width: 100px; |
||||
} |
||||
|
||||
/** |
||||
* Invisible padding is added to the bottom of the popover to extend its |
||||
* height so it does not close when moving the mouse from the trigger |
||||
* element towards the popover itself. |
||||
*/ |
||||
&__menu-padding { |
||||
bottom: -$popoverMenuPadding; |
||||
height: $popoverMenuPadding; |
||||
} |
||||
|
||||
/** |
||||
* Invisible padding is added to the top of the popover to extend its height |
||||
* so it does not close automatically when its height is shrunk from showing |
||||
* less video statistics. |
||||
*/ |
||||
&__menu-padding-top { |
||||
height: 20px; |
||||
top: -20px; |
||||
} |
||||
|
||||
&__showmore { |
||||
display: block; |
||||
text-align: center; |
||||
width: 90px; |
||||
margin: 10px auto; |
||||
} |
||||
|
||||
> .arrow { |
||||
position: absolute; |
||||
display: block; |
||||
left: 50%; |
||||
bottom: -5px; |
||||
margin-left: -5px; |
||||
width: 0; |
||||
height: 0; |
||||
border-color: transparent; |
||||
border-top-color: $popoverBg; |
||||
border-style: solid; |
||||
border-width: 5px; |
||||
border-bottom-width: 0; |
||||
} |
||||
|
||||
/** |
||||
* Override default "top" styles to support popovers appearing from the |
||||
* left of the popover trigger element. |
||||
*/ |
||||
&.left { |
||||
margin-left: -$popoverMenuPadding; |
||||
margin-top: 0; |
||||
|
||||
.arrow { |
||||
border-color: transparent transparent transparent $popoverBg; |
||||
border-width: 5px 0px 5px 5px; |
||||
margin-left: 0; |
||||
margin-top: -5px; |
||||
} |
||||
|
||||
.jitsipopover { |
||||
&__menu-padding { |
||||
bottom: 0; |
||||
height: 100%; |
||||
width: $popoverMenuPadding; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -1,276 +0,0 @@ |
||||
/* global $ */ |
||||
|
||||
/* eslint-disable no-unused-vars */ |
||||
import React, { Component } from 'react'; |
||||
import ReactDOM from 'react-dom'; |
||||
import { I18nextProvider } from 'react-i18next'; |
||||
|
||||
import { i18next } from '../../../react/features/base/i18n'; |
||||
/* eslint-enable no-unused-vars */ |
||||
|
||||
const positionConfigurations = { |
||||
left: { |
||||
|
||||
// Align the popover's right side to the target element.
|
||||
my: 'right', |
||||
|
||||
// Align the popover to the left side of the target element.
|
||||
at: 'left', |
||||
|
||||
// Force the popover to fit within the viewport.
|
||||
collision: 'fit', |
||||
|
||||
/** |
||||
* Callback invoked by jQuery UI tooltip. |
||||
* |
||||
* @param {Object} position - The top and bottom position the popover |
||||
* element should be set at. |
||||
* @param {Object} element. - Additional size and position information |
||||
* about the popover element and target. |
||||
* @param {Object} elements.element - Has position and size related data |
||||
* for the popover element itself. |
||||
* @param {Object} elements.target - Has position and size related data |
||||
* for the target element the popover displays from. |
||||
*/ |
||||
using: function setPositionLeft(position, elements) { |
||||
const { element, target } = elements; |
||||
|
||||
$('.jitsipopover').css({ |
||||
left: element.left, |
||||
top: element.top, |
||||
visibility: 'visible' |
||||
}); |
||||
|
||||
// Move additional padding to the right edge of the popover and
|
||||
// allow css to take care of width. The padding is used to maintain
|
||||
// a hover state between the target and the popover.
|
||||
$('.jitsipopover > .jitsipopover__menu-padding') |
||||
.css({ left: element.width }); |
||||
|
||||
// Find the distance from the top of the popover to the center of
|
||||
// the target and use that value to position the arrow to point to
|
||||
// it.
|
||||
const verticalCenterOfTarget = target.height / 2; |
||||
const verticalDistanceFromTops = target.top - element.top; |
||||
const verticalPositionOfTargetCenter |
||||
= verticalDistanceFromTops + verticalCenterOfTarget; |
||||
|
||||
$('.jitsipopover > .arrow').css({ |
||||
left: element.width, |
||||
top: verticalPositionOfTargetCenter |
||||
}); |
||||
} |
||||
}, |
||||
top: { |
||||
my: "bottom", |
||||
at: "top", |
||||
collision: "fit", |
||||
using: function setPositionTop(position, elements) { |
||||
const { element, target } = elements; |
||||
const calcLeft = target.left - element.left + target.width / 2; |
||||
const paddingLeftPosition = calcLeft - 50; |
||||
const $jistiPopover = $('.jitsipopover'); |
||||
|
||||
$jistiPopover.css({ |
||||
left: element.left, |
||||
top: element.top, |
||||
visibility: 'visible' |
||||
}); |
||||
$jistiPopover.find('.arrow').css({ left: calcLeft }); |
||||
$jistiPopover.find('.jitsipopover__menu-padding') |
||||
.css({ left: paddingLeftPosition }); |
||||
$jistiPopover.find('.jitsipopover__menu-padding-top') |
||||
.css({ left: paddingLeftPosition }); |
||||
} |
||||
} |
||||
}; |
||||
export default (function () { |
||||
/** |
||||
* The default options |
||||
*/ |
||||
const defaultOptions = { |
||||
skin: 'white', |
||||
content: '', |
||||
hasArrow: true, |
||||
onBeforePosition: undefined, |
||||
position: 'top' |
||||
}; |
||||
|
||||
/** |
||||
* Constructs new JitsiPopover and attaches it to the element |
||||
* @param element jquery selector |
||||
* @param options the options for the popover. |
||||
* @constructor |
||||
*/ |
||||
function JitsiPopover(element, options) |
||||
{ |
||||
this.options = Object.assign({}, defaultOptions, options); |
||||
this.elementIsHovered = false; |
||||
this.popoverIsHovered = false; |
||||
this.popoverShown = false; |
||||
|
||||
element.data("jitsi_popover", this); |
||||
this.element = element; |
||||
this.template = this.getTemplate(); |
||||
var self = this; |
||||
this.element.on("mouseenter", function () { |
||||
self.elementIsHovered = true; |
||||
self.show(); |
||||
}).on("mouseleave", function () { |
||||
self.elementIsHovered = false; |
||||
setTimeout(function () { |
||||
self.hide(); |
||||
}, 10); |
||||
}); |
||||
} |
||||
|
||||
/** |
||||
* Returns template for popover |
||||
*/ |
||||
JitsiPopover.prototype.getTemplate = function () { |
||||
const { hasArrow, position, skin } = this.options; |
||||
|
||||
let arrow = ''; |
||||
if (hasArrow) { |
||||
arrow = '<div class="arrow"></div>'; |
||||
} |
||||
|
||||
return ( |
||||
`<div class="jitsipopover ${skin} ${position}">
|
||||
<div class="jitsipopover__menu-padding-top"></div> |
||||
${arrow} |
||||
<div class="jitsipopover__content"></div> |
||||
<div class="jitsipopover__menu-padding"></div> |
||||
</div>` |
||||
); |
||||
}; |
||||
|
||||
/** |
||||
* Shows the popover |
||||
*/ |
||||
JitsiPopover.prototype.show = function () { |
||||
if(!JitsiPopover.enabled) |
||||
return; |
||||
this.createPopover(); |
||||
this.popoverShown = true; |
||||
}; |
||||
|
||||
/** |
||||
* Hides the popover if not hovered or popover is not shown. |
||||
*/ |
||||
JitsiPopover.prototype.hide = function () { |
||||
if(!this.elementIsHovered && !this.popoverIsHovered && |
||||
this.popoverShown) { |
||||
this.forceHide(); |
||||
} |
||||
}; |
||||
|
||||
/** |
||||
* Hides the popover and clears the document elements added by popover. |
||||
*/ |
||||
JitsiPopover.prototype.forceHide = function () { |
||||
this.remove(); |
||||
this.popoverShown = false; |
||||
if(this.popoverIsHovered) { //the browser is not firing hover events
|
||||
//when the element was on hover if got removed.
|
||||
this.popoverIsHovered = false; |
||||
this.onHoverPopover(this.popoverIsHovered); |
||||
} |
||||
}; |
||||
|
||||
/** |
||||
* Creates the popover html. |
||||
*/ |
||||
JitsiPopover.prototype.createPopover = function () { |
||||
let $popover = $('.jitsipopover'); |
||||
|
||||
if (!$popover.length) { |
||||
$('body').append(this.template); |
||||
|
||||
$popover = $('.jitsipopover'); |
||||
|
||||
$popover.on('mouseenter', () => { |
||||
this.popoverIsHovered = true; |
||||
if (typeof this.onHoverPopover === 'function') { |
||||
this.onHoverPopover(this.popoverIsHovered); |
||||
} |
||||
}); |
||||
|
||||
$popover.on('mouseleave', () => { |
||||
this.popoverIsHovered = false; |
||||
this.hide(); |
||||
if (typeof this.onHoverPopover === 'function') { |
||||
this.onHoverPopover(this.popoverIsHovered); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
const $popoverContent = $popover.find('.jitsipopover__content'); |
||||
|
||||
/* jshint ignore:start */ |
||||
ReactDOM.render( |
||||
<I18nextProvider i18n = { i18next }> |
||||
{ this.options.content } |
||||
</I18nextProvider>, |
||||
$popoverContent.get(0), |
||||
() => { |
||||
this.refreshPosition(); |
||||
}); |
||||
/* jshint ignore:end */ |
||||
}; |
||||
|
||||
/** |
||||
* Adds a hover listener to the popover. |
||||
*/ |
||||
JitsiPopover.prototype.addOnHoverPopover = function (listener) { |
||||
this.onHoverPopover = listener; |
||||
}; |
||||
|
||||
/** |
||||
* Refreshes the position of the popover. |
||||
*/ |
||||
JitsiPopover.prototype.refreshPosition = function () { |
||||
const positionOptions = Object.assign( |
||||
{}, |
||||
positionConfigurations[this.options.position], |
||||
{ |
||||
of: this.element |
||||
} |
||||
); |
||||
$(".jitsipopover").position(positionOptions); |
||||
}; |
||||
|
||||
/** |
||||
* Updates the content of popover. |
||||
* @param content new content |
||||
*/ |
||||
JitsiPopover.prototype.updateContent = function (content) { |
||||
this.options.content = content; |
||||
if (!this.popoverShown) { |
||||
return; |
||||
} |
||||
this.createPopover(); |
||||
}; |
||||
|
||||
/** |
||||
* Unmounts any present child React Component and removes the popover itself |
||||
* from the DOM. |
||||
* |
||||
* @returns {void} |
||||
*/ |
||||
JitsiPopover.prototype.remove = function () { |
||||
const $popover = $('.jitsipopover'); |
||||
const $popoverContent = $popover.find('.jitsipopover__content'); |
||||
|
||||
if ($popoverContent.length) { |
||||
ReactDOM.unmountComponentAtNode($popoverContent.get(0)); |
||||
} |
||||
|
||||
$popover.off(); |
||||
$popover.remove(); |
||||
}; |
||||
|
||||
JitsiPopover.enabled = true; |
||||
|
||||
return JitsiPopover; |
||||
})(); |
||||
@ -0,0 +1,194 @@ |
||||
import AKInlineDialog from '@atlaskit/inline-dialog'; |
||||
import React, { Component } from 'react'; |
||||
|
||||
import { |
||||
MuteButton, |
||||
KickButton, |
||||
RemoteControlButton, |
||||
RemoteVideoMenu, |
||||
VolumeSlider |
||||
} from './'; |
||||
|
||||
declare var $: Object; |
||||
declare var interfaceConfig: Object; |
||||
|
||||
/** |
||||
* React {@code Component} for displaying an icon associated with opening the |
||||
* the {@code RemoteVideoMenu}. |
||||
* |
||||
* @extends {Component} |
||||
*/ |
||||
class RemoteVideoMenuTriggerButton extends Component { |
||||
static propTypes = { |
||||
/** |
||||
* A value between 0 and 1 indicating the volume of the participant's |
||||
* audio element. |
||||
*/ |
||||
initialVolumeValue: React.PropTypes.number, |
||||
|
||||
/** |
||||
* Whether or not the participant is currently muted. |
||||
*/ |
||||
isAudioMuted: React.PropTypes.bool, |
||||
|
||||
/** |
||||
* Whether or not the participant is a conference moderator. |
||||
*/ |
||||
isModerator: React.PropTypes.bool, |
||||
|
||||
/** |
||||
* Callback to invoke when the popover has been displayed. |
||||
*/ |
||||
onMenuDisplay: React.PropTypes.func, |
||||
|
||||
/** |
||||
* Callback to invoke choosing to start a remote control session with |
||||
* the participant. |
||||
*/ |
||||
onRemoteControlToggle: React.PropTypes.func, |
||||
|
||||
/** |
||||
* Callback to invoke when changing the level of the participant's |
||||
* audio element. |
||||
*/ |
||||
onVolumeChange: React.PropTypes.func, |
||||
|
||||
/** |
||||
* The ID for the participant on which the remote video menu will act. |
||||
*/ |
||||
participantID: React.PropTypes.string, |
||||
|
||||
/** |
||||
* The current state of the participant's remote control session. |
||||
*/ |
||||
remoteControlState: React.PropTypes.number |
||||
}; |
||||
|
||||
/** |
||||
* Initializes a new {#@code RemoteVideoMenuTriggerButton} instance. |
||||
* |
||||
* @param {Object} props - The read-only properties with which the new |
||||
* instance is to be initialized. |
||||
*/ |
||||
constructor(props) { |
||||
super(props); |
||||
|
||||
this.state = { |
||||
showRemoteMenu: false |
||||
}; |
||||
|
||||
/** |
||||
* The internal reference to topmost DOM/HTML element backing the React |
||||
* {@code Component}. Accessed directly for associating an element as |
||||
* the trigger for a popover. |
||||
* |
||||
* @private |
||||
* @type {HTMLDivElement} |
||||
*/ |
||||
this._rootElement = null; |
||||
|
||||
// Bind event handlers so they are only bound once for every instance.
|
||||
this._onRemoteMenuClose = this._onRemoteMenuClose.bind(this); |
||||
this._onRemoteMenuToggle = this._onRemoteMenuToggle.bind(this); |
||||
} |
||||
|
||||
/** |
||||
* Implements React's {@link Component#render()}. |
||||
* |
||||
* @inheritdoc |
||||
* @returns {ReactElement} |
||||
*/ |
||||
render() { |
||||
return ( |
||||
<AKInlineDialog |
||||
content = { this._renderRemoteVideoMenu() } |
||||
isOpen = { this.state.showRemoteMenu } |
||||
onClose = { this._onRemoteMenuClose } |
||||
position = { interfaceConfig.VERTICAL_FILMSTRIP |
||||
? 'left middle' : 'top center' } |
||||
shouldFlip = { true }> |
||||
<span |
||||
className = 'popover-trigger remote-video-menu-trigger' |
||||
onClick = { this._onRemoteMenuToggle }> |
||||
<i |
||||
className = 'icon-thumb-menu' |
||||
title = 'Remote user controls' /> |
||||
</span> |
||||
</AKInlineDialog> |
||||
); |
||||
} |
||||
|
||||
/** |
||||
* Closes the {@code RemoteVideoMenu}. |
||||
* |
||||
* @private |
||||
* @returns {void} |
||||
*/ |
||||
_onRemoteMenuClose() { |
||||
this.setState({ showRemoteMenu: false }); |
||||
} |
||||
|
||||
/** |
||||
* Opens or closes the {@code RemoteVideoMenu}. |
||||
* |
||||
* @private |
||||
* @returns {void} |
||||
*/ |
||||
_onRemoteMenuToggle() { |
||||
const willShowRemoteMenu = !this.state.showRemoteMenu; |
||||
|
||||
if (willShowRemoteMenu) { |
||||
this.props.onMenuDisplay(); |
||||
} |
||||
|
||||
this.setState({ showRemoteMenu: willShowRemoteMenu }); |
||||
} |
||||
|
||||
/** |
||||
* Creates a new {@code RemoteVideoMenu} with buttons for interacting with |
||||
* the remote participant. |
||||
* |
||||
* @private |
||||
* @returns {ReactElement} |
||||
*/ |
||||
_renderRemoteVideoMenu() { |
||||
const { |
||||
initialVolumeValue, |
||||
isAudioMuted, |
||||
isModerator, |
||||
onRemoteControlToggle, |
||||
onVolumeChange, |
||||
remoteControlState, |
||||
participantID |
||||
} = this.props; |
||||
|
||||
return ( |
||||
<RemoteVideoMenu id = { participantID }> |
||||
{ isModerator |
||||
? <MuteButton |
||||
isAudioMuted = { isAudioMuted } |
||||
onClick = { this._onRemoteMenuClose } |
||||
participantID = { participantID } /> |
||||
: null } |
||||
{ isModerator |
||||
? <KickButton |
||||
onClick = { this._onRemoteMenuClose } |
||||
participantID = { participantID } /> |
||||
: null } |
||||
{ remoteControlState |
||||
? <RemoteControlButton |
||||
onClick = { onRemoteControlToggle } |
||||
participantID = { participantID } |
||||
remoteControlState = { remoteControlState } /> |
||||
: null } |
||||
{ onVolumeChange |
||||
? <VolumeSlider |
||||
initialValue = { initialVolumeValue } |
||||
onChange = { onVolumeChange } /> |
||||
: null } |
||||
</RemoteVideoMenu> |
||||
); |
||||
} |
||||
} |
||||
|
||||
export default RemoteVideoMenuTriggerButton; |
||||
Loading…
Reference in new issue