@app-studio/web 0.8.62 → 0.8.64

package/dist/web.umd.development.js

@@ -6949,6 +6949,26 @@
     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,
@@ -6966,26 +6986,6 @@
     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];
@@ -7010,7 +7010,7 @@
       }
       setPreviewUrl(URL.createObjectURL(file));
       if (file.type.startsWith('video/')) {
-        generateThumbnail(file);
+        generateThumbnail(file, setThumbnailUrl);
       }
       if (onFileSelect) {
         setSelectedFile(file);
@@ -7662,7 +7662,9 @@
       isActive,
       setIsActive,
       tabsState,
-      setTabsState
+      setTabsState,
+      renderTab,
+      renderContent
     } = props;
     // Declares a function 'moveSelectedTabToTop' that takes an index and modifies the tabs order.
     var moveSelectedTabToTop = idx => {
@@ -7683,11 +7685,9 @@
       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);
@@ -7695,11 +7695,12 @@
       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))));
   };
@@ -8175,6 +8176,7 @@
   exports.WifiIcon = WifiIcon;
   exports.XIcon = XIcon;
   exports.YoutubeIcon = YoutubeIcon;
+  exports.generateThumbnail = generateThumbnail;
   exports.hideMessage = hideMessage;
   exports.hideModal = hideModal;
   exports.showMessage = showMessage;