sense-react-timeline-editor 1.1.33 → 1.1.35

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';
 
@@ -3579,26 +3579,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 +3630,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 +3700,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 +3714,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);
@@ -3890,20 +3866,35 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (trackPreviewDataRef.current) setTrackPreview(trackPreviewDataRef.current);
     if (dragIndicatorDataRef.current) setDragIndicator(dragIndicatorDataRef.current);
   }, [scrollTop]);
+  // 使用 ref 追踪 handleSelectionChange 的调用深度，避免无限循环
+  var selectionChangeDepthRef = useRef(0);
   // 框选功能
   var handleSelectionChange = useCallback(function (selectedActionIds) {
-    // 更新 editorData 中每个 action 的选中状态
-    var updatedData = editorData.map(function (row) {
-      return _objectSpread2(_objectSpread2({}, row), {}, {
-        actions: row.actions.map(function (action) {
-          return _objectSpread2(_objectSpread2({}, action), {}, {
-            selected: selectedActionIds.includes(action.id)
-          });
-        })
+    // 如果调用深度过深（超过10层），说明可能存在无限循环，直接返回
+    if (selectionChangeDepthRef.current > 10) {
+      console.warn('Selection change depth exceeded, possible infinite loop detected');
+      return;
+    }
+    selectionChangeDepthRef.current++;
+    try {
+      // 更新 editorData 中每个 action 的选中状态
+      var updatedData = editorData.map(function (row) {
+        return _objectSpread2(_objectSpread2({}, row), {}, {
+          actions: row.actions.map(function (action) {
+            return _objectSpread2(_objectSpread2({}, action), {}, {
+              selected: selectedActionIds.includes(action.id)
+            });
+          })
+        });
       });
-    });
-    setEditorData(updatedData);
-    onMutiSelectChange === null || onMutiSelectChange === void 0 ? void 0 : onMutiSelectChange(selectedActionIds);
+      setEditorData(updatedData);
+      onMutiSelectChange === null || onMutiSelectChange === void 0 ? void 0 : onMutiSelectChange(selectedActionIds);
+    } finally {
+      // 延迟重置计数器，确保在 React 完成渲染后执行
+      setTimeout(function () {
+        selectionChangeDepthRef.current--;
+      }, 0);
+    }
   }, [editorData, setEditorData, onMutiSelectChange]);
   var _useRowSelection = useRowSelection({
       editorData: editorData,
@@ -4787,8 +4778,19 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
   useEffect(function () {
     var handleClickOutside = function handleClickOutside(e) {
       var target = e.target;
-      var actionEl = target.closest('.timeline-editor-time-area') || target.closest('.timeline-editor-action');
-      if (actionEl) return;
+      var areaEl = target.closest('.timeline-editor-time-area');
+      if (areaEl) return;
+      var actionEl = target.closest('.timeline-editor-action');
+      if (actionEl) {
+        var _props$onClickActionO;
+        // @ts-expect-error 类型断言
+        (_props$onClickActionO = props.onClickActionOnly) === null || _props$onClickActionO === void 0 ? void 0 : _props$onClickActionO.call(props, e, {
+          action: {
+            id: actionEl.dataset.actionId
+          }
+        });
+        return;
+      }
       engineRef.current.trigger('mousedown', {
         target: target,
         evt: e
@@ -4804,7 +4806,7 @@ var Timeline = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (p
     return function () {
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, []);
+  }, [props.onClickActionOnly]);
   // ref 数据
   useImperativeHandle(ref, function () {
     return {

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');
 
@@ -3589,26 +3589,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 +3640,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 +3710,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 +3724,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);
@@ -3900,20 +3876,35 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
     if (trackPreviewDataRef.current) setTrackPreview(trackPreviewDataRef.current);
     if (dragIndicatorDataRef.current) setDragIndicator(dragIndicatorDataRef.current);
   }, [scrollTop]);
+  // 使用 ref 追踪 handleSelectionChange 的调用深度，避免无限循环
+  var selectionChangeDepthRef = React.useRef(0);
   // 框选功能
   var handleSelectionChange = React.useCallback(function (selectedActionIds) {
-    // 更新 editorData 中每个 action 的选中状态
-    var updatedData = editorData.map(function (row) {
-      return _objectSpread2(_objectSpread2({}, row), {}, {
-        actions: row.actions.map(function (action) {
-          return _objectSpread2(_objectSpread2({}, action), {}, {
-            selected: selectedActionIds.includes(action.id)
-          });
-        })
+    // 如果调用深度过深（超过10层），说明可能存在无限循环，直接返回
+    if (selectionChangeDepthRef.current > 10) {
+      console.warn('Selection change depth exceeded, possible infinite loop detected');
+      return;
+    }
+    selectionChangeDepthRef.current++;
+    try {
+      // 更新 editorData 中每个 action 的选中状态
+      var updatedData = editorData.map(function (row) {
+        return _objectSpread2(_objectSpread2({}, row), {}, {
+          actions: row.actions.map(function (action) {
+            return _objectSpread2(_objectSpread2({}, action), {}, {
+              selected: selectedActionIds.includes(action.id)
+            });
+          })
+        });
       });
-    });
-    setEditorData(updatedData);
-    onMutiSelectChange === null || onMutiSelectChange === void 0 ? void 0 : onMutiSelectChange(selectedActionIds);
+      setEditorData(updatedData);
+      onMutiSelectChange === null || onMutiSelectChange === void 0 ? void 0 : onMutiSelectChange(selectedActionIds);
+    } finally {
+      // 延迟重置计数器，确保在 React 完成渲染后执行
+      setTimeout(function () {
+        selectionChangeDepthRef.current--;
+      }, 0);
+    }
   }, [editorData, setEditorData, onMutiSelectChange]);
   var _useRowSelection = useRowSelection({
       editorData: editorData,
@@ -4797,8 +4788,19 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
   React.useEffect(function () {
     var handleClickOutside = function handleClickOutside(e) {
       var target = e.target;
-      var actionEl = target.closest('.timeline-editor-time-area') || target.closest('.timeline-editor-action');
-      if (actionEl) return;
+      var areaEl = target.closest('.timeline-editor-time-area');
+      if (areaEl) return;
+      var actionEl = target.closest('.timeline-editor-action');
+      if (actionEl) {
+        var _props$onClickActionO;
+        // @ts-expect-error 类型断言
+        (_props$onClickActionO = props.onClickActionOnly) === null || _props$onClickActionO === void 0 ? void 0 : _props$onClickActionO.call(props, e, {
+          action: {
+            id: actionEl.dataset.actionId
+          }
+        });
+        return;
+      }
       engineRef.current.trigger('mousedown', {
         target: target,
         evt: e
@@ -4814,7 +4816,7 @@ var Timeline = /*#__PURE__*/React__default['default'].memo(/*#__PURE__*/React__d
     return function () {
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, []);
+  }, [props.onClickActionOnly]);
   // ref 数据
   React.useImperativeHandle(ref, function () {
     return {

package/package.json

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