@app-studio/web 0.8.62 → 0.8.64

package/dist/components/Tabs/Tabs/Tabs.props.d.ts

@@ -9,4 +9,6 @@ export interface TabsViewProps extends TabsProps {
     setIsActive: React.Dispatch<React.SetStateAction<Tab>>;
     tabsState: Tab[];
     setTabsState: React.Dispatch<React.SetStateAction<Tab[]>>;
+    renderTab?: (tab: Tab, isActive: boolean, index: number) => React.ReactNode;
+    renderContent?: (tab: Tab, index: number) => React.ReactNode;
 }

package/dist/components/Uploader/Uploader.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { UploadProps, UseUploadProps } from './Uploader.props';
+export declare const generateThumbnail: (videoFile: File, setThumbnailUrl: (url: string) => void) => void;
 export declare const useUpload: ({ maxSize, onFileSelect, validateFile, thumbnail, onError, }: UseUploadProps) => {
     previewUrl: string | null;
     thumbnailUrl: string | null;

package/dist/web.cjs.development.js

@@ -6965,6 +6965,26 @@ var MessageLayout = _ref => {
   return visible ? MessageContainer : null;
 };
 
+var generateThumbnail = (videoFile, setThumbnailUrl) => {
+  var video = document.createElement('video');
+  video.preload = 'metadata';
+  video.onloadedmetadata = () => {
+    video.currentTime = 1;
+  };
+  video.oncanplay = () => {
+    var canvas = document.createElement('canvas');
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    var ctx = canvas.getContext('2d');
+    if (ctx) {
+      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+      var thumbnailDataUrl = canvas.toDataURL('image/jpeg');
+      setThumbnailUrl(thumbnailDataUrl);
+    }
+    URL.revokeObjectURL(video.src);
+  };
+  video.src = URL.createObjectURL(videoFile);
+};
 var useUpload = _ref => {
   var {
     maxSize = 100 * 1024 * 1024,
@@ -6982,26 +7002,6 @@ var useUpload = _ref => {
   var [errorMessage, setErrorMessage] = React.useState(null);
   var [previewUrl, setPreviewUrl] = React.useState(null);
   var [thumbnailUrl, setThumbnailUrl] = React.useState(thumbnail || null);
-  var generateThumbnail = videoFile => {
-    var video = document.createElement('video');
-    video.preload = 'metadata';
-    video.onloadedmetadata = () => {
-      video.currentTime = 1;
-    };
-    video.oncanplay = () => {
-      var canvas = document.createElement('canvas');
-      canvas.width = video.videoWidth;
-      canvas.height = video.videoHeight;
-      var ctx = canvas.getContext('2d');
-      if (ctx) {
-        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-        var thumbnailDataUrl = canvas.toDataURL('image/jpeg');
-        setThumbnailUrl(thumbnailDataUrl);
-      }
-      URL.revokeObjectURL(video.src);
-    };
-    video.src = URL.createObjectURL(videoFile);
-  };
   var handleFileChange = React.useCallback(event => {
     var _event$target$files;
     var file = (_event$target$files = event.target.files) == null ? void 0 : _event$target$files[0];
@@ -7026,7 +7026,7 @@ var useUpload = _ref => {
     }
     setPreviewUrl(URL.createObjectURL(file));
     if (file.type.startsWith('video/')) {
-      generateThumbnail(file);
+      generateThumbnail(file, setThumbnailUrl);
     }
     if (onFileSelect) {
       setSelectedFile(file);
@@ -7678,7 +7678,9 @@ var TabsView = props => {
     isActive,
     setIsActive,
     tabsState,
-    setTabsState
+    setTabsState,
+    renderTab,
+    renderContent
   } = props;
   // Declares a function 'moveSelectedTabToTop' that takes an index and modifies the tabs order.
   var moveSelectedTabToTop = idx => {
@@ -7699,11 +7701,9 @@ var TabsView = props => {
     return tab.value === tabsState[0].value;
   };
   return /*#__PURE__*/React__default.createElement(Vertical, Object.assign({
-    width: "100w",
+    width: "100%",
     height: '100%'
-  }, styles == null ? void 0 : styles.container), /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
-    marginBottom: 20
-  }, styles == null ? void 0 : styles.headerTabs), tabs.map((tab, idx) => (/*#__PURE__*/React__default.createElement(Button, Object.assign({
+  }, styles == null ? void 0 : styles.container), /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({}, styles == null ? void 0 : styles.headerTabs), tabs.map((tab, idx) => renderTab ? renderTab(tab, isContentActive(tab), idx) : (/*#__PURE__*/React__default.createElement(Button, Object.assign({
     key: tab.title,
     onClick: () => {
       moveSelectedTabToTop(idx);
@@ -7711,11 +7711,12 @@ var TabsView = props => {
     variant: isActive.value === tab.value ? 'filled' : 'ghost',
     shape: "pillShaped",
     cursor: "pointer",
-    isAuto: true
+    isAuto: true,
+    margin: 10
   }, styles == null ? void 0 : styles.tab, isActive.value === tab.value ? styles == null ? void 0 : styles.activeTab : {}), /*#__PURE__*/React__default.createElement(Text, Object.assign({}, styles == null ? void 0 : styles.title, isActive.value === tab.value ? styles == null ? void 0 : styles.activeText : {}), tab.title))))), /*#__PURE__*/React__default.createElement(View, Object.assign({
     width: '100%',
     height: "100%"
-  }, styles == null ? void 0 : styles.content), tabsState.map((tab, idx) => isContentActive(tab) && /*#__PURE__*/React__default.createElement(View, {
+  }, styles == null ? void 0 : styles.content), tabsState.map(renderContent ? renderContent : (tab, idx) => isContentActive(tab) && /*#__PURE__*/React__default.createElement(View, {
     key: idx
   }, tab.content))));
 };
@@ -8191,6 +8192,7 @@ exports.WarningIcon = WarningIcon;
 exports.WifiIcon = WifiIcon;
 exports.XIcon = XIcon;
 exports.YoutubeIcon = YoutubeIcon;
+exports.generateThumbnail = generateThumbnail;
 exports.hideMessage = hideMessage;
 exports.hideModal = hideModal;
 exports.showMessage = showMessage;