@zohodesk/dot/lib/AudioPlayer/AudioPlayer.js

In this Library, we Provide Some Basic Components to Build Your Application

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _Layout = require("@zohodesk/components/lib/Layout");

var _Timer = _interopRequireDefault(require("./Timer/Timer"));

var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));

var _propTypes = require("./propTypes/propTypes");

var _defaultProps = require("./propTypes/defaultProps");

var _utils = require("./utils/utils");

var _Attachment = require("./../AttachmentViewer/Attachment");

var _AudioPlayerModule = _interopRequireDefault(require("./AudioPlayer.module.css"));

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

var AudioPlayer = /*#__PURE__*/function (_React$Component) {
  _inherits(AudioPlayer, _React$Component);

  var _super = _createSuper(AudioPlayer);

  function AudioPlayer(props) {
    var _this;

    _classCallCheck(this, AudioPlayer);

    _this = _super.call(this, props);
    _this.audioPlayer = null;
    _this.removeEventListeners = _this.removeEventListeners.bind(_assertThisInitialized(_this));
    _this.setAudioPlayerRef = _this.setAudioPlayerRef.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(AudioPlayer, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var AudioPlayerChild = this.refs.AudioPlayerChild;
      this.audioPlayer.addEventListener('keydown', AudioPlayerChild.handleKeyDown);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.removeEventListeners();
    }
  }, {
    key: "removeEventListeners",
    value: function removeEventListeners() {
      var AudioPlayerChild = this.refs.AudioPlayerChild;
      this.audioPlayer.removeEventListener('keydown', AudioPlayerChild.handleKeyDown);
    }
  }, {
    key: "setAudioPlayerRef",
    value: function setAudioPlayerRef(ele) {
      this.audioPlayer = ele;
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          id = _this$props.id,
          isPlay = _this$props.isPlay,
          onClose = _this$props.onClose,
          src = _this$props.src,
          timerFormat = _this$props.timerFormat,
          forwardStepInSec = _this$props.forwardStepInSec,
          backwardStepInSec = _this$props.backwardStepInSec,
          getAudioDuration = _this$props.getAudioDuration,
          needClose = _this$props.needClose,
          needDownload = _this$props.needDownload,
          needMuteIcon = _this$props.needMuteIcon,
          onPlay = _this$props.onPlay,
          onPause = _this$props.onPause,
          onDownloading = _this$props.onDownloading,
          onAudioSeeking = _this$props.onAudioSeeking,
          onAudioLoading = _this$props.onAudioLoading,
          onError = _this$props.onError,
          onMuteUnmute = _this$props.onMuteUnmute,
          duration = _this$props.duration,
          i18nKeys = _this$props.i18nKeys,
          dataId = _this$props.dataId,
          customClass = _this$props.customClass,
          range = _this$props.range;
      return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
        dataId: dataId,
        eleRef: this.setAudioPlayerRef,
        tabIndex: 0,
        isCover: false,
        className: "".concat(customClass)
      }, /*#__PURE__*/_react["default"].createElement(AudioPlayerChild, {
        ref: "AudioPlayerChild",
        id: id,
        src: src,
        isPlay: isPlay,
        onClose: onClose,
        timerFormat: timerFormat,
        duration: duration,
        forwardStepInSec: forwardStepInSec,
        backwardStepInSec: backwardStepInSec,
        getAudioDuration: getAudioDuration,
        needClose: needClose,
        needDownload: needDownload,
        needMuteIcon: needMuteIcon,
        onPlay: onPlay,
        onPause: onPause,
        onDownloading: onDownloading,
        onAudioSeeking: onAudioSeeking,
        onAudioLoading: onAudioLoading,
        onError: onError,
        onMuteUnmute: onMuteUnmute,
        i18nKeys: i18nKeys,
        dataId: dataId,
        range: range
      }));
    }
  }]);

  return AudioPlayer;
}(_react["default"].Component);

exports["default"] = AudioPlayer;
AudioPlayer.defaultProps = _defaultProps.AudioPlayer_defaultProps;
AudioPlayer.propTypes = _propTypes.AudioPlayer_propTypes;

