@antscorp/antsomi-ui 1.3.6-beta.71 → 1.3.6-beta.73

package/es/components/molecules/HeaderV2/HeaderV2.js

@@ -11,7 +11,7 @@ import { AccountSharing } from '@antscorp/antsomi-ui/es/components/organism/Acco
 import { Help } from '@antscorp/antsomi-ui/es/components/organism/Help';
 import { Notification } from '@antscorp/antsomi-ui/es/components/organism/Notification';
 // Constants
-import { APP_CODES, APP_PERMISSION_DOMAIN, CDP_API, IAM_API, ISSUE_API, PERMISSION_API, PLATFORM_API, PORTALS_IDS, SOCKET_API, } from '@antscorp/antsomi-ui/es/constants';
+import { APP_CODES, APP_PERMISSION_DOMAIN, CDP_API, IAM_API, ISSUE_API, PERMISSION_API, PLATFORM_API, PORTALS_IDS, SOCKET_API, MEDIA_TEMPLATE_API, } from '@antscorp/antsomi-ui/es/constants';
 import { useContextSelector } from 'use-context-selector';
 import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers/AppConfigProvider';
 import { isNil } from 'lodash';
@@ -74,6 +74,7 @@ export const HeaderV2 = memo(props => {
         domain: CDP_API[env],
         domainTicket: ISSUE_API[env],
         domainPlatform: PLATFORM_API,
+        domainUpload: MEDIA_TEMPLATE_API[env],
         config: {
             ...configs.config,
             user_language: language,

package/es/components/organism/PreviewCollections/WhatsappMessage/CarouselMessage/index.js

@@ -20,6 +20,7 @@ import { getMediaSrc, getWhatsappComponentCls, isShowMedia } from '../utils';
 const { MARGIN_MESSAGE, PADDING_MESSAGE } = BASE.OFFSET;
 const headerStyle = { padding: PADDING_MESSAGE, paddingBottom: 0 };
 const bodyStyle = { padding: PADDING_MESSAGE };
+const mediaStyle = { minWidth: BASE.LARGE.WIDTH };
 const cls = getWhatsappComponentCls();
 export default React.memo((props) => {
     const { carousel, body, messageIndex } = props;
@@ -60,6 +61,7 @@ export default React.memo((props) => {
                         return (_jsx(SwiperSlideItem, { virtualIndex: cardIdx, children: _jsx(SkeletonMessage, { size: "large", messagePadding: 0, styles: {
                                     header: headerStyle,
                                     body: bodyStyle,
+                                    media: mediaStyle,
                                 }, media: isShowMedia(header?.format) ? (_jsx(MediaMessage, { src: getMediaSrc(header), format: header?.format })) : null, header: isHeaderTxt || isDoc ? _jsx(HeaderMessage, { ...header }) : null, body: _jsx(BodyMessage, { ...body }), footer: _jsx(FooterMessage, { buttons: buttons }) }) }, cardIdx));
                     }) })] }));
     }, []);

package/es/components/organism/PreviewCollections/WhatsappMessage/MediaMessage/index.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable jsx-a11y/media-has-caption */
 // Libraries
-import { memo, useMemo } from 'react';
+import { memo, useMemo, useState } from 'react';
 // Assets
 import AntLogo from '@antscorp/antsomi-ui/es/assets/images/logo/antsomi_logo.png';
 import MediaUnavailable from '@antscorp/antsomi-ui/es/assets/images/previews/media-unavailable.png';
@@ -10,6 +11,7 @@ import { Image } from 'antd';
 import { BASE } from '../../constants';
 export default memo((props) => {
     const { src, format } = props;
+    const [isVideoFails, setIsVideoFails] = useState(false);
     const { padding, objectFit, backgroundColor } = useMemo(() => {
         const isDoc = format === 'DOCUMENT';
         let [pd, bg, objFit] = [0, '#F7F8FC', 'cover'];
@@ -27,6 +29,18 @@ export default memo((props) => {
             objectFit: objFit,
         };
     }, [format, src]);
+    if (format === 'VIDEO') {
+        if (!src || isVideoFails) {
+            return (_jsx(Image, { src: isVideoFails ? MediaUnavailable : AntLogo, alt: "media message header", width: "100%", height: BASE.MEDIA.MAX_HEIGHT, style: {
+                    objectFit,
+                    padding,
+                    backgroundColor,
+                }, fallback: MediaUnavailable }));
+        }
+        return (_jsxs("video", { width: "100%", height: BASE.MEDIA.MAX_HEIGHT, controls: true, autoPlay: false, onError: () => {
+                setIsVideoFails(true);
+            }, children: [_jsx("source", { src: src, type: "video/mp4" }), "Your browser does not support the video tag."] }));
+    }
     return (_jsx(Image, { src: src || AntLogo, alt: "media message header", width: "100%", height: BASE.MEDIA.MAX_HEIGHT, style: {
             objectFit,
             padding,

package/es/components/organism/PreviewCollections/constants.js

@@ -33,6 +33,22 @@ export const SAMPLE_PREVIEW = {
                 },
                 buttons: [{ type: 'URL', text: 'Grab the offer', url: 'https://test.com.vn' }],
             },
+            {
+                type: 'MEDIA',
+                header: {
+                    format: 'VIDEO',
+                    videoURL: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+                },
+                body: {
+                    text: `Hey {{1}}, we have an exclusive deal waiting for you! 🎉
+
+            Get {{2}}% OFF on your next purchase when you shop before {{3}}. Don't miss out on this special offer!
+
+            Use code: {{4}} at checkout.
+          `,
+                },
+                buttons: [{ type: 'URL', text: 'Shop now', url: 'https://test.com.vn' }],
+            },
             {
                 type: 'MEDIA',
                 header: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.6-beta.71",
+  "version": "1.3.6-beta.73",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",