@mirrormedia/lilith-draft-renderer/lib/website/mirrormedia/block-renderers/audio-block.js

## Introduction

"use strict";

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

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

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _ampAudioBlock = _interopRequireDefault(require("./amp/amp-audio-block"));

var _ampAudioBlockV = _interopRequireDefault(require("./amp/amp-audio-block-v2"));

var _sharedStyle = require("../shared-style");

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

const AudioWrapper = _styledComponents.default.div`
  display: flex;
  gap: 8px;
  align-items: start;
  flex-direction: column;
  ${_sharedStyle.defaultMarginTop}
  ${_sharedStyle.defaultMarginBottom}
  ${({
  theme
}) => theme.breakpoint.md} {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
  }
`;
const AudioName = _styledComponents.default.p`
  color: #979797;
  font-size: 14px;
  line-height: 2;
  font-weight: 500;
`;
const Audio = _styledComponents.default.audio`
  width: 100%;
  max-width: 300px;
`;

/**
 * Before 202310, audio which contain property `urlOriginal` and not contain property `audioSrc`.
 */
function AudioBlock(entity, contentLayout) {
  var _audio$file;

  const isAmp = contentLayout === 'amp';
  const {
    audio
  } = entity.getData();
  const AudioJsx = isAmp ? /*#__PURE__*/_react.default.createElement(_ampAudioBlock.default, {
    audio: audio
  }) : /*#__PURE__*/_react.default.createElement(Audio, {
    controls: true
  }, /*#__PURE__*/_react.default.createElement("source", {
    src: audio === null || audio === void 0 ? void 0 : audio.urlOriginal
  }), /*#__PURE__*/_react.default.createElement("source", {
    src: audio === null || audio === void 0 ? void 0 : (_audio$file = audio.file) === null || _audio$file === void 0 ? void 0 : _audio$file.url
  }));
  return /*#__PURE__*/_react.default.createElement(AudioWrapper, null, /*#__PURE__*/_react.default.createElement(AudioName, null, audio === null || audio === void 0 ? void 0 : audio.name), AudioJsx);
}
/**
 * After 202310, audio which only contain property `audioSrc`, and property `urlOriginal` is an empty string.
 */


function AudioBlockV2(entity, contentLayout) {
  var _audio$file2;

  const isAmp = contentLayout === 'amp';
  const {
    audio
  } = entity.getData();
  const AudioJsx = isAmp ? /*#__PURE__*/_react.default.createElement(_ampAudioBlockV.default, {
    audio: audio
  }) : /*#__PURE__*/_react.default.createElement(Audio, {
    controls: true
  }, /*#__PURE__*/_react.default.createElement("source", {
    src: audio === null || audio === void 0 ? void 0 : audio.audioSrc
  }), /*#__PURE__*/_react.default.createElement("source", {
    src: audio === null || audio === void 0 ? void 0 : (_audio$file2 = audio.file) === null || _audio$file2 === void 0 ? void 0 : _audio$file2.url
  }));
  return /*#__PURE__*/_react.default.createElement(AudioWrapper, null, /*#__PURE__*/_react.default.createElement(AudioName, null, audio === null || audio === void 0 ? void 0 : audio.name), AudioJsx);
}