@vtx/player 0.0.1 → 0.0.2

package/lib/types/api/fetch.d.ts

@@ -0,0 +1,12 @@
+interface VMFetchProps {
+    /** 请求体 */
+    data?: any;
+    /** 请求头 */
+    headersEx?: object;
+}
+/**
+ * 数据fetch总入口
+ * @param props
+ */
+declare const Fetch: <T>(url: string, type?: 'GET' | 'POST', params?: VMFetchProps) => Promise<T>;
+export default Fetch;

package/lib/types/api/index.d.ts

@@ -0,0 +1,16 @@
+import * as Types from './types';
+/** 获取预览地址 */
+export declare const getPreviewUrl: (data: Types.GetPreviewUrlParams) => Promise<Types.GetPreviewUrlResp>;
+/** 获取历史地址 */
+export declare const getHistoryUrl: (data: Types.GetHistoryUrlParams) => Promise<Types.GetHistoryUrlResp>;
+/** 获取视频信息 */
+export declare const loadVideoInfo: (data: Types.LoadVideoInfoParams) => Promise<Types.LoadVideoInfoResp>;
+/** 云台控制 */
+export declare const cloudControl: (data: Types.CloudControlParams) => Promise<unknown>;
+/**
+ * 获取通道信息
+ * @param channelId 通道ID
+ * @param tenantId 租户ID
+ * @returns
+ */
+export declare const loadVideoChannel: (channelId: string, tenantId: string) => Promise<Types.LoadVideoChannelResp>;

package/{src/api/types.ts → lib/types/api/types.d.ts}

