ref(video): calculate tint styles at render

react/features/base/react/components/native/TintedView.js

@@ -40,23 +40,11 @@ type Props = {
     style: Object
 };
 
-/**
- * {@code TintedView}'s React {@code Component} state.
- */
-type State = {
-
-    /**
-     * The style of {@code TintedView} which is a combination of its default
-     * style, the consumer-specified style.
-     */
-    style: Object
-};
-
 /**
  * Implements a component aimed at covering another view and tinting it with
  * the given color and opacity.
  */
-export default class TintedView extends Component<Props, State> {
+export default class TintedView extends Component<Props> {
     /**
      * Default values for the component's props.
      */
@@ -66,62 +54,6 @@ export default class TintedView extends Component<Props, State> {
         style: {}
     };
 
-    /**
-     * Initializes a new {@code TintedView} instance.
-     *
-     * @param {Object} props - The read-only React {@code Component} props with
-     * which the new instance is to be initialized.
-     */
-    constructor(props: Object) {
-        super(props);
-
-        this.componentWillReceiveProps(props);
-    }
-
-    /**
-     * Notifies this mounted React {@code Component} that it will receive new
-     * props. Forks (in Facebook/React speak) the prop {@code style} because its
-     * value is to be combined with the default style.
-     *
-     * @inheritdoc
-     * @param {Object} nextProps - The read-only React {@code Component} props
-     * that this instance will receive.
-     * @returns {void}
-     */
-    componentWillReceiveProps(nextProps: Object) {
-        // style
-        const prevColor = this.props && this.props.color;
-        const prevOpacity = this.props && this.props.opacity;
-        const prevStyle = this.props && this.props.style;
-
-        const nextColor = nextProps && nextProps.color;
-        const nextOpacity = nextProps && nextProps.opacity;
-        const nextStyle = nextProps && nextProps.style;
-
-        const assignState = !this.state;
-
-        if (assignState
-                || prevColor !== nextColor
-                || prevOpacity !== nextOpacity
-                || prevStyle !== nextStyle) {
-            const nextState = {
-                style: {
-                    ...BASE_STYLE,
-                    ...nextStyle,
-                    backgroundColor: nextColor,
-                    opacity: nextOpacity
-                }
-            };
-
-            if (assignState) {
-                // eslint-disable-next-line react/no-direct-mutation-state
-                this.state = nextState;
-            } else {
-                this.setState(nextState);
-            }
-        }
-    }
-
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -129,6 +61,8 @@ export default class TintedView extends Component<Props, State> {
      * @returns {ReactElement}
      */
     render() {
+        const { children, color, opacity, style } = this.props;
+
         // XXX Don't tint the children, tint the background only.
         return (
             <View
@@ -136,11 +70,18 @@ export default class TintedView extends Component<Props, State> {
                 style = { BASE_STYLE }>
                 <View
                     pointerEvents = 'none'
-                    style = { this.state.style } />
+                    style = { [
+                        BASE_STYLE,
+                        style,
+                        {
+                            backgroundColor: color,
+                            opacity
+                        }
+                    ] } />
                 <View
                     pointerEvents = 'box-none'
                     style = { BASE_STYLE }>
-                    { this.props.children }
+                    { children }
                 </View>
             </View>
         );