<commit_before>import React, {Component, PropTypes} from 'react'
import IconButton from 'material-ui/IconButton'
import Popover from 'material-ui/Popover'
import Slider from 'material-ui/Slider'
import VolumeUpIcon from 'material-ui/svg-icons/av/volume-up'
import VolumeDownIcon from 'material-ui/svg-icons/av/volume-down'
import VolumeMuteIcon from 'material-ui/svg-icons/av/volume-mute'
import muiThemeable from 'material-ui/styles/muiThemeable'

@muiThemeable()
export default class Volume extends Component {
  static propTypes = {
    initialValue: PropTypes.number,
    onChange: PropTypes.func,
    muiTheme: PropTypes.object.isRequired
  }

  state = {
    value: this.props.initialValue,
    popover: false,
    popoverAnchor: null
  }

  getVolumeIcon() {
    return [
      VolumeMuteIcon, VolumeDownIcon, VolumeUpIcon
    ][Math.ceil(this.state.value * 2)]
  }

  onPopoverOpen = (event) => {
    event.preventDefault()
    this.setState({popover: true, popoverAnchor: event.currentTarget})
  }

  onPopoverClose = (event) => {
    this.setState({popover: false, popoverAnchor: null})
  }

  onVolumeChange = (event, value) => {
    this.setState({value})
    this.props.onChange(value)
  }

  render() {
    const AvVolume = this.getVolumeIcon()
    const style = this.generateStyle()
    return (
      <IconButton
        touchRippleColor={this.props.muiTheme.appBar.textColor}
        onTouchTap={this.onPopoverOpen}
      >
        <AvVolume color={this.props.muiTheme.appBar.textColor} />
        <Popover
          open={this.state.popover}
          anchorEl={this.state.popoverAnchor}
          anchorOrigin={{horizontal: 'right', vertical: 'bottom'}}
          targetOrigin={{horizontal: 'right', vertical: 'top'}}
          onRequestClose={this.onPopoverClose}
        >
          <Slider
            style={style.slider}
            sliderStyle={style.sliderInner}
            value={this.state.value}
            onChange={this.onVolumeChange}
          />
        </Popover>
      </IconButton>
    )
  }

  generateStyle() {
    return {
      slider: {
        width: this.props.muiTheme.slider.recommendedWidth,
        marginTop: this.props.muiTheme.slider.handleSizeActive / 2,
        marginBottom: this.props.muiTheme.slider.handleSizeActive / 2,
        marginLeft: this.props.muiTheme.slider.handleSizeActive,
        marginRight: this.props.muiTheme.slider.handleSizeActive
      },
      sliderInner: {
        margin: 0
      }
    }
  }
}<commit_msg>Add a naive mute button<commit_after>import React, {Component, PropTypes} from 'react'
import IconButton from 'material-ui/IconButton'
import Popover from 'material-ui/Popover'
import Slider from 'material-ui/Slider'
import VolumeUpIcon from 'material-ui/svg-icons/av/volume-up'
import VolumeDownIcon from 'material-ui/svg-icons/av/volume-down'
import VolumeMuteIcon from 'material-ui/svg-icons/av/volume-mute'
import muiThemeable from 'material-ui/styles/muiThemeable'

@muiThemeable()
export default class Volume extends Component {
  static propTypes = {
    initialValue: PropTypes.number,
    onChange: PropTypes.func,
    muiTheme: PropTypes.object.isRequired
  }

  state = {
    value: this.props.initialValue,
    lastValue: this.props.initialValue,
    popover: false,
    popoverAnchor: null
  }

  getVolumeIcon() {
    return [
      VolumeMuteIcon, VolumeDownIcon, VolumeUpIcon
    ][Math.ceil(this.state.value * 2)]
  }

  onPopoverOpen = (event) => {
    event.preventDefault()
    this.setState({popover: true, popoverAnchor: event.currentTarget})
  }

  onPopoverClose = (event) => {
    this.setState({popover: false, popoverAnchor: null})
  }

  onVolumeChange = (event, value) => {
    this.setState({value, lastValue: value})
    this.props.onChange(value)
  }

  onVolumeMute = (event) => {
    let value = this.state.value ? 0 : this.state.lastValue
    this.setState({value})
    this.props.onChange(value)
  }

  render() {
    const AvVolume = this.getVolumeIcon()
    const style = this.generateStyle()
    return (
      <IconButton
        touchRippleColor={this.props.muiTheme.appBar.textColor}
        onTouchTap={this.onPopoverOpen}
      >
        <AvVolume color={this.props.muiTheme.appBar.textColor} />
        <Popover
          open={this.state.popover}
          anchorEl={this.state.popoverAnchor}
          anchorOrigin={{horizontal: 'right', vertical: 'bottom'}}
          targetOrigin={{horizontal: 'right', vertical: 'top'}}
          onRequestClose={this.onPopoverClose}
        >
          <IconButton
            touchRippleColor={this.props.muiTheme.appBar.textColor}
            onTouchTap={this.onVolumeMute}
            style={style.mute}
          >
            <VolumeMuteIcon color={this.props.muiTheme.appBar.color} />
          </IconButton>
          <Slider
            style={style.slider}
            sliderStyle={style.sliderInner}
            value={this.state.value}
            onChange={this.onVolumeChange}
          />
        </Popover>
      </IconButton>
    )
  }

  generateStyle() {
    return {
      slider: {
        display: 'inline-block',
        width: this.props.muiTheme.slider.recommendedWidth,
        marginTop: 0,
        marginRight: this.props.muiTheme.slider.handleSizeActive,
        marginBottom: 3,
        marginLeft: 0
      },
      sliderInner: {
        margin: 0
      },
      mute: {
        width: 'auto',
        paddingRight: 5
      }
    }
  }
}
{'fraction_non_alphanumeric': 0.1181985294117647, 'fraction_numerical': 0.002022058823529412, 'mean_word_length': 2.7114597544338337, 'pattern_counts': {'":': 0, '<': 18, '<?xml version=': 0, '>': 25, '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': '1984571', 'n_tokens_mistral': 1694, 'n_tokens_neox': 1682, 'n_words': 291}