diff --git a/src/components/target-pane/target-pane.jsx b/src/components/target-pane/target-pane.jsx
index 2f147447d13280cbc63dd825840bb4f33b955708..7d4c29cead22d64ff2bbf8aae686ded056bac3d0 100644
--- a/src/components/target-pane/target-pane.jsx
+++ b/src/components/target-pane/target-pane.jsx
@@ -3,9 +3,6 @@ import React from 'react';
import VM from 'scratch-vm';
-import BackdropLibrary from '../../containers/backdrop-library.jsx';
-import CostumeLibrary from '../../containers/costume-library.jsx';
-import SoundLibrary from '../../containers/sound-library.jsx';
import SpriteLibrary from '../../containers/sprite-library.jsx';
import SpriteSelectorComponent from '../sprite-selector/sprite-selector.jsx';
@@ -21,9 +18,6 @@ import styles from './target-pane.css';
*/
const TargetPane = ({
editingTarget,
- backdropLibraryVisible,
- costumeLibraryVisible,
- soundLibraryVisible,
spriteLibraryVisible,
onChangeSpriteDirection,
onChangeSpriteName,
@@ -34,9 +28,6 @@ const TargetPane = ({
onDeleteSprite,
onDuplicateSprite,
onNewSpriteClick,
- onRequestCloseBackdropLibrary,
- onRequestCloseCostumeLibrary,
- onRequestCloseSoundLibrary,
onRequestCloseSpriteLibrary,
onSelectSprite,
stage,
@@ -81,24 +72,6 @@ const TargetPane = ({
onRequestClose={onRequestCloseSpriteLibrary}
/>
) : null}
- {costumeLibraryVisible ? (
- <CostumeLibrary
- vm={vm}
- onRequestClose={onRequestCloseCostumeLibrary}
- />
- ) : null}
- {soundLibraryVisible ? (
- <SoundLibrary
- vm={vm}
- onRequestClose={onRequestCloseSoundLibrary}
- />
- ) : null}
- {backdropLibraryVisible ? (
- <BackdropLibrary
- vm={vm}
- onRequestClose={onRequestCloseBackdropLibrary}
- />
- ) : null}
</div>
</div>
</div>
@@ -123,8 +96,6 @@ const spriteShape = PropTypes.shape({
});
TargetPane.propTypes = {
- backdropLibraryVisible: PropTypes.bool,
- costumeLibraryVisible: PropTypes.bool,
editingTarget: PropTypes.string,
extensionLibraryVisible: PropTypes.bool,
onChangeSpriteDirection: PropTypes.func,
@@ -136,13 +107,9 @@ TargetPane.propTypes = {
onDeleteSprite: PropTypes.func,
onDuplicateSprite: PropTypes.func,
onNewSpriteClick: PropTypes.func,
- onRequestCloseBackdropLibrary: PropTypes.func,
- onRequestCloseCostumeLibrary: PropTypes.func,
onRequestCloseExtensionLibrary: PropTypes.func,
- onRequestCloseSoundLibrary: PropTypes.func,
onRequestCloseSpriteLibrary: PropTypes.func,
onSelectSprite: PropTypes.func,
- soundLibraryVisible: PropTypes.bool,
spriteLibraryVisible: PropTypes.bool,
sprites: PropTypes.objectOf(spriteShape),
stage: spriteShape,
diff --git a/src/containers/backdrop-library.jsx b/src/containers/backdrop-library.jsx
index 21eb3825ada784b44a06050285e5d4cf5b549098..1438a9b71abd2f67e09699e2fd7ee166716b5c95 100644
--- a/src/containers/backdrop-library.jsx
+++ b/src/containers/backdrop-library.jsx
@@ -22,7 +22,9 @@ class BackdropLibrary extends React.Component {
bitmapResolution: item.info.length > 2 ? item.info[2] : 1,
skinId: null
};
- this.props.vm.addBackdrop(item.md5, vmBackdrop);
+ this.props.vm.addBackdrop(item.md5, vmBackdrop).then(() => {
+ this.props.onNewBackdrop();
+ });
}
render () {
return (
@@ -37,6 +39,7 @@ class BackdropLibrary extends React.Component {
}
BackdropLibrary.propTypes = {
+ onNewBackdrop: PropTypes.func.isRequired,
onRequestClose: PropTypes.func,
vm: PropTypes.instanceOf(VM).isRequired
};
diff --git a/src/containers/costume-library.jsx b/src/containers/costume-library.jsx
index 7272bb95d0f3a5a3de4eb030cf6e94969262d2a7..c79240f29f56ca335e3d3808f1d58f814aebf069 100644
--- a/src/containers/costume-library.jsx
+++ b/src/containers/costume-library.jsx
@@ -22,7 +22,9 @@ class CostumeLibrary extends React.PureComponent {
bitmapResolution: item.info.length > 2 ? item.info[2] : 1,
skinId: null
};
- this.props.vm.addCostume(item.md5, vmCostume);
+ this.props.vm.addCostume(item.md5, vmCostume).then(() => {
+ this.props.onNewCostume();
+ });
}
render () {
return (
@@ -37,6 +39,7 @@ class CostumeLibrary extends React.PureComponent {
}
CostumeLibrary.propTypes = {
+ onNewCostume: PropTypes.func.isRequired,
onRequestClose: PropTypes.func,
vm: PropTypes.instanceOf(VM).isRequired
};
diff --git a/src/containers/costume-tab.jsx b/src/containers/costume-tab.jsx
index d87d4964a90373f1da2789861a08fb6480ce516e..47b0964f9ff676ef8c10cd044cc47f47602319a6 100644
--- a/src/containers/costume-tab.jsx
+++ b/src/containers/costume-tab.jsx
@@ -7,10 +7,13 @@ import VM from 'scratch-vm';
import AssetPanel from '../components/asset-panel/asset-panel.jsx';
import addCostumeIcon from '../components/asset-panel/icon--add-costume-lib.svg';
import PaintEditorWrapper from './paint-editor-wrapper.jsx';
-
+import CostumeLibrary from './costume-library.jsx';
+import BackdropLibrary from './backdrop-library.jsx';
import {connect} from 'react-redux';
import {
+ closeCostumeLibrary,
+ closeBackdropLibrary,
openCostumeLibrary,
openBackdropLibrary
} from '../reducers/modals';
@@ -20,7 +23,8 @@ class CostumeTab extends React.Component {
super(props);
bindAll(this, [
'handleSelectCostume',
- 'handleDeleteCostume'
+ 'handleDeleteCostume',
+ 'handleNewCostume'
]);
this.state = {selectedCostumeIndex: 0};
}
@@ -47,18 +51,29 @@ class CostumeTab extends React.Component {
this.props.vm.deleteCostume(costumeIndex);
}
+ handleNewCostume () {
+ if (!this.props.vm.editingTarget) return;
+ const costumes = this.props.vm.editingTarget.sprite.costumes || [];
+ this.setState({selectedCostumeIndex: Math.max(costumes.length - 1, 0)});
+ }
+
render () {
// For paint wrapper
const {
onNewBackdropClick,
onNewCostumeClick,
+ costumeLibraryVisible,
+ backdropLibraryVisible,
+ onRequestCloseCostumeLibrary,
+ onRequestCloseBackdropLibrary,
...props
} = this.props;
const {
editingTarget,
sprites,
- stage
+ stage,
+ vm
} = props;
const target = editingTarget && sprites[editingTarget] ? sprites[editingTarget] : stage;
@@ -104,15 +119,33 @@ class CostumeTab extends React.Component {
/> :
null
}
+ {costumeLibraryVisible ? (
+ <CostumeLibrary
+ vm={vm}
+ onNewCostume={this.handleNewCostume}
+ onRequestClose={onRequestCloseCostumeLibrary}
+ />
+ ) : null}
+ {backdropLibraryVisible ? (
+ <BackdropLibrary
+ vm={vm}
+ onNewBackdrop={this.handleNewCostume}
+ onRequestClose={onRequestCloseBackdropLibrary}
+ />
+ ) : null}
</AssetPanel>
);
}
}
CostumeTab.propTypes = {
+ backdropLibraryVisible: PropTypes.bool,
+ costumeLibraryVisible: PropTypes.bool,
editingTarget: PropTypes.string,
onNewBackdropClick: PropTypes.func.isRequired,
onNewCostumeClick: PropTypes.func.isRequired,
+ onRequestCloseBackdropLibrary: PropTypes.func.isRequired,
+ onRequestCloseCostumeLibrary: PropTypes.func.isRequired,
sprites: PropTypes.shape({
id: PropTypes.shape({
costumes: PropTypes.arrayOf(PropTypes.shape({
@@ -145,6 +178,12 @@ const mapDispatchToProps = dispatch => ({
onNewCostumeClick: e => {
e.preventDefault();
dispatch(openCostumeLibrary());
+ },
+ onRequestCloseBackdropLibrary: () => {
+ dispatch(closeBackdropLibrary());
+ },
+ onRequestCloseCostumeLibrary: () => {
+ dispatch(closeCostumeLibrary());
}
});
diff --git a/src/containers/record-modal.jsx b/src/containers/record-modal.jsx
index fa619805a4881882c92df9457b15c4c68f8cc098..8e4b9d249690391dd4da4c80633728b5a525d811 100644
--- a/src/containers/record-modal.jsx
+++ b/src/containers/record-modal.jsx
@@ -89,8 +89,10 @@ class RecordModal extends React.Component {
md5
);
- this.props.vm.addSound(vmSound);
- this.handleCancel();
+ this.props.vm.addSound(vmSound).then(() => {
+ this.props.onClose();
+ this.props.onNewSound();
+ });
});
});
}
@@ -126,6 +128,7 @@ class RecordModal extends React.Component {
RecordModal.propTypes = {
onClose: PropTypes.func,
+ onNewSound: PropTypes.func,
vm: PropTypes.instanceOf(VM)
};
diff --git a/src/containers/sound-library.jsx b/src/containers/sound-library.jsx
index 3949103bbc4ac5b02f395815f7cb190607eb9b16..7a834c2eb8e100b56279719d2920c989f9865142 100644
--- a/src/containers/sound-library.jsx
+++ b/src/containers/sound-library.jsx
@@ -55,7 +55,9 @@ class SoundLibrary extends React.PureComponent {
sampleCount: soundItem.sampleCount,
name: soundItem.name
};
- this.props.vm.addSound(vmSound);
+ this.props.vm.addSound(vmSound).then(() => {
+ this.props.onNewSound();
+ });
}
render () {
// @todo need to use this hack to avoid library using md5 for image
@@ -85,6 +87,7 @@ class SoundLibrary extends React.PureComponent {
}
SoundLibrary.propTypes = {
+ onNewSound: PropTypes.func.isRequired,
onRequestClose: PropTypes.func,
vm: PropTypes.instanceOf(VM).isRequired
};
diff --git a/src/containers/sound-tab.jsx b/src/containers/sound-tab.jsx
index d61bea13147db30196964f33b1066df3e7ac39cf..01ddbe5392f92b60c7e781ccd4947b1b7db4c0a2 100644
--- a/src/containers/sound-tab.jsx
+++ b/src/containers/sound-tab.jsx
@@ -10,10 +10,12 @@ import addSoundFromLibraryIcon from '../components/asset-panel/icon--add-sound-l
import addSoundFromRecordingIcon from '../components/asset-panel/icon--add-sound-record.svg';
import RecordModal from './record-modal.jsx';
import SoundEditor from './sound-editor.jsx';
+import SoundLibrary from './sound-library.jsx';
import {connect} from 'react-redux';
import {
+ closeSoundLibrary,
openSoundLibrary,
openSoundRecorder
} from '../reducers/modals';
@@ -23,7 +25,8 @@ class SoundTab extends React.Component {
super(props);
bindAll(this, [
'handleSelectSound',
- 'handleDeleteSound'
+ 'handleDeleteSound',
+ 'handleNewSound'
]);
this.state = {selectedSoundIndex: 0};
}
@@ -50,6 +53,15 @@ class SoundTab extends React.Component {
this.props.vm.deleteSound(soundIndex);
}
+ handleNewSound () {
+ if (!this.props.vm.editingTarget) {
+ return null;
+ }
+ const sprite = this.props.vm.editingTarget.sprite;
+ const sounds = sprite.sounds ? sprite.sounds : [];
+ this.setState({selectedSoundIndex: Math.max(sounds.length - 1, 0)});
+ }
+
render () {
const {
vm,
@@ -108,7 +120,16 @@ class SoundTab extends React.Component {
<SoundEditor soundIndex={this.state.selectedSoundIndex} />
) : null}
{this.props.soundRecorderVisible ? (
- <RecordModal />
+ <RecordModal
+ onNewSound={this.handleNewSound}
+ />
+ ) : null}
+ {this.props.soundLibraryVisible ? (
+ <SoundLibrary
+ vm={this.props.vm}
+ onNewSound={this.handleNewSound}
+ onRequestClose={this.props.onRequestCloseSoundLibrary}
+ />
) : null}
</AssetPanel>
);
@@ -119,6 +140,8 @@ SoundTab.propTypes = {
editingTarget: PropTypes.string,
onNewSoundFromLibraryClick: PropTypes.func.isRequired,
onNewSoundFromRecordingClick: PropTypes.func.isRequired,
+ onRequestCloseSoundLibrary: PropTypes.func.isRequired,
+ soundLibraryVisible: PropTypes.bool,
soundRecorderVisible: PropTypes.bool,
sprites: PropTypes.shape({
id: PropTypes.shape({
@@ -139,6 +162,7 @@ const mapStateToProps = state => ({
editingTarget: state.targets.editingTarget,
sprites: state.targets.sprites,
stage: state.targets.stage,
+ soundLibraryVisible: state.modals.soundLibrary,
soundRecorderVisible: state.modals.soundRecorder
});
@@ -149,6 +173,9 @@ const mapDispatchToProps = dispatch => ({
},
onNewSoundFromRecordingClick: () => {
dispatch(openSoundRecorder());
+ },
+ onRequestCloseSoundLibrary: () => {
+ dispatch(closeSoundLibrary());
}
});
diff --git a/src/containers/target-pane.jsx b/src/containers/target-pane.jsx
index ba0438fae049144130cbcae35e4e8abf7fbdee3b..1b069876d98a1a60cb67788ed444d903e8f38aa6 100644
--- a/src/containers/target-pane.jsx
+++ b/src/containers/target-pane.jsx
@@ -5,9 +5,6 @@ import {connect} from 'react-redux';
import {
openSpriteLibrary,
- closeBackdropLibrary,
- closeCostumeLibrary,
- closeSoundLibrary,
closeSpriteLibrary
} from '../reducers/modals';
@@ -93,25 +90,13 @@ const mapStateToProps = state => ({
return sprites;
}, {}),
stage: state.targets.stage,
- soundLibraryVisible: state.modals.soundLibrary,
- spriteLibraryVisible: state.modals.spriteLibrary,
- costumeLibraryVisible: state.modals.costumeLibrary,
- backdropLibraryVisible: state.modals.backdropLibrary
+ spriteLibraryVisible: state.modals.spriteLibrary
});
const mapDispatchToProps = dispatch => ({
onNewSpriteClick: e => {
e.preventDefault();
dispatch(openSpriteLibrary());
},
- onRequestCloseBackdropLibrary: () => {
- dispatch(closeBackdropLibrary());
- },
- onRequestCloseCostumeLibrary: () => {
- dispatch(closeCostumeLibrary());
- },
- onRequestCloseSoundLibrary: () => {
- dispatch(closeSoundLibrary());
- },
onRequestCloseSpriteLibrary: () => {
dispatch(closeSpriteLibrary());
}
diff --git a/test/integration/test.js b/test/integration/test.js
index ebfb3fbbd54be4a827438672d9f1fb9d67ff27cb..ca54db33788c5d594c547e5755c3422f706dffc0 100644
--- a/test/integration/test.js
+++ b/test/integration/test.js
@@ -22,7 +22,6 @@ const errorWhitelist = [
let driver;
const blocksTabScope = "*[@id='react-tabs-1']";
-const costumesTabScope = "*[@id='react-tabs-3']";
const soundsTabScope = "*[@id='react-tabs-5']";
const reportedValueScope = '*[@class="blocklyDropDownContent"]';
const modalScope = '*[@class="ReactModalPortal"]';
@@ -70,8 +69,7 @@ describe('costumes, sounds and variables', () => {
const el = await findByXpath("//input[@placeholder='what are you looking for?']");
await el.sendKeys('abb');
await clickText('Abby-a'); // Should close the modal, then click the costumes in the selector
- await clickText('costume1', costumesTabScope);
- await clickText('Abby-a', costumesTabScope);
+ await findByXpath("//input[@value='Abby-a']"); // Should show editor for new costume
const logs = await getLogs(errorWhitelist);
await expect(logs).toEqual([]);
});
@@ -86,12 +84,19 @@ describe('costumes, sounds and variables', () => {
await driver.switchTo().alert()
.accept();
- // Add a sound
+ // Add it back
await clickText('Add Sound');
- const el = await findByXpath("//input[@placeholder='what are you looking for?']");
+ let el = await findByXpath("//input[@placeholder='what are you looking for?']");
+ await el.sendKeys('meow');
+ await clickText('Meow', modalScope); // Should close the modal
+
+ // Add a new sound
+ await clickText('Add Sound');
+ el = await findByXpath("//input[@placeholder='what are you looking for?']");
await el.sendKeys('chom');
await clickText('Chomp'); // Should close the modal, then click the sounds in the selector
- await clickText('Chomp', soundsTabScope);
+ await findByXpath("//input[@value='Chomp']"); // Should show editor for new sound
+
await clickXpath('//button[@title="Play"]');
await clickText('Louder');