@cloud-app-dev/vidc 2.2.0-alpha.2 → 2.2.0-alpha.6

package/es/List/GridList/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { GridListItemData } from './interface';
+import { GridListCell, GridListItemData } from './interface';
 import './index.less';
 export interface GridListProps<P> {
     items: P[];
@@ -7,7 +7,7 @@ export interface GridListProps<P> {
     getWindowMargin?: (windowHeight: number) => number;
     getColumnCount: (elementWidth: number, gridGap: number) => number;
     getItemData: (item: P, columnWidth: number) => GridListItemData;
-    renderItem: (item: P) => React.ReactNode;
+    renderItem: (item: P, cell: GridListCell<P>) => React.ReactNode;
     fixedColumnWidth?: number;
     className?: string;
 }

package/es/List/GridList/index.js

@@ -36,10 +36,11 @@ function GridList(props, ref) {
       key: cell.key,
       style: {
         height: cell.height,
+        width: cell.width,
         gridColumnStart: "".concat(cell.columnNumber),
         gridRowStart: getGridRowStart(cell, renderData)
       }
-    }, props.renderItem(cell.item));
+    }, props.renderItem(cell.item, cell));
   }))));
 }
 

package/es/List/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { CheckListProps } from './interface';
 import './index.less';
 declare function List(props: CheckListProps<any>): JSX.Element;
@@ -13,5 +13,7 @@ declare namespace List {
     var DeviceList: typeof import("./DeviceList").default;
     var ListExt: typeof import("./ListExt").default;
     var DynamicDeviceList: typeof import("./DynamicDeviceList").default;
+    var GridList: React.ForwardRefExoticComponent<import("./GridList").GridListProps<any> & React.RefAttributes<HTMLDivElement>>;
+    var DynamicGridList: typeof import("./DynamicGridList").default;
 }
 export default List;

package/es/List/index.js

@@ -27,6 +27,8 @@ import CheckExt from './CheckExt';
 import DeviceList from './DeviceList';
 import ListExt from './ListExt';
 import DynamicDeviceList from './DynamicDeviceList';
