@vtx/player 0.0.3 → 0.0.6

package/public/playctrl3/Decoder.worker.js

@@ -0,0 +1 @@
+"use strict";var Module={};var initializedJS=false;function threadPrintErr(){var text=Array.prototype.slice.call(arguments).join(" ");console.error(text)}function threadAlert(){var text=Array.prototype.slice.call(arguments).join(" ");postMessage({cmd:"alert",text:text,threadId:Module["_pthread_self"]()})}var err=threadPrintErr;self.alert=threadAlert;Module["instantiateWasm"]=function(info,receiveInstance){var instance=new WebAssembly.Instance(Module["wasmModule"],info);receiveInstance(instance);Module["wasmModule"]=null;return instance.exports};self.onmessage=function(e){try{if(e.data.cmd==="load"){Module["wasmModule"]=e.data.wasmModule;Module["wasmMemory"]=e.data.wasmMemory;Module["buffer"]=Module["wasmMemory"].buffer;Module["ENVIRONMENT_IS_PTHREAD"]=true;if(typeof e.data.urlOrBlob==="string"){importScripts(e.data.urlOrBlob)}else{var objectUrl=URL.createObjectURL(e.data.urlOrBlob);importScripts(objectUrl);URL.revokeObjectURL(objectUrl)}JSPlayerModule(Module).then(function(instance){Module=instance})}else if(e.data.cmd==="run"){Module["__performance_now_clock_drift"]=performance.now()-e.data.time;Module["__emscripten_thread_init"](e.data.threadInfoStruct,0,0);var max=e.data.stackBase;var top=e.data.stackBase+e.data.stackSize;Module["establishStackSpace"](top,max);Module["PThread"].receiveObjectTransfer(e.data);Module["PThread"].threadInit();if(!initializedJS){Module["___embind_register_native_and_builtin_types"]();initializedJS=true}try{var result=Module["invokeEntryPoint"](e.data.start_routine,e.data.arg);if(Module["keepRuntimeAlive"]()){Module["PThread"].setExitStatus(result)}else{Module["__emscripten_thread_exit"](result)}}catch(ex){if(ex!="unwind"){if(ex instanceof Module["ExitStatus"]){if(Module["keepRuntimeAlive"]()){}else{Module["__emscripten_thread_exit"](ex.status)}}else{Module["__emscripten_thread_exit"](-2);throw ex}}}}else if(e.data.cmd==="cancel"){if(Module["_pthread_self"]()){Module["__emscripten_thread_exit"](-1)}postMessage({"cmd":"cancelDone"})}else if(e.data.target==="setimmediate"){}else if(e.data.cmd==="processThreadQueue"){if(Module["_pthread_self"]()){Module["_emscripten_current_thread_process_queued_calls"]()}}else{err("worker.js received unknown command "+e.data.cmd);err(e.data)}}catch(ex){err("worker.js onmessage() captured an uncaught exception: "+ex);if(ex&&ex.stack)err(ex.stack);throw ex}};

package/rollup.config.js

