@zohoim/chat-components 1.1.4 → 1.1.6-beta.1

package/lib/Theme/ThemeWrapper.js

@@ -0,0 +1,130 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = ThemeWrapper;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ThemeContext = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/Theme/ThemeContext"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _themeConstants = require("@zohoim/chat-components-utils/es/constants/themeConstants");
+
+var _constants = require("../constants");
+
+var _ThemeAssets = _interopRequireDefault(require("./ThemeAssets"));
+
+var _TooltipWrapper = _interopRequireDefault(require("./TooltipWrapper"));
+
+var _Layout = require("@zohodesk/components/es/Layout");
+
+var _getThemeConfigurations = _interopRequireDefault(require("./utils/getThemeConfigurations"));
+
+var _getCustomizedCssVariables = _interopRequireDefault(require("./utils/getCustomizedCssVariables"));
+
+var _getWrapperDivProps = _interopRequireDefault(require("./utils/getWrapperDivProps"));
+
+require("../Fonts/puviFont.module.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function ThemeWrapper(props) {
+  var children = props.children,
+      needThemeAssets = props.needThemeAssets,
+      needTooltip = props.needTooltip,
+      propThemeConfigurations = props.themeConfigurations,
+      propMode = props.mode,
+      propTheme = props.theme,
+      modeKey = props.modeKey,
+      themeKey = props.themeKey,
+      tooltipCustomStyle = props.tooltipCustomStyle,
+      direction = props.direction;
+  /** ** containerRef for Tooltip *** */
+
+  var containerRef = _react["default"].useRef(null);
+
+  var getContainerRef = (0, _react.useCallback)(function () {
+    return containerRef.current;
+  }, []);
+  /** ** ThemeConfigurations Handling  *** */
+
+  var _getThemeConfiguratio = (0, _getThemeConfigurations["default"])({
+    mode: propMode,
+    theme: propTheme
+  }),
+      mode = _getThemeConfiguratio.mode,
+      theme = _getThemeConfiguratio.theme;
+
+  var configurations = propThemeConfigurations;
+  /** ** Style Handling  *** */
+
+  var selector = "#".concat(_themeConstants.styleTagId);
+  var prefix = '--imlib_';
+  var configuration = (0, _react.useMemo)(function () {
+    return [configurations];
+  }, [configurations]);
+  var customizedVariables = (0, _react.useMemo)(function () {
+    var cssVariables = propThemeConfigurations ? (0, _getCustomizedCssVariables["default"])(configuration, prefix) : null;
+    return cssVariables;
+  }, [configuration, prefix, propThemeConfigurations]);
+  var wrapperDivProps = (0, _getWrapperDivProps["default"])({
+    modeKey: modeKey,
+    themeKey: themeKey,
+    mode: mode,
+    theme: theme
+  });
+  /** ** Children Render Functions   *** */
+
+  var renderPortal = (0, _react.useCallback)(function () {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+      "data-portal": _constants.MSG_ACTION_POPUP_PORTAL
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      "data-portal": _constants.EDITOR_POPUP_PORTAL
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      "data-portal": _constants.EDITOR_POPUP_TARGET_PORTAL
+    }));
+  }, []);
+  var renderStyle = (0, _react.useCallback)(function () {
+    return customizedVariables ? /*#__PURE__*/_react["default"].createElement("style", {
+      id: "zoho-im-variables"
+    }, "".concat(selector, "{").concat(customizedVariables, "}")) : null;
+  }, [selector, customizedVariables]);
+  var renderAssets = (0, _react.useCallback)(function () {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, needThemeAssets ? /*#__PURE__*/_react["default"].createElement(_ThemeAssets["default"], null) : null, needTooltip ? /*#__PURE__*/_react["default"].createElement(_TooltipWrapper["default"], {
+      containerRef: containerRef.current,
+      customStyle: tooltipCustomStyle,
+      getContainerRef: getContainerRef
+    }) : null);
+  }, [getContainerRef, needTooltip, needThemeAssets, tooltipCustomStyle]);
+  return /*#__PURE__*/_react["default"].createElement(_ThemeContext["default"].Provider, {
+    value: {
+      mode: propMode,
+      direction: direction
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", _extends({
+    id: _themeConstants.styleTagId
+  }, wrapperDivProps, {
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  }), renderStyle(), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    eleRef: containerRef
+  }, children), renderPortal(), renderAssets()));
+}
+
+ThemeWrapper.propTypes = _propTypes["default"];
+ThemeWrapper.defaultProps = _defaultProps["default"];

