@app-studio/web 0.8.62 → 0.8.64

package/dist/web.esm.js

@@ -6958,6 +6958,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,
@@ -6975,26 +6995,6 @@ var useUpload = _ref => {
   var [errorMessage, setErrorMessage] = useState(null);
   var [previewUrl, setPreviewUrl] = useState(null);
   var [thumbnailUrl, setThumbnailUrl] = 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 = useCallback(event => {
     var _event$target$files;
     var file = (_event$target$files = event.target.files) == null ? void 0 : _event$target$files[0];
@@ -7019,7 +7019,7 @@ var useUpload = _ref => {
     }
     setPreviewUrl(URL.createObjectURL(file));
     if (file.type.startsWith('video/')) {
-      generateThumbnail(file);
+      generateThumbnail(file, setThumbnailUrl);
     }
     if (onFileSelect) {
       setSelectedFile(file);
@@ -7671,7 +7671,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 => {
@@ -7692,11 +7694,9 @@ var TabsView = props => {
     return tab.value === tabsState[0].value;
   };
   return /*#__PURE__*/React.createElement(Vertical, Object.assign({
-    width: "100w",
+    width: "100%",
     height: '100%'
-  }, styles == null ? void 0 : styles.container), /*#__PURE__*/React.createElement(Horizontal, Object.assign({
-    marginBottom: 20
-  }, styles == null ? void 0 : styles.headerTabs), tabs.map((tab, idx) => (/*#__PURE__*/React.createElement(Button, Object.assign({
+  }, styles == null ? void 0 : styles.container), /*#__PURE__*/React.createElement(Horizontal, Object.assign({}, styles == null ? void 0 : styles.headerTabs), tabs.map((tab, idx) => renderTab ? renderTab(tab, isContentActive(tab), idx) : (/*#__PURE__*/React.createElement(Button, Object.assign({
     key: tab.title,
     onClick: () => {
       moveSelectedTabToTop(idx);
@@ -7704,11 +7704,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.createElement(Text, Object.assign({}, styles == null ? void 0 : styles.title, isActive.value === tab.value ? styles == null ? void 0 : styles.activeText : {}), tab.title))))), /*#__PURE__*/React.createElement(View, Object.assign({
     width: '100%',
     height: "100%"
-  }, styles == null ? void 0 : styles.content), tabsState.map((tab, idx) => isContentActive(tab) && /*#__PURE__*/React.createElement(View, {
+  }, styles == null ? void 0 : styles.content), tabsState.map(renderContent ? renderContent : (tab, idx) => isContentActive(tab) && /*#__PURE__*/React.createElement(View, {
     key: idx
   }, tab.content))));
 };
@@ -8069,5 +8070,5 @@ var DragAndDropComponent = props => {
 };
 var DragAndDrop = DragAndDropComponent;
 
-export { Alert, ArrowIcon, AspectRatio, Avatar, Badge, BatteryIcon, BluetoothIcon, BoldArrowIcon, BookmarkIcon, Bottom, Button, CalendarIcon, CameraIcon, Center, CenterBase, Checkbox, ChevronIcon, ClockIcon, CloseEyeIcon, CloseIcon, CloudIcon, ComboBox, CopyIcon, CountryPicker, DatePicker, DownloadIcon, DragAndDrop, DragAndDropComponent, DragHandleIcon, DustBinIcon, EditIcon, ErrorIcon, ExternalLinkIcon, FacebookIcon, FileIcon, FileImage, FileSVG, FilterIcon, FormikCheckbox, FormikComboBox, FormikCountryPicker, FormikDatePicker, FormikForm, FormikPassword, FormikSelect, FormikSwitch, FormikTextArea, FormikTextField, HeartIcon, HomeIcon, Horizontal, HorizontalBase, Icon, ImageIcon, InfoIcon, Inline, InstagramIcon, Left, LikeIcon, Link, LinkedinIcon, Loader, LocationIcon, LockIcon, MenuIcon, MessageLayout, MessageView, MicrophoneIcon, MinusIcon, Modal, MoonIcon, NotificationIcon, OpenEyeIcon, PanelIcon, Password, PauseIcon, PlayIcon, PlusIcon, PrintIcon, ProfileIcon, RefreshIcon, Right, SaveIcon, SearchIcon, Select, SettingsIcon, ShareIcon, SpinnerIcon, StarIcon, SuccessIcon, Switch, Table, Tabs, Text, TextArea, TextField, ThreadsIcon, TickIcon, Toggle, ToggleGroup, Top, TwitchIcon, TwitterIcon, UnLikeIcon, UnlockIcon, UploadIcon, Uploader, Vertical, VerticalBase, VideoIcon, View, WarningIcon, WifiIcon, XIcon, YoutubeIcon, hideMessage, hideModal, showMessage, showModal, useMessageStore, useModalStore, useUpload };
+export { Alert, ArrowIcon, AspectRatio, Avatar, Badge, BatteryIcon, BluetoothIcon, BoldArrowIcon, BookmarkIcon, Bottom, Button, CalendarIcon, CameraIcon, Center, CenterBase, Checkbox, ChevronIcon, ClockIcon, CloseEyeIcon, CloseIcon, CloudIcon, ComboBox, CopyIcon, CountryPicker, DatePicker, DownloadIcon, DragAndDrop, DragAndDropComponent, DragHandleIcon, DustBinIcon, EditIcon, ErrorIcon, ExternalLinkIcon, FacebookIcon, FileIcon, FileImage, FileSVG, FilterIcon, FormikCheckbox, FormikComboBox, FormikCountryPicker, FormikDatePicker, FormikForm, FormikPassword, FormikSelect, FormikSwitch, FormikTextArea, FormikTextField, HeartIcon, HomeIcon, Horizontal, HorizontalBase, Icon, ImageIcon, InfoIcon, Inline, InstagramIcon, Left, LikeIcon, Link, LinkedinIcon, Loader, LocationIcon, LockIcon, MenuIcon, MessageLayout, MessageView, MicrophoneIcon, MinusIcon, Modal, MoonIcon, NotificationIcon, OpenEyeIcon, PanelIcon, Password, PauseIcon, PlayIcon, PlusIcon, PrintIcon, ProfileIcon, RefreshIcon, Right, SaveIcon, SearchIcon, Select, SettingsIcon, ShareIcon, SpinnerIcon, StarIcon, SuccessIcon, Switch, Table, Tabs, Text, TextArea, TextField, ThreadsIcon, TickIcon, Toggle, ToggleGroup, Top, TwitchIcon, TwitterIcon, UnLikeIcon, UnlockIcon, UploadIcon, Uploader, Vertical, VerticalBase, VideoIcon, View, WarningIcon, WifiIcon, XIcon, YoutubeIcon, generateThumbnail, hideMessage, hideModal, showMessage, showModal, useMessageStore, useModalStore, useUpload };
 //# sourceMappingURL=web.esm.js.map