@cloud-app-dev/vidc 2.2.0-alpha.5 → 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/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

@@ -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/Player/player.d.ts

@@ -10,43 +10,153 @@ 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;
 }
 
@@ -83,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/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/utils.d.ts

@@ -21,4 +21,5 @@ export declare function getTargetElement<T extends TargetType>(target: BasicTarg
 declare const getScrollTop: (el: Document | Element) => number;
 declare const getScrollHeight: (el: Document | Element) => number;
 declare const getClientHeight: (el: Document | Element) => number;
-export { getScrollTop, getScrollHeight, getClientHeight };
+declare const getEleScrollHeight: (el: Document | Element) => number;
+export { getScrollTop, getScrollHeight, getClientHeight, getEleScrollHeight };

package/es/utils.js

@@ -123,4 +123,20 @@ var getClientHeight = function getClientHeight(el) {
   return el.clientHeight || Math.max(document.documentElement.clientHeight, document.body.clientHeight);
 };
 
-export { getScrollTop, getScrollHeight, getClientHeight };
+var getEleScrollHeight = function getEleScrollHeight(el) {
+  if (el === document || el === document.body) {
+    return Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop);
+  }
+
+  var top = 0;
+  var dom = el;
+
+  while (dom) {
+    top += dom.scrollTop;
+    dom = dom.parentElement;
+  }
+
+  return top;
+};
+
+export { getScrollTop, getScrollHeight, getClientHeight, getEleScrollHeight };

package/package.json

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