@zohodesk/dot 1.7.19 → 1.7.20-exp.2

package/lib/AudioPlayer/AudioPlayer.js

@@ -0,0 +1,662 @@
+"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);