var AudioPlayerChild = /*#__PURE__*/function (_React$Component2) {
  _inherits(AudioPlayerChild, _React$Component2);

  var _super2 = _createSuper(AudioPlayerChild);

  function AudioPlayerChild(props) {
    var _this2;

    _classCallCheck(this, AudioPlayerChild);

    _this2 = _super2.call(this, props);
    _this2.audio = null;
    _this2.intervalId = props.intervalId || '';
    _this2.state = {
      isPlay: props.isPlay,
      currentHour: '00',
      currentMinute: '00',
      currentSecond: '00',
      sliderRangeValue: 0,
      audioHours: '00',
      audioMinutes: '00',
      audioSeconds: '00',
      overallSeconds: 0,
      minValue: 0,
      step: '1',
      audioType: 'audio/mpeg',
      isMuted: false,
      disableControlIcons: true,
      isShowDuration: false,
      disableRangeSlider: false,
      loadingRange: props.range || 0
    }; // Bind all methods

    _this2.getAudioDetails = _this2.getAudioDetails.bind(_assertThisInitialized(_this2));
    _this2.onPlayAudio = _this2.onPlayAudio.bind(_assertThisInitialized(_this2));
    _this2.onPauseAudio = _this2.onPauseAudio.bind(_assertThisInitialized(_this2));
    _this2.togglePlayPause = _this2.togglePlayPause.bind(_assertThisInitialized(_this2));
    _this2.updatePlayer = _this2.updatePlayer.bind(_assertThisInitialized(_this2));
    _this2.updateRangeValue = _this2.updateRangeValue.bind(_assertThisInitialized(_this2));
    _this2.updateTimerValues = _this2.updateTimerValues.bind(_assertThisInitialized(_this2));
    _this2.togglePlayer = _this2.togglePlayer.bind(_assertThisInitialized(_this2));
    _this2.getAudioDurationDetails = _this2.getAudioDurationDetails.bind(_assertThisInitialized(_this2));
    _this2.browserCompatible = _this2.browserCompatible.bind(_assertThisInitialized(_this2));
    _this2.onMuteUnmute = _this2.onMuteUnmute.bind(_assertThisInitialized(_this2));
    _this2.handleAudioSeeking = _this2.handleAudioSeeking.bind(_assertThisInitialized(_this2));
    _this2.handleError = _this2.handleError.bind(_assertThisInitialized(_this2));
    _this2.handleAudioLoading = _this2.handleAudioLoading.bind(_assertThisInitialized(_this2));
    _this2.removeEventListeners = _this2.removeEventListeners.bind(_assertThisInitialized(_this2));
    _this2.downloadFile = _this2.downloadFile.bind(_assertThisInitialized(_this2));
    _this2.handleKeyDown = _this2.handleKeyDown.bind(_assertThisInitialized(_this2));
    _this2.handleClosePlayer = _this2.handleClosePlayer.bind(_assertThisInitialized(_this2));
    _this2.updateRange = _this2.updateRange.bind(_assertThisInitialized(_this2));
    _this2.setInputRangeRef = _this2.setInputRangeRef.bind(_assertThisInitialized(_this2));
    _this2.removeEvent = _this2.removeEvent.bind(_assertThisInitialized(_this2));
    return _this2;
  }

  _createClass(AudioPlayerChild, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.audio.addEventListener('loadedmetadata', this.getAudioDetails);
      this.audio.addEventListener('canplay', this.browserCompatible);
      this.audio.addEventListener('seeking', this.handleAudioSeeking);
      this.audio.addEventListener('waiting', this.handleAudioLoading);
      this.audio.addEventListener('error', this.handleError);
      this.audio.addEventListener('ended', this.removeEvent);
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      if (prevProps.isPlay !== this.props.isPlay && this.props.isPlay === false) {
        this.onPauseAudio();
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.audio.pause();
      clearInterval(this.intervalId);
      this.removeEventListeners();
    }
  }, {
    key: "removeEventListeners",
    value: function removeEventListeners() {
      this.audio.removeEventListener('loadedmetadata', this.getAudioDetails);
      this.audio.removeEventListener('canplay', this.browserCompatible);
      this.audio.removeEventListener('seeking', this.handleAudioSeeking);
      this.audio.removeEventListener('waiting', this.handleAudioLoading);
      this.audio.removeEventListener('error', this.handleError);
      this.audio.removeEventListener('ended', this.removeEvent);
    }
  }, {
    key: "removeEvent",
    value: function removeEvent() {
      setTimeout(this.onPauseAudio, 1000);
    }
  }, {
    key: "getAudioDetails",
    value: function getAudioDetails(event) {
      var _this$props2 = this.props,
          getAudioDuration = _this$props2.getAudioDuration,
          src = _this$props2.src,
          fallbackDuration = _this$props2.duration;
      var audioType = (0, _Attachment.getExtensionFromFileName)(src);
      var durationCalc = Math.ceil(event.target.duration);
      var isDurationValid = Number.isFinite(durationCalc) && !Number.isNaN(durationCalc);
      durationCalc = isDurationValid ? durationCalc : fallbackDuration ? fallbackDuration : 0;

      var _this$getAudioDuratio = this.getAudioDurationDetails(durationCalc),
          hours = _this$getAudioDuratio.hours,
          minutes = _this$getAudioDuratio.minutes,
          seconds = _this$getAudioDuratio.seconds;

      var isShowDuration = isDurationValid || fallbackDuration !== undefined;
      this.setState({
        overallSeconds: durationCalc,
        audioHours: hours,
        audioMinutes: minutes,
        audioSeconds: seconds,
        audioType: audioType,
        disableControlIcons: false,
        isShowDuration: isShowDuration,
        disableRangeSlider: !isDurationValid
      });
      getAudioDuration && getAudioDuration(hours, minutes, seconds);
    }
  }, {
    key: "getAudioDurationDetails",
    value: function getAudioDurationDetails(valueInSec) {
      var hours = 0,
          minutes = 0,
          seconds = 0;

      if (valueInSec > 0) {
        hours = Math.floor(valueInSec / 3600);
        valueInSec %= 3600;
        minutes = Math.floor(valueInSec / 60);
        seconds = Math.floor(valueInSec % 60);
      }

      return {
        hours: hours <= 9 ? "0".concat(hours) : "".concat(hours),
        minutes: minutes <= 9 ? "0".concat(minutes) : "".concat(minutes),
        seconds: seconds <= 9 ? "0".concat(seconds) : "".concat(seconds)
      };
    }
  }, {
    key: "togglePlayPause",
    value: function togglePlayPause() {
      this.state.isPlay ? this.onPauseAudio() : this.onPlayAudio();
    }
  }, {
    key: "onPlayAudio",
    value: function onPlayAudio() {
      var _this$props3 = this.props,
          onPlay = _this$props3.onPlay,
          id = _this$props3.id;
      var _this$state = this.state,
          sliderRangeValue = _this$state.sliderRangeValue,
          overallSeconds = _this$state.overallSeconds;
      var isRestart = sliderRangeValue === overallSeconds;
      this.audio.play();
      this.intervalId = setInterval(this.updatePlayer, 1000);
      this.setState({
        isPlay: true,
        isRestart: isRestart
      });
      onPlay && onPlay(id, 'playing');
    }
  }, {
    key: "onPauseAudio",
    value: function onPauseAudio() {
      var _this$props4 = this.props,
          onPause = _this$props4.onPause,
          id = _this$props4.id;
      this.audio.pause();
      clearInterval(this.intervalId);
      this.setState({
        isPlay: false
      });
      onPause && onPause(id, 'paused');
    }
  }, {
    key: "handleClosePlayer",
    value: function handleClosePlayer() {
      var _this$props5 = this.props,
          onClose = _this$props5.onClose,
          id = _this$props5.id;
      this.togglePlayer();
      this.onPauseAudio();
      onClose && onClose(id, 'closed');
    }
  }, {
    key: "handleAudioSeeking",
    value: function handleAudioSeeking() {
      var onAudioSeeking = this.props.onAudioSeeking;
      onAudioSeeking && onAudioSeeking(this.audio.seeking);
    }
  }, {
    key: "handleAudioLoading",
    value: function handleAudioLoading() {
      var onAudioLoading = this.props.onAudioLoading;
      onAudioLoading && onAudioLoading();
    }
  }, {
    key: "handleError",
    value: function handleError() {
      var onError = this.props.onError;
      onError && onError(this.audio.error.code);
    }
  }, {
    key: "browserCompatible",
    value: function browserCompatible(playable) {
      if (playable === '') alert('Your browser is unable to play the audio');
    }
  }, {
    key: "onMuteUnmute",
    value: function onMuteUnmute(e) {
      e && e.preventDefault();
      var isMuted = this.state.isMuted;
      this.audio.muted = !isMuted;
      var onMuteUnmute = this.props.onMuteUnmute;
      this.setState({
        isMuted: !isMuted
      });
      onMuteUnmute && onMuteUnmute(!isMuted);
    }
  }, {
    key: "setInputRangeRef",
    value: function setInputRangeRef(ele) {
      var getRef = this.props.getRef;
      this.inputRange = ele;
      getRef && getRef(ele);
    }
  }, {
    key: "updateRange",
    value: function updateRange(e) {
      this.props.updateRange(e.target.value);
    }
  }, {
    key: "updatePlayer",
    value: function updatePlayer(e) {
      var _e$target;

      this.updateRangeValue(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value, this.updateTimerValues);
    }
  }, {
    key: "updateRangeValue",
    value: function updateRangeValue(value, afterUpdateCallback) {
      var _this$state2 = this.state,
          isPlay = _this$state2.isPlay,
          sliderRangeValue = _this$state2.sliderRangeValue,
          overallSeconds = _this$state2.overallSeconds,
          isRestart = _this$state2.isRestart;
      sliderRangeValue = Math.max(0, sliderRangeValue);
      var rangeValue = value || ++sliderRangeValue;

      if (rangeValue > overallSeconds && !isRestart) {
        if (isPlay) {
          this.audio.pause();
          this.setState({
            isPlay: false
          });
        }

        this.audio.currentTime = overallSeconds;
        clearInterval(this.intervalId);
        rangeValue = overallSeconds;
      }

      if (isRestart) {
        this.audio.currentTime = 0;
        rangeValue = 0;
        this.setState({
          sliderRangeValue: rangeValue,
          isRestart: false,
          isPlay: true
        });
      }

      if (rangeValue <= overallSeconds) {
        value && (this.audio.currentTime = value);
        this.setState({
          sliderRangeValue: rangeValue
        }, function () {
          return afterUpdateCallback(rangeValue);
        });
      }
    }
  }, {
    key: "updateTimerValues",
    value: function updateTimerValues(sliderRangeValue) {
      var _this$getAudioDuratio2 = this.getAudioDurationDetails(Number(sliderRangeValue)),
          hours = _this$getAudioDuratio2.hours,
          minutes = _this$getAudioDuratio2.minutes,
          seconds = _this$getAudioDuratio2.seconds;

      this.setState({
        currentHour: hours,
        currentMinute: minutes,
        currentSecond: seconds
      });
    }
  }, {
    key: "togglePlayer",
    value: function togglePlayer() {
      this.audio.pause();
      this.setState({
        isPlay: false
      });
    }
  }, {
    key: "handleKeyDown",
    value: function handleKeyDown(e) {
      var keyCode = e.keyCode;
      var sliderRangeValue = this.state.sliderRangeValue;
      var _this$props6 = this.props,
          forwardStepInSec = _this$props6.forwardStepInSec,
          backwardStepInSec = _this$props6.backwardStepInSec;
      if (keyCode === 32) this.togglePlayPause();else if (keyCode === 39) this.updatePlayer(sliderRangeValue + forwardStepInSec);else if (keyCode === 37) this.updatePlayer(sliderRangeValue - backwardStepInSec);else if (keyCode === 27) this.togglePlayer();
    }
  }, {
    key: "downloadFile",
    value: function downloadFile() {
      var _this$props7 = this.props,
          onDownloading = _this$props7.onDownloading,
          src = _this$props7.src,
          requestOptions = _this$props7.requestOptions;

      var getFileName = function getFileName(url, ext) {
        var parts = url.split('/');
        var name = parts[parts.length - 1].split('?')[0];
        return name.includes('.') ? name : "".concat(name, ".").concat(ext);
      };

      var reqOptions = requestOptions || {
        credentials: 'include'
      };
      fetch(src, reqOptions).then(function (resp) {
        return resp.blob();
      }).then(function (blob) {
        var url = window.URL.createObjectURL(blob);
        var extnsn = blob.type.split('-')[1] || blob.type.split('/')[1];
        var fileName = getFileName(src, extnsn);
        var a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        a.download = fileName;
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
      })["catch"](function () {
        return (0, _utils.openInNewTabWithNoopener)(src);
      });
      onDownloading && onDownloading();
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      var _this$state3 = this.state,
          isPlay = _this$state3.isPlay,
          currentHour = _this$state3.currentHour,
          currentMinute = _this$state3.currentMinute,
          currentSecond = _this$state3.currentSecond,
          audioHours = _this$state3.audioHours,
          audioMinutes = _this$state3.audioMinutes,
          audioSeconds = _this$state3.audioSeconds,
          isMuted = _this$state3.isMuted,
          disableControlIcons = _this$state3.disableControlIcons,
          isShowDuration = _this$state3.isShowDuration,
          disableRangeSlider = _this$state3.disableRangeSlider,
          sliderRangeValue = _this$state3.sliderRangeValue,
          overallSeconds = _this$state3.overallSeconds,
          minValue = _this$state3.minValue,
          step = _this$state3.step;
      var _this$props8 = this.props,
          src = _this$props8.src,
          needDownload = _this$props8.needDownload,
          needClose = _this$props8.needClose,
          needMuteIcon = _this$props8.needMuteIcon,
          id = _this$props8.id,
          i18nKeys = _this$props8.i18nKeys,
          dataId = _this$props8.dataId;
      var timerFormat = audioHours ? 'hh:mm:ss' : 'mm:ss';
      var loadingRange = (sliderRangeValue - minValue) * 100 / (overallSeconds - minValue);
      var _i18nKeys$playTitle = i18nKeys.playTitle,
          playTitle = _i18nKeys$playTitle === void 0 ? 'Play' : _i18nKeys$playTitle,
          _i18nKeys$pauseTitle = i18nKeys.pauseTitle,
          pauseTitle = _i18nKeys$pauseTitle === void 0 ? 'Pause' : _i18nKeys$pauseTitle,
          _i18nKeys$downloadTit = i18nKeys.downloadTitle,
          downloadTitle = _i18nKeys$downloadTit === void 0 ? 'Download' : _i18nKeys$downloadTit,
          _i18nKeys$closeTitle = i18nKeys.closeTitle,
          closeTitle = _i18nKeys$closeTitle === void 0 ? 'Close' : _i18nKeys$closeTitle,
          _i18nKeys$muteTitle = i18nKeys.muteTitle,
          muteTitle = _i18nKeys$muteTitle === void 0 ? 'Mute' : _i18nKeys$muteTitle,
          _i18nKeys$unmuteTitle = i18nKeys.unmuteTitle,
          unmuteTitle = _i18nKeys$unmuteTitle === void 0 ? 'Unmute' : _i18nKeys$unmuteTitle;
      return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
        align: "vertical",
        alignBox: "row",
        className: _AudioPlayerModule["default"].container,
        isCover: false
      }, /*#__PURE__*/_react["default"].createElement("audio", {
        id: id,
        controls: true,
        preload: "auto",
        className: _AudioPlayerModule["default"].audioHid,
        ref: function ref(ele) {
          return _this3.audio = ele;
        }
      }, /*#__PURE__*/_react["default"].createElement("source", {
        src: src,
        type: this.state.audioType
      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
        className: "".concat(_AudioPlayerModule["default"].rightBox, " ").concat(_AudioPlayerModule["default"].downloadBox, " ").concat(_AudioPlayerModule["default"].boxLeftRadius)
      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
        className: disableControlIcons ? _AudioPlayerModule["default"].disable : '',
        align: "both",
        onClick: this.togglePlayPause,
        "data-title": isPlay ? pauseTitle : playTitle,
        dataId: "".concat(dataId, "_playpause")
      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
        name: isPlay ? 'ZD-commentTimerPause' : 'ZD-bcarr',
        iconClass: "".concat(_AudioPlayerModule["default"].downloadIcon, " ").concat(_AudioPlayerModule["default"].iconColor)
      }))), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
        className: _AudioPlayerModule["default"].timerBox
      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
        align: "vertical",
        alignBox: "row"
      }, /*#__PURE__*/_react["default"].createElement(_Timer["default"], {
        timerFormat: timerFormat,
        hour: currentHour,
        minute: currentMinute,
        second: currentSecond,
        separator: "colon",
        className: _AudioPlayerModule["default"].iconColor
      }), isShowDuration && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
        className: _AudioPlayerModule["default"].line
      }, /*#__PURE__*/_react["default"].createElement("span", null, "\xA0"), "/", /*#__PURE__*/_react["default"].createElement("span", null, "\xA0")), /*#__PURE__*/_react["default"].createElement(_Timer["default"], {
        timerFormat: timerFormat,
        hour: audioHours,
        minute: audioMinutes,
        second: audioSeconds,
        separator: "colon",
        className: _AudioPlayerModule["default"].iconColor
      })))), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
        className: "".concat(_AudioPlayerModule["default"].dragtag, " ").concat(disableControlIcons || disableRangeSlider ? _AudioPlayerModule["default"].disable : _AudioPlayerModule["default"].cursor),
        flexible: true
      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
        className: _AudioPlayerModule["default"].audioRangeContainer
      }, /*#__PURE__*/_react["default"].createElement("span", {
        className: _AudioPlayerModule["default"].loading,
        style: {
          width: "".concat(loadingRange, "%")
        }
      }), /*#__PURE__*/_react["default"].createElement("input", {
        "data-id": dataId,
        ref: this.setInputRangeRef,
        className: _AudioPlayerModule["default"].input,
        type: "range",
        value: sliderRangeValue,
        min: minValue,
        max: overallSeconds,
        step: step,
        onChange: this.updatePlayer
      }))), needDownload && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
        className: "".concat(_AudioPlayerModule["default"].rightBox, " ").concat(_AudioPlayerModule["default"].downloadBox, " ").concat(!needClose && !needMuteIcon ? _AudioPlayerModule["default"].boxRightRadius : '')
      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
        className: disableControlIcons ? _AudioPlayerModule["default"].disable : '',
        align: "both",
        onClick: this.downloadFile,
        "data-title": downloadTitle,
        dataId: "".concat(dataId, "_download")
      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
        name: "ZD-downloadNew",
        iconClass: "".concat(_AudioPlayerModule["default"].downloadIcon, " ").concat(_AudioPlayerModule["default"].iconColor)
      }))), needMuteIcon && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
        className: "".concat(_AudioPlayerModule["default"].rightBox, " ").concat(_AudioPlayerModule["default"].downloadBox, " ").concat(!needClose ? _AudioPlayerModule["default"].boxRightRadius : '')
      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
        className: disableControlIcons ? _AudioPlayerModule["default"].disable : '',
        align: "both",
        onClick: this.onMuteUnmute,
        "data-title": isMuted ? unmuteTitle : muteTitle,
        dataId: "".concat(dataId, "_muteUnmute")
      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
        name: isMuted ? 'ZD-mute1New' : 'ZD-kbcatlogovolume',
        iconClass: "".concat(_AudioPlayerModule["default"].downloadIcon, " ").concat(_AudioPlayerModule["default"].iconColor)
      }))), needClose && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
        className: "".concat(_AudioPlayerModule["default"].closeBox, " ").concat(_AudioPlayerModule["default"].boxRightRadius)
      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
        className: disableControlIcons ? _AudioPlayerModule["default"].disable : '',
        align: "both",
        onClick: this.handleClosePlayer,
        "data-title": closeTitle,
        dataId: "".concat(dataId, "_close")
      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
        name: "ZD-cross",
        iconClass: "".concat(_AudioPlayerModule["default"].pauseIcon, " ").concat(_AudioPlayerModule["default"].iconColor)
      }))));
    }
  }]);

  return AudioPlayerChild;
}(_react["default"].Component);