From 884de41c1b5d6869e5660819b7dc44af728fcea6 Mon Sep 17 00:00:00 2001
From: hamper <143143895+adevguylol@users.noreply.github.com>
Date: Sat, 6 Jan 2024 08:58:45 -0800
Subject: [PATCH] refine playback-step.jsx

please review code (the original code is old)
---
 src/containers/playback-step.jsx | 101 +++++++++++++++++--------------
 1 file changed, 54 insertions(+), 47 deletions(-)

diff --git a/src/containers/playback-step.jsx b/src/containers/playback-step.jsx
index 8c2f5e7333b..611a6a60b67 100644
--- a/src/containers/playback-step.jsx
+++ b/src/containers/playback-step.jsx
@@ -1,58 +1,65 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import bindAll from 'lodash.bindall';
 import PlaybackStepComponent from '../components/record-modal/playback-step.jsx';
 import AudioBufferPlayer from '../lib/audio/audio-buffer-player.js';
 
-class PlaybackStep extends React.Component {
-    constructor (props) {
-        super(props);
-        bindAll(this, [
-            'handlePlay',
-            'handleStopPlaying'
-        ]);
-    }
-    componentDidMount () {
-        this.audioBufferPlayer = new AudioBufferPlayer(this.props.samples, this.props.sampleRate);
-    }
-    componentWillUnmount () {
-        this.audioBufferPlayer.stop();
-    }
-    handlePlay () {
-        this.audioBufferPlayer.play(
-            this.props.trimStart,
-            this.props.trimEnd,
-            this.props.onSetPlayhead,
-            this.props.onStopPlaying
-        );
-        this.props.onPlay();
-    }
-    handleStopPlaying () {
-        this.audioBufferPlayer.stop();
-        this.props.onStopPlaying();
-    }
-    render () {
-        const {
-            sampleRate, // eslint-disable-line no-unused-vars
-            onPlay, // eslint-disable-line no-unused-vars
-            onStopPlaying, // eslint-disable-line no-unused-vars
-            onSetPlayhead, // eslint-disable-line no-unused-vars
-            ...componentProps
-        } = this.props;
-        return (
-            <PlaybackStepComponent
-                onPlay={this.handlePlay}
-                onStopPlaying={this.handleStopPlaying}
-                {...componentProps}
-            />
-        );
-    }
+class PlaybackStep extends Component {
+  constructor(props) {
+    super(props);
+    bindAll(this, ['handlePlay', 'handleStopPlaying']);
+    this.audioBufferPlayer = null;
+  }
+
+  componentDidMount() {
+    this.audioBufferPlayer = new AudioBufferPlayer(this.props.samples, this.props.sampleRate);
+  }
+
+  componentWillUnmount() {
+    this.audioBufferPlayer.stop();
+  }
+
+  handlePlay() {
+    this.audioBufferPlayer.play(
+      this.props.trimStart,
+      this.props.trimEnd,
+      this.props.onSetPlayhead,
+      this.props.onStopPlaying
+    );
+    this.props.onPlay();
+  }
+
+  handleStopPlaying() {
+    this.audioBufferPlayer.stop();
+    this.props.onStopPlaying();
+  }
+
+  render() {
+    const {
+      sampleRate,
+      samples,
+      onPlay,
+      onStopPlaying,
+      onSetPlayhead,
+      ...componentProps
+    } = this.props;
+    return (
+      <PlaybackStepComponent
+        onPlay={this.handlePlay}
+        onStopPlaying={this.handleStopPlaying}
+        {...componentProps}
+      />
+    );
+  }
 }
 
 PlaybackStep.propTypes = {
-    sampleRate: PropTypes.number.isRequired,
-    samples: PropTypes.instanceOf(Float32Array).isRequired,
-    ...PlaybackStepComponent.propTypes
+  sampleRate: PropTypes.number.isRequired,
+  samples: PropTypes.instanceOf(Float32Array).isRequired,
+  onPlay: PropTypes.func.isRequired,
+  onStopPlaying: PropTypes.func.isRequired,
+  onSetPlayhead: PropTypes.func.isRequired,
+  // other prop types from PlaybackStepComponent
 };
 
 export default PlaybackStep;