Switch to react-redux for the music player

src/music/components/indicator.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { connect } from "react-redux";
+import classNames from "classnames";
+
+import { State } from "../store";
+import { MusicState, togglePlay } from "../store/music/types";
+
+type IndicatorProps = {
+  muted: boolean;
+  playing: boolean;
+};
+
+type IndicatorDispatch = {
+  play: () => void;
+};
+
+type Props = IndicatorProps & IndicatorDispatch;
+
+class Indicator extends React.Component<Props, {}> {
+  click() {
+    this.props.play();
+  }
+
+  render() {
+    let classes = classNames({
+      "col-auto": true,
+      "text-center": true,
+      fas: true,
+      "fa-muted": this.props.muted,
+      "fa-play": this.props.playing,
+      "fa-pause": !this.props.playing,
+    });
+
+    return (
+      <div
+        id="playerIndicator"
+        onClick={this.click.bind(this)}
+        className={classes}
+      ></div>
+    );
+  }
+}
+
+function mapStateToProps(state: State): IndicatorProps {
+  return {
+    muted: state.musicState.muted,
+    playing: state.musicState.playing,
+  };
+}
+
+function mapDispatchToProps(dispatch: Redux.Dispatch<any>): IndicatorDispatch {
+  return {
+    play: () => {
+      dispatch(togglePlay());
+    },
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Indicator);