@vtx/player 0.0.7 → 0.0.10

package/src/components/history-control/index.stories.mdx

@@ -1,62 +0,0 @@
-import HistoryControl from '.';
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-
-import * as stories from './index.stories';
-
-<Meta title="组件/历史视频控制器" />
-
-# 历史视频控制器
-
-## 引入
-
-```js
-import { HistoryControl } from '@vtx/player';
-```
-
-## 方法调用
-
-```tsx
-import { HistoryControl } from '@vtx/player';
-
-const MyApp = () => {
-    const ref = useRef<HistoryControlHandle>(null);
-    const params = {};
-    return (
-        <div>
-            <button onClick={() => ref.load(params)}>加载视频</button>
-            <HistoryControl ref={ref} />
-        </div>
-    );
-};
-```
-
-## 方法类型
-
-```ts
-type HistoryControlHandle = {
-    load: (channel: ChannelType) => void;
-};
-
-type ChannelType {
-    /** 频道号 */
-    channelNum: string;
-    /** 设备ID */
-    deviceId: string;
-    /** 协议 */
-    protocol?: string;
-    /** 开始时间，格式：2022-06-01 00:00:00 */
-    beginTime: string;
-    /** 结束时间，格式：2022-06-01 23:59:59 */
-    endTime: string;
-}
-```
-
-## 属性
-
-<ArgsTable of={HistoryControl} />
-
-## 例子
-
-<Canvas>
-    <Story name="历史视频控制器" story={stories.Default} />
-</Canvas>

package/src/components/history-control/index.stories.tsx

@@ -1,130 +0,0 @@
-import { useRef } from 'react';
-
-import HistoryControl, { HistoryControlHandle } from '.';
-import { ComponentStory } from '@storybook/react';
-import { Button, DatePicker, Form, Input, Space } from 'antd';
-import { useForm } from 'antd/lib/form/Form';
-import moment from 'moment';
-
-type FormData = {
-    /** 频道号 */
-    channelNum: string;
-    /** 设备ID */
-    deviceId: string;
-    /** 协议 */
-    protocol?: string;
-    /** 开始时间，格式：2022-06-01 00:00:00 */
-    beginTime: string;
-    /** 结束时间，格式：2022-06-01 23:59:59 */
-    endTime: string;
-};
-
-const Template: ComponentStory<typeof HistoryControl> = (args) => {
-    const ref = useRef<HistoryControlHandle>(null);
-    const [form] = useForm();
-    const onFinish = (values: FormData) => {
-        const control = ref.current;
-        if (control)
-            control.load({
-                ...values,
-                beginTime: moment(values.beginTime).format('YYYY-MM-DD HH:mm:ss'),
-                endTime: moment(values.endTime).format('YYYY-MM-DD HH:mm:ss'),
-            });
-    };
-    return (
-        <Space size={24}>
-            <HistoryControl {...args} ref={ref} />
-            <div>
-                <Space style={{ marginBottom: 20 }}>
-                    <Button
-                        onClick={() => {
-                            form.setFieldsValue({
-                                channelNum: '98956603975e480c8d673c87f1126f5f',
-                                deviceId: 'c15f2219af0d4770b399dc5e519fbd37',
-                            });
-                        }}
-                    >
-                        海康测试-万科中粮
-                    </Button>
-                    <Button
-                        onClick={() => {
-                            form.setFieldsValue({
-                                channelNum: '396ee1a6d586404982ce4c412bdcaf49',
-                                deviceId: '25d0b7c5e1624cf0a9abf18c45cca7a0',
-                            });
-                        }}
-                    >
-                        FLV测试-惠盛
-                    </Button>
-                    <Button
-                        onClick={() => {
-                            form.setFieldsValue({
-                                channelNum: '87cc1a9de57a41e19344d4d3e75a5976',
-                                deviceId: '687a1c4765c0453ea58618e5c7c6d9dd',
-                            });
-                        }}
-                    >
-                        海康测试-垃圾房对讲
-                    </Button>
-                </Space>
-                <Form
-                    form={form}
-                    name="basic"
-                    labelCol={{ span: 8 }}
-                    wrapperCol={{ span: 16 }}
-                    onFinish={onFinish}
-                    initialValues={{
-                        channelNum: '98956603975e480c8d673c87f1126f5f',
-                        deviceId: 'c15f2219af0d4770b399dc5e519fbd37',
-                        beginTime: moment().subtract(1, 'day').startOf('day'),
-                        endTime: moment().subtract(1, 'day').endOf('day'),
-                    }}
-                    autoComplete="off"
-                >
-                    <Form.Item
-                        label="ChannelNum"
-                        name="channelNum"
-                        rules={[{ required: true, message: '请输入通道编号' }]}
-                    >
-                        <Input />
-                    </Form.Item>
-                    <Form.Item
-                        label="DeviceId"
-                        name="deviceId"
-                        rules={[{ required: true, message: '请输入设备ID' }]}
-                    >
-                        <Input />
-                    </Form.Item>
-                    <Form.Item label="Protocol" name="protocol">
-                        <Input />
-                    </Form.Item>
-                    <Form.Item
-                        label="BeginTime"
-                        name="beginTime"
-                        rules={[{ required: true, message: '请输入开始时间' }]}
-                    >
-                        <DatePicker showTime />
-                    </Form.Item>
-                    <Form.Item
-                        label="EndTime"
-                        name="endTime"
-                        rules={[{ required: true, message: '请输入结束时间' }]}
-                    >
-                        <DatePicker showTime />
-                    </Form.Item>
-                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
-                        <Button type="primary" htmlType="submit">
-                            加载
-                        </Button>
-                    </Form.Item>
-                </Form>
-            </div>
-        </Space>
-    );
-};
-export const Default = Template.bind({});
-Default.args = {
-    width: 1000,
-    height: 600,
-};
-export default Default;

