@bbc/react-transcript-editor/dist/TranscriptEditor/MediaPlayer/PlayerControls.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 VolumeControl from './VolumeControl';
import Select from './Select';
import style from './PlayerControls.module.css';

class PlayerControls extends React.Component {
  constructor(...args) {
    super(...args);

    _defineProperty(this, "setIntervalHelperBackward", () => {
      this.props.skipBackward();
      this.interval = setInterval(() => {
        this.props.skipBackward();
      }, 300);
    });

    _defineProperty(this, "setIntervalHelperForward", () => {
      this.props.skipForward();
      this.interval = setInterval(() => {
        this.props.skipForward();
      }, 300);
    });

    _defineProperty(this, "clearIntervalHelper", () => {
      clearInterval(this.interval);
    });
  }

  render() {
    return React.createElement("div", {
      className: style.playerControls
    }, React.createElement("button", {
      className: style.playerButton,
      onClick: this.props.rollback
    }, '↺'), React.createElement("button", {
      className: style.playerButton,
      onMouseDown: this.setIntervalHelperBackward,
      onMouseUp: this.clearIntervalHelper
    }, '◀◀'), React.createElement("button", {
      className: style.playerButton,
      onClick: this.props.playMedia
    }, this.props.isPlaying ? '❚❚' : '▶'), React.createElement("button", {
      className: style.playerButton,
      onMouseDown: this.setIntervalHelperForward,
      onMouseUp: this.clearIntervalHelper
    }, '▶▶'), React.createElement("button", {
      className: style.playBackRate
    }, "x", React.createElement(Select, {
      options: this.props.playbackRateOptions,
      currentValue: this.props.playbackRate.toString(),
      name: 'playbackRate',
      handleChange: this.props.setPlayBackRate
    })), React.createElement("div", {
      className: style.timeBox
    }, React.createElement("span", {
      className: style.currentTime,
      onClick: this.props.promptSetCurrentTime
    }, this.props.currentTime), React.createElement("span", {
      className: style.separator
    }, "|"), React.createElement("span", {
      className: style.duration
    }, this.props.duration)), React.createElement(VolumeControl, {
      handleMuteVolume: this.props.handleMuteVolume
    }));
  }

}

PlayerControls.propTypes = {
  playMedia: PropTypes.func,
  currentTime: PropTypes.string,
  timecodeOffset: PropTypes.string,
  promptSetCurrentTime: PropTypes.func,
  rollback: PropTypes.func,
  handleMuteVolume: PropTypes.func,
  duration: PropTypes.string,
  isPlaying: PropTypes.bool,
  skipBackward: PropTypes.func,
  skipForward: PropTypes.func,
  playbackRate: PropTypes.number,
  playbackRateOptions: PropTypes.array,
  setPlayBackRate: PropTypes.func
};
export default PlayerControls;