<commit_before>/*jshint esnext: true*/
'use strict';

import React from 'react';
import {actions} from '../../api';

import Info from './Info.jsx';
import Actions from './Actions.jsx';
import ProgressBar from './ProgressBar.jsx';

export default class Player extends React.Component {
    render() {
        let playerContent = this.props.song ?
                [React.createElement(Info, {song: this.props.song}),
                 React.createElement(Actions, {
                     isPlaying: this.props.isPlaying,
                     onClickPrevious: actions.previous,
                     onClickNext: actions.next,
                     onClickPlay: actions.play,
                     onClickPause: actions.pause
                 }),
                 React.createElement(ProgressBar, {
                     isPlaying: this.props.isPlaying,
                     song: this.props.song,
                     onClick: actions.seek<commit_msg>reactive ui for play/pause button<commit_after>/*jshint esnext: true*/
'use strict';

import React from 'react';
import {actions} from '../../api';

import Info from './Info.jsx';
import Actions from './Actions.jsx';
import ProgressBar from './ProgressBar.jsx';

export default class Player extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            // I use a state 'isPlaying' local to this component for
            // reactive UI.
            // http://en.wikipedia.org/wiki/Reactive_user_interface
            // The idea is to update the UI, then call the api and
            // change back to previous state if it didn't work.
            isPlaying: false
        };
    }

    optimisticUpdate(newState, fn) {
        this.setState({isPlaying: newState === 'play'});
        if (fn) {
            fn.call();
        }
    }

    componentWillReceiveProps(nextProps) {
        this.setState({isPlaying: nextProps.isPlaying});
    }

    componentDidMount() {
        this.setState({isPlaying: this.props.isPlaying});
    }

    render() {
        let playerContent = this.props.song ?
                [React.createElement(Info, {song: this.props.song}),
                 React.createElement(Actions, {
                     isPlaying: this.state.isPlaying,
                     onClickPrevious: actions.previous,
                     onClickNext: actions.next,
                     onClickPlay: this.optimisticUpdate.bind(
                         this, 'play', actions.play
                     ),
                     onClickPause: this.optimisticUpdate.bind(
                         this, 'pause', actions.pause
                     )
                 }),
                 React.createElement(ProgressBar, {
                     isPlaying: this.state.isPlaying,
                     song: this.props.song,
                     onClick: actions.seek
{'fraction_non_alphanumeric': 0.1056140350877193, 'fraction_numerical': 0.0, 'mean_word_length': 1.6204044117647058, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1986409', 'n_tokens_mistral': 736, 'n_tokens_neox': 701, 'n_words': 174}