organism-react-video/build/cjs/src/ui/organisms/VideoThumbnail.js

React video player

"use strict";

var _interopRequireDefault = require("reshow-runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactAtomicMolecule = require("react-atomic-molecule");
var _Play = _interopRequireDefault(require("ricon/Play"));
var _jsxRuntime = require("react/jsx-runtime");
var VideoThumbnail = function VideoThumbnail(_ref) {
  var onClick = _ref.onClick,
    playBgColor = _ref.playBgColor,
    playFgColor = _ref.playFgColor,
    src = _ref.src;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactAtomicMolecule.SemanticUI, {
    onTouchStart: onClick,
    onTouchEnd: onClick,
    onClick: onClick,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactAtomicMolecule.Image, {
      styles: (0, _reactAtomicMolecule.reactStyle)(Styles.thumb, false, false),
      src: src
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactAtomicMolecule.Icon, {
      styles: (0, _reactAtomicMolecule.reactStyle)(Styles.play, false, false),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Play["default"], {
        bgColor: playBgColor,
        fgColor: playFgColor
      })
    })]
  });
};
var _default = exports["default"] = VideoThumbnail;
var Styles = {
  thumb: {
    width: "100%",
    top: "50%",
    position: "absolute",
    transform: ["translateY(-50%)"]
  },
  play: {
    top: "50%",
    left: "50%",
    position: "absolute",
    transform: ["translate(-50%, -50%)"],
    width: 100,
    cursor: "pointer"
  }
};
module.exports = exports.default;