@zohoim/chat-components 0.0.13 → 0.0.15

package/es/Theme/{desk → themeVariables}/pureDark/yellowTheme.js

@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, messageStatusSendColor, messageStatusFailedColor, actionIconColor, primaryYellow } from './commonColorVariable';
-import { imIntegrationIcon, messagetextColor } from '../commonDeskColorVariable';
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, messageStatusSendColor, messageStatusFailedColor, actionIconWrapperColor, primaryYellow } from './commonColorVariable';
+import { imIntegrationIcon, messagetextColor } from '../commonThemeColorVariable';
 export default {
   library: 'chat_components',
   variables: {
@@ -15,8 +15,8 @@ export default {
       failed_bg_color: '#362734',
       text_color: messagetextColor
     },
-    actionIcon: {
-      color: actionIconColor,
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
       bg_color: '#2e2922',
       border_color: '#453925'
     },
@@ -34,10 +34,10 @@ export default {
       bg_color: '#212121',
       border_color: '#161515'
     },
-    imTicketLink: {
+    imPermaLink: {
       color: '#d79835'
     },
-    ReplyBubbleContent: {
+    replyBubbleContent: {
       bg_color: '#212121',
       color: '#e2e4e6',
       border_color: '#161515',
@@ -56,8 +56,8 @@ export default {
       color: '#e2e4e6',
       border_color: '#161515'
     },
-    iMDateTime: {
-      color: '#999'
+    imMessageMeta: {
+      timeColor: '#999'
     },
     textBubble: {
       see_more_color: primaryYellow,

package/es/Theme/utils/combineConfigurations.js

@@ -0,0 +1,17 @@
+import flatVariables from './flatVariables';
+export default function combineConfigurations(configurations) {
+  const configs = configurations.map(configuration => ({
+    library: configuration.library,
+    variables: flatVariables(configuration.variables)
+  }));
+  const mergeObject = configs.reduce((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(key => mergeObject[key]);
+}

package/es/Theme/utils/flatVariables.js

@@ -0,0 +1,12 @@
+export default function flatVariables(obj) {
+  let jointStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '_';
+  return Object.keys(obj).reduce((res, component) => Object.assign(res, Object.keys(obj[component]).reduce((res, variable) => {
+    if (component === '') {
+      res[`${variable}`] = obj[component][variable];
+    } else {
+      res[`${component}${jointStr}${variable}`] = obj[component][variable];
+    }
+
+    return res;
+  }, {})), {});
+}

package/es/Theme/utils/getCustomizedCssVariables.js

@@ -0,0 +1,19 @@
+/* eslint-disable no-param-reassign */
+
+/** ** Methods *** */
+import combineConfigurations from './combineConfigurations';
+export default function getCustomizedCssVariables(cssVariableConfigs) {
+  let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '--lib_';
+  const newConfiguration = combineConfigurations(cssVariableConfigs);
+  return newConfiguration.reduce((result, config) => {
+    Object.keys(config.variables).forEach(variable => {
+      // eslint-disable-next-line no-param-reassign
+      if (config.library === '') {
+        result += `${prefix}${variable}:${config.variables[variable]}; \n`;
+      } else {
+        result += `${prefix}${config.library}_${variable}:${config.variables[variable]}; \n`;
+      }
+    });
+    return result;
+  }, '\n');
+}

package/es/Theme/utils/getThemeConfigurations.js

@@ -1,209 +1,81 @@
-import { appConstants, modeConstants, themeConstants } from '../constants';
-import deskLightBlue from '../desk/light/blueTheme';
-import deskLightGreen from '../desk/light/greenTheme';
-import deskLightOrange from '../desk/light/orangeTheme';
-import deskLightRed from '../desk/light/redTheme';
-import deskLightYellow from '../desk/light/yellowTheme';
-import deskDarkBlue from '../desk/dark/blueTheme';
-import deskDarkGreen from '../desk/dark/greenTheme';
-import deskDarkOrange from '../desk/dark/orangeTheme';
-import deskDarkRed from '../desk/dark/redTheme';
-import deskDarkYellow from '../desk/dark/yellowTheme';
-import deskPureDarkBlue from '../desk/pureDark/blueTheme';
-import deskPureDarkGreen from '../desk/pureDark/greenTheme';
-import deskPureDarkOrange from '../desk/pureDark/orangeTheme';
-import deskPureDarkRed from '../desk/pureDark/redTheme';
-import deskPureDarkYellow from '../desk/pureDark/yellowTheme';
-
-/*
-import crmLightBlueFan from '../crm/light/blueFanTheme';
-import crmLightBlue from '../crm/light/blueTheme';
-import crmLightDarkBlue from '../crm/light/darkBlueTheme';
-import crmLightDarkGrey from '../crm/light/darkGreyTheme';
-import crmLightGreen from '../crm/light/greenTheme';
-import crmLightOrange from '../crm/light/orangeTheme';
-import crmLightPink from '../crm/light/pinkTheme';
-import crmLightTeal from '../crm/light/tealTheme';
-import crmLightWhite from '../crm/light/whiteTheme';
-
-import crmDarkBlueFan from '../crm/dark/blueFanTheme';
-import crmDarkBlue from '../crm/dark/blueTheme';
-import crmDarkDarkBlue from '../crm/dark/darkBlueTheme';
-import crmDarkDarkGrey from '../crm/dark/darkGreyTheme';
-import crmDarkGreen from '../crm/dark/greenTheme';
-import crmDarkOrange from '../crm/dark/orangeTheme';
-import crmDarkPink from '../crm/dark/pinkTheme';
-import crmDarkTeal from '../crm/dark/tealTheme';
-import crmDarkWhite from '../crm/dark/whiteTheme';
-
-import crmPureDarkBlueFan from '../crm/pureDark/blueFanTheme';
-import crmPureDarkBlue from '../crm/pureDark/blueTheme';
-import crmPureDarkDarkBlue from '../crm/pureDark/darkBlueTheme';
-import crmPureDarkDarkGrey from '../crm/pureDark/darkGreyTheme';
-import crmPureDarkGreen from '../crm/pureDark/greenTheme';
-import crmPureDarkOrange from '../crm/pureDark/orangeTheme';
-import crmPureDarkPink from '../crm/pureDark/pinkTheme';
-import crmPureDarkTeal from '../crm/pureDark/tealTheme';
-import crmPureDarkWhite from '../crm/pureDark/whiteTheme'; */
-
-const deskModeMapping = {
+import { modeConstants, themeConstants } from '../constants';
+import lightBlue from '../themeVariables/light/blueTheme';
+import lightGreen from '../themeVariables/light/greenTheme';
+import lightOrange from '../themeVariables/light/orangeTheme';
+import lightRed from '../themeVariables/light/redTheme';
+import lightYellow from '../themeVariables/light/yellowTheme';
+import darkBlue from '../themeVariables/dark/blueTheme';
+import darkGreen from '../themeVariables/dark/greenTheme';
+import darkOrange from '../themeVariables/dark/orangeTheme';
+import darkRed from '../themeVariables/dark/redTheme';
+import darkYellow from '../themeVariables/dark/yellowTheme';
+import pureDarkBlue from '../themeVariables/pureDark/blueTheme';
+import pureDarkGreen from '../themeVariables/pureDark/greenTheme';
+import pureDarkOrange from '../themeVariables/pureDark/orangeTheme';
+import pureDarkRed from '../themeVariables/pureDark/redTheme';
+import pureDarkYellow from '../themeVariables/pureDark/yellowTheme';
+const modeMapping = {
   [modeConstants.LIGHT]: 'default',
   [modeConstants.DARK]: 'dark',
   [modeConstants.PURE_DARK]: 'pureDark'
 };
-const deskThemeMapping = {
+const themeMapping = {
   [themeConstants.BLUE]: 'blue',
   [themeConstants.GREEN]: 'green',
   [themeConstants.ORANGE]: 'orange',
   [themeConstants.RED]: 'red',
   [themeConstants.YELLOW]: 'yellow'
 };
-
-/* const crmThemeMapping = {
-  [themeConstants.BLUE_FAN]: 'crmBlue',
-  [themeConstants.BLUE]: 'crmBlue',
-  [themeConstants.DARK_BLUE]: 'crmBlue',
-  [themeConstants.DARK_GREY]: 'crmBlue',
-  [themeConstants.WHITE]: 'crmBlue',
-
-  [themeConstants.GREEN]: 'crmGreen',
-  [themeConstants.ORANGE]: 'crmOrange',
-  [themeConstants.PINK]: 'crmPink',
-  [themeConstants.TEAL]: 'crmTeal'
-}; */
-
 const concatString = '_';
-const defaultDeskTheme = deskThemeMapping[themeConstants.BLUE];
-const defaultThemeConfiguration = deskLightBlue;
-const defaultDeskMode = deskModeMapping[modeConstants.LIGHT];
+const defaultTheme = themeMapping[themeConstants.BLUE];
+const defaultMode = modeMapping[modeConstants.LIGHT];
+const defaultThemeConfiguration = lightBlue;
 const themeConfigMapping = {
-  [`${appConstants.DESK}${concatString}${modeConstants.LIGHT}${concatString}${themeConstants.BLUE}`]: deskLightBlue,
-  [`${appConstants.DESK}${concatString}${modeConstants.LIGHT}${concatString}${themeConstants.GREEN}`]: deskLightGreen,
-  [`${appConstants.DESK}${concatString}${modeConstants.LIGHT}${concatString}${themeConstants.ORANGE}`]: deskLightOrange,
-  [`${appConstants.DESK}${concatString}${modeConstants.LIGHT}${concatString}${themeConstants.RED}`]: deskLightRed,
-  [`${appConstants.DESK}${concatString}${modeConstants.LIGHT}${concatString}${themeConstants.YELLOW}`]: deskLightYellow,
-  [`${appConstants.DESK}${concatString}${modeConstants.DARK}${concatString}${themeConstants.BLUE}`]: deskDarkBlue,
-  [`${appConstants.DESK}${concatString}${modeConstants.DARK}${concatString}${themeConstants.GREEN}`]: deskDarkGreen,
-  [`${appConstants.DESK}${concatString}${modeConstants.DARK}${concatString}${themeConstants.ORANGE}`]: deskDarkOrange,
-  [`${appConstants.DESK}${concatString}${modeConstants.DARK}${concatString}${themeConstants.RED}`]: deskDarkRed,
-  [`${appConstants.DESK}${concatString}${modeConstants.DARK}${concatString}${themeConstants.YELLOW}`]: deskDarkYellow,
-  [`${appConstants.DESK}${concatString}${modeConstants.PURE_DARK}${concatString}${themeConstants.BLUE}`]: deskPureDarkBlue,
-  [`${appConstants.DESK}${concatString}${modeConstants.PURE_DARK}${concatString}${themeConstants.GREEN}`]: deskPureDarkGreen,
-  [`${appConstants.DESK}${concatString}${modeConstants.PURE_DARK}${concatString}${themeConstants.ORANGE}`]: deskPureDarkOrange,
-  [`${appConstants.DESK}${concatString}${modeConstants.PURE_DARK}${concatString}${themeConstants.RED}`]: deskPureDarkRed,
-  [`${appConstants.DESK}${concatString}${modeConstants.PURE_DARK}${concatString}${themeConstants.YELLOW}`]: deskPureDarkYellow
-  /* [`${appConstants.CRM}${concatString}${modeConstants.LIGHT}${concatString}${themeConstants.BLUE_FAN}`]:
-    crmLightBlueFan,
-  [`${appConstants.CRM}${concatString}${modeConstants.LIGHT}${concatString}${themeConstants.BLUE}`]:
-    crmLightBlue,
-  [`${appConstants.CRM}${concatString}${modeConstants.LIGHT}${concatString}${themeConstants.DARK_BLUE}`]:
-    crmLightDarkBlue,
-  [`${appConstants.CRM}${concatString}${modeConstants.LIGHT}${concatString}${themeConstants.DARK_GREY}`]:
-    crmLightDarkGrey,
-  [`${appConstants.CRM}${concatString}${modeConstants.LIGHT}${concatString}${themeConstants.GREEN}`]:
-    crmLightGreen,
-  [`${appConstants.CRM}${concatString}${modeConstants.LIGHT}${concatString}${themeConstants.ORANGE}`]:
-    crmLightOrange,
-  [`${appConstants.CRM}${concatString}${modeConstants.LIGHT}${concatString}${themeConstants.PINK}`]:
-    crmLightPink,
-  [`${appConstants.CRM}${concatString}${modeConstants.LIGHT}${concatString}${themeConstants.TEAL}`]:
-    crmLightTeal,
-  [`${appConstants.CRM}${concatString}${modeConstants.LIGHT}${concatString}${themeConstants.WHITE}`]:
-    crmLightWhite,
-  [`${appConstants.CRM}${concatString}${modeConstants.DARK}${concatString}${themeConstants.BLUE_FAN}`]:
-    crmDarkBlueFan,
-  [`${appConstants.CRM}${concatString}${modeConstants.DARK}${concatString}${themeConstants.BLUE}`]:
-    crmDarkBlue,
-  [`${appConstants.CRM}${concatString}${modeConstants.DARK}${concatString}${themeConstants.DARK_BLUE}`]:
-    crmDarkDarkBlue,
-  [`${appConstants.CRM}${concatString}${modeConstants.DARK}${concatString}${themeConstants.DARK_GREY}`]:
-    crmDarkDarkGrey,
-  [`${appConstants.CRM}${concatString}${modeConstants.DARK}${concatString}${themeConstants.GREEN}`]:
-    crmDarkGreen,
-  [`${appConstants.CRM}${concatString}${modeConstants.DARK}${concatString}${themeConstants.ORANGE}`]:
-    crmDarkOrange,
-  [`${appConstants.CRM}${concatString}${modeConstants.DARK}${concatString}${themeConstants.PINK}`]:
-    crmDarkPink,
-  [`${appConstants.CRM}${concatString}${modeConstants.DARK}${concatString}${themeConstants.TEAL}`]:
-    crmDarkTeal,
-  [`${appConstants.CRM}${concatString}${modeConstants.DARK}${concatString}${themeConstants.WHITE}`]:
-    crmDarkWhite,
-  [`${appConstants.CRM}${concatString}${modeConstants.PURE_DARK}${concatString}${themeConstants.BLUE_FAN}`]:
-    crmPureDarkBlueFan,
-  [`${appConstants.CRM}${concatString}${modeConstants.PURE_DARK}${concatString}${themeConstants.BLUE}`]:
-    crmPureDarkBlue,
-  [`${appConstants.CRM}${concatString}${modeConstants.PURE_DARK}${concatString}${themeConstants.DARK_BLUE}`]:
-    crmPureDarkDarkBlue,
-  [`${appConstants.CRM}${concatString}${modeConstants.PURE_DARK}${concatString}${themeConstants.DARK_GREY}`]:
-    crmPureDarkDarkGrey,
-  [`${appConstants.CRM}${concatString}${modeConstants.PURE_DARK}${concatString}${themeConstants.GREEN}`]:
-    crmPureDarkGreen,
-  [`${appConstants.CRM}${concatString}${modeConstants.PURE_DARK}${concatString}${themeConstants.ORANGE}`]:
-    crmPureDarkOrange,
-  [`${appConstants.CRM}${concatString}${modeConstants.PURE_DARK}${concatString}${themeConstants.PINK}`]:
-    crmPureDarkPink,
-  [`${appConstants.CRM}${concatString}${modeConstants.PURE_DARK}${concatString}${themeConstants.TEAL}`]:
-    crmPureDarkTeal,
-  [`${appConstants.CRM}${concatString}${modeConstants.PURE_DARK}${concatString}${themeConstants.WHITE}`]:
-    crmPureDarkWhite */
+  [`${modeConstants.LIGHT}${concatString}${themeConstants.BLUE}`]: lightBlue,
+  [`${modeConstants.LIGHT}${concatString}${themeConstants.GREEN}`]: lightGreen,
+  [`${modeConstants.LIGHT}${concatString}${themeConstants.ORANGE}`]: lightOrange,
+  [`${modeConstants.LIGHT}${concatString}${themeConstants.RED}`]: lightRed,
+  [`${modeConstants.LIGHT}${concatString}${themeConstants.YELLOW}`]: lightYellow,
+  [`${modeConstants.DARK}${concatString}${themeConstants.BLUE}`]: darkBlue,
+  [`${modeConstants.DARK}${concatString}${themeConstants.GREEN}`]: darkGreen,
+  [`${modeConstants.DARK}${concatString}${themeConstants.ORANGE}`]: darkOrange,
+  [`${modeConstants.DARK}${concatString}${themeConstants.RED}`]: darkRed,
+  [`${modeConstants.DARK}${concatString}${themeConstants.YELLOW}`]: darkYellow,
+  [`${modeConstants.PURE_DARK}${concatString}${themeConstants.BLUE}`]: pureDarkBlue,
+  [`${modeConstants.PURE_DARK}${concatString}${themeConstants.GREEN}`]: pureDarkGreen,
+  [`${modeConstants.PURE_DARK}${concatString}${themeConstants.ORANGE}`]: pureDarkOrange,
+  [`${modeConstants.PURE_DARK}${concatString}${themeConstants.RED}`]: pureDarkRed,
+  [`${modeConstants.PURE_DARK}${concatString}${themeConstants.YELLOW}`]: pureDarkYellow
 };
 
 function getThemeName() {
   let {
-    app = appConstants.DESK,
     mode = modeConstants.LIGHT,
     theme = themeConstants.BLUE
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const themeName = `${app}${concatString}${mode}${concatString}${theme}`;
+  const themeName = `${mode}${concatString}${theme}`;
   return {
     themeName
   };
 }
-function getDeskThemeName(_ref) {
-  let {
-    app,
-    theme
-  } = _ref;
-  const isDesk = app === appConstants.DESK;
-  // const isCRM = app === appConstants.CRM;
-
-  let deskTheme = '';
-  if (isDesk) {
-    deskTheme = deskThemeMapping[theme];
-  }
-  // else if (isCRM) {
-  //   deskTheme = crmThemeMapping[theme];
-  // }
 
-  return {
-    deskTheme: deskTheme || defaultDeskTheme
-  };
-}
-export default function getThemeConfigurations(_ref2) {
+export default function getThemeConfigurations(_ref) {
   let {
-    app,
-    mode,
-    theme
-  } = _ref2;
+    mode: propMode,
+    theme: propTheme
+  } = _ref;
   const {
     themeName
   } = getThemeName({
-    app,
-    mode,
-    theme
-  });
-  const deskMode = deskModeMapping[mode] || defaultDeskMode;
-  const {
-    deskTheme
-  } = getDeskThemeName({
-    app,
-    mode,
-    theme
+    mode: propMode,
+    theme: propTheme
   });
+  const mode = propMode ? modeMapping[propMode] || propMode : defaultMode;
+  const theme = propTheme ? themeMapping[propTheme] || propTheme : defaultTheme;
   const themeConfigurations = themeConfigMapping[themeName] || defaultThemeConfiguration;
   return {
-    deskMode,
-    deskTheme,
+    mode,
+    theme,
     themeConfigurations
   };
 }

package/es/Theme/utils/getWrapperDivProps.js

@@ -0,0 +1,12 @@
+export default function getWrapperDivProps(_ref) {
+  let {
+    modeKey,
+    themeKey,
+    mode,
+    theme
+  } = _ref;
+  return {
+    [modeKey]: mode,
+    [themeKey]: theme
+  };
+}

package/es/Video/Video.js

@@ -1,26 +1,16 @@
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable max-len */
-
 /** ** Libraries *** */
 import React from 'react';
-
 /** ** Hooks *** */
+
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 import useMedia from '@zohoim/chat-components-hooks/es/Media/useMedia';
-
 /** ** Constants *** */
+
 import videoDefaultProps from './props/defaultProps';
 import videoPropTypes from './props/propTypes';
-
-/** ** Methods *** */
-import cssJSLogic from './css/cssJSLogic';
-
 /** ** Styles *** */
-import style from './css/Video.module.css';
-
-/** ** Components *** */
-// import MediaControls from '../MediaControls/MediaControls';
 
+import style from './css/Video.module.css';
 export default function Video(props) {
   const {
     customStyle,
@@ -29,42 +19,20 @@ export default function Video(props) {
   } = props;
   const {
     mediaElementRef
-    // durationTime,
-    // onTogglePlay,
-    // currentTime,
-    // progressPercentage,
-    // isMediaPlayed
   } = useMedia(props);
+  /* External CSS Customization */
 
-  /* External customization */
   const newStyle = useMergeStyle(style, customStyle);
-  /* CSS classnames added based on logic */
-  const {
-    videoClass
-  } = cssJSLogic(props, newStyle);
-  return (
-    /*#__PURE__*/
-    // <div className={videoWrapperClass}>
-    React.createElement("video", {
-      className: videoClass,
-      controls: true,
-      preload: "metadata",
-      ref: mediaElementRef
-    }, /*#__PURE__*/React.createElement("source", {
-      "data-src": fileURL,
-      type: fileType
-    }))
-    /* <MediaControls
-        customStyle={controlsCustomStyle}
-        onTogglePlay={onTogglePlay}
-        isMediaPlayed={isMediaPlayed}
-        progressPercentage={progressPercentage}
-        currentTime={currentTime}
-        durationTime={durationTime}
-      /> */
-  );
+  return /*#__PURE__*/React.createElement("video", {
+    ref: mediaElementRef,
+    className: newStyle.video,
+    controls: true,
+    preload: "metadata"
+  }, /*#__PURE__*/React.createElement("source", {
+    "data-src": fileURL,
+    type: fileType
+  }));
 }
-
 Video.propTypes = videoPropTypes;
 Video.defaultProps = videoDefaultProps;
 Video.displayName = 'Video';

package/es/Video/css/Video.module.css

@@ -1,9 +1,4 @@
-
-
 .video {
-  max-height: 100%;
-  width: 100%;
+  max-height: 100% ;
+  width: 100% ;
 }
-
-/* .videoWrapper {
-} */

package/es/Video/props/defaultProps.js

@@ -1,7 +1,6 @@
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 const videoDefaultProps = {
-  customStyle: dummyObject,
-  controlsCustomStyle: dummyObject
+  customStyle: dummyObject
 };
 export default videoDefaultProps;

package/es/Video/props/propTypes.js

@@ -1,9 +1,8 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
 const videoPropTypes = {
-  customStyle: PropTypes.object,
-  controlsCustomStyle: PropTypes.object,
-  fileType: PropTypes.string,
-  fileURL: PropTypes.string
+  fileType: PropTypes.string.isRequired,
+  fileURL: PropTypes.string.isRequired,
+  customStyle: PropTypes.object
 };
 export default videoPropTypes;

package/es/VideoBubble/VideoBubble.js

@@ -1,55 +1,52 @@
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable max-len */
+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); }
 
 /** ** Libraries *** */
-import React from 'react';
-
+import React, { useCallback } from 'react';
 /** ** Hooks *** */
-import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 /** ** Constants *** */
+
 import videoBubbleDefaultProps from './props/defaultProps';
 import videoBubblePropTypes from './props/propTypes';
-
-/** ** Methods *** */
-import cssJSLogic from './css/cssJSLogic';
-
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 /** ** Styles *** */
-import style from './css/VideoBubble.module.css';
 
+import style from './css/VideoBubble.module.css';
 /** ** Components *** */
-import AttachmentBubbleInfo from '../AttachmentBubbleInfo/AttachmentBubbleInfo';
+
+import { Box } from '@zohodesk/components/es/Layout';
+import MediaBubbleWrapper from '../MediaBubbleWrapper/MediaBubbleWrapper';
 import Video from '../Video/Video';
 export default function VideoBubble(props) {
   const {
     customStyle,
-    headerCustomStyle,
-    videoCustomStyle,
-    controlsCustomStyle,
-    fileName,
-    fileSize,
-    fileURL,
-    fileType
+    customProps,
+    videoDetails
   } = props;
+  const {
+    videoProps = dummyObject,
+    mediaBubbleWrapperProps = dummyObject
+  } = customProps;
+  /* External CSS Customization */
 
-  /* External customization */
   const newStyle = useMergeStyle(style, customStyle);
-  /* CSS classnames added based on logic */
-  const {
-    videoBubbleClass
-  } = cssJSLogic(props, newStyle);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AttachmentBubbleInfo, {
-    customStyle: headerCustomStyle,
-    fileName: fileName,
-    fileSize: fileSize
-  }), /*#__PURE__*/React.createElement("div", {
-    className: videoBubbleClass
-  }, /*#__PURE__*/React.createElement(Video, {
-    controlsCustomStyle: controlsCustomStyle,
-    customStyle: videoCustomStyle,
-    fileType: fileType,
-    fileURL: fileURL
-  })));
+  const renderMedia = useCallback(_ref => {
+    let {
+      fileURL,
+      fileType
+    } = _ref;
+    return /*#__PURE__*/React.createElement(Box, {
+      className: newStyle.videoBubble
+    }, /*#__PURE__*/React.createElement(Video, _extends({
+      fileType: fileType,
+      fileURL: fileURL
+    }, videoProps)));
+  }, [videoProps, newStyle.videoBubble]);
+  return /*#__PURE__*/React.createElement(MediaBubbleWrapper, _extends({
+    mediaDetails: videoDetails,
+    renderMedia: renderMedia
+  }, mediaBubbleWrapperProps));
 }
 VideoBubble.propTypes = videoBubblePropTypes;
 VideoBubble.defaultProps = videoBubbleDefaultProps;

package/es/VideoBubble/css/VideoBubble.module.css

@@ -1,4 +1,4 @@
-.videoBubble{
-    width: var(--imlib_size_360);
-    max-width: 100%;
-}
+.videoBubble {
+  width: var(--zd_size360) ;
+  max-width: 100% ;
+}

package/es/VideoBubble/props/defaultProps.js

@@ -1,8 +1,7 @@
 /** ** Constants *** */
-import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
 const videoBubbleDefaultProps = {
   customStyle: dummyObject,
-  headerCustomStyle: dummyObject,
-  videoCustomStyle: dummyObject
+  customProps: dummyObject
 };
 export default videoBubbleDefaultProps;

package/es/VideoBubble/props/propTypes.js

@@ -1,12 +1,16 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
 const videoBubblePropTypes = {
-  customStyle: PropTypes.object,
-  headerCustomStyle: PropTypes.object,
-  videoCustomStyle: PropTypes.object,
-  fileName: PropTypes.string,
-  fileSize: PropTypes.string,
-  fileURL: PropTypes.string,
-  fileType: PropTypes.string
+  videoDetails: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    size: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired
+  }).isRequired,
+  customProps: PropTypes.shape({
+    mediaBubbleWrapperProps: PropTypes.object,
+    videoProps: PropTypes.object
+  }),
+  customStyle: PropTypes.object
 };
 export default videoBubblePropTypes;

package/es/css/common.module.css

@@ -0,0 +1,6 @@
+.dotted {
+    overflow: hidden;
+    white-space: nowrap;
+    word-wrap: normal;
+    text-overflow: ellipsis;
+}