@vtx/player 0.0.1 → 0.0.2

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

@@ -1,255 +0,0 @@
-import './index.less';
-
-import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
-
-import { useFullscreen, useRequest, useSetState } from 'ahooks';
-import { Space, Tooltip } from 'antd';
-
-import { getPreviewUrl } from '@/api';
-import { PlayerHeader } from '@/components/controls';
-import VtxLivePlayer from '@/components/live-player';
-import {
-    CloseAllIcon,
-    ExitFullScreenIcon,
-    ExpandIcon,
-    FoldIcon,
-    FullScreenIcon,
-    Grid1x1Icon,
-    Grid2x2Icon,
-    Grid3x3Icon,
-} from '@/icons';
-
-export type LiveControlHandle = {
-    /** 加载视频 */
-    load: (channel: ChannelType) => void;
-    /** 卸载视频，参数为通道编号 */
-    unLoad: (channelNum: string) => void;
-    /** 一次加载多个视频，适用于初始化 */
-    multiLoad: (channels: ChannelType[]) => void;
-};
-
-interface LiveControlProps {
-    /** 展开/收缩按钮回调 */
-    onExpandChange?: (expand: boolean) => void;
-    /** 视频关闭回调，参数为通道编号数组 */
-    onChannelChange?: (channelSNum: string[]) => void;
-    /** 宽度 */
-    width?: number | string;
-    /** 高度 */
-    height?: number | string;
-}
-export type ChannelType = {
-    /** 通道号 */
-    channelNum: string;
-    /** 设备ID */
-    deviceId?: string;
-    /** 租户ID */
-    tenantId?: string;
-    /** 协议 */
-    protocol?: string;
-};
-interface State {
-    /** 展开/收缩 */
-    expand: boolean;
-    /** 网格布局 */
-    grid: 1 | 2 | 3;
-    /** 当前激活网格 */
-    activeIndex: number;
-    /** 通道配置 */
-    channels: ChannelType[];
-}
-const DEFAULT_GRID = 2;
-const DEFAULT_ACTIVE = 0;
-const DEFAULT_CHANNELS: ChannelType[] = Array(9).fill({ channelNum: '' });
-/**
- * 实时分屏组件
- */
-const LiveControl = forwardRef<LiveControlHandle, LiveControlProps>((props, ref) => {
-    const { height = '100%', width = '100%', onExpandChange, onChannelChange } = props;
-    const [state, setState] = useSetState<State>({
-        expand: true,
-        grid: DEFAULT_GRID,
-        activeIndex: DEFAULT_ACTIVE,
-        channels: DEFAULT_CHANNELS,
-    });
-    const wrapRef = useRef<HTMLDivElement>(null);
-    const [isFullscreen, { toggleFullscreen }] = useFullscreen(wrapRef);
-    useImperativeHandle(ref, () => {
-        return {
-            load: (channel) => {
-                const index = state.channels.findIndex((c) => c.channelNum === channel.channelNum);
-                if (~index) {
-                    setState({ activeIndex: index }); // 如果通道号已经存在，则设置激活索引为该通道
-                } else {
-                    // 播放该通道
-                    const newChannels = [...state.channels];
-                    newChannels[state.activeIndex] = channel;
-                    const activeIndex = getActiveIndex(newChannels, state.grid, state.activeIndex);
-                    setState({ channels: newChannels, activeIndex });
-                }
-            },
-            multiLoad: (channels) => {
-                let grid: 1 | 2 | 3 = 1;
-                if (channels.length > 1) grid = 2;
-                if (channels.length > 4) grid = 3;
-                const newChannels = [];
-                for (let i = 0; i < 9; i++) {
-                    newChannels.push(channels[i] ? channels[i] : { channelNum: '' });
-                }
-                setState({ grid, channels: newChannels });
-            },
-            unLoad: (channelNum) => {
-                const index = state.channels.findIndex((c) => c.channelNum === channelNum);
-                if (~index) {
-                    // 卸载通道
-                    const newChannels = [...state.channels];
-                    newChannels[index] = { channelNum: '' };
-                    setState({ channels: newChannels });
-                }
-            },
-        };
-    });
-    useEffect(() => {
-        if (onChannelChange) {
-            onChannelChange(state.channels.filter((c) => !!c.channelNum).map((c) => c.channelNum));
-        }
-    }, [state.channels]);
-    const handleCloseAll = () => {
-        setState({ channels: DEFAULT_CHANNELS });
-    };
-
-    const handleExpand = () => {
-        onExpandChange && onExpandChange(!state.expand);
-        setState({ expand: !state.expand });
-    };
-
-    const getGridItems = () => {
-        const items = [];
-        for (let i = 0; i < state.grid * state.grid; i++) {
-            const element = (
-                <GridItem
-                    active={state.activeIndex === i}
-                    key={i}
-                    onClick={() => setState({ activeIndex: i })}
-                    channel={state.channels[i]}
-                    onClose={() => {
-                        const newChannels = [...state.channels];
-                        newChannels[i] = { channelNum: '' };
-                        setState({ channels: newChannels });
-                    }}
-                />
-            );
-            items.push(element);
-        }
-        return items;
-    };
-
-    return (
-        <div className="vtx-live-control" ref={wrapRef} style={{ height, width }}>
-            <div className={`player-grid-container _${state.grid}`}>{getGridItems()}</div>
-            <div className="controls">
-                <Space className="left" size={12} align="center">
-                    {onExpandChange && (
-                        <Tooltip title={state.expand ? '收起' : '展开'}>
-                            <div onClick={handleExpand}>
-                                {state.expand ? <FoldIcon /> : <ExpandIcon />}
-                            </div>
-                        </Tooltip>
-                    )}
-                </Space>
-                <Space className="right" size={12} align="center">
-                    <Tooltip title="全部关闭">
-                        <div>
-                            <CloseAllIcon onClick={handleCloseAll} />
-                        </div>
-                    </Tooltip>
-                    <Tooltip title="1分屏">
-                        <div>
-                            <Grid1x1Icon
-                                active={state.grid === 1}
-                                onClick={() => setState({ grid: 1 })}
-                            />
-                        </div>
-                    </Tooltip>
-                    <Tooltip title="4分屏">
-                        <div>
-                            <Grid2x2Icon
-                                active={state.grid === 2}
-                                onClick={() => setState({ grid: 2 })}
-                            />
-                        </div>
-                    </Tooltip>
-                    <Tooltip title="9分屏">
-                        <div>
-                            <Grid3x3Icon
-                                active={state.grid === 3}
-                                onClick={() => setState({ grid: 3 })}
-                            />
-                        </div>
-                    </Tooltip>
-                    <Tooltip title="全屏">
-                        <div>
-                            {isFullscreen ? (
-                                <ExitFullScreenIcon onClick={toggleFullscreen} />
-                            ) : (
-                                <FullScreenIcon onClick={toggleFullscreen} />
-                            )}
-                        </div>
-                    </Tooltip>
-                </Space>
-            </div>
-        </div>
-    );
-});
-LiveControl.displayName = 'LiveControl';
-
-interface GridItemProps {
-    /** 选中状态 */
-    active: boolean;
-    /** 通道属性 */
-    channel: ChannelType;
-    /** 点击操作回调 */
-    onClick: () => void;
-    /** 关闭操作回调 */
-    onClose: () => void;
-}
-const GridItem: React.FC<GridItemProps> = (props) => {
-    const { active, onClick, channel, onClose } = props;
-    const empty = !channel.channelNum;
-    const { data } = useRequest(() => getPreviewUrl(channel as Required<ChannelType>), {
-        ready: !!channel.channelNum,
-        refreshDeps: [channel.channelNum],
-    });
-    const name = `${data?.deviceName}-${data?.channelName}`;
-    return (
-        <div className={`grid-item-container ${active ? 'active' : ''}`} onClick={onClick}>
-            {data && !empty && (
-                <>
-                    <PlayerHeader name={name} onClose={onClose} />
-                    <div className="content">
-                        <VtxLivePlayer url={data.url} captureName={name} talkUrl={data.apiUrl} />
-                    </div>
-                </>
-            )}
-        </div>
-    );
-};
-
-/**
- * 获取当前激活的网格
- * @param channels 现有通道数组
- * @param grid 当前网格状态
- * @param currentIndex 当前索引
- * @returns
- */
-const getActiveIndex = (channels: ChannelType[], grid: 1 | 2 | 3, currentIndex: number) => {
-    const currentChannels = channels.slice(0, grid * grid);
-    for (let i = currentIndex + 1; i < currentChannels.length; i++) {
-        if (!currentChannels[i].channelNum) return i;
-    }
-    for (let i = 0; i < currentIndex; i++) {
-        if (!currentChannels[i].channelNum) return i;
-    }
-    return currentIndex;
-};
-export default LiveControl;

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

