@cloud-app-dev/vidc 3.0.4 → 3.0.7

package/es/ScreenPlayer/TimeSelect.js

@@ -0,0 +1,128 @@
+import "antd/lib/button/style";
+import _Button from "antd/lib/button";
+import "antd/lib/input-number/style";
+import _InputNumber from "antd/lib/input-number";
+import "antd/lib/popover/style";
+import _Popover from "antd/lib/popover";
+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, { useMemo, useState } from 'react';
+import moment from 'moment';
+
+function TimeSelect(_ref) {
+  var time = _ref.time,
+      onChange = _ref.onChange;
+
+  var _useState = useState(function () {
+    var m = time ? moment(time) : moment().set({
+      hours: 0,
+      minutes: 0,
+      seconds: 0
+    });
+    return [m.hours(), m.minutes(), m.seconds()];
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      values = _useState2[0],
+      setValues = _useState2[1];
+
+  var timeStr = useMemo(function () {
+    var m = time ? moment(time) : moment().set({
+      hours: 0,
+      minutes: 0,
+      seconds: 0
+    });
+    return m.format('HH:mm:ss');
+  }, [time]);
+
+  var onChangeTime = function onChangeTime() {
+    var m = time ? moment(time) : moment().set({
+      hours: 0,
+      minutes: 0,
+      seconds: 0
+    });
+    var newTime = m.set({
+      hours: values[0],
+      minutes: values[1],
+      seconds: values[2]
+    }).valueOf();
+    onChange && onChange(newTime);
+  };
+
+  _useUpdateEffect(function () {
+    var m = time ? moment(time) : moment().set({
+      hours: 0,
+      minutes: 0,
+      seconds: 0
+    });
+    setValues([m.hours(), m.minutes(), m.seconds()]);
+  }, [time]);
+
+  var formatter = function formatter(value) {
+    return String(value).length === 1 ? "0".concat(value) : value + '';
+  };
+
+  return /*#__PURE__*/React.createElement(_Popover, {
+    content: /*#__PURE__*/React.createElement("div", {
+      className: "player-time-select"
+    }, /*#__PURE__*/React.createElement(_InputNumber, {
+      size: "small",
+      style: {
+        width: 36
+      },
+      formatter: formatter,
+      controls: false,
+      value: values[0],
+      onChange: function onChange(v) {
+        return setValues(function (old) {
+          return [v, old[1], old[2]];
+        });
+      }
+    }), ":", /*#__PURE__*/React.createElement(_InputNumber, {
+      size: "small",
+      style: {
+        width: 36
+      },
+      formatter: formatter,
+      controls: false,
+      value: values[1],
+      onChange: function onChange(v) {
+        return setValues(function (old) {
+          return [old[0], v, old[2]];
+        });
+      }
+    }), ":", /*#__PURE__*/React.createElement(_InputNumber, {
+      size: "small",
+      style: {
+        width: 36
+      },
+      formatter: formatter,
+      controls: false,
+      value: values[2],
+      onChange: function onChange(v) {
+        return setValues(function (old) {
+          return [old[0], old[1], v];
+        });
+      }
+    }), /*#__PURE__*/React.createElement(_Button, {
+      size: "small",
+      type: "primary",
+      onClick: onChangeTime
+    }, "\u786E\u5B9A"))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "player-record-time"
+  }, timeStr));
+}
+
+export default TimeSelect;

package/es/ScreenPlayer/TimeSlider.d.ts

@@ -4,7 +4,7 @@ export interface ITimeSliderOptions {
     start_timestamp?: number;
     timecell?: TimeCellItem[];
     current_timestamp?: number;
-    onTimeChange?: (time: number) => void;
+    onTimeChange?: (time: number, outTimeline?: boolean) => void;
 }
 export declare type TimeCellItem = ISegmentType;
 export default class TimeSlider {

package/es/ScreenPlayer/TimeSlider.js

@@ -103,7 +103,7 @@ var TimeSlider = /*#__PURE__*/function () {
         _this.drawLine(pos_x, 20, pos_x, _this.canVansH, hoverLineColor, 1);
 
         _this.ctx.fillStyle = hoverLineColor;
-        _this.ctx.font = "10px Arial";
+        _this.ctx.font = '10px Arial';
 
         _this.ctx.fillText(_this.changeTime(current_timestamp), pos_x - 50, 12);
       }
@@ -131,18 +131,15 @@ var TimeSlider = /*#__PURE__*/function () {
 
         var timecellItem = _this.timecell.find(function (v) {
           return current_timestamp >= v.beginTime && current_timestamp < v.endTime;
-        });
+        }); // 当前片段没有录像的时候
 
-        if (timecellItem && !timecellItem.url) {
-          // 无录像轴 不让点击
-          return;
-        }
 
+        var outTimeline = timecellItem && !timecellItem.url;
         _this.current_timestamp = current_timestamp;
 
         _this.set_time_to_middle(_this.current_timestamp);
 
-        _this.options.onTimeChange && _this.options.onTimeChange(current_timestamp);
+        _this.options.onTimeChange && _this.options.onTimeChange(current_timestamp, outTimeline);
       }
 
       document.removeEventListener('mousemove', _this.mousemoveFunc);
