@vtx/player 0.0.15 → 0.0.16

package/lib/live-player/demo/src/pages/carHistory/components/video/types/icons/index.d.ts

@@ -0,0 +1,54 @@
+import './index.less';
+import { MouseEventHandler } from 'react';
+import type { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+interface IconProps extends Partial<CustomIconComponentProps> {
+    onClick?: MouseEventHandler<HTMLSpanElement>;
+}
+interface ActiveIconProps extends IconProps {
+    active?: boolean;
+}
+/** 暂停Icon */
+export declare const PauseIcon: (props: IconProps) => JSX.Element;
+/** 播放Icon */
+export declare const PlayIcon: (props: IconProps) => JSX.Element;
+/** 截图Icon */
+export declare const CaptureIcon: (props: IconProps) => JSX.Element;
+/** 全屏Icon */
+export declare const FullScreenIcon: (props: IconProps) => JSX.Element;
+/** 退出全屏Icon */
+export declare const ExitFullScreenIcon: (props: IconProps) => JSX.Element;
+/** 音量低Icon */
+export declare const VolumeSmallIcon: (props: IconProps) => JSX.Element;
+/** 音量高Icon */
+export declare const VolumeLargeIcon: (props: IconProps) => JSX.Element;
+/** 静音Icon */
+export declare const VolumeMutedIcon: (props: IconProps) => JSX.Element;
+/** 设置Icon */
+export declare const SettingsIcon: (props: IconProps) => JSX.Element;
+/** 关闭全部Icon */
+export declare const CloseAllIcon: (props: IconProps) => JSX.Element;
+/** 展开Icon */
+export declare const ExpandIcon: (props: IconProps) => JSX.Element;
+/** 收缩Icon */
+export declare const FoldIcon: (props: IconProps) => JSX.Element;
+/** 停止对讲Icon */
+export declare const TalkDisableIcon: (props: ActiveIconProps) => JSX.Element;
+/** 对讲Icon */
+export declare const TalkIcon: (props: ActiveIconProps) => JSX.Element;
+/** 云台控制 */
+export declare const CloudControlIcon: (props: ActiveIconProps) => JSX.Element;
+/** 1x1网格Icon */
+export declare const Grid1x1Icon: (props: ActiveIconProps) => JSX.Element;
+/** 2x2网格Icon */
+export declare const Grid2x2Icon: (props: ActiveIconProps) => JSX.Element;
+/** 3x3网格Icon */
+export declare const Grid3x3Icon: (props: ActiveIconProps) => JSX.Element;
+/** 关闭Icon */
+export declare const CloseIcon: (props: IconProps) => JSX.Element;
+/** 视频播放Icon */
+export declare const VideoPlayIcon: (props: ActiveIconProps) => JSX.Element;
+/** 视频关闭Icon */
+export declare const VideoCloseIcon: (props: ActiveIconProps) => JSX.Element;
+/** 时间刻度Icon */
+export declare const TimePositionIcon: (props: IconProps) => JSX.Element;
+export {};

package/lib/live-player/demo/src/pages/carHistory/components/video/types/main.d.ts

@@ -0,0 +1,8 @@
+import 'antd/dist/antd.css';
+export { default as Player } from './components/player';
+export { default as LivePlayer } from './components/live-player';
+export { default as HistoryPlayer } from './components/history-player';
+export { default as LiveControl } from './components/live-control';
+export { default as HistoryControl } from './components/history-control';
+export { default as BillPlayer } from './components/bill-player';
+export { default as LiveChannelPlayer } from './components/live-channel-player';

package/lib/live-player/demo/src/pages/carHistory/components/video/types/utils/index.d.ts

@@ -0,0 +1,60 @@
+import moment from 'moment';
+import { GetHistoryUrlResp } from '@/api/types';
+import { UrlsTableItemType } from '@/components/history-control';
+import { VideoType } from '@/components/player';
+/** 时间格式枚举 */
+export declare enum TimeFormat {
+    default = "YYYY-MM-DDTHH:mm:ss",
+    params = "YYYY-MM-DD HH:mm:ss",
+    url = "YYYYMMDDTHHmmss"
+}
+/** 生成随机ID */
+export declare const guidGenerator: () => string;
+declare type PlayerParams = {
+    /** 视频流地址 */
+    url: string;
+    /** 视频流格式 */
+    type: VideoType;
+};
+/**
+ * 获取视频直播地址及格式
+ * @param url
+ * @returns
+ */
+export declare const getPlayerParams: (url: string, live: boolean, startTime?: moment.MomentInput, endTime?: moment.MomentInput) => PlayerParams;
+/**
+ * 获取历史回放表格数据
+ * @param data
+ * @returns
+ */
+export declare const getUrlTableData: (data: GetHistoryUrlResp) => UrlsTableItemType[];
+/**
+ * 秒数=>00:00:00
+ * @param total
+ * @returns
+ */
+export declare const secondsToTime: (total: number) => string;
+/**
+ * 获取海康时间参数
+ * @param time 时间
+ * @returns
+ */
+export declare const getHKTimeString: (time: moment.MomentInput) => string;
+/**
+ * 获取海康分段播放地址
+ * @param totalUrl 总播放地址
+ * @param startTime 开始时间
+ * @param endTime 结束时间
+ * @returns
+ */
+export declare const getHKListUrl: (totalUrl: string, startTime: moment.MomentInput, endTime: moment.MomentInput) => string;
+/**
+ *
+ * 获取flv格式分段播放地址
+ * @param totalUrl 总播放地址
+ * @param startTime 开始时间
+ * @param endTime 结束时间
+ * @returns
+ */
+export declare const getFlvListUrl: (totalUrl: string, startTime: moment.MomentInput, endTime: moment.MomentInput) => string;
+export {};

package/lib/live-player/demo/src/pages/carHistory/index.css

@@ -0,0 +1,13 @@
+.btnGroup {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  z-index: 11;
+}
+.process {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  right: 20px;
+  z-index: 11;
+}

package/lib/live-player/demo/src/pages/carHistory/index.less

@@ -0,0 +1,13 @@
+.btnGroup {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    z-index: 11;
+}
+.process {
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+    right: 20px;
+    z-index: 11;
+}

package/lib/live-player/demo/src/pages/test/components/map/VtxMap/AMap/AMap.css

@@ -0,0 +1,27 @@
+.A_Map_rangingTool {
+  width: 7px;
+  height: 7px;
+  background: #fff;
+  border: 2px solid #ff0000;
+  padding: 0px;
+  border-radius: 7px;
+}
+.amap-marker-label {
+  border: 0px !important;
+  background-color: transparent !important;
+}
+.amap-marker-content {
+  position: relative;
+  white-space: inherit !important;
+}
+.amap-info-content {
+  padding: 0 !important;
+}
+.vtx_gmap_html_pointCollection_a {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+}
+.vtx_gmap_html_pointCollection_a canvas {
+  z-index: 1;
+}

package/lib/live-player/demo/src/pages/test/components/map/VtxMap/AMap/AMap.less

@@ -0,0 +1,27 @@
+.A_Map_rangingTool{
+    width: 7px;
+    height: 7px;
+    background: #fff;
+    border: 2px solid #ff0000;
+    padding: 0px;
+    border-radius: 7px;
+}
+.amap-marker-label{
+    border: 0px !important; 
+    background-color: transparent !important; 
+}
+.amap-marker-content {
+    position: relative;
+    white-space: inherit !important;
+}
+.amap-info-content{
+    padding: 0 !important;
+}
+.vtx_gmap_html_pointCollection_a{
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    canvas{
+        z-index: 1;
+    }
+}

package/lib/live-player/demo/src/pages/test/components/map/VtxMap/BMap/Map.css

@@ -0,0 +1,26 @@
+.label-content {
+  /*margin-left: 0;
+    width: 100px;
+    line-height: 25px;
+    text-align: center;
+    position: relative;
+    left: -43px;
+    background-color: #fff;
+    opacity: 1;
+    border-radius: 5px;
+    color: #5DD0EE;
+    word-break: break-all;
+    white-space: normal;
+    padding: 2px 8px;*/
+  display: inline-block;
+  padding: 5px;
+  line-height: 22px;
+  text-align: center;
+  border-radius: 5px;
+  background-color: #fff;
+  opacity: 1;
+  color: #5DD0EE;
+}
+.BMapLabel:hover {
+  z-index: 100 !important;
+}

package/lib/live-player/demo/src/pages/test/components/map/VtxMap/BMap/Map.less

@@ -0,0 +1,28 @@
+.label-content{
+    /*margin-left: 0;
+    width: 100px;
+    line-height: 25px;
+    text-align: center;
+    position: relative;
+    left: -43px;
+    background-color: #fff;
+    opacity: 1;
+    border-radius: 5px;
+    color: #5DD0EE;
+    word-break: break-all;
+    white-space: normal;
+    padding: 2px 8px;*/
+    display: inline-block;
+    padding: 5px;
+    line-height: 22px;
+    text-align: center;
+    border-radius: 5px;
+    background-color: #fff;
+    opacity: 1;
+    color: #5DD0EE;
+}
+.BMapLabel{
+    &:hover{
+        z-index: 100 !important;
+    }
+}

package/lib/live-player/demo/src/pages/test/components/map/VtxMap/GMap/Map.css

@@ -0,0 +1,88 @@
+.map {
+  width: 100%;
+  height: 100%;
+  background-color: #f1f1f1;
+}
+.vtx_gmap_html_points,
+.vtx_gmap_html_pointCollection {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+}
+.esriSimpleSlider {
+  z-index: 10000000 !important;
+}
+.label-content {
+  /*margin-left: 0;
+    width: 100px;
+    line-height: 25px;
+    text-align: center;
+    position: relative;
+    left: -43px;
+    background-color: #fff;
+    opacity: 1;
+    border-radius: 5px;
+    color: #5DD0EE;
+    word-break: break-all;
+    white-space: normal;
+    padding: 2px 8px;*/
+  display: inline-block;
+  padding: 5px;
+  line-height: 22px;
+  text-align: center;
+  border-radius: 5px;
+  background-color: #fff;
+  opacity: 1;
+  color: #5DD0EE;
+}
+.vtx-g-rangingPoint {
+  width: 7px;
+  height: 7px;
+  background-color: #fff;
+  border: 2px solid #ff0000;
+  display: inline-block;
+  border-radius: 7px;
+}
+.vtx-g-rangingDistance {
+  position: relative;
+  top: -36px;
+  left: 15px;
+  height: 30px;
+  line-height: 28px;
+  background-color: #fff;
+  border: 1px solid #ff0000;
+  font-size: 12px;
+  word-break: keep-all;
+  padding: 0px 3px;
+}
+.vtx-g-rang-exit {
+  width: 9px;
+  height: 9px;
+  background-color: #fff;
+  border: 2px solid #ff0000;
+  color: #ff0000;
+  line-height: 7px;
+  text-align: center;
+  font-size: 12px;
+  cursor: pointer;
+}
+.vtx-g-rang-showRangTool {
+  line-height: 18px;
+  font-size: 12px;
+  border: 1px solid #ff0000;
+  word-break: keep-all;
+  background-color: #fff;
+  padding: 0px 5px;
+}
+.zoom_slider_show_scale {
+  padding: 1px 8px;
+  font-size: 12px;
+  text-align: center;
+}
+.zoom_slider_show_bottom {
+  width: 100%;
+  height: 3px;
+  border: 1px solid #000;
+  border-bottom: 3px solid #000;
+  border-top: 0px;
+}

package/lib/live-player/demo/src/pages/test/components/map/VtxMap/GMap/Map.less

@@ -0,0 +1,87 @@
+.map{
+    width: 100%;
+    height: 100%;
+    background-color: #f1f1f1;
+}
+.vtx_gmap_html_points,.vtx_gmap_html_pointCollection{
+    position: absolute;
+    top: 0px;
+    left: 0px;
+}
+.esriSimpleSlider{
+    z-index: 10000000 !important;
+}
+.label-content{
+    /*margin-left: 0;
+    width: 100px;
+    line-height: 25px;
+    text-align: center;
+    position: relative;
+    left: -43px;
+    background-color: #fff;
+    opacity: 1;
+    border-radius: 5px;
+    color: #5DD0EE;
+    word-break: break-all;
+    white-space: normal;
+    padding: 2px 8px;*/
+    display: inline-block;
+    padding: 5px;
+    line-height: 22px;
+    text-align: center;
+    border-radius: 5px;
+    background-color: #fff;
+    opacity: 1;
+    color: #5DD0EE;
+}
+.vtx-g-rangingPoint{
+    width: 7px;
+    height: 7px;
+    background-color: #fff;
+    border: 2px solid #ff0000;
+    display: inline-block;
+    border-radius: 7px;
+}
+.vtx-g-rangingDistance{
+    position: relative;
+    top: -36px;
+    left: 15px;
+    height: 30px;
+    line-height: 28px;
+    background-color: #fff;
+    border: 1px solid #ff0000;
+    font-size: 12px;
+    word-break: keep-all;
+    padding: 0px 3px;
+}
+.vtx-g-rang-exit{
+    width: 9px;
+    height: 9px;
+    background-color: #fff;
+    border: 2px solid #ff0000;
+    color: #ff0000;
+    line-height: 7px;
+    text-align: center;
+    font-size: 12px;
+    cursor: pointer;
+}
+.vtx-g-rang-showRangTool{
+    line-height: 18px;
+    font-size: 12px;
+    border: 1px solid #ff0000;
+    word-break: keep-all;
+    background-color: #fff;
+    padding: 0px 5px;
+}
+.zoom_slider_show_scale{
+    padding: 1px 8px;
+    font-size: 12px;
+    text-align: center;
+}
+.zoom_slider_show_bottom{
+    width: 100%;
+    height: 3px;
+    border: 1px solid #000;
+    border-bottom: 3px solid #000;
+    border-top: 0px;
+}

package/lib/live-player/demo/src/pages/test/components/map/VtxMap/Map.css

@@ -0,0 +1,7 @@
+.vtx-map {
+  width: 100%;
+  height: 100%;
+}
+.vtx-map label.BMapLabel:hover {
+  z-index: 1 !important;
+}

package/lib/live-player/demo/src/pages/test/components/map/VtxMap/Map.less

@@ -0,0 +1,9 @@
+.vtx-map{
+	width: 100%;
+	height: 100%;
+    label.BMapLabel{
+        &:hover{
+            z-index: 1 !important;
+        }
+    }
+}

package/lib/live-player/demo/src/pages/test/components/map/VtxMap/OMap/Map.css

@@ -0,0 +1,76 @@
+.label-content {
+  display: inline-block;
+  padding: 5px;
+  line-height: 22px;
+  text-align: center;
+  border-radius: 5px;
+  background-color: #fff;
+  opacity: 1;
+  color: #5DD0EE;
+  -webkit-transform: translate(-50%);
+          transform: translate(-50%);
+  -ms-transform: translate(-50%);
+}
+.noselect {
+  -webkit-touch-callout: none;
+  /* iOS Safari */
+  -webkit-user-select: none;
+  /* Chrome/Safari/Opera */
+  /* Konqueror */
+  -moz-user-select: none;
+  /* Firefox */
+  -ms-user-select: none;
+  /* Internet Explorer/Edge */
+  user-select: none;
+  /* Non-prefixed version, currently
+    not supported by any browser */
+}
+.vtx_gmap_html_pointCollection_a {
+  position: absolute;
+}
+.vtx_gmap_html_pointCollection_a canvas {
+  z-index: 111;
+}
+.vtx-g-rangingPoint {
+  width: 8px;
+  height: 8px;
+  background-color: #fff;
+  border: 2px solid #108ee9;
+  display: inline-block;
+  border-radius: 8px;
+  position: relative;
+  top: 5px;
+  left: 1px;
+}
+.vtx-g-rangingDistance {
+  position: relative;
+  top: -36px;
+  left: 15px;
+  height: 30px;
+  line-height: 28px;
+  background-color: #fff;
+  border: 1px solid #108ee9;
+  font-size: 12px;
+  word-break: keep-all;
+  padding: 0px 3px;
+  color: #108ee9;
+}
+.vtx-g-rang-exit {
+  width: 12px;
+  height: 12px;
+  background-color: #fff;
+  border: 2px solid #108ee9;
+  color: #108ee9;
+  line-height: 7px;
+  text-align: center;
+  font-size: 12px;
+  cursor: pointer;
+}
+.vtx-g-rang-showRangTool {
+  line-height: 18px;
+  font-size: 12px;
+  border: 1px solid #108ee9;
+  word-break: keep-all;
+  background-color: #fff;
+  padding: 0px 5px;
+}

package/lib/live-player/demo/src/pages/test/components/map/VtxMap/OMap/Map.less

@@ -0,0 +1,70 @@
+.label-content{
+    display: inline-block;
+    padding: 5px;
+    line-height: 22px;
+    text-align: center;
+    border-radius: 5px;
+    background-color: #fff;
+    opacity: 1;
+    color: #5DD0EE;
+    transform: translate(-50%);
+    -ms-transform: translate(-50%);
+}
+.noselect {
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Chrome/Safari/Opera */
+    -khtml-user-select: none; /* Konqueror */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    user-select: none; /* Non-prefixed version, currently
+    not supported by any browser */
+}
+.vtx_gmap_html_pointCollection_a{
+    position: absolute;
+    canvas{
+        z-index: 111;
+    }
+}
+.vtx-g-rangingPoint{
+    width: 8px;
+    height: 8px;
+    background-color: #fff;
+    border: 2px solid #108ee9;
+    display: inline-block;
+    border-radius: 8px;
+    position: relative;
+    top: 5px;
+    left: 1px;
+}
+.vtx-g-rangingDistance{
+    position: relative;
+    top: -36px;
+    left: 15px;
+    height: 30px;
+    line-height: 28px;
+    background-color: #fff;
+    border: 1px solid #108ee9;
+    font-size: 12px;
+    word-break: keep-all;
+    padding: 0px 3px;
+    color: #108ee9;
+}
+.vtx-g-rang-exit{
+    width: 12px;
+    height: 12px;
+    background-color: #fff;
+    border: 2px solid #108ee9;
+    color: #108ee9;
+    line-height: 7px;
+    text-align: center;
+    font-size: 12px;
+    cursor: pointer;
+}
+.vtx-g-rang-showRangTool{
+    line-height: 18px;
+    font-size: 12px;
+    border: 1px solid #108ee9;
+    word-break: keep-all;
+    background-color: #fff;
+    padding: 0px 5px;
+}