+ tooltipKey = 'videothumbnail.mute'
+ tooltipPosition = { this.props.tooltipPosition } />
);
}
}
diff --git a/react/features/filmstrip/components/web/BaseIndicator.js b/react/features/filmstrip/components/web/BaseIndicator.js
index c61610320..f97cb33c0 100644
--- a/react/features/filmstrip/components/web/BaseIndicator.js
+++ b/react/features/filmstrip/components/web/BaseIndicator.js
@@ -1,6 +1,7 @@
import React, { Component } from 'react';
+import Tooltip from '@atlaskit/tooltip';
-import { setTooltip } from '../../../../../modules/UI/util/Tooltip';
+import { translate } from '../../../base/i18n';
/**
* React {@code Component} for showing an icon with a tooltip.
@@ -8,16 +9,27 @@ import { setTooltip } from '../../../../../modules/UI/util/Tooltip';
* @extends Component
*/
class BaseIndicator extends Component {
+ /**
+ * Default values for {@code BaseIndicator} component's properties.
+ *
+ * @static
+ */
static defaultProps = {
className: '',
iconClassName: '',
iconSize: 'auto',
- id: ''
+ id: '',
+ tooltipPosition: 'top'
};
+ /**
+ * {@code BaseIndicator} component's property types.
+ *
+ * @static
+ */
static propTypes = {
/**
- * The CSS class names to set on the root element of the component.
+ * Additional CSS class names to set on the icon container.
*/
className: React.PropTypes.string,
@@ -36,44 +48,23 @@ class BaseIndicator extends Component {
*/
id: React.PropTypes.string,
+ /**
+ * Invoked to obtain translated strings.
+ */
+ t: React.PropTypes.func,
+
/**
* The translation key to use for displaying a tooltip when hovering
* over the component.
*/
- tooltipKey: React.PropTypes.string
- };
-
- /**
- * Initializes a new {@code BaseIndicator} instance.
- *
- * @param {Object} props - The read-only properties with which the new
- * instance is to be initialized.
- */
- constructor(props) {
- super(props);
+ tooltipKey: React.PropTypes.string,
/**
- * An internal reference to the HTML element at the top of the
- * component's DOM hierarchy. The reference is needed for attaching a
- * tooltip.
- *
- * @type {HTMLElement}
+ * From which side of the indicator the tooltip should appear from.
+ * Defaults to "top".
*/
- this._rootElement = null;
-
- // Bind event handler so it is only bound once for every instance.
- this._setRootElementRef = this._setRootElementRef.bind(this);
- }
-
- /**
- * Sets a tooltip which will display when hovering over the component.
- *
- * @inheritdoc
- * @returns {void}
- */
- componentDidMount() {
- this._setTooltip();
- }
+ tooltipPosition: React.PropTypes.string
+ };
/**
* Implements React's {@link Component#render()}.
@@ -82,46 +73,34 @@ class BaseIndicator extends Component {
* @returns {ReactElement}
*/
render() {
+ const {
+ className,
+ iconClassName,
+ iconSize,
+ id,
+ t,
+ tooltipKey,
+ tooltipPosition
+ } = this.props;
+
+ const iconContainerClassName = `indicator-icon-container ${className}`;
+
return (
-
-
-
- );
- }
-
- /**
- * Sets the internal reference to the root HTML element for the component.
- *
- * @param {HTMLIconElement} element - The root HTML element of the
- * component.
- * @private
- * @returns {void}
- */
- _setRootElementRef(element) {
- this._rootElement = element;
- }
-
- /**
- * Associate the component as a tooltip trigger so a tooltip may display on
- * hover.
- *
- * @private
- * @returns {void}
- */
- _setTooltip() {
- // TODO Replace UIUtil with an AtlasKit component when a suitable one
- // becomes available for tooltips.
- setTooltip(
- this._rootElement,
- this.props.tooltipKey,
- 'top'
+
+
+
+
+
+
+
);
}
}
-export default BaseIndicator;
+export default translate(BaseIndicator);
diff --git a/react/features/filmstrip/components/web/DominantSpeakerIndicator.js b/react/features/filmstrip/components/web/DominantSpeakerIndicator.js
index 758ec2645..23b4f9cf9 100644
--- a/react/features/filmstrip/components/web/DominantSpeakerIndicator.js
+++ b/react/features/filmstrip/components/web/DominantSpeakerIndicator.js
@@ -20,7 +20,12 @@ class DominantSpeakerIndicator extends Component {
*
* @type {number}
*/
- iconSize: React.PropTypes.number
+ iconSize: React.PropTypes.number,
+
+ /**
+ * From which side of the indicator the tooltip should appear from.
+ */
+ tooltipPosition: React.PropTypes.string
};
/**
@@ -35,7 +40,8 @@ class DominantSpeakerIndicator extends Component {
iconClassName = 'indicatoricon fa fa-bullhorn'
iconSize = { `${this.props.iconSize}px` }
id = 'dominantspeakerindicator'
- tooltipKey = 'speaker' />
+ tooltipKey = 'speaker'
+ tooltipPosition = { this.props.tooltipPosition } />
);
}
}
diff --git a/react/features/filmstrip/components/web/ModeratorIndicator.js b/react/features/filmstrip/components/web/ModeratorIndicator.js
index aa4521ef5..7e7a71a5b 100644
--- a/react/features/filmstrip/components/web/ModeratorIndicator.js
+++ b/react/features/filmstrip/components/web/ModeratorIndicator.js
@@ -8,6 +8,18 @@ import BaseIndicator from './BaseIndicator';
* @extends Component
*/
class ModeratorIndicator extends Component {
+ /**
+ * {@code ModeratorIndicator} component's property types.
+ *
+ * @static
+ */
+ static propTypes = {
+ /**
+ * From which side of the indicator the tooltip should appear from.
+ */
+ tooltipPosition: React.PropTypes.string
+ };
+
/**
* Implements React's {@link Component#render()}.
*
@@ -16,10 +28,13 @@ class ModeratorIndicator extends Component {
*/
render() {
return (
-
+
+
+
);
}
}
diff --git a/react/features/filmstrip/components/web/RaisedHandIndicator.js b/react/features/filmstrip/components/web/RaisedHandIndicator.js
index 5ef4ac7f7..33af282b2 100644
--- a/react/features/filmstrip/components/web/RaisedHandIndicator.js
+++ b/react/features/filmstrip/components/web/RaisedHandIndicator.js
@@ -19,7 +19,12 @@ class RaisedHandIndicator extends Component {
*
* @type {number}
*/
- iconSize: React.PropTypes.number
+ iconSize: React.PropTypes.number,
+
+ /**
+ * From which side of the indicator the tooltip should appear from.
+ */
+ tooltipPosition: React.PropTypes.string
};
/**
@@ -33,7 +38,8 @@ class RaisedHandIndicator extends Component {
className = 'raisehandindicator indicator show-inline'
iconClassName = 'icon-raised-hand indicatoricon'
iconSize = { `${this.props.iconSize}px` }
- tooltipKey = 'raisedHand' />
+ tooltipKey = 'raisedHand'
+ tooltipPosition = { this.props.tooltipPosition } />
);
}
}
diff --git a/react/features/filmstrip/components/web/VideoMutedIndicator.js b/react/features/filmstrip/components/web/VideoMutedIndicator.js
index f10bc7604..ea4a668bd 100644
--- a/react/features/filmstrip/components/web/VideoMutedIndicator.js
+++ b/react/features/filmstrip/components/web/VideoMutedIndicator.js
@@ -7,6 +7,18 @@ import BaseIndicator from './BaseIndicator';
* @extends Component
*/
class VideoMutedIndicator extends Component {
+ /**
+ * {@code VideoMutedIndicator} component's property types.
+ *
+ * @static
+ */
+ static propTypes = {
+ /**
+ * From which side of the indicator the tooltip should appear from.
+ */
+ tooltipPosition: React.PropTypes.string
+ };
+
/**
* Implements React's {@link Component#render()}.
*
@@ -17,7 +29,8 @@ class VideoMutedIndicator extends Component {
+ tooltipKey = 'videothumbnail.videomute'
+ tooltipPosition = { this.props.tooltipPosition } />
);
}
}