diff --git a/src/components/library-item/lib-icon--sound-rtl.svg b/src/components/library-item/lib-icon--sound-rtl.svg
new file mode 100644
index 0000000000000000000000000000000000000000..db193366a3f7c592381ca6382f49de2ba2abc5a2
Binary files /dev/null and b/src/components/library-item/lib-icon--sound-rtl.svg differ
diff --git a/src/components/library-item/lib-icon--sound.svg b/src/components/library-item/lib-icon--sound.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2ffc760131cccf23d7e0346985252c5e765ccefa
Binary files /dev/null and b/src/components/library-item/lib-icon--sound.svg differ
diff --git a/src/components/library-item/library-item.jsx b/src/components/library-item/library-item.jsx
index 504be2b66949531daf7e829f5808ab2fa04f8e33..74a65aa9a37624a45de79173bcb0f615ffa80934 100644
--- a/src/components/library-item/library-item.jsx
+++ b/src/components/library-item/library-item.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import React from 'react';
import Box from '../box/box.jsx';
-import PlayButton from '../play-button/play-button.jsx';
+import PlayButton from '../../containers/play-button.jsx';
import styles from './library-item.css';
import classNames from 'classnames';
diff --git a/src/components/library/library.jsx b/src/components/library/library.jsx
index 259e922ff3bcc03b880a037de7030b2b1fe9ed24..f85def50f2ecae97a7ce5628ef1a2ba25c560d00 100644
--- a/src/components/library/library.jsx
+++ b/src/components/library/library.jsx
@@ -73,7 +73,7 @@ class LibraryComponent extends React.Component {
handleTagClick (tag) {
if (this.state.playingItem === null) {
this.setState({
- ilterQuery: '',
+ filterQuery: '',
selectedTag: tag.toLowerCase()
});
} else {
diff --git a/src/components/play-button/play-button.css b/src/components/play-button/play-button.css
index fbc901e66ca32b8c54911315bfedc270ac068fd8..17d2b6317730319d842127b1c4a14610dc15f8c5 100644
--- a/src/components/play-button/play-button.css
+++ b/src/components/play-button/play-button.css
@@ -34,9 +34,9 @@
}
[dir="ltr"] .play-button {
- left: .5rem;
+ right: .5rem;
}
[dir="rtl"] .play-button {
- right: .5rem;
+ left: .5rem;
}
diff --git a/src/components/play-button/play-button.jsx b/src/components/play-button/play-button.jsx
index 8071ce849c62b349417be8b305f8f7cd9bd8be17..15f8226ac1d9c5cea3516ac48a90c3f2a653e25d 100644
--- a/src/components/play-button/play-button.jsx
+++ b/src/components/play-button/play-button.jsx
@@ -1,7 +1,6 @@
import PropTypes from 'prop-types';
import React from 'react';
import classNames from 'classnames';
-import bindAll from 'lodash.bindall';
import {defineMessages, injectIntl, intlShape} from 'react-intl';
@@ -23,126 +22,52 @@ const messages = defineMessages({
}
});
-class PlayButton extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'handleClick',
- 'handleMouseDown',
- 'handleMouseEnter',
- 'handleMouseLeave',
- 'handleTouchStart',
- 'setButtonRef'
- ]);
- this.state = {
- touchStarted: false
- };
- }
- getDerivedStateFromProps (props, state) {
- // if touchStarted is true and it's not playing, the sound must have ended.
- // reset the touchStarted state to allow the sound to be replayed
- if (state.touchStarted && !props.isPlaying) {
- return {
- touchStarted: false
- };
- }
- return null; // nothing changed
- }
- componentDidMount () {
- // Touch start
- this.buttonRef.addEventListener('touchstart', this.handleTouchStart);
- }
- componentWillUnmount () {
- this.buttonRef.removeEventListener('touchstart', this.handleTouchStart);
- }
- handleClick (e) {
- // stop the click from propagating out of the button
- e.stopPropagation();
- }
- handleMouseDown (e) {
- // prevent default (focus) on mouseDown
- e.preventDefault();
- if (this.props.isPlaying) {
- // stop sound and reset touch state
- this.props.onStop();
- if (this.state.touchstarted) this.setState({touchStarted: false});
- } else {
- this.props.onPlay();
- if (this.state.touchstarted) {
- // started on touch, but now clicked mouse
- this.setState({touchStarted: false});
- }
- }
- }
- handleTouchStart (e) {
- if (this.props.isPlaying) {
- // If playing, stop sound, and reset touch state
- e.preventDefault();
- this.setState({touchStarted: false});
- this.props.onStop();
- } else {
- // otherwise start playing, and set touch state
- e.preventDefault();
- this.setState({touchStarted: true});
- this.props.onPlay();
- }
- }
- handleMouseEnter (e) {
- // start the sound if it's not already playing
- e.preventDefault();
- if (!this.props.isPlaying) {
- this.props.onPlay();
- }
- }
- handleMouseLeave () {
- // stop the sound unless it was started by touch
- if (this.props.isPlaying && !this.state.touchstarted) {
- this.props.onStop();
- }
- }
- setButtonRef (ref) {
- this.buttonRef = ref;
- }
- render () {
- const {
- className,
- intl,
- isPlaying,
- onPlay, // eslint-disable-line no-unused-vars
- onStop // eslint-disable-line no-unused-vars
- } = this.props;
- const label = isPlaying ?
- intl.formatMessage(messages.stop) :
- intl.formatMessage(messages.play);
+const PlayButtonComponent = ({
+ className,
+ intl,
+ isPlaying,
+ onClick,
+ onMouseDown,
+ onMouseEnter,
+ onMouseLeave,
+ setButtonRef,
+ ...props
+}) => {
+ const label = isPlaying ?
+ intl.formatMessage(messages.stop) :
+ intl.formatMessage(messages.play);
- return (
- <div
- aria-label={label}
- className={classNames(styles.playButton, className, {
- [styles.playing]: isPlaying
- })}
- ref={this.setButtonRef}
- onClick={this.handleClick}
- onMouseDown={this.handleMouseDown}
- onMouseEnter={this.handleMouseEnter}
- onMouseLeave={this.handleMouseLeave}
- >
- <img
- className={styles.playIcon}
- draggable={false}
- src={isPlaying ? stopIcon : playIcon}
- />
- </div>
- );
- }
-}
+ return (
+ <div
+ aria-label={label}
+ className={classNames(styles.playButton, className, {
+ [styles.playing]: isPlaying
+ })}
+ onClick={onClick}
+ onMouseDown={onMouseDown}
+ onMouseEnter={onMouseEnter}
+ onMouseLeave={onMouseLeave}
+ ref={setButtonRef}
+ {...props}
+ >
+ <img
+ className={styles.playIcon}
+ draggable={false}
+ src={isPlaying ? stopIcon : playIcon}
+ />
+ </div>
+ );
+};
-PlayButton.propTypes = {
+PlayButtonComponent.propTypes = {
className: PropTypes.string,
intl: intlShape,
isPlaying: PropTypes.bool.isRequired,
- onPlay: PropTypes.func.isRequired,
- onStop: PropTypes.func.isRequired
+ onClick: PropTypes.func.isRequired,
+ onMouseDown: PropTypes.func.isRequired,
+ onMouseEnter: PropTypes.func.isRequired,
+ onMouseLeave: PropTypes.func.isRequired,
+ setButtonRef: PropTypes.func.isRequired
};
-export default injectIntl(PlayButton);
+export default injectIntl(PlayButtonComponent);
diff --git a/src/containers/play-button.jsx b/src/containers/play-button.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..f0ed8b6a2026fdd57d11718f69001a7885e44667
--- /dev/null
+++ b/src/containers/play-button.jsx
@@ -0,0 +1,115 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import bindAll from 'lodash.bindall';
+
+import PlayButtonComponent from '../components/play-button/play-button.jsx';
+
+class PlayButton extends React.Component {
+ constructor (props) {
+ super(props);
+ bindAll(this, [
+ 'handleClick',
+ 'handleMouseDown',
+ 'handleMouseEnter',
+ 'handleMouseLeave',
+ 'handleTouchStart',
+ 'setButtonRef'
+ ]);
+ this.state = {
+ touchStarted: false
+ };
+ }
+ getDerivedStateFromProps (props, state) {
+ // if touchStarted is true and it's not playing, the sound must have ended.
+ // reset the touchStarted state to allow the sound to be replayed
+ if (state.touchStarted && !props.isPlaying) {
+ return {
+ touchStarted: false
+ };
+ }
+ return null; // nothing changed
+ }
+ componentDidMount () {
+ // Touch start
+ this.buttonRef.addEventListener('touchstart', this.handleTouchStart);
+ }
+ componentWillUnmount () {
+ this.buttonRef.removeEventListener('touchstart', this.handleTouchStart);
+ }
+ handleClick (e) {
+ // stop the click from propagating out of the button
+ e.stopPropagation();
+ }
+ handleMouseDown (e) {
+ // prevent default (focus) on mouseDown
+ e.preventDefault();
+ if (this.props.isPlaying) {
+ // stop sound and reset touch state
+ this.props.onStop();
+ if (this.state.touchstarted) this.setState({touchStarted: false});
+ } else {
+ this.props.onPlay();
+ if (this.state.touchstarted) {
+ // started on touch, but now clicked mouse
+ this.setState({touchStarted: false});
+ }
+ }
+ }
+ handleTouchStart (e) {
+ if (this.props.isPlaying) {
+ // If playing, stop sound, and reset touch state
+ e.preventDefault();
+ this.setState({touchStarted: false});
+ this.props.onStop();
+ } else {
+ // otherwise start playing, and set touch state
+ e.preventDefault();
+ this.setState({touchStarted: true});
+ this.props.onPlay();
+ }
+ }
+ handleMouseEnter (e) {
+ // start the sound if it's not already playing
+ e.preventDefault();
+ if (!this.props.isPlaying) {
+ this.props.onPlay();
+ }
+ }
+ handleMouseLeave () {
+ // stop the sound unless it was started by touch
+ if (this.props.isPlaying && !this.state.touchstarted) {
+ this.props.onStop();
+ }
+ }
+ setButtonRef (ref) {
+ this.buttonRef = ref;
+ }
+ render () {
+ const {
+ className,
+ isPlaying,
+ onPlay, // eslint-disable-line no-unused-vars
+ onStop // eslint-disable-line no-unused-vars
+ } = this.props;
+ return (
+ <PlayButtonComponent
+ className={className}
+ isPlaying={isPlaying}
+ onClick={this.handleClick}
+ onMouseDown={this.handleMouseDown}
+ onMouseEnter={this.handleMouseEnter}
+ onMouseLeave={this.handleMouseLeave}
+ setButtonRef={this.setButtonRef}
+ />
+ );
+ }
+}
+
+PlayButton.propTypes = {
+ className: PropTypes.string,
+ isPlaying: PropTypes.bool.isRequired,
+ onPlay: PropTypes.func.isRequired,
+ onStop: PropTypes.func.isRequired
+};
+
+export default PlayButton;
diff --git a/src/containers/sound-library.jsx b/src/containers/sound-library.jsx
index d3b9782d1a4eed68442deb3ba07b0ef7af3361f3..cdb5c7c6a1f4fdaa693d4c756710e5149027128c 100644
--- a/src/containers/sound-library.jsx
+++ b/src/containers/sound-library.jsx
@@ -7,8 +7,8 @@ import AudioEngine from 'scratch-audio';
import LibraryComponent from '../components/library/library.jsx';
-import soundIcon from '../components/asset-panel/icon--sound.svg';
-import soundIconRtl from '../components/asset-panel/icon--sound-rtl.svg';
+import soundIcon from '../components/library-item/lib-icon--sound.svg';
+import soundIconRtl from '../components/library-item/lib-icon--sound-rtl.svg';
import soundLibraryContent from '../lib/libraries/sounds.json';
import soundTags from '../lib/libraries/sound-tags';