@cloud-app-dev/vidc 3.2.10 → 3.2.13

package/es/Player/segment_player.js

@@ -1,35 +1,60 @@
 import _useUpdate from "ahooks/es/useUpdate";
 import _useLatest from "ahooks/es/useLatest";
+var _excluded = ["segments", "begin", "forwordRef", "defaultIndex", "onCanPlayerInit", "customTimeLine"];
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { __rest } from "tslib";
+
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import SinglePlayer from './single_player';
-import SegmentTimeLine from './segment_timeline';
-import Events from './event/eventName';
-import { useRegisterPlayerEvent, useVideoEvent } from './event';
+import SinglePlayer from "./single_player";
+import SegmentTimeLine from "./segment_timeline";
+import Events from "./event/eventName";
+import { useRegisterPlayerEvent, useVideoEvent } from "./event";
 /**
  * @desc 计算第一个url
  * @param segments
  * @param defaultIndex
  * @returns
  */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+
 function getFirstUrlIndex(segments) {
   var defaultIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+
   if (!(Array.isArray(segments) && segments.length > 0)) {
     return defaultIndex;
   }
+
   if (segments[defaultIndex].url) {
     return defaultIndex;
   } else {
     var i = defaultIndex + 1;
+
     if (i > segments.length) {
       return i;
     }
+
     return getFirstUrlIndex(segments, i);
   }
 }
