@vtx/player 0.0.1 → 0.0.2

package/public/playctrl3/Decoder.worker.js

@@ -1 +0,0 @@
-"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

@@ -1,52 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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 || {};
-    try {
-        let headers: HeadersInit = { 'content-type': 'application/json' };
-        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

@@ -1,44 +0,0 @@
-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
- * @param tenantId 租户ID
- * @returns 
- */
-export const loadVideoChannel = async (channelId: string, tenantId: string) => {
-    const result = await Fetch<string>(
-        '/cloud/vis/base/np/videoDevice/loadTheVideoChannel.smvc',
-        'GET',
-        {
-            data: { parameters: JSON.stringify({ videoChannelId: channelId, tenantId }) },
-        }
-    );
-    const parseResult = JSON.parse(result) as Types.LoadVideoChannelResp[];
-    return parseResult[0];
-};

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

@@ -1,58 +0,0 @@
-.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

@@ -1,24 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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: {
-        tenantId: '60edef2faea44a39a6385146f4fa131c',
-        billId: 'shxq_qqq',
-    },
-};
-export default Template;

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

@@ -1,269 +0,0 @@
-import './index.less';
-
-import { useRef } from 'react';
-
-import HistoryControl, { HistoryControlHandle } from '../history-control';
-import LiveControl, { LiveControlHandle } from '../live-control';
-import { useRequest, useSetState } from 'ahooks';
-import { Button, Checkbox, DatePicker, Form, Radio, RadioChangeEvent, Select, Tabs } from 'antd';
-import moment from 'moment';
-
-import { loadVideoInfo } from '@/api';
-import { LoadVideoInfoParams } from '@/api/types';
-import { TimeFormat } from '@/utils';
-
-const { TabPane } = Tabs;
-
-type HistoryFormData = {
-    /** 频道号 */
-    channelNum: string;
-    /** 开始时间，格式：2022-06-01 00:00:00 */
-    beginTime: string;
-    /** 结束时间，格式：2022-06-01 23:59:59 */
-    endTime: string;
-};
-
-interface State {
-    /** 日期选择器是否可用 */
-    datePickerDisabled: boolean;
-    /** 实时视频列表勾选状态 */
-    liveListState: Map<string, boolean>;
-    /** 设备ID */
-    deviceId: string;
-}
-
-interface BillPlayerProps {
-    /** 参数 */
-    params: LoadVideoInfoParams;
-    /** 宽度 */
-    width?: string | number;
-    /** 高度 */
-    height?: string | number;
-    /** 是否显示实时视频，默认为true */
-    live?: boolean;
-    /** 是否显示历史视频，默认为true */
-    history?: boolean;
-    /** 实时默认播放 */
-    defaultLivePlay?: boolean;
-    /** 历史默认播放 */
-    defaultHistoryPlay?: boolean;
-}
-export const BillPlayer = (props: BillPlayerProps) => {
-    const {
-        params,
-        live = true,
-        history = true,
-        height = '100%',
-        width = '100%',
-        defaultLivePlay = true,
-    } = props;
-    const [state, setState] = useSetState<State>({
-        datePickerDisabled: false,
-        liveListState: new Map(),
-        deviceId: '',
-    });
-    const { data } = useRequest(() => loadVideoInfo(params), {
-        refreshDeps: [params.billId],
-        onSuccess: (result) => {
-            if (defaultLivePlay) {
-                const livePlayer = liveRef.current;
-                if (livePlayer) {
-                    const liveListState = new Map();
-                    for (const item of result) {
-                        liveListState.set(item.channelNum, true);
-                    }
-                    setState({ liveListState, deviceId: result[0].videoDeviceId });
-                    livePlayer.multiLoad(
-                        result.map((item) => ({
-                            channelNum: item.channelNum,
-                            deviceId: item.videoDeviceId,
-                            tenantId: params.tenantId,
-                        }))
-                    );
-                }
-            }
-            form.setFieldsValue({ channelNum: result[0].channelNum });
-        },
-    });
-    const [form] = Form.useForm();
-    const liveRef = useRef<LiveControlHandle>(null);
-    const historyRef = useRef<HistoryControlHandle>(null);
-    const getLivePanel = () => {
-        const list = data?.map((item) => (
-            <Checkbox
-                key={item.channelNum}
-                checked={state.liveListState.get(item.channelNum)}
-                onChange={(e) => {
-                    const checked = e.target.checked;
-                    const liveControl = liveRef.current;
-                    if (liveControl) {
-                        if (checked) {
-                            liveControl.load({ ...item, deviceId: item.videoDeviceId });
-                        } else {
-                            liveControl.unLoad(item.channelNum);
-                        }
-                    }
-                }}
-            >
-                {item.channelName}
-            </Checkbox>
-        ));
-        return (
-            <div className="player-panel">
-                <div className="player-container">
-                    <LiveControl
-                        ref={liveRef}
-                        onChannelChange={(channelsNum) => {
-                            const liveListState = new Map(state.liveListState);
-                            for (const channelNum of channelsNum) {
-                                liveListState.set(channelNum, !liveListState.get(channelNum));
-                            }
-                            for (const item of liveListState) {
-                                if (channelsNum.includes(item[0])) liveListState.set(item[0], true);
-                                else liveListState.set(item[0], false);
-                            }
-                            setState({ liveListState });
-                        }}
-                    />
-                </div>
-                <div className="control-container">
-                    <div className="header">视频通道</div>
-                    <div className="list">{list}</div>
-                </div>
-            </div>
-        );
-    };
-    const onHistorySubmit = (values: HistoryFormData) => {
-        const historyControl = historyRef.current;
-        historyControl?.load({
-            channelNum: values.channelNum,
-            tenantId: params.tenantId,
-            deviceId: state.deviceId,
-            beginTime: moment(values.beginTime).format(TimeFormat.default),
-            endTime: moment(values.endTime).format(TimeFormat.default),
-        });
-    };
-    const onTimeRadioChange = (e: RadioChangeEvent) => {
-        const value = e.target.value;
-        if (value === 'custom') {
-            setState({ datePickerDisabled: false });
-        } else {
-            setState({ datePickerDisabled: true });
-            if (value === 'today') {
-                form.setFieldsValue({
-                    beginTime: moment().startOf('day'),
-                    endTime: moment(),
-                });
-            }
-            if (value === 'yesterday') {
-                form.setFieldsValue({
-                    beginTime: moment().subtract(1, 'day').startOf('day'),
-                    endTime: moment().subtract(1, 'day').endOf('day'),
-                });
-            }
-            if (value === 'dayBeforeYesterday') {
-                form.setFieldsValue({
-                    beginTime: moment().subtract(2, 'day').startOf('day'),
-                    endTime: moment().subtract(2, 'day').endOf('day'),
-                });
-            }
-        }
-    };
-    const getHistoryPanel = () => {
-        return (
-            <div className="player-panel">
-                <div className="player-container">
-                    <HistoryControl ref={historyRef} />
-                </div>
-                <div className="control-container">
-                    <div className="header">查询视频</div>
-                    <div className="form">
-                        <Form
-                            form={form}
-                            name="history"
-                            labelCol={{ span: 5 }}
-                            wrapperCol={{ span: 19 }}
-                            onFinish={onHistorySubmit}
-                            requiredMark={false}
-                            colon={false}
-                            initialValues={{
-                                beginTime: moment().subtract(1, 'day').startOf('day'),
-                                endTime: moment().subtract(1, 'day').endOf('day'),
-                            }}
-                            autoComplete="off"
-                        >
-                            <Form.Item label="选择时段">
-                                <Radio.Group
-                                    onChange={onTimeRadioChange}
-                                    defaultValue="custom"
-                                    className="time-radio-group"
-                                >
-                                    <Radio value="today">当日</Radio>
-                                    <Radio value="yesterday">昨日</Radio>
-                                    <Radio value="dayBeforeYesterday">前日</Radio>
-                                    <Radio value="custom">自选</Radio>
-                                </Radio.Group>
-                            </Form.Item>
-                            <Form.Item
-                                label="开始时间"
-                                name="beginTime"
-                                rules={[{ required: true, message: '请输入开始时间' }]}
-                            >
-                                <DatePicker
-                                    style={{ width: '100%' }}
-                                    showTime
-                                    disabled={state.datePickerDisabled}
-                                />
-                            </Form.Item>
-                            <Form.Item
-                                label="结束时间"
-                                name="endTime"
-                                rules={[{ required: true, message: '请输入结束时间' }]}
-                            >
-                                <DatePicker showTime disabled={state.datePickerDisabled} />
-                            </Form.Item>
-                            <Form.Item
-                                label="视频通道"
-                                name="channelNum"
-                                rules={[{ required: true, message: '请选择视频通道' }]}
-                            >
-                                <Select>
-                                    {data?.map((item) => (
-                                        <Select.Option
-                                            key={item.channelNum}
-                                            value={item.channelNum}
-                                        >
-                                            {item.channelName}
-                                        </Select.Option>
-                                    ))}
-                                </Select>
-                            </Form.Item>
-                            <Form.Item wrapperCol={{ span: 24 }}>
-                                <Button type="primary" htmlType="submit">
-                                    查询
-                                </Button>
-                            </Form.Item>
-                        </Form>
-                    </div>
-                </div>
-            </div>
-        );
-    };
-    return (
-        <div className="vtx-bill-player" style={{ height, width }}>
-            {live && history && (
-                <Tabs defaultActiveKey="live" className="bill-tabs">
-                    <TabPane tab="实时视频" key="live">
-                        {getLivePanel()}
-                    </TabPane>
-                    <TabPane tab="历史视频" key="history">
-                        {getHistoryPanel()}
-                    </TabPane>
-                </Tabs>
-            )}
-            {live && !history && getLivePanel()}
-            {history && !live && getHistoryPanel()}
-        </div>
-    );
-};
-export default BillPlayer;