<commit_before>﻿import React from 'react';
import moment from 'moment';
import {
    IconButton
}
from 'material-ui';


import PlayerStore from '../store';
import PlayerActions from '../actions';

export
default React.createClass({
    getInitialState() {
        return {
            fullscreen: PlayerStore.getState().fullscreen,
            uiShown: PlayerStore.getState().uiShown,

            playing: PlayerStore.getState().playing,
            position: PlayerStore.getState().position,
            buffering: PlayerStore.getState().buffering,
            time: PlayerStore.getState().time,
            length: PlayerStore.getState().length
        }
    },
    componentWillMount() {
        PlayerStore.listen(this.update);
    },
    componentWillUnmount() {
        PlayerStore.unlisten(this.update);
    },
    update() {
        this.setState({
            fullscreen: PlayerStore.getState().fullscreen,
            uiShown: PlayerStore.getState().uiShown,

            playing: PlayerStore.getState().playing,
            position: PlayerStore.getState().position,
            buffering: PlayerStore.getState().buffering,
            time: PlayerStore.getState().time,
            length: PlayerStore.getState().length
        });
    },
    handlePausePlay() {
        if (!this.state.buffering)
            this.state.playing ? PlayerActions.pause() : PlayerActions.play();
    },
    handleFullscreen() {
        PlayerActions.toggleFullscreen(!this.state.fullscreen);
    },
    handleScrobblerHover(event) {

        var total_time = this.state.length;

        var percent_done = event.pageX / document.body.clientWidth;

        var newTime = total_time * percent_done;
        this.refs['scrobbler-handle'].style.left = (percent_done * 100) + '%';
        //console.log(total_time, percent_done + '%', newTime);

    },
    handleScrobble(event) {
        if (!this.state.length)
            return;
        var percent_done = event.pageX / document.body.clientWidth;
        PlayerActions.scrobble(this.state.length * percent_done);
    },
    handleDragStart() {
        this.refs['scrobbler-handle'].style.opacity = 1;
    },
    handleDragEnd() {
        this.refs['scrobbler-handle'].style.opacity = 0;
    },
    render() {
        var scrobblerStyles = {
            time: {
                width: this.state.position * 100 + '%'
            }
        };
        return (
            <div className={this.state.uiShown ? 'control-bar show' : 'control-bar'}>
                <div onMouseUp={this.handleScrobble} onMouseDown={this.handleDragStart} onMouseOut={this.handleDragEnd} onMouseMove={this.handleScrobblerHover} className="scrobbler">    
                    <div className="buffer"/>
                    <div style={scrobblerStyles.time} className="time"/>
                    <div ref="scrobbler-handle" className="handle"/>
                </div>
                <IconButton onClick={this.handlePausePlay} iconClassName="material-icons" iconStyle={{color: 'white', fontSize: '35px', top: '-5px', left: '-1px'}} className="play-toggle">{this.state.playing ? 'pause' : 'play_arrow'}</IconButton><commit_msg>delay showing handle<commit_after>﻿import React from 'react';
import moment from 'moment';
import _ from 'lodash';
import {
    IconButton
}
from 'material-ui';


import PlayerStore from '../store';
import PlayerActions from '../actions';

export
default React.createClass({
    getInitialState() {
        return {
            fullscreen: PlayerStore.getState().fullscreen,
            uiShown: PlayerStore.getState().uiShown,

            scrobbling: false,
            playing: PlayerStore.getState().playing,
            position: PlayerStore.getState().position,
            buffering: PlayerStore.getState().buffering,
            time: PlayerStore.getState().time,
            length: PlayerStore.getState().length
        }
    },
    componentWillMount() {
        PlayerStore.listen(this.update);
    },
    componentWillUnmount() {
        PlayerStore.unlisten(this.update);
    },
    update() {
        this.setState({
            fullscreen: PlayerStore.getState().fullscreen,
            uiShown: PlayerStore.getState().uiShown,

            playing: PlayerStore.getState().playing,
            position: PlayerStore.getState().position,
            buffering: PlayerStore.getState().buffering,
            time: PlayerStore.getState().time,
            length: PlayerStore.getState().length
        });
    },
    handlePausePlay() {
        if (!this.state.buffering)
            this.state.playing ? PlayerActions.pause() : PlayerActions.play();
    },
    handleFullscreen() {
        PlayerActions.toggleFullscreen(!this.state.fullscreen);
    },
    handleScrobblerHover(event) {

        var total_time = this.state.length;

        var percent_done = event.pageX / document.body.clientWidth;

        var newTime = total_time * percent_done;
        this.refs['scrobbler-handle'].style.left = (percent_done * 100) + '%';
        //console.log(total_time, percent_done + '%', newTime);

    },
    handleScrobble(event) {
        if (!this.state.length)
            return;
        var percent_done = event.pageX / document.body.clientWidth;
        PlayerActions.scrobble(this.state.length * percent_done);
    },
    handleDragStart() {

        this.setState({
            scrobbling: true
        });

        _.delay((still) => {
            if (still)
                this.refs['scrobbler-handle'].style.opacity = 1;
        }, 100, this.state.scrobbling)
    },
    handleDragEnd() {
        this.setState({
            scrobbling: false
        });
        this.refs['scrobbler-handle'].style.opacity = 0;
    },
    render() {
        var scrobblerStyles = {
            time: {
                width: this.state.position * 100 + '%'
            }
        };
        return (
            <div className={this.state.uiShown ? 'control-bar show' : 'control-bar'}>
                <div onMouseUp={this.handleScrobble} onMouseDown={this.handleDragStart} onMouseOut={this.handleDragEnd} onMouseMove={this.handleScrobblerHover} className="scrobbler">    
                    <div className="buffer"/>
                    <div style={scrobblerStyles.time} className="time"/>
                    <div ref="scrobbler-handle" className="handle"/>
                </div>
                <IconButton onClick={this.handlePausePlay} iconClassName="material-icons" iconStyle={{color: 'white', fontSize: '35px', top: '-5px', left: '-1px'}} className="play-toggle">{this.state.playing ? 'pause' : 'play_arrow'}</IconButton>
{'fraction_non_alphanumeric': 0.13221884498480244, 'fraction_numerical': 0.004103343465045593, 'mean_word_length': 2.3170362903225805, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 20, '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': '7314796', 'n_tokens_mistral': 1879, 'n_tokens_neox': 1819, 'n_words': 303}