@bbc/react-transcript-editor/dist/TranscriptEditor/Settings/index.js

A React component to make transcribing audio and video easier and faster.

import React from 'react';
import PropTypes from 'prop-types';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faWindowClose } from '@fortawesome/free-solid-svg-icons';
import Toggle from './Toggle/';
import style from './index.module.css';
import TimecodeOffset from './TimecodeOffset';

class Settings extends React.Component {
  render() {
    return React.createElement("div", {
      className: style.settings
    }, React.createElement("h2", {
      className: style.header
    }, "Settings Panel"), React.createElement("div", {
      className: style.closeButton,
      onClick: this.props.handleSettingsToggle
    }, React.createElement(FontAwesomeIcon, {
      icon: faWindowClose
    })), React.createElement("div", {
      className: style.controlsContainer
    }, React.createElement("section", {
      className: style.settingElement
    }, React.createElement("div", {
      className: style.label
    }, "Pause While Typing"), React.createElement(Toggle, {
      defaultValue: this.props.defaultValuePauseWhileTyping,
      label: 'Pause while typing',
      handleToggle: this.props.handlePauseWhileTyping
    })), React.createElement("section", {
      className: style.settingElement
    }, React.createElement("div", {
      className: style.label
    }, "Scroll Sync"), React.createElement(Toggle, {
      defaultValue: this.props.defaultValueScrollSync,
      label: 'ScrollSync',
      handleToggle: this.props.handleIsScrollIntoViewChange
    })), React.createElement("section", {
      className: style.settingElement
    }, React.createElement("div", {
      className: style.label
    }, "Rollback Interval (sec)"), React.createElement("input", {
      className: style.rollbackValue,
      type: "text",
      value: this.props.defaultRollBackValueInSeconds,
      onChange: this.props.handleRollBackValueInSeconds,
      name: "lname"
    })), React.createElement("section", {
      className: style.settingElement
    }, React.createElement("div", {
      className: style.label
    }, "Show Timecodes"), React.createElement(Toggle, {
      defaultValue: this.props.showTimecodes,
      label: 'Hide Timecodes',
      handleToggle: this.props.handleShowTimecodes
    })), React.createElement("section", {
      className: style.settingElement
    }, React.createElement("div", {
      className: style.label
    }, "Show Speaker Labels"), React.createElement(Toggle, {
      defaultValue: this.props.showSpeakers,
      label: 'Hide Speaker Labels',
      handleToggle: this.props.handleShowSpeakers
    })), React.createElement("section", {
      className: style.settingElement
    }, React.createElement("div", {
      className: style.timecodeLabel
    }, "Timecode Offset \u2139"), React.createElement(TimecodeOffset, {
      timecodeOffset: this.props.timecodeOffset,
      handleSetTimecodeOffset: this.props.handleSetTimecodeOffset,
      handleAnalyticsEvents: this.props.handleAnalyticsEvents
    }))));
  }

}

Settings.propTypes = {
  showTimecodes: PropTypes.bool,
  showSpeakers: PropTypes.bool,
  timecodeOffset: PropTypes.number,
  handleShowTimecodes: PropTypes.func,
  handleShowSpeakers: PropTypes.func,
  handleSetTimecodeOffset: PropTypes.func,
  handleSettingsToggle: PropTypes.func,
  handlePauseWhileTyping: PropTypes.func,
  handleIsScrollIntoViewChange: PropTypes.func,
  handleRollBackValueInSeconds: PropTypes.func,
  defaultValueScrollSync: PropTypes.bool,
  defaultValuePauseWhileTyping: PropTypes.bool,
  defaultRollBackValueInSeconds: PropTypes.number
};
export default Settings;