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

## Introduction

"use strict";

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

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

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

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

var _ampVideoBlock = _interopRequireDefault(require("./amp/amp-video-block"));

var _ampVideoBlockV = _interopRequireDefault(require("./amp/amp-video-block-v2"));

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

// --- Styled Components ---
const VideoWrapper = _styledComponents.default.div`
  ${_sharedStyle.defaultMarginTop}
  ${_sharedStyle.defaultMarginBottom}
`;
const Video = _styledComponents.default.video`
  display: block;
  width: 100%;
  background-color: #000;
`;
const Description = _styledComponents.default.div`
  line-height: 1.43;
  letter-spacing: 0.4px;
  font-size: 14px;
  color: #808080;
  padding: 15px 15px 0 15px;
`;
const YoutubeResponsiveWrapper = _styledComponents.default.div`
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000;
`; // --- Types ---

// --- Utils ---
const getYoutubeId = url => {
  if (!url) return null;
  const match = url.match(/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?|shorts)\/|.*[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/i);
  return match ? match[1] : null;
};

const getVideoPoster = heroImage => {
  var _heroImage$resized, _heroImage$resized2, _heroImage$file;

  if (!heroImage) return undefined;
  return ((_heroImage$resized = heroImage.resized) === null || _heroImage$resized === void 0 ? void 0 : _heroImage$resized.w1200) || ((_heroImage$resized2 = heroImage.resized) === null || _heroImage$resized2 === void 0 ? void 0 : _heroImage$resized2.original) || ((_heroImage$file = heroImage.file) === null || _heroImage$file === void 0 ? void 0 : _heroImage$file.url);
};
/**
 * Before 202310
 */


function VideoBlock(entity, contentLayout) {
  var _video$file;

  const isAmp = contentLayout === 'amp';
  const {
    video
  } = entity.getData();
  const poster = getVideoPoster(video === null || video === void 0 ? void 0 : video.heroImage);
  const videoUrl = (video === null || video === void 0 ? void 0 : video.urlOriginal) || (video === null || video === void 0 ? void 0 : (_video$file = video.file) === null || _video$file === void 0 ? void 0 : _video$file.url) || '';
  const youtubeId = getYoutubeId(videoUrl);
  if (isAmp) return /*#__PURE__*/_react.default.createElement(_ampVideoBlock.default, {
    video: video
  });
  return /*#__PURE__*/_react.default.createElement(VideoWrapper, null, youtubeId ? /*#__PURE__*/_react.default.createElement(YoutubeResponsiveWrapper, null, /*#__PURE__*/_react.default.createElement("iframe", {
    width: "100%",
    height: "100%",
    src: `https://www.youtube.com/embed/${youtubeId}?rel=0`,
    style: {
      border: 0
    },
    allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
    allowFullScreen: true,
    title: (video === null || video === void 0 ? void 0 : video.name) || 'YouTube Video'
  })) :
  /*#__PURE__*/

  /* 原生影片加上 key 與屬性優化 */
  _react.default.createElement(Video, {
    key: videoUrl // 重要：網址變動時強制重新載入組件
    ,
    muted: true,
    autoPlay: true,
    loop: true,
    controls: true,
    poster: poster,
    playsInline: true,
    preload: "metadata"
  }, videoUrl && /*#__PURE__*/_react.default.createElement("source", {
    src: videoUrl
  })));
}
/**
 * After 202310
 */


function VideoBlockV2(entity, contentLayout) {
  var _video$file2;

  const isAmp = contentLayout === 'amp';
  const {
    video,
    desc
  } = entity.getData();
  const poster = getVideoPoster(video === null || video === void 0 ? void 0 : video.heroImage);
  const videoUrl = (video === null || video === void 0 ? void 0 : video.videoSrc) || (video === null || video === void 0 ? void 0 : (_video$file2 = video.file) === null || _video$file2 === void 0 ? void 0 : _video$file2.url) || '';
  const youtubeId = getYoutubeId(videoUrl);
  if (isAmp) return /*#__PURE__*/_react.default.createElement(_ampVideoBlockV.default, {
    video: video
  });
  return /*#__PURE__*/_react.default.createElement(VideoWrapper, null, youtubeId ? /*#__PURE__*/_react.default.createElement(YoutubeResponsiveWrapper, null, /*#__PURE__*/_react.default.createElement("iframe", {
    width: "100%",
    height: "100%",
    src: `https://www.youtube.com/embed/${youtubeId}?rel=0`,
    style: {
      border: 0
    },
    allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
    allowFullScreen: true,
    title: (video === null || video === void 0 ? void 0 : video.name) || 'YouTube Video'
  })) : videoUrl ? /*#__PURE__*/_react.default.createElement(Video, {
    key: videoUrl,
    muted: true,
    autoPlay: true,
    loop: true,
    controls: true,
    poster: poster,
    playsInline: true,
    preload: "metadata"
  }, /*#__PURE__*/_react.default.createElement("source", {
    src: videoUrl
  })) : null, desc && /*#__PURE__*/_react.default.createElement(Description, null, desc));
}