Type Balance

js/actionCreators/index.ts

@@ -3,7 +3,9 @@ import {
   STOP,
   TOGGLE_VISUALIZER_STYLE,
   CLOSE_REQUESTED,
-  MINIMIZE_WINAMP
+  MINIMIZE_WINAMP,
+  SET_FOCUS,
+  UNSET_FOCUS
 } from "../actionTypes";
 import { Dispatchable } from "../types";
 
@@ -98,3 +100,11 @@ export function toggleVisualizerStyle(): Dispatchable {
 export function minimize(): Dispatchable {
   return { type: MINIMIZE_WINAMP };
 }
+
+export function setFocus(input: string): Dispatchable {
+  return { type: SET_FOCUS, input };
+}
+
+export function unsetFocus(): Dispatchable {
+  return { type: UNSET_FOCUS };
+}

js/components/Balance.js

@@ -1,33 +0,0 @@
-import React from "react";
-import { connect } from "react-redux";
-
-import { setBalance } from "../actionCreators";
-import { SET_FOCUS, UNSET_FOCUS } from "../actionTypes";
-
-const Balance = props => (
-  <input
-    id={props.id}
-    className={props.className}
-    type="range"
-    min="-100"
-    max="100"
-    step="1"
-    value={props.balance}
-    style={props.style}
-    onChange={props.handleChange}
-    onMouseDown={props.showMarquee}
-    onMouseUp={props.hideMarquee}
-    title="Balance"
-  />
-);
-
-const mapDispatchToProps = dispatch => ({
-  handleChange: e => dispatch(setBalance(e.target.value)),
-  showMarquee: () => dispatch({ type: SET_FOCUS, input: "balance" }),
-  hideMarquee: () => dispatch({ type: UNSET_FOCUS })
-});
-
-export default connect(
-  state => ({ balance: state.media.balance }),
-  mapDispatchToProps
-)(Balance);

js/components/Balance.tsx

@@ -0,0 +1,49 @@
+import React, { ChangeEvent } from "react";
+import { connect } from "react-redux";
+
+import { setBalance } from "../actionCreators";
+import * as Actions from "../actionCreators";
+import { Dispatch, AppState } from "../types";
+import * as Selectors from "../selectors";
+
+interface Props {
+  id?: string;
+  balance: number;
+  showMarquee(): void;
+  hideMarquee(): void;
+  setBalance(e: ChangeEvent<HTMLInputElement>): void;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+const Balance = (props: Props) => (
+  <input
+    id={props.id}
+    className={props.className}
+    type="range"
+    min="-100"
+    max="100"
+    step="1"
+    value={props.balance}
+    style={props.style}
+    onChange={props.setBalance}
+    onMouseDown={props.showMarquee}
+    onMouseUp={props.hideMarquee}
+    title="Balance"
+  />
+);
+
+const mapStateToProps = (state: AppState) => ({
+  balance: Selectors.getBalance(state)
+});
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  setBalance: (e: ChangeEvent<HTMLInputElement>) =>
+    dispatch(setBalance(Number((e.target as HTMLInputElement).value))),
+  showMarquee: () => dispatch(Actions.setFocus("balance")),
+  hideMarquee: () => dispatch(Actions.unsetFocus())
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Balance);

js/components/Volume.tsx

@@ -1,9 +1,7 @@
 import React, { ChangeEvent } from "react";
 import { connect } from "react-redux";
-import { setVolume } from "../actionCreators";
-
-import { SET_FOCUS, UNSET_FOCUS } from "../actionTypes";
 import { AppState, Dispatch } from "../types";
+import * as Actions from "../actionCreators";
 import * as Selectors from "../selectors";
 
 interface Props {
@@ -38,10 +36,10 @@ const mapStateToProps = (state: AppState) => ({
 });
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
-  showMarquee: () => dispatch({ type: SET_FOCUS, input: "volume" }),
-  hideMarquee: () => dispatch({ type: UNSET_FOCUS }),
+  showMarquee: () => dispatch(Actions.setFocus("volume")),
+  hideMarquee: () => dispatch(Actions.unsetFocus()),
   setVolume: (e: ChangeEvent<HTMLInputElement>) =>
-    dispatch(setVolume(Number((e.target as HTMLInputElement).value)))
+    dispatch(Actions.setVolume(Number((e.target as HTMLInputElement).value)))
 });
 
 export default connect(

js/selectors.ts

@@ -400,5 +400,6 @@ export const getVisualizerStyle = (state: AppState) =>
   fromDisplay.getVisualizerStyle(state.display);
 
 export const getVolume = (state: AppState) => state.media.volume;
+export const getBalance = (state: AppState) => state.media.balance;
 
 export const getChannels = (state: AppState) => state.media.channels;