Update timestamps using diff alignment algorithm

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,