ndla-ui/lib/AudioPlayer/AudioPlayer.js

UI component library for NDLA.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

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.
                                                                                                                                                                                                                                                                   *
                                                                                                                                                                                                                                                                   */

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactBemHelper = require('react-bem-helper');

var _reactBemHelper2 = _interopRequireDefault(_reactBemHelper);

var _common = require('ndla-icons/common');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

var classes = new _reactBemHelper2.default({
  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 _react2.default.createElement(
      'section',
      classes('', 'speech'),
      _react2.default.createElement('audio', { type: type, src: src, title: title, preload: 'metadata' }),
      _react2.default.createElement(
        'button',
        _extends({ type: 'button' }, classes('play')),
        _react2.default.createElement(_common.VolumeUp, { role: 'img', 'aria-label': 'play', title: 'play' })
      )
    );
  }

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

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

AudioPlayer.defaultProps = {
  speech: false
};

exports.default = AudioPlayer;