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

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React from 'react';
import PropTypes from 'prop-types';
import style from './index.module.css';
import { timecodeToSeconds, secondsToTimecode } from '../../../Util/timecode-converter/index';

class TimecodeOffset extends React.Component {
  constructor(props) {
    super(props);

    _defineProperty(this, "handleChange", e => {
      this.setState({
        timecodeOffset: e.target.value
      });
    });

    _defineProperty(this, "resetTimecodeOffset", () => {
      const resetTimecodeOffsetValue = 0;
      this.props.handleAnalyticsEvents({
        category: 'TimecodeOffset',
        action: 'resetTimecodeOffset',
        name: 'resetTimecodeOffset',
        value: 0
      });
      this.setState({
        timecodeOffset: secondsToTimecode(resetTimecodeOffsetValue)
      }, () => {
        this.props.handleSetTimecodeOffset(resetTimecodeOffsetValue);
      });
    });

    _defineProperty(this, "setTimecodeOffset", () => {
      this.props.handleAnalyticsEvents({
        category: 'TimecodeOffset',
        action: 'setTimecodeOffset',
        name: 'setTimecodeOffset',
        value: this.state.timecodeOffset
      });
      let newCurrentTimeInSeconds = this.state.timecodeOffset;

      if (typeof newCurrentTimeInSeconds === 'string' && newCurrentTimeInSeconds.includes(':') && !newCurrentTimeInSeconds.includes('NaN')) {
        newCurrentTimeInSeconds = timecodeToSeconds(newCurrentTimeInSeconds);
      }

      this.props.handleSetTimecodeOffset(newCurrentTimeInSeconds);
    });

    this.state = {
      timecodeOffset: secondsToTimecode(this.props.timecodeOffset)
    };
  }

  render() {
    return React.createElement("div", {
      className: style.offsetContainer
    }, React.createElement("input", {
      className: style.inputBox,
      type: "text",
      value: this.state.timecodeOffset,
      onChange: this.handleChange,
      name: "lname"
    }), React.createElement("span", {
      className: style.button,
      onClick: this.resetTimecodeOffset
    }, React.createElement("u", null, "Reset")), React.createElement("span", null, " | "), React.createElement("span", {
      className: style.button,
      onClick: this.setTimecodeOffset
    }, React.createElement("u", null, "Save")));
  }

}

TimecodeOffset.propTypes = {
  handleSetTimecodeOffset: PropTypes.func,
  onChange: PropTypes.func,
  timecodeOffset: PropTypes.number
};
export default TimecodeOffset;