Merge pull request #10218 from Tainan404/unsafe-media-and-presentation-components

Remove unsafe lifecycle from all media and presentation components

bigbluebutton-html5/imports/ui/components/media/container.jsx

@@ -49,19 +49,22 @@ const intlMessages = defineMessages({
 });
 
 class MediaContainer extends Component {
-  componentWillMount() {
+  componentDidMount() {
     document.addEventListener('installChromeExtension', this.installChromeExtension.bind(this));
     document.addEventListener('screenshareNotSupported', this.screenshareNotSupported.bind(this));
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(prevProps) {
     const {
       isScreensharing,
       intl,
     } = this.props;
+    const {
+      isScreensharing: wasScreenSharing,
+    } = prevProps;
 
-    if (isScreensharing !== nextProps.isScreensharing) {
-      if (nextProps.isScreensharing) {
+    if (isScreensharing !== wasScreenSharing) {
+      if (wasScreenSharing) {
         notify(intl.formatMessage(intlMessages.screenshareStarted), 'info', 'desktop');
       } else {
         notify(intl.formatMessage(intlMessages.screenshareEnded), 'info', 'desktop');

bigbluebutton-html5/imports/ui/components/presentation/cursor/component.jsx

@@ -38,7 +38,7 @@ export default class Cursor extends Component {
     return obj;
   }
 
-  static getScaledSizes(props) {
+  static getScaledSizes(props, state) {
     // TODO: This might need to change for the use case of fit-to-width portrait
     //       slides in non-presenter view. Some elements are still shrinking.
     const scaleFactor = props.widthRatio / props.physicalWidthRatio;
@@ -58,14 +58,25 @@ export default class Cursor extends Component {
         yOffset: props.cursorLabelBox.yOffset * scaleFactor,
         // making width and height a little bit larger than the size of the text
         // received from BBox, so that the text didn't touch the border
-        width: (props.labelBoxWidth + 3) * scaleFactor,
-        height: (props.labelBoxHeight + 3) * scaleFactor,
+        width: (state.labelBoxWidth + 3) * scaleFactor,
+        height: (state.labelBoxHeight + 3) * scaleFactor,
         strokeWidth: props.cursorLabelBox.labelBoxStrokeWidth * scaleFactor,
       },
     };
   }
 
-  componentWillMount() {
+  constructor(props) {
+    super(props);
+    this.state = {
+      scaledSizes: null,
+      labelBoxWidth: 0,
+      labelBoxHeight: 0,
+    };
+
+    this.setLabelBoxDimensions = this.setLabelBoxDimensions.bind(this);
+  }
+
+  componentDidMount() {
     const {
       cursorX,
       cursorY,
@@ -75,8 +86,9 @@ export default class Cursor extends Component {
       isMultiUser,
     } = this.props;
 
-    // setting the initial cursor info
-    this.scaledSizes = Cursor.getScaledSizes(this.props);
+    this.setState({
+      scaledSizes: Cursor.getScaledSizes(this.props, this.state),
+    });
     this.cursorCoordinate = Cursor.getCursorCoordinates(
       cursorX,
       cursorY,
@@ -87,66 +99,83 @@ export default class Cursor extends Component {
     const { fill, displayLabel } = Cursor.getFillAndLabel(presenter, isMultiUser);
     this.fill = fill;
     this.displayLabel = displayLabel;
-  }
-
-  componentDidMount() {
     // we need to find the BBox of the text, so that we could set a proper border box arount it
-    this.calculateCursorLabelBoxDimensions();
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      scaledSizes,
+    } = this.state;
+    if (!prevState.scaledSizes && scaledSizes) {      
+      this.calculateCursorLabelBoxDimensions();
+    }
+
     const {
       presenter,
       isMultiUser,
       widthRatio,
       physicalWidthRatio,
-      labelBoxWidth,
-      labelBoxHeight,
       cursorX,
       cursorY,
+      slideWidth,
+      slideHeight,
     } = this.props;
+    const {
+      labelBoxWidth,
+      labelBoxHeight,
+    } = this.state;
 
-    if (presenter !== nextProps.presenter || isMultiUser !== nextProps.isMultiUser) {
+    const {
+      labelBoxWidth: prevLabelBoxWidth,
+      labelBoxHeight: prevLabelBoxHeight,
+    } = prevState;
+
+    if (presenter !== prevProps.presenter || isMultiUser !== prevProps.isMultiUser) {
       const { fill, displayLabel } = Cursor.getFillAndLabel(
-        nextProps.presenter,
-        nextProps.isMultiUser,
+        presenter,
+        isMultiUser,
       );
       this.displayLabel = displayLabel;
       this.fill = fill;
     }
 
-    if ((widthRatio !== nextProps.widthRatio
-          || physicalWidthRatio !== nextProps.physicalWidthRatio)
-      || (labelBoxWidth !== nextProps.labelBoxWidth
-          || labelBoxHeight !== nextProps.labelBoxHeight)) {
-      this.scaledSizes = Cursor.getScaledSizes(nextProps);
+    if ((widthRatio !== prevProps.widthRatio
+          || physicalWidthRatio !== prevProps.physicalWidthRatio)
+      || (labelBoxWidth !== prevLabelBoxWidth
+          || labelBoxHeight !== prevLabelBoxHeight)) {
+            this.setState({
+              scaledSizes: Cursor.getScaledSizes(this.props, this.state),
+            });
     }
 
-    if (cursorX !== nextProps.cursorX || cursorY !== nextProps.cursorY) {
+    if (cursorX !== prevProps.cursorX || cursorY !== prevProps.cursorY) {
       const cursorCoordinate = Cursor.getCursorCoordinates(
-        nextProps.cursorX,
-        nextProps.cursorY,
-        nextProps.slideWidth,
-        nextProps.slideHeight,
+        cursorX,
+        cursorY,
+        slideWidth,
+        slideHeight,
       );
       this.cursorCoordinate = cursorCoordinate;
     }
   }
 
+  setLabelBoxDimensions(labelBoxWidth, labelBoxHeight) {    
+    this.setState({
+      labelBoxWidth,
+      labelBoxHeight,
+    });
+  }
+
   // 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, 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 > cursorLabelBox.maxWidth) {
         labelBoxWidth = cursorLabelBox.maxWidth;
@@ -154,26 +183,30 @@ export default class Cursor extends Component {
     }
 
     // updating labelBoxWidth and labelBoxHeight in the container, which then passes it down here
-    setLabelBoxDimensions(labelBoxWidth, labelBoxHeight);
+    this.setLabelBoxDimensions(labelBoxWidth, labelBoxHeight);
   }
 
   render() {
+    const {
+      scaledSizes,
+    } = this.state;
     const {
       cursorId,
       userName,
       isRTL,
     } = this.props;
-
+    
     const {
       cursorCoordinate,
       fill,
     } = this;
-
+    
+    if (!scaledSizes) return null;
     const {
       cursorLabelBox,
       cursorLabelText,
       finalRadius,
-    } = this.scaledSizes;
+    } = scaledSizes;
 
     const {
       x,
@@ -191,7 +224,7 @@ export default class Cursor extends Component {
         <circle
           cx={x}
           cy={y}
-          r={finalRadius === Infinity ? 0 : finalRadius}
+          r={finalRadius}
           fill={fill}
           fillOpacity="0.6"
         />
@@ -292,17 +325,6 @@ Cursor.propTypes = {
     fontSize: PropTypes.number.isRequired,
   }),
 
-  // Defines the width of the label box
-  labelBoxWidth: PropTypes.number.isRequired,
-  // Defines the height of the label box
-  labelBoxHeight: PropTypes.number.isRequired,
-
-  // Defines the function, which sets the state for the label box and passes it back down
-  // we need it, since we need to render the text first -> measure its dimensions ->
-  // 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,
 };

bigbluebutton-html5/imports/ui/components/presentation/cursor/container.jsx

@@ -6,33 +6,15 @@ import Cursor from './component';
 
 
 class CursorContainer extends Component {
-  constructor() {
-    super();
-    this.state = {
-      labelBoxWidth: 0,
-      labelBoxHeight: 0,
-    };
-    this.setLabelBoxDimensions = this.setLabelBoxDimensions.bind(this);
-  }
-
-  setLabelBoxDimensions(labelBoxWidth, labelBoxHeight) {
-    this.setState({
-      labelBoxWidth,
-      labelBoxHeight,
-    });
-  }
 
   render() {
     const { cursorX, cursorY } = this.props;
-    const { labelBoxWidth, labelBoxHeight } = this.state;
 
     if (cursorX > 0 && cursorY > 0) {
       return (
         <Cursor
           cursorX={cursorX}
           cursorY={cursorY}
-          labelBoxWidth={labelBoxWidth}
-          labelBoxHeight={labelBoxHeight}
           setLabelBoxDimensions={this.setLabelBoxDimensions}
           {...this.props}
         />

bigbluebutton-html5/imports/ui/components/screenshare/component.jsx

@@ -48,11 +48,11 @@ class ScreenshareComponent extends React.Component {
     window.addEventListener('screensharePlayFailed', this.handlePlayElementFailed);
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(prevProps) {
     const {
       isPresenter, unshareScreen,
     } = this.props;
-    if (isPresenter && !nextProps.isPresenter) {
+    if (isPresenter && !prevProps.isPresenter) {
       unshareScreen();
     }
   }