@lideralia/alife-uikit 1.2.30 → 1.2.32

package/dist/atoms/Button/Button.js

@@ -57,7 +57,8 @@ var ButtonTabs = function ButtonTabs(_ref2) {
   }, rest), _react.default.createElement(_Layout.Flex, {
     backgroundColor: "black12",
     borderRadius: 3,
-    padding: 1
+    padding: 1,
+    overflow: "hidden"
   }, items === null || items === void 0 ? void 0 : items.map(function (item) {
     return _react.default.createElement(Button, (0, _extends2.default)({
       key: item.id,

package/dist/atoms/Icons/IconClockBig.js

@@ -19,8 +19,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function SvgIconClockBig(props) {
   return React.createElement("svg", (0, _extends2.default)({
-    width: "8.5em",
-    height: "8.5em",
+    width: "1em",
+    height: "1em",
     viewBox: "0 0 120 120",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",

package/dist/atoms/Icons/IconHeadphones.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function SvgIconHeadphones(props) {
+  return React.createElement("svg", (0, _extends2.default)({
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    preserveAspectRatio: "xMidYMid meet",
+    stroke: props.stroke
+  }, props), React.createElement("path", {
+    d: "M3 12.75v0a.75.75 0 01-.75-.75V9A6.75 6.75 0 019 2.25v0A6.75 6.75 0 0115.75 9v3a.75.75 0 01-.75.75v0",
+    stroke: "inherit",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), React.createElement("path", {
+    d: "M3 12.25a2.5 2.5 0 012.5-2.5v0c.69 0 1.25.56 1.25 1.25v3.5c0 .69-.56 1.25-1.25 1.25v0a2.5 2.5 0 01-2.5-2.5v-1zM11.25 11c0-.69.56-1.25 1.25-1.25v0a2.5 2.5 0 012.5 2.5v1a2.5 2.5 0 01-2.5 2.5v0c-.69 0-1.25-.56-1.25-1.25V11z",
+    stroke: "inherit",
+    strokeWidth: 1.5,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+}
+
+var _default = SvgIconHeadphones;
+exports.default = _default;

package/dist/atoms/Icons/IconMicrophone.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function SvgIconMicrophone(props) {
+  return React.createElement("svg", (0, _extends2.default)({
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    preserveAspectRatio: "xMidYMid meet",
+    stroke: props.stroke
+  }, props), React.createElement("path", {
+    d: "M9 21h6M12 21v-3",
+    stroke: "inherit",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), React.createElement("rect", {
+    x: 9,
+    y: 2,
+    width: 6,
+    height: 12,
+    rx: 3,
+    stroke: "inherit",
+    strokeWidth: 2,
+    strokeLinejoin: "round"
+  }), React.createElement("path", {
+    d: "M5 11l.151 1.06A6.918 6.918 0 0012 18v0a6.918 6.918 0 006.849-5.94L19 11",
+    stroke: "inherit",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+}
+
+var _default = SvgIconMicrophone;
+exports.default = _default;

package/dist/atoms/Icons/index.js

@@ -413,6 +413,12 @@ Object.defineProperty(exports, "IconGrave", {
     return _IconGrave.default;
   }
 });
+Object.defineProperty(exports, "IconHeadphones", {
+  enumerable: true,
+  get: function get() {
+    return _IconHeadphones.default;
+  }
+});
 Object.defineProperty(exports, "IconHelp", {
   enumerable: true,
   get: function get() {
@@ -527,6 +533,12 @@ Object.defineProperty(exports, "IconMenu", {
     return _IconMenu.default;
   }
 });
+Object.defineProperty(exports, "IconMicrophone", {
+  enumerable: true,
+  get: function get() {
+    return _IconMicrophone.default;
+  }
+});
 Object.defineProperty(exports, "IconNotification", {
   enumerable: true,
   get: function get() {
@@ -994,6 +1006,8 @@ var _IconFrame = _interopRequireDefault(require("./IconFrame"));
 
 var _IconGrave = _interopRequireDefault(require("./IconGrave"));
 
+var _IconHeadphones = _interopRequireDefault(require("./IconHeadphones"));
+
 var _IconHelpCircle = _interopRequireDefault(require("./IconHelpCircle"));
 
 var _IconHelp = _interopRequireDefault(require("./IconHelp"));
@@ -1032,6 +1046,8 @@ var _IconManagement = _interopRequireDefault(require("./IconManagement"));
 
 var _IconMenu = _interopRequireDefault(require("./IconMenu"));
 
+var _IconMicrophone = _interopRequireDefault(require("./IconMicrophone"));
+
 var _IconNotification = _interopRequireDefault(require("./IconNotification"));
 
 var _IconPauseCircle = _interopRequireDefault(require("./IconPauseCircle"));

package/dist/organisms/Audios/Audio.js

@@ -0,0 +1,135 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CardAudio = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _wavesurfer = _interopRequireDefault(require("wavesurfer.js"));
+
+var _Icons = require("../../atoms/Icons");
+
+var _Icon = require("../../atoms/Icon");
+
+var _Layout = require("../../atoms/Layout");
+
+var _Typography = require("../../atoms/Typography");
+
+var _Button = require("../../atoms/Button");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var CardAudio = function CardAudio(_ref) {
+  var contentColor = _ref.contentColor,
+      audio = _ref.audio;
+  var waveformRef = (0, _react.useRef)();
+  var waveSurferRef = (0, _react.useRef)({
+    isPlaying: function isPlaying() {
+      return false;
+    }
+  });
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isPlaying = _useState2[0],
+      toggleIsPlaying = _useState2[1];
+
+  var _useState3 = (0, _react.useState)('00:00'),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      durationTime = _useState4[0],
+      setDurationTime = _useState4[1];
+
+  var _useState5 = (0, _react.useState)('00:00'),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      currentTime = _useState6[0],
+      setCurrentTime = _useState6[1];
+
+  var secondsToMMss = function secondsToMMss(seconds) {
+    return new Date(seconds * 1000).toISOString().substring(14, 19);
+  };
+
+  (0, _react.useEffect)(function () {
+    var waveSurfer = _wavesurfer.default.create({
+      container: waveformRef.current,
+      waveColor: 'rgba(242, 242, 243, 1)',
+      progressColor: contentColor,
+      barWidth: 3,
+      barRadius: 3,
+      cursorWidth: 0,
+      height: 100,
+      barGap: 4
+    });
+
+    waveSurfer.load(audio);
+    waveSurfer.on('ready', function () {
+      waveSurfer.setProgressColor(contentColor);
+      waveSurferRef.current = waveSurfer;
+      setDurationTime(secondsToMMss(waveSurfer.getDuration()));
+      var peaks = waveSurfer.backend.getPeaks(1024);
+      var minValue = Math.min.apply(Math, (0, _toConsumableArray2.default)(peaks));
+      var maxValue = Math.max.apply(Math, (0, _toConsumableArray2.default)(peaks));
+      var volume = peaks.map(function (value) {
+        return value > 0.05 ? value - minValue - 0.01 / (maxValue - minValue) : 0.05;
+      });
+      waveSurfer.drawer.drawPeaks(volume, waveSurfer.drawer.width, 0, volume.length);
+    });
+    waveSurfer.on('audioprocess', function () {
+      setCurrentTime(secondsToMMss(waveSurfer.getCurrentTime()));
+    });
+    waveSurfer.on('seek', function () {
+      setCurrentTime(secondsToMMss(waveSurfer.getCurrentTime()));
+    });
+    waveSurfer.on('error', function (e) {});
+    waveSurfer.on('finish', function () {
+      toggleIsPlaying(false);
+    });
+    return function () {
+      waveSurfer.destroy();
+    };
+  }, []);
+  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("div", {
+    ref: waveformRef,
+    style: {
+      margin: '-13px auto'
+    }
+  }), _react.default.createElement(_Layout.Flex, {
+    justifyContent: "space-between"
+  }, _react.default.createElement(_Layout.Box, null, _react.default.createElement(_Typography.Text, {
+    color: "black36",
+    sizeText: "display12"
+  }, currentTime)), _react.default.createElement(_Layout.Box, null, _react.default.createElement(_Typography.Text, {
+    color: "black36",
+    sizeText: "display12"
+  }, durationTime))), _react.default.createElement(_Button.Button, {
+    colorType: contentColor,
+    backgroundColor: contentColor,
+    rounded: true,
+    sizeButton: "none",
+    action: function action() {
+      waveSurferRef.current.playPause();
+      toggleIsPlaying(!isPlaying);
+    },
+    width: "45px",
+    height: "45px",
+    marginTop: 2
+  }, _react.default.createElement(_Icon.Icon, {
+    sizeIcon: "display24",
+    color: "white"
+  }, isPlaying ? _react.default.createElement(_Icons.IconPause, null) : _react.default.createElement(_Icons.IconPlay, {
+    fill: "#fff"
+  }))));
+};
+
+exports.CardAudio = CardAudio;

package/dist/organisms/Audios/Audio.stories.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Audio = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Audio = require("./Audio");
+
+var _Layout = require("../../atoms/Layout");
+
+var _default = {
+  title: 'Organisms/Audios',
+  component: _Audio.CardAudio
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return _react.default.createElement(_Layout.Container, null, _react.default.createElement(_Layout.Row, {
+    justifyContent: "center",
+    alignItems: "center"
+  }, _react.default.createElement(_Layout.Col, {
+    width: [1, 1, 1 / 2]
+  }, _react.default.createElement(_Audio.CardAudio, args))));
+};
+
+var Audio = Template.bind({});
+exports.Audio = Audio;
+Audio.args = {
+  contentColor: 'orange',
+  audio: "https://s3-eu-west-1.amazonaws.com/alife-cdn-test/audios/21/63/or_1163-3a4659f286180e236fc7db552889cd16.mp3"
+};

package/dist/organisms/Audios/CreateAudio.js

@@ -0,0 +1,404 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CreateAudio = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _recordrtc = _interopRequireDefault(require("recordrtc"));
+
+var _wavesurfer = _interopRequireDefault(require("wavesurfer.js"));
+
+var _Button = require("../../atoms/Button");
+
+var _Icon = require("../../atoms/Icon");
+
+var _Icons = require("../../atoms/Icons");
+
+var _Layout = require("../../atoms/Layout");
+
+var _Typography = require("../../atoms/Typography");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var CreateAudio = function CreateAudio(_ref) {
+  var textStopRecording = _ref.textStopRecording,
+      textStartRecording = _ref.textStartRecording,
+      audioData = _ref.audioData,
+      contentColor = _ref.contentColor,
+      textMicrophonePermissionDenied = _ref.textMicrophonePermissionDenied;
+  var mediaRecorderRef = (0, _react.useRef)(null);
+  var waveSurferRef = (0, _react.useRef)({
+    isPlaying: function isPlaying() {
+      return false;
+    }
+  });
+  var waveformRef = (0, _react.useRef)();
+  var waveformRefPlaceholder = (0, _react.useRef)();
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isRecording = _useState2[0],
+      setIsRecording = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      waveSurfer = _useState4[0],
+      setWaveSurfer = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      isPlaying = _useState6[0],
+      toggleIsPlaying = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      countdownActive = _useState8[0],
+      setCountdownActive = _useState8[1];
+
+  var _useState9 = (0, _react.useState)('00:00'),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      durationTimerAudio = _useState10[0],
+      setDurationTimerAudio = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(20),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      durationTime = _useState12[0],
+      setDurationTime = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      isMicrophoneBlocked = _useState14[0],
+      setIsMicrophoneBlocked = _useState14[1];
+
+  var handleToggleRecording = function handleToggleRecording() {
+    if (isMicrophoneBlocked) return;
+
+    if (isRecording) {
+      setCountdownActive(false);
+      mediaRecorderRef.current.stopRecording((0, _asyncToGenerator2.default)(_regenerator.default.mark(function _callee() {
+        var audioBlob;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                audioBlob = mediaRecorderRef.current.getBlob();
+                waveSurfer.load(URL.createObjectURL(audioBlob));
+                audioData(audioBlob);
+
+              case 3:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      })));
+    } else {
+      navigator.mediaDevices.getUserMedia({
+        audio: true
+      }).then(function (stream) {
+        var options = {
+          type: 'audio',
+          mimeType: 'audio/webm',
+          timeSlice: 1000
+        };
+        setCountdownActive(true);
+        setDurationTime(20);
+        var mediaRecorder = new _recordrtc.default(stream, options);
+        mediaRecorderRef.current = mediaRecorder;
+        mediaRecorderRef.current.startRecording();
+      }).catch(function (error) {
+        if (error.name === 'NotAllowedError' || error.name === 'PermissionDeniedError') setIsMicrophoneBlocked(true);
+      });
+    }
+
+    setIsRecording(function (prevIsRecording) {
+      return !prevIsRecording;
+    });
+  };
+
+  var handleDeleteAudio = function handleDeleteAudio() {
+    setDurationTime(20);
+    waveSurfer.empty();
+    audioData(null);
+  };
+
+  (0, _react.useEffect)(function () {
+    var interval;
+
+    if (countdownActive) {
+      interval = setInterval(function () {
+        setDurationTime(function (prevSegundos) {
+          return prevSegundos - 1;
+        });
+      }, 1000);
+    }
+
+    if (durationTime === 0 && countdownActive) {
+      setCountdownActive(false);
+      handleToggleRecording();
+    }
+
+    return function () {
+      clearInterval(interval);
+    };
+  }, [countdownActive, durationTime]);
+  (0, _react.useEffect)(function () {
+    var colorWave = 'rgba(242, 242, 243, 1)';
+
+    var waveSurferCreate = _wavesurfer.default.create({
+      container: waveformRef.current,
+      waveColor: colorWave,
+      progressColor: contentColor,
+      barWidth: 3,
+      barRadius: 3,
+      cursorWidth: 0,
+      height: 100,
+      hideScrollbar: true,
+      width: '100%',
+      fillParent: true,
+      barGap: 4,
+      scrollParent: true,
+      partialRender: true,
+      responsive: true
+    });
+
+    var waveSurferCreatePlaceholder = _wavesurfer.default.create({
+      container: waveformRefPlaceholder.current,
+      waveColor: colorWave,
+      progressColor: colorWave,
+      barWidth: 3,
+      barRadius: 3,
+      cursorWidth: 0,
+      height: 100,
+      width: '100%',
+      fillParent: true,
+      hideScrollbar: true,
+      minPxPerSec: 50,
+      barGap: 4,
+      scrollParent: true,
+      partialRender: true,
+      responsive: true
+    });
+
+    setWaveSurfer(waveSurferCreate);
+    var fakePeaks = [0.05, 0.05, 0.05, 0.05, 0.05, 0.05, 0.05, 0.05, 0.05, 0.05, 0.05, 0.05, 0.05, 0.05, 0.05, 0.05, 0.05, 0.05, 0.05, 0.05];
+    waveSurferCreatePlaceholder.load('https://www.mfiles.co.uk/mp3-downloads/gs-cd-track2.mp3', fakePeaks);
+    return function () {
+      waveSurferCreate.destroy();
+      waveSurferCreatePlaceholder.destroy();
+    };
+  }, []);
+
+  var secondsToMMss = function secondsToMMss(seconds) {
+    return new Date(seconds * 1000).toISOString().substring(14, 19);
+  };
+
+  (0, _react.useEffect)(function () {
+    if (!waveSurfer) return;
+    waveSurfer.on('ready', function () {
+      waveSurfer.setProgressColor(contentColor);
+      waveSurferRef.current = waveSurfer;
+      setDurationTimerAudio(secondsToMMss(waveSurfer.getDuration()));
+      var peaks = waveSurfer.backend.getPeaks(1024);
+      var minValue = Math.min.apply(Math, (0, _toConsumableArray2.default)(peaks));
+      var maxValue = Math.max.apply(Math, (0, _toConsumableArray2.default)(peaks));
+      var volume = peaks.map(function (value) {
+        return value > 0.05 ? value - minValue - 0.01 / (maxValue - minValue) : 0.05;
+      });
+      waveSurfer.drawer.drawPeaks(volume, waveSurfer.drawer.width, 0, volume.length);
+      waveSurfer.drawer.containerWidth = waveSurfer.drawer.container.clientWidth;
+      waveSurfer.drawBuffer();
+    });
+    waveSurfer.on('audioprocess', function () {
+      setDurationTimerAudio(secondsToMMss(waveSurfer.getCurrentTime()));
+    });
+    waveSurfer.on('finish', function () {
+      toggleIsPlaying(false);
+    });
+  }, [waveSurfer]);
+
+  if (isMicrophoneBlocked) {
+    return _react.default.createElement(_Typography.Text, {
+      sizeText: "display16",
+      fontWeight: "bold",
+      display: "flex",
+      style: {
+        justifyContent: 'center'
+      }
+    }, textMicrophonePermissionDenied);
+  }
+
+  return _react.default.createElement(_Layout.Box, {
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    style: {
+      gap: '10px'
+    }
+  }, !(waveSurfer !== null && waveSurfer !== void 0 && waveSurfer.isReady) ? _react.default.createElement(_Button.Button, {
+    colorType: contentColor,
+    backgroundColor: contentColor,
+    rounded: true,
+    sizeButton: "none",
+    action: handleToggleRecording,
+    width: "45px",
+    height: "45px"
+  }, _react.default.createElement(_Icon.Icon, {
+    sizeIcon: "display24",
+    color: "white"
+  }, isRecording ? _react.default.createElement(_Icons.IconPause, null) : _react.default.createElement(_Icons.IconMicrophone, null))) : _react.default.createElement(_Button.Button, {
+    colorType: contentColor,
+    backgroundColor: contentColor,
+    rounded: true,
+    sizeButton: "none",
+    action: function action() {
+      waveSurferRef.current.playPause();
+      toggleIsPlaying(!isPlaying);
+    },
+    width: "45px",
+    height: "45px"
+  }, _react.default.createElement(_Icon.Icon, {
+    sizeIcon: "display24",
+    color: "white"
+  }, isPlaying ? _react.default.createElement(_Icons.IconPause, null) : _react.default.createElement(_Icons.IconPlay, {
+    stroke: "white"
+  }))), _react.default.createElement(TextExplainButton, {
+    isRecording: isRecording,
+    textStopRecording: textStopRecording,
+    textStartRecording: textStartRecording
+  }), _react.default.createElement("div", {
+    ref: waveformRef,
+    style: {
+      display: "".concat(waveSurfer !== null && waveSurfer !== void 0 && waveSurfer.isReady ? 'block' : 'none'),
+      width: '100%'
+    }
+  }), _react.default.createElement("div", {
+    ref: waveformRefPlaceholder,
+    style: {
+      display: "".concat(!(waveSurfer !== null && waveSurfer !== void 0 && waveSurfer.isReady) ? 'initial' : 'none'),
+      width: '100%'
+    }
+  }), _react.default.createElement(_Typography.Text, {
+    color: "black36",
+    sizeText: "display12"
+  }, countdownActive || durationTime === 20 ? "-00:".concat(durationTime < 10 ? "0".concat(durationTime) : durationTime) : durationTimerAudio), (waveSurfer === null || waveSurfer === void 0 ? void 0 : waveSurfer.isReady) && _react.default.createElement(_Button.Button, {
+    colorType: "none",
+    action: function action() {
+      return handleDeleteAudio();
+    },
+    padding: 0,
+    minWidth: "auto"
+  }, _react.default.createElement(_Icon.Icon, {
+    sizeIcon: "display24",
+    color: "red"
+  }, _react.default.createElement(_Icons.IconTrash, null))));
+};
+
+exports.CreateAudio = CreateAudio;
+
+var TextExplainButton = function TextExplainButton(_ref3) {
+  var textStopRecording = _ref3.textStopRecording,
+      textStartRecording = _ref3.textStartRecording,
+      isRecording = _ref3.isRecording;
+  var firstStart = (0, _react.useRef)(true);
+  var firstStop = (0, _react.useRef)(true);
+
+  var _useState15 = (0, _react.useState)(firstStop.current),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      firstTimeStop = _useState16[0],
+      setFirstTimeStop = _useState16[1];
+
+  var _useState17 = (0, _react.useState)(firstStart.current),
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      firstTimeStart = _useState18[0],
+      setFirstTimeStart = _useState18[1];
+
+  var stylesDiv = {
+    backgroundColor: 'white',
+    position: 'absolute',
+    top: '90px',
+    left: '5px',
+    padding: '14px',
+    zIndex: '10',
+    borderRadius: '9px',
+    filter: 'drop-shadow(0px 8px 18px rgba(60, 54, 58, 0.1)) drop-shadow(0px -8px 18px rgba(60, 54, 58, 0.1))'
+  };
+  var stylesTriangle = {
+    position: 'absolute',
+    top: '-20px',
+    borderLeft: '5px solid transparent',
+    borderRight: '5px solid transparent',
+    borderBottom: '10px solid white',
+    width: 0,
+    height: 0,
+    filter: 'drop-shadow(0px 8px 18px rgba(60, 54, 58, 0.1)) drop-shadow(0px -8px 18px rgba(60, 54, 58, 0.1))'
+  };
+  (0, _react.useEffect)(function () {
+    var timeout;
+    if (!firstStop.current && !firstStart.current) return;
+
+    if (isRecording) {
+      if (!firstStop.current) return;
+      timeout = setTimeout(function () {
+        firstStop.current = false;
+        setFirstTimeStop(false);
+      }, 2000);
+    } else {
+      if (!firstStart.current) return;
+      timeout = setTimeout(function () {
+        firstStart.current = false;
+        setFirstTimeStart(false);
+      }, 2000);
+    }
+
+    return function () {
+      return clearTimeout(timeout);
+    };
+  }, [isRecording]);
+  if (!firstStart.current && !firstStop.current) return null;
+
+  if (isRecording && firstTimeStop) {
+    return _react.default.createElement("div", {
+      style: stylesDiv
+    }, _react.default.createElement(_Layout.Box, {
+      position: "relative"
+    }, _react.default.createElement("div", {
+      style: stylesTriangle
+    })), _react.default.createElement(_Typography.Text, {
+      color: "black84",
+      sizeText: "display12"
+    }, textStopRecording));
+  }
+
+  if (!isRecording && firstTimeStart) {
+    return _react.default.createElement("div", {
+      style: stylesDiv
+    }, _react.default.createElement(_Layout.Box, {
+      position: "relative"
+    }, _react.default.createElement("div", {
+      style: stylesTriangle
+    })), _react.default.createElement(_Typography.Text, {
+      color: "black84",
+      sizeText: "display12"
+    }, textStartRecording));
+  }
+
+  return null;
+};

package/dist/organisms/Audios/CreateAudio.stories.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AddAudio = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _CreateAudio = require("./CreateAudio");
+
+var _default = {
+  title: 'Organisms/Audios',
+  component: _CreateAudio.CreateAudio
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return _react.default.createElement(_CreateAudio.CreateAudio, args);
+};
+
+var AddAudio = Template.bind({});
+exports.AddAudio = AddAudio;
+AddAudio.args = {
+  textStopRecording: 'Pulsa para parar la grabación',
+  textStartRecording: 'Pulsa para empezar a grabar',
+  textMicrophonePermissionDenied: 'Tienes el micrófono deshabilitado, por favor actívalo e inténtelo de nuevo.',
+  contentColor: '#aed603',
+  audioData: function audioData(data) {
+    return void 0;
+  }
+};

package/dist/organisms/Audios/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CardAudio", {
+  enumerable: true,
+  get: function get() {
+    return _Audio.CardAudio;
+  }
+});
+
+var _Audio = require("./Audio");

package/dist/organisms/Cards/Badges.js

@@ -29,6 +29,8 @@ var _PlaceholderLoad = require("../../atoms/PlaceholderLoad");
 
 var _IconClose = _interopRequireDefault(require("../../atoms/Icons/IconClose"));
 
+var _Audio = require("../Audios/Audio");
+
 var CardBadges = function CardBadges(_ref) {
   var props = (0, _extends2.default)({}, _ref);
   return _react.default.createElement(_Card.Card, {
@@ -90,17 +92,17 @@ CardBadges.Body = function (props) {
   var text = props.text,
       picture = props.picture,
       countryCode = props.countryCode,
-      showCountry = props.showCountry;
-  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Layout.Flex, null, text && !picture && _react.default.createElement(_Typography.Text, {
-    sizeText: "display16",
-    color: "black"
-  }, text || _react.default.createElement(_PlaceholderLoad.PlaceholderLoad, {
-    height: "22px"
-  })), picture && _react.default.createElement(_Image.Image, {
-    height: "176px",
-    width: "100%",
-    src: picture
-  })), showCountry && countryCode && _react.default.createElement(_Layout.Flex, {
+      showCountry = props.showCountry,
+      audio = props.audio,
+      contentColor = props.contentColor;
+  return _react.default.createElement(_react.default.Fragment, null, text && !picture && _react.default.createElement(CardText, {
+    text: text
+  }), picture && _react.default.createElement(CardPicture, {
+    picture: picture
+  }), audio ? _react.default.createElement(_Audio.CardAudio, {
+    contentColor: contentColor,
+    audio: audio
+  }) : null, showCountry && countryCode && _react.default.createElement(_Layout.Flex, {
     style: {
       flexFlow: 'row-reverse'
     }
@@ -110,6 +112,25 @@ CardBadges.Body = function (props) {
   }, countryCode)));
 };
 
+var CardText = function CardText(_ref2) {
+  var text = _ref2.text;
+  return _react.default.createElement(_Layout.Flex, null, _react.default.createElement(_Typography.Text, {
+    sizeText: "display16",
+    color: "black"
+  }, text || _react.default.createElement(_PlaceholderLoad.PlaceholderLoad, {
+    height: "22px"
+  })));
+};
+
+var CardPicture = function CardPicture(_ref3) {
+  var picture = _ref3.picture;
+  return _react.default.createElement(_Layout.Flex, null, _react.default.createElement(_Image.Image, {
+    height: "176px",
+    width: "100%",
+    src: picture
+  }));
+};
+
 CardBadges.Header.propTypes = {
   authorName: _propTypes.default.string.isRequired,
   contentIcon: _propTypes.default.element.isRequired,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lideralia/alife-uikit",
-  "version": "1.2.30",
+  "version": "1.2.32",
   "description": "Librería y documentación de componentes, basada en el Design System de Alife.",
   "homepage": "https://github.com/lideralia/alife-frontend-components#readme",
   "bugs": {
@@ -93,8 +93,10 @@
     "react-livechat": "^1.1.1",
     "react-scripts": "4.0.3",
     "react-select": "^4.1.0",
+    "recordrtc": "^5.6.2",
     "styled-components": "^5.2.0",
     "styled-system": "^5.1.4",
+    "wavesurfer.js": "^6.6.3",
     "web-vitals": "^0.2.4"
   },
   "devDependencies": {