sense-react-timeline-editor 1.1.34 → 1.1.36

package/dist/index.esm.js

@@ -5,7 +5,7 @@ import { prefixNames } from 'framework-utils';
 import interact from 'interactjs';
 import { useSelectionContainer } from '@air/react-drag-to-select';
 import { message } from 'antd/es';
-import { Howl } from 'howler';
+import 'howler';
 import { groupBy, throttle } from 'lodash-es';
 import useSize from 'ahooks/es/useSize';
 
@@ -1873,11 +1873,13 @@ var RowDnd = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         var preLeft = parseFloat(left || '0');
         var preWidth = parseFloat(width || '0');
         deltaX.current += delta;
-        resize({
-          preLeft: preLeft,
-          preWidth: preWidth,
-          dir: dir
-        });
+        setTimeout(function () {
+          resize({
+            preLeft: preLeft,
+            preWidth: preWidth,
+            dir: dir
+          });
+        }, 0);
       });
       if (!result) return;
     }
@@ -1887,11 +1889,13 @@ var RowDnd = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var preLeft = parseFloat(left || '0');
     var preWidth = parseFloat(width || '0');
     deltaX.current += dir === 'left' ? e.deltaRect.left : e.deltaRect.right;
-    resize({
-      preLeft: preLeft,
-      preWidth: preWidth,
-      dir: dir
-    });
+    setTimeout(function () {
+      resize({
+        preLeft: preLeft,
+        preWidth: preWidth,
+        dir: dir
+      });
+    }, 0);
   };
   var handleResizeStop = function handleResizeStop(e) {
     var _e$edges3;
@@ -2280,6 +2284,10 @@ var EditActionO = function EditActionO(_ref8) {
     _useState2 = _slicedToArray(_useState, 2),
     dragging = _useState2[0],
     setDragging = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    resizing = _useState4[0],
+    setResizing = _useState4[1];
   var originStart = start;
   parserTimeToPixel(originStart, {
     startLeft: startLeft,
@@ -2311,7 +2319,7 @@ var EditActionO = function EditActionO(_ref8) {
     scaleWidth: scaleWidth
   }));
   // 初始化动作坐标数据
-  var _useState3 = useState(function () {
+  var _useState5 = useState(function () {
       return _objectSpread2(_objectSpread2({}, parserTimeToTransform({
         start: start,
         end: end
@@ -2323,9 +2331,9 @@ var EditActionO = function EditActionO(_ref8) {
         top: 0
       });
     }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    transform = _useState4[0],
-    setTransform = _useState4[1];
+    _useState6 = _slicedToArray(_useState5, 2),
+    transform = _useState6[0],
+    setTransform = _useState6[1];
   useLayoutEffect(function () {
     setTransform(_objectSpread2(_objectSpread2({}, parserTimeToTransform({
       start: start,
@@ -2727,6 +2735,7 @@ var EditActionO = function EditActionO(_ref8) {
       row: row,
       dir: dir
     });
+    setResizing(true);
   };
   var handleResizing = function handleResizing(dir, _ref1) {
     var left = _ref1.left,
@@ -2785,6 +2794,7 @@ var EditActionO = function EditActionO(_ref8) {
     action.start = start;
     action.end = end;
     setEditorData(editorData);
+    setResizing(false);
     // 触发回调
     if (onActionResizeEnd) onActionResizeEnd({
       action: action,
@@ -2942,7 +2952,7 @@ var EditActionO = function EditActionO(_ref8) {
     style: {
       height: rowHeight
     }
-  }, getActionRender && getActionRender(nowAction, nowRow), flexible && (/*#__PURE__*/React.createElement("div", {
+  }, getActionRender && getActionRender(nowAction, nowRow, resizing), flexible && (/*#__PURE__*/React.createElement("div", {
     className: prefix('action-left-stretch')
   }, /*#__PURE__*/React.createElement("img", {
     src: stretchIcon,
@@ -3579,26 +3589,6 @@ var useRowDrag = function useRowDrag(options) {
   };
 };
 
-// 获取音频时长
-var getAudioDuration = function getAudioDuration(url) {
-  return new Promise(function (resolve) {
-    var sound = new Howl({
-      src: url
-    });
-    sound.on('load', function () {
-      resolve(sound.duration());
-      sound.unload();
-    });
-    setTimeout(function () {
-      resolve(2); // 加载失败时返回默认时长2秒
-      sound.unload();
-    }, 6 * 1000); // 60秒超时 60 * 1000
-    sound.on('loaderror', function () {
-      resolve(2); // 加载失败时返回默认时长2秒
-      sound.unload();
-    });
-  });
-};
 var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var className = props.className,
     _props$isMulti = props.isMulti,
@@ -3650,7 +3640,7 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return /*#__PURE__*/function () {
       var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(info) {
         var _info$file$response, _info$file, _info$file$response2;
-        var maxSize, hasDefault, totalDuration, _newAction, uid, duration, newAction;
+        var maxSize, hasDefault, totalDuration, _newAction, uid, newAction;
         return _regenerator().w(function (_context) {
           while (1) switch (_context.n) {
             case 0:
@@ -3720,17 +3710,13 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
               return _context.a(2);
             case 5:
               uid = info.file.uid;
-              _context.n = 6;
-              return getAudioDuration(info.file.response.url);
-            case 6:
-              duration = _context.v;
               newAction = {
                 id: ((_info$file$response = info.file.response) === null || _info$file$response === void 0 ? void 0 : _info$file$response.id) || uid,
                 effectId: 'custom_video_effect',
                 flexible: true,
                 url: info.file.response.url,
                 start: currentMouseTime,
-                end: currentMouseTime + duration,
+                end: currentMouseTime + 1000,
                 isUpload: true,
                 segment_type: 'bgm',
                 isUploading: false,
@@ -3738,7 +3724,7 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
                 waveform: ((_info$file$response2 = info.file.response) === null || _info$file$response2 === void 0 ? void 0 : _info$file$response2.peaks) || []
               };
               onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(row, [newAction]);
-            case 7:
+            case 6:
               return _context.a(2);
           }
         }, _callee);

package/dist/index.js

@@ -9,7 +9,7 @@ var frameworkUtils = require('framework-utils');
 var interact = require('interactjs');
 var reactDragToSelect = require('@air/react-drag-to-select');
 var es = require('antd/es');
-var howler = require('howler');
+require('howler');
 var lodashEs = require('lodash-es');
 var useSize = require('ahooks/es/useSize');
 
@@ -1883,11 +1883,13 @@ var RowDnd = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, r
         var preLeft = parseFloat(left || '0');
         var preWidth = parseFloat(width || '0');
         deltaX.current += delta;
-        resize({
-          preLeft: preLeft,
-          preWidth: preWidth,
-          dir: dir
-        });
+        setTimeout(function () {
+          resize({
+            preLeft: preLeft,
+            preWidth: preWidth,
+            dir: dir
+          });
+        }, 0);
       });
       if (!result) return;
     }
@@ -1897,11 +1899,13 @@ var RowDnd = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, r
     var preLeft = parseFloat(left || '0');
     var preWidth = parseFloat(width || '0');
     deltaX.current += dir === 'left' ? e.deltaRect.left : e.deltaRect.right;
-    resize({
-      preLeft: preLeft,
-      preWidth: preWidth,
-      dir: dir
-    });
+    setTimeout(function () {
+      resize({
+        preLeft: preLeft,
+        preWidth: preWidth,
+        dir: dir
+      });
+    }, 0);
   };
   var handleResizeStop = function handleResizeStop(e) {
     var _e$edges3;
@@ -2290,6 +2294,10 @@ var EditActionO = function EditActionO(_ref8) {
     _useState2 = _slicedToArray(_useState, 2),
     dragging = _useState2[0],
     setDragging = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    resizing = _useState4[0],
+    setResizing = _useState4[1];
   var originStart = start;
   parserTimeToPixel(originStart, {
     startLeft: startLeft,
@@ -2321,7 +2329,7 @@ var EditActionO = function EditActionO(_ref8) {
     scaleWidth: scaleWidth
   }));
   // 初始化动作坐标数据
-  var _useState3 = React.useState(function () {
+  var _useState5 = React.useState(function () {
       return _objectSpread2(_objectSpread2({}, parserTimeToTransform({
         start: start,
         end: end
@@ -2333,9 +2341,9 @@ var EditActionO = function EditActionO(_ref8) {
         top: 0
       });
     }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    transform = _useState4[0],
-    setTransform = _useState4[1];
+    _useState6 = _slicedToArray(_useState5, 2),
+    transform = _useState6[0],
+    setTransform = _useState6[1];
   React.useLayoutEffect(function () {
     setTransform(_objectSpread2(_objectSpread2({}, parserTimeToTransform({
       start: start,
@@ -2737,6 +2745,7 @@ var EditActionO = function EditActionO(_ref8) {
       row: row,
       dir: dir
     });
+    setResizing(true);
   };
   var handleResizing = function handleResizing(dir, _ref1) {
     var left = _ref1.left,
@@ -2795,6 +2804,7 @@ var EditActionO = function EditActionO(_ref8) {
     action.start = start;
     action.end = end;
     setEditorData(editorData);
+    setResizing(false);
     // 触发回调
     if (onActionResizeEnd) onActionResizeEnd({
       action: action,
@@ -2952,7 +2962,7 @@ var EditActionO = function EditActionO(_ref8) {
     style: {
       height: rowHeight
     }
-  }, getActionRender && getActionRender(nowAction, nowRow), flexible && (/*#__PURE__*/React__default['default'].createElement("div", {
+  }, getActionRender && getActionRender(nowAction, nowRow, resizing), flexible && (/*#__PURE__*/React__default['default'].createElement("div", {
     className: prefix('action-left-stretch')
   }, /*#__PURE__*/React__default['default'].createElement("img", {
     src: stretchIcon,
@@ -3589,26 +3599,6 @@ var useRowDrag = function useRowDrag(options) {
   };
 };
 
-// 获取音频时长
-var getAudioDuration = function getAudioDuration(url) {
-  return new Promise(function (resolve) {
-    var sound = new howler.Howl({
-      src: url
-    });
-    sound.on('load', function () {
-      resolve(sound.duration());
-      sound.unload();
-    });
-    setTimeout(function () {
-      resolve(2); // 加载失败时返回默认时长2秒
-      sound.unload();
-    }, 6 * 1000); // 60秒超时 60 * 1000
-    sound.on('loaderror', function () {
-      resolve(2); // 加载失败时返回默认时长2秒
-      sound.unload();
-    });
-  });
-};
 var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (props, ref) {
   var className = props.className,
     _props$isMulti = props.isMulti,
@@ -3660,7 +3650,7 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
     return /*#__PURE__*/function () {
       var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(info) {
         var _info$file$response, _info$file, _info$file$response2;
-        var maxSize, hasDefault, totalDuration, _newAction, uid, duration, newAction;
+        var maxSize, hasDefault, totalDuration, _newAction, uid, newAction;
         return _regenerator().w(function (_context) {
           while (1) switch (_context.n) {
             case 0:
@@ -3730,17 +3720,13 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
               return _context.a(2);
             case 5:
               uid = info.file.uid;
-              _context.n = 6;
-              return getAudioDuration(info.file.response.url);
-            case 6:
-              duration = _context.v;
               newAction = {
                 id: ((_info$file$response = info.file.response) === null || _info$file$response === void 0 ? void 0 : _info$file$response.id) || uid,
                 effectId: 'custom_video_effect',
                 flexible: true,
                 url: info.file.response.url,
                 start: currentMouseTime,
-                end: currentMouseTime + duration,
+                end: currentMouseTime + 1000,
                 isUpload: true,
                 segment_type: 'bgm',
                 isUploading: false,
@@ -3748,7 +3734,7 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
                 waveform: ((_info$file$response2 = info.file.response) === null || _info$file$response2 === void 0 ? void 0 : _info$file$response2.peaks) || []
               };
               onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(row, [newAction]);
-            case 7:
+            case 6:
               return _context.a(2);
           }
         }, _callee);

package/dist/interface/timeline.d.ts

@@ -84,7 +84,7 @@ export interface EditData {
     /**
      * @description 自定义action区域渲染
      */
-    getActionRender?: (action: TimelineAction, row: TimelineRow) => ReactNode;
+    getActionRender?: (action: TimelineAction, row: TimelineRow, resizing?: boolean) => ReactNode;
     /**
      * @description 自定义scale渲染
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sense-react-timeline-editor",
-  "version": "1.1.34",
+  "version": "1.1.36",
   "author": "xzdarcy",
   "license": "MIT",
   "keywords": [