sense-react-timeline-editor 1.1.6 → 1.1.8

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, cloneElement, useImperativeHandle, useState, useLayoutEffect, useCallback, memo, forwardRef, useMemo } from 'react';
+import React, { useRef, useEffect, cloneElement, useImperativeHandle, useState, useLayoutEffect, useCallback, useMemo, memo, forwardRef } from 'react';
 import { AutoSizer, Grid, ScrollSync } from 'react-virtualized';
 import { useThrottleEffect, useThrottleFn } from 'ahooks';
 import { prefixNames } from 'framework-utils';
@@ -6,7 +6,7 @@ import interact from 'interactjs';
 import { useSelectionContainer } from '@air/react-drag-to-select';
 import { Upload, message } from 'antd/es';
 import { Howl } from 'howler';
-import { groupBy } from 'lodash-es';
+import { groupBy, throttle } from 'lodash-es';
 import useSize from 'ahooks/es/useSize';
 
 function _arrayLikeToArray(r, a) {
@@ -2007,7 +2007,7 @@ var Cursor = function Cursor(_ref) {
   });
   var clientHeight = ((_document$querySelect = document.querySelector("#time-editor-container")) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.clientHeight) || 0;
   return /*#__PURE__*/React.createElement(RowDnd, {
-    top: theme === 'light' ? 16 : 0,
+    top: theme === 'light' ? 26 : 0,
     start: startLeft,
     height: clientHeight,
     ref: rowRnd,
@@ -2906,8 +2906,48 @@ var EditRow = function EditRow(props) {
     setCursor = props.setCursor,
     hideCursor = props.hideCursor,
     uploadBgMusic = props.uploadBgMusic;
+  var _useState = useState(20),
+    _useState2 = _slicedToArray(_useState, 2),
+    visibleCount = _useState2[0],
+    setVisibleCount = _useState2[1];
   var classNames = ['edit-row'];
   if (rowData === null || rowData === void 0 ? void 0 : rowData.selected) classNames.push('selected');
+  var clientWidth = document.documentElement.clientWidth;
+  var timeStart = parserPixelToTime(scrollLeft, {
+    startLeft: startLeft,
+    scale: scale,
+    scaleWidth: scaleWidth
+  });
+  var timeEnd = parserPixelToTime(scrollLeft + clientWidth + 200, {
+    startLeft: startLeft,
+    scale: scale,
+    scaleWidth: scaleWidth
+  });
+  var visibleActions = useMemo(function () {
+    return ((rowData === null || rowData === void 0 ? void 0 : rowData.actions) || []).filter(function (action) {
+      return action.end >= timeStart && action.start <= timeEnd;
+    }).sort(function (a, b) {
+      return a.start - b.start;
+    });
+  }, [rowData === null || rowData === void 0 ? void 0 : rowData.actions, timeStart, timeEnd]);
+  var renderActions = useMemo(function () {
+    return visibleActions.slice(0, visibleCount);
+  }, [visibleActions, visibleCount]);
+  useEffect(function () {
+    if (visibleCount < visibleActions.length) {
+      var timer = requestAnimationFrame(function () {
+        setVisibleCount(function (prev) {
+          return Math.min(prev + 20, visibleActions.length);
+        });
+      });
+      return function () {
+        return cancelAnimationFrame(timer);
+      };
+    }
+  }, [visibleCount, visibleActions.length]);
+  useEffect(function () {
+    setVisibleCount(20);
+  }, [scrollLeft, rowData === null || rowData === void 0 ? void 0 : rowData.id]);
   var handleTime = function handleTime(e) {
     if (!areaRef.current) return;
     var rect = areaRef.current.getBoundingClientRect();
@@ -2971,7 +3011,7 @@ var EditRow = function EditRow(props) {
         });
       }
     }
-  }, ((rowData === null || rowData === void 0 ? void 0 : rowData.actions) || []).map(function (action) {
+  }, renderActions.map(function (action) {
     return /*#__PURE__*/React.createElement(EditAction, _objectSpread2(_objectSpread2({
       key: action.id
     }, props), {}, {
@@ -3641,10 +3681,16 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
               }
               return _context.a(2);
             case 1:
-              if (!(info.file.status === 'error')) {
+              if (!(info.file.type !== 'audio/mp3' && info.file.type !== 'audio/wav' && info.file.type !== 'audio/mpeg')) {
                 _context.n = 2;
                 break;
               }
+              return _context.a(2, false);
+            case 2:
+              if (!(info.file.status === 'error')) {
+                _context.n = 3;
+                break;
+              }
               onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(row, [{
                 id: info.file.uid,
                 isUploading: false,
@@ -3656,9 +3702,9 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
                 uid: info.file.uid
               }]);
               return _context.a(2);
-            case 2:
+            case 3:
               if (info.file.response) {
-                _context.n = 3;
+                _context.n = 4;
                 break;
               }
               hasDefault = row.actions.some(function (action) {
@@ -3685,11 +3731,11 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
               };
               onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(row, [_newAction]);
               return _context.a(2);
-            case 3:
+            case 4:
               uid = info.file.uid;
-              _context.n = 4;
+              _context.n = 5;
               return getAudioDuration(info.file.response.url);
-            case 4:
+            case 5:
               duration = _context.v;
               newAction = {
                 id: ((_info$file$response = info.file.response) === null || _info$file$response === void 0 ? void 0 : _info$file$response.id) || uid,
@@ -3704,7 +3750,7 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
                 uid: (_info$file = info.file) === null || _info$file === void 0 ? void 0 : _info$file.uid
               };
               onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(row, [newAction]);
-            case 5:
+            case 6:
               return _context.a(2);
           }
         }, _callee);
@@ -3898,6 +3944,7 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
         backgroundPositionX: "0, ".concat(startLeft, "px"),
         backgroundSize: "".concat(startLeft, "px, ").concat(scaleWidth, "px")
       }),
+      scrollLeft: scrollLeft,
       areaRef: editAreaRef,
       key: key,
       rowHeight: (row === null || row === void 0 ? void 0 : row.rowHeight) || _rowHeight,
@@ -3981,7 +4028,8 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
         }).length) > 0,
         customRequest: customRequest,
         onDrop: handleDrop,
