diff --git a/packages/components/media-player/src/PlayerControls/TimeBox.js b/packages/components/media-player/src/PlayerControls/TimeBox.js index 374f0bc0..11957d6c 100644 --- a/packages/components/media-player/src/PlayerControls/TimeBox.js +++ b/packages/components/media-player/src/PlayerControls/TimeBox.js @@ -1,19 +1,16 @@ 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) { + if (nextProps !== this.props) { return true; } return false; } + // as separate function above render for performance handleClick = (e) => { this.props.promptSetCurrentTime(e); diff --git a/packages/components/media-player/src/PlayerControls/index.js b/packages/components/media-player/src/PlayerControls/index.js index bf9e8a58..fd12c5bc 100644 --- a/packages/components/media-player/src/PlayerControls/index.js +++ b/packages/components/media-player/src/PlayerControls/index.js @@ -21,25 +21,8 @@ import TimeBox from './TimeBox.js'; class PlayerControls extends React.Component { - shouldComponentUpdate(nextProps) { - if (nextProps.currentTime !== this.props.currentTime) { - return true; - } - if (nextProps.duration !== this.props.duration) { - return true; - } - - if (nextProps.playbackRate !== this.props.playbackRate) { - return true; - } - - if (nextProps.isPlaying !== this.props.isPlaying) { - return true; - } - - if (nextProps.isMute !== this.props.isMute) { - return true; - } + shouldComponentUpdate = (nextProps) => { + if (nextProps !== this.props) return true; return false; } diff --git a/packages/components/media-player/src/ProgressBar.js b/packages/components/media-player/src/ProgressBar.js index a05a375e..43c90352 100644 --- a/packages/components/media-player/src/ProgressBar.js +++ b/packages/components/media-player/src/ProgressBar.js @@ -7,15 +7,7 @@ class ProgressBar extends React.Component { // performance optimization shouldComponentUpdate = (nextProps) => { - if (nextProps.buttonClick !== this.props.buttonClick) { - return true; - } - - if (nextProps.value !== this.props.value) { - return true; - } - - if (nextProps.max !== this.props.max) { + if (nextProps !== this.props) { return true; } diff --git a/packages/components/timed-text-editor/index.js b/packages/components/timed-text-editor/index.js index 34eec2c0..215c19e0 100644 --- a/packages/components/timed-text-editor/index.js +++ b/packages/components/timed-text-editor/index.js @@ -37,46 +37,9 @@ class TimedTextEditor extends React.Component { } shouldComponentUpdate = (nextProps, nextState) => { - if (nextProps.transcriptData !== this.props.transcriptData) { - return true; - } - - if (nextProps.isEditable !== this.props.isEditable) { - return true; - } - - if (nextProps.timecodeOffset !== this.props.timecodeOffset) { - return true; - } - - if (nextProps.showSpeakers !== this.props.showSpeakers) { - return true; - } - - if (nextProps.showTimecodes !== this.props.showTimecodes) { - return true; - } + if (nextProps !== this.props) return true; - if (nextProps.fileName !== this.props.fileName) { - return true; - } - - // updating TimedTextEditor on every currentTime causes re-renders - if (nextProps.currentTime !== this.props.currentTime ) { - return true; - } - - if (nextState.editorState !== this.state.editorState ) { - return true; - } - - if (nextProps.spellCheck !== this.props.spellCheck) { - return true; - } - - if (nextProps.isPauseWhileTypingOn !== this.props.isPauseWhileTypingOn) { - return true; - } + if (nextState !== this.state ) return true; return false; } diff --git a/packages/components/transcript-editor/index.js b/packages/components/transcript-editor/index.js index ab7e76e1..fe7daba0 100644 --- a/packages/components/transcript-editor/index.js +++ b/packages/components/transcript-editor/index.js @@ -65,63 +65,9 @@ class TranscriptEditor extends React.Component { // performance optimization shouldComponentUpdate = (nextProps, nextState) => { + if (nextProps.mediaUrl !== this.props.mediaUrl) return true; - if (nextState.transcriptData !== this.state.transcriptData) { - return true; - } - - if (nextProps.mediaUrl !== this.props.mediaUrl) { - return true; - } - - if (nextState.currentTime !== this.state.currentTime) { - return true; - } - - if (nextState.isScrollIntoViewOn !== this.state.isScrollIntoViewOn) { - return true; - } - - if (nextState.showSettings !== this.state.showSettings) { - return true; - } - - if (nextState.showShortcuts !== this.state.showShortcuts) { - return true; - } - if (nextState.showExportOptions !== this.state.showExportOptions) { - return true; - } - - if (nextState.isPauseWhileTypingOn !== this.state.isPauseWhileTypingOn) { - return true; - } - - if (nextState.rollBackValueInSeconds !== this.state.rollBackValueInSeconds) { - return true; - } - - if (nextState.timecodeOffset !== this.state.timecodeOffset) { - return true; - } - - if (nextState.showTimecodes !== this.state.showTimecodes) { - return true; - } - - if (nextState.showSpeakers !== this.state.showSpeakers) { - return true; - } - - if (nextState.previewIsDisplayed !== this.state.previewIsDisplayed) { - return true; - } - - if (nextState.mediaDuration !== this.state.mediaDuration) { - return true; - } - - return false; + return nextState !== this.state; } componentDidUpdate(prevProps, prevState) { diff --git a/packages/components/transcript-editor/src/Header.js b/packages/components/transcript-editor/src/Header.js index 61ffa532..f5ee321f 100644 --- a/packages/components/transcript-editor/src/Header.js +++ b/packages/components/transcript-editor/src/Header.js @@ -12,16 +12,7 @@ class Header extends React.Component { // to avoid unnecessary re-renders shouldComponentUpdate(nextProps) { - if (nextProps.showSettings !== this.props.showSettings) { - return true; - } - if (nextProps.showShortcuts !== this.props.showShortcuts) { - return true; - } - - if (nextProps.mediaControls !== this.props.mediaControls) { - return true; - } + if (nextProps !== this.props) return true; return false; }