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

import React from "react";
import Redux from "redux";
import { connect } from "react-redux";

import { State } from "../store";
import { Title, togglePlay } from "../store/music/types";
import Indicator from "./indicator";

type ControlProps = {
  title: Title;
};

class Controls extends React.Component<ControlProps, {}> {
  render() {
    return (
      <div id="playerControls" className="container-fluid fixed-bottom">
        <div className="row">
          <Indicator></Indicator>
          <div
            id="playerText"
            className="text-justify text-truncate col-6 playerControlsContent"
          >
            {this.props.title.name} - {this.props.title.album}
          </div>

          {this.props.title.name === "Journey" &&
          this.props.title.artist === "Mseq" ? (
            <div id="copyrightNotice" className="col text-center">
              <a href="http://dig.ccmixter.org/files/Mseq/54702">Journey</a>
              &nbsp;by Mseq (c) copyright 2016 Licensed under a Creative
              Commons&nbsp;
              <a href="http://creativecommons.org/licenses/by-nc/3.0/">
                Attribution Noncommercial (3.0)
              </a>
              &nbsp; license. Ft: Admiral Bob,Texas Radio Fish
            </div>
          ) : null}
        </div>
      </div>
    );
  }
}

function mapStateToProps(state: State): ControlProps {
  return {
    title: state.musicState.title,
  };
}

export default connect(mapStateToProps)(Controls);