@@ -7,11 +7,11 @@ export interface GetPreviewUrlResp {
     /** 设备名称 */
     deviceName: string;
     /** 设备ID */
-    deviceId:string;
+    deviceId: string;
     /** 通道名称 */
     channelName: string;
     /** 通道编号 */
-    channelNum:string;
+    channelNum: string;
     /** 播放器 */
     player: string | null;
     /** 是否可以对讲，1为可以，0为不可以 */
@@ -19,7 +19,6 @@ export interface GetPreviewUrlResp {
     /** 云台类型，1全功能，2不能转动，3不能变焦，4无功能 */
     ptzType?: 1 | 2 | 3 | 4;
 }
-
 /** 获取预览地址Params */
 export interface GetPreviewUrlParams {
     /** 租户ID */
@@ -31,7 +30,6 @@ export interface GetPreviewUrlParams {
     /** 协议 */
     protocol?: string;
 }
-
 /** 历史地址子项 */
 export interface HistoryUrlItem {
     /** 开始时间 */
@@ -43,7 +41,6 @@ export interface HistoryUrlItem {
     /** 大小 */
     size: number;
 }
-
 /** 获取历史地址Resp */
 export interface GetHistoryUrlResp {
     /** 设备名称 */
@@ -59,7 +56,6 @@ export interface GetHistoryUrlResp {
     /** 地址 */
     url: string;
 }
-
 /** 获取历史地址Params */
 export interface GetHistoryUrlParams {
     /** 租户ID */
@@ -75,7 +71,6 @@ export interface GetHistoryUrlParams {
     /** 结束时间，格式：2022-06-01 23:59:59 */
     endTime: string;
 }
-
 /** 获取视频信息Params */
 export interface LoadVideoInfoParams {
     /** 租户ID */
@@ -83,7 +78,6 @@ export interface LoadVideoInfoParams {
     /** 业务ID */
     billId: string;
 }
-
 export interface LoadVideoInfo {
     /** 频道号 */
     channelNum: string;
@@ -93,10 +87,9 @@ export interface LoadVideoInfo {
     channelName: string;
 }
 /** 获取视频信息Resp */
-export type LoadVideoInfoResp = LoadVideoInfo[];
-
+export declare type LoadVideoInfoResp = LoadVideoInfo[];
 /** 云台控制Params */
-export type CloudControlParams = {
+export declare type CloudControlParams = {
     /** 租户ID */
     tenantId: string;
     /** 频道号 */
@@ -108,32 +101,15 @@ export type CloudControlParams = {
     /** 命令 */
     command: CloudControlCommandType;
 };
-
 /** 云台控制命令 */
-export type CloudControlCommandType =
-    | 'LEFT'
-    | 'RIGHT'
-    | 'UP'
-    | 'DOWN'
-    | 'LEFT_UP'
-    | 'LEFT_DOWN'
-    | 'RIGHT_UP'
-    | 'RIGHT_DOWN'
-    | 'ZOOM_IN'
-    | 'ZOOM_OUT'
-    | 'FOCUS_NEAR'
-    | 'FOCUS_FAR'
-    | 'IRIS_ENLARGE'
-    | 'IRIS_REDUCE';
-
-export type LoadVideoChannelParams = {
+export declare type CloudControlCommandType = 'LEFT' | 'RIGHT' | 'UP' | 'DOWN' | 'LEFT_UP' | 'LEFT_DOWN' | 'RIGHT_UP' | 'RIGHT_DOWN' | 'ZOOM_IN' | 'ZOOM_OUT' | 'FOCUS_NEAR' | 'FOCUS_FAR' | 'IRIS_ENLARGE' | 'IRIS_REDUCE';
+export declare type LoadVideoChannelParams = {
     /** 租户ID */
     tenantId: string;
     /** 通道ID */
     videoChannelId: string;
 };
-
-export type LoadVideoChannelResp = {
+export declare type LoadVideoChannelResp = {
     /** 通道号 */
     channelNum: string;
     /** 设备ID */

package/lib/types/components/bill-player/index.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import './index.less';
+import { LoadVideoInfoParams } from '@/api/types';
+interface BillPlayerProps {
+    /** 参数 */
+    params: LoadVideoInfoParams;
+    /** 宽度 */
+    width?: string | number;
+    /** 高度 */
+    height?: string | number;
+    /** 是否显示实时视频，默认为true */
+    live?: boolean;
+    /** 是否显示历史视频，默认为true */
+    history?: boolean;
+    /** 实时默认播放 */
+    defaultLivePlay?: boolean;
+    /** 历史默认播放 */
+    defaultHistoryPlay?: boolean;
+}
+export declare const BillPlayer: (props: BillPlayerProps) => JSX.Element;
+export default BillPlayer;

package/lib/types/components/controls/index.d.ts

@@ -0,0 +1,52 @@
+/// <reference types="react" />
+import './index.less';
+import Player from '../player';
+import { CloudControlParams } from '@/api/types';
+interface VolumeControlProps {
+    container: HTMLDivElement | null;
+    player?: Player;
+    defaultValue?: number;
+}
+/** 音量控制 */
+export declare const VolumeControl: (props: VolumeControlProps) => JSX.Element;
+declare type SpeedValue = 0.5 | 1 | 2;
+interface SpeedControlProps {
+    container: HTMLDivElement | null;
+    player?: Player;
+    defaultValue?: SpeedValue;
+}
+/** 速度控制 */
+export declare const SpeedControl: (props: SpeedControlProps) => JSX.Element;
+interface ErrorStateProps {
+    /** 重试回调 */
+    onClick?: () => void;
+}
+export declare const ErrorState: (props: ErrorStateProps) => JSX.Element;
+export declare const LoadingState: () => JSX.Element;
+interface PlayerHeaderProps {
+    /** 名称 */
+    name: string;
+    /** 关闭回调 */
+    onClose: () => void;
+}
+/** 播放器头部 */
+export declare const PlayerHeader: (props: PlayerHeaderProps) => JSX.Element;
+interface TalkControlProps {
+    /** 播放器 */
+    player?: Player;
+    /** 对讲url */
+    url: string;
+}
+/**
+ * 对讲控制器
+ * @returns
+ */
+export declare const TalkControl: (props: TalkControlProps) => JSX.Element;
+export declare type CloudControlType = 'all' | 'onlyFocus' | 'onlyRotate' | 'none';
+export declare type CloudControlPanelProps = {
+    query: Omit<CloudControlParams, 'action' | 'command'>;
+    type: CloudControlType;
+};
+/** 云台控制面板 */
+export declare const CloudControlPanel: (props: CloudControlPanelProps) => JSX.Element;
+export {};

package/lib/types/components/history-control/index.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import './index.less';
+import { GetHistoryUrlParams } from '@/api/types';
+export declare type HistoryControlHandle = {
+    load: (channel: GetHistoryUrlParams) => void;
+};
+interface HistoryControlProps {
+    /** 宽度 */
+    width?: number;
+    /** 高度 */
+    height?: number;
+    /** 展开/收缩按钮回调 */
+    onExpandChange?: (expand: boolean) => void;
+    /** 播放器进度回调，time:YYYY-MM-DD HH:mm:ss */
+    onTimeChange?: (time: string) => void;
+}
+/**
+ * 历史视频控制器
+ */
+export declare const HistoryControl: import("react").ForwardRefExoticComponent<HistoryControlProps & import("react").RefAttributes<HistoryControlHandle>>;
+export declare type UrlsTableItemType = {
+    /** 序号 */
+    index: number;
+    /** 设备名称 */
+    deviceName: string;
+    /** 通道名称 */
+    channelName: string;
+    /** 开始时间 */
+    beginTime: string;
+    /** 结束时间 */
+    endTime: string;
+    /** 视频时长 */
+    duration: string;
+    /** 视频大小 */
+    size: string;
+    /** 地址 */
+    url: string;
+};
+export default HistoryControl;

package/lib/types/components/history-player/index.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import './index.less';
+import { VideoType } from '@/components/player';
+export declare type HistoryPlayerHandle = {
+    /**
+     * 跳转，目前仅支持海康视频跳转
+     */
+    seekTo: (time: string) => Promise<void>;
+};
+interface VtxPlayerProps {
+    /** 视频流地址 */
+    url: string;
+    /** 视频流格式，如果为空则根据url自行判断 */
+    type?: VideoType;
+    /** 开始时间，格式为：YYYY-MM-DD HH:mm:ss */
+    startTime: string;
+    /** 结束时间，格式为：YYYY-MM-DD HH:mm:ss  */
+    endTime: string;
+    /** 宽度 */
+    width?: number;
+    /** 高度 */
+    height?: number;
+    /** 截图文件名 */
+    captureName?: string;
+    /** 控制条bottom */
+    controlBottom?: number;
+    /** 播放器进度回调，time:YYYY-MM-DD HH:mm:ss */
+    onTimeChange?: (time: string) => void;
+}
+export declare const HistoryPlayer: import("react").ForwardRefExoticComponent<VtxPlayerProps & import("react").RefAttributes<HistoryPlayerHandle>>;
+export default HistoryPlayer;

package/lib/types/components/live-channel-player/index.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+interface LiveChannelPlayerProps {
+    /** 通道ID */
+    channelId: string;
+    /** 租户ID */
+    tenantId: string;
+    /** 宽度 */
+    width?: number;
+    /** 高度 */
+    height?: number;
+}
+/**
+ * 基于通道ID的实时播放器
+ * @param props
+ * @returns
+ */
+export declare const LiveChannelPlayer: (props: LiveChannelPlayerProps) => JSX.Element | undefined;
+export default LiveChannelPlayer;

package/lib/types/components/live-control/index.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import './index.less';
+export declare type LiveControlHandle = {
+    /** 加载视频 */
+    load: (channel: ChannelType) => void;
+    /** 卸载视频，参数为通道编号 */
+    unLoad: (channelNum: string) => void;
+    /** 一次加载多个视频，适用于初始化 */
+    multiLoad: (channels: ChannelType[]) => void;
+};
+interface LiveControlProps {
+    /** 展开/收缩按钮回调 */
+    onExpandChange?: (expand: boolean) => void;
+    /** 视频关闭回调，参数为通道编号数组 */
+    onChannelChange?: (channelSNum: string[]) => void;
+    /** 宽度 */
+    width?: number | string;
+    /** 高度 */
+    height?: number | string;
+}
+export declare type ChannelType = {
+    /** 通道号 */
+    channelNum: string;
+    /** 设备ID */
+    deviceId?: string;
+    /** 租户ID */
+    tenantId?: string;
+    /** 协议 */
+    protocol?: string;
+};
+/**
+ * 实时分屏组件
+ */
+declare const LiveControl: import("react").ForwardRefExoticComponent<LiveControlProps & import("react").RefAttributes<LiveControlHandle>>;
+export default LiveControl;

package/lib/types/components/live-player/index.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import './index.less';
+import { CloudControlPanelProps } from '@/components/controls';
+import { VideoType } from '@/components/player';
+interface VtxPlayerProps {
+    /** 视频流地址 */
+    url: string;
+    /** 宽度 */
+    width?: number;
+    /** 高度 */
+    height?: number;
+    /** 视频流格式，如果为空则根据url自行判断 */
+    type?: VideoType;
+    /** 截图文件名 */
+    captureName?: string;
+    /** 对讲地址 */
+    talkUrl?: string;
+    /** 云台控制 */
+    cloudParams?: CloudControlPanelProps;
+}
+export declare const LivePlayer: (props: VtxPlayerProps) => JSX.Element;
+export default LivePlayer;

package/lib/types/components/player/index.d.ts

@@ -0,0 +1,84 @@
+import moment from 'moment';
+/** 视频流格式 */
+export declare type VideoType = 'flv' | 'hls' | 'hk_ws';
+interface ConstructorParams {
+    url: string;
+    /** 渲染容器 */
+    container: HTMLDivElement;
+    /** 是否直播，flv.js需要 */
+    live?: boolean;
+    /** 视频流格式 */
+    type?: VideoType;
+    /** 开始时间，历史回放需要 */
+    startTime?: moment.MomentInput;
+    /** 结束时间，历史回放需要 */
+    endTime?: moment.MomentInput;
+}
+/**
+ * 视频播放核心类
+ */
+declare class Player {
+    /** 视频地址 */
+    url: string;
+    /** 视频流格式 */
+    type: VideoType;
+    private player;
+    private video;
+    /** 开始时间，历史回放需要 */
+    private startTime?;
+    /** 结束时间，历史回放需要 */
+    private endTime?;
+    /** 跳转时间，用于处理进度条位置 */
+    private seekTime?;
+    /** 之前的视频播放速度，用于处理海康音量控制 */
+    private preSpeed;
+    constructor(params: ConstructorParams);
+    /** 播放 */
+    play(): Promise<void>;
+    /** 回放 */
+    playBack(): Promise<void>;
+    /** 销毁 */
+    destroy(): void;
+    /** 截图 */
+    capture(captureName?: string, time?: boolean): void;
+    /** 尺寸重置 */
+    resize(): void;
+    /**
+     * 设置音量
+     * @param value
+     */
+    setVolume(value: number): void;
+    /**
+     * 设置播放速度
+     * @param speed
+     */
+    setSpeed(speed: 0.5 | 1 | 2): void;
+    /**
+     * 时间更新事件
+     * @param callback 回调函数
+     */
+    onTimeUpdate(callback: (currentTime: number) => void): void;
+    /** 跳转到 */
+    seekTo(time: number): Promise<void>;
+    /**
+     * 暂停播放
+     * @param callback 回调函数
+     */
+    pause(callback?: () => void): void;
+    /**
+     * 恢复播放
+     * @param callback 回调函数
+     */
+    resume(callback?: () => void): void;
+    /**
+     * 开始对讲
+     * @param url 对讲地址
+     */
+    startTalk(url: string): Promise<void>;
+    /**
+     * 开始对讲
+     * @param state 状态
+     */
+    stopTalk(): Promise<void>;
+}
+export default Player;

package/lib/types/context/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const PlayerThemeContext: React.Context<Context>;
+interface Context {
+    /** 主题 */
+    theme: 'light' | 'dark';
+}
+declare const PlayerThemeProvider: React.Provider<Context>;
+export default PlayerThemeProvider;

package/lib/types/hooks/useSettings.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 获取配置信息
+ * @returns
+ */
+declare const useSettings: () => {
+    theme: "light" | "dark";
+    isDark: boolean;
+};
+export default useSettings;

package/lib/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/{src/main.ts → lib/types/main.d.ts}

@@ -1,5 +1,4 @@
 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';

package/lib/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/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@vtx/player",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": false,
   "description": "视频业务组件",
-  "main": "./dist/index.umd.js",
-  "module": "./dist/index.es.js",
-  "types": "./dist/index.d.ts",
-  "file": "dist",
+  "main": "./lib/index.umd.js",
+  "module": "./lib/index.es.js",
+  "types": "./lib/index.d.ts",
+  "files": [
+    "lib"
+  ],
   "scripts": {
     "start": "start-storybook -p 6006",
     "build": "npm run clean && rollup --config",

package/.eslintignore

@@ -1,11 +0,0 @@
-dist
-node_modules
-.cache
-*.lock
-.gitignore
-.npmignore
-.prettierignore
-*.snap
-.gitlab-ci.yml
-storybook-static
-*.js

package/.eslintrc.js

@@ -1,31 +0,0 @@
-module.exports = {
-  parser: '@typescript-eslint/parser',
-  extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:@typescript-eslint/recommended',
-    'prettier',
-    'plugin:storybook/recommended',
-  ],
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    ecmaFeatures: {
-      jsx: true,
-    },
-  },
-  plugins: ['react', 'react-hooks', '@typescript-eslint', 'prettier'],
-  rules: {
-    'react/react-in-jsx-scope': 'off',
-    'react/prop-types': 'off',
-  },
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  settings: {
-    'import/resolver': {
-      typescript: {},
-    },
-  },
-};

package/.prettierignore

@@ -1,10 +0,0 @@
-dist
-node_modules
-.cache
-*.lock
-.gitignore
-.npmignore
-.prettierignore
-*.snap
-.gitlab-ci.yml
-storybook-static