@mirrormedia/lilith-draft-renderer
Version:
## Introduction
56 lines (46 loc) • 2.51 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = AmpVideoBlock;
var _react = _interopRequireDefault(require("react"));
var _utils = require("../../utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* 取得影片預覽圖 (Poster)
* 優先從 resized 欄位抓取 w1200 等級的縮圖以優化 AMP 效能
*/
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, video which contain property `urlOriginal` and not contain property `videoSrc`.
*/
function AmpVideoBlock({
video
}) {
var _video$file, _video$file2;
const urlOriginalType = (0, _utils.extractFileExtension)(video === null || video === void 0 ? void 0 : video.urlOriginal);
const fileUrlType = (0, _utils.extractFileExtension)(video === null || video === void 0 ? void 0 : (_video$file = video.file) === null || _video$file === void 0 ? void 0 : _video$file.url);
const posterUrl = getVideoPoster(video === null || video === void 0 ? void 0 : video.heroImage);
return /*#__PURE__*/_react.default.createElement("amp-video", {
controls: "controls",
autoplay: "autoplay",
loop: "loop",
layout: "responsive",
width: "16" // 使用比例值 (16:9) 會比 100vw 在排版上更穩定
,
height: "9",
poster: posterUrl // 加入影片預覽圖
}, urlOriginalType && /*#__PURE__*/_react.default.createElement("source", {
src: video === null || video === void 0 ? void 0 : video.urlOriginal,
type: `video/${urlOriginalType}`
}), fileUrlType && /*#__PURE__*/_react.default.createElement("source", {
src: video === null || video === void 0 ? void 0 : (_video$file2 = video.file) === null || _video$file2 === void 0 ? void 0 : _video$file2.url,
type: `video/${fileUrlType}`
}), /*#__PURE__*/_react.default.createElement("div", {
fallback: ""
}, /*#__PURE__*/_react.default.createElement("p", null, "\u60A8\u7684\u700F\u89BD\u5668\u4E0D\u652F\u63F4\u64AD\u653E\u6B64\u5F71\u7247\u3002")));
}