@vtx/player 0.0.3 → 0.0.6

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+import HistoryPlayer from '.';
+import { ComponentStory } from '@storybook/react';
+
+const Template: ComponentStory<typeof HistoryPlayer> = (args) => <HistoryPlayer {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    url: '',
+    width: 1000,
+    height: 600,
+};
+export default Default;