@vtx/player 0.0.1 → 0.0.2

package/src/components/controls/index.less

@@ -1,182 +0,0 @@
-.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;
-            }
-        }
-    }
-}

package/src/components/controls/index.tsx

@@ -1,312 +0,0 @@
-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;
-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];
-        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

@@ -1,211 +0,0 @@
-.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;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}