@cloud-app-dev/vidc 3.0.0 → 3.0.3

package/.umirc.ts

@@ -2,7 +2,7 @@ import { defineConfig } from 'dumi';
 import path from 'path';
 
 const token =
-  'eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDEwMTAwMDQ0NSIsImV4dCI6MTY2MTA3ODE3NDEzOCwidWlkIjoiMTAxMDAwMDAwNjk5IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTA1MTgsMTAwMDAwMTEwNzI4XSwidmFsaWRUaW1lIjoxNzA0MzgzOTk5MDAwLCJvcHRDZW50ZXJJZCI6IjEwMDEwMDAwMDIzMyIsInVzZXJUeXBlIjoxMDA3MDQsImlhdCI6MTY2MDgxODk3NDEzOH0.5aCna8JWe8ynj9SXuXZ3TMDizpnK7WJFeAgJZhSsRvg';
+  'eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDEwMTAwMDQ0NSIsImV4dCI6MTY2MTM4OTU0MzA4NSwidWlkIjoiMTAxMDAwMDAwNjk5IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTA1MTgsMTAwMDAwMTEwNzI4XSwidmFsaWRUaW1lIjoxNzA0MzgzOTk5MDAwLCJvcHRDZW50ZXJJZCI6IjEwMDEwMDAwMDIzMyIsInVzZXJUeXBlIjoxMDA3MDQsImlhdCI6MTY2MTEzMDM0MzA4NX0.-0vh7SpomB6UWteJ6WIA5VneryhSW3Vrsz6RnHfgcRI';
 
 export default defineConfig({
   title: 'CloudApp VIDC',

package/es/ErrorBoundary/index.d.ts

@@ -1,6 +1,6 @@
 import React, { Component, ErrorInfo } from 'react';
 export declare type IErrorBoundaryProps = {
-    fallback?: (() => JSX.Element) | React.ReactNode;
+    fallback?: React.ReactNode;
     children?: React.ReactNode;
 };
 declare type State = {
@@ -13,6 +13,6 @@ declare class ErrorBoundary extends Component<IErrorBoundaryProps, State> {
     };
     static getDerivedStateFromError(error: Error): State;
     componentDidCatch(error: Error, info: ErrorInfo): void;
-    render(): string | number | boolean | JSX.Element | React.ReactFragment;
+    render(): React.ReactNode;
 }
 export default ErrorBoundary;

package/es/ErrorBoundary/index.js

@@ -53,13 +53,7 @@ var ErrorBoundary = /*#__PURE__*/function (_Component) {
           fallback = _this$props.fallback;
 
       if (error) {
-        if ( /*#__PURE__*/React.isValidElement(fallback)) {
-          return fallback;
-        }
-
-        if (typeof fallback === 'function') {
-          return fallback();
-        }
+        return fallback;
       }
 
       return children;
@@ -67,6 +61,7 @@ var ErrorBoundary = /*#__PURE__*/function (_Component) {
   }], [{
     key: "getDerivedStateFromError",
     value: function getDerivedStateFromError(error) {
+      console.error(error);
       return {
         error: true
       };

package/es/LoaderApp/utils.d.ts

@@ -1,4 +1,4 @@
-import { AppItemType } from '@cloud-app-dev/vidc/es/Config/interface';
+import { AppItemType } from '../Config/interface';
 export declare const getMicroConfig: (appConfig: AppItemType, appProps: any, container: HTMLDivElement) => {
     title: string;
     routerPrefix: string;

package/es/Map/BasicMap/index.js

@@ -34,12 +34,12 @@ var Map = /*#__PURE__*/function (_React$Component) {
 
   var _super = _createSuper(Map);
 
-  function Map(props) {
+  function Map() {
     var _this;
 
     _classCallCheck(this, Map);
 
-    _this = _super.call(this, props);
+    _this = _super.apply(this, arguments);
     _this.domRef = /*#__PURE__*/React.createRef();
     return _this;
   }
@@ -51,8 +51,8 @@ var Map = /*#__PURE__*/function (_React$Component) {
         return;
       }
 
-      var instance = this.props.isL ? LeafletInstance : AMapInstance;
       var mapOptions = this.props.config;
+      var instance = this.props.isL ? LeafletInstance : AMapInstance;
       this.mapInstance = new instance(this.domRef.current, mapOptions);
       this.mapInstance.createMap();
       this.forceUpdate();
@@ -62,11 +62,6 @@ var Map = /*#__PURE__*/function (_React$Component) {
     value: function componentWillUnmount() {
       this.mapInstance.destoryMap();
     }
-  }, {
-    key: "componentDidCatch",
-    value: function componentDidCatch(error, errorInfo) {
-      console.log(error, errorInfo);
-    }
   }, {
     key: "render",
     value: function render() {

package/es/Modal/index.js

@@ -19,8 +19,8 @@ import { __rest } from "tslib";
 import React, { useContext, useEffect, useImperativeHandle, useMemo, useState } from 'react';
 import * as ReactDOMClient from 'react-dom/client';
 import CC from '../ConfigContext';
-import "./index.css";
 import ConfigContext from '../ConfigContext';
+import "./index.css";
 
 function Modal(_a) {
   var children = _a.children,
@@ -69,15 +69,16 @@ function useModal() {
 
   var root = useMemo(function () {
     return ReactDOMClient.createRoot(div);
-  }, []);
+  }, [div]);
   useEffect(function () {
     container.appendChild(div);
     return function () {
+      // eslint-disable-next-line no-sequences
       setTimeout(function () {
         return root.unmount(), div.remove();
       }, 100);
     };
-  }, []);
+  }, [container, div, root]);
   useEffect(function () {
     root.render( /*#__PURE__*/React.createElement(_ConfigProvider, {
       prefixCls: prefixCls,
@@ -96,7 +97,7 @@ function useModal() {
       className: state.className,
       getContainer: false
     }, state.content)));
-  }, [state.content, state.visible, state.title, state.onOk, state.width, state.className]);
+  }, [state.content, state.visible, state.title, state.onOk, state.width, state.className, root, prefixCls, container]);
 
   var open = function open(options) {
     setState(function (old) {
@@ -152,7 +153,8 @@ var RefModal = /*#__PURE__*/React.forwardRef(function RefModal(_, ref) {
         visible: false
       });
     });
-  };
+  }; // eslint-disable-next-line react-hooks/exhaustive-deps
+
 
   useImperativeHandle(ref, function () {
     return {

package/es/Picture/component/RectMenu/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
+import { MenuRectType } from '../../../Picture/interface';
 import './index.less';
-import { MenuRectType } from 'src/Picture/interface';
 interface IRectMenuProps {
     x: number;
     y: number;

package/es/Player/api/index.d.ts

@@ -5,14 +5,6 @@ declare class Api {
     container: HTMLElement;
     constructor(container: HTMLElement);
     get video(): HTMLVideoElement;
-    /**
-     * 全屏
-     */
-    requestFullScreen: () => void;
-    /**
-     * 退出全屏
-     */
-    cancelFullScreen: () => void;
     play: () => void;
     pause: () => void;
     /**
@@ -60,6 +52,7 @@ declare class Api {
     unload: () => void;
     reload: () => void;
     toggleFit: () => void;
+    setIndex: (i: number) => void;
     destroy: () => void;
 }
 export declare type TypeAndPlay = {

package/es/Player/api/index.js

@@ -19,7 +19,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
 import { useEffect, useState } from 'react';
-import { fullscreen, isFullscreen, exitFullscreen, createFlvPlayer, createHlsPlayer } from '../util';
+import { createFlvPlayer, createHlsPlayer, tryCatch } from '../util';
 
 var Api = /*#__PURE__*/function () {
   function Api(container) {
@@ -27,29 +27,10 @@ var Api = /*#__PURE__*/function () {
 
     _classCallCheck(this, Api);
 
-    /**
-     * 全屏
-     */
-    this.requestFullScreen = function () {
-      if (!isFullscreen(_this.container)) {
-        fullscreen(_this.container);
-      }
-    };
-    /**
-     * 退出全屏
-     */
-
-
-    this.cancelFullScreen = function () {
-      if (isFullscreen(_this.container)) {
-        exitFullscreen();
-      }
-    };
-
     this.play = function () {
-      if (_this.video.paused) {
-        _this.video.play();
-      }
+      tryCatch(function () {
+        return _this.video.play();
+      });
     };
 
     this.pause = function () {
@@ -63,6 +44,7 @@ var Api = /*#__PURE__*/function () {
 
 
     this.seekTo = function (seconds) {
+      debugger;
       _this.video.currentTime = seconds;
     };
 
@@ -184,6 +166,8 @@ var Api = /*#__PURE__*/function () {
 
     this.toggleFit = function () {};
 
+    this.setIndex = function (i) {};
+
     this.destroy = function () {
       _this.container = null;
     };
@@ -243,24 +227,29 @@ export function useTypeAndPlay(url, type, isLive, container, segments, flvConfig
       video.setAttribute('src', url);
     }
 
-    try {
-      video.play();
-    } catch (_) {}
-
+    url && video.paused && tryCatch(function () {
+      return video.play();
+    });
     setState(options);
     return function () {
       if (options.flv) {
-        options.flv.destroy();
-      }
-
-      if (options.hls) {
-        options.hls.destroy();
+        options.flv.pause();
+        tryCatch(function () {
+          return options.flv.destroy();
+        });
+      } else if (options.hls) {
+        video.pause();
+        tryCatch(function () {
+          return options.hls.destroy();
+        });
+      } else {
+        video.pause();
+        video.removeAttribute('src');
       }
 
-      video.removeAttribute('src');
       setState({});
     };
-  }, [url, container, segments, type]);
+  }, [url, container, segments, type, isLive, flvConfig, hlsConfig]);
   return [state.type, state.flv, state.hls];
 } //创建Api
 

package/es/Player/contraller_bar/left_bar.js

@@ -46,6 +46,7 @@ function LeftBar(_ref) {
     };
   }, [event]);
   var video = container.querySelector('video'); //缓存值
+  // eslint-disable-next-line react-hooks/exhaustive-deps
 
   var paused = useMemo(function () {
     return video === null || video === void 0 ? void 0 : video.paused;
@@ -60,7 +61,6 @@ function LeftBar(_ref) {
   var _useTimes = useTimes(api, event, hideTimeProgress),
       _useTimes2 = _slicedToArray(_useTimes, 3),
       current = _useTimes2[0],
-      _ = _useTimes2[1],
       duration = _useTimes2[2]; //TODO 方法
 
 
@@ -72,7 +72,7 @@ function LeftBar(_ref) {
     } else {
       api.pause();
     }
-  }, [video, api, isLive]);
+  }, [video, api]);
   return /*#__PURE__*/React.createElement("div", {
     className: "contraller-left-bar"
   }, leftExtContents, /*#__PURE__*/React.createElement(Bar, null, /*#__PURE__*/React.createElement(IconFont, {

package/es/Player/contraller_bar/right_bar.d.ts

@@ -9,5 +9,5 @@ interface IRightBarProps {
     rightExtContents: React.ReactNode;
     rightMidExtContents: React.ReactNode;
 }
-declare function RightBar({ container, api, rightExtContents, rightMidExtContents }: IRightBarProps): JSX.Element;
+declare function RightBar({ container, rightExtContents, rightMidExtContents }: IRightBarProps): JSX.Element;
 export default RightBar;

package/es/Player/contraller_bar/right_bar.js

@@ -1,3 +1,5 @@
+import _useFullscreen3 from "ahooks/es/useFullscreen";
+
 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."); }
@@ -10,45 +12,29 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useState, useMemo, useEffect, useCallback } from 'react';
+import React from 'react';
 import IconFont from '../iconfont';
 import Bar from './bar';
-import { isFullscreen } from '../util';
 
 function RightBar(_ref) {
   var container = _ref.container,
-      api = _ref.api,
       rightExtContents = _ref.rightExtContents,
       rightMidExtContents = _ref.rightMidExtContents;
 
-  var _useState = useState(Date.now()),
-      _useState2 = _slicedToArray(_useState, 2),
-      dep = _useState2[0],
-      setDep = _useState2[1];
-
-  useEffect(function () {
-    var update = function update() {
-      return setDep(Date.now());
-    };
-
-    document.addEventListener('fullscreenchange', update);
-    return function () {
-      return document.removeEventListener('fullscreenchange', update);
-    };
-  }, []);
-  var isfull = useMemo(function () {
-    return isFullscreen(container);
-  }, [dep, container]);
-  var fullscreen = useCallback(function () {
-    !isFullscreen(container) ? api.requestFullScreen() : api.cancelFullScreen();
-    setDep(Date.now());
-  }, [api, container]);
+  var _useFullscreen = _useFullscreen3(container),
+      _useFullscreen2 = _slicedToArray(_useFullscreen, 2),
+      isFullScreen = _useFullscreen2[0],
+      _useFullscreen2$ = _useFullscreen2[1],
+      enterFullscreen = _useFullscreen2$.enterFullscreen,
+      exitFullscreen = _useFullscreen2$.exitFullscreen;
+
+  var fullscreen = isFullScreen ? exitFullscreen : enterFullscreen;
   return /*#__PURE__*/React.createElement("div", {
     className: "contraller-right-bar"
   }, rightMidExtContents, /*#__PURE__*/React.createElement(Bar, null, /*#__PURE__*/React.createElement(IconFont, {
-    title: isfull ? '窗口' : '全屏',
+    title: isFullScreen ? '窗口' : '全屏',
     onClick: fullscreen,
-    type: isfull ? 'lm-player-ExitFull_Main' : 'lm-player-Full_Main'
+    type: isFullScreen ? 'lm-player-ExitFull_Main' : 'lm-player-Full_Main'
   })), rightExtContents);
 }
 

package/es/Player/demo.js

@@ -197,7 +197,7 @@ function Demo2() {
 
 function Demo3() {
   var _useState5 = useState({
-    url: 'http://192.168.101.161:18090/flv/vod/2b9cb54836e136630_34/187981bd526bdf548.flv?origin_url=sdk%3A%2F%2Fadmin%3Aabc12345%40192.168.14.3%3A8000%2Fcam%2Fplayback%3Ffactory%3Dhikvision%26channel%3D34%26subType%3D0%26startTime%3D1652889636%26endTime%3D1652890200',
+    url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
     tempUrl: '',
     begin: 1652889636,
     end: 1652890200
@@ -208,7 +208,8 @@ function Demo3() {
 
   return /*#__PURE__*/React.createElement("div", {
     style: {
-      width: '100%',
+      width: '600px',
+      height: '400px',
       marginTop: 20
     }
   }, /*#__PURE__*/React.createElement("h3", null, " \u524D\u7AEF\u5F55\u50CF\u89C6\u9891\u64AD\u653E"), /*#__PURE__*/React.createElement("div", {
@@ -247,7 +248,11 @@ function Demo3() {
     end: state.end,
     url: state.url,
     onSeek: function onSeek(time) {
-      return console.log(time);
+      return setState(function (old) {
+        return Object.assign(Object.assign({}, old), {
+          url: "".concat(old.url, "?").concat(time)
+        });
+      });
     }
   }));
 }

package/es/Player/frontend_player.d.ts

@@ -2,8 +2,7 @@
 import type { IFrontendPlayerProps } from './player';
 /**
  * @desc 主组件，负责片段整体逻辑控制
- * @param param0
- * @returns
+ * @return JSX.Element
  */
 declare function FrontendPlayer({ url, begin, end, onSeek, forwordRef, customTimeLine, onCanPlayerInit, ...props }: IFrontendPlayerProps): JSX.Element;
 export default FrontendPlayer;

package/es/Player/frontend_player.js

@@ -1,26 +1,14 @@
-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 _useUpdate from "ahooks/es/useUpdate";
 import { __rest } from "tslib";
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import SinglePlayer from './single_player';
 import FrontendTimeLine from './frontend_timeline';
 import Events from './event/eventName';
+
 /**
  * @desc 主组件，负责片段整体逻辑控制
- * @param param0
- * @returns
+ * @return JSX.Element
  */
-
 function FrontendPlayer(_a) {
   var url = _a.url,
       begin = _a.begin,
@@ -28,69 +16,51 @@ function FrontendPlayer(_a) {
       onSeek = _a.onSeek,
       forwordRef = _a.forwordRef,
       customTimeLine = _a.customTimeLine,
-      _onCanPlayerInit = _a.onCanPlayerInit,
+      onCanPlayerInit = _a.onCanPlayerInit,
       props = __rest(_a, ["url", "begin", "end", "onSeek", "forwordRef", "customTimeLine", "onCanPlayerInit"]);
 
-  var _useState = useState({
-    forceKey: Date.now()
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      state = _useState2[0],
-      setState = _useState2[1];
+  var update = _useUpdate();
 
   var ref = useRef(null);
   var playRef = forwordRef ? forwordRef : ref;
 
   var _ref = playRef.current || {},
       api = _ref.api,
-      event = _ref.event; // 秒级别转换毫秒
+      event = _ref.event; // 转换毫秒
 
 
-  var beginTemp = useMemo(function () {
-    return begin ? String(begin).length === 10 ? Math.floor(begin * 1000) : begin : begin;
-  }, []);
-  var endTemp = useMemo(function () {
-    return end ? String(end).length === 10 ? Math.floor(end * 1000) : end : end;
-  }, []);
   var duration = useMemo(function () {
-    return (endTemp - beginTemp) / 1000;
-  }, [beginTemp, endTemp]); //单位s 秒
+    return (begin - end) / 1000;
+  }, [begin, end]); //单位s 秒
   // 重置reload
 
   var reload = function reload() {
     playRef.current.event.emit(Events.RELOAD);
-    onSeek && onSeek(beginTemp);
+    onSeek && onSeek(begin);
     playRef.current.api.reload();
-    setState(function (old) {
-      return Object.assign(Object.assign({}, old), {
-        forceKey: Date.now()
-      });
-    });
   };
 
+  var onInit = useCallback(function () {
+    update();
+    onCanPlayerInit && onCanPlayerInit(); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var hasReady = api && event;
+  var timeline = customTimeLine !== null && customTimeLine !== void 0 ? customTimeLine : /*#__PURE__*/React.createElement(FrontendTimeLine, {
+    end: end,
+    url: url,
+    onSeek: onSeek,
+    begin: begin,
+    api: api,
+    event: event,
+    duration: duration
+  });
   return /*#__PURE__*/React.createElement(SinglePlayer, Object.assign({
     ref: playRef,
     url: url,
-    type: "flv",
     reload: reload,
-    isLive: true,
-    onCanPlayerInit: function onCanPlayerInit() {
-      setState({
-        forceKey: Date.now()
-      });
-      _onCanPlayerInit && _onCanPlayerInit({
-        reload: reload
-      });
-    },
-    customTimeLine: api && event && (customTimeLine || /*#__PURE__*/React.createElement(FrontendTimeLine, {
-      end: endTemp,
-      onSeek: onSeek,
-      key: state.forceKey,
-      begin: beginTemp,
-      api: api,
-      event: event,
-      duration: duration
-    }))
+    onCanPlayerInit: onInit,
+    isLive: false,
+    customTimeLine: hasReady ? timeline : /*#__PURE__*/React.createElement(React.Fragment, null)
   }, props));
 }
 

package/es/Player/frontend_timeline.d.ts

@@ -9,6 +9,7 @@ interface ITimeLineProps {
     begin: number;
     end: number;
     onSeek?: (time: number) => void;
+    url?: string;
 }
-declare function FrontendTimeLine({ api, event, duration, begin, end, onSeek }: ITimeLineProps): JSX.Element;
+declare function FrontendTimeLine({ api, event, duration, begin, end, onSeek, url }: ITimeLineProps): JSX.Element;
 export default FrontendTimeLine;

package/es/Player/frontend_timeline.js

@@ -1,3 +1,5 @@
+import _useTrackedEffect from "ahooks/es/useTrackedEffect";
+
 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."); }
@@ -10,10 +12,11 @@ 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 } from 'react';
+import React, { useCallback, useEffect, useMemo, useState, startTransition, useRef } from 'react';
 import useBarStatus from './contraller_bar/useBarStatus';
 import { useTimes } from './timeline';
-import { dateFormat } from './util';
+import { FMT } from './util';
+import moment from 'moment';
 import "./style/timeline.css";
 
 function FrontendTimeLine(_ref) {
@@ -22,7 +25,9 @@ function FrontendTimeLine(_ref) {
       duration = _ref.duration,
       begin = _ref.begin,
       end = _ref.end,
-      onSeek = _ref.onSeek;
+      onSeek = _ref.onSeek,
+      url = _ref.url;
+  var lastSeekCTimeRef = useRef(0); // time 是记录seek时跳了多少
 
   var _useState = useState({
     time: 0,
@@ -34,14 +39,20 @@ function FrontendTimeLine(_ref) {
       state = _useState2[0],
       setState = _useState2[1];
 
-  var status = useBarStatus(event);
+  var status = useBarStatus(event); //获取视频当前播放时长单位s
 
   var _useTimes = useTimes(api, event),
       _useTimes2 = _slicedToArray(_useTimes, 1),
       currentTime = _useTimes2[0];
 
+  _useTrackedEffect(function (changes) {
+    if (changes.includes(1)) {
+      lastSeekCTimeRef.current = currentTime;
+    }
+  }, [currentTime, url]);
+
   var rTime = useMemo(function () {
-    return state.time + currentTime;
+    return state.time + currentTime + lastSeekCTimeRef.current;
   }, [state.time, currentTime]);
   useEffect(function () {
     return setState(function (old) {
@@ -52,7 +63,7 @@ function FrontendTimeLine(_ref) {
   }, [begin]);
   var playPercent = useMemo(function () {
     return rTime / duration * 100;
-  }, [rTime]);
+  }, [duration, rTime]);
   var cTime = useMemo(function () {
     return begin + rTime * 1000;
   }, [begin, rTime]);
@@ -67,7 +78,7 @@ function FrontendTimeLine(_ref) {
         time: cTime - currentTime
       });
     });
-  }, [api, duration, begin, onSeek, currentTime]);
+  }, [duration, begin, onSeek, currentTime]);
   var onLineMouseOver = useCallback(function (e) {
     var rect = e.currentTarget.getBoundingClientRect();
     var left = e.pageX - rect.left;
@@ -78,7 +89,7 @@ function FrontendTimeLine(_ref) {
         markTime: begin + mTime * 1000
       });
     });
-  }, [begin]);
+  }, [begin, duration]);
   var onLineMouseOut = useCallback(function (e) {
     startTransition(function () {
       return setState(function (old) {
@@ -132,7 +143,7 @@ function TipTitle(_ref2) {
     style: {
       fontWeight: 600
     }
-  }, "\u5F55\u50CF\u4FE1\u606F"), /*#__PURE__*/React.createElement("div", null, "\u5F00\u59CB\uFF1A", dateFormat(begin)), /*#__PURE__*/React.createElement("div", null, "\u7ED3\u675F\uFF1A", dateFormat(end)), /*#__PURE__*/React.createElement("div", null, "\u523B\u5EA6\uFF1A", dateFormat(markTime)), /*#__PURE__*/React.createElement("div", null, "\u5F53\u524D\uFF1A", dateFormat(current)));
+  }, "\u5F55\u50CF\u4FE1\u606F"), /*#__PURE__*/React.createElement("div", null, "\u5F00\u59CB\uFF1A", moment(begin).format(FMT)), /*#__PURE__*/React.createElement("div", null, "\u7ED3\u675F\uFF1A", moment(end).format(FMT)), /*#__PURE__*/React.createElement("div", null, "\u523B\u5EA6\uFF1A", moment(markTime).format(FMT)), /*#__PURE__*/React.createElement("div", null, "\u5F53\u524D\uFF1A", moment(current).format(FMT)));
 }
 
 export default FrontendTimeLine;