@@ -40,50 +65,56 @@ function getFirstUrlIndex(segments) {
  * @param deps
  * @returns
  */
+
+
 function usePlayIndex(event, segments) {
   var defaultIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   var deps = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
+
   var _useState = useState({
-      index: getFirstUrlIndex(segments, defaultIndex)
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    state = _useState2[0],
-    setState = _useState2[1];
-  // 片段发生变化重新开始计算索引
+    index: getFirstUrlIndex(segments, defaultIndex)
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1]; // 片段发生变化重新开始计算索引
+
+
   useEffect(function () {
     var index = getFirstUrlIndex(segments, 0);
     setState(function (old) {
-      return Object.assign(Object.assign({}, old), {
+      return _objectSpread(_objectSpread({}, old), {}, {
         index: index
       });
     });
-  }, [segments]);
-  // 索引不存在播放地址，自动跳转下一段
+  }, [segments]); // 索引不存在播放地址，自动跳转下一段
+
   useEffect(function () {
-    var _a;
-    if (!((_a = segments[state.index]) === null || _a === void 0 ? void 0 : _a.url) && state.index < segments.length - 1) {
+    var _segments$state$index;
+
+    if (!((_segments$state$index = segments[state.index]) !== null && _segments$state$index !== void 0 && _segments$state$index.url) && state.index < segments.length - 1) {
       setState(function (old) {
-        return Object.assign(Object.assign({}, old), {
+        return _objectSpread(_objectSpread({}, old), {}, {
           index: old.index + 1
         });
       });
     }
-  }, [segments, state.index]);
-  // 监听片段播放状态，自动跳转下一个片段
+  }, [segments, state.index]); // 监听片段播放状态，自动跳转下一个片段
+
   var endHandle = function endHandle() {
     return setState(function (old) {
-      return Object.assign(Object.assign({}, old), {
+      return _objectSpread(_objectSpread({}, old), {}, {
         index: old.index + 1 < segments.length ? old.index + 1 : old.index
       });
     });
   };
+
   useVideoEvent('ended', endHandle, event);
   useRegisterPlayerEvent(Events.PLAY_ENDED, endHandle, event);
   return {
     index: state.index,
     setIndex: function setIndex(i) {
       return setState(function (old) {
-        return Object.assign(Object.assign({}, old), {
+        return _objectSpread(_objectSpread({}, old), {}, {
           index: i
         });
       });
@@ -95,27 +126,35 @@ function usePlayIndex(event, segments) {
  * @param param0
  * @returns
  */
-function SegmentPlayer(_a) {
-  var segments = _a.segments,
-    begin = _a.begin,
-    forwordRef = _a.forwordRef,
-    defaultIndex = _a.defaultIndex,
-    onCanPlayerInit = _a.onCanPlayerInit,
-    customTimeLine = _a.customTimeLine,
-    props = __rest(_a, ["segments", "begin", "forwordRef", "defaultIndex", "onCanPlayerInit", "customTimeLine"]);
+
+
+function SegmentPlayer(_ref) {
+  var segments = _ref.segments,
+      begin = _ref.begin,
+      forwordRef = _ref.forwordRef,
+      defaultIndex = _ref.defaultIndex,
+      onCanPlayerInit = _ref.onCanPlayerInit,
+      customTimeLine = _ref.customTimeLine,
+      props = _objectWithoutProperties(_ref, _excluded);
+
   var _useState3 = useState({
-      seekTime: 0
-    }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    state = _useState4[0],
-    setState = _useState4[1];
+    seekTime: 0
+  }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      state = _useState4[0],
+      setState = _useState4[1];
+
   var latestSegmentsRef = _useLatest(segments);
+
   var update = _useUpdate();
+
   var ref = useRef(null);
   var playRef = forwordRef ? forwordRef : ref;
-  var _ref = playRef.current || {},
-    api = _ref.api,
-    event = _ref.event;
+
+  var _ref2 = playRef.current || {},
+      api = _ref2.api,
+      event = _ref2.event;
+
   var duration = useMemo(function () {
     return segments === null || segments === void 0 ? void 0 : segments.map(function (v) {
       return (v.endTime - v.beginTime) / 1000;
@@ -123,66 +162,78 @@ function SegmentPlayer(_a) {
       return a + b;
     }, 0);
   }, [segments]);
+
   var _usePlayIndex = usePlayIndex(event, segments, defaultIndex, [segments, defaultIndex]),
-    index = _usePlayIndex.index,
-    setIndex = _usePlayIndex.setIndex;
+      index = _usePlayIndex.index,
+      setIndex = _usePlayIndex.setIndex;
+
   var url = useMemo(function () {
     return segments[index] ? segments[index].url : undefined;
-  }, [segments, index]);
-  // 重置reload
+  }, [segments, index]); // 重置reload
+
   var reload = function reload() {
-    var _a, _b;
-    var _ref2 = (_b = (_a = playRef.current) === null || _a === void 0 ? void 0 : _a.plugins) !== null && _b !== void 0 ? _b : [],
-      _ref3 = _slicedToArray(_ref2, 2),
-      hls = _ref3[1];
+    var _playRef$current$plug, _playRef$current;
+
+    var _ref3 = (_playRef$current$plug = (_playRef$current = playRef.current) === null || _playRef$current === void 0 ? void 0 : _playRef$current.plugins) !== null && _playRef$current$plug !== void 0 ? _playRef$current$plug : [],
+        _ref4 = _slicedToArray(_ref3, 2),
+        hls = _ref4[1];
+
     if (hls) {
       hls.swapAudioCodec();
       hls.recoverMediaError();
     }
+
     playRef.current.event.emit(Events.RELOAD);
     playRef.current.event.emit(Events.CLEAR_ERROR_TIMER);
     setIndex(0);
     playRef.current.api.reload();
-  };
-  // time 毫秒的时间戳
+  }; // time 毫秒的时间戳
+
+
   var seekTo = function seekTo(time) {
-    var _a, _b;
+    var _playRef$current$plug2, _playRef$current2;
+
     var index = latestSegmentsRef.current.findIndex(function (v) {
       return time >= v.beginTime && time < v.endTime;
     });
+
     if (index === -1) {
       return;
     }
-    var _ref4 = (_b = (_a = playRef.current) === null || _a === void 0 ? void 0 : _a.plugins) !== null && _b !== void 0 ? _b : [],
-      _ref5 = _slicedToArray(_ref4, 2),
-      hls = _ref5[1];
+
+    var _ref5 = (_playRef$current$plug2 = (_playRef$current2 = playRef.current) === null || _playRef$current2 === void 0 ? void 0 : _playRef$current2.plugins) !== null && _playRef$current$plug2 !== void 0 ? _playRef$current$plug2 : [],
+        _ref6 = _slicedToArray(_ref5, 2),
+        hls = _ref6[1];
+
     if (hls) {
       hls.swapAudioCodec();
       hls.recoverMediaError();
     }
+
     var currentTime = time - latestSegmentsRef.current[index].beginTime;
     setIndex(index);
     setState(function (old) {
-      return Object.assign(Object.assign({}, old), {
+      return _objectSpread(_objectSpread({}, old), {}, {
         seekTime: currentTime / 1000
       });
     });
-  };
-  // 处理seek 后index变化后 cuurenttime变化的过程
+  }; // 处理seek 后index变化后 cuurenttime变化的过程
+
+
   useEffect(function () {
     if (state.seekTime === 0) {
       return;
     }
+
     setState(function (old) {
-      return Object.assign(Object.assign({}, old), {
+      return _objectSpread(_objectSpread({}, old), {}, {
         seekTime: 0
       });
     });
-    playRef.current.video.currentTime = state.seekTime;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    playRef.current.video.currentTime = state.seekTime; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [state.seekTime]);
   var hasReady = api && event;
-  var timeline = customTimeLine !== null && customTimeLine !== void 0 ? customTimeLine : /*#__PURE__*/React.createElement(SegmentTimeLine, {
+  var timeline = customTimeLine !== null && customTimeLine !== void 0 ? customTimeLine : /*#__PURE__*/_jsx(SegmentTimeLine, {
     begin: begin,
     seekTo: seekTo,
     index: index,
@@ -191,10 +242,9 @@ function SegmentPlayer(_a) {
   });
   var onInit = useCallback(function () {
     update();
-    onCanPlayerInit === null || onCanPlayerInit === void 0 ? void 0 : onCanPlayerInit();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    onCanPlayerInit === null || onCanPlayerInit === void 0 ? void 0 : onCanPlayerInit(); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/React.createElement(SinglePlayer, Object.assign({
+  return /*#__PURE__*/_jsx(SinglePlayer, _objectSpread({
     ref: playRef,
     url: url,
     isLive: false,
@@ -204,7 +254,8 @@ function SegmentPlayer(_a) {
       setIndex: setIndex,
       seekTo: seekTo
     },
-    customTimeLine: hasReady ? timeline : /*#__PURE__*/React.createElement(React.Fragment, null)
+    customTimeLine: hasReady ? timeline : /*#__PURE__*/_jsx(_Fragment, {})
   }, props));
 }
+
 export default SegmentPlayer;

package/es/Player/segment_timeline.js

@@ -1,37 +1,57 @@
 import "antd/lib/tooltip/style";
 import _Tooltip from "antd/lib/tooltip";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 import React, { startTransition, useMemo, useState } from 'react';
-import { useTimes } from './timeline';
-import useBarStatus from './contraller_bar/useBarStatus';
+import { useTimes } from "./timeline";
+import useBarStatus from "./contraller_bar/useBarStatus";
 import moment from 'moment';
-import { FMT } from './util';
-import "./style/timeline.css";
+import { FMT } from "./util";
+import "./style/timeline.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
 function SegmentTimeLine(_ref) {
   var index = _ref.index,
-    segments = _ref.segments,
-    duration = _ref.duration,
-    begin = _ref.begin,
-    seekTo = _ref.seekTo;
+      segments = _ref.segments,
+      duration = _ref.duration,
+      begin = _ref.begin,
+      seekTo = _ref.seekTo;
+
   var _useState = useState({
-      time: 0,
-      markTime: 0,
-      left: -1,
-      visible: false
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    state = _useState2[0],
-    setState = _useState2[1];
+    time: 0,
+    markTime: 0,
+    left: -1,
+    visible: false
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
   var status = useBarStatus();
+
   var _useTimes = useTimes(),
-    _useTimes2 = _slicedToArray(_useTimes, 2),
-    currentTime = _useTimes2[0],
-    buffered = _useTimes2[1];
+      _useTimes2 = _slicedToArray(_useTimes, 2),
+      currentTime = _useTimes2[0],
+      buffered = _useTimes2[1];
+
   var indexDuration = useMemo(function () {
     return segments.map(function (v) {
       return (v.endTime - v.beginTime) / 1000;
@@ -45,10 +65,12 @@ function SegmentTimeLine(_ref) {
   var bufferedPercent = useMemo(function () {
     return (buffered + indexDuration) / duration * 100;
   }, [buffered, duration, indexDuration]);
+
   var seekWithLine = function seekWithLine(e, i) {
     if (!segments[i].url) {
       return;
     }
+
     var ele = e.currentTarget;
     var rect = ele.getBoundingClientRect();
     var current = e.pageX - rect.left;
@@ -58,111 +80,137 @@ function SegmentTimeLine(_ref) {
     var currentTime = current / rect.width * duration;
     seekTo(Math.round(currentTime + pTime));
   };
+
   var onLineMouseOver = function onLineMouseOver(e) {
     var rect = e.currentTarget.getBoundingClientRect();
     var left = e.pageX - rect.left;
     var mTime = left / rect.width * duration;
     setState(function (old) {
-      return Object.assign(Object.assign({}, old), {
+      return _objectSpread(_objectSpread({}, old), {}, {
         left: left,
         markTime: begin + mTime * 1000
       });
     });
   };
+
   var onLineMouseOut = function onLineMouseOut() {
     return startTransition(function () {
       return setState(function (old) {
-        return Object.assign(Object.assign({}, old), {
+        return _objectSpread(_objectSpread({}, old), {}, {
           left: -1
         });
       });
     });
   };
-  return /*#__PURE__*/React.createElement("div", {
+
+  return /*#__PURE__*/_jsx("div", {
     className: "player-timeline-layout player-segment-timeline-layout ".concat(status === 0 ? 'hide-time-line' : ''),
     onMouseMove: onLineMouseOver,
-    onMouseOut: onLineMouseOut
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "segment-line-box"
-  }, segments.map(function (v, i) {
-    return /*#__PURE__*/React.createElement(_Tooltip, {
-      key: "time-line-".concat(i),
-      title: /*#__PURE__*/React.createElement(TipTitle, {
-        segments: segments,
-        index: i,
-        begin: begin,
-        current: currentTime * 1000 + begin,
-        markTime: state.markTime
-      })
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "segment-line-item ".concat(!v.url ? 'segment-line-item-none' : '', " ").concat(i === segments.length - 1 ? 'last-segment-line-item' : ''),
-      onClick: function onClick(e) {
-        return seekWithLine(e, i);
-      },
-      style: {
-        width: "".concat((v.endTime / 1000 - v.beginTime / 1000) / duration * 100, "%")
-      }
-    }));
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "buffer-line",
-    style: {
-      width: "".concat(bufferedPercent, "%")
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "current-line",
-    style: {
-      width: "".concat(playPercent, "%")
-    }
-  }), state.left !== -1 && /*#__PURE__*/React.createElement("span", {
-    className: "segment-line-mark",
-    style: {
-      left: state.left
-    }
-  })));
+    onMouseOut: onLineMouseOut,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "segment-line-box",
+      children: [segments.map(function (v, i) {
+        return /*#__PURE__*/_jsx(_Tooltip, {
+          title: /*#__PURE__*/_jsx(TipTitle, {
+            segments: segments,
+            index: i,
+            begin: begin,
+            current: currentTime * 1000 + begin,
+            markTime: state.markTime
+          }),
+          children: /*#__PURE__*/_jsx("div", {
+            className: "segment-line-item ".concat(!v.url ? 'segment-line-item-none' : '', " ").concat(i === segments.length - 1 ? 'last-segment-line-item' : ''),
+            onClick: function onClick(e) {
+              return seekWithLine(e, i);
+            },
+            style: {
+              width: "".concat((v.endTime / 1000 - v.beginTime / 1000) / duration * 100, "%")
+            }
+          })
+        }, "time-line-".concat(i));
+      }), /*#__PURE__*/_jsx("div", {
+        className: "buffer-line",
+        style: {
+          width: "".concat(bufferedPercent, "%")
+        }
+      }), /*#__PURE__*/_jsx("div", {
+        className: "current-line",
+        style: {
+          width: "".concat(playPercent, "%")
+        }
+      }), state.left !== -1 && /*#__PURE__*/_jsx("span", {
+        className: "segment-line-mark",
+        style: {
+          left: state.left
+        }
+      })]
+    })
+  });
 }
+
 function TipTitle(_ref2) {
   var index = _ref2.index,
-    segments = _ref2.segments,
-    begin = _ref2.begin,
-    current = _ref2.current,
-    markTime = _ref2.markTime;
+      segments = _ref2.segments,
+      begin = _ref2.begin,
+      current = _ref2.current,
+      markTime = _ref2.markTime;
+
   var _useMemo = useMemo(function () {
-      if (index === 0) {
-        var _start = begin;
-        var _end = begin + (segments[0].endTime - segments[0].beginTime);
-        return {
-          start: moment(_start).format(FMT),
-          end: moment(_end).format(FMT)
-        };
-      }
-      var indexDuration = segments.map(function (v) {
-        return v.endTime - v.beginTime;
-      }).reduce(function (a, b, i) {
-        return i >= index ? a : a + b;
-      }, 0);
-      var start = begin + indexDuration;
-      var end = start + (segments[index].endTime - segments[index].beginTime);
+    if (index === 0) {
+      var _start = begin;
+
+      var _end = begin + (segments[0].endTime - segments[0].beginTime);
+
       return {
-        start: moment(start).format(FMT),
-        end: moment(end).format(FMT)
+        start: moment(_start).format(FMT),
+        end: moment(_end).format(FMT)
       };
-    }, [index, segments, begin]),
-    start = _useMemo.start,
-    end = _useMemo.end;
+    }
+
+    var indexDuration = segments.map(function (v) {
+      return v.endTime - v.beginTime;
+    }).reduce(function (a, b, i) {
+      return i >= index ? a : a + b;
+    }, 0);
+    var start = begin + indexDuration;
+    var end = start + (segments[index].endTime - segments[index].beginTime);
+    return {
+      start: moment(start).format(FMT),
+      end: moment(end).format(FMT)
+    };
+  }, [index, segments, begin]),
+      start = _useMemo.start,
+      end = _useMemo.end;
+
   var hasUrl = useMemo(function () {
-    var _a;
-    return ((_a = segments[index]) === null || _a === void 0 ? void 0 : _a.url) ? true : false;
+    var _segments$index;
+
+    return (_segments$index = segments[index]) !== null && _segments$index !== void 0 && _segments$index.url ? true : false;
   }, [index, segments]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "segment-line-tip-box"
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontWeight: 600
-    }
-  }, "\u5F55\u50CF\u7247\u6BB5\u4FE1\u606F"), /*#__PURE__*/React.createElement("div", null, "\u5F00\u59CB\uFF1A", start), /*#__PURE__*/React.createElement("div", null, "\u7ED3\u675F\uFF1A", end), /*#__PURE__*/React.createElement("div", null, "\u523B\u5EA6\uFF1A", moment(markTime).format(FMT)), /*#__PURE__*/React.createElement("div", null, "\u5F53\u524D\uFF1A", moment(current).format(FMT)), /*#__PURE__*/React.createElement("div", null, "\u72B6\u6001\uFF1A", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: hasUrl ? 'green' : 'red'
-    }
-  }, hasUrl ? '正常' : '缺失')));
+  return /*#__PURE__*/_jsxs("div", {
+    className: "segment-line-tip-box",
+    children: [/*#__PURE__*/_jsx("div", {
+      style: {
+        fontWeight: 600
+      },
+      children: "\u5F55\u50CF\u7247\u6BB5\u4FE1\u606F"
+    }), /*#__PURE__*/_jsxs("div", {
+      children: ["\u5F00\u59CB\uFF1A", start]
+    }), /*#__PURE__*/_jsxs("div", {
+      children: ["\u7ED3\u675F\uFF1A", end]
+    }), /*#__PURE__*/_jsxs("div", {
+      children: ["\u523B\u5EA6\uFF1A", moment(markTime).format(FMT)]
+    }), /*#__PURE__*/_jsxs("div", {
+      children: ["\u5F53\u524D\uFF1A", moment(current).format(FMT)]
+    }), /*#__PURE__*/_jsxs("div", {
+      children: ["\u72B6\u6001\uFF1A", /*#__PURE__*/_jsx("span", {
+        style: {
+          color: hasUrl ? 'green' : 'red'
+        },
+        children: hasUrl ? '正常' : '缺失'
+      })]
+    })]
+  });
 }
+
 export default SegmentTimeLine;