@vtx/player 0.0.1 → 0.0.2

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

@@ -1,205 +0,0 @@
-import './index.less';
-
-import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
-
-import { useFullscreen, useSetState } from 'ahooks';
-import { Slider, Space } from 'antd';
-import moment from 'moment';
-
-import { LoadingState, SpeedControl, VolumeControl } from '@/components/controls';
-import Player, { VideoType } from '@/components/player';
-import { CaptureIcon, ExitFullScreenIcon, FullScreenIcon, PauseIcon, PlayIcon } from '@/icons';
-import { TimeFormat, guidGenerator, secondsToTime } from '@/utils';
-
-export type HistoryPlayerHandle = {
-    /**
-     * 跳转，目前仅支持海康视频跳转
-     */
-    seekTo: (time: string) => Promise<void>;
-};
-interface VtxPlayerProps {
-    /** 视频流地址 */
-    url: string;
-    /** 视频流格式，如果为空则根据url自行判断 */
-    type?: VideoType;
-    /** 开始时间，格式为：YYYY-MM-DD HH:mm:ss */
-    startTime: string;
-    /** 结束时间，格式为：YYYY-MM-DD HH:mm:ss  */
-    endTime: string;
-    /** 宽度 */
-    width?: number;
-    /** 高度 */
-    height?: number;
-    /** 截图文件名 */
-    captureName?: string;
-    /** 控制条bottom */
-    controlBottom?: number;
-    /** 播放器进度回调，time:YYYY-MM-DD HH:mm:ss */
-    onTimeChange?: (time: string) => void;
-}
-type State = {
-    /** 播放状态 */
-    play: boolean;
-    /** 错误状态 */
-    error: boolean;
-    /** 加载状态 */
-    loading: boolean;
-    /** 音量 */
-    volume: number;
-    /** id */
-    id: string;
-    /** 当前时间 */
-    currentTime: number;
-    /** 进度 */
-    progress: number;
-    /** 控制器状态 */
-    controls: {
-        /** 进度条是否可用 */
-        progress: boolean;
-    };
-};
-export const HistoryPlayer = forwardRef<HistoryPlayerHandle, VtxPlayerProps>((props, ref) => {
-    const {
-        url,
-        type,
-        width = '100%',
-        height = '100%',
-        captureName,
-        controlBottom = 0,
-        startTime,
-        endTime,
-        onTimeChange,
-    } = props;
-    const totalTime = moment(endTime).diff(moment(startTime), 'seconds');
-    const containerRef = 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,
-        currentTime: 0,
-        progress: 0,
-        controls: {
-            progress: true,
-        },
-    });
-    useImperativeHandle(ref, () => {
-        return {
-            seekTo: (time) => {
-                const player = playerRef.current;
-                if (player) {
-                    const currentTime = moment(time).diff(moment(startTime), 'seconds');
-                    return player.seekTo(currentTime);
-                } else {
-                    return Promise.reject();
-                }
-            },
-        };
-    });
-    useEffect(() => {
-        const container = containerRef.current;
-        if (!url || !container) return;
-        const player = new Player({ url, container, live: false, startTime, endTime, type });
-        playerRef.current = player;
-        setState({ loading: true, controls: { progress: player.type === 'hk_ws' } });
-        console.log(player.type);
-        player
-            .playBack()
-            .then(() => setState({ play: true, error: false }))
-            .catch(() => setState({ error: true }))
-            .finally(() => setState({ loading: false }));
-
-        player.onTimeUpdate((currentTime) => {
-            setState({ currentTime, progress: Math.floor((currentTime / totalTime) * 100) });
-            onTimeChange &&
-                onTimeChange(
-                    moment(startTime).add(currentTime, 'seconds').format(TimeFormat.default)
-                );
-        });
-        return () => {
-            player.destroy();
-            setState({ error: false, loading: false, play: false });
-        };
-    }, [url, startTime, endTime]);
-    /** 截图方法 */
-    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();
-    };
-    /** 进度条控制器 */
-    const handleSlider = (value: number) => {
-        const currentTime = Math.floor((totalTime * value) / 100);
-        const player = playerRef.current;
-        setState({ progress: value });
-        player?.seekTo(currentTime);
-    };
-    /** 暂停方法 */
-    const handlePause = () => {
-        const player = playerRef.current;
-        player?.pause(() => {
-            setState({ play: false });
-        });
-    };
-    /** 恢复播放方法 */
-    const handleResume = () => {
-        const player = playerRef.current;
-        player?.resume(() => {
-            setState({ play: true });
-        });
-    };
-    return (
-        <div className="vtx-history-player" ref={wrapRef} style={{ width, height }}>
-            <div ref={containerRef} style={{ height: '100%', width: '100%' }} id={state.id} />
-            {/* {state.error && <ErrorState onClick={handleRetry} />} */}
-            {state.loading && <LoadingState />}
-            <div className="controls" ref={controlsRef} style={{ bottom: controlBottom }}>
-                {state.play ? (
-                    <PauseIcon onClick={handlePause} />
-                ) : (
-                    <PlayIcon onClick={handleResume} />
-                )}
-                <div className="time">
-                    <span className="current">{secondsToTime(state.currentTime)}</span>
-                    <span className="total">/{secondsToTime(totalTime)}</span>
-                </div>
-                <div className="slider">
-                    <Slider
-                        disabled={!state.controls.progress}
-                        tipFormatter={null}
-                        onChange={handleSlider}
-                        value={state.progress}
-                    />
-                </div>
-                <Space className="right" size={12} align="center">
-                    <VolumeControl
-                        player={playerRef.current}
-                        defaultValue={0}
-                        container={controlsRef.current}
-                    />
-                    <SpeedControl player={playerRef.current} container={controlsRef.current} />
-                    <CaptureIcon onClick={handleCapture} />
-                    {isFullscreen ? (
-                        <ExitFullScreenIcon onClick={handleFullScreen} />
-                    ) : (
-                        <FullScreenIcon onClick={handleFullScreen} />
-                    )}
-                </Space>
-            </div>
-        </div>
-    );
-});
-HistoryPlayer.displayName = 'HistoryPlayer';
-export default HistoryPlayer;