package/lib/Theme/TooltipWrapper.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = TooltipWrapper;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Tooltip = _interopRequireDefault(require("@zohodesk/components/es/Tooltip/Tooltip"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _Config = require("@zohodesk/components/es/Provider/Config");
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+var _TooltipWrapperModule = _interopRequireDefault(require("./css/TooltipWrapper.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function TooltipWrapper(props) {
+  var getContainerRef = props.getContainerRef,
+      _props$customStyle = props.customStyle,
+      customStyle = _props$customStyle === void 0 ? _emptyConstants.dummyObject : _props$customStyle;
+  var timer = null;
+
+  var tooltipRef = _react["default"].useRef(null);
+
+  (0, _Config.setLibraryConfig)({
+    getTooltipContainer: function getTooltipContainer() {
+      return getContainerRef();
+    }
+  });
+
+  function handleMouseOverDispatch(e) {
+    var containerRef = getContainerRef();
+
+    if (tooltipRef && tooltipRef.current) {
+      tooltipRef.current.handleOver(e, containerRef);
+    }
+  }
+
+  function handleOver(e) {
+    if (timer) {
+      timer = clearTimeout(timer);
+    }
+
+    timer = setTimeout(function () {
+      return handleMouseOverDispatch(e);
+    }, (0, _Config.getLibraryConfig)('tooltipDebounce'));
+  }
+
+  function removeTimeout() {
+    if (timer) {
+      timer = clearTimeout(timer);
+    }
+  } // componentDidMount and componentWillUnmount case
+
+
+  _react["default"].useEffect(function () {
+    var containerRef = getContainerRef();
+
+    if (containerRef) {
+      containerRef.addEventListener('mouseover', handleOver, false);
+      containerRef.addEventListener('mouseout', removeTimeout, false);
+      tooltipRef.current.observeElement();
+    }
+
+    return function () {
+      if (containerRef) {
+        containerRef.removeEventListener('mouseover', handleOver, false);
+        containerRef.removeEventListener('mouseout', removeTimeout, false); // eslint-disable-next-line react-hooks/exhaustive-deps
+
+        tooltipRef.current.unObserveElement();
+      }
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  /* External CSS Customization */
+
+
+  var newStyle = (0, _useMergeStyle["default"])(_TooltipWrapperModule["default"], customStyle);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: newStyle.tooltipWrapper
+  }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], _extends({
+    ref: tooltipRef
+  }, props)));
+}
+
+TooltipWrapper.propTypes = {
+  customStyle: _propTypes["default"].object,
+  getContainerRef: _propTypes["default"].func
+};

package/lib/Theme/css/TooltipWrapper.module.css

@@ -0,0 +1,10 @@
+.tooltipWrapper {
+  height: 0 ;
+  font-size: 0 ;
+  outline: 0;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  /* contain:strict */
+}

package/lib/Theme/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ThemeWrapper", {
+  enumerable: true,
+  get: function get() {
+    return _ThemeWrapper["default"];
+  }
+});
+
+var _ThemeWrapper = _interopRequireDefault(require("./ThemeWrapper"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/Theme/props/defaultProps.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+/** ** Constants *** */
+var themeWrapperDefaultProps = {
+  needThemeAssets: true,
+  mode: 'LIGHT',
+  theme: 'BLUE',
+  needTooltip: true,
+  tooltipCustomStyle: _emptyConstants.dummyObject,
+  direction: 'ltr'
+};
+var _default = themeWrapperDefaultProps;
+exports["default"] = _default;

package/lib/Theme/props/propTypes.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+var themeWrapperPropTypes = {
+  children: _propTypes["default"].node.isRequired,
+  mode: _propTypes["default"].string.isRequired,
+  theme: _propTypes["default"].string.isRequired,
+  modeKey: _propTypes["default"].string,
+  needThemeAssets: _propTypes["default"].bool,
+  needTooltip: _propTypes["default"].bool,
+  themeConfigurations: _propTypes["default"].object,
+  themeKey: _propTypes["default"].string,
+  tooltipCustomStyle: _propTypes["default"].object,
+  direction: _propTypes["default"].oneOf(['ltr', 'rtl'])
+};
+var _default = themeWrapperPropTypes;
+exports["default"] = _default;

package/lib/Theme/utils/combineConfigurations.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = combineConfigurations;
+
+var _flatVariables = _interopRequireDefault(require("./flatVariables"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function combineConfigurations(configurations) {
+  var configs = configurations.map(function (configuration) {
+    return {
+      library: configuration.library,
+      variables: (0, _flatVariables["default"])(configuration.variables)
+    };
+  });
+  var mergeObject = configs.reduce(function (res, next) {
+    if (!res[next.library]) {
+      res[next.library] = next;
+      return res;
+    }
+
+    Object.assign(res[next.library].variables, next.variables);
+    return res;
+  }, {});
+  return Object.keys(mergeObject).map(function (key) {
+    return mergeObject[key];
+  });
+}

package/lib/Theme/utils/flatVariables.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = flatVariables;
+
+function flatVariables(obj) {
+  var jointStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '_';
+  return Object.keys(obj).reduce(function (res, component) {
+    return Object.assign(res, Object.keys(obj[component]).reduce(function (res, variable) {
+      if (component === '') {
+        res["".concat(variable)] = obj[component][variable];
+      } else {
+        res["".concat(component).concat(jointStr).concat(variable)] = obj[component][variable];
+      }
+
+      return res;
+    }, {}));
+  }, {});
+}

package/lib/Theme/utils/getCustomizedCssVariables.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = getCustomizedCssVariables;
+
+var _combineConfigurations = _interopRequireDefault(require("./combineConfigurations"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/* eslint-disable no-param-reassign */
+
+/** ** Methods *** */
+function getCustomizedCssVariables(cssVariableConfigs) {
+  var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '--lib_';
+  var newConfiguration = (0, _combineConfigurations["default"])(cssVariableConfigs);
+  return newConfiguration.reduce(function (result, config) {
+    Object.keys(config.variables).forEach(function (variable) {
+      // eslint-disable-next-line no-param-reassign
+      if (config.library === '') {
+        result += "".concat(prefix).concat(variable, ":").concat(config.variables[variable], "; \n");
+      } else {
+        result += "".concat(prefix).concat(config.library, "_").concat(variable, ":").concat(config.variables[variable], "; \n");
+      }
+    });
+    return result;
+  }, '\n');
+}

package/lib/Theme/utils/getThemeConfigurations.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = getThemeConfigurations;
+
+var _themeConstants = require("@zohoim/chat-components-utils/es/constants/themeConstants");
+
+var _modeMapping, _themeMapping;
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var modeMapping = (_modeMapping = {}, _defineProperty(_modeMapping, _themeConstants.modeConstants.LIGHT, 'light'), _defineProperty(_modeMapping, _themeConstants.modeConstants.DARK, 'dark'), _defineProperty(_modeMapping, _themeConstants.modeConstants.PURE_DARK, 'pureDark'), _modeMapping);
+var themeMapping = (_themeMapping = {}, _defineProperty(_themeMapping, _themeConstants.themeConstants.BLUE, 'blue'), _defineProperty(_themeMapping, _themeConstants.themeConstants.GREEN, 'green'), _defineProperty(_themeMapping, _themeConstants.themeConstants.ORANGE, 'orange'), _defineProperty(_themeMapping, _themeConstants.themeConstants.RED, 'red'), _defineProperty(_themeMapping, _themeConstants.themeConstants.YELLOW, 'yellow'), _themeMapping);
+var defaultTheme = themeMapping[_themeConstants.themeConstants.BLUE];
+var defaultMode = modeMapping[_themeConstants.modeConstants.LIGHT];
+
+function getThemeConfigurations(_ref) {
+  var propMode = _ref.mode,
+      propTheme = _ref.theme;
+  var mode = propMode ? modeMapping[propMode] || propMode : defaultMode;
+  var theme = propTheme ? themeMapping[propTheme] || propTheme : defaultTheme;
+  return {
+    mode: mode,
+    theme: theme
+  };
+}

package/lib/Theme/utils/getWrapperDivProps.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = getWrapperDivProps;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function getWrapperDivProps(_ref) {
+  var modeKey = _ref.modeKey,
+      themeKey = _ref.themeKey,
+      mode = _ref.mode,
+      theme = _ref.theme;
+  var wrapperDivProps = {};
+  wrapperDivProps = modeKey && mode ? _objectSpread(_objectSpread({}, wrapperDivProps), {}, _defineProperty({}, modeKey, mode)) : {};
+  wrapperDivProps = themeKey && theme ? _objectSpread(_objectSpread({}, wrapperDivProps), {}, _defineProperty({}, themeKey, theme)) : {};
+  return wrapperDivProps;
+}

package/lib/Video/Video.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = Video;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _useMedia2 = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/Media/useMedia"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _VideoModule = _interopRequireDefault(require("./css/Video.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+
+/** ** Hooks *** */
+
+/** ** Constants *** */
+
+/** ** Styles *** */
+function Video(props) {
+  var customStyle = props.customStyle,
+      fileType = props.fileType,
+      fileURL = props.fileURL;
+
+  var _useMedia = (0, _useMedia2["default"])({
+    src: fileURL
+  }),
+      mediaElementRef = _useMedia.mediaElementRef;
+  /* External CSS Customization */
+
+
+  var newStyle = (0, _useMergeStyle["default"])(_VideoModule["default"], customStyle);
+  return /*#__PURE__*/_react["default"].createElement("video", {
+    ref: mediaElementRef,
+    className: newStyle.video,
+    controls: true,
+    preload: "metadata"
+  }, /*#__PURE__*/_react["default"].createElement("source", {
+    "data-src": fileURL,
+    type: fileType
+  }));
+}
+
+Video.propTypes = _propTypes["default"];
+Video.defaultProps = _defaultProps["default"];
+Video.displayName = 'Video';

package/lib/Video/css/Video.module.css

@@ -0,0 +1,5 @@
+.video {
+  height: 100% ;
+  width: 100% ;
+  border-radius: 3px;
+}

package/lib/Video/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Video", {
+  enumerable: true,
+  get: function get() {
+    return _Video["default"];
+  }
+});
+
+var _Video = _interopRequireDefault(require("./Video"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/Video/props/defaultProps.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+/** ** Constants *** */
+var videoDefaultProps = {
+  customStyle: _emptyConstants.dummyObject
+};
+var _default = videoDefaultProps;
+exports["default"] = _default;

package/lib/Video/props/propTypes.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+var videoPropTypes = {
+  fileType: _propTypes["default"].string.isRequired,
+  fileURL: _propTypes["default"].string.isRequired,
+  customStyle: _propTypes["default"].object
+};
+var _default = videoPropTypes;
+exports["default"] = _default;

package/lib/VideoBubble/VideoBubble.js

@@ -0,0 +1,77 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = VideoBubble;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+var _VideoBubbleModule = _interopRequireDefault(require("./css/VideoBubble.module.css"));
+
+var _Layout = require("@zohodesk/components/es/Layout");
+
+var _MediaBubbleWrapper = _interopRequireDefault(require("../MediaBubbleWrapper/MediaBubbleWrapper"));
+
+var _Video = _interopRequireDefault(require("../Video/Video"));
+
+var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function VideoBubble(props) {
+  var customStyle = props.customStyle,
+      customProps = props.customProps,
+      videoDetails = props.videoDetails,
+      isFailed = props.isFailed;
+  var _customProps$videoPro = customProps.videoProps,
+      videoProps = _customProps$videoPro === void 0 ? _emptyConstants.dummyObject : _customProps$videoPro,
+      _customProps$mediaBub = customProps.mediaBubbleWrapperProps,
+      mediaBubbleWrapperProps = _customProps$mediaBub === void 0 ? _emptyConstants.dummyObject : _customProps$mediaBub;
+  /* External CSS Customization */
+
+  var newStyle = (0, _useMergeStyle["default"])(_VideoBubbleModule["default"], customStyle);
+  /* css classnames added based on logic */
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])({
+    isFailed: isFailed
+  }, newStyle),
+      videoBubbleClass = _cssJSLogic.videoBubbleClass;
+
+  var renderMedia = (0, _react.useCallback)(function (_ref) {
+    var fileURL = _ref.fileURL,
+        fileType = _ref.fileType;
+    return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      className: videoBubbleClass
+    }, /*#__PURE__*/_react["default"].createElement(_Video["default"], _extends({
+      fileType: fileType,
+      fileURL: fileURL
+    }, videoProps)));
+  }, [videoProps, videoBubbleClass]);
+  return /*#__PURE__*/_react["default"].createElement(_MediaBubbleWrapper["default"], _extends({
+    mediaDetails: videoDetails,
+    renderMedia: renderMedia
+  }, mediaBubbleWrapperProps, {
+    isFailed: isFailed
+  }));
+}
+
+VideoBubble.propTypes = _propTypes["default"];
+VideoBubble.defaultProps = _defaultProps["default"];
+VideoBubble.displayName = 'VideoBubble';

package/lib/VideoBubble/css/VideoBubble.module.css

@@ -0,0 +1,12 @@
+.videoWrapper {
+  width: var(--zd_size360) ;
+  max-width: 100% ;
+  height: var(--zd_size193) ;
+  background-color: #000;
+  border-radius: 3px;
+  border: 1px solid var(--imlib_chat_components_videoBubble_border_color);
+}
+
+.videoWrapperFailed{
+  border-color: var(--imlib_chat_components_videoBubble_border_color_failed);
+}