@antscorp/antsomi-ui 1.3.3-beta.56 → 1.3.3-beta.58

package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuCell/index.js

@@ -70,12 +70,15 @@ export const RichMenuCell = props => {
                 React.createElement(AddLabel, null, t(translations.cellAction).toString())));
         return (React.createElement(CellImage, { active: active && !isPreview, src: imageUrl, imagePosition: objectPosition, imageSize: objectFit, style: restImageStyles }));
     };
-    const renderVideoLayer = (action) => {
+    const renderVideoLayer = (action, cell) => {
         if (!action || action.type !== 'video' || layerActive === 'image')
             return null;
         const { previewImage, isAddLabel, videoUrl } = action;
-        return (React.createElement(LayerVideoContainer, null,
-            !isPreview && (React.createElement(Video, { width: "100%", height: "100%", ref: videoRef, onEnded: () => {
+        const { active } = cell;
+        if (!previewImage && !videoUrl)
+            return null;
+        return (React.createElement(LayerVideoContainer, { active: active && !isPreview && videoState.status === 'idle' },
+            !isPreview && videoUrl && (React.createElement(Video, { ref: videoRef, style: { width: '100%', height: '100%', objectFit: 'cover' }, onEnded: () => {
                     setVideoState(prev => (Object.assign(Object.assign({}, prev), { status: 'idle' })));
                 }, onClick: handleVideoStop, onLoadedData: () => {
                     setVideoState(prev => (Object.assign(Object.assign({}, prev), { status: 'idle' })));
@@ -83,11 +86,11 @@ export const RichMenuCell = props => {
                 React.createElement("source", { src: videoUrl, type: "video/mp4" }))),
             previewImage && (videoState.status === 'idle' || isPreview) && (React.createElement(ThumbnailBox, null,
                 React.createElement(Image, { src: previewImage, alt: "thumbnail" }))),
-            (videoState.status === 'idle' || isPreview) && (React.createElement(VideoAction, null,
-                React.createElement(ActionButton, { onClick: handleVideoPlay },
+            (videoState.status === 'idle' || isPreview) && videoUrl && (React.createElement(VideoAction, null,
+                React.createElement(ActionButton, { id: "video-capture-action-play", onClick: handleVideoPlay },
                     React.createElement(Icon, { type: "icon-ants-play-circle", size: 24, style: { width: 26, color: '#fff' } }),
                     isAddLabel && React.createElement(ActionButtonLabel, null, "Play")),
-                isAddLabel && (React.createElement(Link, { href: action.externalUrl, target: "_blank", rel: "noreferrer" },
+                isAddLabel && action.label && (React.createElement(Link, { id: "video-capture-action-external", href: action.externalUrl, target: "_blank", rel: "noreferrer" },
                     React.createElement("div", { style: { width: 26 } },
                         React.createElement(CircleBorder, null,
                             React.createElement(Icon, { type: "icon-ants-redo", size: 14, style: { color: '#fff', height: '17px' } }))),
@@ -98,5 +101,5 @@ export const RichMenuCell = props => {
             tryCatchWrapper(onClick, PATH)(context);
         } },
         renderCellContent(!isSingleMode, cell),
-        renderVideoLayer(action)));
+        renderVideoLayer(action, cell)));
 };

package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuCell/styled.d.ts

@@ -7,7 +7,9 @@ export declare const CellImage: import("styled-components").StyledComponent<"div
     imagePosition: string;
     imageSize: string;
 }, never>;
-export declare const LayerVideoContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LayerVideoContainer: import("styled-components").StyledComponent<"div", any, {
+    active?: boolean | undefined;
+}, never>;
 export declare const Video: import("styled-components").StyledComponent<"video", any, {}, never>;
 export declare const VideoAction: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ActionButton: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuCell/styled.js

@@ -58,6 +58,21 @@ export const LayerVideoContainer = styled.div `
   bottom: 0;
   z-index: 9999;
   overflow: hidden;
+
+  ${props => props.active &&
+    css `
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background-color: rgba(0, 95, 184, 0.5);
+        display: block;
+        z-index: 9999;
+      }
+    `}
 `;
 export const Video = styled.video ``;
 export const VideoAction = styled.div `
@@ -68,14 +83,15 @@ export const VideoAction = styled.div `
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
-  gap: 5px;
-  z-index: 9999;
+  gap: 10px;
+  z-index: 99999;
   transform: translate(-50%, -50%);
 `;
 export const ActionButton = styled.div `
   display: flex;
   justify-content: center;
   align-items: center;
+  height: auto;
 `;
 export const ThumbnailBox = styled.div `
   position: absolute;
@@ -95,6 +111,7 @@ export const Link = styled.a `
   justify-content: center;
   align-items: center;
   text-decoration: none;
+  height: auto;
 `;
 export const ActionButtonLabel = styled.span `
   font-size: 14px;
@@ -104,7 +121,7 @@ export const ActionButtonLabel = styled.span `
   overflow: hidden;
   line-height: 18px;
   height: 18px;
-  max-width: 100px;
+  max-width: 300px;
 `;
 export const CircleBorder = styled.div `
   width: 18px;

package/package.json

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