-        type: "drag"
+        type: "drag",
+        accept: "audio/mp3,audio/wav,audio/mpeg"
       }, tChildren), tChildren ? null : editRow);
     }
     return editRow;
@@ -4039,6 +4087,7 @@ var EditAreaO = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     }
     heightRef.current = height;
+    console.log('Math.max(scaleCount * scaleWidth + startLeft, width)', Math.max(scaleCount * scaleWidth + startLeft, width), ', width', width);
     return /*#__PURE__*/React.createElement(Grid, {
       columnCount: 1,
       rowCount: heights.length,
@@ -4231,7 +4280,7 @@ var DragLines = /*#__PURE__*/memo(function (_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: prefix('drag-line-container'),
     style: {
-      height: height || '100%'
+      height: height ? height + 30 :  '100%'
     }
   }, isMoving && movePositions.map(function (movePos) {
     // 查找在容差范围内的辅助线位置
@@ -4649,6 +4698,20 @@ var Timeline = /*#__PURE__*/React.forwardRef(function (props, ref) {
       };
     }
   }, []);
+  useEffect(function () {
+    var containerEl = document.querySelector('.timeline-editor');
+    var handleScroll = throttle(function (e) {
+      console.log('scroll', e);
+      scrollSync.current && scrollSync.current.setState({
+        scrollLeft: e.target.scrollLeft || 0
+      });
+    }, 100);
+    containerEl.addEventListener('scroll', handleScroll);
+    return function () {
+      containerEl.removeEventListener('scroll', handleScroll);
+      handleScroll.cancel();
+    };
+  }, []);
   return /*#__PURE__*/React.createElement("div", {
     ref: domRef,
     style: style,

package/dist/index.js

@@ -2017,7 +2017,7 @@ var Cursor = function Cursor(_ref) {
   });
   var clientHeight = ((_document$querySelect = document.querySelector("#time-editor-container")) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.clientHeight) || 0;
   return /*#__PURE__*/React__default['default'].createElement(RowDnd, {
-    top: theme === 'light' ? 16 : 0,
+    top: theme === 'light' ? 26 : 0,
     start: startLeft,
     height: clientHeight,
     ref: rowRnd,
@@ -2916,8 +2916,48 @@ var EditRow = function EditRow(props) {
     setCursor = props.setCursor,
     hideCursor = props.hideCursor,
     uploadBgMusic = props.uploadBgMusic;
+  var _useState = React.useState(20),
+    _useState2 = _slicedToArray(_useState, 2),
+    visibleCount = _useState2[0],
+    setVisibleCount = _useState2[1];
   var classNames = ['edit-row'];
   if (rowData === null || rowData === void 0 ? void 0 : rowData.selected) classNames.push('selected');
+  var clientWidth = document.documentElement.clientWidth;
+  var timeStart = parserPixelToTime(scrollLeft, {
+    startLeft: startLeft,
+    scale: scale,
+    scaleWidth: scaleWidth
+  });
+  var timeEnd = parserPixelToTime(scrollLeft + clientWidth + 200, {
+    startLeft: startLeft,
+    scale: scale,
+    scaleWidth: scaleWidth
+  });
+  var visibleActions = React.useMemo(function () {
+    return ((rowData === null || rowData === void 0 ? void 0 : rowData.actions) || []).filter(function (action) {
+      return action.end >= timeStart && action.start <= timeEnd;
+    }).sort(function (a, b) {
+      return a.start - b.start;
+    });
+  }, [rowData === null || rowData === void 0 ? void 0 : rowData.actions, timeStart, timeEnd]);
+  var renderActions = React.useMemo(function () {
+    return visibleActions.slice(0, visibleCount);
+  }, [visibleActions, visibleCount]);
+  React.useEffect(function () {
+    if (visibleCount < visibleActions.length) {
+      var timer = requestAnimationFrame(function () {
+        setVisibleCount(function (prev) {
+          return Math.min(prev + 20, visibleActions.length);
+        });
+      });
+      return function () {
+        return cancelAnimationFrame(timer);
+      };
+    }
+  }, [visibleCount, visibleActions.length]);
+  React.useEffect(function () {
+    setVisibleCount(20);
+  }, [scrollLeft, rowData === null || rowData === void 0 ? void 0 : rowData.id]);
   var handleTime = function handleTime(e) {
     if (!areaRef.current) return;
     var rect = areaRef.current.getBoundingClientRect();
@@ -2981,7 +3021,7 @@ var EditRow = function EditRow(props) {
         });
       }
     }
-  }, ((rowData === null || rowData === void 0 ? void 0 : rowData.actions) || []).map(function (action) {
+  }, renderActions.map(function (action) {
     return /*#__PURE__*/React__default['default'].createElement(EditAction, _objectSpread2(_objectSpread2({
       key: action.id
     }, props), {}, {
@@ -3651,10 +3691,16 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
               }
               return _context.a(2);
             case 1:
-              if (!(info.file.status === 'error')) {
+              if (!(info.file.type !== 'audio/mp3' && info.file.type !== 'audio/wav' && info.file.type !== 'audio/mpeg')) {
                 _context.n = 2;
                 break;
               }
+              return _context.a(2, false);
+            case 2:
+              if (!(info.file.status === 'error')) {
+                _context.n = 3;
+                break;
+              }
               onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(row, [{
                 id: info.file.uid,
                 isUploading: false,
@@ -3666,9 +3712,9 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
                 uid: info.file.uid
               }]);
               return _context.a(2);
-            case 2:
+            case 3:
               if (info.file.response) {
-                _context.n = 3;
+                _context.n = 4;
                 break;
               }
               hasDefault = row.actions.some(function (action) {
@@ -3695,11 +3741,11 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
               };
               onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(row, [_newAction]);
               return _context.a(2);
-            case 3:
+            case 4:
               uid = info.file.uid;
-              _context.n = 4;
+              _context.n = 5;
               return getAudioDuration(info.file.response.url);
-            case 4:
+            case 5:
               duration = _context.v;
               newAction = {
                 id: ((_info$file$response = info.file.response) === null || _info$file$response === void 0 ? void 0 : _info$file$response.id) || uid,
@@ -3714,7 +3760,7 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
                 uid: (_info$file = info.file) === null || _info$file === void 0 ? void 0 : _info$file.uid
               };
               onUpdateEditorData === null || onUpdateEditorData === void 0 ? void 0 : onUpdateEditorData(row, [newAction]);
-            case 5:
+            case 6:
               return _context.a(2);
           }
         }, _callee);
@@ -3908,6 +3954,7 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
         backgroundPositionX: "0, ".concat(startLeft, "px"),
         backgroundSize: "".concat(startLeft, "px, ").concat(scaleWidth, "px")
       }),
+      scrollLeft: scrollLeft,
       areaRef: editAreaRef,
       key: key,
       rowHeight: (row === null || row === void 0 ? void 0 : row.rowHeight) || _rowHeight,
@@ -3991,7 +4038,8 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
         }).length) > 0,
         customRequest: customRequest,
         onDrop: handleDrop,
-        type: "drag"
+        type: "drag",
+        accept: "audio/mp3,audio/wav,audio/mpeg"
       }, tChildren), tChildren ? null : editRow);
     }
     return editRow;
