<commit_before>import React, {Component} from 'react'
import styles from './style.module.css'
import Link, {navigateTo} from 'gatsby-link'
import marked from 'marked'
import {Box, Thread} from 'react-disqussion'
import {timestampToSeconds} from '../../utils/time'
import throttle from 'lodash.throttle'

const PLAYBACK_RATES = [1.0, 1.2, 1.4, 1.6, 1.8, 2.0]

class PodcastPage extends Component {
  constructor(props) {
    super(props)
    this.handleTimeClick = this.handleTimeClick.bind(this)
    this.handleTimeUpdate = this.handleTimeUpdate.bind(this)
    this.initialTimeHash = `#t=${this.getInitialTime()}`
  }

  handleTimeClick(e) {
    const {target} = e
    if (target.classList.contains('podcast_time')) {
      e.preventDefault()
      this.audioEl.currentTime = timestampToSeconds(target.innerText)
    }
  }

  handleSpeedClick(speed) {
    this.audioEl.playbackRate = speed
  }

  handleTimeUpdate() {
    if (typeof location === 'undefined') {
      return
    }

    const time = Math.trunc(this.audioEl.currentTime)
    history.replaceState(null, null, `${location.pathname}?time=${time}`)
  }

  getInitialTime() {
    if (typeof location === 'undefined') {
      return 0
    }

    const rgexRes = location.search.match(/time=(\d+)/)
    return rgexRes ? rgexRes[1] : 0
  }

  render() {
    const {data} = this.props.pathContext
    const {title, number, file, notes, formatedDate} = data

    return (
      <div>
        <div className={styles.back_link}>
          <Link to='/podcast/'>{'<'} назад</Link>
        </div>

        <header className={styles.header}>
          <h3 className={styles.header_title}>{title}</h3>
          <date className={styles.header_date}>{formatedDate}</date>
        </header>

        <div className={styles.player}>
          <audio
            className={styles.player_audio}
            controls='controls'
            preload='metadata'
            src={file + this.initialTimeHash}
            onTimeUpdate={throttle(this.handleTimeUpdate, 1000)}
            ref={el => (this.audioEl = el)} />
          <div className={styles.player_controls}>
            {PLAYBACK_RATES.map(speed => (
              <button
                key={speed}
                className={styles.player_controls_item}
                onClick={() => this.handleSpeedClick(speed)}>
                {speed}
              </button>
            ))}
          </div>
        </div>

        <footer
          onClick={this.handleTimeClick}
          className={styles.footer}
          dangerouslySetInnerHTML={{__html: marked(notes.notes)}} />

        <Box shortname='http-spb-frontend-ru'>
          <Thread
            url={`http://spb-frontend.ru/podcast/${number}`}
            title={title}
            identifier={`podcast-${number}`} />
        </Box>
      </div>
    )
  }
}

export default PodcastPage<commit_msg>Add Player to Podcast page<commit_after>import React, {Component} from 'react'
import st from './style.module.css'
import Link, {navigateTo} from 'gatsby-link'
import marked from 'marked'
import {Box, Thread} from 'react-disqussion'
import {Player} from '../Player'
import {timestampToSeconds} from '../../utils/time'
import throttle from 'lodash.throttle'

const PLAYBACK_RATES = [1.0, 1.2, 1.4, 1.6, 1.8, 2.0]

class PodcastPage extends Component {
  state = {
    time: 0
  }

  componentDidMount() {
    this.getInitialTime()
  }

  handleTimeClick = (event) => {
    const {target} = event
    if (target.classList.contains('podcast_time')) {
      event.preventDefault()
      this.setState({time: timestampToSeconds(target.innerText) * 1000})
    }
  }

  getInitialTime() {
    const rgexRes = location.search.match(/time=(\d+)/)

    this.setState({time: rgexRes ? parseInt(rgexRes[1]) * 1000 : 0})
  }

  render() {
    const {data} = this.props.pathContext
    const {title, number, file, notes, formatedDate} = data

    return (
      <div>
        <div className={st.back_link}>
          <Link to='/podcast/'>{'<'} назад</Link>
        </div>

        <header className={st.header}>
          <h3 className={st.header_title}>{title}</h3>
          <date className={st.header_date}>{formatedDate}</date>
        </header>

        <Player
          position={this.state.time}
          file={file} />

        {/*<div className={st.player}>
          <audio
            className={st.player_audio}
            controls='controls'
            preload='metadata'
            src={file + this.initialTimeHash}
            onTimeUpdate={throttle(this.handleTimeUpdate, 1000)}
            />
          <div className={st.player_controls}>
            {PLAYBACK_RATES.map(speed => (
              <button
                key={speed}
                className={st.player_controls_item}
                onClick={() => this.handleSpeedClick(speed)}>
                {speed}
              </button>
            ))}
          </div>
        </div>*/}

        <footer
          onClick={this.handleTimeClick}
          className={st.footer}
          dangerouslySetInnerHTML={{__html: marked(notes.notes)}} />

        <Box shortname='http-spb-frontend-ru'>
          <Thread
            url={`http://spb-frontend.ru/podcast/${number}`}
            title={title}
            identifier={`podcast-${number}`} />
        </Box>
      </div>
    )
  }
}

export default PodcastPage
{'fraction_non_alphanumeric': 0.14585283654746303, 'fraction_numerical': 0.009361542782250515, 'mean_word_length': 2.2773006134969327, 'pattern_counts': {'":': 0, '<': 52, '<?xml version=': 0, '>': 56, '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': '5091413', 'n_tokens_mistral': 1678, 'n_tokens_neox': 1621, 'n_words': 298}