@vtx/player 0.0.5 → 0.0.6

package/src/components/controls/index.tsx

@@ -0,0 +1,312 @@
+import './index.less';
+
+import { useRef, useState } from 'react';
+
+import Player from '../player';
+import { useRequest } from 'ahooks';
+import { Button, Popover, Slider, Space, Spin } from 'antd';
+
+import { cloudControl } from '@/api';
+import { CloudControlCommandType, CloudControlParams } from '@/api/types';
+import {
+    CloseIcon,
+    TalkDisableIcon,
+    TalkIcon,
+    VolumeLargeIcon,
+    VolumeMutedIcon,
+    VolumeSmallIcon,
+} from '@/icons';
+
+import arrowImg from './images/arrow.png';
+import errorImg from './images/error.png';
+
+interface VolumeControlProps {
+    container: HTMLDivElement | null;
+    player?: Player;
+    defaultValue?: number;
+}
+/** 音量控制 */
+export const VolumeControl = (props: VolumeControlProps) => {
+    const { defaultValue = 0, player, container } = props;
+    const [value, setValue] = useState(defaultValue);
+    const preValueRef = useRef(defaultValue);
+    const handleChange = (val: number) => {
+        preValueRef.current = val;
+        player?.setVolume(val);
+        setValue(val);
+    };
+    const content = (
+        <div className="volume-content">
+            <span className="value">{value}</span>
+            <Slider vertical value={value} onChange={handleChange} max={100} />
+        </div>
+    );
+    const handleVisibleChange = (visible: boolean) => {
+        if (container) {
+            if (visible) {
+                container.style.opacity = '1';
+            } else {
+                container.style.removeProperty('opacity');
+            }
+        }
+    };
+    const handleMuted = () => {
+        if (value === 0) {
+            handleChange(preValueRef.current);
+        } else {
+            handleChange(0);
+        }
+    };
+    return (
+        <Popover
+            title={null}
+            content={content}
+            overlayClassName="player-control-popover"
+            onVisibleChange={handleVisibleChange}
+        >
+            <div onClick={handleMuted}>
+                {value === 0 ? (
+                    <VolumeMutedIcon />
+                ) : value > 50 ? (
+                    <VolumeLargeIcon />
+                ) : (
+                    <VolumeSmallIcon />
+                )}
+            </div>
+        </Popover>
+    );
+};
+
+type SpeedValue = 0.5 | 1 | 2 | 4 | 8;
+interface SpeedControlProps {
+    container: HTMLDivElement | null;
+    player?: Player;
+    defaultValue?: SpeedValue;
+}
+/** 速度控制 */
+export const SpeedControl = (props: SpeedControlProps) => {
+    const { defaultValue = 1, player, container } = props;
+    const [value, setValue] = useState<SpeedValue>(defaultValue);
+    const handleChange = (val: SpeedValue) => {
+        player?.setSpeed(val);
+        setValue(val);
+    };
+    const content = () => {
+        const list: SpeedValue[] = [0.5, 1, 2, 4, 8];
+        return (
+            <div className="speed-content">
+                {list.map((i) => (
+                    <div className="item" key={i} onClick={() => handleChange(i)}>{`${i.toFixed(
+                        1
+                    )}x`}</div>
+                ))}
+            </div>
+        );
+    };
+    const handleVisibleChange = (visible: boolean) => {
+        if (container) {
+            if (visible) {
+                container.style.opacity = '1';
+            } else {
+                container.style.removeProperty('opacity');
+            }
+        }
+    };
+
+    return (
+        <Popover
+            title={null}
+            content={content}
+            overlayClassName="player-control-popover"
+            onVisibleChange={handleVisibleChange}
+        >
+            <div className="vtx-player-speed-control">{`${value.toFixed(1)}x`}</div>
+        </Popover>
+    );
+};
+
+interface ErrorStateProps {
+    /** 重试回调 */
+    onClick?: () => void;
+}
+export const ErrorState = (props: ErrorStateProps) => {
+    const { onClick } = props;
+    return (
+        <div className="error-container">
+            <img src={errorImg} alt="播放错误" />
+            <span className="text">视频播放失败，请稍后重试</span>
+            {onClick && (
+                <Button onClick={() => onClick()} type="primary">
+                    点击重试
+                </Button>
+            )}
+        </div>
+    );
+};
+
+export const LoadingState = () => {
+    return (
+        <div className="loading-container">
+            <Spin size="large" />
+        </div>
+    );
+};
+
+interface PlayerHeaderProps {
+    /** 名称 */
+    name: string;
+    /** 关闭回调 */
+    onClose: () => void;
+}
+/** 播放器头部 */
+export const PlayerHeader = (props: PlayerHeaderProps) => {
+    const { name, onClose } = props;
+    return (
+        <div className="vtx-player-header">
+            <span className="title">{name}</span>
+            <span className="close">
+                <CloseIcon
+                    onClick={(e) => {
+                        onClose();
+                        e.stopPropagation();
+                    }}
+                />
+            </span>
+        </div>
+    );
+};
+
+interface TalkControlProps {
+    /** 播放器 */
+    player?: Player;
+    /** 对讲url */
+    url: string;
+}
+
+/**
+ * 对讲控制器
+ * @returns
+ */
+export const TalkControl = (props: TalkControlProps) => {
+    const { player, url } = props;
+    const [active, setActive] = useState(false);
+    const handleClick = () => {
+        if (active) {
+            player?.stopTalk().then(() => setActive(false));
+        } else {
+            player?.startTalk(url).then(() => setActive(true));
+        }
+    };
+    return (
+        <div>
+            {active ? (
+                <TalkIcon active={true} onClick={handleClick} />
+            ) : (
+                <TalkDisableIcon active={false} onClick={handleClick} />
+            )}
+        </div>
+    );
+};
+
+export type CloudControlType = 'all' | 'onlyFocus' | 'onlyRotate' | 'none';
+export type CloudControlPanelProps = {
+    query: Omit<CloudControlParams, 'action' | 'command'>;
+    type: CloudControlType;
+};
+/** 云台控制面板 */
+export const CloudControlPanel = (props: CloudControlPanelProps) => {
+    const { query, type } = props;
+    const { run } = useRequest(cloudControl, { manual: true });
+    const handleEvent = (action: 0 | 1, command: CloudControlCommandType) => {
+        run({ ...query, action, command });
+    };
+    return (
+        <div className="cloud-control-panel">
+            {type !== 'onlyFocus' && (
+                <>
+                    <CloudControlArrow name="up" event={handleEvent} type="UP" />
+                    <CloudControlArrow name="down" event={handleEvent} type="DOWN" />
+                    <CloudControlArrow name="left" event={handleEvent} type="LEFT" />
+                    <CloudControlArrow name="right" event={handleEvent} type="RIGHT" />
+                    <CloudControlArrow name="left-up" event={handleEvent} type="LEFT_UP" />
+                    <CloudControlArrow name="left-down" event={handleEvent} type="LEFT_DOWN" />
+                    <CloudControlArrow name="right-up" event={handleEvent} type="RIGHT_UP" />
+                    <CloudControlArrow name="right-down" event={handleEvent} type="RIGHT_DOWN" />
+                </>
+            )}
+            {type !== 'onlyRotate' && (
+                <Space className="buttons">
+                    <CloudControlButton
+                        text="焦距"
+                        onAddDown={() => handleEvent(1, 'ZOOM_IN')}
+                        onAddUp={() => handleEvent(0, 'ZOOM_IN')}
+                        onReduceDown={() => handleEvent(1, 'ZOOM_OUT')}
+                        onReduceUp={() => handleEvent(0, 'ZOOM_OUT')}
+                    />
+                    <CloudControlButton
+                        text="光圈"
+                        onAddDown={() => handleEvent(1, 'IRIS_ENLARGE')}
+                        onAddUp={() => handleEvent(0, 'IRIS_ENLARGE')}
+                        onReduceDown={() => handleEvent(1, 'IRIS_REDUCE')}
+                        onReduceUp={() => handleEvent(0, 'IRIS_REDUCE')}
+                    />
+                    <CloudControlButton
+                        text="距离"
+                        onAddDown={() => handleEvent(1, 'FOCUS_NEAR')}
+                        onAddUp={() => handleEvent(0, 'FOCUS_NEAR')}
+                        onReduceDown={() => handleEvent(1, 'FOCUS_FAR')}
+                        onReduceUp={() => handleEvent(0, 'FOCUS_FAR')}
+                    />
+                </Space>
+            )}
+        </div>
+    );
+};
+
+interface CloudControlArrowProps {
+    /** 类名 */
+    name?: string;
+    /** 鼠标事件 */
+    event: (action: 0 | 1, command: CloudControlCommandType) => void;
+    type: CloudControlCommandType;
+}
+/** 云台控制箭头 */
+const CloudControlArrow = (props: CloudControlArrowProps) => {
+    const { name = '', event, type } = props;
+    return (
+        <img
+            className={`arrow ${name}`}
+            src={arrowImg}
+            onMouseDown={() => event(1, type)}
+            onMouseUp={() => event(0, type)}
+        />
+    );
+};
+
+interface CloudControlButtonProps {
+    /** 文本 */
+    text: string;
+    /** 增加按钮鼠标按下事件 */
+    onAddDown: () => void;
+    /** 增加按钮鼠标抬起事件 */
+    onAddUp: () => void;
+    /** 减少按钮鼠标按下事件 */
+    onReduceDown: () => void;
+    /** 减少按钮鼠标抬起事件 */
+    onReduceUp: () => void;
+}
+/** 云台控制按钮 */
+const CloudControlButton = (props: CloudControlButtonProps) => {
+    const { text, onAddDown, onAddUp, onReduceDown, onReduceUp } = props;
+    return (
+        <div className="control-button">
+            <span className="icon" onMouseDown={onReduceDown} onMouseUp={onReduceUp}>
+                +
+            </span>
+            <span className="text">{text}</span>
+            <span className="icon" onMouseDown={onAddDown} onMouseUp={onAddUp}>
+                -
+            </span>
+        </div>
+    );
+};

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

