<commit_before>import React, { Component } from 'react';
import Controls from './Controls';
import styles from './Player.css';
import SPlayer from '../utils/SPlayer';

const player = new SPlayer({ debug: true });

class Player extends Component {
  constructor() {
    super();
    this.state = { progress: 0 };
  }

  componentDidMount() {
    document.addEventListener('dragover', e => e.preventDefault());
    document.addEventListener('drop', this.onDrop);
    player.renderVideo(this.playerCanvas);
    player.addEventListener('onPositionChanged', (position) => {
      this.setState({
        progress: (position * 100)
      });
    });
  }

  componentWillUnmount() {
    document.removeEventListener('dragover', e => e.preventDefault());
    document.removeEventListener('drop', this.onDrop);
  }

  onDrop = (e) => {
    e.preventDefault();
    player.play(`file://${e.dataTransfer.files[0].path}`);
  };

  render() {
    return (
      <div>
        <Controls progress={this.state.progress} togglePause={player.togglePause}/>
        <canvas
          className={styles.player}
          ref={(playerCanvas) => { this.playerCanvas = playerCanvas; }}
          id="splayer"
        />
      </div>
    );<commit_msg>making thing reduxed<commit_after>import React, { Component } from 'react';
import Controls from './Controls';
import styles from './Player.css';


class Player extends Component {
  constructor() {
    super();
    this.state = { progress: 0 };
  }

  componentDidMount() {
    document.addEventListener('dragover', e => e.preventDefault());
    document.addEventListener('drop', this.onDrop);
    this.props.renderVideo(this.playerCanvas);
  }

  componentWillUnmount() {
    document.removeEventListener('dragover', e => e.preventDefault());
    document.removeEventListener('drop', this.onDrop);
  }

  onDrop = (e) => {
    e.preventDefault();
    this.props.play(`file://${e.dataTransfer.files[0].path}`);
  };

  render() {
    return (
      <div>
        <Controls progress={this.state.progress}/>
        <canvas
          className={styles.player}
          ref={(playerCanvas) => { this.playerCanvas = playerCanvas; }}
          id="splayer"
        />
      </div>
    );
{'fraction_non_alphanumeric': 0.1614654002713704, 'fraction_numerical': 0.003165988240615106, 'mean_word_length': 3.0661764705882355, 'pattern_counts': {'":': 0, '<': 11, '<?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': '7452465', 'n_tokens_mistral': 637, 'n_tokens_neox': 629, 'n_words': 121}