@cloud-app-dev/vidc 3.0.1 → 3.0.2

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

@@ -52,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

@@ -165,6 +165,8 @@ var Api = /*#__PURE__*/function () {
 
     this.toggleFit = function () {};
 
+    this.setIndex = function (i) {};
+
     this.destroy = function () {
       _this.container = null;
     };

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,15 +16,10 @@ 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;
@@ -48,10 +31,10 @@ function FrontendPlayer(_a) {
 
   var beginTemp = useMemo(function () {
     return begin ? String(begin).length === 10 ? Math.floor(begin * 1000) : begin : begin;
-  }, []);
+  }, [begin]);
   var endTemp = useMemo(function () {
     return end ? String(end).length === 10 ? Math.floor(end * 1000) : end : end;
-  }, []);
+  }, [end]);
   var duration = useMemo(function () {
     return (endTemp - beginTemp) / 1000;
   }, [beginTemp, endTemp]); //单位s 秒
@@ -61,36 +44,29 @@ function FrontendPlayer(_a) {
     playRef.current.event.emit(Events.RELOAD);
     onSeek && onSeek(beginTemp);
     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: endTemp,
+    url: url,
+    onSeek: onSeek,
+    begin: beginTemp,
+    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,7 +12,7 @@ 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 { FMT } from './util';
@@ -23,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,
@@ -35,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) {

package/es/Player/player.d.ts

@@ -113,6 +113,11 @@ export interface ISinglePlayerProps {
    */
   reload?: () => void;
 
+  /**
+   * extaction
+   */
+  extActions?: { [key: string]: (...args: any) => void };
+
   /**
    * 视频可播放时执行钩子
    */
@@ -129,7 +134,7 @@ export interface ISinglePlayerProps {
   playerEvents?: CustomEvent[];
 }
 
-export interface IFrontendPlayerProps extends Omit<ISinglePlayerProps, 'isLive' | 'reload' | 'type'> {
+export interface IFrontendPlayerProps extends Omit<ISinglePlayerProps, 'isLive' | 'reload'> {
   /**
    * 前端录像开始时间
    */
@@ -146,16 +151,9 @@ export interface IFrontendPlayerProps extends Omit<ISinglePlayerProps, 'isLive'
   onSeek?: (time: number) => void;
 
   forwordRef?: React.MutableRefObject<ExportPlayerType>;
-
-  /**
-   * 视频可播放时执行钩子
-   */
-  onCanPlayerInit?: (data: any) => void;
 }
 
-export interface ISegmentPlayerProps extends Omit<ISinglePlayerProps, 'url' | 'onCanPlayerInit'> {
-  onCanPlayerInit?: (ext: { [key: string]: any }) => void;
-
+export interface ISegmentPlayerProps extends Omit<ISinglePlayerProps, 'url'> {
   /**
    * 云录像片段信息
    */

package/es/Player/segment_player.d.ts

@@ -5,5 +5,5 @@ import type { ISegmentPlayerProps } from './player';
  * @param param0
  * @returns
  */
-declare function SegmentPlayer({ segments, begin, forwordRef, onCanPlayerInit, defaultIndex, customTimeLine, ...props }: ISegmentPlayerProps): JSX.Element;
+declare function SegmentPlayer({ segments, begin, forwordRef, defaultIndex, onCanPlayerInit, customTimeLine, ...props }: ISegmentPlayerProps): JSX.Element;
 export default SegmentPlayer;

package/es/Player/segment_player.js

@@ -1,3 +1,5 @@
+import _useUpdate from "ahooks/es/useUpdate";
+
 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."); }
@@ -19,17 +21,17 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import { __rest } from "tslib";
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import SinglePlayer from './single_player';
 import SegmentTimeLine from './segment_timeline';
 import Events from './event/eventName';
+
 /**
  * @desc 计算第一个url
  * @param segments
  * @param defaultIndex
  * @returns
  */
-
 function getFirstUrlIndex(segments) {
   var defaultIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
 
@@ -60,7 +62,7 @@ function getFirstUrlIndex(segments) {
 
 function usePlayIndex(event, segments) {
   var defaultIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-  var deps = arguments.length > 3 ? arguments[3] : undefined;
+  var deps = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
 
   var _useState = useState({
     index: getFirstUrlIndex(segments, defaultIndex)
@@ -89,7 +91,7 @@ function usePlayIndex(event, segments) {
         });
       });
     }
-  }, [state.index]); // 监听片段播放状态，自动跳转下一个片段
+  }, [segments, state.index]); // 监听片段播放状态，自动跳转下一个片段
 
   useEffect(function () {
     if (!event) {
@@ -98,7 +100,7 @@ function usePlayIndex(event, segments) {
 
     var fn = function fn() {
       return setState(function (old) {
-        return Object.assign(Object.assign({}, onload), {
+        return Object.assign(Object.assign({}, old), {
           index: old.index + 1 < segments.length ? old.index + 1 : old.index
         });
       });
@@ -107,7 +109,7 @@ function usePlayIndex(event, segments) {
     event.addEventListener('ended', fn);
     return function () {
       return event.removeEventListener('ended', fn);
-    };
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [event, segments].concat(_toConsumableArray(deps)));
   return {
     index: state.index,
@@ -131,10 +133,12 @@ function SegmentPlayer(_a) {
   var segments = _a.segments,
       begin = _a.begin,
       forwordRef = _a.forwordRef,
-      _onCanPlayerInit = _a.onCanPlayerInit,
       defaultIndex = _a.defaultIndex,
+      onCanPlayerInit = _a.onCanPlayerInit,
       customTimeLine = _a.customTimeLine,
-      props = __rest(_a, ["segments", "begin", "forwordRef", "onCanPlayerInit", "defaultIndex", "customTimeLine"]);
+      props = __rest(_a, ["segments", "begin", "forwordRef", "defaultIndex", "onCanPlayerInit", "customTimeLine"]);
+
+  var update = _useUpdate();
 
   var ref = useRef(null);
   var playRef = forwordRef ? forwordRef : ref;
@@ -143,13 +147,6 @@ function SegmentPlayer(_a) {
       api = _ref.api,
       event = _ref.event;
 
-  var _useState3 = useState({
-    forceKey: Date.now()
-  }),
-      _useState4 = _slicedToArray(_useState3, 2),
-      state = _useState4[0],
-      setState = _useState4[1];
-
   var duration = useMemo(function () {
     return segments === null || segments === void 0 ? void 0 : segments.map(function (v) {
       return (v.endTime - v.beginTime) / 1000;
@@ -158,7 +155,7 @@ function SegmentPlayer(_a) {
     }, 0);
   }, [segments]);
 
-  var _usePlayIndex = usePlayIndex(event, segments, defaultIndex, [state.forceKey]),
+  var _usePlayIndex = usePlayIndex(event, segments, defaultIndex, [segments, defaultIndex]),
       index = _usePlayIndex.index,
       setIndex = _usePlayIndex.setIndex;
 
@@ -175,28 +172,30 @@ function SegmentPlayer(_a) {
 
   var beginTemp = useMemo(function () {
     return begin ? String(begin).length === 10 ? Math.floor(begin * 1000) : begin : begin;
+  }, [begin]);
+  var hasReady = api && event;
+  var timeline = customTimeLine !== null && customTimeLine !== void 0 ? customTimeLine : /*#__PURE__*/React.createElement(SegmentTimeLine, {
+    begin: beginTemp,
+    api: api,
+    event: event,
+    index: index,
+    segments: segments,
+    duration: duration,
+    setIndex: setIndex
+  });
+  var onInit = useCallback(function () {
+    update();
+    onCanPlayerInit && onCanPlayerInit(); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/React.createElement(SinglePlayer, Object.assign({
     ref: playRef,
     url: url,
+    onCanPlayerInit: onInit,
     reload: reload,
-    onCanPlayerInit: function onCanPlayerInit() {
-      setState({
-        forceKey: Date.now()
-      });
-      _onCanPlayerInit && _onCanPlayerInit({
-        setIndex: setIndex
-      });
-    },
-    customTimeLine: api && event && (customTimeLine || /*#__PURE__*/React.createElement(SegmentTimeLine, {
-      begin: beginTemp,
-      api: api,
-      event: event,
-      index: index,
-      segments: segments,
-      duration: duration,
+    extActions: {
       setIndex: setIndex
-    }))
+    },
+    customTimeLine: hasReady ? timeline : /*#__PURE__*/React.createElement(React.Fragment, null)
   }, props));
 }
 

package/es/Player/single_player.js

@@ -34,7 +34,9 @@ var SinglePlayer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       isLive = _a.isLive,
       errorReloadTimer = _a.errorReloadTimer,
       children = _a.children,
-      props = __rest(_a, ["className", "url", "type", "hideContrallerBar", "isLive", "errorReloadTimer", "children"]);
+      onCanPlayerInit = _a.onCanPlayerInit,
+      extActions = _a.extActions,
+      props = __rest(_a, ["className", "url", "type", "hideContrallerBar", "isLive", "errorReloadTimer", "children", "onCanPlayerInit", "extActions"]);
 
   var autoPlay = props.autoPlay,
       preload = props.preload,
@@ -113,11 +115,11 @@ var SinglePlayer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       return undefined;
     }
 
-    var map = {
+    var map = Object.assign({
       reload: reload,
       unload: unload,
       toggleFit: toggle
-    };
+    }, extActions);
     return new Proxy(api, {
       get: function get(target, key) {
         var _a;
@@ -127,7 +129,7 @@ var SinglePlayer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       set: function set() {
         return true;
       }
-    });
+    }); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [api]); // 代理Event
 
   var playEvent = useMemo(function () {
@@ -154,11 +156,12 @@ var SinglePlayer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       plugins: [flv, hls],
       fit: fit
     };
-  }, [api, event, video, fit]);
+  }, [video, state.container, playApi, playEvent, flv, hls, fit]);
   useEffect(function () {
     if (api && event && video) {
-      props.onCanPlayerInit && props.onCanPlayerInit();
-    }
+      onCanPlayerInit && onCanPlayerInit();
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, [api, event, video]);
   return /*#__PURE__*/React.createElement("div", {
     className: "lm-player-container ".concat(className),
@@ -193,7 +196,7 @@ var SinglePlayer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     leftMidExtContents: leftMidExtContents,
     reload: (_b = props.reload) !== null && _b !== void 0 ? _b : reload,
     hideTimeProgress: !!customTimeLine
-  })), !isLive ? customTimeLine ? customTimeLine : /*#__PURE__*/React.createElement(Timeline, {
+  })), customTimeLine ? customTimeLine : !hideContrallerBar ? /*#__PURE__*/React.createElement(Timeline, {
     api: playApi,
     event: event
   }) : null, /*#__PURE__*/React.createElement(ErrorEvent, {
@@ -222,6 +225,7 @@ SinglePlayer.defaultProps = {
     mediaDataSource: {},
     config: {}
   },
-  hlsConfig: {}
+  hlsConfig: {},
+  extActions: {}
 };
 export default /*#__PURE__*/React.memo(SinglePlayer);

package/es/ScreenPlayer/PlayerWithExt.js

@@ -31,7 +31,7 @@ export function LivePlayerWithExt(_a) {
   var ref = useRef();
   var update = useCallback(function () {
     return updatePlayer(ref);
-  }, []);
+  }, [updatePlayer]);
   return /*#__PURE__*/React.createElement("div", {
     className: "player-with-ext-layout ".concat(className),
     style: style,
@@ -59,17 +59,9 @@ export function SegmentPlayerWithExt(_a) {
       props = __rest(_a, ["begin", "style", "className", "segments", "updatePlayer", "onClick"]);
 
   var ref = useRef();
-
-  var update = function update() {
-    var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-    for (var k in obj) {
-      ref.current[k] = obj[k];
-    }
-
-    updatePlayer(ref);
-  };
-
+  var update = useCallback(function () {
+    return updatePlayer(ref);
+  }, [updatePlayer]);
   return /*#__PURE__*/React.createElement("div", {
     className: "player-with-ext-layout ".concat(className),
     style: style,
@@ -136,18 +128,9 @@ export function FrontendPlayerWithExt(_ref) {
     });
   }, [state.url]);
   var ref = useRef();
-
-  var update = function update() {
-    var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-    for (var k in obj) {
-      ref.current[k] = obj[k];
-    }
-
-    ref.current['seekTo'] = seekTo;
-    updatePlayer(ref);
-  };
-
+  var update = useCallback(function () {
+    return updatePlayer(ref);
+  }, [updatePlayer]);
   return /*#__PURE__*/React.createElement("div", {
     className: "player-with-ext-layout ".concat(className),
     style: style,
@@ -161,9 +144,13 @@ export function FrontendPlayerWithExt(_ref) {
     url: state.url,
     hideContrallerBar: true,
     forwordRef: ref,
+    extActions: {
+      seekTo: seekTo
+    },
     begin: state.begin,
     end: state.end,
     onCanPlayerInit: update,
-    customTimeLine: /*#__PURE__*/React.createElement(React.Fragment, null)
+    customTimeLine: /*#__PURE__*/React.createElement(React.Fragment, null),
+    type: "flv"
   })));
 }

package/es/ScreenPlayer/Record.js

@@ -179,15 +179,11 @@ function RecordPlayer(_ref) {
     var play = getPlayerItem(); // 前端录像seek 处理
 
     if (segmentItem.recordType === 2) {
-      play.seekTo && play.seekTo(Math.round(state.seekTo / 1000));
-      return;
-    } // 云录像seek处理
-
-
-    var seekTime = state.seekTo - item.segments[index].beginTime;
-
-    if (play.setIndex) {
-      play.setIndex(index);
+      play.api.seekTo(Math.round(state.seekTo / 1000));
+    } else {
+      // 云录像seek处理
+      var seekTime = state.seekTo - item.segments[index].beginTime;
+      play.api.setIndex(index);
 
       _nextTick(function () {
         return play.api.seekTo(seekTime / 1000);

package/es/ScreenPlayer/TimeSlider.d.ts

@@ -66,7 +66,7 @@ export default class TimeSlider {
      * @param {*} cell cell包括beginTime ms;endTime ms;style
      */
     draw_cell(cell: TimeCellItem): void;
-    /**
+    /**·
      * 时间轴事件
      */
     add_events(): void;

package/es/ScreenPlayer/TimeSlider.js

@@ -5,10 +5,9 @@ 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 moment from 'moment';
-var canvasbg = 'rgba(69, 72, 76, 0.5)';
-var currentColor = '#248ffa';
+var currentColor = '#FF000A';
 var normalLineColor = '#ffffff';
-var hoverLineColor = '#248ffa';
+var hoverLineColor = '#319BFF';
 var minPerStep = [1, 2, 5, 10, 15, 20, 30, 60, 120, 180, 240, 360, 720, 1440];
 var minStepSize = 20;
 
@@ -99,11 +98,12 @@ var TimeSlider = /*#__PURE__*/function () {
 
         _this.init(_this.start_timestamp, _this.timecell, true);
 
-        _this.drawLine(pos_x, 0, pos_x, 40, hoverLineColor, 1);
+        _this.drawLine(pos_x, 20, pos_x, _this.canVansH, hoverLineColor, 1);
 
         _this.ctx.fillStyle = hoverLineColor;
+        _this.ctx.font = "10px Arial";
 
-        _this.ctx.fillText(_this.changeTime(time), pos_x - 50, 50);
+        _this.ctx.fillText(_this.changeTime(time), pos_x - 50, 12);
       }
     };
     /**
@@ -276,15 +276,15 @@ var TimeSlider = /*#__PURE__*/function () {
       var px_per_ms = this.canvansW / (this.hours_per_ruler * 60 * 60 * 1000); // px/ms
 
       var left = px_per_ms * ms_current;
-      this.ctx.fillStyle = currentColor;
-      this.ctx.fillText(this.changeTime(time), left - 50, 50);
-      this.drawLine(left, 0, left, 34, currentColor, 2); //中间当前点线
+      this.ctx.fillStyle = '#ffffff';
+      this.ctx.font = '12px Arial';
+      this.ctx.fillText(this.changeTime(time), left - 64, 14);
+      this.drawLine(left, 20, left, this.canVansH, currentColor, 2); //中间当前点线
     }
   }, {
     key: "drawCellBg",
-    value: function drawCellBg() {
-      this.ctx.fillStyle = canvasbg;
-      this.ctx.fillRect(0, 0, this.canvansW, 15);
+    value: function drawCellBg() {// this.ctx.fillStyle = canvasbg;
+      // this.ctx.fillRect(0, 0, this.canvansW, 15);
     }
   }, {
     key: "get_line_sizes",
@@ -308,9 +308,9 @@ var TimeSlider = /*#__PURE__*/function () {
 
       var medium_step = 30;
 
-      for (var i = 0; i < this.minutes_per_step.length; i++) {
-        if (this.distance_between_gtitle / px_per_min <= this.minutes_per_step[i]) {
-          medium_step = this.minutes_per_step[i];
+      for (var _i = 0; _i < this.minutes_per_step.length; _i++) {
+        if (this.distance_between_gtitle / px_per_min <= this.minutes_per_step[_i]) {
+          medium_step = this.minutes_per_step[_i];
           break;
         }
       }
@@ -354,21 +354,23 @@ var TimeSlider = /*#__PURE__*/function () {
 
         var date = new Date(graduation_time);
 
-        if (date.getUTCHours() == 0 && date.getUTCMinutes() == 0) {
-          lineH = 15;
+        if (date.getUTCHours() === 0 && date.getUTCMinutes() === 0) {
+          lineH = 10;
           var big_date = this.graduation_title(date);
           this.ctx.fillStyle = normalLineColor;
-          this.ctx.fillText(big_date, graduation_left - 12, 34);
-        } else if (graduation_time / (60 * 1000) % medium_step == 0) {
-          lineH = 15;
+          this.ctx.font = "10px Arial";
+          this.ctx.fillText(big_date, graduation_left - 12, 30);
+        } else if (graduation_time / (60 * 1000) % medium_step === 0) {
+          lineH = 10;
           var middle_date = this.graduation_title(date);
           this.ctx.fillStyle = normalLineColor;
-          this.ctx.fillText(middle_date, graduation_left - (middle_date.length > 5 ? 24 : 12), 34);
+          this.ctx.font = "10px Arial";
+          this.ctx.fillText(middle_date, graduation_left - (middle_date.length > 5 ? 24 : 12), 30);
         } else {
-          lineH = 10;
+          lineH = 5;
         }
 
-        this.drawLine(graduation_left, 0, graduation_left, lineH, normalLineColor, 1);
+        this.drawLine(graduation_left, this.canVansH - lineH, graduation_left, this.canVansH, normalLineColor, 2);
       }
     }
   }, {
@@ -389,7 +391,7 @@ var TimeSlider = /*#__PURE__*/function () {
       var m = datetime.getMinutes();
       var s = datetime.getMilliseconds();
 
-      if (h == 0 && m == 0 && s == 0) {
+      if (h === 0 && m === 0 && s === 0) {
         return moment(datetime).format('YYYY.MM.DD');
       }
 
@@ -443,10 +445,10 @@ var TimeSlider = /*#__PURE__*/function () {
 
       var beginX = (cell.beginTime - this.start_timestamp) * px_per_ms;
       var cell_width = (cell.endTime - cell.beginTime) * px_per_ms;
-      this.ctx.fillStyle = cell.url ? ((_a = cell.style) === null || _a === void 0 ? void 0 : _a.background) || hoverLineColor : '#f32d37';
-      this.ctx.fillRect(beginX, 0, cell_width, 15);
+      this.ctx.fillStyle = cell.url ? ((_a = cell.style) === null || _a === void 0 ? void 0 : _a.background) || hoverLineColor : '#242C3D';
+      this.ctx.fillRect(beginX, this.canVansH - 10, cell_width + 1, this.canVansH);
     }
-    /**
+    /**·
      * 时间轴事件
      */
 

package/es/ScreenPlayer/index.css

@@ -25,7 +25,7 @@
 }
 .split-screen-player-wrapper.split-screen-player-wrapper-record .record-time-line {
   width: 100%;
-  height: 60px;
+  height: 46px;
   position: relative;
 }
 .split-screen-player-wrapper.split-screen-player-wrapper-record .record-time-line canvas {
@@ -33,8 +33,7 @@
   width: 100%;
   height: 100%;
   cursor: pointer;
-  border-top: 1px solid #2b2f33;
-  background-color: #2b2f33;
+  background-color: #030917;
 }
 .split-screen-player-wrapper.split-screen-player-wrapper-record .record-time-line .time-line-mask {
   position: absolute;

package/package.json

@@ -2,7 +2,7 @@
   "private": false,
   "name": "@cloud-app-dev/vidc",
   "description": "Video Image Data Componennts",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",

package/release-build.sh

@@ -1,8 +1,37 @@
 #! /bin/sh
 
+pnpm install
+if [ $? -eq 0 ]; then
+  echo "packages install success!"
+else
+  echo "packages install failed!"
+  exit 1
+fi
+
 npm run build
+if [ $? -eq 0 ]; then
+  echo "build success!"
+else
+  echo "build failed!"
+  exit 1
+fi
 
 npm run deploy
+if [ $? -eq 0 ]; then
+  echo "deploy success!"
+else
+  echo "deploy failed!"
+  exit 1
+fi
+
+nrm use npm
+npm publish
+if [ $? -eq 0 ]; then
+  echo "publish success!"
+else
+  echo "publish failed!"
+  exit 1
+fi
 
 git add .
 
@@ -12,8 +41,4 @@ git pull
 
 git push
 
-nrm use npm
-
-npm publish
-
 exit 1