@mirrormedia/lilith-draft-renderer/lib/website/mirrortv/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%; // 保持 16:9 比例
  overflow: hidden;
  background-color: #000;
`;
const Iframe = _styledComponents.default.iframe`
  position: absolute;
  top: 0;
  left: 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;
`;
/**
 * 處理 YouTube ID 的輔助函式 (抽出至組件外，避免重複宣告)
 */

function handleYoutubeId(urlOrId = '') {
  if (!urlOrId) return '';
  const youtubeIdRegex = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?|shorts)\/|.*[?&]v=)|youtu\.be\/|^)([a-zA-Z0-9_-]{11})/i;
  const matches = urlOrId.match(youtubeIdRegex);
  return matches ? matches[1] : urlOrId;
}

function YoutubeBlock(entity, contentLayout) {
  const isAmp = contentLayout === 'amp';
  const {
    youtubeId: rawId,
    description
  } = entity.getData();
  const youtubeId = handleYoutubeId(rawId);
  if (!youtubeId) return null; // --- AMP 渲染邏輯 ---

  const ampYoutubeIframe = /*#__PURE__*/_react.default.createElement("amp-youtube", {
    "data-videoid": youtubeId,
    layout: "responsive",
    width: "16",
    height: "9"
  }, /*#__PURE__*/_react.default.createElement("amp-img", {
    src: `https://i.ytimg.com/vi/${youtubeId}/hqdefault.jpg`,
    placeholder: "placeholder",
    layout: "fill"
  })); // --- Web 渲染邏輯 ---


  const youtubeIframe = /*#__PURE__*/_react.default.createElement(IframeWrapper, null, /*#__PURE__*/_react.default.createElement(Iframe, {
    src: `https://www.youtube.com/embed/${youtubeId}?rel=0`,
    loading: "lazy",
    frameBorder: "0",
    allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
    allowFullScreen: true,
    title: description || 'YouTube video player'
  }));

  return /*#__PURE__*/_react.default.createElement(YoutubeRenderWrapper, null, isAmp ? ampYoutubeIframe : youtubeIframe, description && /*#__PURE__*/_react.default.createElement(Caption, null, description));
}