Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/FoxxMD/multi-scrobbler. Scrobble plays from multiple sources to multiple clients docs.multi-scrobbler.app
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112import React from "react";import './controls.scss';
export interface ControlsProps { isPlaying: boolean isLiked: boolean prevTrack: () => any togglePlay: () => any nextTrack: () => any likeTrack: () => any}
const Controls = (props: ControlsProps) => { let playClass = "fa fa-fw "; if (!props.isPlaying) { playClass += "fa-play"; } else { playClass += "fa-pause"; }
let likeClass = "button like "; let heartClass = "fa fa-fw "; if (!props.isLiked) { heartClass += "fa-heart-o"; } else { likeClass += "is-liked"; heartClass += "fa-heart"; }
return( <div className="controls"> <button type="button" className="button repeat"> <span className="icon"> <i className="fa fa-fw fa-repeat"></i> </span> </button> <button type="button" className="button prev" onClick={props.prevTrack}> <span className="icon"> <i className="fa fa-fw fa-step-backward"></i> </span> </button> <button type="button" className="button play" onClick={props.togglePlay}> <span className="icon"> <i className={playClass}></i> </span> </button> <button type="button" className="button next" onClick={props.nextTrack}> <span className="icon"> <i className="fa fa-fw fa-step-forward"></i> </span> </button> <button type="button" className={likeClass} onClick={props.likeTrack}> <span className="icon"> <i className={heartClass}></i> </span> </button> </div> );}
/*export class ControlsC extends React.Component { render() { let playClass = "fa fa-fw "; if (!this.props.isPlaying) { playClass += "fa-play"; } else { playClass += "fa-pause"; }
let likeClass = "button like "; let heartClass = "fa fa-fw "; if (!this.props.isLiked) { heartClass += "fa-heart-o"; } else { likeClass += "is-liked"; heartClass += "fa-heart"; }
return( <div className="controls"> <button type="button" className="button repeat"> <span className="icon"> <i className="fa fa-fw fa-repeat"></i> </span> </button> <button type="button" className="button prev" onClick={this.props.prevTrack}> <span className="icon"> <i className="fa fa-fw fa-step-backward"></i> </span> </button> <button type="button" className="button play" onClick={this.props.togglePlay}> <span className="icon"> <i className={playClass}></i> </span> </button> <button type="button" className="button next" onClick={this.props.nextTrack}> <span className="icon"> <i className="fa fa-fw fa-step-forward"></i> </span> </button> <button type="button" className={likeClass} onClick={this.props.likeTrack}> <span className="icon"> <i className={heartClass}></i> </span> </button> </div> ); }}*/
export default Controls;