Music blocks rtl fixes (#10601)

* Gallery arrow key nav in RTL languages

* RTL Layout issues in Sound Effect editor

Author: glastonbridge

pxtlib/melody-editor/melodyGallery.ts

@@ -62,6 +62,8 @@ namespace pxtmelody {
                 return;
             }
             const [x, y] = this.selectedColRow;
+            const arrowToSelection = pxt.Util.isUserLanguageRtl() ? "ArrowRight" : "ArrowLeft";
+            const arrowToPreview = pxt.Util.isUserLanguageRtl() ? "ArrowLeft" : "ArrowRight";
             switch(e.code) {
                 case "ArrowUp": {
                     this.selectedColRow = [x, Math.max(0, y - 1)];
@@ -71,11 +73,11 @@ namespace pxtmelody {
                     this.selectedColRow = [x, Math.min(this.selectionButtons.length - 1, y + 1)];
                     break;
                 }
-                case "ArrowLeft": {
+                case arrowToSelection: {
                     this.selectedColRow = [Math.max(0, x - 1), y];
                     break;
                 }
-                case "ArrowRight": {
+                case arrowToPreview: {
                     // Only two columns.
                     this.selectedColRow = [Math.min(1, x + 1), y];
                     break;

react-common/components/controls/DraggableGraph.tsx

@@ -173,6 +173,8 @@ export const DraggableGraph = (props: DraggableGraphProps) => {
                     !isNotLast && getValue(index - 1) > getValue(index)
                 );
 
+                const textAnchor = (isNotLast !== pxt.Util.isUserLanguageRtl()) ? "start" : "end"
+
                 return <g key={index} className="draggable-graph-column">
                         {isNotLast &&
                             <path
@@ -216,7 +218,7 @@ export const DraggableGraph = (props: DraggableGraphProps) => {
                             className="common-draggable-graph-text"
                             x={isNotLast ? x + unit * 2 : x - unit}
                             y={shouldFlipLabel ? y + unit * 2 : Math.max(y - unit, unit)}
-                            textAnchor={isNotLast ? "start" : "end"}
+                            textAnchor={textAnchor}
                             fontSize={unit}>
                             {Math.round(getValue(index)) + (valueUnits || "")}
                         </text>

theme/soundeffecteditor.less

@@ -202,6 +202,12 @@
     }
 }
 
+.rtl .common-button.sound-effect-play-button {
+    .fas.fa-play, .fas.fa-stop {
+        margin: 0 0.25rem 0 0;
+    }
+}
+
 .common-button.sound-effect-play-button:focus-visible {
     outline: 3px solid var(--pxt-focus-border);
     outline-offset: 3px;

webapp/src/components/soundEffectEditor/SoundGallery.tsx

@@ -43,17 +43,19 @@ export const SoundGallery = (props: SoundGalleryProps) => {
         next: number,
         current: number,
         e: React.KeyboardEvent<HTMLElement>) => {
+        const arrowToSelection = pxt.Util.isUserLanguageRtl() ? "ArrowRight" : "ArrowLeft";
+        const arrowToPreview = pxt.Util.isUserLanguageRtl() ? "ArrowLeft" : "ArrowRight";
         switch(e.code) {
             case "ArrowDown":
                 selectedCoord.current.row = next;
                 break;
             case "ArrowUp":
                 selectedCoord.current.row = prev;
                 break;
-            case "ArrowLeft":
+            case arrowToSelection:
                 selectedCoord.current.col = "select";
                 break;
-            case "ArrowRight":
+            case arrowToPreview:
                 selectedCoord.current.col = "preview";
                 break;
             case "Space":