❗ DEPRECATED ❗

fdmg-ts-react-player-controls

ReactJS PlayerControls component. This component renders a PlayerControls component which consists of the previous, play/pause and next button.

Installation

• Run npm i --save-dev @fdmg/ts-react-player-controls

or

• Run yarn add @fdmg/ts-react-player-controls --dev

Usage

TypeScript

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}
				onPrevious={this.previous.bind(this)}
				onPlayPause={this.playPause.bind(this)}
				onNext={this.next.bind(this)}
				previousButtonImage="img/playercontrols/previous-button.svg"
				playPauseButtonImage="img/playercontrols/play-button.svg"
				nextButtonImage="img/playercontrols/next-button.svg"
			/>
		);
    }
}

Resulting HTML

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