@zohoim/chat-components 0.0.6 → 0.0.7

package/es/Theme/desk/light/redTheme.js

@@ -0,0 +1,29 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+import { imIntegrationIcon } from "../commonDeskColorVariable.js";
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#fdf3f3',
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: '#fdf3f3',
+      border_color: '#f8d7d7'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#de3535',
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

package/es/Theme/desk/light/yellowTheme.js

@@ -0,0 +1,30 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+import { imIntegrationIcon } from "../commonDeskColorVariable.js";
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#fdf8e9',
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: '#fdf8e9',
+      border_color: '#f6e3a7'
+    },
+    imIntegrationIcon,
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#b68c07',
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

package/es/Theme/desk/pureDark/blueTheme.js

@@ -0,0 +1,30 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+import { imIntegrationIcon } from "../commonDeskColorVariable.js";
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: '#252d37',
+      border_color: '#2c4664'
+    },
+    imIntegrationIcon,
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#479dff',
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

package/es/Theme/desk/pureDark/commonColorVariable.js

@@ -0,0 +1,6 @@
+export const incomingBubbleBgColor = '#2e2e2e';
+export const outgoingBubbleBgColor = '#2e2e2e';
+export const bubbleActiveBgColor = '#202821';
+export const actionIconColor = '#e2e4e6';
+export const messageStatusSendColor = '#61667a';
+export const messageStatusFailedColor = '#de3535';

package/es/Theme/desk/pureDark/greenTheme.js

@@ -0,0 +1,30 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+import { imIntegrationIcon } from "../commonDeskColorVariable.js";
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: '#252e27',
+      border_color: '#2c4732'
+    },
+    imIntegrationIcon,
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#45a159',
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

package/es/Theme/desk/pureDark/orangeTheme.js

@@ -0,0 +1,30 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+import { imIntegrationIcon } from "../commonDeskColorVariable.js";
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: '#312821',
+      border_color: '#4d3421'
+    },
+    imIntegrationIcon,
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#ff801f',
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

package/es/Theme/desk/pureDark/redTheme.js

@@ -0,0 +1,30 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconColor, messageStatusSendColor, messageStatusFailedColor } from './commonColorVariable.js';
+import { imIntegrationIcon } from "../commonDeskColorVariable.js";
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: '#2f2424',
+      border_color: '#492A29'
+    },
+    imIntegrationIcon,
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#e94f4f',
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

package/es/Theme/desk/pureDark/yellowTheme.js

@@ -0,0 +1,30 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, messageStatusSendColor, messageStatusFailedColor, actionIconColor } from './commonColorVariable.js';
+import { imIntegrationIcon } from "../commonDeskColorVariable.js";
+export default {
+  library: 'chat_components',
+  variables: {
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: outgoingBubbleBgColor,
+      bg_color: '#f1f7fe',
+      failed_bg_color: '#fcebeb',
+      text_color: '#000'
+    },
+    actionIcon: {
+      color: actionIconColor,
+      bg_color: '#2e2922',
+      border_color: '#453925'
+    },
+    imIntegrationIcon,
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#d79835',
+      failed_color: messageStatusFailedColor
+    }
+  }
+};

package/es/Theme/index.js

@@ -0,0 +1 @@
+export { default as ThemeWrapper } from './ThemeWrapper';

package/es/Theme/props/defaultProps.js

@@ -0,0 +1,13 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+const themeWrapperDefaultProps = {
+  needDeskAssets: true,
+  mode: 'LIGHT',
+  theme: 'BLUE',
+  needTooltip: true,
+  modeKey: 'data-mode',
+  themeKey: 'data-theme',
+  app: 'DESK',
+  tooltipCustomStyle: dummyObject
+};
+export default themeWrapperDefaultProps;

package/es/Theme/props/propTypes.js

@@ -0,0 +1,15 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const themeWrapperPropTypes = {
+  children: PropTypes.node,
+  needDeskAssets: PropTypes.bool,
+  needTooltip: PropTypes.bool,
+  themeConfigurations: PropTypes.object,
+  mode: PropTypes.string,
+  theme: PropTypes.string,
+  app: PropTypes.string,
+  modeKey: PropTypes.string,
+  themeKey: PropTypes.string,
+  tooltipCustomStyle: PropTypes.object
+};
+export default themeWrapperPropTypes;

package/es/Theme/utils/getThemeConfigurations.js

