tlaternet-templates/src/music/components/indicator.tsx

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);