remove unnecessary re-renders to improve performance

demo/app.js

@@ -1,5 +1,10 @@
 import React from 'react';
-
+// https://github.com/maicki/why-did-you-update
+// NOTE: This slows down performance, even during development
+// if (process.env.NODE_ENV !== 'production') {
+//   const { whyDidYouUpdate } = require('why-did-you-update');
+//   whyDidYouUpdate(React, { exclude: [ /^HotKeysWrapper/ ] } );
+// }
 import TranscriptEditor from '../packages/components/transcript-editor';
 import SttTypeSelect from './select-stt-json-type';
 import ExportFormatSelect from './select-export-format';

demo/index.module.css

@@ -124,7 +124,6 @@ body {
 @media (max-width: 767px) {
   body {
     padding: 0;
-    text-align: center;
   }
 
   .demoNavItem {

demo/select-export-format.js

@@ -1,16 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const ExportFormatSelect = props => {
-  return <select className={ props.className } name={ props.name } value={ props.value } onChange={ props.handleChange }>
-    <option value="draftjs">Draft Js</option>
-    <option value="txt">Text file</option>
-    <option value="txtspeakertimecodes">Text file - with Speakers and Timecodes</option>
-    <option value="html" disabled>HTML</option>
-    <option value="word" disabled>MS Word</option>
-    <option value="digitalpaperedit">Digital Paper Edit</option>
-  </select>;
-};
+// using PureComponent to minimise number of unnecessary re-renders
+class ExportFormatSelect extends React.PureComponent {
+
+  render() {
+    const { props } = this;
+
+    return (<select className={ props.className } name={ props.name } value={ props.value } onChange={ props.handleChange }>
+      <option value="draftjs">Draft Js</option>
+      <option value="txt">Text file</option>
+      <option value="txtspeakertimecodes">Text file - with Speakers and Timecodes</option>
+      <option value="html" disabled>HTML</option>
+      <option value="word" disabled>MS Word</option>
+      <option value="digitalpaperedit">Digital Paper Edit</option>
+    </select>
+    );
+  }
+}
 
 ExportFormatSelect.propTypes = {
   className: PropTypes.string,

package.json

@@ -50,7 +50,8 @@
     "mousetrap": "1.5.2",
     "prop-types": "^15.6.2",
     "react-keyboard-shortcuts": "^1.1.3",
-    "react-simple-tooltip": "^2.3.3"
+    "react-simple-tooltip": "^2.3.3",
+    "react-visibility-sensor": "^5.0.2"
   },
   "peerDependencies": {
     "react": "^16.6.0",
@@ -94,7 +95,8 @@
     "style-loader": "^0.23.1",
     "stylelint-config-standard": "^18.2.0",
     "webpack": "^4.29.6",
-    "webpack-cli": "^3.3.0"
+    "webpack-cli": "^3.3.0",
+    "why-did-you-update": "^1.0.6"
   },
   "contributors": [
     {

packages/components/media-player/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { hotkeys } from 'react-keyboard-shortcuts';
-import PlayerControls from './src/PlayerControls';
+import PlayerControls from './src/PlayerControls/index.js';
 import ProgressBar from './src/ProgressBar';
 
 import returnHotKeys from './src/defaultHotKeys';
@@ -12,20 +12,7 @@ import {
   timecodeToSeconds
 } from '../../util/timecode-converter';
 
-const PLAYBACK_RATES = [
-  { value: 0.2, label: '0.2' },
-  { value: 0.25, label: '0.25' },
-  { value: 0.5, label: '0.5' },
-  { value: 0.75, label: '0.75' },
-  { value: 1, label: '1' },
-  { value: 1.25, label: '1.25' },
-  { value: 1.5, label: '1.5' },
-  { value: 1.75, label: '1.75' },
-  { value: 2, label: '2' },
-  { value: 2.5, label: '2.5' },
-  { value: 3, label: '3' },
-  { value: 3.5, label: '3.5' }
-];
+import PLAYBACK_RATES from './src/PLAYBACK_RATES.js';
 
 class MediaPlayer extends React.Component {
   constructor(props) {
@@ -67,11 +54,40 @@ class MediaPlayer extends React.Component {
 
   componentDidMount() {
     // TODO: Should these hook functions be optional? are they needed? what do they actually do?
+    // TODO: these hook functions need refactoring, they are causing performance problems
     this.props.hookSeek(this.setCurrentTime);
     this.props.hookPlayMedia(this.togglePlayMedia);
     this.props.hookIsPlaying(this.isPlaying);
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    if (nextProps.rollBackValueInSeconds !== this.state.rollBackValueInSeconds) {
+      return true;
+    }
+    if (nextProps.timecodeOffset !== this.state.timecodeOffset) {
+      return true;
+    }
+    // TODO: workaround to keep the hook functions, only call re-renders
+    // if current time has changed. And it seems eliminate component's unecessary re-renders.
+    if (nextProps.currentTime !== this.props.currentTime) {
+      return true;
+    }
+
+    if (nextState.playbackRate !== this.state.playbackRate) {
+      return true;
+    }
+
+    if (nextProps.mediaDuration !== this.props.mediaDuration ) {
+      return true;
+    }
+
+    if (nextState.isMute !== this.state.isMute) {
+      return true;
+    }
+
+    return false;
+  }
+
   setCurrentTime = newCurrentTime => {
     if (newCurrentTime !== '' && newCurrentTime !== null) {
       // hh:mm:ss:ff - mm:ss - m:ss - ss - seconds number or string and hh:mm:ss
@@ -392,20 +408,26 @@ class MediaPlayer extends React.Component {
     }
   };
 
+  // performance optimization
+  getProgressBarMax = () => {
+    return this.props.videoRef.current !== null
+      ? parseInt(this.props.videoRef.current.duration).toString()
+      : '100';
+  }
+
+  // performance optimization
+  getProgressBarValue = () => {
+    return this.props.videoRef.current !== null
+      ? parseInt(this.props.videoRef.current.currentTime)
+      : 0;
+  }
+
   render() {
     const progressBar = (
       <ProgressBar
-        max={
-          this.props.videoRef.current !== null
-            ? parseInt(this.props.videoRef.current.duration).toString()
-            : '100'
-        }
-        value={
-          this.props.videoRef.current !== null
-            ? parseInt(this.props.videoRef.current.currentTime)
-            : 0
-        }
-        buttonClick={ this.handleProgressBarClick.bind(this) }
+        max={ this.getProgressBarMax() }
+        value={ this.getProgressBarValue() }
+        buttonClick={ this.handleProgressBarClick }
       />
     );
 

packages/components/media-player/src/PLAYBACK_RATES.js

@@ -0,0 +1,16 @@
+const PLAYBACK_RATES = [
+  { value: 0.2, label: '0.2' },
+  { value: 0.25, label: '0.25' },
+  { value: 0.5, label: '0.5' },
+  { value: 0.75, label: '0.75' },
+  { value: 1, label: '1' },
+  { value: 1.25, label: '1.25' },
+  { value: 1.5, label: '1.5' },
+  { value: 1.75, label: '1.75' },
+  { value: 2, label: '2' },
+  { value: 2.5, label: '2.5' },
+  { value: 3, label: '3' },
+  { value: 3.5, label: '3.5' }
+];
+
+export default PLAYBACK_RATES;

packages/components/media-player/src/PlaybackRate.js

@@ -1,33 +1,38 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from './PlaybackRate.module.css';
+// import styles from './PlaybackRate.module.css';
+import Select from './Select';
+import style from './PlayerControls/index.module.css';
+
 class PlaybackRate extends React.Component {
 
+  // to avoid unnecessary re-renders
+  shouldComponentUpdate(nextProps) {
+    if (nextProps.playbackRate !== this.props.playbackRate) {
+      return true;
+    }
+
+    return false;
+  }
   render() {
     return (
-      <div>
-        <p className={ styles.helpText }>Playback Rate
-          <output className={ styles.playbackRateValue } >{ ` x${ this.props.playBackRate } ` }</output>
-        </p>
-        <input
-          type="range"
-          min="0.2"
-          value={ this.props.playBackRate }
-          max="3.5"
-          step="0.1"
-          onChange={ this.props.handlePlayBackRateChange }
+      <span className={ style.playBackRate }
+        title="Playback rate: alt - & alt + ">
+        <Select
+          options={ this.props.playbackRateOptions }
+          currentValue={ this.props.playbackRate.toString() }
+          name={ 'playbackRate' }
+          handleChange={ this.props.handlePlayBackRateChange }
         />
-        <br/>
-        <button type="button" onClick={ () => { this.props.setPlayBackRate(1); } }>Reset Playback Rate</button>
-      </div>
+      </span>
     );
   }
 }
 
 PlaybackRate.propTypes = {
-  handlePlayBackRateChange: PropTypes.func,
-  playBackRate: PropTypes.number,
-  setPlayBackRate: PropTypes.func
+  playbackRateOptions: PropTypes.array,
+  playbackRate: PropTypes.number,
+  handlePlayBackRateChange: PropTypes.func
 };
 
 export default PlaybackRate;

packages/components/media-player/src/PlayerControls/TimeBox.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import style from './index.module.css';
+
+class TimeBox extends React.Component {
+
+  shouldComponentUpdate(nextProps) {
+    if (nextProps.currentTime !== this.props.currentTime) {
+      return true;
+    }
+    if (nextProps.duration !== this.props.duration) {
+      return true;
+    }
+  }
+  // as separate function above render for performance
+  handleClick = (e) => {
+    this.props.promptSetCurrentTime(e);
+  }
+  render() {
+    return (
+      <div className={ style.timeBox }>
+        <span
+          title="Current time: alt t"
+          className={ style.currentTime }
+          onClick={ this.handleClick }>
+          { this.props.currentTime }</span>
+        <span className={ style.separator }>|</span>
+        <span
+          title="Clip duration"
+          className={ style.duration }>
+          {this.props.duration}</span>
+      </div>
+    );
+  }
+}
+
+export default TimeBox;