<commit_before>import React from 'react'
import ReactDOM from 'react-dom'

const getUserMedia = (
  navigator.getUserMedia ||
  navigator.webkitGetUserMedia ||
  navigator.mozGetUserMedia ||
  navigator.msGetUserMedia
).bind(navigator)

const audioContexts = new WeakMap()
const mediaStreamSources = new WeakMap()
const microphoneOns = new WeakMap()
const outputs = new WeakMap()

const ControlContainer = ({children}) => <div style={{padding: '1rem'}}>
  {children}
</div>

const turnMicOff = self => mediaStreamSources.get(self).disconnect()
const turnMicOn = self => getUserMedia(
  {audio: true},
  stream => {
    // microphone available
    const mediaStreamSource = audioContexts.get(self).createMediaStreamSource(stream)
    mediaStreamSources.set(self, mediaStreamSource)
    mediaStreamSource.connect(outputs.get(self))
  },
  () => null // microphone not available
)

export default class {
  constructor ({audioContext}) {
    audioContexts.set(this, audioContext)
    microphoneOns.set(this, false)
    outputs.set(this, audioContext.createGain())
  }
  connect (destination) { outputs.get(this).connect(destination) }
  disconnect (destination) { outputs.get(this).disconnect(destination) }
  render (containerEl) {
    ReactDOM.render(
      <div style={{textAlign: 'center'}}>
        <h2>Microphone</h2>
        <ControlContainer>
          <label>
            turn on&nbsp;
            <input
              onClick={() => {
                const microphoneOn = !microphoneOns.get(this)
                microphoneOns.set(this, microphoneOn)
                if (microphoneOn) turnMicOn(this); else turnMicOff(this)
              }}
              type='checkbox'
              defaultChecked={microphoneOns.get(this)}
            />
          </label>
        </ControlContainer>
        <ControlContainer>
          <label>
            Volume&nbsp;
            <input
              defaultValue={outputs.get(this).gain.value}
              max='3'
              min='0'
              onInput={e => outputs.get(this).gain.value = Number(e.target.value)}
              step='0.05'
              type='range'
            />
          </label>
        </ControlContainer>
      </div>,
      containerEl
    )
  }
}<commit_msg>refactor:Microphone no more jsx<commit_after>import {createElement} from 'react'
import ReactDOM from 'react-dom'

const getUserMedia = (
  navigator.getUserMedia ||
  navigator.webkitGetUserMedia ||
  navigator.mozGetUserMedia ||
  navigator.msGetUserMedia
).bind(navigator)

const audioContexts = new WeakMap()
const mediaStreamSources = new WeakMap()
const microphoneOns = new WeakMap()
const outputs = new WeakMap()

const ControlContainer = ({children}) => createElement('div', {
  children,
  style: {padding: '1rem'},
})

const turnMicOff = self => mediaStreamSources.get(self).disconnect()
const turnMicOn = self => getUserMedia(
  {audio: true},
  stream => {
    // microphone available
    const mediaStreamSource = audioContexts.get(self).createMediaStreamSource(stream)
    mediaStreamSources.set(self, mediaStreamSource)
    mediaStreamSource.connect(outputs.get(self))
  },
  () => null // microphone not available
)

export default class {
  constructor ({audioContext}) {
    audioContexts.set(this, audioContext)
    microphoneOns.set(this, false)
    outputs.set(this, audioContext.createGain())
  }
  connect (destination) { outputs.get(this).connect(destination) }
  disconnect (destination) { outputs.get(this).disconnect(destination) }
  render (containerEl) {
    ReactDOM.render(
      createElement('div', {style: {textAlign: 'center'}},
        createElement('h2', null, 'Microphone'),
        createElement(ControlContainer, null,
          createElement('label', null, 'Turn on',
            createElement('input', {
              onClick: () => {
                const microphoneOn = !microphoneOns.get(this)
                microphoneOns.set(this, microphoneOn)
                if (microphoneOn) turnMicOn(this); else turnMicOff(this)
              },
              type: 'checkbox',
              defaultChecked: microphoneOns.get(this),
            })
          )
        ),
        createElement(ControlContainer, null,
          createElement('label', null,
            'Volume ',
            createElement('input', {
              defaultValue: outputs.get(this).gain.value,
              max: 3,
              min: 0,
              onInput: e => outputs.get(this).gain.value = Number(e.target.value),
              step: 0.05,
              type: 'range',
            })
          )
        )
      ),
      containerEl
    )
  }
}
{'fraction_non_alphanumeric': 0.12242240069459519, 'fraction_numerical': 0.0032559149120902973, 'mean_word_length': 2.583203732503888, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 33, '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': '4876390', 'n_tokens_mistral': 1331, 'n_tokens_neox': 1288, 'n_words': 257}