Migrate string refs over to createRef

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/voip/CallView.js

@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import React from 'react';
+import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import dis from '../../../dispatcher';
@@ -56,6 +56,10 @@ module.exports = createReactClass({
         };
     },
 
+    UNSAFE_componentWillMount: function() {
+        this._video = createRef();
+    },
+
     componentDidMount: function() {
         this.dispatcherRef = dis.register(this.onAction);
         this.showCall();
@@ -128,7 +132,7 @@ module.exports = createReactClass({
     },
 
     getVideoView: function() {
-        return this.refs.video;
+        return this._video.current;
     },
 
     render: function() {
@@ -147,7 +151,9 @@ module.exports = createReactClass({
 
         return (
             <div>
-                <VideoView ref="video" onClick={this.props.onClick}
+                <VideoView
+                    ref={this._video}
+                    onClick={this.props.onClick}
                     onResize={this.props.onResize}
                     maxHeight={this.props.maxVideoHeight}
                 />

src/components/views/voip/VideoFeed.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 
@@ -30,12 +30,16 @@ module.exports = createReactClass({
         onResize: PropTypes.func,
     },
 
+    UNSAFE_componentWillMount() {
+        this._vid = createRef();
+    },
+
     componentDidMount() {
-        this.refs.vid.addEventListener('resize', this.onResize);
+        this._vid.current.addEventListener('resize', this.onResize);
     },
 
     componentWillUnmount() {
-        this.refs.vid.removeEventListener('resize', this.onResize);
+        this._vid.current.removeEventListener('resize', this.onResize);
     },
 
     onResize: function(e) {
@@ -46,7 +50,7 @@ module.exports = createReactClass({
 
     render: function() {
         return (
-            <video ref="vid" style={{maxHeight: this.props.maxHeight}}>
+            <video ref={this._vid} style={{maxHeight: this.props.maxHeight}}>
             </video>
         );
     },

src/components/views/voip/VideoView.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, {createRef} from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
@@ -49,6 +49,11 @@ module.exports = createReactClass({
         onResize: PropTypes.func,
     },
 
+    UNSAFE_componentWillMount: function() {
+        this._local = createRef();
+        this._remote = createRef();
+    },
+
     componentDidMount: function() {
         this.dispatcherRef = dis.register(this.onAction);
     },
@@ -58,7 +63,7 @@ module.exports = createReactClass({
     },
 
     getRemoteVideoElement: function() {
-        return ReactDOM.findDOMNode(this.refs.remote);
+        return ReactDOM.findDOMNode(this._remote.current);
     },
 
     getRemoteAudioElement: function() {
@@ -74,7 +79,7 @@ module.exports = createReactClass({
     },
 
     getLocalVideoElement: function() {
-        return ReactDOM.findDOMNode(this.refs.local);
+        return ReactDOM.findDOMNode(this._local.current);
     },
 
     setContainer: function(c) {
@@ -125,11 +130,11 @@ module.exports = createReactClass({
         return (
             <div className="mx_VideoView" ref={this.setContainer} onClick={this.props.onClick}>
                 <div className="mx_VideoView_remoteVideoFeed">
-                    <VideoFeed ref="remote" onResize={this.props.onResize}
+                    <VideoFeed ref={this._remote} onResize={this.props.onResize}
                         maxHeight={maxVideoHeight} />
                 </div>
                 <div className={localVideoFeedClasses}>
-                    <VideoFeed ref="local" />
+                    <VideoFeed ref={this._local} />
                 </div>
             </div>
         );