@antscorp/antsomi-ui 1.3.3-beta.89 → 1.3.3-beta.90

package/es/components/molecules/UploadImage/MediaThumb.d.ts

@@ -1,11 +1,8 @@
 import React from 'react';
 import type { MediaMode } from '.';
-interface MediaThumbProps {
+export interface MediaThumbProps {
     mode: MediaMode;
     media: any;
-    index: number;
-    posters: string[];
-    onSetPosters: (newPosters: string[]) => void;
 }
-export declare const MediaThumb: React.FC<MediaThumbProps>;
-export {};
+declare const _default: React.NamedExoticComponent<MediaThumbProps>;
+export default _default;

package/es/components/molecules/UploadImage/MediaThumb.js

@@ -1,31 +1,15 @@
-/* eslint-disable jsx-a11y/media-has-caption */
 // Libraries
-import React, { useEffect } from 'react';
+import React, { lazy, Suspense, memo } from 'react';
+// Assets
+import PlaceholderImage from '@antscorp/antsomi-ui/es/assets/images/placeholder-image.png';
 // Styled
 import { Image } from './styled';
-export const MediaThumb = props => {
-    const { mode, index, media, posters, onSetPosters } = props;
-    useEffect(() => {
-        let timer = null;
-        if (mode === 'video' && posters[index] !== '') {
-            const newPosters = [...posters];
-            newPosters.splice(index, 1, '');
-            timer = setTimeout(() => {
-                onSetPosters(newPosters);
-            }, 500);
-        }
-        return () => {
-            if (timer) {
-                clearTimeout(timer);
-            }
-        };
-    }, [mode, posters, index, onSetPosters]);
+const LazyVideoThumbnail = lazy(() => import('./VideoThumbnail'));
+const MediaThumb = props => {
+    const { mode, media } = props;
     if (mode === 'image')
         return React.createElement(Image, { src: media.url, alt: "img" });
-    return (React.createElement("video", { controls: false, width: "100%", height: "100%", autoPlay: false, poster: posters[index] || '', onCanPlay: () => {
-            const newPosters = [...posters];
-            newPosters.splice(index, 1, '');
-            onSetPosters(newPosters);
-        }, style: { position: 'absolute' } },
-        React.createElement("source", { src: media.url })));
+    return (React.createElement(Suspense, { fallback: React.createElement(Image, { src: PlaceholderImage, alt: "img" }) },
+        React.createElement(LazyVideoThumbnail, { mode: mode, media: media })));
 };
+export default memo(MediaThumb);

package/es/components/molecules/UploadImage/VideoThumbnail.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { MediaThumbProps } from './MediaThumb';
+declare const _default: React.NamedExoticComponent<MediaThumbProps>;
+export default _default;

package/es/components/molecules/UploadImage/VideoThumbnail.js

@@ -0,0 +1,39 @@
+/* eslint-disable jsx-a11y/media-has-caption */
+// Libraries
+import React, { useState, memo, useEffect, useRef } from 'react';
+// Assets
+import PlaceholderImage from '@antscorp/antsomi-ui/es/assets/images/placeholder-image.png';
+// Styled
+import { Image } from './styled';
+const VideoThumbnail = props => {
+    const { mode, media } = props;
+    const [isShow, setIsShow] = useState(false);
+    // Refs
+    const videoRef = useRef(null);
+    const canvasRef = useRef(null);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        const video = videoRef.current;
+        const dimension = 400;
+        let listener = () => { };
+        if (media && media.url && mode === 'video') {
+            const context = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d');
+            if (canvas && video && context) {
+                listener = () => {
+                    context.drawImage(video, 0, 0, dimension, dimension);
+                    setIsShow(true);
+                };
+                video.addEventListener('loadeddata', listener);
+                video.src = media.url;
+            }
+        }
+        return () => {
+            video === null || video === void 0 ? void 0 : video.removeEventListener('loadeddata', listener);
+        };
+    }, [media, mode]);
+    return (React.createElement("div", { style: { width: '100%', height: '100%' } },
+        React.createElement("video", { width: 400, height: 400, ref: videoRef, style: { display: 'none' } }),
+        React.createElement("canvas", { ref: canvasRef, style: { width: '100%', height: '100%', display: isShow ? 'block' : 'none' } }),
+        React.createElement(Image, { src: PlaceholderImage, alt: "placeholder", style: { display: isShow ? 'none' : 'block' } })));
+};
+export default memo(VideoThumbnail);

