@vtx/player 0.0.3 → 0.0.6

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

@@ -0,0 +1,267 @@
+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,
+                        }))
+                    );
+                }
+            }
+            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,
+            deviceId: state.deviceId,
+            beginTime: moment(values.beginTime).format(TimeFormat.params),
+            endTime: moment(values.endTime).format(TimeFormat.params),
+        });
+    };
+    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;

package/src/components/controls/index.less

@@ -0,0 +1,182 @@
+.player-control-popover {
+    border-radius: 2px;
+
+    .ant-popover-content {
+        background: rgb(0 0 0 / 75%);
+        box-shadow: 0 2px 8px 1px rgb(0 0 0 / 15%);
+
+        .ant-popover-arrow-content {
+            background: rgb(0 0 0 / 75%);
+
+            &::before {
+                background: none;
+            }
+        }
+
+        .ant-popover-inner {
+            background: transparent;
+
+            .ant-popover-inner-content {
+                padding: 0;
+
+                .volume-content {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    width: 44px;
+                    padding: 8px 0;
+
+                    .value {
+                        font-size: 14px;
+                        color: rgb(255 255 255 / 84.7%);
+                    }
+
+                    .ant-slider-vertical {
+                        height: 62px;
+
+                        .ant-slider-handle {
+                            background-color: #1890ff;
+                            border: solid 2px #1890ff;
+                        }
+
+                        .ant-slider-track {
+                            background-color: #1890ff;
+                        }
+                    }
+                }
+
+                .speed-content {
+                    .item {
+                        padding: 2px 10px;
+                        color: rgb(255 255 255 / 65%);
+                        cursor: pointer;
+
+                        &:hover {
+                            background-color: rgb(255 255 255 / 25%);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+.vtx-player-speed-control {
+    line-height: 24px;
+    color: rgb(255 255 255 / 65%);
+    cursor: pointer;
+}
+
+.vtx-player-header {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 26px;
+    padding: 0 12px;
+    background-color: #131d27;
+
+    .title {
+        font-size: 14px;
+        color: white;
+    }
+
+    .close {
+        margin-left: auto;
+    }
+}
+
+.cloud-control-panel {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: calc(100% - 24px);
+
+    .arrow {
+        position: absolute;
+        cursor: pointer;
+
+        &.up {
+            top: 16px;
+            left: 50%;
+            transform: translateX(-50%) rotate(180deg);
+        }
+
+        &.down {
+            bottom: 16px;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+
+        &.left {
+            top: 50%;
+            left: 16px;
+            transform: translateY(-50%) rotate(90deg);
+        }
+
+        &.right {
+            top: 50%;
+            right: 16px;
+            transform: translateY(-50%) rotate(-90deg);
+        }
+
+        &.left-up {
+            top: 16px;
+            left: 16px;
+            transform: rotate(135deg);
+        }
+
+        &.left-down {
+            bottom: 16px;
+            left: 16px;
+            transform: rotate(45deg);
+        }
+
+        &.right-up {
+            top: 16px;
+            right: 16px;
+            transform: rotate(90deg);
+        }
+
+        &.right-down {
+            right: 16px;
+            bottom: 16px;
+            transform: rotate(-45deg);
+        }
+    }
+
+    .buttons {
+        position: absolute;
+        bottom: 80px;
+        left: 50%;
+        transform: translateX(-50%);
+
+        .control-button {
+            display: flex;
+            height: 32px;
+            line-height: 32px;
+            color: white;
+            cursor: default;
+            background-color: rgb(0 0 0 / 35%);
+            border: 1px solid rgb(0 0 0 / 15%);
+            border-radius: 2px;
+
+            > span {
+                height: 100%;
+                padding: 0 8px;
+            }
+
+            .text {
+                height: 100%;
+                padding: 0 8px;
+                white-space: nowrap;
+                border-right: 1px solid rgb(0 0 0 / 15%);
+                border-left: 1px solid rgb(0 0 0 / 15%);
+            }
+
+            .icon {
+                padding: 0 12px;
+                cursor: pointer;
+            }
+        }
+    }
+}