package/src/components/live-channel-player/index.stories.mdx

@@ -1,29 +0,0 @@
-import LiveChannelPlayer from '.';
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Alert, Space } from 'antd';
-
-import * as stories from './index.stories';
-
-<Meta title="组件/实时播放器-通道ID" component={LiveChannelPlayer} />
-
-# 实时播放器-通道 ID
-
-## 引入
-
-```js
-import { LiveChannelPlayer } from '@vtx/player';
-```
-
-## 说明
-
-基于 LivePlayer，参数变为 videoChannelId,在组件内部进行数据请求获得视频流地址。
-
-## 属性
-
-<ArgsTable of={LiveChannelPlayer} />
-
-## 例子
-
-<Canvas>
-    <Story name="实时播放器-通道ID" story={stories.Default} />
-</Canvas>

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

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

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

@@ -1,79 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { CloudControlPanelProps, CloudControlType } from '../controls';
-import LivePlayer from '../live-player';
-import { useRequest } from 'ahooks';
-
-import { getPreviewUrl, loadVideoChannel } from '@/api';
-import { GetPreviewUrlResp } from '@/api/types';
-
-interface LiveChannelPlayerProps {
-    /** 通道ID */
-    channelId: string;
-    /** 租户ID */
-    tenantId: string;
-    /** 宽度 */
-    width?: number;
-    /** 高度 */
-    height?: number;
-    /** 视频流格式，如果为空则根据url自行判断 */
-}
-/**
- * 基于通道ID的实时播放器
- * @param props
- * @returns
- */
-export const LiveChannelPlayer = (props: LiveChannelPlayerProps) => {
-    const { channelId, tenantId, width, height } = props;
-    const [params, setParams] = useState<GetPreviewUrlResp>();
-    const { runAsync: getChannelInfo } = useRequest(loadVideoChannel, { manual: true });
-    const { runAsync: getVideoUrl } = useRequest(getPreviewUrl, { manual: true });
-    const getVideoInfo = async () => {
-        const channel = await getChannelInfo(channelId, tenantId);
-        const videoInfo = await getVideoUrl({
-            tenantId,
-            channelNum: channel.channelNum,
-            deviceId: channel.videoDeviceId,
-        });
-        setParams(videoInfo);
-    };
-    const getCloudParams = (): CloudControlPanelProps | undefined => {
-        const ptzType = params?.ptzType;
-        if (ptzType) {
-            let type: CloudControlType = 'none';
-            if (ptzType === 1) {
-                type = 'all';
-            } else if (ptzType === 2) {
-                type = 'onlyFocus';
-            } else if (ptzType === 3) {
-                type = 'onlyRotate';
-            }
-            return {
-                query: {
-                    tenantId,
-                    channelNum: params.channelNum,
-                    deviceId: params.deviceId,
-                },
-                type,
-            };
-        }
-    };
-    useEffect(() => {
-        if (channelId && tenantId) getVideoInfo();
-    }, [channelId]);
-
-    return (
-        params && (
-            <LivePlayer
-                url={params.url}
-                width={width}
-                height={height}
-                talkUrl={params.beenHasVideo ? params.apiUrl : ''}
-                captureName={`${params.deviceName}-${params.channelName}`}
-                cloudParams={getCloudParams()}
-            />
-        )
-    );
-};
-
-export default LiveChannelPlayer;

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