package/es/components/molecules/UploadImage/index.js

@@ -11,7 +11,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 /* eslint-disable @typescript-eslint/no-use-before-define */
 /* eslint-disable react-hooks/exhaustive-deps */
 // Libraries
-import React, { useEffect, useState, useRef } from 'react';
+import React, { lazy, Suspense, useEffect, useState, useRef } from 'react';
 import Upload from 'antd/lib/upload';
 // Hooks
 import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
@@ -24,8 +24,6 @@ import { uploadFile, createSavedMedia, deleteSavedMedia, getListingSavedMedia, }
 import { Button, Icon, Text, message, Spin, Input, Space, } from '@antscorp/antsomi-ui/es/components/atoms';
 // Molecules
 import { Modal, InputSearch, Select } from '@antscorp/antsomi-ui/es/components/molecules';
-// Components
-import { MediaThumb } from './MediaThumb';
 // Styled
 import { Boxed, ErrorMessage, Image, Overlay, Paragraph, TextStyled, UploadImageWrapper, WrapperBtn, WrapperIcon, WrapperInputMode, WrapperListImages, } from './styled';
 // Utils
@@ -49,6 +47,7 @@ const SORT_OPTIONS = {
         label: 'Sort by Size',
     },
 };
+const LazyThumbnail = lazy(() => import('./MediaThumb'));
 const PATH = '@antscorp/antsomi-ui/es/components/molecules/UploadImage/index.tsx';
 export const UploadImage = props => {
     var _a, _b, _c, _d, _e, _f;
@@ -62,7 +61,6 @@ export const UploadImage = props => {
     const [loading, setLoading] = useState(false);
     const [isOpenConfirmDelete, setOpenConfirmDelete] = useState(false);
     const [triggerRefresh, setTriggerRefresh] = useState(1);
-    const [posters, setPosters] = useState([]);
     const uploadFilesRef = useRef([]);
     const uploadFilesTimeoutRef = useRef();
     const deleteMediaRef = useRef();
@@ -71,12 +69,6 @@ export const UploadImage = props => {
         setListMedia(storeSavedMedia || []);
         setLoading(false);
     }, [storeSavedMedia]);
-    useDeepCompareEffect(() => {
-        if (mode === 'video') {
-            const genPosters = Array.from({ length: (listMedia === null || listMedia === void 0 ? void 0 : listMedia.length) || 0 }, () => PlaceholderImage);
-            setPosters(genPosters);
-        }
-    }, [listMedia]);
     // When selectedMediaProp onChange
     useEffect(() => {
         setSelectedMedia(selectedMediaProp || { url: '' });
@@ -144,7 +136,8 @@ export const UploadImage = props => {
         var _a;
         return (React.createElement(WrapperListImages, { className: "ants-group", key: idx },
             React.createElement(Boxed, null,
-                React.createElement(MediaThumb, { index: idx, posters: posters, mode: mode, media: media, onSetPosters: setPosters }),
+                React.createElement(Suspense, { fallback: React.createElement(Image, { src: PlaceholderImage, alt: "fallback image" }) },
+                    React.createElement(LazyThumbnail, { mode: mode, media: media })),
                 React.createElement(WrapperBtn, { className: "group-hover" },
                     React.createElement(Button, { onClick: () => handleSelectMedia(media), style: { backgroundColor: 'rgb(255,255,255)' } }, "USE"),
                     React.createElement(Button, { onClick: () => handleRemoveUploadedMedia(media), style: { backgroundColor: 'rgb(255,255,255)' } },

package/package.json

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