+import GridList from './GridList';
+import DynamicGridList from './DynamicGridList';
 import "./index.css";
 
 function List(props) {
@@ -175,4 +177,6 @@ List.VList = VList;
 List.DeviceList = DeviceList;
 List.ListExt = ListExt;
 List.DynamicDeviceList = DynamicDeviceList;
+List.GridList = GridList;
+List.DynamicGridList = DynamicGridList;
 export default List;

package/es/Picture/component/DefaultRects/RectInfo.js

@@ -82,7 +82,7 @@ function RectInfo(_ref) {
     return /*#__PURE__*/React.createElement("li", {
       className: "info-item",
       key: index,
-      title: v.tagLabel
+      title: v.titleAttr
     }, /*#__PURE__*/React.createElement(IconFont, {
       type: v.icon
     }), /*#__PURE__*/React.createElement("span", {

package/es/Picture/component/MoveContent/index.js

@@ -8,7 +8,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -18,7 +18,7 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
 import React from 'react';
 import addEventListener from 'add-dom-event-listener';

package/es/Picture/demo.d.ts

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

package/es/Picture/demo.js

@@ -0,0 +1,16 @@
+import "antd/lib/config-provider/style";
+import _ConfigProvider from "antd/lib/config-provider";
+import React from 'react';
+import Picture from '.';
+export default function App() {
+  return /*#__PURE__*/React.createElement(_ConfigProvider, {
+    prefixCls: "cloudapp"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 800,
+      height: 400
+    }
+  }, /*#__PURE__*/React.createElement(Picture, {
+    imagePath: "https://x0.ifengimg.com/cmpp/fck/2020_30/65cca65a549d6c2_w1024_h578.jpg"
+  })));
+}

package/es/Picture/index.d.ts

@@ -4,6 +4,8 @@ import './index.less';
 declare function Picture({ className, width, height, minHeight, disabledDrag, imagePath, rects, isOpenSelect, disabledDrawMenu, menus, hasTool, fullScreenEle, ...props }: IPictureProps): JSX.Element;
 declare namespace Picture {
     var defaultProps: {
+        width: string;
+        height: string;
         className: string;
         minHeight: number;
         disabledDrag: boolean;

package/es/Picture/index.js

@@ -23,7 +23,7 @@ import Tools from './component/Tools';
 import DrawRect from './component/DrawRect';
 import WheelScale from './component/WheelScale';
 import DefaultRects from './component/DefaultRects';
-import { isFunction } from 'lodash';
+import { isFunction } from 'lodash-es';
 import "./index.css";
 
 function Picture(_a) {
@@ -187,7 +187,7 @@ function Picture(_a) {
         rotate = state.rotate;
 
     if (!layoutRef.current) {
-      return;
+      return undefined;
     }
 
     var position = computedBound(layoutRef.current, currrentPosition, scale, rotate);
@@ -266,8 +266,8 @@ function Picture(_a) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "picture-view-layout ".concat(className),
     style: {
-      width: width || '100%',
-      height: height || '100%',
+      width: width,
+      height: height,
       minHeight: minHeight
     },
     ref: layoutRef,
@@ -323,7 +323,7 @@ function Picture(_a) {
     setScale: setScale,
     setRotate: setRotate,
     scale: scale,
-    containerEle: fullScreenEle || layoutRef.current,
+    containerEle: fullScreenEle !== null && fullScreenEle !== void 0 ? fullScreenEle : layoutRef.current,
     resetPicture: resetPicture,
     imgDownload: imgDownload,
     fullScreenChange: loadImageSuccess
@@ -334,6 +334,8 @@ function Picture(_a) {
 }
 
 Picture.defaultProps = {
+  width: '100%',
+  height: '100%',
   className: '',
   minHeight: 300,
   disabledDrag: false,

package/es/Picture/interface.d.ts

@@ -1,37 +1,111 @@
 import * as React from 'react';
 
 export type MenuRectType = {
+  /**
+   * 路由地址
+   */
   pathname: string;
+
+  /**
+   * 标题
+   */
   title: string;
+
+  /**
+   * 图标
+   */
   icon: string;
+
+  /**
+   * 内部属性，忽略
+   */
   base64?: string;
 };
+export const MenuRectTypeDemo: React.FC<MenuRectType>;
 
 export type TagItemType = {
+  /**
+   * 标签值 code
+   */
   value: string;
+
+  /**
+   * 标签对应文本
+   */
   label: string;
+
+  /**
+   * 标签图标
+   */
   icon: string;
-  tagLabel?: string;
+
+  /**
+   *标签title属性
+   */
+  titleAttr?: string;
 };
+export const TagItemTypeDemo: React.FC<TagItemType>;
 
 export type ImageType = 'face' | 'body' | 'nonVehicle' | 'vehicle' | 'thing';
 
 export type RectType = {
+  /**
+   * 矩形框坐标 [left,top,width,height]
+   */
   rect: Array<number>;
+  /**
+   * 'face' | 'body' | 'nonVehicle' | 'vehicle' | 'thing'
+   */
   type: ImageType;
+
+  /**
+   * 矩形是否需要扩大，根据类型扩大计算公式
+   */
   needExpand?: boolean;
+
+  /**
+   * 图片id
+   */
   imgId?: string;
+
+  /**
+   * 矩形面积，通过面积控制矩形层级
+   */
   area?: number;
+
+  /**
+   * 矩形中对象对应的标签
+   */
   tags?: TagItemType[];
+
+  /**
+   * 小图的地址
+   */
   imgUrl?: string;
-  smId?: string;
+
+  /**
+   * 是否默认
+   */
   isDefault?: boolean;
-  feature?: string;
+
+  /**
+   * 重复标记
+   */
   dupId?: string;
+
+  /**
+   * 低质量标记
+   */
   lowQuality?: boolean;
+
+  /**
+   * 内部属性，忽略
+   */
   base64?: string;
 };
 
+export const RectTypeDemo: React.FC<RectType>;
+
 export type PositionType = {
   x: number;
   y: number;
@@ -50,20 +124,79 @@ export type SizeType = {
 };
 
 export interface IPictureProps {
+  /**
+   * 容器类名
+   */
   className?: string;
+
+  /**
+   * 容器宽度
+   */
   width?: number | string;
+
+  /**
+   * 容器高度
+   */
   height?: number | string;
+
+  /**
+   * 容器最小高度
+   */
   minHeight?: number | string;
+
+  /**
+   * 进展拓展状态
+   */
   disabledDrag?: false;
+
+  /**
+   * 图片地址
+   */
   imagePath: string;
+
+  /**
+   * 目标框的对象
+   */
   rects?: RectType[];
+
+  /**
+   * 开启自定义框选
+   */
   isOpenSelect?: false;
+
+  /**
+   * 禁止框选 后的菜单项
+   */
   disabledDrawMenu?: false;
+
+  /**
+   * 框选 后的菜单项
+   */
   menus?: MenuRectType[];
+
+  /**
+   * 图片下载
+   */
   imgDownload?: () => void;
+
+  /**
+   * 点击框事件
+   */
   onClickRect?: (item: RectType) => void;
+
+  /**
+   * 菜单点击事件
+   */
   onMenuClick?: (item: MenuRectType) => void;
   children?: (option: any) => void;
+
+  /**
+   * 显示工具栏
+   */
   hasTool?: boolean;
+
+  /**
+   * 全屏的dom节点
+   */
   fullScreenEle?: Element;
 }

package/es/Picture/utils.d.ts

@@ -13,9 +13,7 @@ export declare function computedRectScale({ imageSource, domImg, rects }: {
     area?: number;
     tags?: import("./interface").TagItemType[];
     imgUrl?: string;
-    smId?: string;
     isDefault?: boolean;
-    feature?: string;
     dupId?: string;
     lowQuality?: boolean;
     base64?: string;

package/es/Picture/utils.js

@@ -1,4 +1,4 @@
-import { cloneDeep } from 'lodash';
+import { cloneDeep } from 'lodash-es';
 export function customContextMenu(e) {
   e.preventDefault();
   return false;

package/es/Player/api/index.js

@@ -256,7 +256,7 @@ export function useTypeAndPlay(url, type, isLive, container, segments, flvConfig
       video.removeAttribute('src');
       setState({});
     };
-  }, [url, container, segments]);
+  }, [url, container, segments, type]);
   return [state.type, state.flv, state.hls];
 } //创建Api
 

package/es/Player/frontend_player.d.ts

@@ -1,11 +1,5 @@
 /// <reference types="react" />
-import type { ISinglePlayerProps } from './player';
-declare type OmitPlayerProps = 'customTimeLine' | 'onCanPlayerInit' | 'isLive' | 'reload' | 'type';
-interface IFrontendPlayerProps extends Omit<ISinglePlayerProps, OmitPlayerProps> {
-    begin?: number;
-    end?: number;
-    onSeek(time: number): void;
-}
+import type { IFrontendPlayerProps } from './player';
 /**
  * @desc 主组件，负责片段整体逻辑控制
  * @param param0

package/es/Player/index.d.ts

@@ -1,8 +1,2 @@
-import SegmentPlayer from './segment_player';
-import FrontendPlayer from './frontend_player';
-declare const _default: {
-    SinglePlayer: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("./player").ISinglePlayerProps & import("react").RefAttributes<import("./player").ExportPlayerType>>>;
-    FrontendPlayer: typeof FrontendPlayer;
-    SegmentPlayer: typeof SegmentPlayer;
-};
-export default _default;
+import SinglePlayer from './single_player';
+export default SinglePlayer;

package/es/Player/index.js

@@ -1,8 +1,2 @@
 import SinglePlayer from './single_player';
-import SegmentPlayer from './segment_player';
-import FrontendPlayer from './frontend_player';
-export default {
-  SinglePlayer: SinglePlayer,
-  FrontendPlayer: FrontendPlayer,
-  SegmentPlayer: SegmentPlayer
-};
+export default SinglePlayer;

package/es/Player/player.d.ts

@@ -10,34 +10,159 @@ export type FlvPlayerConfig = {
 };
 
 export interface ISinglePlayerProps {
+  /**
+   * 视频播放地址
+   */
   url?: string;
+
+  /**
+   * 容器类名
+   */
   className?: string;
   children?: React.ReactNode;
+
+  /**
+   * 同html video muted  静音
+   * @default true
+   */
   muted?: boolean;
-  scale?: boolean;
+  /**
+   * 同html video autoplay  自动播放
+   * @default true
+   */
   autoPlay?: boolean;
+
+  /**
+   * 同html video playsinline  自动播放
+   * @default false
+   */
   playsInline?: boolean;
+  /**
+   *同html video preload  预加载
+   */
   preload?: string;
+  /**
+   * 视频封面
+   */
   poster?: string;
+
+  /**
+   * 同html video loop  循环
+   * @default false
+   */
   loop?: boolean;
+
+  /**
+   * 视频格式
+   * @default 'native'
+   */
   type?: 'flv' | 'hls' | 'native';
+
+  /**
+   * 隐藏工具栏
+   * @default false
+   */
   hideContrallerBar?: boolean;
+
+  /**
+   * 直播模式
+   * @default true
+   */
   isLive?: boolean;
+
+  /**
+   * 工具栏右外侧拓展
+   */
   rightExtContents?: React.ReactNode;
+  /**
+   * 工具栏右内侧拓展
+   */
   rightMidExtContents?: React.ReactNode;
+  /**
+   * 工具栏左外侧拓展
+   */
   leftExtContents?: React.ReactNode;
+  /**
+   * 工具栏左内侧拓展
+   */
   leftMidExtContents?: React.ReactNode;
+
+  /**
+   * 自定义时间轴
+   */
   customTimeLine?: React.ReactNode;
+
+  /**
+   * 错误重试次数
+   * @default 5
+   */
   errorReloadTimer?: number;
+
+  /**
+   * 自定义flv参数配置
+   */
   flvConfig?: FlvPlayerConfig;
+
+  /**
+   * 自定义hls参数配置
+   */
   hlsConfig?: HlsConfig;
+
+  /**
+   * 自定义reload函数
+   */
   reload?: () => void;
+
+  /**
+   * 视频可播放时执行钩子
+   */
   onCanPlayerInit?: () => void;
+
+  /**
+   * 自定义video事件
+   */
   videoEvents?: CustomEvent[];
+
+  /**
+   * 自定义播放器的事件
+   */
   playerEvents?: CustomEvent[];
 }
 
+type OmitPlayerProps = 'customTimeLine' | 'onCanPlayerInit' | 'isLive' | 'reload' | 'type';
+
+export interface IFrontendPlayerProps extends Omit<ISinglePlayerProps, OmitPlayerProps> {
+  /**
+   * 前端录像开始时间
+   */
+  begin?: number;
+
+  /**
+   * 前端录像结束时间
+   */
+  end?: number;
+
+  /**
+   * 录像时间轴发生变化回调
+   */
+  onSeek(time: number): void;
+}
+
+export interface ISegmentPlayerProps extends Omit<ISinglePlayerProps, 'url' | 'customTimeLine' | 'onCanPlayerInit'> {
+  /**
+   * 云录像片段信息
+   */
+  segments?: ISegmentType[];
+
+  /**
+   * 云录像开始时间
+   */
+  begin?: number;
+}
+
 export const SinglePlayer: React.FunctionComponent<ISinglePlayerProps>;
+export const FrontendPlayer: React.FunctionComponent<IFrontendPlayerProps>;
+export const SegmentPlayer: React.FunctionComponent<ISegmentPlayerProps>;
 
 export interface EventName {
   RELOAD: 'reload'; //手动视频重载
@@ -68,8 +193,16 @@ export type ExportPlayerType = {
 };
 
 export interface ISegmentType {
+  /**
+   * 视频片段地址
+   */
   url?: string;
+  /**
+   * 视频片段长度 单位s（秒）
+   */
   duration: number;
 }
 
+export const ISegmentTypeDemo: React.FC<ISegmentType>;
+
 export type CustomEvent = [string, () => void];

package/es/Player/segment_player.d.ts

@@ -1,9 +1,5 @@
 /// <reference types="react" />
-import type { ISegmentType, ISinglePlayerProps } from './player';
-interface ISegmentPlayerProps extends Omit<ISinglePlayerProps, 'url' | 'customTimeLine' | 'onCanPlayerInit'> {
-    segments?: ISegmentType[];
-    begin?: number;
-}
+import type { ISegmentPlayerProps } from './player';
 /**
  * @desc 主组件，负责片段整体逻辑控制
  * @param param0

package/es/Player/single_player.js

@@ -55,11 +55,12 @@ var SinglePlayer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }),
       _useState2 = _slicedToArray(_useState, 2),
       state = _useState2[0],
-      setState = _useState2[1];
+      setState = _useState2[1]; // 视频格式判断，外部可以强制指定，也可以通过url自动判断
+
 
   var vType = useMemo(function () {
     return type || getVideoType(url);
-  }, [url]);
+  }, [url, type]);
   var domRef = useRef(null);
   var video = useMemo(function () {
     return state.container ? state.container.querySelector('video') : undefined;
@@ -81,7 +82,7 @@ var SinglePlayer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 
   var hasLink = useMemo(function () {
     return !!url || !!flvConfig.mediaDataSource.segments && vType === 'flv';
-  }, [url, flvConfig.mediaDataSource.segments]); // 存储容器
+  }, [url, flvConfig.mediaDataSource.segments, vType]); // 存储容器
 
   useEffect(function () {
     setState(function (old) {

package/es/Player/style/timeline.css

@@ -79,7 +79,7 @@
   border-radius: 3px;
   background-color: #000000;
   padding: 10px;
-  width: 162px;
+  width: max-content;
   line-height: 20px;
   margin-left: -81px;
 }

package/es/PlayerExt/demo.d.ts

@@ -0,0 +1,2 @@
+declare const App: () => JSX.Element;
+export default App;