@zohodesk/dot/es/VideoLookup/VideoLookup.js

In this Library, we Provide Some Basic Components to Build Your Application

/**** Libraries ****/
import React, { useCallback, useEffect } from 'react';
import Icon from '@zohodesk/icons/lib/Icon';
import Button from '@zohodesk/components/es/Button/Button';
import Typography from '@zohodesk/components/es/Typography/Typography';
import { mergeStyle } from '@zohodesk/utils';
import FreezeLayer from "../FreezeLayer/FreezeLayer";
/**propTypes**/

import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
/**** Styles ****/

import defaultStyle from "./css/VideoLookup.module.css";
export default function VideoLookup(props) {
  const {
    isOpened,
    link,
    onClose,
    closeText,
    isEmbeddedLink,
    customStyle,
    testId,
    customId,
    videoFormat
  } = props;
  const style = mergeStyle(defaultStyle, customStyle);
  const handleKeyPress = useCallback(e => {
    if (e.keyCode == '27') {
      onClose(e);
    } else {
      e.stopPropagation();
      e.preventDefault();
    }
  }, [onClose]);
  useEffect(() => {
    document.addEventListener('keyup', handleKeyPress);
    return () => {
      document.removeEventListener('keyup', handleKeyPress);
    };
  }, [handleKeyPress]);
  return /*#__PURE__*/React.createElement(FreezeLayer, {
    align: "both",
    animationName: "fade",
    isActive: isOpened,
    palette: "dark"
  }, /*#__PURE__*/React.createElement(Button, {
    customClass: {
      customButton: style.close
    },
    dataId: `${customId}_close_icon`,
    palette: "plainSecondary",
    size: "medium",
    rounded: true,
    onClick: onClose
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "ZD-close2",
    size: "9"
  }), /*#__PURE__*/React.createElement(Typography, {
    $ui_size: "14",
    $flag_dotted: true
  }, closeText)), /*#__PURE__*/React.createElement("div", {
    className: style.videoContainer,
    "data-id": `${customId}_container`,
    "data-test-id": `${testId}_container`
  }, isEmbeddedLink ? /*#__PURE__*/React.createElement("iframe", {
    src: link,
    allowFullScreen: true,
    allow: "autoplay",
    className: style.videoIframe
  }) : /*#__PURE__*/React.createElement("video", {
    autoPlay: true,
    controls: true,
    className: style.videoPlayer
  }, /*#__PURE__*/React.createElement("source", {
    src: link,
    type: `video/${videoFormat}`
  }))));
}
VideoLookup.propTypes = propTypes;
VideoLookup.defaultProps = defaultProps;