@cloud-app-dev/vidc 3.0.17 → 3.0.19

package/es/Player/fps_play.js

@@ -0,0 +1,99 @@
+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, { useEffect, useMemo, useRef, useState } from 'react';
+import Events from './event/eventName';
+import useRafInterval from '../useRafInterval';
+import { useRegisterPlayerEvent } from './event';
+import { getDomStyleValue } from './util';
+var oneFps = 1 / 30;
+
+function FPSPlay(_ref) {
+  var api = _ref.api,
+      event = _ref.event,
+      fpsDelay = _ref.fpsDelay,
+      fps = _ref.fps;
+
+  var _useState = useState(Date.now()),
+      _useState2 = _slicedToArray(_useState, 2),
+      forceKey = _useState2[0],
+      update = _useState2[1];
+
+  var ref = useRef(null);
+  var timerRef = useRef(null);
+  var fps_second = useMemo(function () {
+    return fps ? 1 / fps : oneFps;
+  }, [fps]);
+  useEffect(function () {
+    var fpsCapture = function fpsCapture() {
+      if (!ref.current || !event.video) {
+        return;
+      }
+
+      var video = event.video;
+      var fpsTime = api.getCurrentTime() + fps_second;
+      video.currentTime = fpsTime;
+
+      if (video.currentTime >= api.getDuration()) {
+        clearInterval(timerRef.current);
+        video.currentTime = 0;
+        event.emit(Events.PLAY_ENDED);
+      }
+
+      var canvas = ref.current;
+      var ctx = canvas.getContext('2d');
+
+      var _video$getBoundingCli = video.getBoundingClientRect(),
+          width = _video$getBoundingCli.width,
+          height = _video$getBoundingCli.height;
+
+      canvas.width = width;
+      canvas.height = height;
+      var fit = getDomStyleValue(video, 'object-fit');
+
+      if (fit === 'fill') {
+        //全画面绘制，存在拉伸
+        ctx.drawImage(video, 0, 0, width, height);
+      } else {
+        // 自适应绘制
+        var videoWidth = video.videoWidth;
+        var videoHeight = video.videoHeight;
+        var scale = height / videoHeight;
+        var s_vw = scale * videoWidth;
+        var paddingSize = (width - s_vw) / 2;
+        ctx.drawImage(video, paddingSize, 0, s_vw, height);
+      }
+    };
+
+    fpsCapture();
+    timerRef.current = setInterval(fpsCapture, fpsDelay);
+    return function () {
+      clearInterval(timerRef.current);
+    };
+  }, [api, event, fpsDelay, forceKey, fps_second]);
+  useRegisterPlayerEvent(Events.CANVAS_PAUSE, function () {
+    clearInterval(timerRef.current);
+  });
+  useRegisterPlayerEvent(Events.CANVAS_PLAY, function () {
+    update(Date.now());
+  }); // TODO: 未知情况，video会自动播放，轮训检测并暂停零时解决
+
+  useRafInterval(function () {
+    return !api.paused ? api.pause() : null;
+  }, 10);
+  return /*#__PURE__*/React.createElement("canvas", {
+    className: "fps-play-canvas",
+    ref: ref
+  });
+}
+
+export default FPSPlay;

package/es/Player/frontend_player.js