@@ -1,65 +0,0 @@
-.vtx-live-control {
-    display: flex;
-    flex-direction: column;
-
-    .player-grid-container {
-        display: grid;
-        flex-grow: 1;
-        grid-gap: 1px;
-        height: 0;
-        background-color: rgb(0 0 0 / 80%);
-
-        &._1 {
-            grid-template-rows: 1fr;
-            grid-template-columns: 1fr;
-        }
-
-        &._2 {
-            grid-template-rows: 1fr 1fr;
-            grid-template-columns: 1fr 1fr;
-        }
-
-        &._3 {
-            grid-template-rows: 1fr 1fr 1fr;
-            grid-template-columns: 1fr 1fr 1fr;
-        }
-
-        .grid-item-container {
-            display: flex;
-            flex-direction: column;
-            min-width: 0;
-            min-height: 0;
-            background-color: #2b3d51;
-            background-image: url('./images/empty.png');
-            background-repeat: no-repeat;
-            background-position: center;
-
-            &.active {
-                box-shadow: 0 0 0 1px #52c41a;
-            }
-
-            > .content {
-                flex-grow: 1;
-                height: 0;
-            }
-        }
-    }
-
-    .controls {
-        display: flex;
-        align-items: center;
-        width: 100%;
-        height: 32px;
-        padding: 0 12px;
-        background-color: #243241;
-    
-        .right {
-            margin-left: auto;
-    
-            > div {
-                height: 24px;
-            }
-        }
-    }
-}
-

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

@@ -1,66 +0,0 @@
-import LiveControl from '.';
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-
-import * as stories from './index.stories';
-
-<Meta title="组件/实时视频控制器"/>
-
-# 实时视频控制器
-
-
-## 引入
-
-```js
-import { LiveControl } from '@vtx/player';
-```
-
-## 方法调用
-
-```tsx
-import { LiveControl } from '@vtx/player';
-
-const MyApp = () => {
-    const ref = useRef<LiveControlHandle>(null);
-    const params = {};
-    return (
-        <div>
-            <button onClick={() => ref.load(params)}>加载视频</button>
-            <LiveControl ref={ref} />
-        </div>
-    );
-};
-```
-
-## 方法类型
-
-```ts
-type LiveControlHandle = {
-    /** 加载视频 */
-    load: (channel: ChannelType) => void;
-    /** 卸载视频，参数为通道编号 */
-    unLoad: (channelNum: string) => void;
-    /** 一次加载多个视频，适用于初始化 */
-    multiLoad: (channels: ChannelType[]) => void;
-};
-
-type ChannelType = {
-    /** 通道号 */
-    channelNum: string;
-    /** 设备ID */
-    deviceId?: string;
-    /** 租户ID */
-    tenantId?: string;
-    /** 协议 */
-    protocol?: string;
-};
-```
-
-## 属性
-
-<ArgsTable of={LiveControl} />
-
-## 例子
-
-<Canvas>
-    <Story name="实时视频控制器" story={stories.Default} />
-</Canvas>

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

@@ -1,69 +0,0 @@
-import { useRef } from 'react';
-
-import LiveControl, { ChannelType, LiveControlHandle } from '.';
-import { ComponentStory } from '@storybook/react';
-import { Button, Form, Input, Space } from 'antd';
-
-const Template: ComponentStory<typeof LiveControl> = (args) => {
-    const ref = useRef<LiveControlHandle>(null);
-    const onFinish = (values: ChannelType) => {
-        const control = ref.current;
-        if (control) control.load(values);
-    };
-    return (
-        <Space size={24}>
-            <LiveControl ref={ref} {...args} />
-            <div>
-                <Form
-                    name="basic"
-                    labelCol={{ span: 8 }}
-                    wrapperCol={{ span: 16 }}
-                    onFinish={onFinish}
-                    initialValues={{
-                        channelNum: '87cc1a9de57a41e19344d4d3e75a5976',
-                        deviceId: '687a1c4765c0453ea58618e5c7c6d9dd',
-                        tenantId: '60edef2faea44a39a6385146f4fa131c',
-                    }}
-                    autoComplete="off"
-                >
-                    <Form.Item
-                        label="ChannelNum"
-                        name="channelNum"
-                        rules={[{ required: true, message: '请输入通道编号' }]}
-                    >
-                        <Input />
-                    </Form.Item>
-                    <Form.Item
-                        label="TenantId"
-                        name="tenantId"
-                        rules={[{ required: true, message: '请输入通租户ID' }]}
-                    >
-                        <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 wrapperCol={{ offset: 8, span: 16 }}>
-                        <Button type="primary" htmlType="submit">
-                            加载
-                        </Button>
-                    </Form.Item>
-                </Form>
-            </div>
-        </Space>
-    );
-};
-
-export const Default = Template.bind({});
-Default.args = {
-    height: 600,
-    width: 1000,
-};
-export default Default;