@@ -0,0 +1,52 @@
+import babel from '@rollup/plugin-babel';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
+import url from '@rollup/plugin-url';
+import dts from 'rollup-plugin-dts';
+import external from 'rollup-plugin-peer-deps-external';
+import postcss from 'rollup-plugin-postcss';
+import { terser } from 'rollup-plugin-terser';
+
+const packageJson = require('./package.json');
+
+export default [
+  {
+    input: 'src/main.ts',
+    output: [
+      // 构建cjs格式包
+      {
+        file: packageJson.main,
+        format: 'cjs',
+        sourcemap: true,
+      },
+      // 构建esm格式包
+      {
+        file: packageJson.module,
+        format: 'esm',
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      external(), // 排除peerDependencies中的包不被压缩到输出文件中
+      resolve(), // 添加rollup引用第三方包支持
+      babel({
+        exclude: 'node_modules/**',
+        presets: [['@babel/preset-env']],
+        babelHelpers: 'bundled',
+      }),
+      commonjs(), // 添加commonJs支持
+      postcss(), // 处理css文件
+      url(), // 处理图片文件
+      typescript({ tsconfig: './tsconfig.json' }), //处理 typescript文件
+      terser(), // 文件压缩
+    ],
+  },
+  {
+    // 打包d.ts文件
+    input: 'dist/types/main.d.ts',
+    output: [{ file: packageJson.types, format: 'esm' }],
+    external: [/\.less$/],
+    plugins: [dts()],
+  },
+];

package/src/api/fetch.ts

@@ -0,0 +1,55 @@
+import { getUrlParam } from '@/utils';
+interface VMFetchProps {
+    /** 请求体 */
+    data?: any;
+    /** 请求头 */
+    headersEx?: object;
+}
+
+/**
+ * 数据fetch总入口
+ * @param props
+ */
+const Fetch = async <T>(
+    url: string,
+    type: 'GET' | 'POST' = 'GET',
+    params?: VMFetchProps
+): Promise<T> => {
+    const { data, headersEx } = params || {};
+    const token = getUrlParam('token');
+    try {
+        let headers: HeadersInit = { 
+            'content-type': 'application/json',
+            Authorization: token ? `Bearer ${token}` : '',
+         };
+        if (headersEx) {
+            headers = { ...headers, ...headersEx };
+        }
+        if (type === 'GET' && data) {
+            const queryString = Object.keys(data)
+                .map((key) => key + '=' + data[key])
+                .join('&');
+
+            url += '?' + queryString;
+        }
+        const resp = await fetch(encodeURI(url), {
+            body: type === 'POST' ? JSON.stringify(data) : undefined,
+            headers,
+            method: type,
+        });
+
+        const json: Result<T> = await resp.json();
+        if (json.result === 0) return json.data;
+        else {
+            const error = {
+                exception: json.exception,
+                msg: json.msg,
+            };
+            throw error;
+        }
+    } catch (e) {
+        return Promise.reject(e);
+    }
+};
+
+export default Fetch;

package/src/api/index.ts

@@ -0,0 +1,43 @@
+import Fetch from './fetch';
+import * as Types from './types';
+
+/** 获取预览地址 */
+export const getPreviewUrl = (data: Types.GetPreviewUrlParams) =>
+    Fetch<Types.GetPreviewUrlResp>('/cloud/vis/base/np/artemis/previewUrl.smvc', 'GET', {
+        data,
+    });
+
+/** 获取历史地址 */
+export const getHistoryUrl = (data: Types.GetHistoryUrlParams) =>
+    Fetch<Types.GetHistoryUrlResp>('/cloud/vis/base/np/artemis/playbackUrl.smvc', 'GET', {
+        data,
+    });
+
+/** 获取视频信息 */
+export const loadVideoInfo = (data: Types.LoadVideoInfoParams) =>
+    Fetch<Types.LoadVideoInfoResp>('/cloud/vis/base/np/videoCommon/loadVideoInfos.smvc', 'GET', {
+        data,
+    });
+
+/** 云台控制 */
+export const cloudControl = (data: Types.CloudControlParams) =>
+    Fetch('/cloud/vis/base/np/artemis/controlling.smvc', 'GET', {
+        data,
+    });
+
+/**
+ * 获取通道信息
+ * @param channelId 通道ID
+ * @returns 
+ */
+export const loadVideoChannel = async (channelId: string) => {
+    const result = await Fetch<string>(
+        '/cloud/vis/base/np/videoDevice/loadTheVideoChannel.smvc',
+        'GET',
+        {
+            data: { parameters: JSON.stringify({ videoChannelId: channelId }) },
+        }
+    );
+    const parseResult = JSON.parse(result) as Types.LoadVideoChannelResp[];
+    return parseResult[0];
+};

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

@@ -1,117 +1,131 @@
-/** 获取预览地址Resp */
-export interface GetPreviewUrlResp {
-    /** 对讲地址 */
-    apiUrl: string;
-    /** 地址 */
-    url: string;
-    /** 设备名称 */
-    deviceName: string;
-    /** 设备ID */
-    deviceId: string;
-    /** 通道名称 */
-    channelName: string;
-    /** 通道编号 */
-    channelNum: string;
-    /** 播放器 */
-    player: string | null;
-    /** 是否可以对讲，1为可以，0为不可以 */
-    beenHasVideo?: 1 | 0;
-    /** 云台类型，1全功能，2不能转动，3不能变焦，4无功能 */
-    ptzType?: 1 | 2 | 3 | 4;
-}
-/** 获取预览地址Params */
-export interface GetPreviewUrlParams {
-    /** 租户ID */
-    tenantId: string;
-    /** 频道号 */
-    channelNum: string;
-    /** 设备ID */
-    deviceId: string;
-    /** 协议 */
-    protocol?: string;
-}
-/** 历史地址子项 */
-export interface HistoryUrlItem {
-    /** 开始时间 */
-    beginTime: string;
-    /** 结束时间 */
-    endTime: string;
-    /** 回放地址 */
-    playbackUrl: string | null;
-    /** 大小 */
-    size: number;
-}
-/** 获取历史地址Resp */
-export interface GetHistoryUrlResp {
-    /** 设备名称 */
-    deviceName: string;
-    /** 通道名称 */
-    channelName: string;
-    /** url列表 */
-    list: HistoryUrlItem[];
-    /** 播放器 */
-    player: string | null;
-    /** 全时播放地址 */
-    totalTimeUrl: string;
-    /** 地址 */
-    url: string;
-}
-/** 获取历史地址Params */
-export interface GetHistoryUrlParams {
-    /** 租户ID */
-    tenantId: string;
-    /** 频道号 */
-    channelNum: string;
-    /** 设备ID */
-    deviceId: string;
-    /** 协议 */
-    protocol?: string;
-    /** 开始时间，格式：2022-06-01 00:00:00 */
-    beginTime: string;
-    /** 结束时间，格式：2022-06-01 23:59:59 */
-    endTime: string;
-}
-/** 获取视频信息Params */
-export interface LoadVideoInfoParams {
-    /** 租户ID */
-    tenantId: string;
-    /** 业务ID */
-    billId: string;
-}
-export interface LoadVideoInfo {
-    /** 频道号 */
-    channelNum: string;
-    /** 设备ID */
-    videoDeviceId: string;
-    /** 通道名称 */
-    channelName: string;
-}
-/** 获取视频信息Resp */
-export declare type LoadVideoInfoResp = LoadVideoInfo[];
-/** 云台控制Params */
-export declare type CloudControlParams = {
-    /** 租户ID */
-    tenantId: string;
-    /** 频道号 */
-    channelNum: string;
-    /** 设备ID */
-    deviceId: string;
-    /** 操作：1为按下，0为放开 */
-    action: 1 | 0;
-    /** 命令 */
-    command: CloudControlCommandType;
-};
-/** 云台控制命令 */
-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 declare type LoadVideoChannelResp = {
-    /** 通道号 */
-    channelNum: string;
-    /** 设备ID */
-    videoDeviceId: string;
-};
+/** 获取预览地址Resp */
+export interface GetPreviewUrlResp {
+    /** 对讲地址 */
+    apiUrl: string;
+    /** 地址 */
+    url: string;
+    /** 设备名称 */
+    deviceName: string;
+    /** 设备ID */
+    deviceId: string;
+    /** 通道名称 */
+    channelName: string;
+    /** 通道编号 */
+    channelNum: string;
+    /** 播放器 */
+    player: string | null;
+    /** 是否可以对讲，1为可以，0为不可以 */
+    beenHasVideo?: 1 | 0;
+    /** 云台类型，1全功能，2不能转动，3不能变焦，4无功能 */
+    ptzType?: 1 | 2 | 3 | 4;
+}
+
+/** 获取预览地址Params */
+export interface GetPreviewUrlParams {
+    /** 频道号 */
+    channelNum: string;
+    /** 设备ID */
+    deviceId: string;
+    /** 协议 */
+    protocol?: string;
+}
+
+/** 历史地址子项 */
+export interface HistoryUrlItem {
+    /** 开始时间 */
+    beginTime: string;
+    /** 结束时间 */
+    endTime: string;
+    /** 回放地址 */
+    playbackUrl: string | null;
+    /** 大小 */
+    size: number;
+}
+
+/** 获取历史地址Resp */
+export interface GetHistoryUrlResp {
+    /** 设备名称 */
+    deviceName: string;
+    /** 通道名称 */
+    channelName: string;
+    /** url列表 */
+    list: HistoryUrlItem[];
+    /** 播放器 */
+    player: string | null;
+    /** 全时播放地址 */
+    totalTimeUrl: string;
+    /** 地址 */
+    url: string;
+}
+
+/** 获取历史地址Params */
+export interface GetHistoryUrlParams {
+    /** 频道号 */
+    channelNum: string;
+    /** 设备ID */
+    deviceId: string;
+    /** 协议 */
+    protocol?: string;
+    /** 开始时间，格式：2022-06-01 00:00:00 */
+    beginTime: string;
+    /** 结束时间，格式：2022-06-01 23:59:59 */
+    endTime: string;
+}
+
+/** 获取视频信息Params */
+export interface LoadVideoInfoParams {
+    /** 业务ID */
+    billId: string;
+}
+
+export interface LoadVideoInfo {
+    /** 频道号 */
+    channelNum: string;
+    /** 设备ID */
+    videoDeviceId: string;
+    /** 通道名称 */
+    channelName: string;
+}
+/** 获取视频信息Resp */
+export type LoadVideoInfoResp = LoadVideoInfo[];
+
+/** 云台控制Params */
+export type CloudControlParams = {
+    /** 频道号 */
+    channelNum: string;
+    /** 设备ID */
+    deviceId: string;
+    /** 操作：1为按下，0为放开 */
+    action: 1 | 0;
+    /** 命令 */
+    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 = {
+    /** 通道ID */
+    videoChannelId: string;
+};
+
+export type LoadVideoChannelResp = {
+    /** 通道号 */
+    channelNum: string;
+    /** 设备ID */
+    videoDeviceId: string;
+};

package/src/components/bill-player/index.less

@@ -0,0 +1,58 @@
+.vtx-bill-player {
+    .bill-tabs {
+        height: 100%;
+
+        .ant-tabs-content-holder {
+            height: 100%;
+
+            .ant-tabs-content {
+                height: 100%;
+            }
+        }
+    }
+
+    .player-panel {
+        display: flex;
+        height: 100%;
+
+        > .player-container {
+            flex-grow: 1;
+            width: 0;
+        }
+
+        .control-container {
+            width: 376px;
+            height: fit-content;
+            margin-left: 16px;
+            border: 1px solid #e8e8e8;
+            border-radius: 2px;
+
+            .header {
+                padding: 12px 24px;
+                font-weight: bold;
+                border-bottom: 1px solid #e8e8e8;
+            }
+
+            .list {
+                display: flex;
+                flex-direction: column;
+                padding: 12px 24px;
+
+                .ant-checkbox-wrapper {
+                    margin-bottom: 12px;
+                    margin-left: 0;
+                }
+            }
+
+            .form {
+                padding: 12px 24px;
+
+                .time-radio-group {
+                    .ant-radio-wrapper {
+                        margin-right: 4px;
+                    }
+                }
+            }
+        }
+    }
+}

package/src/components/bill-player/index.stories.mdx

@@ -0,0 +1,24 @@
+import BillPlayer from '.';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+
+import * as stories from './index.stories';
+
+<Meta title="组件/业务播放器" component={BillPlayer} />
+
+# 组件--按钮
+
+### 如何使用
+
+```js
+import { BillPlayer } from '@vtx/player';
+```
+
+### 属性
+
+<ArgsTable of={BillPlayer} />
+
+### 例子
+
+<Canvas>
+    <Story name="业务播放器" story={stories.Default} />
+</Canvas>

package/src/components/bill-player/index.stories.tsx

@@ -0,0 +1,13 @@
+import BillPlayer from '.';
+import { ComponentStory } from '@storybook/react';
+
+const Template: ComponentStory<typeof BillPlayer> = (args) => <BillPlayer {...args} />;
+export const Default = Template.bind({});
+Default.args = {
+    width: 1200,
+    height: 600,
+    params: {
+        billId: 'shxq_qqq',
+    },
+};
+export default Template;