package/src/components/history-control/index.tsx

@@ -1,368 +0,0 @@
-import './index.less';
-
-import { forwardRef, useEffect, useImperativeHandle } from 'react';
-import useCollapse from 'react-collapsed';
-
-import HistoryPlayer from '../history-player';
-import { useRequest, useSetState } from 'ahooks';
-import { Button, Space, Table, Tooltip } from 'antd';
-import { ColumnsType } from 'antd/lib/table';
-import moment from 'moment';
-
-import { getHistoryUrl } from '@/api';
-import { GetHistoryUrlParams, HistoryUrlItem } from '@/api/types';
-import { PlayerHeader } from '@/components/controls';
-import { ExpandIcon, FoldIcon, TimePositionIcon, VideoCloseIcon, VideoPlayIcon } from '@/icons';
-import { getUrlTableData } from '@/utils';
-
-import collapseBtnImg from './images/collapse.png';
-
-export 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;
-}
-/** 播放器参数 */
-type PlayParams = {
-    index: number;
-    url: string;
-    startTime: string;
-    endTime: string;
-};
-/** 默认播放器参数 */
-const DEFAULT_PLAY_PARAMS: PlayParams = {
-    index: -1,
-    url: '',
-    startTime: '',
-    endTime: '',
-};
-type State = {
-    /** 展开/收缩 */
-    expand: boolean;
-    /** 当前时间刻度位置 */
-    timeLinePosition: number;
-    /** 名称 */
-    name: string;
-    /** 表格数据 */
-    tableData: UrlsTableItemType[];
-    /** 分段数据 */
-    segmentData: GetSegmentsProps;
-    /** 通道信息 */
-    channel?: GetHistoryUrlParams;
-    /** 总地址 */
-    totalUrl: string;
-    /** 播放器参数 */
-    playParams: PlayParams;
-};
-/**
- * 历史视频控制器
- */
-export const HistoryControl = forwardRef<HistoryControlHandle, HistoryControlProps>(
-    (props, ref) => {
-        const { width = '100%', height = '100%', onExpandChange, onTimeChange } = props;
-        const { runAsync } = useRequest(getHistoryUrl, {
-            manual: true,
-        });
-        const { getCollapseProps, getToggleProps, isExpanded } = useCollapse();
-        const [state, setState] = useSetState<State>({
-            expand: true,
-            name: '',
-            tableData: [],
-            segmentData: { list: [] },
-            totalUrl: '',
-            timeLinePosition: -1, //初始化，负数不显示
-            playParams: DEFAULT_PLAY_PARAMS,
-        });
-        useImperativeHandle(ref, () => {
-            return {
-                load: (channel) => {
-                    if (JSON.stringify(channel) !== JSON.stringify(state.channel)) {
-                        setState({ channel, timeLinePosition: -1 });
-                    }
-                },
-            };
-        });
-        useEffect(() => {
-            if (state.channel) {
-                runAsync(state.channel).then((result) => {
-                    // 如果没有list,只有url,则直接播放url
-                    if (Array.isArray(result.list)) {
-                        const tableData = getUrlTableData(result);
-                        const segmentData = {
-                            list: result.list,
-                            start: moment(state.channel?.beginTime).startOf('day'),
-                            end: moment(state.channel?.endTime).endOf('day'),
-                        };
-                        setState({
-                            tableData,
-                            segmentData,
-                            name: `${result.deviceName}-${result.channelName}`,
-                            totalUrl: result.totalTimeUrl,
-                        });
-                    } else if (result.totalTimeUrl) {
-                        setState({
-                            tableData: [],
-                            segmentData: { list: [] },
-                            name: `${result.deviceName}-${result.channelName}`,
-                            totalUrl: result.totalTimeUrl,
-                            playParams: {
-                                index: 0,
-                                url: result.totalTimeUrl,
-                                startTime: state.channel?.beginTime || '',
-                                endTime: state.channel?.endTime || '',
-                            },
-                        });
-                    } else {
-                        setState({
-                            tableData: [],
-                            segmentData: { list: [] },
-                            name: ``,
-                            playParams: DEFAULT_PLAY_PARAMS,
-                        });
-                    }
-
-                });
-                return () => {
-                    setState({
-                        tableData: [],
-                        segmentData: { list: [] },
-                        name: ``,
-                        playParams: DEFAULT_PLAY_PARAMS,
-                    });
-                };
-            }
-        }, [state.channel]);
-        const handleExpand = () => {
-            onExpandChange && onExpandChange(!state.expand);
-            setState({ expand: !state.expand });
-        };
-        const handleClose = () => {
-            setState({ channel: undefined, timeLinePosition: -1 });
-        };
-        const columns: ColumnsType<UrlsTableItemType> = [
-            {
-                title: '序号',
-                dataIndex: 'index',
-                width: 60,
-            },
-            {
-                title: '播放视频',
-                key: 'play',
-                width: 90,
-                render: (_, record, index) => {
-                    const active = state.playParams.index === index;
-                    return (
-                        <Button
-                            className={`play-btn ${active ? 'active' : ''}`}
-                            onClick={() => {
-                                if (active) {
-                                    setState({
-                                        playParams: DEFAULT_PLAY_PARAMS,
-                                        timeLinePosition: -1,
-                                    });
-                                } else {
-                                    const url = record.url || state.totalUrl;
-                                    setState({
-                                        playParams: {
-                                            index,
-                                            url,
-                                            startTime: record.beginTime,
-                                            endTime: record.endTime,
-                                        },
-                                    });
-                                }
-                            }}
-                        >
-                            {active ? (
-                                <>
-                                    <VideoCloseIcon active={true} />
-                                    关闭
-                                </>
-                            ) : (
-                                <>
-                                    <VideoPlayIcon />
-                                    播放
-                                </>
-                            )}
-                        </Button>
-                    );
-                },
-            },
-            // {
-            //     title: '设备名称',
-            //     dataIndex: 'deviceName',
-            // },
-            // {
-            //     title: '通道名称',
-            //     dataIndex: 'channelName',
-            // },
-            {
-                title: '开始时间',
-                dataIndex: 'beginTime',
-                width: 170,
-            },
-            {
-                title: '结束时间',
-                dataIndex: 'endTime',
-                width: 170,
-            },
-            {
-                title: '持续时间',
-                width: 120,
-                dataIndex: 'duration',
-            },
-            {
-                title: '视频大小',
-                width: 100,
-                dataIndex: 'size',
-            },
-        ];
-        const handleTimeChange = (time: string) => {
-            onTimeChange && onTimeChange(time);
-            // 计算播放时间占起始时间当日的百分比
-            const progress =
-                (moment(time).diff(moment(state.channel?.beginTime).startOf('day'), 'seconds') /
-                    (24 * 60 * 60)) *
-                100;
-            setState({ timeLinePosition: progress });
-        };
-        return (
-            <div className="vtx-history-control" style={{ width, height }}>
-                {state.name && <PlayerHeader name={state.name} onClose={handleClose} />}
-                <div className="player-container">
-                    {state.playParams.url && (
-                        <HistoryPlayer
-                            {...state.playParams}
-                            controlBottom={isExpanded ? 235 : 0}
-                            onTimeChange={handleTimeChange}
-                        />
-                    )}
-                </div>
-                {state.tableData && state.tableData.length > 0 && (
-                    <div className="collapse-controls">
-                        <div className="action-bar" {...getToggleProps({})}>
-                            <img
-                                src={collapseBtnImg}
-                                alt=""
-                                style={{ transform: `rotate(${isExpanded ? 180 : 0}deg)` }}
-                            />
-                        </div>
-                        <section className="collapse-panel-container" {...getCollapseProps()}>
-                            <div className="panels">
-                                <div className="time-panel">
-                                    <div className="segments">{getSegments(state.segmentData)}</div>
-                                    {state.timeLinePosition >= 0 && (
-                                        <TimePositionIcon
-                                            className="time-line-icon"
-                                            style={{ left: `${state.timeLinePosition}%` }}
-                                        />
-                                    )}
-                                    <TimeLine />
-                                </div>
-                                <div className="urls-panel">
-                                    <Table
-                                        className="history-url-table"
-                                        columns={columns}
-                                        dataSource={state.tableData}
-                                        scroll={{ y: 100 }}
-                                        pagination={false}
-                                        rowClassName={(_, index) =>
-                                            index === state.playParams.index ? 'active' : ''
-                                        }
-                                    />
-                                </div>
-                            </div>
-                        </section>
-                    </div>
-                )}
-                <div className="bottom-controls">
-                    <Space className="left" size={12} align="center">
-                        {onExpandChange && (
-                            <Tooltip title={state.expand ? '收起' : '展开'}>
-                                <div onClick={handleExpand}>
-                                    {state.expand ? <FoldIcon /> : <ExpandIcon />}
-                                </div>
-                            </Tooltip>
-                        )}
-                    </Space>
-                </div>
-            </div>
-        );
-    }
-);
-HistoryControl.displayName = 'HistoryControl';
-export type UrlsTableItemType = {
-    /** 序号 */
-    index: number;
-    /** 设备名称 */
-    deviceName: string;
-    /** 通道名称 */
-    channelName: string;
-    /** 开始时间 */
-    beginTime: string;
-    /** 结束时间 */
-    endTime: string;
-    /** 视频时长 */
-    duration: string;
-    /** 视频大小 */
-    size: string;
-    /** 地址 */
-    url: string;
-};
-
-const TimeLine = () => {
-    const getSplitLines = () => {
-        const result = [];
-        const step = 100 / 24;
-        for (let i = 0; i < 25; i++) {
-            const element = (
-                <div key={i} className="line" style={{ left: `${step * i}%` }}>
-                    <div className="number">{i >= 10 ? i : '0' + i}</div>
-                </div>
-            );
-            result.push(element);
-        }
-        return result;
-    };
-    return (
-        <div className="time-axis">
-            <div className="axis" />
-            <div className="split-lines">{getSplitLines()}</div>
-        </div>
-    );
-};
-
-type GetSegmentsProps = { list: HistoryUrlItem[]; start?: moment.Moment; end?: moment.Moment };
-const getSegments = (props: GetSegmentsProps) => {
-    const { list, start, end } = props;
-    const startTime = moment(start);
-    const endTime = moment(end);
-    const total = endTime.diff(startTime, 'seconds'); // 总时间
-    const result = list.map((i) => {
-        const itemStart =
-            moment(i.beginTime).diff(startTime, 'seconds') > 0 ? moment(i.beginTime) : startTime;
-        const itemEnd = moment(i.endTime);
-        const itemTotal = itemEnd.diff(itemStart, 'seconds'); // 分段总时间
-        const width = (itemTotal / total) * 100; // 分段时间占总时间百分比
-        const left = (itemStart.diff(startTime, 'seconds') / total) * 100; // 分段其实时间
-        return (
-            <div
-                key={i.beginTime}
-                className="segment"
-                style={{ width: `${width}%`, left: `${left < 0 ? 0 : left}%` }}
-            />
-        );
-    });
-    return result;
-};
-
-export default HistoryControl;

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

