Files
shoptime/com.twin.app.shoptime/src/components/VideoPlayer/Overlay.js
2024-03-05 10:05:34 +09:00

53 lines
1.2 KiB
JavaScript

import React from 'react';
import kind from '@enact/core/kind';
import Touchable from '@enact/ui/Touchable';
import onlyUpdateForKeys from 'recompose/onlyUpdateForKeys';
import PropTypes from 'prop-types';
import css from './VideoPlayer.module.less';
/**
* Overlay {@link sandstone/VideoPlayer}. This covers the Video piece of the
* {@link sandstone/VideoPlayer} to prevent unnecessary VideoPlayer repaints due to mouse-moves.
* It also acts as a container for overlaid elements, like the {@link sandstone/Spinner}.
*
* @class Overlay
* @memberof sandstone/VideoPlayer
* @ui
* @private
*/
const OverlayBase = kind({
name: 'Overlay',
propTypes: /** @lends sandstone/VideoPlayer.Overlay.prototype */ {
bottomControlsVisible: PropTypes.bool,
children: PropTypes.node
},
styles: {
css,
className: 'overlay'
},
computed: {
className: ({bottomControlsVisible, styler}) => styler.append({['scrim']: bottomControlsVisible})
},
render: (props) => {
delete props.bottomControlsVisible;
return <div {...props} />;
}
});
const Overlay = onlyUpdateForKeys(['bottomControlsVisible', 'children'])(
Touchable(
OverlayBase
)
);
export default Overlay;
export {
Overlay,
OverlayBase
};