70 lines
1.6 KiB
TypeScript
70 lines
1.6 KiB
TypeScript
import React from "react";
|
|
import { connect } from "react-redux";
|
|
import classNames from "classnames";
|
|
|
|
import { Dispatch, State } from "../store";
|
|
import { 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, State> {
|
|
render() {
|
|
const button_classes = classNames({
|
|
button: true,
|
|
"is-primary": true,
|
|
"level-item": true,
|
|
// TODO(tlater): Add loading logic here
|
|
});
|
|
|
|
const icon_classes = classNames({
|
|
fas: true,
|
|
"fa-2x": true,
|
|
"fa-muted": this.props.muted,
|
|
"fa-play": !this.props.playing,
|
|
"fa-pause": this.props.playing,
|
|
});
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={this.click}
|
|
className={button_classes}
|
|
>
|
|
<span className="icon is-medium">
|
|
<i className={icon_classes}></i>
|
|
</span>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
click = () => {
|
|
this.props.play();
|
|
};
|
|
}
|
|
|
|
function mapStateToProps(state: State): IndicatorProps {
|
|
return {
|
|
muted: state.musicState.muted,
|
|
playing: state.musicState.playing,
|
|
};
|
|
}
|
|
|
|
function mapDispatchToProps(dispatch: Dispatch): IndicatorDispatch {
|
|
return {
|
|
play: () => {
|
|
dispatch(togglePlay());
|
|
},
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Indicator);
|