@bbc/react-transcript-editor/dist/TranscriptEditor/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 TimedTextEditor from './TimedTextEditor';
import MediaPlayer from './MediaPlayer';
import styles from './index.module.css';
import { throws } from 'assert';

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

    _defineProperty(this, "handleWordClick", startTime => {
      this.props.handleAnalyticsEvents({
        category: 'TranscriptEditor',
        action: 'doubleClickOnWord',
        name: '',
        value: startTime
      });
      this.setCurrentTime(startTime);
    });

    _defineProperty(this, "handleTimeUpdate", currentTime => {
      this.setState({
        currentTime
      });
    });

    _defineProperty(this, "handlePlayMedia", bool => {
      this.playMedia(bool);
    });

    _defineProperty(this, "handleIsPlaying", () => {
      return this.isPlaying();
    });

    _defineProperty(this, "handleIsScrollIntoViewChange", isChecked => {
      this.setState({
        isScrollIntoViewOn: isChecked
      });
    });

    _defineProperty(this, "getEditorContent", sttType => this.refs.timedTextEditor.getEditorContent(sttType));

    this.state = {
      currentTime: 0,
      lastLocalSavedTime: '',
      transcriptData: null,
      isScrollIntoViewOn: false
    };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.transcriptData !== null) {
      return {
        transcriptData: nextProps.transcriptData
      };
    }

    return null;
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.transcriptData !== this.state.transcriptData) {
      //   this.loadData();
      if (this.refs.timedTextEditor.isPresentInLocalStorage(this.props.mediaUrl)) {
        console.log('was already present in local storage');
        this.refs.timedTextEditor.loadLocalSavedData(this.props.mediaUrl);
      } else {
        console.log('not present in local storage');
      }
    }
  } // eslint-disable-next-line class-methods-use-this


  render() {
    return React.createElement("section", null, React.createElement("section", {
      className: styles.container
    }, React.createElement("aside", {
      className: styles.aside
    }, React.createElement(MediaPlayer // eslint-disable-next-line no-return-assign
    , {
      hookSeek: foo => this.setCurrentTime = foo,
      hookPlayMedia: foo => this.playMedia = foo,
      hookIsPlaying: foo => this.isPlaying = foo,
      hookOnTimeUpdate: this.handleTimeUpdate,
      mediaUrl: this.props.mediaUrl,
      isScrollIntoViewOn: this.state.isScrollIntoViewOn,
      handleIsScrollIntoViewChange: this.handleIsScrollIntoViewChange,
      handleAnalyticsEvents: this.props.handleAnalyticsEvents
    })), React.createElement("main", {
      className: styles.main
    }, React.createElement(TimedTextEditor, {
      transcriptData: this.state.transcriptData,
      onWordClick: this.handleWordClick,
      playMedia: this.handlePlayMedia,
      isPlaying: this.handleIsPlaying,
      isScrollIntoViewOn: this.state.isScrollIntoViewOn,
      currentTime: this.state.currentTime,
      isEditable: this.props.isEditable,
      sttJsonType: this.props.sttJsonType,
      ref: 'timedTextEditor',
      mediaUrl: this.props.mediaUrl,
      handleAnalyticsEvents: this.props.handleAnalyticsEvents
    }))));
  }

}

TranscriptEditor.propTypes = {
  mediaUrl: PropTypes.string,
  isEditable: PropTypes.bool,
  sttJsonType: PropTypes.string
};
export default TranscriptEditor;