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

## Introduction

"use strict";

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

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

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

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

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

const YoutubeRenderWrapper = _styledComponents.default.div`
  ${_sharedStyle.defaultMarginTop}
  ${_sharedStyle.defaultMarginBottom}
`;
const IframeWrapper = _styledComponents.default.div`
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
`;
const Iframe = _styledComponents.default.iframe`
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
`;
const Caption = _styledComponents.default.div`
  line-height: 1.43;
  letter-spacing: 0.4px;
  font-size: 14px;
  color: #808080;
  padding: 15px 15px 0 15px;
`;

function YoutubeBlock(entity, contentLayout) {
  const isAmp = contentLayout === 'amp';
  const {
    youtubeId,
    description
  } = entity.getData();

  function handleYoutubeId(urlOrId = '') {
    // 使用正規表達式檢查可能的 YouTube ID 格式
    const youtubeIdRegex = /^(?:https?:\/\/(?:www\.)?youtube\.com\/watch\?v=|https?:\/\/youtu.be\/|\/id\/)?([a-zA-Z0-9_-]{11})/i;
    const matches = urlOrId.startsWith('/') ? urlOrId.replace('/', '').match(youtubeIdRegex) : urlOrId.match(youtubeIdRegex);

    if (matches && matches[1]) {
      return matches[1];
    }

    return '';
  }

  const ampYoutubeIframe = youtubeId ? /*#__PURE__*/_react.default.createElement(IframeWrapper, null, /*#__PURE__*/_react.default.createElement("amp-youtube", {
    "data-videoid": handleYoutubeId(youtubeId),
    layout: "fill"
  }, /*#__PURE__*/_react.default.createElement("amp-img", {
    src: `https://i.ytimg.com/vi/${handleYoutubeId(youtubeId)}/hqdefault.jpg`,
    placeholder: true,
    layout: "fill"
  }))) : null;
  const youtubeIframe = youtubeId ? /*#__PURE__*/_react.default.createElement(IframeWrapper, null, /*#__PURE__*/_react.default.createElement(Iframe, {
    src: `https://www.youtube.com/embed/${youtubeId}`,
    loading: "lazy",
    frameBorder: "0",
    allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
    allowFullScreen: true
  })) : null;
  return /*#__PURE__*/_react.default.createElement(YoutubeRenderWrapper, null, isAmp ? ampYoutubeIframe : youtubeIframe, description && /*#__PURE__*/_react.default.createElement(Caption, null, description));
}