organism-react-video/build/es/src/ui/organisms/VideoThumbnail.mjs

React video player

import React from "react";
import { reactStyle, Icon, Image, SemanticUI } from "react-atomic-molecule";
import PlayIcon from "ricon/Play";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var VideoThumbnail = function VideoThumbnail(_ref) {
  var {
    onClick,
    playBgColor,
    playFgColor,
    src
  } = _ref;
  return /*#__PURE__*/_jsxs(SemanticUI, {
    onTouchStart: onClick,
    onTouchEnd: onClick,
    onClick: onClick,
    children: [/*#__PURE__*/_jsx(Image, {
      styles: reactStyle(Styles.thumb, false, false),
      src: src
    }), /*#__PURE__*/_jsx(Icon, {
      styles: reactStyle(Styles.play, false, false),
      children: /*#__PURE__*/_jsx(PlayIcon, {
        bgColor: playBgColor,
        fgColor: playFgColor
      })
    })]
  });
};
export 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"
  }
};