organism-react-video
Version:
78 lines (75 loc) • 3.11 kB
JavaScript
"use strict";
var _interopRequireDefault = require("reshow-runtime/helpers/interopRequireDefault");
var _interopRequireWildcard = require("reshow-runtime/helpers/interopRequireWildcard");
exports.__esModule = true;
exports["default"] = void 0;
var _objectSpread2 = _interopRequireDefault(require("reshow-runtime/helpers/objectSpread2"));
var _toConsumableArray2 = _interopRequireDefault(require("reshow-runtime/helpers/toConsumableArray"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("reshow-runtime/helpers/objectWithoutPropertiesLoose"));
var React = _interopRequireWildcard(require("react"));
var _reshowConstant = require("reshow-constant");
var _reshowBuild = _interopRequireDefault(require("reshow-build"));
var _excluded = ["src", "otherSources", "videoParams", "sourceComponent", "videoComponent", "sourceType"]; // @ts-check
/**
* @typedef {import('reshow-build').Component} Component
*/
/**
* @typedef {object} VideoFileProps
* @property {string} src
* @property {string} [sourceType]
* @property {{[key: string]: string}} [otherSources]
* @property {Component} [sourceComponent]
* @property {Component} [videoComponent]
* @property {{[key:string]:any}} [videoParams]
* @property {string} [className]
* @property {React.CSSProperties} [style]
*/
/**
* @param {VideoFileProps} props
* https://www.w3schools.com/tags/tag_video.asp
*/
var VideoFile = function VideoFile(_ref) {
var src = _ref.src,
otherSources = _ref.otherSources,
videoParams = _ref.videoParams,
_ref$sourceComponent = _ref.sourceComponent,
sourceComponent = _ref$sourceComponent === void 0 ? "source" : _ref$sourceComponent,
_ref$videoComponent = _ref.videoComponent,
videoComponent = _ref$videoComponent === void 0 ? "video" : _ref$videoComponent,
_ref$sourceType = _ref.sourceType,
sourceType = _ref$sourceType === void 0 ? "video/mp4" : _ref$sourceType,
restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
var sourceEl = (0, _reshowBuild["default"])(sourceComponent);
var videoEl = (0, _reshowBuild["default"])(videoComponent);
var thisSources = [sourceEl({
src: src,
type: sourceType,
key: "default"
})];
if (otherSources) {
thisSources.push.apply(thisSources, (0, _toConsumableArray2["default"])((0, _reshowConstant.KEYS)(otherSources).map(function (key) {
var sSrc = otherSources[key];
return sourceEl({
src: sSrc,
type: key,
key: key
});
})));
}
videoParams = videoParams || {
controls: true
};
if (videoParams["autoPlay"]) {
videoParams["muted"] = true;
if (null == videoParams["playsInline"]) {
/**
* https://stackoverflow.com/questions/43570460/html5-video-autoplay-on-iphone
* https://webkit.org/blog/6784/new-video-policies-for-ios/
*/
videoParams["playsInline"] = true;
}
}
return videoEl((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, videoParams), restProps), thisSources);
};
var _default = exports["default"] = VideoFile;
module.exports = exports.default;