@cloud-app-dev/vidc 3.0.34 → 3.0.36

package/.umirc.ts

@@ -2,7 +2,7 @@ import { defineConfig } from 'dumi';
 import path from 'path';
 
 const token =
-  'eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDEwMTAwMDQ0NSIsImV4dCI6MTY2MzkyNzM5NjQzMCwidWlkIjoiMTAxMDAwMDAwNjk5IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTA1MTgsMTAwMDAwMTEwNzI4XSwidmFsaWRUaW1lIjoxNzA0MzgzOTk5MDAwLCJvcHRDZW50ZXJJZCI6IjEwMDEwMDAwMDIzMyIsInVzZXJUeXBlIjoxMDA3MDQsImlhdCI6MTY2MzY2ODE5NjQzMH0.bJbtN-QjTUGGSIJRfR1ycjhtGt6UCEsrS29CYN-AAfw';
+  'eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDEwMTAwMDQ0NSIsImV4dCI6MTY2NTc0ODU1OTg5MSwidWlkIjoiMTAxMDAwMDAwNjk5IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTA1MTgsMTAwMDAwMTEwNzI4XSwidmFsaWRUaW1lIjoxNzA0MzgzOTk5MDAwLCJvcHRDZW50ZXJJZCI6IjEwMDEwMDAwMDIzMyIsInVzZXJUeXBlIjoxMDA3MDQsImlhdCI6MTY2NTQ4OTM1OTg5MX0.zxxxxoaKjyO6CJhi2cs06gTOtjdLgPA9UI7zAQ0zzss';
 
 export default defineConfig({
   title: 'CloudApp VIDC',

package/es/CustomRenderSelect/index.d.ts

@@ -5,6 +5,8 @@ interface ICustomRenderSelectProps extends SelectProps {
     children?: React.ReactNode;
     value: any;
     customRender: (value: any) => JSX.Element;
+    onChange: (value: any) => void;
+    selectAotoClose?: boolean;
 }
-declare function CustomRenderSelect({ children, value, customRender, popupClassName, getPopupContainer, ...props }: ICustomRenderSelectProps): JSX.Element;
+declare function CustomRenderSelect({ children, value, customRender, popupClassName, getPopupContainer, onChange, selectAotoClose, ...props }: ICustomRenderSelectProps): JSX.Element;
 export default CustomRenderSelect;

package/es/CustomRenderSelect/index.js

@@ -26,7 +26,10 @@ function CustomRenderSelect(_a) {
       customRender = _a.customRender,
       popupClassName = _a.popupClassName,
       getPopupContainer = _a.getPopupContainer,
-      props = __rest(_a, ["children", "value", "customRender", "popupClassName", "getPopupContainer"]);
+      onChange = _a.onChange,
+      _a$selectAotoClose = _a.selectAotoClose,
+      selectAotoClose = _a$selectAotoClose === void 0 ? true : _a$selectAotoClose,
+      props = __rest(_a, ["children", "value", "customRender", "popupClassName", "getPopupContainer", "onChange", "selectAotoClose"]);
 
   var classname = useMemo(function () {
     return "custom-render-select-dropdown-".concat(_uuid());
@@ -52,6 +55,14 @@ function CustomRenderSelect(_a) {
     return set(false);
   }, getDoms, ['click']);
 
+  var onSelectChange = function onSelectChange(v) {
+    onChange && onChange(v);
+
+    if (selectAotoClose) {
+      set(false);
+    }
+  };
+
   return /*#__PURE__*/React.createElement("div", {
     className: "custom-render-select",
     ref: domRef
@@ -61,7 +72,8 @@ function CustomRenderSelect(_a) {
     getPopupContainer: getPopupContainer ? getPopupContainer : function () {
       return domRef.current.parentElement.parentElement;
     },
-    open: open
+    open: open,
+    onChange: onSelectChange
   }), children), /*#__PURE__*/React.createElement("div", {
     className: "custom-render-box",
     onClick: toggle

package/es/DisableMark/index.js

@@ -4,7 +4,13 @@ export default function DisableMark(_ref) {
   var children = _ref.children,
       disabled = _ref.disabled,
       width = _ref.width;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, disabled ? /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '100%',
+      height: 'max-content',
+      position: 'relative'
+    }
+  }, disabled ? /*#__PURE__*/React.createElement("div", {
     className: "disable-mark",
     style: {
       width: width

package/es/ScreenPlayer/Live.js

@@ -26,6 +26,7 @@ import { ScreenType, mergeFill } from './utils';
 import { LivePlayerWithExt } from './PlayerWithExt';
 import Tools from './LiveTools';
 import useVideoFit from './useVideoFit';
+import DisableMark from '../DisableMark';
 import "./index.css";
 
 function LivePlayer(_a) {
@@ -174,11 +175,13 @@ function LivePlayer(_a) {
         height: screenType.height
       }
     }));
-  })), /*#__PURE__*/React.createElement(Tools, {
+  })), /*#__PURE__*/React.createElement(DisableMark, {
+    disabled: !segmentItem.url,
+    width: "70%"
+  }, /*#__PURE__*/React.createElement(Tools, {
     onClose: onClose,
     onCloseAll: onCloseAll,
     fit: fit,
-    disabled: !segmentItem.url,
     toggleFit: toggleFit,
     getPlayerItem: getPlayerItem,
     screenNum: screenNum,
@@ -190,7 +193,7 @@ function LivePlayer(_a) {
     allWinExtTools: allWinExtTools
   }), children && /*#__PURE__*/React.cloneElement(children, {
     selectIndex: state.selectIndex
-  }));
+  })));
 }
 
 LivePlayer.defaultProps = {

package/es/ScreenPlayer/LiveTools.d.ts

@@ -14,7 +14,6 @@ interface IToolsProps {
     toggleFit?: () => void;
     onClose?: () => void;
     onCloseAll?: () => void;
-    disabled: boolean;
     snapshot?: (base64?: string) => void;
     /**
      * 单窗口拓展工具条,左侧
@@ -25,5 +24,5 @@ interface IToolsProps {
      */
     allWinExtTools?: JSX.Element;
 }
-declare function LiveTools({ containerRef, oneWinExtTools, allWinExtTools, updateState, screenNum, getPlayerItem, mode, toggleFit, fit, onClose, onCloseAll, disabled, snapshot, }: IToolsProps): JSX.Element;
+declare function LiveTools({ containerRef, oneWinExtTools, allWinExtTools, updateState, screenNum, getPlayerItem, mode, toggleFit, fit, onClose, onCloseAll, snapshot, }: IToolsProps): JSX.Element;
 export default LiveTools;

package/es/ScreenPlayer/LiveTools.js

@@ -16,7 +16,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React from 'react';
 import IconFont from '../Player/iconfont';
 import ScreenSelect from './ScreenSelect';
-import DisableMark from '../DisableMark';
 import useFullscreen from '../useFullscreen';
 import Volume from '../Player/contraller_bar/volume';
 
@@ -32,7 +31,6 @@ function LiveTools(_ref) {
       fit = _ref.fit,
       onClose = _ref.onClose,
       onCloseAll = _ref.onCloseAll,
-      disabled = _ref.disabled,
       snapshot = _ref.snapshot;
 
   var _useFullscreen = useFullscreen(containerRef),
@@ -73,9 +71,6 @@ function LiveTools(_ref) {
 
   return /*#__PURE__*/React.createElement("div", {
     className: "player-tools"
-  }, /*#__PURE__*/React.createElement(DisableMark, {
-    disabled: disabled,
-    width: "70%"
   }, /*#__PURE__*/React.createElement("div", {
     className: "player-tools-left"
   }, /*#__PURE__*/React.createElement("span", {
@@ -160,7 +155,7 @@ function LiveTools(_ref) {
   }) : /*#__PURE__*/React.createElement(IconFont, {
     type: "lm-player-quanping",
     title: "\u5168\u5C4F"
-  })))));
+  }))));
 }
 
 export default LiveTools;