@@ -1,98 +0,0 @@
-.vtx-history-player {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #2b3d51;
-    border: 1px solid transparent;
-
-    .controls {
-        position: absolute;
-        bottom: 0;
-        display: flex;
-        align-items: center;
-        width: 100%;
-        height: 30px;
-        padding: 0 12px;
-        background-color: #131d27;
-        border-bottom: 1px solid rgb(82 196 26 / 100%);
-        opacity: 0;
-        transition: opacity 0.5s;
-
-        .time {
-            padding: 4px 12px;
-            margin: 0 12px;
-            background-color: rgb(145 165 185 / 30%);
-
-            .current {
-                color: white;
-            }
-
-            .total {
-                color: rgb(255 255 255 / 85%);
-            }
-        }
-
-        .slider {
-            flex-grow: 1;
-            margin-right: 24px;
-
-            .ant-slider {
-                .ant-slider-rail {
-                    background-color: rgb(173 176 180);
-                }
-            }
-        }
-
-        .right {
-            margin-left: auto;
-
-            > div {
-                height: 24px;
-            }
-        }
-    }
-
-    &:hover {
-        .controls {
-            opacity: 1;
-        }
-    }
-
-    video {
-        width: 100%;
-        height: 100%;
-        object-fit: fill;
-    }
-
-    .sub-wnd {
-        width: 100% !important;
-        height: 100% !important;
-        pointer-events: none;
-        background-color: #2b3d51 !important;
-        border: 1px solid transparent !important;
-    }
-
-    .error-container {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        transform: translate(-50%, -50%);
-
-        .text {
-            margin: 20px 0;
-            font-size: 14px;
-            color: rgb(255 255 255 / 65%);
-        }
-    }
-
-    .loading-container {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-    }
-}

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

@@ -1,38 +0,0 @@
-import HistoryPlayer from '.';
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Alert, Space } from 'antd';
-
-import * as stories from './index.stories';
-
-<Meta title="组件/历史播放器" component={HistoryPlayer} />
-
-# 历史播放器
-
-## 引入
-
-```js
-import { HistoryPlayer } from '@vtx/player';
-```
-
-## 支持的格式
-
--   海康 ws，使用海康提供的 h5player.js 实现
--   flv，使用 flv.js 实现
--   hls，使用 hls.js 实现
-
-## 注意
-
-<Space direction="vertical" size="middle" style={{ display: 'flex' }}>
-    <Alert message="当type属性为空时，组件将自动根据url判断视频流格式" type="warning" />
-    <Alert message="flv格式视频流不支持进度条拖拽" type="warning" />
-</Space>
-
-## 属性
-
-<ArgsTable of={HistoryPlayer} />
-
-## 例子
-
-<Canvas>
-    <Story name="历史播放器" story={stories.Default} />
-</Canvas>