@@ -50,8 +50,6 @@ function FrontendPlayer(_a) {
     url: url,
     onSeek: onSeek,
     begin: begin,
-    api: api,
-    event: event,
     duration: duration
   });
   return /*#__PURE__*/React.createElement(SinglePlayer, Object.assign({

package/es/Player/frontend_timeline.d.ts

@@ -1,15 +1,11 @@
 /// <reference types="react" />
-import type Api from './api';
-import type VideoEventInstance from './event';
 import './style/timeline.less';
 interface ITimeLineProps {
-    api: Api;
-    event: VideoEventInstance;
     duration: number;
     begin: number;
     end: number;
     onSeek?: (time: number) => void;
     url?: string;
 }
-declare function FrontendTimeLine({ api, event, duration, begin, end, onSeek, url }: ITimeLineProps): JSX.Element;
+declare function FrontendTimeLine({ duration, begin, end, onSeek, url }: ITimeLineProps): JSX.Element;
 export default FrontendTimeLine;

package/es/Player/frontend_timeline.js

@@ -1,4 +1,4 @@
-import _useTrackedEffect from "ahooks/es/useTrackedEffect";
+import _useUpdateEffect from "ahooks/es/useUpdateEffect";
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -12,21 +12,25 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useCallback, useEffect, useMemo, useState, startTransition, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useState, startTransition, useRef, useContext } from 'react';
 import useBarStatus from './contraller_bar/useBarStatus';
 import { useTimes } from './timeline';
 import { FMT } from './util';
 import moment from 'moment';
+import { Context } from './context';
 import "./style/timeline.css";
 
 function FrontendTimeLine(_ref) {
-  var api = _ref.api,
-      event = _ref.event,
-      duration = _ref.duration,
+  var duration = _ref.duration,
       begin = _ref.begin,
       end = _ref.end,
       onSeek = _ref.onSeek,
       url = _ref.url;
+
+  var _useContext = useContext(Context),
+      api = _useContext.api,
+      event = _useContext.event;
+
   var lastSeekCTimeRef = useRef(0); // time 是记录seek时跳了多少
 
   var _useState = useState({
@@ -43,13 +47,12 @@ function FrontendTimeLine(_ref) {
 
   var _useTimes = useTimes(api, event),
       _useTimes2 = _slicedToArray(_useTimes, 1),
-      currentTime = _useTimes2[0];
+      currentTime = _useTimes2[0]; // eslint-disable-next-line no-sequences
 
-  _useTrackedEffect(function (changes) {
-    if (changes.includes(1)) {
-      lastSeekCTimeRef.current = currentTime;
-    }
-  }, [currentTime, url]);
+
+  _useUpdateEffect(function () {
+    return lastSeekCTimeRef.current = currentTime, undefined;
+  }, [currentTime]);
 
   var rTime = useMemo(function () {
     return state.time + currentTime + lastSeekCTimeRef.current;

package/es/Player/live_heart.js

@@ -14,7 +14,7 @@ function useLiveHeart(_ref) {
   var cTimeRef = useRef(null);
 
   var run = function run() {
-    if (!isLive && documentVisibility !== 'visible') {
+    if (!isLive || documentVisibility !== 'visible') {
       return;
     }
 

package/es/Player/message.js

@@ -10,8 +10,9 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useEffect, useState, useMemo, useRef } from 'react';
+import React, { useState, useMemo, useRef } from 'react';
 import IconFont from './iconfont';
+import { useRegisterPlayerEvent, useVideoEvent } from './event';
 import EventName from './event/eventName';
 import "./style/message.css";
 
@@ -42,99 +43,83 @@ function VideoMessage(_ref) {
 
     return '';
   }, [state.errorTimer, state.status]);
-  useEffect(function () {
-    var openLoading = function openLoading() {
-      clearTimeout(timeRef.current);
-      timeRef.current = setTimeout(function () {
-        return setState(function (old) {
-          return Object.assign(Object.assign({}, old), {
-            loading: true
-          });
-        });
-      }, 200);
-    };
 
-    var closeLoading = function closeLoading() {
-      clearTimeout(timeRef.current);
-      setState(function (old) {
+  var openLoading = function openLoading() {
+    clearTimeout(timeRef.current);
+    timeRef.current = setTimeout(function () {
+      return setState(function (old) {
         return Object.assign(Object.assign({}, old), {
-          loading: false
+          loading: true
         });
       });
-    };
-
-    var errorReload = function errorReload(timer) {
-      clearTimeout(timeRef.current);
-      setState(function () {
-        return {
-          status: 'reload',
-          errorTimer: timer,
-          loading: true
-        };
+    }, 200);
+  };
+
+  var closeLoading = function closeLoading() {
+    clearTimeout(timeRef.current);
+    setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        loading: false
       });
-    };
-
-    var reloadFail = function reloadFail() {
-      return setState(function (old) {
-        return Object.assign(Object.assign({}, old), {
-          status: 'fail'
-        });
+    });
+  };
+
+  var errorReload = function errorReload(timer) {
+    clearTimeout(timeRef.current);
+    setState(function () {
+      return {
+        status: 'reload',
+        errorTimer: timer,
+        loading: true
+      };
+    });
+  };
+
+  var reloadFail = function reloadFail() {
+    return setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        status: 'fail'
       });
-    };
+    });
+  };
 
-    var reloadSuccess = function reloadSuccess() {
-      return setState(function (old) {
-        return Object.assign(Object.assign({}, old), {
-          status: null
-        });
+  var reloadSuccess = function reloadSuccess() {
+    return setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        status: null
       });
-    };
-
-    var reload = function reload() {
-      return setState(function (old) {
-        return Object.assign(Object.assign({}, old), {
-          status: 'reload',
-          loading: true
-        });
+    });
+  };
+
+  var reload = function reload() {
+    return setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        status: 'reload',
+        loading: true
       });
-    };
-
-    var playEnd = function playEnd() {
-      clearTimeout(timeRef.current);
-      setState(function (old) {
-        return Object.assign(Object.assign({}, old), {
-          status: null,
-          loading: false
-        });
+    });
+  };
+
+  var playEnd = function playEnd() {
+    clearTimeout(timeRef.current);
+    setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        status: null,
+        loading: false
       });
-      api.pause();
-    };
-
-    event.addEventListener('loadstart', openLoading); // event.addEventListener('waiting', openLoading);
-    // event.addEventListener('seeking', openLoading)
-
-    event.addEventListener('loadeddata', closeLoading);
-    event.addEventListener('canplay', closeLoading);
-    event.on(EventName.ERROR_RELOAD, errorReload);
-    event.on(EventName.RELOAD_FAIL, reloadFail);
-    event.on(EventName.RELOAD_SUCCESS, reloadSuccess);
-    event.on(EventName.RELOAD, reload);
-    event.on(EventName.HISTORY_PLAY_END, playEnd);
-    event.on(EventName.CLEAR_ERROR_TIMER, reloadSuccess);
-    return function () {
-      event.removeEventListener('loadstart', openLoading); // event.removeEventListener('waiting', openLoading);
-      // event.removeEventListener('seeking', openLoading)
-
-      event.removeEventListener('loadeddata', closeLoading);
-      event.removeEventListener('canplay', closeLoading);
-      event.off(EventName.ERROR_RELOAD, errorReload);
-      event.off(EventName.RELOAD_FAIL, reloadFail);
-      event.off(EventName.RELOAD_SUCCESS, reloadSuccess);
-      event.off(EventName.RELOAD, reload);
-      event.off(EventName.HISTORY_PLAY_END, playEnd);
-      event.off(EventName.CLEAR_ERROR_TIMER, reloadSuccess);
-    };
-  }, [api, event]);
+    });
+    api.pause();
+  };
+
+  useVideoEvent('loadstart', openLoading);
+  useVideoEvent('loadeddata', closeLoading);
+  useVideoEvent('canplay', closeLoading);
+  useRegisterPlayerEvent(EventName.ERROR_RELOAD, errorReload);
+  useRegisterPlayerEvent(EventName.RELOAD_FAIL, reloadFail);
+  useRegisterPlayerEvent(EventName.RELOAD_SUCCESS, reloadSuccess);
+  useRegisterPlayerEvent(EventName.RELOAD, reload);
+  useRegisterPlayerEvent(EventName.HISTORY_PLAY_END, playEnd);
+  useRegisterPlayerEvent(EventName.CLEAR_ERROR_TIMER, reloadSuccess);
   var loading = state.loading,
       status = state.status;
   return /*#__PURE__*/React.createElement("div", {

package/es/Player/player.d.ts

@@ -132,6 +132,21 @@ export interface ISinglePlayerProps {
    * 自定义播放器的事件
    */
   playerEvents?: CustomEvent[];
+
+  /**
+   * 开启单帧播放
+   */
+  oneFpsPlay?: boolean;
+
+  /**
+   * 获取视频针的频次 (ms)
+   */
+  fpsDelay?: number;
+
+  /**
+   * 视频每秒多少帧，用于控制逐帧播放
+   */
+  fps?: number;
 }
 
 export interface IFrontendPlayerProps extends Omit<ISinglePlayerProps, 'isLive' | 'reload'> {
@@ -173,21 +188,6 @@ export const SinglePlayer: React.FunctionComponent<ISinglePlayerProps>;
 export const FrontendPlayer: React.FunctionComponent<IFrontendPlayerProps>;
 export const SegmentPlayer: React.FunctionComponent<ISegmentPlayerProps>;
 
-export interface EventName {
-  RELOAD: 'reload'; //手动视频重载
-  RELOAD_FAIL: 'reloadFail'; // 视频出错，重连失败
-  RELOAD_SUCCESS: 'reloadSuccess'; //视频出错，重连成功
-  ERROR: 'error'; //视频出错
-  ERROR_RELOAD: 'errorRload'; //视频出错，自动重连
-  HISTORY_PLAY_END: 'historyPlayEnd'; //历史视频列表播放结束
-  SEEK: 'seek'; //跳跃播放时间
-  TRANSFORM: 'transform'; //视频容器缩放
-  CHANGE_PLAY_INDEX: 'changePlayIndex'; //历史视频列表播放索引改变
-  HIDE_CONTRALLER: 'hideContraller';
-  SHOW_CONTRALLER: 'showContraller';
-  CLEAR_ERROR_TIMER: 'clearErrorTimer';
-}
-
 export type EventInfo = {
   type: string;
   listener: ((...args: any) => void)[];

package/es/Player/segment_player.js

@@ -1,14 +1,6 @@
 import _useUpdate from "ahooks/es/useUpdate";
 import _useLatest from "ahooks/es/useLatest";
 
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
 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."); }
@@ -26,13 +18,14 @@ 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';
 /**
  * @desc 计算第一个url
  * @param segments
  * @param defaultIndex
  * @returns
  */
+
 function getFirstUrlIndex(segments) {
   var defaultIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
 
@@ -94,24 +87,16 @@ function usePlayIndex(event, segments) {
     }
   }, [segments, state.index]); // 监听片段播放状态，自动跳转下一个片段
 
-  useEffect(function () {
-    if (!event) {
-      return undefined;
-    }
-
-    var fn = function fn() {
-      return setState(function (old) {
-        return Object.assign(Object.assign({}, old), {
-          index: old.index + 1 < segments.length ? old.index + 1 : old.index
-        });
+  var endHandle = function endHandle() {
+    return setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        index: old.index + 1 < segments.length ? old.index + 1 : old.index
       });
-    };
+    });
+  };
 
-    event.addEventListener('ended', fn);
-    return function () {
-      return event.removeEventListener('ended', fn);
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [event, segments].concat(_toConsumableArray(deps)));
+  useVideoEvent('ended', endHandle, event);
+  useRegisterPlayerEvent(Events.PLAY_ENDED, endHandle, event);
   return {
     index: state.index,
     setIndex: function setIndex(i) {
@@ -214,13 +199,10 @@ function SegmentPlayer(_a) {
   var hasReady = api && event;
   var timeline = customTimeLine !== null && customTimeLine !== void 0 ? customTimeLine : /*#__PURE__*/React.createElement(SegmentTimeLine, {
     begin: begin,
-    api: api,
-    event: event,
     seekTo: seekTo,
     index: index,
     segments: segments,
-    duration: duration,
-    setIndex: setIndex
+    duration: duration
   });
   var onInit = useCallback(function () {
     update();
@@ -229,6 +211,7 @@ function SegmentPlayer(_a) {
   return /*#__PURE__*/React.createElement(SinglePlayer, Object.assign({
     ref: playRef,
     url: url,
+    isLive: false,
     onCanPlayerInit: onInit,
     reload: reload,
     extActions: {

package/es/Player/segment_timeline.d.ts

@@ -1,17 +1,12 @@
 /// <reference types="react" />
-import type Api from './api';
-import type VideoEventInstance from './event';
 import type { ISegmentType } from './player';
 import './style/timeline.less';
 interface ITimeLineProps {
-    api: Api;
-    event: VideoEventInstance;
     index: number;
     segments: ISegmentType[];
     duration: number;
-    setIndex: (i: number) => void;
     begin: number;
     seekTo: (time: number) => void;
 }
-declare function SegmentTimeLine({ api, event, index, segments, duration, begin, setIndex, seekTo }: ITimeLineProps): JSX.Element;
+declare function SegmentTimeLine({ index, segments, duration, begin, seekTo }: ITimeLineProps): JSX.Element;
 export default SegmentTimeLine;

package/es/Player/segment_timeline.js

@@ -13,25 +13,39 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useCallback, useMemo } from 'react';
+import React, { startTransition, useCallback, useContext, useMemo, useState } from 'react';
 import { useTimes } from './timeline';
 import useBarStatus from './contraller_bar/useBarStatus';
 import moment from 'moment';
 import { FMT } from './util';
+import { Context } from './context';
 import "./style/timeline.css";
 
 function SegmentTimeLine(_ref) {
-  var api = _ref.api,
-      event = _ref.event,
-      index = _ref.index,
+  var index = _ref.index,
       segments = _ref.segments,
       duration = _ref.duration,
       begin = _ref.begin,
-      setIndex = _ref.setIndex,
       seekTo = _ref.seekTo;
+
+  var _useState = useState({
+    time: 0,
+    markTime: 0,
+    left: -1,
+    visible: false
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var _useContext = useContext(Context),
+      api = _useContext.api,
+      event = _useContext.event,
+      isFpsPlay = _useContext.isFpsPlay;
+
   var status = useBarStatus(event);
 
-  var _useTimes = useTimes(api, event),
+  var _useTimes = useTimes(api, event, isFpsPlay),
       _useTimes2 = _slicedToArray(_useTimes, 2),
       currentTime = _useTimes2[0],
       buffered = _useTimes2[1];
@@ -62,9 +76,31 @@ function SegmentTimeLine(_ref) {
     var duration = segments[i].endTime - segments[i].beginTime;
     var currentTime = current / rect.width * duration;
     seekTo(Math.round(currentTime + pTime));
-  }, [segments, api, index, setIndex]);
+  }, [segments, begin, seekTo]);
+  var onLineMouseOver = useCallback(function (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), {
+        left: left,
+        markTime: begin + mTime * 1000
+      });
+    });
+  }, [begin, duration]);
+  var onLineMouseOut = useCallback(function () {
+    return startTransition(function () {
+      return setState(function (old) {
+        return Object.assign(Object.assign({}, old), {
+          left: -1
+        });
+      });
+    });
+  }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: "player-timeline-layout player-segment-timeline-layout ".concat(status === 0 ? 'hide-time-line' : '')
+    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) {
@@ -73,7 +109,9 @@ function SegmentTimeLine(_ref) {
       title: /*#__PURE__*/React.createElement(TipTitle, {
         segments: segments,
         index: i,
-        begin: begin
+        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' : ''),
@@ -94,13 +132,20 @@ function SegmentTimeLine(_ref) {
     style: {
       width: "".concat(playPercent, "%")
     }
+  }), state.left !== -1 && /*#__PURE__*/React.createElement("span", {
+    className: "segment-line-mark",
+    style: {
+      left: state.left
+    }
   })));
 }
 
 function TipTitle(_ref2) {
   var index = _ref2.index,
       segments = _ref2.segments,
-      begin = _ref2.begin;
+      begin = _ref2.begin,
+      current = _ref2.current,
+      markTime = _ref2.markTime;
 
   var _useMemo = useMemo(function () {
     if (index === 0) {
@@ -140,7 +185,7 @@ function TipTitle(_ref2) {
     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, "\u72B6\u6001\uFF1A", /*#__PURE__*/React.createElement("span", {
+  }, "\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'
     }