@@ -233,7 +230,7 @@ var TimeSlider = /*#__PURE__*/function () {
     this.options = options;
     this.canvansW = this.canvas.width = this.canvas.clientWidth;
     this.canVansH = this.canvas.height = this.canvas.clientHeight;
-    this.hours_per_ruler = (_a = this.options.hours_per_ruler) !== null && _a !== void 0 ? _a : this.hours_per_ruler;
+    this.zoom = this.hours_per_ruler = (_a = this.options.hours_per_ruler) !== null && _a !== void 0 ? _a : this.hours_per_ruler;
     this.start_timestamp = (_b = this.options.start_timestamp) !== null && _b !== void 0 ? _b : this.start_timestamp;
     this.current_timestamp = (_c = this.options.current_timestamp) !== null && _c !== void 0 ? _c : this.current_timestamp;
     this.timecell = (_d = this.options.timecell) !== null && _d !== void 0 ? _d : this.timecell;
@@ -360,13 +357,13 @@ var TimeSlider = /*#__PURE__*/function () {
           lineH = 10;
           var big_date = this.graduation_title(date);
           this.ctx.fillStyle = normalLineColor;
-          this.ctx.font = "10px Arial";
+          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.font = "10px Arial";
+          this.ctx.font = '10px Arial';
           this.ctx.fillText(middle_date, graduation_left - (middle_date.length > 5 ? 24 : 12), 30);
         } else {
           lineH = 5;

package/es/ScreenPlayer/demo.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export default function (): JSX.Element;
+export default function App(): JSX.Element;

package/es/ScreenPlayer/demo.js

@@ -1,3 +1,5 @@
+import "antd/lib/config-provider/style";
+import _ConfigProvider from "antd/lib/config-provider";
 import React from 'react';
 import LivePlayer from './Live';
 var list = [{
@@ -13,13 +15,16 @@ var list = [{
   url: 'https://6a75ef90-0-server.antelopecloud.cn/flv_live?app=live&token=557997490_3356491776_1691725056_86b4dd8105fea7b1180408a63d17b37b',
   type: 'flv'
 }];
-export default function () {
-  return /*#__PURE__*/React.createElement("div", {
+export default function App() {
+  return /*#__PURE__*/React.createElement(_ConfigProvider, {
+    prefixCls: "cloudapp"
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
       width: 1200,
       height: 800
     }
   }, /*#__PURE__*/React.createElement(LivePlayer, {
-    list: list
-  }));
+    list: list,
+    onIndexChange: console.log
+  })));
 }

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.eyJvcmdhbml6YXRpb25JZCI6IjEwMDEwMTAwMDQ0NSIsImV4dCI6MTY2MTM4OTU0MzA4NSwidWlkIjoiMTAxMDAwMDAwNjk5IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTA1MTgsMTAwMDAwMTEwNzI4XSwidmFsaWRUaW1lIjoxNzA0MzgzOTk5MDAwLCJvcHRDZW50ZXJJZCI6IjEwMDEwMDAwMDIzMyIsInVzZXJUeXBlIjoxMDA3MDQsImlhdCI6MTY2MTEzMDM0MzA4NX0.-0vh7SpomB6UWteJ6WIA5VneryhSW3Vrsz6RnHfgcRI";
+var token = "eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDEwMTAwMDQ0NSIsImV4dCI6MTY2MTY1NjgzMTU3MywidWlkIjoiMTAxMDAwMDAwNjk5IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTA1MTgsMTAwMDAwMTEwNzI4XSwidmFsaWRUaW1lIjoxNzA0MzgzOTk5MDAwLCJvcHRDZW50ZXJJZCI6IjEwMDEwMDAwMDIzMyIsInVzZXJUeXBlIjoxMDA3MDQsImlhdCI6MTY2MTM5NzYzMTU3M30.OWPxfPgFBWqGJaRsYLSAZohn2AarhbkOuWLa1bwgZE4";
 var cids = ['538509097', '539172446'];
 
 var query = function query(_ref) {

package/es/ScreenPlayer/index.css

@@ -3,10 +3,10 @@
   height: 100%;
   box-sizing: border-box;
   user-select: none;
+  min-width: 600px;
 }
 .split-screen-player-wrapper .player-layout {
-  height: calc(100% - 42px);
-  border-bottom: 1px solid var(--gray12);
+  height: calc(100% - 88px);
 }
 .split-screen-player-wrapper .player-layout .player-with-ext-layout {
   float: left;
@@ -19,9 +19,64 @@
 .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 .player-tools-group {
+  height: 88px;
+  position: relative;
+}
+.split-screen-player-wrapper .player-record-time {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  background-color: var(--gray11);
+  line-height: 42px;
+  padding: 0 16px;
+  font-size: 16px;
+  color: var(--gray1);
+  margin: 0 20px;
+}
 .split-screen-player-wrapper .player-tools {
   height: 42px;
   background-color: var(--gray12);
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.split-screen-player-wrapper .player-tools .player-tools-left,
+.split-screen-player-wrapper .player-tools .player-tools-right {
+  min-width: 35%;
+  display: flex;
+  align-items: center;
+}
+.split-screen-player-wrapper .player-tools .player-tools-right {
+  justify-content: flex-end;
+  margin-right: 0;
+  margin-left: 4px;
+}
+.split-screen-player-wrapper .player-tools .player-tools-mid {
+  display: flex;
+  align-items: center;
+  justify-self: center;
+  height: 100%;
+}
+.split-screen-player-wrapper .player-tools .player-tools-mid .player-tools-item {
+  margin: 0;
+}
+.split-screen-player-wrapper .player-tools .player-tools-item {
+  font-size: 18px;
+  width: 32px;
+  height: 32px;
+  color: var(--gray1);
+  text-align: center;
+  cursor: pointer;
+  margin-right: 4px;
+}
+.split-screen-player-wrapper .player-tools .player-tools-item .lm-player-iconfont {
+  font-size: 20px;
+}
+.split-screen-player-wrapper .player-tools .player-tools-item:hover {
+  background-color: var(--gray11);
+  border-radius: var(--radius1);
 }
 .split-screen-player-wrapper.split-screen-player-wrapper-record .record-time-line {
   width: 100%;
@@ -44,6 +99,26 @@
   z-index: 5;
   cursor: not-allowed;
 }
-.split-screen-player-wrapper.split-screen-player-wrapper-record .player-layout {
-  height: calc(100% - 42px - 60px);
+.player-time-select {
+  width: 190px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+.time-mode-select {
+  font-size: var(--fs-small);
+  color: var(--gray1);
+}
+.time-mode-select .cloudapp-select-selector {
+  background-color: transparent !important;
+  border-radius: var(--radius1) !important;
+}
+.time-mode-select .anticon {
+  color: var(--gray1);
+}
+.time-mode-select-dropdown {
+  font-size: var(--fs-small);
+}
+.time-mode-select-dropdown .cloudapp-select-item {
+  font-size: var(--fs-small);
 }

package/es/ScreenPlayer/interface.d.ts

@@ -23,6 +23,19 @@ export interface IRecordPlayerProps {
    * 窗口索引变化，后续基于索引传入播放必要数据
    */
   onIndexChange: (idx: number) => void;
+
+  /**
+   * 关闭单个窗口
+   */
+  onClose?: () => void;
+
+  /**
+   * 关闭所有窗口
+   */
+  onCloseAll?: () => void;
+  /**
+   * 窗口索引变化，后续基于索引传入播放必要数据
+   */
 }
 
 export interface IRecordPlayerState {
@@ -60,6 +73,11 @@ export interface IRecordPlayerState {
    * 加载中，用于拦截多次时间轴变化需要加载片段的情况
    */
   loading?: boolean;
+
+  /**
+   * 录像时间轴单页绘制时长单位（hour）
+   */
+  timeMode:number
 }
 
 export type ScreenItemLivePlayerType = {
@@ -70,6 +88,20 @@ export type ScreenItemLivePlayerType = {
 export interface ILivePlayerProps {
   list?: ScreenItemLivePlayerType[];
   children?: JSX.Element;
+
+  /**
+   * 关闭单个窗口
+   */
+  onClose?: () => void;
+
+  /**
+   * 关闭所有窗口
+   */
+  onCloseAll?: () => void;
+  /**
+   * 窗口索引变化，后续基于索引传入播放必要数据
+   */
+  onIndexChange: (idx: number) => void;
 }
 
 export interface ILivePlayerState {

package/es/ScreenPlayer/utils.d.ts

@@ -4,6 +4,9 @@ export declare const ScreenType: {
     width: string;
     height: string;
 }[];
+export declare const TimeModeLibs: {
+    name: number;
+}[];
 export declare function mergeFill<T, S>(len: number, mergeArr: T[], fillItem: S): (T | S)[];
 export declare const FILTER_KEY = "00|11|00";
 /**

package/es/ScreenPlayer/utils.js

@@ -15,6 +15,15 @@ export var ScreenType = [{
   width: '25%',
   height: '25%'
 }];
+export var TimeModeLibs = [{
+  name: 24
+}, {
+  name: 12
+}, {
+  name: 6
+}, {
+  name: 1
+}];
 export function mergeFill(len, mergeArr, fillItem) {
   return new Array(len).fill(fillItem).map(function (v, i) {
     return mergeArr[i] ? mergeArr[i] : v;

package/es/Timeout/index.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { BasicTarget } from 'ahooks/es/utils/domTarget';
-import 'antd/es/modal/style/css';
 interface ITimeoutProps {
     /**
-     *ß
+     * 容器
+     * @default `document.body`
      */
     contianer?: BasicTarget;
     /**
@@ -14,20 +14,19 @@ interface ITimeoutProps {
      * 超时动作，默认退出登录
      */
     onTimeout?: () => void;
+    /**
+     * 忽略的情况
+     */
+    ignore?: () => boolean;
 }
 /**
- *
+ * @desc 用户创建界面超时回调
  */
-declare function Timeout({ contianer, time, onTimeout }: ITimeoutProps): JSX.Element;
+declare function Timeout({ contianer, time, onTimeout, ignore }: ITimeoutProps): JSX.Element;
 declare namespace Timeout {
     var defaultProps: {
         time: number;
         contianer: HTMLElement;
-        onTimeout: typeof defaultTimeoutAction;
     };
 }
-declare function defaultTimeoutAction(): {
-    destroy: () => void;
-    update: (configUpdate: import("antd").ModalFuncProps | ((prevConfig: import("antd").ModalFuncProps) => import("antd").ModalFuncProps)) => void;
-};
 export default Timeout;

package/es/Timeout/index.js

@@ -1,5 +1,3 @@
-import "antd/lib/modal/style";
-import _Modal from "antd/lib/modal";
 import _useEventListener from "ahooks/es/useEventListener";
 import _useRafInterval from "ahooks/es/useRafInterval";
 
@@ -16,16 +14,15 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import React, { useEffect, useRef, useState } from 'react';
-//此处antd有bug不能定制样式前缀
-import 'antd/es/modal/style/css';
+
 /**
- *
+ * @desc 用户创建界面超时回调
  */
-
 function Timeout(_ref) {
   var contianer = _ref.contianer,
       time = _ref.time,
-      onTimeout = _ref.onTimeout;
+      onTimeout = _ref.onTimeout,
+      ignore = _ref.ignore;
   var cuurentTimeRef = useRef(Date.now());
   var lockstatusRef = useRef(false);
 
@@ -37,15 +34,24 @@ function Timeout(_ref) {
       setState = _useState2[1];
 
   _useRafInterval(function () {
-    return setState(function (old) {
+    var now = Date.now();
+    setState(function (old) {
       return Object.assign(Object.assign({}, old), {
-        timelock: Date.now()
+        timelock: now
       });
     });
+    var isIgnore = ignore ? ignore() : false;
+
+    if (isIgnore) {
+      // 如果当前需要忽略，那么重置时间
+      cuurentTimeRef.current = now;
+    }
   }, 1 * 1000);
 
   useEffect(function () {
-    if (!lockstatusRef.current && state.timelock - cuurentTimeRef.current > time * 1000) {
+    var isIgnore = ignore ? ignore() : false;
+
+    if (!lockstatusRef.current && state.timelock - cuurentTimeRef.current > time * 1000 && !isIgnore) {
       lockstatusRef.current = true;
       onTimeout && onTimeout();
       setTimeout(function () {
@@ -64,20 +70,8 @@ function Timeout(_ref) {
   return /*#__PURE__*/React.createElement(React.Fragment, null);
 }
 
-function defaultTimeoutAction() {
-  return _Modal.warning({
-    title: '系统提示',
-    content: /*#__PURE__*/React.createElement("p", null, "\u60A8\u957F\u65F6\u95F4\u672A\u64CD\u4F5C\u7CFB\u7EDF\uFF0C\u8BF7\u91CD\u65B0\u767B\u5F55\uFF01"),
-    onOk: function onOk() {
-      sessionStorage.clear();
-      window.location.replace('/login');
-    }
-  });
-}
-
 Timeout.defaultProps = {
   time: 15 * 60,
-  contianer: document.body,
-  onTimeout: defaultTimeoutAction
+  contianer: document.body
 };
 export default Timeout;

package/es/index.d.ts

@@ -6,6 +6,7 @@ export { default as Box } from './Box';
 export { default as CheckGroupFixed } from './CheckGroupFixed';
 export { default as Config } from './Config';
 export { default as ConfigContext } from './ConfigContext';
+export { default as DisableMark } from './DisableMark';
 export { default as DomMove } from './DomMove';
 export { default as Drag } from './Drag';
 export { default as Drawer } from './Drawer';

package/es/index.js

@@ -6,6 +6,7 @@ export { default as Box } from './Box';
 export { default as CheckGroupFixed } from './CheckGroupFixed';
 export { default as Config } from './Config';
 export { default as ConfigContext } from './ConfigContext';
+export { default as DisableMark } from './DisableMark';
 export { default as DomMove } from './DomMove';
 export { default as Drag } from './Drag';
 export { default as Drawer } from './Drawer';

package/package.json

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