diff --git a/src/components/asset-panel/asset-panel.css b/src/components/asset-panel/asset-panel.css index 25d13588d8c2452f749820b58057da47b1ba9100..2d85da781e0bd20a7ed9255c34ce62a29a510470 100644 --- a/src/components/asset-panel/asset-panel.css +++ b/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; } diff --git a/src/components/sound-editor/sound-editor.css b/src/components/sound-editor/sound-editor.css index 4e168a56dfbcf9bce5fb074c9b27d3c4d1a0cfce..00cf9cbfd8293f67c67899834a5208e9137df6d3 100644 --- a/src/components/sound-editor/sound-editor.css +++ b/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); } diff --git a/src/containers/sound-editor.jsx b/src/containers/sound-editor.jsx index 4be944a4a7b8cdfb378e206f6826b312dade05ac..be67d84935b32dd63896e6e3ce13030de1426b53 100644 --- a/src/containers/sound-editor.jsx +++ b/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(); } diff --git a/test/__mocks__/audio-buffer-player.js b/test/__mocks__/audio-buffer-player.js index dabf72bc37d2ba6553530ada7dc4e9851f4f53a7..476b2b64964f9abb237faacb1048514de3076362 100644 --- a/test/__mocks__/audio-buffer-player.js +++ b/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; });