Mirror the speaker icon for RTL languages

fixes #2983

src/components/gui/gui.css

@@ -132,11 +132,15 @@
     margin-left: 0.125rem;
 }
 
-/* only mirror blocks tab icon */
+/* mirror blocks and sound tab icons */
 [dir="rtl"] .tab:nth-of-type(1) img {
     transform: scaleX(-1);
 }
 
+[dir="rtl"] .tab:nth-of-type(3) img {
+    transform: scaleX(-1);
+}
+
 .tab.is-selected img {
     filter: none;
 }

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

@@ -149,6 +149,15 @@ $border-radius: 0.25rem;
     margin-bottom: -0.375rem;
 }
 
+/* mirror the louder/softer speaker icons when rtl */
+[dir="rtl"] .effect-button:nth-of-type(6) img {
+    transform: scaleX(-1);
+}
+
+[dir="rtl"] .effect-button:nth-of-type(7) img {
+    transform: scaleX(-1);
+}
+
 [dir="ltr"] .button-group {
     margin-left: 1rem;
 }

src/containers/sound-library.jsx

@@ -9,10 +9,13 @@ import analytics from '../lib/analytics';
 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 soundLibraryContent from '../lib/libraries/sounds.json';
 import soundTags from '../lib/libraries/sound-tags';
 
+import {connect} from 'react-redux';
+
 const messages = defineMessages({
     libraryTitle: {
         defaultMessage: 'Choose a Sound',
@@ -137,7 +140,7 @@ class SoundLibrary extends React.PureComponent {
             } = sound;
             return {
                 _md5: md5,
-                rawURL: soundIcon,
+                rawURL: this.props.isRtl ? soundIconRtl : soundIcon,
                 ...otherData
             };
         });
@@ -159,9 +162,19 @@ class SoundLibrary extends React.PureComponent {
 
 SoundLibrary.propTypes = {
     intl: intlShape.isRequired,
+    isRtl: PropTypes.bool,
     onNewSound: PropTypes.func.isRequired,
     onRequestClose: PropTypes.func,
     vm: PropTypes.instanceOf(VM).isRequired
 };
 
-export default injectIntl(SoundLibrary);
+const mapStateToProps = state => ({
+    isRtl: state.locales.isRtl
+});
+
+const mapDispatchToProps = () => ({});
+
+export default injectIntl(connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(SoundLibrary));

src/containers/sound-tab.jsx

@@ -6,6 +6,7 @@ import VM from 'scratch-vm';
 
 import AssetPanel from '../components/asset-panel/asset-panel.jsx';
 import soundIcon from '../components/asset-panel/icon--sound.svg';
+import soundIconRtl from '../components/asset-panel/icon--sound-rtl.svg';
 import addSoundFromLibraryIcon from '../components/asset-panel/icon--add-sound-lib.svg';
 import addSoundFromRecordingIcon from '../components/asset-panel/icon--add-sound-record.svg';
 import fileUploadIcon from '../components/action-menu/icon--file-upload.svg';
@@ -158,6 +159,7 @@ class SoundTab extends React.Component {
         const {
             dispatchUpdateRestore, // eslint-disable-line no-unused-vars
             intl,
+            isRtl,
             vm,
             onNewSoundFromLibraryClick,
             onNewSoundFromRecordingClick
@@ -171,7 +173,7 @@ class SoundTab extends React.Component {
 
         const sounds = sprite.sounds ? sprite.sounds.map(sound => (
             {
-                url: soundIcon,
+                url: isRtl ? soundIconRtl : soundIcon,
                 name: sound.name,
                 details: (sound.sampleCount / sound.rate).toFixed(2),
                 dragPayload: sound
@@ -259,6 +261,7 @@ SoundTab.propTypes = {
     dispatchUpdateRestore: PropTypes.func,
     editingTarget: PropTypes.string,
     intl: intlShape,
+    isRtl: PropTypes.bool,
     onActivateCostumesTab: PropTypes.func.isRequired,
     onNewSoundFromLibraryClick: PropTypes.func.isRequired,
     onNewSoundFromRecordingClick: PropTypes.func.isRequired,
@@ -282,6 +285,7 @@ SoundTab.propTypes = {
 
 const mapStateToProps = state => ({
     editingTarget: state.scratchGui.targets.editingTarget,
+    isRtl: state.locales.isRtl,
     sprites: state.scratchGui.targets.sprites,
     stage: state.scratchGui.targets.stage,
     soundLibraryVisible: state.scratchGui.modals.soundLibrary,