@cloud-app-dev/vidc 3.0.10 → 3.0.13

package/es/ScreenPlayer/PlayerWithExt.js

@@ -142,7 +142,7 @@ export function FrontendPlayerWithExt(_ref) {
       return;
     }
 
-    var endTime = moment(segments[segments.length - 1].endTime).unix();
+    var endTime = moment().unix();
     var beginTime = moment(time).unix();
     var videoUrl = new URL(state.url);
     videoUrl.searchParams.set('begin', "".concat(beginTime));
@@ -152,7 +152,7 @@ export function FrontendPlayerWithExt(_ref) {
         url: videoUrl.toString()
       });
     });
-  }, [segments, state.url]);
+  }, [state.url]);
   var ref = useRef();
   var update = useCallback(function () {
     return updatePlayer(ref);

package/es/ScreenPlayer/Record.d.ts

@@ -6,5 +6,5 @@ import './index.less';
  * @param param0
  * @returns
  */
-declare function RecordPlayer({ list, children, queryRecord, onIndexChange, onClose, onCloseAll, download }: IRecordPlayerProps): JSX.Element;
+declare function RecordPlayer({ list, children, queryRecord, onIndexChange, onClose, onCloseAll, download, snapshot, defaultScreen, screenChange, defaultSelectIndex, }: IRecordPlayerProps): JSX.Element;
 export default RecordPlayer;

package/es/ScreenPlayer/Record.js

@@ -1,5 +1,6 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
+import _useUpdateEffect from "ahooks/es/useUpdateEffect";
 import "antd/lib/message/style";
 import _message from "antd/lib/message";
 import _usePrevious from "ahooks/es/usePrevious";
@@ -61,9 +62,15 @@ function RecordPlayer(_ref) {
       onIndexChange = _ref.onIndexChange,
       onClose = _ref.onClose,
       onCloseAll = _ref.onCloseAll,
-      download = _ref.download;
-
-  var _useState = useState(Object.assign({}, defaultState)),
+      download = _ref.download,
+      snapshot = _ref.snapshot,
+      defaultScreen = _ref.defaultScreen,
+      screenChange = _ref.screenChange,
+      defaultSelectIndex = _ref.defaultSelectIndex;
+
+  var _useState = useState(Object.assign(Object.assign({}, defaultState), {
+    screenNum: defaultScreen !== null && defaultScreen !== void 0 ? defaultScreen : defaultState.screenNum
+  })),
       _useState2 = _slicedToArray(_useState, 2),
       state = _useState2[0],
       setState = _useState2[1];
@@ -306,18 +313,42 @@ function RecordPlayer(_ref) {
     setState(function (old) {
       return Object.assign({}, old);
     });
-  }; // index变化同步到父组件
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+  };
+  /**
+   * 同步外部的selectIndex变化
+   */
 
 
   useEffect(function () {
-    return onIndexChange(state.selectIndex);
+    if (typeof defaultSelectIndex !== 'number') {
+      return;
+    }
+
+    setState(function (old) {
+      if (old.selectIndex !== defaultSelectIndex) {
+        return Object.assign(Object.assign({}, old), {
+          selectIndex: defaultSelectIndex
+        });
+      }
+
+      return old;
+    });
+  }, [defaultSelectIndex]); // index变化同步到父组件
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  _useUpdateEffect(function () {
+    return onIndexChange && onIndexChange(state.selectIndex);
   }, [state.selectIndex]);
+
+  _useUpdateEffect(function () {
+    return screenChange && screenChange(state.screenNum);
+  }, [state.screenNum]);
+
   return /*#__PURE__*/React.createElement("div", {
-    className: "split-screen-player-wrapper split-screen-player-wrapper-record",
-    ref: domRef
+    className: "split-screen-player-wrapper split-screen-player-wrapper-record"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "player-layout"
+    className: "player-layout",
+    ref: domRef
   }, screenList.map(function (item, index) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
 
@@ -377,11 +408,12 @@ function RecordPlayer(_ref) {
     onClose: onClose,
     onCloseAll: onCloseAll,
     timeMode: state.timeMode,
-    download: download
+    download: download,
+    snapshot: snapshot
   }), /*#__PURE__*/React.createElement(SegmentTimeLine, {
     begin: timeBegin,
     updateState: updateState,
-    timeCell: segmentItem.segments,
+    segments: segmentItem.segments,
     key: state.selectIndex,
     onTimeChange: onTimeChange,
     timeMode: state.timeMode

package/es/ScreenPlayer/RecordTools.d.ts

@@ -19,6 +19,7 @@ interface IToolsProps {
     onCloseAll?: () => void;
     timeMode: number;
     download?: () => void;
+    snapshot?: (base64: string) => void;
 }
-declare function RecordTools({ containerRef, updateState, download, screenNum, timeMode, getPlayerItem, mode, toggleFit, fit, time, onTimeChange, onClose, onCloseAll, }: IToolsProps): JSX.Element;
+declare function RecordTools({ containerRef, updateState, download, screenNum, timeMode, getPlayerItem, mode, toggleFit, fit, time, onTimeChange, onClose, onCloseAll, snapshot, }: IToolsProps): JSX.Element;
 export default RecordTools;

package/es/ScreenPlayer/RecordTools.js

@@ -32,7 +32,8 @@ function RecordTools(_ref) {
       time = _ref.time,
       onTimeChange = _ref.onTimeChange,
       onClose = _ref.onClose,
-      onCloseAll = _ref.onCloseAll;
+      onCloseAll = _ref.onCloseAll,
+      snapshot = _ref.snapshot;
 
   var _useFullscreen = _useFullscreen3(containerRef),
       _useFullscreen2 = _slicedToArray(_useFullscreen, 2),
@@ -56,9 +57,10 @@ function RecordTools(_ref) {
     player ? player.reload ? player.reload() : player.api.reload() : undefined;
   };
 
-  var snapshot = function snapshot() {
+  var snapshotaction = function snapshotaction() {
     var player = getPlayerItem();
-    return player ? player.api.snapshot() : undefined;
+    var base64 = player ? player.api.snapshot() : undefined;
+    snapshot && snapshot(base64);
   };
 
   var player = getPlayerItem();
@@ -76,7 +78,7 @@ function RecordTools(_ref) {
   }, /*#__PURE__*/React.createElement(IconFont, {
     type: "lm-player-xiangji1fill",
     title: "\u622A\u56FE",
-    onClick: snapshot
+    onClick: snapshotaction
   })), /*#__PURE__*/React.createElement("span", {
     className: "player-tools-item",
     onClick: reload

package/es/ScreenPlayer/SegmentTimeLine.d.ts

@@ -2,12 +2,12 @@
 import { ISegmentType } from '../Player/player';
 interface ISegmentTimeLineProps {
     begin?: number;
-    timeCell?: ISegmentType[];
+    segments?: ISegmentType[];
     onTimeChange?: (time: number) => void;
     timeMode: number;
     updateState: (state: {
         timeMode: number;
     }) => void;
 }
-declare function SegmentTimeLine({ begin, timeCell, onTimeChange, timeMode, updateState }: ISegmentTimeLineProps): JSX.Element;
+declare function SegmentTimeLine({ begin, segments, onTimeChange, timeMode, updateState }: ISegmentTimeLineProps): JSX.Element;
 export default SegmentTimeLine;

package/es/ScreenPlayer/SegmentTimeLine.js

@@ -1,59 +1,40 @@
-import _useUnmount from "ahooks/es/useUnmount";
-import _useUpdateEffect from "ahooks/es/useUpdateEffect";
 import _useThrottleFn2 from "ahooks/es/useThrottleFn";
-import _useSize from "ahooks/es/useSize";
 import moment from 'moment';
-import React, { useEffect, useRef } from 'react';
-import TimeSlider from './TimeSlider';
+import React, { useMemo, useRef } from 'react';
+import useTimeSlider from './useTimeSlider';
 
 function SegmentTimeLine(_ref) {
   var begin = _ref.begin,
-      timeCell = _ref.timeCell,
+      segments = _ref.segments,
       onTimeChange = _ref.onTimeChange,
       timeMode = _ref.timeMode,
       updateState = _ref.updateState;
   var ref = useRef();
-  var timeSliderRef = useRef();
-
-  var size = _useSize(ref);
 
   var _useThrottleFn = _useThrottleFn2(onTimeChange, {
     wait: 300
   }),
       run = _useThrottleFn.run;
 
-  useEffect(function () {
-    var time = begin !== null && begin !== void 0 ? begin : moment().set({
+  var time = useMemo(function () {
+    return begin !== null && begin !== void 0 ? begin : moment().set({
       hours: 0,
       minutes: 0,
       seconds: 0
     }).valueOf();
-    timeSliderRef.current = new TimeSlider(ref.current, {
-      onTimeChange: run,
-      start_timestamp: time - timeMode / 2 * 3600 * 1000,
-      current_timestamp: time,
-      timecell: timeCell,
-      hours_per_ruler: timeMode,
-      onHoursPerChange: function onHoursPerChange(hour) {
-        return updateState({
-          timeMode: hour
-        });
-      }
-    });
-  }, [begin, timeCell, size === null || size === void 0 ? void 0 : size.width, run]);
-  /**
-   * hour变化更新时间轴而不是重绘
-   */
-
-  _useUpdateEffect(function () {
-    return timeSliderRef.current.drawHourChange(timeMode);
-  }, [timeMode]);
-
-  _useUnmount(function () {
-    timeSliderRef.current.destory();
-    timeSliderRef.current = null;
+  }, [begin]);
+  useTimeSlider(ref, {
+    begin: time - timeMode / 2 * 3600 * 1000,
+    currentTime: time,
+    onTimeChange: run,
+    segments: segments,
+    hoursPer: timeMode,
+    onHoursPerChange: function onHoursPerChange(hour) {
+      return updateState({
+        timeMode: hour
+      });
+    }
   });
-
   return /*#__PURE__*/React.createElement("div", {
     className: "record-time-line"
   }, /*#__PURE__*/React.createElement("canvas", {

package/es/ScreenPlayer/TimeSlider.d.ts

@@ -91,11 +91,11 @@ export default class TimeSlider {
      */
     mousemoveFunc2: (e: MouseEvent) => void;
     /**
-     * 拖动/点击 mouseup事件
+     * 点击 mouseup事件
      */
     mouseupFunc: (e: MouseEvent) => void;
     /**
-     * 拖动/点击 mouseup事件
+     * 拖动停止 mouseup事件
      */
     mouseupFunc2: () => void;
     /**

package/es/ScreenPlayer/TimeSlider.js

@@ -48,8 +48,9 @@ var TimeSlider = /*#__PURE__*/function () {
       _this.g_isMousedown = true;
       _this.g_mousedownCursor = _this.get_cursor_x_position(e); //记住mousedown的位置
 
-      document.addEventListener('mousemove', _this.mousemoveFunc);
-      document.addEventListener('mouseup', _this.mouseupFunc2);
+      document.addEventListener('mousemove', _this.mousemoveFunc); //拖动
+
+      document.addEventListener('mouseup', _this.mouseupFunc2); //停止拖动
     };
     /**
      * 鼠标移出隐藏时间 mouseout事件
@@ -112,16 +113,12 @@ var TimeSlider = /*#__PURE__*/function () {
       }
     };
     /**
-     * 拖动/点击 mouseup事件
+     * 点击 mouseup事件
      */
 
 
     this.mouseupFunc = function (e) {
-      if (_this.g_isMousemove) {
-        //拖动 事件
-        _this.g_isMousemove = false;
-        _this.g_isMousedown = false; // this.returnTime = this.start_timestamp + (this.hours_per_ruler * 3600 * 1000) / 2;
-      } else {
+      if (!_this.g_isMousemove) {
         // click 事件
         _this.g_isMousedown = false;
 
@@ -144,11 +141,9 @@ var TimeSlider = /*#__PURE__*/function () {
 
         _this.options.onTimeChange && _this.options.onTimeChange(current_timestamp, outTimeline);
       }
-
-      document.removeEventListener('mousemove', _this.mousemoveFunc);
     };
     /**
-     * 拖动/点击 mouseup事件
+     * 拖动停止 mouseup事件
      */
 
 
@@ -466,10 +461,14 @@ var TimeSlider = /*#__PURE__*/function () {
   }, {
     key: "add_events",
     value: function add_events() {
-      this.canvas.addEventListener('mousewheel', this.mousewheelFunc);
-      this.canvas.addEventListener('mousedown', this.mousedownFunc);
-      this.canvas.addEventListener('mousemove', this.mousemoveFunc2);
-      this.canvas.addEventListener('mouseup', this.mouseupFunc);
+      this.canvas.addEventListener('mousewheel', this.mousewheelFunc); // 调整刻度范围
+
+      this.canvas.addEventListener('mousedown', this.mousedownFunc); // 触发 拖动或者点击标记
+
+      this.canvas.addEventListener('mousemove', this.mousemoveFunc2); //hover 提示当前刻度时间
+
+      this.canvas.addEventListener('mouseup', this.mouseupFunc); // 点击触发
+
       this.canvas.addEventListener('mouseout', this.mouseoutFunc);
     }
   }, {
@@ -484,6 +483,7 @@ var TimeSlider = /*#__PURE__*/function () {
   }, {
     key: "destory",
     value: function destory() {
+      this.clearCanvas();
       this.remove_events();
       this.canvas = null;
       this.options = null;

package/es/ScreenPlayer/demo.js

@@ -3,16 +3,16 @@ import _ConfigProvider from "antd/lib/config-provider";
 import React from 'react';
 import LivePlayer from './Live';
 var list = [{
-  url: 'https://6a75ef90-6-server.antelopecloud.cn/flv_live?app=live&token=542449336_3356491776_1691734783_0e329cf89f3333a17ccaf8533466a577',
+  url: 'https://6a75ef90-3-server.antelopecloud.cn/flv_live?app=live&token=542446023_3356491776_1693558509_61374ba6efe326a4cb8b6bae86917a25',
   type: 'flv'
 }, {
-  url: 'https://6a75ef90-2-server.antelopecloud.cn/flv_live?app=live&token=542453242_3356491776_1691734590_6fb5b57fd5095ff2e6ff331fe605a593',
+  url: 'https://6a75ef89-1-server.antelopecloud.cn/flv_live?app=live&token=542446501_3356491776_1693535295_37062417b87df4be7dd5c02b01d87248',
   type: 'flv'
 }, {
-  url: 'https://6a75ef90-2-server.antelopecloud.cn/flv_live?app=live&token=542453302_3356491776_1691735024_3bb73732b5e0a857b70248a179804801',
+  url: 'https://6a75ef90-1-server.antelopecloud.cn/flv_live?app=live&token=542453821_3356491776_1693535323_3a90f54c141b9a246d5679678ebafe90',
   type: 'flv'
 }, {
-  url: 'https://6a75ef90-0-server.antelopecloud.cn/flv_live?app=live&token=557997490_3356491776_1691725056_86b4dd8105fea7b1180408a63d17b37b',
+  url: 'https://6a75ef90-6-server.antelopecloud.cn/flv_live?app=live&token=542449206_3356491776_1693535342_803846974f04eb02e8115d10432d062f',
   type: 'flv'
 }];
 export default function App() {

package/es/ScreenPlayer/demo2.js

@@ -28,7 +28,7 @@ import RecordPlayer from './Record';
 import moment from 'moment';
 import Service from '../Service';
 import { completionSegments } from './utils';
-var token = "eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDEwMTAwMDQ0NSIsImV4dCI6MTY2MTY1NjgzMTU3MywidWlkIjoiMTAxMDAwMDAwNjk5IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTA1MTgsMTAwMDAwMTEwNzI4XSwidmFsaWRUaW1lIjoxNzA0MzgzOTk5MDAwLCJvcHRDZW50ZXJJZCI6IjEwMDEwMDAwMDIzMyIsInVzZXJUeXBlIjoxMDA3MDQsImlhdCI6MTY2MTM5NzYzMTU3M30.OWPxfPgFBWqGJaRsYLSAZohn2AarhbkOuWLa1bwgZE4";
+var token = "eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDEwMTAwMDQ0NSIsImV4dCI6MTY2MjI1ODMwNzUxNSwidWlkIjoiMTAxMDAwMDAwNjk5IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTA1MTgsMTAwMDAwMTEwNzI4XSwidmFsaWRUaW1lIjoxNzA0MzgzOTk5MDAwLCJvcHRDZW50ZXJJZCI6IjEwMDEwMDAwMDIzMyIsInVzZXJUeXBlIjoxMDA3MDQsImlhdCI6MTY2MTk5OTEwNzUxNX0.uk_G3vqBCFqxQM2jbV6CSN-z9YNVt_cx5nWXkSuCOIA";
 var cids = ['538509097', '539172446'];
 
 var query = function query(_ref) {

package/es/ScreenPlayer/index.css

@@ -19,6 +19,9 @@
 .split-screen-player-wrapper .player-layout .player-with-ext-layout.player-current-index .lm-player-ext-layout {
   border: 1px solid var(--primary);
 }
+.split-screen-player-wrapper.split-screen-player-live-wrapper .player-layout {
+  height: calc(100% - 42px);
+}
 .split-screen-player-wrapper .player-tools-group {
   height: 88px;
   position: relative;

package/es/ScreenPlayer/interface.d.ts

@@ -24,7 +24,7 @@ export interface IRecordPlayerProps {
   /**
    * 窗口索引变化，后续基于索引传入播放必要数据
    */
-  onIndexChange: (idx: number) => void;
+  onIndexChange?: (idx: number) => void;
 
   /**
    * 关闭单个窗口
@@ -39,6 +39,14 @@ export interface IRecordPlayerProps {
    * 录像下载回调
    */
   download?: () => void;
+
+  snapshot?: (base64: string) => void;
+
+  screenChange?: (num: number) => void;
+
+  defaultScreen?: 1 | 4 | 6 | 9 | 16;
+
+  defaultSelectIndex?: number;
 }
 
 export interface IRecordPlayerState {
@@ -87,6 +95,7 @@ export type ScreenItemLivePlayerType = {
   url?: string;
   type?: 'flv' | 'hls' | 'native';
   mode?: PlayModeType;
+  cid?: string;
 };
 
 export interface ILivePlayerProps {
@@ -105,7 +114,15 @@ export interface ILivePlayerProps {
   /**
    * 窗口索引变化，后续基于索引传入播放必要数据
    */
-  onIndexChange: (idx: number) => void;
+  onIndexChange?: (idx: number) => void;
+
+  snapshot?: (base64: string) => void;
+
+  screenChange?: (num: number) => void;
+
+  defaultScreen?: 1 | 4 | 6 | 9 | 16;
+
+  defaultSelectIndex?: number;
 }
 
 export interface ILivePlayerState {

package/es/ScreenPlayer/useTimeSlider.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import type { ISegmentType } from '../Player/player';
+export interface ITimeSliderOptions {
+    hoursPer?: number;
+    begin?: number;
+    segments?: TimeCellItem[];
+    currentTime?: number;
+    onTimeChange?: (time: number, outTimeline?: boolean) => void;
+    onHoursPerChange?: (hour: number) => void;
+}
+export declare type ITimeSliderState = {
+    hoursPer: number;
+    begin: number;
+    currentTime: number;
+    hover: {
+        x: number;
+        time: number;
+    };
+};
+export declare type TimeCellItem = ISegmentType;
+declare function useTimeSlider(canvasRef: React.MutableRefObject<HTMLCanvasElement>, { hoursPer, begin, currentTime, segments, onTimeChange, onHoursPerChange }: ITimeSliderOptions): void;
+export default useTimeSlider;