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

## Introduction

"use strict";

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

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

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

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }

const audioPlay = "https://unpkg.com/@mirrormedia/lilith-draft-renderer@1.4.5/lib/public/dc249b3412c5af890a004508287a3c3d.png";
const audioPause = "https://unpkg.com/@mirrormedia/lilith-draft-renderer@1.4.5/lib/public/5b3cb1a908786c8750f1041860699cc1.png";
const buttonShareStyle = (0, _styledComponents.css)`
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 22px;

  &:hover {
    opacity: 0.8;
  }
`;
const audioTimeShareStyle = (0, _styledComponents.css)`
  color: rgba(0, 9, 40, 0.5);
  font-weight: 400;
  font-size: 11px;
  line-height: 1em;
  position: absolute;
  bottom: 0px;

  ${({
  theme
}) => theme.breakpoint.md} {
    font-size: 13px;
  }
`;
const AudioWrapper = _styledComponents.default.div`
  position: relative;
  outline: 1px solid rgba(0, 9, 40, 0.1);
  padding: 16px 0px 16px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 480px;
  ${({
  theme
}) => theme.margin.default}

  ${({
  theme
}) => theme.breakpoint.md} {
    padding: 24px 0px 28px 24px;
  }

  audio {
    max-height: 40px;
    width: 100%;
    position: relative;
    pointer-events: none;
  }

  audio::-webkit-media-controls-panel {
    background: #ffffff;
  }

  //remove default audio style: volume, mute, play
  audio::-webkit-media-controls-volume-slider,
  audio::-webkit-media-controls-mute-button,
  audio::-webkit-media-controls-play-button {
    display: none;
  }

  //時間進度條
  audio::-webkit-media-controls-timeline {
    height: 4px;
    opacity: 0.3;
    padding: 0;
    margin-bottom: 10px;
  }

  //目前播放時間
  audio::-webkit-media-controls-current-time-display {
    ${audioTimeShareStyle}
    left: 5px;
  }

  //總時長
  audio::-webkit-media-controls-time-remaining-display {
    ${audioTimeShareStyle}
    left: 36px;
  }
`;
const AudioInfo = _styledComponents.default.div`
  width: calc(100% - 70px);
`;
const AudioTitle = _styledComponents.default.div`
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4em;
  color: rgba(0, 9, 40, 0.87);
  padding: 0 40px 0px 10px;

  ${({
  theme
}) => theme.breakpoint.md} {
    font-size: 16px;
  }
`;
const PlayButton = _styledComponents.default.button`
  ${buttonShareStyle}
  background-color: #f6f6fb;
  background-image: url(${audioPlay});

  &:hover {
    opacity: 0.66;
  }
`;
const PauseButton = _styledComponents.default.button`
  ${buttonShareStyle}
  background-color: rgba(0, 9, 40, 0.87);
  background-image: url(${audioPause});
`;

function AudioBlock(entity) {
  const {
    audio
  } = entity.getData();
  const audioRef = (0, _react.useRef)(null);
  const [isPlaying, setIsPlaying] = (0, _react.useState)(false);

  const handlePlay = () => {
    audioRef === null || audioRef === void 0 ? void 0 : audioRef.current.play();
    setIsPlaying(true);
  };

  const handlePause = () => {
    audioRef === null || audioRef === void 0 ? void 0 : audioRef.current.pause();
    setIsPlaying(false);
  };

  return /*#__PURE__*/_react.default.createElement(AudioWrapper, null, isPlaying ? /*#__PURE__*/_react.default.createElement(PauseButton, {
    onClick: handlePause
  }) : /*#__PURE__*/_react.default.createElement(PlayButton, {
    onClick: handlePlay
  }), /*#__PURE__*/_react.default.createElement(AudioInfo, null, /*#__PURE__*/_react.default.createElement(AudioTitle, null, audio === null || audio === void 0 ? void 0 : audio.name), /*#__PURE__*/_react.default.createElement("audio", {
    controls: true,
    id: "player",
    ref: audioRef,
    src: audio === null || audio === void 0 ? void 0 : audio.url,
    controlsList: "nodownload noremoteplayback noplaybackrate nofullscreen",
    preload: "auto"
  })));
}