<commit_before>import React, { Component, PropTypes } from 'react';
import styles from '../chat.scss';
import MdClose from 'react-icons/lib/md/close';
import MdPlayArrow from 'react-icons/lib/md/play-arrow';
import MdStop from 'react-icons/lib/md/stop';
import MdCheck from 'react-icons/lib/md/check';
import ToolTip from '../utils/Tooltip';
import SpeechSelect from './SpeechSelect';

let lastSpoken = '';
let voiceName = '';
export default class SpeechSynthesis extends Component {
  static propTypes = {
    message: PropTypes.object,
    lang: PropTypes.string,
    voicesArr: PropTypes.array,
    isMine: PropTypes.bool
  };
  state = {
    isPlayTooltipActive: false
  };
  componentDidMount() {
    voiceName = this.props.voicesArr[0].name;
  }
  showPlayTooltip = () => {
    this.setState({ isPlayTooltipActive: !this.state.isPlayTooltipActive });
  };
  prepareForTranslation = (message) => {
    return message.replace(/(<([^>]+)>)/ig, '').replace(/\+/g, '');
  };
  play = (message, id) => {
    const msg = new SpeechSynthesisUtterance(this.prepareForTranslation(message));
    this.toggleIcons(this.playSpan.childNodes[0], this.playSpan.childNodes[1]);
    msg.onstart = (event) => {
      if (this.state.isPlayTooltipActive) {
        this.showPlayTooltip();
      }
    };
    const playBtn = this.playSpan.childNodes[0];
    const stopBtn = this.playSpan.childNodes[1];
    msg.onend = (event) => {
      this.toggleIcons(stopBtn, playBtn);
    };
    msg.onerror = (event) => {
      this.toggleIcons(stopBtn, playBtn);
    };
    const voices = window.speechSynthesis.getVoices();
    msg.voice = voices.filter(function (voice) { return voice.name === voiceName; })[0];
    window.speechSynthesis.speak(msg);
  };

  speak = (message, id, e) => {
    const node = e.currentTarget;
    if (this.playSpan.childNodes[1].style.visibility === 'hidden') {
      if (lastSpoken === id && this.props.voicesArr.length > 1) {
        if (this.speech) {
          this.speech.speechSelect.value = voiceName;
        }
        this.showPlayTooltip();
      } else {
        lastSpoken = id;
        this.play(message, id);
      }
    } else {
      this.toggleIcons(this.playSpan.childNodes[1], this.playSpan.childNodes[0]);
      window.speechSynthesis.cancel();
    }
  };
  speakFromTooltip = (message, id) => {
    voiceName = this.speech.speechSelect.value;
    this.play(message, id);
  };
  toggleIcons = (n1, n2) => {
    const node1 = n1;
    const node2 = n2;
    node1.style.visibility = 'hidden';
    node2.style.visibility = 'visible';
  };
  render() {
    const { message, lang, isMine } = this.props;
    return (
      <div>
        <div
          className={styles.playContainer}
          onClick={this.speak.bind(this, message.msg, message.id)}
          ref={(ref) => this.playSpan = ref}
          id={'play' + message.id}
        >
          <MdPlayArrow className={styles.playBtn}/>
          <MdStop style={{ visibility: 'hidden' }}/>
        </div>
        <ToolTip<commit_msg>Don't use inline binding<commit_after>import React, { Component, PropTypes } from 'react';
import styles from '../chat.scss';
import MdClose from 'react-icons/lib/md/close';
import MdPlayArrow from 'react-icons/lib/md/play-arrow';
import MdStop from 'react-icons/lib/md/stop';
import MdCheck from 'react-icons/lib/md/check';
import ToolTip from '../utils/Tooltip';
import SpeechSelect from './SpeechSelect';

let lastSpoken = '';
let voiceName = '';
export default class SpeechSynthesis extends Component {
  static propTypes = {
    message: PropTypes.object,
    lang: PropTypes.string,
    voicesArr: PropTypes.array,
    isMine: PropTypes.bool
  };
  state = {
    isPlayTooltipActive: false
  };
  componentDidMount() {
    voiceName = this.props.voicesArr[0].name;
  }
  mapRef = (node) => {
    this.playSpan = node;
  };
  showPlayTooltip = () => {
    this.setState({ isPlayTooltipActive: !this.state.isPlayTooltipActive });
  };
  prepareForTranslation = (message) => {
    return message.replace(/(<([^>]+)>)/ig, '').replace(/\+/g, '');
  };
  play = (message, id) => {
    const msg = new SpeechSynthesisUtterance(this.prepareForTranslation(message));
    this.toggleIcons(this.playSpan.childNodes[0], this.playSpan.childNodes[1]);
    msg.onstart = (event) => {
      if (this.state.isPlayTooltipActive) {
        this.showPlayTooltip();
      }
    };
    const playBtn = this.playSpan.childNodes[0];
    const stopBtn = this.playSpan.childNodes[1];
    msg.onend = (event) => {
      this.toggleIcons(stopBtn, playBtn);
    };
    msg.onerror = (event) => {
      this.toggleIcons(stopBtn, playBtn);
    };
    const voices = window.speechSynthesis.getVoices();
    msg.voice = voices.filter(function (voice) { return voice.name === voiceName; })[0];
    window.speechSynthesis.speak(msg);
  };

  speak = (message, id, e) => {
    const node = e.currentTarget;
    if (this.playSpan.childNodes[1].style.visibility === 'hidden') {
      if (lastSpoken === id && this.props.voicesArr.length > 1) {
        if (this.speech) {
          this.speech.speechSelect.value = voiceName;
        }
        this.showPlayTooltip();
      } else {
        lastSpoken = id;
        this.play(message, id);
      }
    } else {
      this.toggleIcons(this.playSpan.childNodes[1], this.playSpan.childNodes[0]);
      window.speechSynthesis.cancel();
    }
  };
  speakFromTooltip = (message, id) => {
    voiceName = this.speech.speechSelect.value;
    this.play(message, id);
  };
  toggleIcons = (n1, n2) => {
    const node1 = n1;
    const node2 = n2;
    node1.style.visibility = 'hidden';
    node2.style.visibility = 'visible';
  };
  render() {
    const { message, lang, isMine } = this.props;
    return (
      <div>
        <div
          className={styles.playContainer}
          onClick={this.speak.bind(this, message.msg, message.id)}
          ref={this.mapRef}
          id={'play' + message.id}
        >
          <MdPlayArrow className={styles.playBtn}/>
          <MdStop style={{ visibility: 'hidden' }}/>
        </div>
        <ToolTip
{'fraction_non_alphanumeric': 0.15469522240527184, 'fraction_numerical': 0.005930807248764415, 'mean_word_length': 2.8966623876765083, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 39, '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': '1765083', 'n_tokens_mistral': 1996, 'n_tokens_neox': 1988, 'n_words': 370}