<commit_before>import React, {Component, PropTypes} from 'react'
import {connect} from 'react-redux'
import Radium from 'radium'
import muiThemeable from 'material-ui/styles/muiThemeable'

function mapStateToProps(state) {
  return {
    lyrics: state.song.playing.lyrics,
    elapsed: state.song.status.elapsed
  }
}

function mapDispatchToProps(dispatch) {
  return {}
}

@connect(mapStateToProps, mapDispatchToProps)
@muiThemeable()
@Radium
export default class Lyrics extends Component {
  static propTypes = {
    lyrics: PropTypes.array,
    elapsed: PropTypes.number,
    height: PropTypes.number.isRequired,
    muiTheme: PropTypes.object.isRequired
  }

  state = {
    lineIndex: -1,
    lineContent: '',
    overflowWidth: '0',
    scrollDuration: '0'
  }

  componentWillReceiveProps(nextProps) {
    const {lyrics, elapsed} = this.props
    const lineIndex = lyrics ? lyrics.findIndex((line, index) => {
      const nextLine = lyrics[index + 1]
      return !nextLine || elapsed < nextLine.time
    }) : -1
    const lineContent = lineIndex >= 0
      ? lyrics[lineIndex].text
      : '没有歌词 o(*≧▽≦)ツ'
    this.setState({lineIndex, lineContent})
  }

  componentDidUpdate(prevProps, prevState) {
    const {refs: {line}, props: {lyrics}, state: {lineIndex}} = this
    const overflowWidth = (
      line.clientWidth - line.scrollWidth
    ).toFixed(0)
    const scrollDuration = (
      !lyrics || lineIndex < 0 ? 0 :
        lineIndex == lyrics.length - 1 ? 10 :
          lyrics[lineIndex + 1].time - lyrics[lineIndex].time
    ).toFixed(1)
    if (overflowWidth == prevState.overflowWidth &&
        scrollDuration == prevState.scrollDuration) return
    requestAnimationFrame(() => this.setState({overflowWidth, scrollDuration}))
  }

  render() {
    const style = this.generateStyle()
    return (
      <div style={style.lyrics}>
        <div style={style.content} ref='line'>
          {this.state.lineContent}
        </div>
      </div>
    )
  }

  generateStyle() {
    return {
      lyrics: {
        width: '100%',
        height: '100%',
        boxShadow: this.props.muiTheme.footer.boxShadow,
        background: this.props.muiTheme.footer.backgroundColor,
        color: this.props.muiTheme.footer.textColor,
        fontFamily: this.props.muiTheme.fontFamily
      },
      content: {
        marginLeft: '1em',
        marginRight: '1em',
        fontSize: '1.2em',
        lineHeight: `${this.props.height}px`,
        textAlign: 'center',
        whiteSpace: 'nowrap',
        animationName: Radium.keyframes({
          '0%': {transform: 'translate(0, 0)'},
          '100%': {transform: `translate(${this.state.overflowWidth}px, 0)`},
        }, 'marquee'),
        animationDuration: `${this.state.scrollDuration}s`,
        animationTimingFunction: 'ease',
        animationIterationCount: 'infinite'
      }
    }
  }
}
<commit_msg>fix lyrics finally<commit_after>import React, {Component, PropTypes} from 'react'
import {connect} from 'react-redux'
import Radium from 'radium'
import muiThemeable from 'material-ui/styles/muiThemeable'

function mapStateToProps(state) {
  return {
    lyrics: state.song.playing.lyrics,
    elapsed: state.song.status.elapsed
  }
}

function mapDispatchToProps(dispatch) {
  return {}
}

@connect(mapStateToProps, mapDispatchToProps)
@muiThemeable()
@Radium
export default class Lyrics extends Component {
  static propTypes = {
    lyrics: PropTypes.array,
    elapsed: PropTypes.number,
    height: PropTypes.number.isRequired,
    muiTheme: PropTypes.object.isRequired
  }

  state = {
    lineContent: '',
    lineDuration: '0',
    overflowWidth: '0'
  }

  componentWillReceiveProps(nextProps) {
    const {lyrics, elapsed} = this.props
    const lineIndex = lyrics ? lyrics.findIndex((line, index) => {
      const nextLine = lyrics[index + 1]
      return !nextLine || elapsed < nextLine.time
    }) : -1
    const lineContent = lineIndex >= 0
      ? lyrics[lineIndex].text
      : '没有歌词 o(*≧▽≦)ツ'
    const lineDuration = (
      lineIndex < 0 ? 0 :
        lineIndex == lyrics.length - 1 ? 10 :
          lyrics[lineIndex + 1].time - lyrics[lineIndex].time
    ).toFixed(1)
    this.setState({lineContent, lineDuration})
  }

  componentDidUpdate(prevProps, prevState) {
    const {clientWidth, scrollWidth} = this.refs.line
    const overflowWidth = (clientWidth - scrollWidth).toFixed(0)
    if (overflowWidth == prevState.overflowWidth) return
    requestAnimationFrame(() => this.setState({overflowWidth}))
  }

  render() {
    const style = this.generateStyle()
    return (
      <div style={style.lyrics}>
        <div style={style.content} ref='line'>
          {this.state.lineContent}
        </div>
      </div>
    )
  }

  generateStyle() {
    return {
      lyrics: {
        width: '100%',
        height: '100%',
        boxShadow: this.props.muiTheme.footer.boxShadow,
        background: this.props.muiTheme.footer.backgroundColor,
        color: this.props.muiTheme.footer.textColor,
        fontFamily: this.props.muiTheme.fontFamily
      },
      content: {
        marginLeft: '1em',
        marginRight: '1em',
        fontSize: '1.2em',
        lineHeight: `${this.props.height}px`,
        textAlign: 'center',
        whiteSpace: 'nowrap',
        animationName: Radium.keyframes({
          '0%': {transform: 'translate(0, 0)'},
          '100%': {transform: `translate(${this.state.overflowWidth}px, 0)`},
        }, 'marquee'),
        animationDuration: `${this.state.lineDuration}s`,
        animationTimingFunction: 'ease',
        animationIterationCount: 'infinite'
      }
    }
  }
}

{'fraction_non_alphanumeric': 0.13228739525762168, 'fraction_numerical': 0.010875378855410947, 'mean_word_length': 2.879668049792531, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 17, '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': '3197665', 'n_tokens_mistral': 1794, 'n_tokens_neox': 1761, 'n_words': 351}