<commit_before>import React, { Component } from "react"
import Config from "../config"
import SharedService from "../shared-service"
import Select from "./select"

function ToolbarContent(props) {
  return <div className="toolbar">
    <div className="container">
      <div className="file-section section">
        <label className="file"><span className="icon">&#xe63a;</span><input type="file" accept=".mid,.midi" onChange={props.onChangeFile}></input></label>
        <button onClick={props.onClickSave}><span className="icon">&#xe63c;</span></button>
      </div>

      <div className="song-section section">
        <p className="song-name">{props.songName}</p>
        <p className="tempo">BPM {props.tempo}</p>
      </div>

      <div className="transport-section section">
        <p className="time">{props.mbtTime}</p>
        <button onClick={props.onClickBackward}><span className="icon">&#xe606;</span></button>
        <button onClick={props.onClickStop}><span className="icon">&#xe615;</span></button>
        <button onClick={props.onClickPlay}><span className="icon">&#xe616;</span></button>
        <button onClick={props.onClickForward}><span className="icon">&#xe607;</span></button>
      </div>

      <div className="tool-section section">
        <button onClick={props.onClickPencil}>✎</button>
        <button onClick={props.onClickSelection}>□</button>
      </div>

      <button onClick={props.onClickScaleUp}><img src="images/iconmonstr-magnifier-7-16.png" /></button>
      <button onClick={props.onClickScaleDown}><img src="images/iconmonstr-magnifier-8-16.png" /></button>
      <button onClick={props.onClickAutoScroll}>Auto Scroll</button>

      <Select onChange={props.onSelectTrack} options={props.trackOptions} />
      <Select onChange={props.onSelectQuantize} options={props.quantizeOptions} />
    </div>
  </div>
}

export default class Toolbar extends Component {
  constructor(props) {
    super(props)

    this.state = {
      tempo: 0
    }
  }

  componentDidMount() {
    const player = SharedService.player
    player.on("change-tempo", tempo => {
      this.setState({tempo: new Number(tempo).toFixed(3)})
    })
    player.on("change-position", tick => {
      this.setState({
        mbtTime: this.props.song.getMeasureList().getMBTString(tick, player.TIME_BASE)
      })
    })
  }

  render() {
    const song = this.props.song
    const trackOptions = song ? song.getTracks().map((t, i) => { return {
      name: `${i}. ${t.name || ""}`,
      value: i,
      selected: i == 0
    }}) : []

    const player = SharedService.player
    const mbtTime = song && song.getMeasureList().getMBTString(player.position, player.TIME_BASE)

    return <ToolbarContent
      {...this.props}
      trackOptions={trackOptions}
      quantizeOptions={Config.QuantizeOptions}
      songName={song && song.name}
      mbtTime={mbtTime} />
  }
}
<commit_msg>fix displaying time<commit_after>import React, { Component } from "react"
import Config from "../config"
import SharedService from "../shared-service"
import Select from "./select"

function ToolbarContent(props) {
  return <div className="toolbar">
    <div className="container">
      <div className="file-section section">
        <label className="file"><span className="icon">&#xe63a;</span><input type="file" accept=".mid,.midi" onChange={props.onChangeFile}></input></label>
        <button onClick={props.onClickSave}><span className="icon">&#xe63c;</span></button>
      </div>

      <div className="song-section section">
        <p className="song-name">{props.songName}</p>
        <p className="tempo">BPM {props.tempo}</p>
      </div>

      <div className="transport-section section">
        <p className="time">{props.mbtTime}</p>
        <button onClick={props.onClickBackward}><span className="icon">&#xe606;</span></button>
        <button onClick={props.onClickStop}><span className="icon">&#xe615;</span></button>
        <button onClick={props.onClickPlay}><span className="icon">&#xe616;</span></button>
        <button onClick={props.onClickForward}><span className="icon">&#xe607;</span></button>
      </div>

      <div className="tool-section section">
        <button onClick={props.onClickPencil}>✎</button>
        <button onClick={props.onClickSelection}>□</button>
      </div>

      <button onClick={props.onClickScaleUp}><img src="images/iconmonstr-magnifier-7-16.png" /></button>
      <button onClick={props.onClickScaleDown}><img src="images/iconmonstr-magnifier-8-16.png" /></button>
      <button onClick={props.onClickAutoScroll}>Auto Scroll</button>

      <Select onChange={props.onSelectTrack} options={props.trackOptions} />
      <Select onChange={props.onSelectQuantize} options={props.quantizeOptions} />
    </div>
  </div>
}

export default class Toolbar extends Component {
  constructor(props) {
    super(props)

    this.state = {
      tempo: 0
    }
  }

  componentDidMount() {
    const player = SharedService.player
    player.on("change-tempo", tempo => {
      this.setState({tempo: new Number(tempo).toFixed(3)})
    })
    player.on("change-position", tick => {
      this.setState({
        mbtTime: this.props.song.getMeasureList().getMBTString(tick, player.timebase)
      })
    })
  }

  render() {
    const song = this.props.song
    const trackOptions = song ? song.getTracks().map((t, i) => { return {
      name: `${i}. ${t.name || ""}`,
      value: i,
      selected: i == 0
    }}) : []

    const player = SharedService.player
    const mbtTime = song && song.getMeasureList().getMBTString(player.position, player.timebase)

    return <ToolbarContent
      {...this.props}
      trackOptions={trackOptions}
      quantizeOptions={Config.QuantizeOptions}
      songName={song && song.name}
      mbtTime={mbtTime} />
  }
}

{'fraction_non_alphanumeric': 0.17085773337926283, 'fraction_numerical': 0.00861178091629349, 'mean_word_length': 3.540265832681783, 'pattern_counts': {'":': 0, '<': 121, '<?xml version=': 0, '>': 127, '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': '3699922', 'n_tokens_mistral': 1814, 'n_tokens_neox': 1748, 'n_words': 304}