<commit_before>var React = require('react')
var {PropTypes} = React;

var RefluxActions = require('../RefluxActions')

export default class VolumeControl extends React.Component {

  constructor(props) {
    super(props)

    this._skipClick = false;
    this.state = {
      volume: props.defaultVolume
    }

    this._mouseDownGrabber = this._mouseDownGrabber.bind(this)
    this._mouseMove = this._mouseMove.bind(this)
    this._mouseUp = this._mouseUp.bind(this)
    this._clickBar = this._clickBar.bind(this)

  }

  _clickBar(event) {
    if (this._skipClick) {
      this._skipClick = false
      return
    }
    this._setVolume(event.pageX)
  }

  _mouseDownGrabber(event) {
    document.addEventListener('mousemove', this._mouseMove)
    document.addEventListener('mouseup', this._mouseUp)
    document.body.classList.add('nohighlight')
  }

  _mouseMove(event) {
    this._setVolume(event.pageX)
  }

  _setVolume(mouseX) {
    var container = this.refs.container.getBoundingClientRect()
    var volume = (mouseX - container.left) / container.width
    if (volume < 0) { volume = 0 }
    if (volume > 1) { volume = 1 }

    RefluxActions.changeVolume(Math.pow(volume, 2))
    this.setState({
      volume: volume
    })
  }
  _mouseUp() {
    document.removeEventListener('mousemove', this._mouseMove)
    document.removeEventListener('mouseup', this._mouseUp)
    this._skipClick = true
    document.body.classList.remove('nohighlight')
  }
  render() {
    return (
      <div id='volume-container'
        ref="container"
        onClick={this._clickBar}>
        <div
          style={{<commit_msg>Reintroducing the preventDefault() call, as it fixes an issue where you could drag the volume grabber div and the drag would be interpreted as a native browser drag rather than via the logic we've written.<commit_after>var React = require('react')
var {PropTypes} = React;

var RefluxActions = require('../RefluxActions')

export default class VolumeControl extends React.Component {

  constructor(props) {
    super(props)

    this._skipClick = false;
    this.state = {
      volume: props.defaultVolume
    }

    this._mouseDownGrabber = this._mouseDownGrabber.bind(this)
    this._mouseMove = this._mouseMove.bind(this)
    this._mouseUp = this._mouseUp.bind(this)
    this._clickBar = this._clickBar.bind(this)

  }

  _clickBar(event) {
    if (this._skipClick) {
      this._skipClick = false
      return
    }
    this._setVolume(event.pageX)
  }

  _mouseDownGrabber(event) {
    document.addEventListener('mousemove', this._mouseMove)
    document.addEventListener('mouseup', this._mouseUp)
    document.body.classList.add('nohighlight')
  }

  _mouseMove(event) {
    event.preventDefault()
    this._setVolume(event.pageX)
  }

  _setVolume(mouseX) {
    var container = this.refs.container.getBoundingClientRect()
    var volume = (mouseX - container.left) / container.width
    if (volume < 0) { volume = 0 }
    if (volume > 1) { volume = 1 }

    RefluxActions.changeVolume(Math.pow(volume, 2))
    this.setState({
      volume: volume
    })
  }
  _mouseUp() {
    document.removeEventListener('mousemove', this._mouseMove)
    document.removeEventListener('mouseup', this._mouseUp)
    this._skipClick = true
    document.body.classList.remove('nohighlight')
  }
  render() {
    return (
      <div id='volume-container'
        ref="container"
        onClick={this._clickBar}>
        <div
          style={{
{'fraction_non_alphanumeric': 0.11778357992457208, 'fraction_numerical': 0.002901073397156948, 'mean_word_length': 3.215158924205379, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 7, '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': '7368761', 'n_tokens_mistral': 1091, 'n_tokens_neox': 1062, 'n_words': 204}