import * as React from 'react';
import PlayerControls from 'fdmg-ts-react-player-controls';

export default class foo {
    public state: any;
    public props: any;

    constructor(props: any) {
        super(props);
        this.props = props;
    }

    previous() {
        console.info('Previous button clicked');
    }

    playPause() {
        console.info('Play/Pause button clicked');
    }

    next() {
        console.info('Next button clicked');
    }
	
    render() {
        return (<PlayerControls
				className="player-controls"
				showPreviousButton={true}
				showPlayPauseButton={true}
				showNextButton={true}
				
				
				
				previousButtonImage="img/playercontrols/previous-button.svg"
				playPauseButtonImage="img/playercontrols/play-button.svg"
				nextButtonImage="img/playercontrols/next-button.svg"
			/>
		);
    }
}

<div class="player-controls">
    <span class="previous-button"
          role="button"
          tabIndex="0"
          aria-label="previous button">
        <img src="img/playercontrols/previous-button.svg" alt="previous button">
    </span>
    <span class="playpause-button"
          role="button"
          tabIndex="0"
          aria-label="play/pause button">
        <img src="img/playercontrols/play-button.svg" alt="play/pause button" class="playpause-button">
    </span>
    <span class="next-button"
          role="button"
          tabIndex="0"
          aria-label="next button">
    	<img src="img/playercontrols/next-button.svg" alt="next button" class="next-button">
    </span>
</div>