@enact/sandstone
Version:
Large-screen/TV support library for Enact, containing a variety of UI components.
304 lines (301 loc) • 11.6 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.MediaOverlayDecorator = exports.MediaOverlayBase = exports.MediaOverlay = void 0;
var _kind = _interopRequireDefault(require("@enact/core/kind"));
var _Spottable = _interopRequireDefault(require("@enact/spotlight/Spottable"));
var _Layout = require("@enact/ui/Layout");
var _Media = _interopRequireDefault(require("@enact/ui/Media"));
var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
var _Pure = _interopRequireDefault(require("@enact/ui/internal/Pure"));
var _Slottable = _interopRequireDefault(require("@enact/ui/Slottable"));
var _propTypes2 = _interopRequireDefault(require("prop-types"));
var _compose = _interopRequireDefault(require("ramda/src/compose"));
var _Image = _interopRequireDefault(require("../Image"));
var _Marquee = require("../Marquee");
var _ProgressBar = _interopRequireDefault(require("../ProgressBar"));
var _Skinnable = _interopRequireDefault(require("../Skinnable"));
var _MediaOverlayModule = _interopRequireDefault(require("./MediaOverlay.module.css"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["caption", "css", "imageOverlay", "loop", "marqueeOn", "mediaComponent", "muted", "noAutoPlay", "placeholder", "progress", "showProgress", "source", "title", "subtitle", "text", "textAlign"];
/**
* Provides a media component with image and text overlay support.
*
* @example
* <MediaOverlay text="overlay">
* <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" />
* </MediaOverlay>
*
* @module sandstone/MediaOverlay
* @exports MediaOverlay
* @exports MediaOverlayBase
* @exports MediaOverlayDecorator
*/
/**
* A media component with image and text overlay support.
*
* @class MediaOverlayBase
* @memberof sandstone/MediaOverlay
* @ui
* @public
*/
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
var MediaOverlayBase = exports.MediaOverlayBase = (0, _kind["default"])({
name: 'MediaOverlay',
propTypes: /** @lends sandstone/MediaOverlay.MediaOverlayBase.prototype */{
/**
* Any children `<source>` tag elements will be sent directly to the media element as
* sources.
*
* @type {Node}
* @public
*/
source: _propTypes2["default"].node.isRequired,
/**
* The primary caption to be displayed.
*
* @type {Node}
* @public
*/
caption: _propTypes2["default"].node,
/**
* Customizes the component by mapping the supplied collection of CSS class names to the
* corresponding internal elements and states of this component.
*
* The following classes are supported:
*
* * `image` - class name for image
* * `textLayout` - class name for text layout
*
* @type {Object}
* @public
*/
css: _propTypes2["default"].object,
/**
* Image path for image overlay.
*
* NOTE: When image is displayed, media is not displayed even though it is playing.
*
* @type {String|Object}
* @public
*/
imageOverlay: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].object]),
/**
* Restarts the video every time it is finished.
*
* @type {Boolean}
* @public
*/
loop: _propTypes2["default"].bool,
/**
* Determines what triggers the marquee to start its animation.
*
* @type {('focus'|'hover'|'render')}
* @public
*/
marqueeOn: _propTypes2["default"].oneOf(['focus', 'hover', 'render']),
/**
* Media component to use.
*
* The default (`'video'`) renders an `HTMLVideoElement`. Custom media components must have
* a similar API structure, exposing the following APIs:
*
* Methods:
* * `load()` - load media
*
* @type {String|Component}
* @default 'video'
* @public
*/
mediaComponent: _propTypes["default"].renderable,
/**
* Mutes the audio output of the video.
*
* @type {Boolean}
* @public
*/
muted: _propTypes2["default"].bool,
/**
* Prevents the video playback starting on load.
*
* @type {Boolean}
* @public
*/
noAutoPlay: _propTypes2["default"].bool,
/**
* Placeholder for image overlay.
*
* @type {String}
* @public
*/
placeholder: _propTypes2["default"].string,
/**
* A number between `0` and `1` indicating the proportion of the filled portion of the bar.
*
* Only applicable when `showProgress` is enabled.
*
* @type {Number}
* @default 0
* @public
*/
progress: _propTypes2["default"].number,
/**
* Displays the progress bar
*
* @type {Boolean}
* @public
*/
showProgress: _propTypes2["default"].bool,
/**
* The third caption line to be displayed.
*
* @type {String}
* @public
*/
subtitle: _propTypes2["default"].string,
/**
* Text to display over media.
*
* @type {String}
* @public
*/
text: _propTypes2["default"].string,
/**
* Aligns the `text` vertically within the component.
*
* @type {('center'|'end'|'start')}
* @default 'end'
* @public
*/
textAlign: _propTypes2["default"].oneOf(['center', 'end', 'start']),
/**
* The second caption line to be displayed.
*
* @type {String}
* @public
*/
title: _propTypes2["default"].string
},
defaultProps: {
mediaComponent: 'video',
progress: 0,
textAlign: 'end'
},
styles: {
css: _MediaOverlayModule["default"],
className: 'mediaOverlay',
publicClassNames: ['mediaOverlay', 'image', 'text']
},
render: function render(_ref) {
var caption = _ref.caption,
css = _ref.css,
imageOverlay = _ref.imageOverlay,
loop = _ref.loop,
marqueeOn = _ref.marqueeOn,
mediaComponent = _ref.mediaComponent,
muted = _ref.muted,
noAutoPlay = _ref.noAutoPlay,
placeholder = _ref.placeholder,
progress = _ref.progress,
showProgress = _ref.showProgress,
source = _ref.source,
title = _ref.title,
subtitle = _ref.subtitle,
text = _ref.text,
textAlign = _ref.textAlign,
rest = _objectWithoutProperties(_ref, _excluded);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, rest), {}, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: css.bg
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: css.mediaContainer,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Media["default"], {
autoPlay: !noAutoPlay,
className: css.media,
controls: false,
loop: loop,
mediaComponent: mediaComponent,
muted: muted,
source: source
}), imageOverlay ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image["default"], {
className: css.image,
placeholder: placeholder,
sizing: "fill",
src: imageOverlay
}) : null, text ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Layout, {
align: textAlign,
className: css.textLayout,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
component: _Marquee.Marquee,
alignment: "center",
className: css.text,
marqueeOn: marqueeOn,
children: text
})
}) : null, showProgress ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBar["default"], {
css: css,
orientation: "horizontal",
progress: progress
}) : null]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: css.captionContainer,
children: [caption ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Marquee.Marquee, {
className: css.caption,
marqueeOn: marqueeOn,
children: caption
}) : null, title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Marquee.Marquee, {
className: css.title,
marqueeOn: marqueeOn,
children: title
}) : null, subtitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Marquee.Marquee, {
className: css.subtitle,
marqueeOn: marqueeOn,
children: subtitle
}) : null]
})]
}));
}
});
/**
* A higher-order component that adds Sandstone specific behaviors to `MediaOverlay`.
*
* @hoc
* @memberof sandstone/MediaOverlay
* @mixes sandstone/Marquee.MarqueeController
* @mixes spotlight/Spottable.Spottable
* @mixes ui/Slottable.Slottable
* @mixes sandstone/Skinnable.Skinnable
* @public
*/
var MediaOverlayDecorator = exports.MediaOverlayDecorator = (0, _compose["default"])((0, _Marquee.MarqueeController)({
marqueeOnFocus: true
}), _Pure["default"], _Spottable["default"], (0, _Slottable["default"])({
slots: ['source']
}), _Skinnable["default"]);
/**
* A Sandstone-styled `Media` component.
*
* Usage:
* ```
* <MediaOverlay>
* <source type='' src=''/>
* </MediaOverlay>
* ```
*
* @class MediaOverlay
* @memberof sandstone/MediaOverlay
* @extends sandstone/MediaOverlay.MediaOverlayBase
* @mixes sandstone/MediaOverlay.MediaOverlayDecorator
* @ui
* @public
*/
var MediaOverlay = exports.MediaOverlay = MediaOverlayDecorator(MediaOverlayBase);
var _default = exports["default"] = MediaOverlay;