ndla-ui/es/AudioPlayer/AudioPlayer.js

UI component library for NDLA.

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

/**
 * Copyright (c) 2017-present, NDLA.
 *
 * This source code is licensed under the GPLv3 license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

import React from 'react';
import PropTypes from 'prop-types';
import BEMHelper from 'react-bem-helper';
import { Play, Pause, VolumeUp } from 'ndla-icons/common';

/* eslint jsx-a11y/media-has-caption: 0 jsx-a11y/no-noninteractive-tabindex: 0 */

var classes = new BEMHelper({
  name: 'audio-player',
  prefix: 'c-'
});

var AudioPlayer = function AudioPlayer(_ref) {
  var type = _ref.type,
      src = _ref.src,
      title = _ref.title,
      typeLabel = _ref.typeLabel,
      speech = _ref.speech;

  if (speech) {
    return React.createElement(
      'section',
      classes('', 'speech'),
      React.createElement('audio', { type: type, src: src, title: title, preload: 'metadata' }),
      React.createElement(
        'button',
        _extends({ type: 'button' }, classes('play')),
        React.createElement(VolumeUp, { role: 'img', 'aria-label': 'play', title: 'play' })
      )
    );
  }

  return React.createElement(
    'section',
    classes(),
    typeLabel && React.createElement(
      'p',
      classes('type'),
      typeLabel
    ),
    React.createElement(
      'h1',
      classes('title'),
      title
    ),
    React.createElement('audio', { type: type, src: src, title: title, preload: 'metadata' }),
    React.createElement(
      'div',
      classes('controls'),
      React.createElement(
        'button',
        _extends({ type: 'button' }, classes('play')),
        React.createElement(
          'span',
          classes('play-icon'),
          React.createElement(Play, { role: 'img', 'aria-label': 'play', title: 'play' })
        ),
        React.createElement(
          'span',
          classes('pause-icon'),
          React.createElement(Pause, { role: 'img', 'aria-label': 'pause', title: 'play' })
        )
      ),
      React.createElement(
        'div',
        classes('time'),
        '0:00'
      ),
      React.createElement(
        'div',
        _extends({}, classes('progress'), { tabIndex: '0' }),
        React.createElement('div', classes('progress-background')),
        React.createElement('div', _extends({}, classes('progress-played'), { 'data-value': '0' }))
      )
    )
  );
};

AudioPlayer.propTypes = {
  type: PropTypes.string.isRequired,
  typeLabel: PropTypes.string,
  src: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  speech: PropTypes.bool
};

AudioPlayer.defaultProps = {
  speech: false
};

export default AudioPlayer;