60 lines
1.2 KiB
TypeScript
60 lines
1.2 KiB
TypeScript
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);
|