Merge pull request #1202 from paulkaplan/fix-firefox-sound-overflow

Fix firefox display and functionality issues with sound edit

src/components/asset-panel/asset-panel.css

@@ -12,7 +12,8 @@
 }
 
 .detail-area {
+    display: flex;
     flex-grow: 1;
-    flex-shrink: 0;
+    flex-shrink: 1;
     border-left: 1px solid $ui-pane-border;
 }

src/components/sound-editor/sound-editor.css

@@ -4,6 +4,7 @@
 .editor-container {
     display: flex;
     flex-direction: column;
+    flex-grow: 1;
     padding: calc(2 * $space);
 }
 

src/containers/sound-editor.jsx

@@ -15,6 +15,7 @@ class SoundEditor extends React.Component {
     constructor (props) {
         super(props);
         bindAll(this, [
+            'copyCurrentSamples',
             'handleStoppedPlaying',
             'handleChangeName',
             'handlePlay',
@@ -67,7 +68,7 @@ class SoundEditor extends React.Component {
             if (this.undoStack.length >= UNDO_STACK_SIZE) {
                 this.undoStack.shift(); // Drop the first element off the array
             }
-            this.undoStack.push(this.props.samples.slice(0));
+            this.undoStack.push(this.copyCurrentSamples());
         }
         this.resetState(samples, sampleRate);
         this.props.onUpdateSoundBuffer(
@@ -99,10 +100,11 @@ class SoundEditor extends React.Component {
         if (this.state.trimStart === null && this.state.trimEnd === null) {
             this.setState({trimEnd: 0.95, trimStart: 0.05});
         } else {
-            const sampleCount = this.props.samples.length;
+            const samples = this.copyCurrentSamples();
+            const sampleCount = samples.length;
             const startIndex = Math.floor(this.state.trimStart * sampleCount);
             const endIndex = Math.floor(this.state.trimEnd * sampleCount);
-            const clippedSamples = this.props.samples.slice(startIndex, endIndex);
+            const clippedSamples = samples.slice(startIndex, endIndex);
             this.submitNewSamples(clippedSamples, this.props.sampleRate);
         }
     }
@@ -115,6 +117,10 @@ class SoundEditor extends React.Component {
     effectFactory (name) {
         return () => this.handleEffect(name);
     }
+    copyCurrentSamples () {
+        // Cannot reliably use props.samples because it gets detached by Firefox
+        return this.audioBufferPlayer.buffer.getChannelData(0);
+    }
     handleEffect (name) {
         const effects = new AudioEffects(this.audioBufferPlayer.buffer, name);
         effects.process(({renderedBuffer}) => {
@@ -125,7 +131,7 @@ class SoundEditor extends React.Component {
         });
     }
     handleUndo () {
-        this.redoStack.push(this.props.samples.slice(0));
+        this.redoStack.push(this.copyCurrentSamples());
         const samples = this.undoStack.pop();
         if (samples) {
             this.submitNewSamples(samples, this.props.sampleRate, true);
@@ -135,7 +141,7 @@ class SoundEditor extends React.Component {
     handleRedo () {
         const samples = this.redoStack.pop();
         if (samples) {
-            this.undoStack.push(this.props.samples.slice(0));
+            this.undoStack.push(this.copyCurrentSamples());
             this.submitNewSamples(samples, this.props.sampleRate, true);
             this.handlePlay();
         }

test/__mocks__/audio-buffer-player.js

@@ -2,6 +2,9 @@ export default class MockAudioBufferPlayer {
     constructor (samples, sampleRate) {
         this.samples = samples;
         this.sampleRate = sampleRate;
+        this.buffer = {
+            getChannelData: jest.fn(() => samples)
+        };
         this.play = jest.fn((trimStart, trimEnd, onUpdate) => {
             this.onUpdate = onUpdate;
         });