@@ -0,0 +1,211 @@
+.vtx-history-control {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: #2b3d51;
+    background-image: url('./images/empty.png');
+    background-repeat: no-repeat;
+    background-position: center;
+
+    .bottom-controls {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 32px;
+        padding: 0 12px;
+        background-color: #243241;
+    }
+
+    .collapse-controls {
+        position: absolute;
+        bottom: 32px;
+        width: 100%;
+        background-color: #131d27;
+
+        .action-bar {
+            display: flex;
+            justify-content: center;
+            cursor: pointer;
+        }
+
+        .collapse-panel-container {
+            .panels {
+                padding: 12px 20px;
+                margin: 0 14px 14px;
+                background-color: #141414;
+                border: 1px solid rgb(255 255 255 / 20%);
+                border-radius: 2px;
+
+                .time-panel {
+                    position: relative;
+
+                    .time-line-icon {
+                        position: absolute;
+                        top: -10px;
+                    }
+
+                    .segments {
+                        position: relative;
+                        height: 24px;
+                        overflow: hidden;
+
+                        .segment {
+                            position: absolute;
+                            height: 24px;
+                            background-color: rgb(186 231 255 / 100%);
+                            border-left: 1px solid #141414;
+                        }
+                    }
+
+                    .time-axis {
+                        position: relative;
+                        width: 100%;
+
+                        .split-lines {
+                            height: 30px;
+
+                            &::before {
+                                position: absolute;
+                                top: -1px;
+                                width: 100%;
+                                height: 1px;
+                                content: '';
+                                background-color: rgb(255 255 255 / 65%);
+                            }
+
+                            .line {
+                                position: absolute;
+                                color: white;
+
+                                .number {
+                                    position: absolute;
+                                    color: rgb(255 255 255 / 65%);
+                                    transform: translate(-50%, 6px);
+                                }
+
+                                &::before {
+                                    position: absolute;
+                                    width: 1px;
+                                    height: 8px;
+                                    content: '';
+                                    background-color: rgb(255 255 255 / 65%);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .player-container {
+        flex-grow: 1;
+        width: 100%;
+        height: 0;
+        padding-bottom: 13px;
+    }
+}
+
+.history-url-table {
+    border-right: 1px solid #383838;
+    border-bottom: 1px solid #383838;
+
+    .ant-table {
+        background: var(--table-bg);
+
+        .ant-table-container {
+            &::before {
+                display: none;
+            }
+
+            &::after {
+                display: none;
+            }
+
+            .ant-table-header {
+                table {
+                    border-collapse: collapse;
+
+                    thead {
+                        th {
+                            padding: 8px;
+                            color: rgb(255 255 255 / 85%);
+                            white-space: no-wrap;
+                            background-color: rgb(255 255 255 / 7%);
+                            border: 1px solid #383838;
+
+                            &::before {
+                                display: none;
+                            }
+                        }
+                    }
+                }
+            }
+
+            .ant-table-body {
+                &::-webkit-scrollbar {
+                    width: 10px;
+                    height: 10px;
+                }
+
+                &::-webkit-scrollbar-track {
+                    background: transparent;
+                    border-radius: 5px;
+                }
+
+                &::-webkit-scrollbar-thumb {
+                    background: rgb(255 255 255 / 45%);
+                    border-radius: 5px;
+                }
+
+                &::-webkit-scrollbar-corner {
+                    background-color: transparent;
+                }
+
+                &::-webkit-scrollbar-thumb:hover {
+                    background: rgb(255 255 255 / 65%);
+                }
+
+                table {
+                    border-collapse: collapse;
+
+                    tbody {
+                        tr {
+                            td {
+                                padding: 6px 8px;
+                                font-size: 14px;
+                                color: rgb(255 255 255 / 65%);
+                                white-space: nowrap;
+                                background-color: transparent;
+                                border: 1px solid #383838;
+                            }
+
+                            &.active {
+                                td {
+                                    background-color: #102641;
+                                }
+                            }
+                        }
+                    }
+
+                    .play-btn {
+                        height: fit-content;
+                        padding: 0 8px;
+                        font-size: 14px;
+                        color: rgb(255 255 255 / 65%);
+                        background: rgb(255 255 255 / 7.8%);
+                        border: 1px solid rgb(255 255 255 / 20%);
+                        border-radius: 2px;
+
+                        &.active {
+                            color: #177ddc;
+                            border-color: #177ddc;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

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

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