diff --git a/src/components/views/voice_messages/LiveRecordingClock.tsx b/src/components/views/voice_messages/LiveRecordingClock.tsx index 6786ae36f8..49d5dd66e1 100644 --- a/src/components/views/voice_messages/LiveRecordingClock.tsx +++ b/src/components/views/voice_messages/LiveRecordingClock.tsx @@ -34,10 +34,16 @@ interface IState { @replaceableComponent("views.voice_messages.LiveRecordingClock") export default class LiveRecordingClock extends React.PureComponent { private seconds = 0; - private rafId: number; + private scheduledUpdate = new MarkedExecution( + () => this.updateClock(), + () => requestAnimationFrame(() => this.scheduledUpdate.trigger()), + ) - state = { - seconds: 0, + constructor(props) { + super(props); + this.state = { + seconds: 0, + } } componentDidMount() { @@ -47,24 +53,10 @@ export default class LiveRecordingClock extends React.PureComponent this.updateClock(), - () => this.onLiveDataUpdate(), - ) - - private onLiveDataUpdate() { - if (this.rafId) { - cancelAnimationFrame(this.rafId); - } - - this.rafId = requestAnimationFrame(() => this.scheduledUpdate.trigger()) - } - private updateClock() { this.setState({ seconds: this.seconds, }) - this.rafId = null; } public render() { diff --git a/src/components/views/voice_messages/LiveRecordingWaveform.tsx b/src/components/views/voice_messages/LiveRecordingWaveform.tsx index 83449fddc8..640f7eb129 100644 --- a/src/components/views/voice_messages/LiveRecordingWaveform.tsx +++ b/src/components/views/voice_messages/LiveRecordingWaveform.tsx @@ -38,10 +38,16 @@ export default class LiveRecordingWaveform extends React.PureComponent this.updateWaveform(), + () => requestAnimationFrame(() => this.scheduledUpdate.trigger()), + ) - state = { - waveform: [], + constructor(props) { + super(props); + this.state = { + waveform: [], + } } componentDidMount() { @@ -51,24 +57,10 @@ export default class LiveRecordingWaveform extends React.PureComponent this.updateWaveform(), - () => this.onLiveDataUpdate(), - ) - - private onLiveDataUpdate() { - if (this.rafId) { - cancelAnimationFrame(this.rafId); - } - - this.rafId = requestAnimationFrame(() => this.scheduledUpdate.trigger()) - } - private updateWaveform() { this.setState({ waveform: this.waveform, }) - this.rafId = null; } public render() { diff --git a/src/utils/MarkedExecution.ts b/src/utils/MarkedExecution.ts index 0123d94f71..624ab499de 100644 --- a/src/utils/MarkedExecution.ts +++ b/src/utils/MarkedExecution.ts @@ -33,13 +33,6 @@ export class MarkedExecution { constructor(private fn: () => void, private onMarkCallback?: () => void) { } - /** - * Getter for the _marked property - */ - public get marked() { - return this._marked; - } - /** * Resets the mark without calling the function. */