Scrubber: Change component order

less/scrubber.less

@@ -45,7 +45,7 @@
 	position: relative;
 	flex: 1;
 	background-color: white;
-	margin: 0 @scrubber-component-margin;
+	margin: 0 @scrubber-component-margin 0 0;
 	height: 100%;
 	width: 100%;
 	border: solid @scrubber-inactive-border-width @scrubber-inactive-border-color;

ts/components/Scrubber.tsx

@@ -148,28 +148,31 @@ class Scrubber extends React.Component<ScrubberProps, ScrubberState> {
 				<i className="joust-fa joust-fa-eye"></i>
 			</button>;
 
+		var rewind = <button onClick={this.rewind.bind(this) } disabled={!this.state.canRewind} title="Rewind">
+			<i className="joust-fa joust-fa-fast-backward"></i>
+		</button>;
+
+		var swap = <button onClick={this.props.swapPlayers} disabled={!this.state.canInteract} title="Swap players">
+			<i className="joust-fa joust-fa-unsorted"></i>
+		</button>;
+
 		return (
 			<div className="joust-scrubber">
 				{playpause}
-				<button onClick={this.rewind.bind(this) } disabled={!this.state.canRewind} title="Rewind">
-					<i className="joust-fa joust-fa-fast-backward"></i>
-				</button>
+				<SpeedSelector speed={this.state.speed}
+							   speeds={[1, 1.5, 2, 4, 8, 16]}
+							   selectSpeed={this.selectSpeed}
+							   disabled={!this.state.canInteract}
+				/>
 				<Timeline duration={this.props.scrubber.getDuration() }
 					at={this.props.scrubber.getCurrentTime() }
 					seek={this.props.scrubber.seek.bind(this.props.scrubber) }
 					turnMap={this.props.scrubber.getHistory().turnMap}
 					swapPlayers={this.props.isSwapped}
 					ref={(inhibitor) => this.props.scrubber.setInhibitor(inhibitor) }
 					/>
-				<SpeedSelector speed={this.state.speed}
-					speeds={[1, 1.5, 2, 4, 8, 16]}
-					selectSpeed={this.selectSpeed}
-					disabled={!this.state.canInteract}
-					/>
+				{swap}
 				{reveal}
-				<button onClick={this.props.swapPlayers} disabled={!this.state.canInteract} title="Swap players">
-					<i className="joust-fa joust-fa-unsorted"></i>
-				</button>
 				{fullscreen}
 			</div>
 		);