@@ -1,71 +0,0 @@
-.vtx-live-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;
-        opacity: 0;
-        transition: opacity 0.5s;
-
-        .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;
-        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/live-player/index.stories.mdx

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

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

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

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

@@ -1,118 +0,0 @@
-import './index.less';
-
-import { useEffect, useRef } from 'react';
-
-import { useFullscreen, useSetState } from 'ahooks';
-import { Space } from 'antd';
-
-import {
-    CloudControlPanel,
-    CloudControlPanelProps,
-    LoadingState,
-    TalkControl,
-    VolumeControl,
-} from '@/components/controls';
-import Player, { VideoType } from '@/components/player';
-import { CaptureIcon, CloudControlIcon, ExitFullScreenIcon, FullScreenIcon } from '@/icons';
-import { guidGenerator } from '@/utils';
-
-interface VtxPlayerProps {
-    /** 视频流地址 */
-    url: string;
-    /** 宽度 */
-    width?: number;
-    /** 高度 */
-    height?: number;
-    /** 视频流格式，如果为空则根据url自行判断 */
-    type?: VideoType;
-    /** 截图文件名 */
-    captureName?: string;
-    /** 对讲地址 */
-    talkUrl?: string;
-    /** 云台控制 */
-    cloudParams?: CloudControlPanelProps;
-}
-type State = {
-    /** 播放状态 */
-    play: boolean;
-    /** 错误状态 */
-    error: boolean;
-    /** 加载状态 */
-    loading: boolean;
-    /** 音量 */
-    volume: number;
-    /** id */
-    id: string;
-    /** 是否展示云台面板 */
-    showCloudPanel: boolean;
-};
-export const LivePlayer = (props: VtxPlayerProps) => {
-    const { url, width = '100%', height = '100%', captureName, type, talkUrl, cloudParams } = props;
-    const ref = useRef<HTMLDivElement>(null);
-    const wrapRef = useRef<HTMLDivElement>(null);
-    const controlsRef = useRef<HTMLDivElement>(null);
-    const playerRef = useRef<Player>();
-    const [isFullscreen, { toggleFullscreen }] = useFullscreen(wrapRef);
-    const [state, setState] = useSetState<State>({
-        play: false,
-        error: false,
-        loading: false,
-        id: 'vtx_hk_player_' + guidGenerator(),
-        volume: 0,
-        showCloudPanel: false,
-    });
-    useEffect(() => {
-        const container = ref.current;
-        if (!url || !container) return;
-        const player = new Player({ url, container, type });
-        playerRef.current = player;
-        setState({ loading: true });
-        player
-            .play()
-            .then(() => setState({ play: true, error: false }))
-            .catch(() => setState({ error: true }))
-            .finally(() => setState({ loading: false }));
-        return () => {
-            player.destroy();
-            setState({ error: false, loading: false, play: false });
-        };
-    }, [url]);
-    const handleCapture: React.MouseEventHandler = (e) => {
-        const player = playerRef.current;
-        player && player.capture(captureName);
-        e.stopPropagation();
-    };
-    const handleFullScreen: React.MouseEventHandler = (e) => {
-        toggleFullscreen();
-        const player = playerRef.current;
-        player && player.resize();
-        e.stopPropagation();
-    };
-    return (
-        <div className="vtx-live-player" ref={wrapRef} style={{ width, height }}>
-            <div ref={ref} style={{ height: '100%', width: '100%' }} id={state.id} />
-            {/* {state.error && <ErrorState onClick={handleRetry} />} */}
-            {state.loading && <LoadingState />}
-            {state.showCloudPanel && cloudParams && <CloudControlPanel {...cloudParams} />}
-            <div className="controls" ref={controlsRef}>
-                <Space className="right" size={12} align="center">
-                    <VolumeControl player={playerRef.current} container={controlsRef.current} />
-                    <CaptureIcon onClick={handleCapture} />
-                    {talkUrl && <TalkControl player={playerRef.current} url={talkUrl} />}
-                    {cloudParams && (
-                        <CloudControlIcon
-                            active={state.showCloudPanel}
-                            onClick={() => setState({ showCloudPanel: !state.showCloudPanel })}
-                        />
-                    )}
-                    {isFullscreen ? (
-                        <ExitFullScreenIcon onClick={handleFullScreen} />
-                    ) : (
-                        <FullScreenIcon onClick={handleFullScreen} />
-                    )}
-                </Space>
-            </div>
-        </div>
-    );
-};
-export default LivePlayer;