package/es/ScreenPlayer/RatePick.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface IRatePick {
+    onChange: (rate: number) => void;
+}
+declare function RatePick({ onChange }: IRatePick): JSX.Element;
+export default RatePick;

package/es/ScreenPlayer/RatePick.js

@@ -0,0 +1,59 @@
+import "antd/lib/select/style";
+import _Select from "antd/lib/select";
+import _useUpdateEffect from "ahooks/es/useUpdateEffect";
+
+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, { useState } from 'react';
+import CustomRenderSelect from '../CustomRenderSelect';
+
+function RatePick(_ref) {
+  var onChange = _ref.onChange;
+
+  var _useState = useState({
+    rate: 1
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  _useUpdateEffect(function () {
+    return onChange(state.rate);
+  }, []);
+
+  return /*#__PURE__*/React.createElement(CustomRenderSelect, {
+    value: state.rate,
+    popupClassName: "rate-select-dropdown ",
+    customRender: function customRender() {
+      return /*#__PURE__*/React.createElement("span", {
+        className: "select-current-rate-item"
+      }, "\u500D\u901F x".concat(state.rate));
+    },
+    onChange: function onChange(v) {
+      return setState({
+        rate: v
+      });
+    },
+    placement: "topLeft"
+  }, /*#__PURE__*/React.createElement(_Select.Option, {
+    value: 2
+  }, "x2"), /*#__PURE__*/React.createElement(_Select.Option, {
+    value: 1.5
+  }, "x1.5"), /*#__PURE__*/React.createElement(_Select.Option, {
+    value: 1
+  }, "x1"), /*#__PURE__*/React.createElement(_Select.Option, {
+    value: 0.5
+  }, "x0.5"));
+}
+
+export default RatePick;

package/es/ScreenPlayer/Record.js

@@ -39,6 +39,7 @@ import useRecordList from './useRecordList';
 import useVideoFit from './useVideoFit';
 import DisableMark from '../DisableMark';
 import "./index.css";
+import { cloneDeep } from 'lodash-es';
 var defaultState = {
   screenNum: 4,
   selectIndex: 0,
@@ -73,7 +74,7 @@ function RecordPlayer(_a) {
       allWinExtTools = _a.allWinExtTools,
       options = __rest(_a, ["list", "children", "queryRecord", "onIndexChange", "onClose", "onCloseAll", "download", "snapshot", "defaultScreen", "screenChange", "defaultSelectIndex", "oneWinExtTools", "allWinExtTools"]);
 
-  var _useState = useState(Object.assign(Object.assign({}, defaultState), {
+  var _useState = useState(Object.assign(Object.assign({}, cloneDeep(defaultState)), {
     screenNum: defaultScreen !== null && defaultScreen !== void 0 ? defaultScreen : defaultState.screenNum
   })),
       _useState2 = _slicedToArray(_useState, 2),
@@ -129,10 +130,8 @@ function RecordPlayer(_a) {
     return recordList[state.selectIndex] || {};
   }, [state.selectIndex, recordList]);
   var timeBegin = useMemo(function () {
-    var _a;
-
-    return (_a = state.currentTimes[state.selectIndex]) !== null && _a !== void 0 ? _a : segmentItem.date;
-  }, [segmentItem.date, state.currentTimes, state.selectIndex]);
+    return segmentItem.date;
+  }, [segmentItem.date]);
   /**
    * @desc 用户缓存接收list的变化。
    */

package/es/ScreenPlayer/RecordTools.js

@@ -22,6 +22,7 @@ import TimeSelect from './TimeSelect';
 import TimeMode from './TimeMode';
 import useFullscreen from '../useFullscreen';
 import Volume from '../Player/contraller_bar/volume';
+import RatePick from './RatePick';
 
 function RecordTools(_ref) {
   var containerRef = _ref.containerRef,
@@ -73,6 +74,11 @@ function RecordTools(_ref) {
     snapshot === null || snapshot === void 0 ? void 0 : snapshot(player === null || player === void 0 ? void 0 : player.api.snapshot());
   };
 
+  var ratechange = function ratechange(value) {
+    var player = getPlayerItem();
+    player === null || player === void 0 ? void 0 : player.api.setPlaybackRate(value);
+  };
+
   var player = getPlayerItem();
 
   _useUpdateEffect(function () {
@@ -137,7 +143,9 @@ function RecordTools(_ref) {
       color: 'var(--primary)'
     } : null,
     title: "\u9010\u5E27\u64AD\u653E"
-  })), oneWinExtTools), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement(RatePick, {
+    onChange: ratechange
+  }), oneWinExtTools), /*#__PURE__*/React.createElement("div", {
     className: "player-tools-mid"
   }, /*#__PURE__*/React.createElement("div", {
     className: "player-tools-item",

package/es/ScreenPlayer/SegmentTimeLine.js

@@ -24,7 +24,7 @@ function SegmentTimeLine(_ref) {
     }).valueOf();
   }, [begin]);
   useTimeSlider(ref, {
-    begin: time - timeMode / 2 * 3600 * 1000,
+    begin: time,
     currentTime: time,
     onTimeChange: run,
     segments: segments,

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.eyJvcmdhbml6YXRpb25JZCI6IjEwMDEwMTAwMDQ0NSIsImV4dCI6MTY2MzkyNzM5NjQzMCwidWlkIjoiMTAxMDAwMDAwNjk5IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTA1MTgsMTAwMDAwMTEwNzI4XSwidmFsaWRUaW1lIjoxNzA0MzgzOTk5MDAwLCJvcHRDZW50ZXJJZCI6IjEwMDEwMDAwMDIzMyIsInVzZXJUeXBlIjoxMDA3MDQsImlhdCI6MTY2MzY2ODE5NjQzMH0.bJbtN-QjTUGGSIJRfR1ycjhtGt6UCEsrS29CYN-AAfw";
+var token = "eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDEwMTAwMDQ0NSIsImV4dCI6MTY2NTc0ODU1OTg5MSwidWlkIjoiMTAxMDAwMDAwNjk5IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTA1MTgsMTAwMDAwMTEwNzI4XSwidmFsaWRUaW1lIjoxNzA0MzgzOTk5MDAwLCJvcHRDZW50ZXJJZCI6IjEwMDEwMDAwMDIzMyIsInVzZXJUeXBlIjoxMDA3MDQsImlhdCI6MTY2NTQ4OTM1OTg5MX0.zxxxxoaKjyO6CJhi2cs06gTOtjdLgPA9UI7zAQ0zzss";
 var cids = ['538509097', '539172446'];
 
 var query = function query(_ref) {

package/es/ScreenPlayer/index.css

@@ -43,7 +43,7 @@
 }
 .split-screen-player-wrapper .player-tools {
   height: 42px;
-  background-color: var(--gray12);
+  background-color: #242c3d;
   padding: 0 10px;
   display: flex;
   align-items: center;
@@ -151,3 +151,16 @@
 .custom-select-dropdown .cloudapp-select-item {
   font-size: var(--fs-small);
 }
+.select-current-rate-item {
+  color: var(--gray1);
+  font-size: 12px;
+  border: 1px solid var(--gray1);
+  padding: 2px 0;
+  display: inline-block;
+  width: 64px;
+  border-radius: 2px;
+  cursor: pointer;
+  text-align: center;
+  position: relative;
+  top: 4px;
+}

package/es/ScreenPlayer/useTimeSlider.js

@@ -17,8 +17,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import moment from 'moment';
 import { useEffect, useMemo, useRef, useState } from 'react';
-var hours = [1, 6, 12, 24];
-var currentColor = '#FF000A';
+var hours = [1, 6, 12, 24]; // const currentColor = '#FF000A';
+
 var normalLineColor = '#ffffff';
 var hoverLineColor = '#319BFF';
 var minPerStep = [1, 2, 5, 10, 15, 20, 30, 60, 120, 180, 240, 360, 720, 1440];
@@ -237,32 +237,20 @@ function useTimeSlider(canvasRef, _ref2) {
    * 绘制当前刻度
    * @returns
    */
+  // const drawCurrentLine = () => {
+  //   const { currentTime, begin, hoursPer } = state;
+  //   const time = currentTime;
+  //   const range = [begin, currentTime + hoursPer * 3600 * 1000];
+  //   if (time < range[0] || time > range[1]) {
+  //     return;
+  //   }
+  //   const ms_current = time - begin;
+  //   const px_per_ms = width / (hoursPer * 60 * 60 * 1000); // px/ms
+  //   const left = px_per_ms * ms_current;
+  //   drawText(ctx, { fillStyle: '#ffffff', font: '12px Arial', x: left - 64, y: 14, text: formartTimestemp(time) });
+  //   drawLine(ctx, left, 20, left, height, currentColor, 2); //中间当前点线
+  // };
 
-
-  var drawCurrentLine = function drawCurrentLine() {
-    var currentTime = state.currentTime,
-        begin = state.begin,
-        hoursPer = state.hoursPer;
-    var time = currentTime;
-    var range = [begin, currentTime + hoursPer * 3600 * 1000];
-
-    if (time < range[0] || time > range[1]) {
-      return;
-    }
-
-    var ms_current = time - begin;
-    var px_per_ms = width / (hoursPer * 60 * 60 * 1000); // px/ms
-
-    var left = px_per_ms * ms_current;
-    drawText(ctx, {
-      fillStyle: '#ffffff',
-      font: '12px Arial',
-      x: left - 64,
-      y: 14,
-      text: formartTimestemp(time)
-    });
-    drawLine(ctx, left, 20, left, height, currentColor, 2); //中间当前点线
-  };
   /**
    * 绘制提示时间
    */
@@ -303,15 +291,16 @@ function useTimeSlider(canvasRef, _ref2) {
     if (canvas) {
       clearCanvas();
       drawOverlay();
-      drawScale();
-      drawCurrentLine();
+      drawScale(); // drawCurrentLine();
+
       state.hover.time && drawHoverLine();
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [canvas, state.begin, state.currentTime, state.hoursPer, segments, state.hover]);
 
   _useUpdateEffect(function () {
-    return update({
+    console.log(begin);
+    update({
       begin: begin
     });
   }, [begin]);
@@ -320,13 +309,8 @@ function useTimeSlider(canvasRef, _ref2) {
     return update({
       hoursPer: hoursPer
     });
-  }, [hoursPer]);
+  }, [hoursPer]); // useUpdateEffect(() => update({ currentTime }), [currentTime]);
 
-  _useUpdateEffect(function () {
-    return update({
-      currentTime: currentTime
-    });
-  }, [currentTime]);
   /**
    * 触发绘制范围单位（hour）
    */
@@ -456,14 +440,9 @@ function useTimeSlider(canvasRef, _ref2) {
         return new_current >= v.beginTime && new_current < v.endTime;
       }); // 当前片段没有录像的时候
 
-      var outTimeline = segmentItem && !segmentItem.url;
-      var new_begin = new_current - state.hoursPer * 60 * 60 * 1000 / 2;
-      setState(function (old) {
-        return Object.assign(Object.assign({}, old), {
-          begin: new_begin,
-          current: new_current
-        });
-      });
+      var outTimeline = segmentItem && !segmentItem.url; // const new_begin = new_current - (state.hoursPer * 60 * 60 * 1000) / 2;
+      // setState((old) => ({ ...old, begin: new_begin, current: new_current }));
+      // setState((old) => ({ ...old, begin: new_begin, current: new_current }));
 
       _nextTick(function () {
         return onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(new_current, outTimeline);

package/package.json

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