@@ -4049,6 +4097,7 @@ var EditAreaO = /*#__PURE__*/React__default['default'].forwardRef(function (prop
       }
     }
     heightRef.current = height;
+    console.log('Math.max(scaleCount * scaleWidth + startLeft, width)', Math.max(scaleCount * scaleWidth + startLeft, width), ', width', width);
     return /*#__PURE__*/React__default['default'].createElement(reactVirtualized.Grid, {
       columnCount: 1,
       rowCount: heights.length,
@@ -4241,7 +4290,7 @@ var DragLines = /*#__PURE__*/React.memo(function (_ref) {
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: prefix('drag-line-container'),
     style: {
-      height: height || '100%'
+      height: height ? height + 30 :  '100%'
     }
   }, isMoving && movePositions.map(function (movePos) {
     // 查找在容差范围内的辅助线位置
@@ -4659,6 +4708,20 @@ var Timeline = /*#__PURE__*/React__default['default'].forwardRef(function (props
       };
     }
   }, []);
+  React.useEffect(function () {
+    var containerEl = document.querySelector('.timeline-editor');
+    var handleScroll = lodashEs.throttle(function (e) {
+      console.log('scroll', e);
+      scrollSync.current && scrollSync.current.setState({
+        scrollLeft: e.target.scrollLeft || 0
+      });
+    }, 100);
+    containerEl.addEventListener('scroll', handleScroll);
+    return function () {
+      containerEl.removeEventListener('scroll', handleScroll);
+      handleScroll.cancel();
+    };
+  }, []);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     ref: domRef,
     style: style,

package/package.json

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