diff --git a/bigbluebutton-html5/imports/ui/components/presentation/cursor/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/cursor/component.jsx index 8810560122bd53e5ccfc6c4d590cb917ca065c4c..f5697a1c516bf30d1a349d51191558b0d7cb3394 100644 --- a/bigbluebutton-html5/imports/ui/components/presentation/cursor/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/presentation/cursor/component.jsx @@ -130,22 +130,23 @@ export default class Cursor extends Component { // this function retrieves the text node, measures its BBox and sets the size for the outer box calculateCursorLabelBoxDimensions() { + const { setLabelBoxDimensions } = this.props; let labelBoxWidth = 0; let labelBoxHeight = 0; if (this.cursorLabelRef) { const { width, height } = this.cursorLabelRef.getBBox(); - const { widthRatio, physicalWidthRatio } = this.props; + const { widthRatio, physicalWidthRatio, cursorLabelBox } = this.props; labelBoxWidth = Cursor.invertScale(width, widthRatio, physicalWidthRatio); labelBoxHeight = Cursor.invertScale(height, widthRatio, physicalWidthRatio); // if the width of the text node is bigger than the maxSize - set the width to maxWidth - if (labelBoxWidth > this.props.cursorLabelBox.maxWidth) { - labelBoxWidth = this.props.cursorLabelBox.maxWidth; + if (labelBoxWidth > cursorLabelBox.maxWidth) { + labelBoxWidth = cursorLabelBox.maxWidth; } } // updating labelBoxWidth and labelBoxHeight in the container, which then passes it down here - this.props.setLabelBoxDimensions(labelBoxWidth, labelBoxHeight); + setLabelBoxDimensions(labelBoxWidth, labelBoxHeight); } render() { @@ -154,10 +155,11 @@ export default class Cursor extends Component { fill, } = this; + const { cursorId, userName, isRTL } = this.props; + const { cursorLabelBox, cursorLabelText, finalRadius } = this.scaledSizes; - const x = cursorCoordinate.x; - const y = cursorCoordinate.y; + const { x, y } = cursorCoordinate; const boxX = x + cursorLabelBox.xOffset; const boxY = y + cursorLabelBox.yOffset; @@ -198,11 +200,12 @@ export default class Cursor extends Component { fill={fill} fillOpacity="0.8" fontSize={cursorLabelText.fontSize} - clipPath={`url(#${this.props.cursorId})`} + clipPath={`url(#${cursorId})`} + textAnchor={isRTL ? 'end' : 'start'} > - {this.props.userName} + {userName} </text> - <clipPath id={this.props.cursorId}> + <clipPath id={cursorId}> <rect x={boxX} y={boxY} @@ -255,7 +258,7 @@ Cursor.propTypes = { * Defines the cursor radius (not scaled) * @defaultValue 5 */ - radius: PropTypes.number.isRequired, + radius: PropTypes.number, cursorLabelBox: PropTypes.shape({ labelBoxStrokeWidth: PropTypes.number.isRequired, @@ -279,6 +282,9 @@ Cursor.propTypes = { // set proper width and height of the border box -> pass it down -> // catch in the 'componentWillReceiveProps' -> apply new values setLabelBoxDimensions: PropTypes.func.isRequired, + + // Defines the direction the client text should be displayed + isRTL: PropTypes.bool.isRequired, }; Cursor.defaultProps = { diff --git a/bigbluebutton-html5/imports/ui/components/presentation/cursor/container.jsx b/bigbluebutton-html5/imports/ui/components/presentation/cursor/container.jsx index 79e872be50e161b5bdc1b8996973afb9c3a84705..4938b194f66975db5376fa0b28fbb4e1a32a973a 100644 --- a/bigbluebutton-html5/imports/ui/components/presentation/cursor/container.jsx +++ b/bigbluebutton-html5/imports/ui/components/presentation/cursor/container.jsx @@ -50,10 +50,12 @@ export default withTracker((params) => { if (cursor) { const { xPercent: cursorX, yPercent: cursorY, userName } = cursor; + const isRTL = document.documentElement.getAttribute('dir') === 'rtl'; return { cursorX, cursorY, userName, + isRTL, }; }