mirror of https://github.com/jitsi/jitsi-meet
- Create a new ConnectionIndicator component for displaying an icon for connection quality and for triggering a popover. The popover handling has been left in ConnectionIndicator for now, which follows the existing implementation. - Remove the unused method "connectionIndicatorShowMore" - Change the implementation of existing methods that update the connection indicator to call the same method which will rerender the indicator completely.pull/1710/head jitsi-meet_2193
Leonard Kim
8 years ago
committed by
hristoterezov
parent
35f79dd2b4
commit
4ce5888b4c
@ -1,273 +0,0 @@ |
|||||||
/* global $, interfaceConfig, JitsiMeetJS */ |
|
||||||
/* jshint -W101 */ |
|
||||||
|
|
||||||
/* eslint-disable no-unused-vars */ |
|
||||||
import React from 'react'; |
|
||||||
import ReactDOM from 'react-dom'; |
|
||||||
|
|
||||||
import { ConnectionStatsTable } from '../../../react/features/connection-stats'; |
|
||||||
/* eslint-enable no-unused-vars */ |
|
||||||
|
|
||||||
import JitsiPopover from "../util/JitsiPopover"; |
|
||||||
import UIUtil from "../util/UIUtil"; |
|
||||||
|
|
||||||
const ParticipantConnectionStatus |
|
||||||
= JitsiMeetJS.constants.participantConnectionStatus; |
|
||||||
|
|
||||||
/** |
|
||||||
* Maps a connection quality value (in percent) to the width of the "full" icon. |
|
||||||
*/ |
|
||||||
const qualityToWidth = [ |
|
||||||
// Full (5 bars)
|
|
||||||
{percent: 80, width: "100%"}, |
|
||||||
// 4 bars
|
|
||||||
{percent: 60, width: "80%"}, |
|
||||||
// 3 bars
|
|
||||||
{percent: 40, width: "55%"}, |
|
||||||
// 2 bars
|
|
||||||
{percent: 20, width: "40%"}, |
|
||||||
// 1 bar
|
|
||||||
{percent: 0, width: "20%"} |
|
||||||
// Note: we never show 0 bars.
|
|
||||||
]; |
|
||||||
|
|
||||||
/** |
|
||||||
* Constructs new connection indicator. |
|
||||||
* @param videoContainer the video container associated with the indicator. |
|
||||||
* @param videoId the identifier of the video |
|
||||||
* @constructor |
|
||||||
*/ |
|
||||||
function ConnectionIndicator(videoContainer, videoId) { |
|
||||||
this.videoContainer = videoContainer; |
|
||||||
this.bandwidth = null; |
|
||||||
this.packetLoss = null; |
|
||||||
this.bitrate = null; |
|
||||||
this.showMoreValue = false; |
|
||||||
this.resolution = null; |
|
||||||
this.transport = []; |
|
||||||
this.framerate = null; |
|
||||||
this.popover = null; |
|
||||||
this.id = videoId; |
|
||||||
this.create(); |
|
||||||
|
|
||||||
this.isLocalVideo |
|
||||||
= this.videoContainer.videoSpanId === 'localVideoContainer'; |
|
||||||
this.showMore = this.showMore.bind(this); |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Generates the html content. |
|
||||||
* @returns {string} the html content. |
|
||||||
*/ |
|
||||||
ConnectionIndicator.prototype.generateText = function () { |
|
||||||
/* jshint ignore:start */ |
|
||||||
return ( |
|
||||||
<ConnectionStatsTable |
|
||||||
bandwidth = { this.bandwidth } |
|
||||||
bitrate = { this.bitrate } |
|
||||||
isLocalVideo = { this.isLocalVideo } |
|
||||||
framerate = { this.framerate } |
|
||||||
onShowMore = { this.showMore } |
|
||||||
packetLoss = { this.packetLoss} |
|
||||||
resolution = { this.resolution } |
|
||||||
shouldShowMore = { this.showMoreValue } |
|
||||||
transport = { this.transport } /> |
|
||||||
); |
|
||||||
/* jshint ignore:end */ |
|
||||||
}; |
|
||||||
|
|
||||||
/** |
|
||||||
* Shows or hide the additional information. |
|
||||||
*/ |
|
||||||
ConnectionIndicator.prototype.showMore = function () { |
|
||||||
this.showMoreValue = !this.showMoreValue; |
|
||||||
this.updatePopoverData(); |
|
||||||
}; |
|
||||||
|
|
||||||
|
|
||||||
function createIcon(classes, iconClass) { |
|
||||||
var icon = document.createElement("span"); |
|
||||||
for(var i in classes) { |
|
||||||
icon.classList.add(classes[i]); |
|
||||||
} |
|
||||||
icon.appendChild( |
|
||||||
document.createElement("i")).classList.add(iconClass); |
|
||||||
return icon; |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Creates the indicator |
|
||||||
*/ |
|
||||||
ConnectionIndicator.prototype.create = function () { |
|
||||||
let indicatorId = 'connectionindicator'; |
|
||||||
let element = UIUtil.getVideoThumbnailIndicatorSpan({ |
|
||||||
videoSpanId: this.videoContainer.videoSpanId, |
|
||||||
indicatorId |
|
||||||
}); |
|
||||||
element.classList.add('show'); |
|
||||||
this.connectionIndicatorContainer = element; |
|
||||||
|
|
||||||
let popoverContent = ( |
|
||||||
`<div class="connection-info" data-i18n="${indicatorId}.na"></div>` |
|
||||||
); |
|
||||||
this.popover = new JitsiPopover($(element), { |
|
||||||
content: popoverContent, |
|
||||||
skin: "black", |
|
||||||
position: interfaceConfig.VERTICAL_FILMSTRIP ? 'left' : 'top' |
|
||||||
}); |
|
||||||
|
|
||||||
// override popover show method to make sure we will update the content
|
|
||||||
// before showing the popover
|
|
||||||
var origShowFunc = this.popover.show; |
|
||||||
this.popover.show = function () { |
|
||||||
// update content by forcing it, to finish even if popover
|
|
||||||
// is not visible
|
|
||||||
this.updatePopoverData(true); |
|
||||||
// call the original show, passing its actual this
|
|
||||||
origShowFunc.call(this.popover); |
|
||||||
}.bind(this); |
|
||||||
|
|
||||||
let connectionIconContainer = document.createElement('div'); |
|
||||||
connectionIconContainer.className = 'connection indicatoricon'; |
|
||||||
|
|
||||||
|
|
||||||
this.emptyIcon = connectionIconContainer.appendChild( |
|
||||||
createIcon(["connection_empty"], "icon-connection")); |
|
||||||
this.fullIcon = connectionIconContainer.appendChild( |
|
||||||
createIcon(["connection_full"], "icon-connection")); |
|
||||||
this.interruptedIndicator = connectionIconContainer.appendChild( |
|
||||||
createIcon(["connection_lost"],"icon-connection-lost")); |
|
||||||
this.ninjaIndicator = connectionIconContainer.appendChild( |
|
||||||
createIcon(["connection_ninja"],"icon-ninja")); |
|
||||||
|
|
||||||
$(this.interruptedIndicator).hide(); |
|
||||||
$(this.ninjaIndicator).hide(); |
|
||||||
this.connectionIndicatorContainer.appendChild(connectionIconContainer); |
|
||||||
}; |
|
||||||
|
|
||||||
/** |
|
||||||
* Removes the indicator |
|
||||||
*/ |
|
||||||
ConnectionIndicator.prototype.remove = function() { |
|
||||||
if (this.connectionIndicatorContainer.parentNode) { |
|
||||||
this.connectionIndicatorContainer.parentNode.removeChild( |
|
||||||
this.connectionIndicatorContainer); |
|
||||||
} |
|
||||||
this.popover.forceHide(); |
|
||||||
}; |
|
||||||
|
|
||||||
/** |
|
||||||
* Updates the UI which displays or not a warning about user's connectivity |
|
||||||
* problems. |
|
||||||
* |
|
||||||
* @param {ParticipantConnectionStatus} connectionStatus |
|
||||||
*/ |
|
||||||
ConnectionIndicator.prototype.updateConnectionStatusIndicator |
|
||||||
= function (connectionStatus) { |
|
||||||
this.connectionStatus = connectionStatus; |
|
||||||
if (connectionStatus === ParticipantConnectionStatus.INTERRUPTED) { |
|
||||||
$(this.interruptedIndicator).show(); |
|
||||||
$(this.emptyIcon).hide(); |
|
||||||
$(this.fullIcon).hide(); |
|
||||||
$(this.ninjaIndicator).hide(); |
|
||||||
} else if (connectionStatus === ParticipantConnectionStatus.INACTIVE) { |
|
||||||
$(this.interruptedIndicator).hide(); |
|
||||||
$(this.emptyIcon).hide(); |
|
||||||
$(this.fullIcon).hide(); |
|
||||||
$(this.ninjaIndicator).show(); |
|
||||||
} else { |
|
||||||
$(this.interruptedIndicator).hide(); |
|
||||||
$(this.emptyIcon).show(); |
|
||||||
$(this.fullIcon).show(); |
|
||||||
$(this.ninjaIndicator).hide(); |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
/** |
|
||||||
* Updates the data of the indicator |
|
||||||
* @param percent the percent of connection quality |
|
||||||
* @param object the statistics data. |
|
||||||
*/ |
|
||||||
ConnectionIndicator.prototype.updateConnectionQuality = |
|
||||||
function (percent, object) { |
|
||||||
if (!percent) { |
|
||||||
this.connectionIndicatorContainer.style.display = "none"; |
|
||||||
this.popover.forceHide(); |
|
||||||
return; |
|
||||||
} else { |
|
||||||
if(this.connectionIndicatorContainer.style.display == "none") { |
|
||||||
this.connectionIndicatorContainer.style.display = "block"; |
|
||||||
} |
|
||||||
} |
|
||||||
if (object) { |
|
||||||
this.bandwidth = object.bandwidth; |
|
||||||
this.bitrate = object.bitrate; |
|
||||||
this.packetLoss = object.packetLoss; |
|
||||||
this.transport = object.transport; |
|
||||||
if (object.resolution) { |
|
||||||
this.resolution = object.resolution; |
|
||||||
} |
|
||||||
if (object.framerate) |
|
||||||
this.framerate = object.framerate; |
|
||||||
} |
|
||||||
|
|
||||||
let width = qualityToWidth.find(x => percent >= x.percent); |
|
||||||
this.fullIcon.style.width = width.width; |
|
||||||
|
|
||||||
this.updatePopoverData(); |
|
||||||
}; |
|
||||||
|
|
||||||
/** |
|
||||||
* Updates the resolution |
|
||||||
* @param resolution the new resolution |
|
||||||
*/ |
|
||||||
ConnectionIndicator.prototype.updateResolution = function (resolution) { |
|
||||||
this.resolution = resolution; |
|
||||||
this.updatePopoverData(); |
|
||||||
}; |
|
||||||
|
|
||||||
/** |
|
||||||
* Updates the framerate |
|
||||||
* @param framerate the new resolution |
|
||||||
*/ |
|
||||||
ConnectionIndicator.prototype.updateFramerate = function (framerate) { |
|
||||||
this.framerate = framerate; |
|
||||||
this.updatePopoverData(); |
|
||||||
}; |
|
||||||
|
|
||||||
/** |
|
||||||
* Updates the content of the popover if its visible |
|
||||||
* @param force to work even if popover is not visible |
|
||||||
*/ |
|
||||||
ConnectionIndicator.prototype.updatePopoverData = function (force) { |
|
||||||
// generate content, translate it and add it to document only if
|
|
||||||
// popover is visible or we force to do so.
|
|
||||||
if(this.popover.popoverShown || force) { |
|
||||||
this.popover.updateContent(this.generateText()); |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
/** |
|
||||||
* Hides the popover |
|
||||||
*/ |
|
||||||
ConnectionIndicator.prototype.hide = function () { |
|
||||||
this.popover.forceHide(); |
|
||||||
}; |
|
||||||
|
|
||||||
/** |
|
||||||
* Hides the indicator |
|
||||||
*/ |
|
||||||
ConnectionIndicator.prototype.hideIndicator = function () { |
|
||||||
this.connectionIndicatorContainer.style.display = "none"; |
|
||||||
if(this.popover) |
|
||||||
this.popover.forceHide(); |
|
||||||
}; |
|
||||||
|
|
||||||
/** |
|
||||||
* Adds a hover listener to the popover. |
|
||||||
*/ |
|
||||||
ConnectionIndicator.prototype.addPopoverHoverListener = function (listener) { |
|
||||||
this.popover.addOnHoverPopover(listener); |
|
||||||
}; |
|
||||||
|
|
||||||
export default ConnectionIndicator; |
|
||||||
@ -0,0 +1,284 @@ |
|||||||
|
import React, { Component } from 'react'; |
||||||
|
|
||||||
|
import JitsiPopover from '../../../../modules/UI/util/JitsiPopover'; |
||||||
|
|
||||||
|
import { JitsiParticipantConnectionStatus } from '../../base/lib-jitsi-meet'; |
||||||
|
import { ConnectionStatsTable } from '../../connection-stats'; |
||||||
|
|
||||||
|
declare var $: Object; |
||||||
|
declare var interfaceConfig: Object; |
||||||
|
|
||||||
|
// Converts the percent for connection quality into a string recognized for CSS.
|
||||||
|
const QUALITY_TO_WIDTH = [ |
||||||
|
|
||||||
|
// Full (5 bars)
|
||||||
|
{ |
||||||
|
percent: 80, |
||||||
|
width: '100%' |
||||||
|
}, |
||||||
|
|
||||||
|
// 4 bars
|
||||||
|
{ |
||||||
|
percent: 60, |
||||||
|
width: '80%' |
||||||
|
}, |
||||||
|
|
||||||
|
// 3 bars
|
||||||
|
{ |
||||||
|
percent: 40, |
||||||
|
width: '55%' |
||||||
|
}, |
||||||
|
|
||||||
|
// 2 bars
|
||||||
|
{ |
||||||
|
percent: 20, |
||||||
|
width: '40%' |
||||||
|
}, |
||||||
|
|
||||||
|
// 1 bar
|
||||||
|
{ |
||||||
|
percent: 0, |
||||||
|
width: '20%' |
||||||
|
} |
||||||
|
|
||||||
|
// Note: we never show 0 bars.
|
||||||
|
]; |
||||||
|
|
||||||
|
/** |
||||||
|
* Implements a React {@link Component} which displays the current connection |
||||||
|
* quality percentage and has a popover to show more detailed connection stats. |
||||||
|
* |
||||||
|
* @extends {Component} |
||||||
|
*/ |
||||||
|
class ConnectionIndicator extends Component { |
||||||
|
/** |
||||||
|
* {@code ConnectionIndicator} component's property types. |
||||||
|
* |
||||||
|
* @static |
||||||
|
*/ |
||||||
|
static propTypes = { |
||||||
|
/** |
||||||
|
* Whether or not the displays stats are for local video. |
||||||
|
*/ |
||||||
|
isLocalVideo: React.PropTypes.bool, |
||||||
|
|
||||||
|
/** |
||||||
|
* The callback to invoke when the hover state over the popover changes. |
||||||
|
*/ |
||||||
|
onHover: React.PropTypes.func, |
||||||
|
|
||||||
|
/** |
||||||
|
* Whether or not the popover should display a link that can toggle |
||||||
|
* a more detailed view of the stats. |
||||||
|
*/ |
||||||
|
showMoreLink: React.PropTypes.bool, |
||||||
|
|
||||||
|
/** |
||||||
|
* An object that contains statistics related to connection quality. |
||||||
|
* |
||||||
|
* { |
||||||
|
* bandwidth: Object, |
||||||
|
* bitrate: Object, |
||||||
|
* connectionStatus: String, |
||||||
|
* framerate: Object, |
||||||
|
* packetLoss: Object, |
||||||
|
* percent: Number, |
||||||
|
* resolution: Object, |
||||||
|
* transport: Array |
||||||
|
* } |
||||||
|
*/ |
||||||
|
stats: React.PropTypes.object, |
||||||
|
|
||||||
|
/** |
||||||
|
* Invoked to obtain translated strings. |
||||||
|
*/ |
||||||
|
t: React.PropTypes.func |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* Initializes a new {@code ConnectionIndicator} instance. |
||||||
|
* |
||||||
|
* @param {Object} props - The read-only properties with which the new |
||||||
|
* instance is to be initialized. |
||||||
|
*/ |
||||||
|
constructor(props) { |
||||||
|
super(props); |
||||||
|
|
||||||
|
/** |
||||||
|
* 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; |
||||||
|
|
||||||
|
this.state = { |
||||||
|
/** |
||||||
|
* Whether or not the popover content should display additional |
||||||
|
* statistics. |
||||||
|
* |
||||||
|
* @type {boolean} |
||||||
|
*/ |
||||||
|
showMoreStats: false |
||||||
|
}; |
||||||
|
|
||||||
|
// Bind event handlers so they are only bound once for every instance.
|
||||||
|
this._onToggleShowMore = this._onToggleShowMore.bind(this); |
||||||
|
this._setRootElement = this._setRootElement.bind(this); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Creates a popover instance to display when the component is hovered. |
||||||
|
* |
||||||
|
* @inheritdoc |
||||||
|
* returns {void} |
||||||
|
*/ |
||||||
|
componentDidMount() { |
||||||
|
this.popover = new JitsiPopover($(this._rootElement), { |
||||||
|
content: this._renderStatisticsTable(), |
||||||
|
skin: 'black', |
||||||
|
position: interfaceConfig.VERTICAL_FILMSTRIP ? 'left' : 'top' |
||||||
|
}); |
||||||
|
|
||||||
|
this.popover.addOnHoverPopover(this.props.onHover); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Updates the contents of the popover. This is done manually because the |
||||||
|
* popover is not a React Component yet and so is not automatiucally aware |
||||||
|
* of changed data. |
||||||
|
* |
||||||
|
* @inheritdoc |
||||||
|
* returns {void} |
||||||
|
*/ |
||||||
|
componentDidUpdate() { |
||||||
|
this.popover.updateContent(this._renderStatisticsTable()); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Cleans up any popover instance that is linked to the component. |
||||||
|
* |
||||||
|
* @inheritdoc |
||||||
|
* returns {void} |
||||||
|
*/ |
||||||
|
componentWillUnmount() { |
||||||
|
this.popover.forceHide(); |
||||||
|
this.popover.remove(); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Implements React's {@link Component#render()}. |
||||||
|
* |
||||||
|
* @inheritdoc |
||||||
|
* @returns {ReactElement} |
||||||
|
*/ |
||||||
|
render() { |
||||||
|
return ( |
||||||
|
<div |
||||||
|
className = 'connection-indicator indicator' |
||||||
|
ref = { this._setRootElement }> |
||||||
|
<div className = 'connection indicatoricon'> |
||||||
|
{ this._renderIcon() } |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Callback to invoke when the show more link in the popover content is |
||||||
|
* clicked. Sets the state which will determine if the popover should show |
||||||
|
* additional statistics about the connection. |
||||||
|
* |
||||||
|
* @returns {void} |
||||||
|
*/ |
||||||
|
_onToggleShowMore() { |
||||||
|
this.setState({ showMoreStats: !this.state.showMoreStats }); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Creates a ReactElement for displaying an icon that represents the current |
||||||
|
* connection quality. |
||||||
|
* |
||||||
|
* @returns {ReactElement} |
||||||
|
*/ |
||||||
|
_renderIcon() { |
||||||
|
switch (this.props.stats.connectionStatus) { |
||||||
|
case JitsiParticipantConnectionStatus.INTERRUPTED: |
||||||
|
return ( |
||||||
|
<span className = 'connection_lost'> |
||||||
|
<i className = 'icon-connection-lost' /> |
||||||
|
</span> |
||||||
|
); |
||||||
|
case JitsiParticipantConnectionStatus.INACTIVE: |
||||||
|
return ( |
||||||
|
<span className = 'connection_ninja'> |
||||||
|
<i className = 'icon-ninja' /> |
||||||
|
</span> |
||||||
|
); |
||||||
|
default: { |
||||||
|
const { percent } = this.props.stats; |
||||||
|
const width = QUALITY_TO_WIDTH.find(x => percent >= x.percent); |
||||||
|
const iconWidth = width && width.width |
||||||
|
? { width: width && width.width } : {}; |
||||||
|
|
||||||
|
return [ |
||||||
|
<span |
||||||
|
className = 'connection_empty' |
||||||
|
key = 'icon-empty'> |
||||||
|
<i className = 'icon-connection' /> |
||||||
|
</span>, |
||||||
|
<span |
||||||
|
className = 'connection_full' |
||||||
|
key = 'icon-full' |
||||||
|
style = { iconWidth }> |
||||||
|
<i className = 'icon-connection' /> |
||||||
|
</span> |
||||||
|
]; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Creates a {@code ConnectionStatisticsTable} instance. |
||||||
|
* |
||||||
|
* @returns {ReactElement} |
||||||
|
*/ |
||||||
|
_renderStatisticsTable() { |
||||||
|
const { |
||||||
|
bandwidth, |
||||||
|
bitrate, |
||||||
|
framerate, |
||||||
|
packetLoss, |
||||||
|
resolution, |
||||||
|
transport |
||||||
|
} = this.props.stats; |
||||||
|
|
||||||
|
return ( |
||||||
|
<ConnectionStatsTable |
||||||
|
bandwidth = { bandwidth } |
||||||
|
bitrate = { bitrate } |
||||||
|
framerate = { framerate } |
||||||
|
isLocalVideo = { this.props.isLocalVideo } |
||||||
|
onShowMore = { this._onToggleShowMore } |
||||||
|
packetLoss = { packetLoss } |
||||||
|
resolution = { resolution } |
||||||
|
shouldShowMore = { this.state.showMoreStats } |
||||||
|
transport = { transport } /> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Sets an internal reference to the component's root element. |
||||||
|
* |
||||||
|
* @param {Object} element - The highest DOM element in the component. |
||||||
|
* @private |
||||||
|
* @returns {void} |
||||||
|
*/ |
||||||
|
_setRootElement(element) { |
||||||
|
this._rootElement = element; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default ConnectionIndicator; |
||||||
@ -0,0 +1 @@ |
|||||||
|
export { default as ConnectionIndicator } from './ConnectionIndicator'; |
||||||
@ -0,0 +1 @@ |
|||||||
|
export * from './components'; |
||||||
Loading…
Reference in new issue