@@ -0,0 +1,209 @@
+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 = {
+  [modeConstants.LIGHT]: 'default',
+  [modeConstants.DARK]: 'dark',
+  [modeConstants.PURE_DARK]: 'pureDark'
+};
+const deskThemeMapping = {
+  [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 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*/
+};
+
+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}`;
+  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) {
+  let {
+    app,
+    mode,
+    theme
+  } = _ref2;
+  const {
+    themeName
+  } = getThemeName({
+    app,
+    mode,
+    theme
+  });
+  const deskMode = deskModeMapping[mode] || defaultDeskMode;
+  const {
+    deskTheme
+  } = getDeskThemeName({
+    app,
+    mode,
+    theme
+  });
+  const themeConfigurations = themeConfigMapping[themeName] || defaultThemeConfiguration;
+  return {
+    deskMode,
+    deskTheme,
+    themeConfigurations
+  };
+}

package/es/Video/Video.js

@@ -0,0 +1,69 @@
+/* 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 renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Styles *** */
+import style from './css/Video.module.css';
+import MediaControls from '../MediaControls/MediaControls';
+export default function Video(props) {
+  const {
+    customStyle,
+    fileType,
+    fileURL
+  } = props;
+  const {
+    mediaElementRef,
+    durationTime,
+    onTogglePlay,
+    currentTime,
+    progressPercentage,
+    isMediaPlayed
+  } = useMedia(props);
+
+  /* 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", {
+      controls: true,
+      className: videoClass,
+      preload: "metadata",
+      ref: mediaElementRef
+    }, /*#__PURE__*/React.createElement("source", {
+      type: fileType,
+      "data-src": fileURL
+    }))
+    /* <MediaControls
+        customStyle={controlsCustomStyle}
+        onTogglePlay={onTogglePlay}
+        isMediaPlayed={isMediaPlayed}
+        progressPercentage={progressPercentage}
+        currentTime={currentTime}
+        durationTime={durationTime}
+      /> */
+    // </div>
+  );
+}
+
+Video.propTypes = videoPropTypes;
+Video.defaultProps = videoDefaultProps;
+Video.displayName = 'Video';

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

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

package/es/Video/css/cssJSLogic.js

@@ -0,0 +1,14 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const videoWrapperClass = compileClassNames({
+    [style.videoWrapper]: true
+  });
+  const videoClass = compileClassNames({
+    [style.video]: true
+  });
+  return {
+    videoWrapperClass,
+    videoClass
+  };
+}

package/es/Video/index.js

@@ -0,0 +1 @@
+export { default as Video } from './Video';

package/es/Video/props/defaultProps.js

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

package/es/Video/props/propTypes.js

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

package/es/VideoBubble/VideoBubble.js

@@ -0,0 +1,57 @@
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable max-len */
+
+/** ** Libraries *** */
+import React from 'react';
+
+/** ** Hooks *** */
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+
+/** ** Constants *** */
+import videoBubbleDefaultProps from './props/defaultProps';
+import videoBubblePropTypes from './props/propTypes';
+
+/** ** Methods *** */
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from './css/cssJSLogic';
+
+/** ** Styles *** */
+import style from './css/VideoBubble.module.css';
+
+/** ** Components *** */
+import AttachmentBubbleInfo from '../AttachmentBubbleInfo/AttachmentBubbleInfo';
+import Video from '../Video/Video';
+export default function VideoBubble(props) {
+  const {
+    customStyle,
+    headerCustomStyle,
+    videoCustomStyle,
+    controlsCustomStyle,
+    fileName,
+    fileSize,
+    fileURL,
+    fileType
+  } = props;
+
+  /* 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, {
+    customStyle: videoCustomStyle,
+    fileURL: fileURL,
+    fileType: fileType,
+    controlsCustomStyle: controlsCustomStyle
+  })));
+}
+VideoBubble.propTypes = videoBubblePropTypes;
+VideoBubble.defaultProps = videoBubbleDefaultProps;
+VideoBubble.displayName = 'VideoBubble';

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

@@ -0,0 +1,4 @@
+.videoBubble{
+    width: 360px;
+    max-width: 100%;
+}

package/es/VideoBubble/css/cssJSLogic.js

@@ -0,0 +1,10 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const videoBubbleClass = compileClassNames({
+    [style.videoBubble]: true
+  });
+  return {
+    videoBubbleClass
+  };
+}

package/es/VideoBubble/index.js

@@ -0,0 +1 @@
+export { default as VideoBubble } from './VideoBubble';

package/es/VideoBubble/props/defaultProps.js

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