educast-classroom-sdk 2.4.1 → 2.4.3

package/lib/infra/stores/common/stream/index.d.ts

@@ -0,0 +1,257 @@
+import { AgoraRteMediaSourceState, AGRenderMode } from 'agora-rte-sdk';
+import { IReactionDisposer, Lambda } from 'mobx';
+import { EduUIStoreBase } from '../base';
+import { CameraPlaceholderType, EduStreamUI, StreamBounds } from './struct';
+import { EduStreamTool } from './tool';
+import { AgoraEduClassroomEvent, ClassroomState, EduStream } from 'agora-edu-core';
+import { ShareStreamStateKeeper } from './state-keeper';
+export declare enum StreamIconColor {
+    active = "#275db2",
+    deactive = "#bdbdca",
+    activeWarn = "#f04c36"
+}
+export declare class StreamUIStore extends EduUIStoreBase {
+    protected _disposers: (IReactionDisposer | Lambda)[];
+    /**
+     * 视频窗位置信息
+     */
+    /** @en
+     * video stream bounds
+     */
+    streamsBounds: Map<string, StreamBounds>;
+    shareScreenStateKeeperMap: Map<string, ShareStreamStateKeeper>;
+    settingsOpened: boolean;
+    get screenShareStateAccessor(): {
+        trackState: AgoraRteMediaSourceState;
+        classroomState: ClassroomState;
+    };
+    onInstall(): void;
+    _handleRewardsChange(e: AgoraEduClassroomEvent, params: unknown): void;
+    protected _setRenderAt(stream: EduStreamUI): void;
+    /**
+     * 奖励信息
+     */
+    awardAnims: {
+        id: string;
+        userUuid: string;
+    }[];
+    /**
+     * 分离窗口视频流
+     * @returns
+     */
+    get allUIStreams(): Map<string, EduStreamUI>;
+    /**
+     * 老师流信息（教室内只有一个老师时使用，如果有一个以上老师请使用 teacherStreams）
+     * @returns
+     */
+    get teacherCameraStream(): EduStreamUI | undefined;
+    /**
+     * 学生流信息（教室内只有一个学生时使用，如果有一个以上老师请使用 studentStreams）
+     * @returns
+     */
+    get studentCameraStream(): EduStreamUI | undefined;
+    /**
+     * 学生流信息（教室内只有一个学生时使用，如果有一个以上老师请使用 studentStreams）
+     * @returns
+     */
+    get studentCameraStreams(): EduStreamUI[];
+    /**
+     * 屏幕共享流
+     * @returns
+     */
+    get screenShareStream(): EduStream | undefined;
+    /**
+     * 获取远端流音量
+     * @returns
+     */
+    remoteStreamVolume: (stream: EduStreamUI) => number;
+    /**
+     * 本地音量
+     * @returns
+     */
+    get localVolume(): number;
+    /**
+     * 本地摄像头设备状态
+     * @returns
+     */
+    get localCameraTrackState(): AgoraRteMediaSourceState;
+    /**
+     * 本地麦克风设备状态
+     * @returns
+     */
+    get localMicTrackState(): AgoraRteMediaSourceState;
+    /**
+     * 本地屏幕共享状态
+     * @returns
+     */
+    get localScreenShareOff(): boolean;
+    /**
+     * 本地摄像头设备是否关闭
+     * @returns
+     */
+    get localCameraOff(): boolean;
+    /**
+     * 本地麦克风设备是否关闭
+     * @returns
+     */
+    get localMicOff(): boolean;
+    /**
+     * 镜像是否开启
+     * @returns
+     */
+    get isMirror(): boolean;
+    /**
+     * 白板授权用户列表
+     * @returns
+     */
+    get whiteboardGrantUsers(): Set<string>;
+    /**
+     * 视频窗口显示的挂件信息
+     * reward: 奖励信息
+     * grant: 授权状态
+     * @returns
+     */
+    get layerItems(): string[];
+    /**
+     * 远端流是否正在举手
+     * @returns
+     */
+    isWaveArm: (stream: EduStreamUI) => boolean;
+    /**
+     * 远端流奖励信息
+     * @returns
+     */
+    awards: (stream: EduStreamUI) => number;
+    /**
+     * 远端流奖励动画列表
+     * @returns
+     */
+    streamAwardAnims: (stream: EduStreamUI) => {
+        id: string;
+        userUuid: string;
+    }[];
+    /**
+     * 本地视频窗摄像头
+     * @returns
+     */
+    localCameraTool: () => EduStreamTool;
+    /**
+     * 本地视频窗麦克风
+     * @returns
+     */
+    localMicTool: () => EduStreamTool;
+    /**
+     * 本地视频窗上下台
+     * @returns
+     */
+    localPodiumTool: () => EduStreamTool;
+    /**
+     * 远端视频窗摄像头
+     * @returns
+     */
+    remoteCameraTool: (stream: EduStreamUI) => EduStreamTool;
+    /**
+     * 远端视频窗麦克风
+     * @returns
+     */
+    remoteMicTool: (stream: EduStreamUI) => EduStreamTool;
+    /**
+     * 远端视频窗上下台
+     * @returns
+     */
+    remotePodiumTool: (stream: EduStreamUI) => EduStreamTool;
+    /**
+     * 远端视频窗白板授权
+     * @returns
+     */
+    remoteWhiteboardTool: (stream: EduStreamUI) => EduStreamTool;
+    /**
+     * 远端视频窗奖励
+     * @returns
+     */
+    remoteRewardTool: (stream: EduStreamUI) => EduStreamTool;
+    /**
+     * 本地视频窗工具列表
+     * @returns
+     */
+    get localStreamTools(): EduStreamTool[];
+    /**
+     * 远端视频窗工具列表
+     * @returns
+     */
+    remoteStreamTools: (stream: EduStreamUI) => EduStreamTool[];
+    /**
+     * 本地音频图标
+     * @returns
+     */
+    get localMicIconType(): "microphone-on" | "microphone-off";
+    /**
+     * 本地视频占位符
+     * @returns
+     */
+    cameraPlaceholder: (stream: EduStreamUI) => CameraPlaceholderType;
+    /**
+     * 视频窗工具栏定位
+     * @returns
+     */
+    get toolbarPlacement(): 'left' | 'bottom';
+    /**
+     * 视频窗工具栏定位
+     * @returns
+     */
+    get toolbarOffset(): number[];
+    /**
+     * 大窗视频窗工具栏定位
+     * @returns
+     */
+    get fullScreenToolbarPlacement(): 'left' | 'bottom';
+    /**
+     * 大窗视频窗工具栏定位
+     * @returns
+     */
+    get fullScreenToolbarOffset(): number[];
+    /**
+     * 移除奖励动画
+     * @param id
+     */
+    removeAward(id: string): void;
+    /**
+     * 切换本地摄像头设备开关状态
+     */
+    toggleLocalVideo(): void;
+    /**
+     * 切换本地麦克风设备开关状态
+     */
+    toggleLocalAudio(): void;
+    /**
+     * 渲染本地 Stream 视频到 DOM
+     * @param stream
+     * @param dom
+     * @param mirror
+     * @returns
+     */
+    setupLocalVideo(dom: HTMLElement, mirror?: boolean, renderMode?: AGRenderMode): void;
+    /**
+     * 渲染远端 Stream 视频到 DOM
+     * @param stream
+     * @param dom
+     * @param mirror
+     * @param renderMode
+     * @returns
+     */
+    setupRemoteVideo(stream: EduStream, dom: HTMLElement, mirror: boolean, renderMode?: AGRenderMode): void;
+    /**
+     * 渲染本地屏幕共享到 DOM
+     * @param dom
+     */
+    setupLocalScreenShare(dom: HTMLElement): void;
+    /**
+     * 停止屏幕视频采集
+     * @returns
+     */
+    stopScreenShareCapture(): void;
+    setStreamBoundsByStreamUuid(streamUuid: string, bounds: StreamBounds): void;
+    removeStreamBoundsByStreamUuid(streamUuid: string): void;
+    setSettingsOpened(opened: boolean): void;
+    onDestroy(): void;
+}

package/lib/infra/stores/common/stream/state-keeper.d.ts

@@ -0,0 +1,18 @@
+import { AgoraRteMediaSourceState, AgoraRteThread } from 'agora-rte-sdk';
+export declare class ShareStreamStateKeeper extends AgoraRteThread {
+    private _timer?;
+    private _cancelTimer?;
+    private _timeout;
+    private _currentState;
+    private _targetState;
+    syncTo: (targetState: AgoraRteMediaSourceState) => Promise<void>;
+    constructor(syncTo: (targetState: AgoraRteMediaSourceState) => Promise<void>);
+    onExecution(): Promise<void>;
+    setShareScreenState(state: AgoraRteMediaSourceState): void;
+    run(): void;
+    stop(): void;
+    private _increaseTimeout;
+    private _runImmediately;
+    private _wait;
+    private _cancelWait;
+}

package/lib/infra/stores/common/stream/struct.d.ts

@@ -0,0 +1,63 @@
+import { EduRoleTypeEnum, EduStream } from 'agora-edu-core';
+import { AgoraFromUser } from 'agora-rte-sdk';
+export declare type VideoPlacement = 'Window' | 'Bar' | 'Setting' | 'Gallery';
+/**
+ * 业务流 UI 对象
+ */
+export declare class EduStreamUI {
+    private _renderAt;
+    readonly stream: EduStream;
+    constructor(stream: EduStream);
+    get micIconType(): "microphone-disabled" | "microphone-on" | "microphone-off";
+    get isCameraMuted(): boolean;
+    get isMicMuted(): boolean;
+    get fromUser(): AgoraFromUser;
+    get isMirrorMode(): boolean;
+    get role(): EduRoleTypeEnum;
+    get renderAt(): VideoPlacement;
+    setRenderAt(at: VideoPlacement): void;
+}
+export interface StreamBounds {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+    readonly top: number;
+    readonly right: number;
+    readonly bottom: number;
+    readonly left: number;
+    [key: string]: number;
+}
+/**
+ * 视频流占位符类型
+ */
+export declare enum CameraPlaceholderType {
+    /**
+     * 摄像头打开
+     */
+    none = "none",
+    /**
+     * 设备正在打开
+     */
+    loading = "loading",
+    /**
+     * 摄像头关闭
+     */
+    muted = "muted",
+    /**
+     * 摄像头损坏
+     */
+    broken = "broken",
+    /**
+     * 摄像头禁用
+     */
+    disabled = "disabled",
+    /**
+     * 老师不在教室
+     */
+    notpresent = "notpresent",
+    /**
+     * 老师摄像头占位符（大小窗场景）
+     */
+    nosetup = "nosetup"
+}

package/lib/infra/stores/common/stream/tool.d.ts

@@ -0,0 +1,32 @@
+import { IconWithState } from '@classroom/ui-kit/components/util/type';
+import { EduStream } from 'agora-edu-core';
+import { CameraPlaceholderType } from './struct';
+/**
+ * 视频窗工具类型
+ */
+export declare enum EduStreamToolCategory {
+    camera = 0,
+    microphone = 1,
+    whiteboard = 2,
+    podium = 3,
+    podium_all = 4,
+    star = 5,
+    stream_window_off = 6
+}
+/**
+ * 视频窗工具对象
+ */
+export declare class EduStreamTool {
+    iconType: IconWithState;
+    hoverIconType?: IconWithState;
+    interactable: boolean;
+    toolTip: string;
+    category: EduStreamToolCategory;
+    onClick?: () => void;
+    constructor(category: EduStreamToolCategory, iconType: IconWithState, toolTip: string, options?: {
+        interactable?: boolean;
+        onClick?: () => void;
+        hoverIconType?: IconWithState;
+    });
+}
+export declare const getCameraPlaceholder: (stream: EduStream) => CameraPlaceholderType.none | CameraPlaceholderType.muted | CameraPlaceholderType.disabled;

package/lib/infra/stores/common/stream-window/helper.d.ts

@@ -0,0 +1,101 @@
+import { StreamWindow, StreamWindowBounds, WidgetTrackStruct } from './type';
+export declare function isNum(num: unknown): boolean;
+/**
+ * 计算 8 宫格布局
+ * 当数量小于等于 3 的时候一行展示
+ *
+ *	 ┌───────┐
+ *	 │   1   │
+ *	 └───────┘
+ *
+ *	 ┌───────┬───────┐
+ *	 │   1   │   2   │
+ *	 └───────┴───────┘
+ *
+ *	 ┌───────┬───────┬───────┐
+ *	 │   1   │   2   │   3   │
+ *	 └───────┴───────┴───────┘
+ *
+ *
+ *	 当数量大于3的时候
+ *
+ *	 ┌───────┬───────┐
+ *	 │   3   │   4   │
+ *	 ├───────┼───────┤
+ *	 │   1   │   2   │
+ *	 └───────┴───────┘
+ *
+ *	┌───────────┬───────────┐
+ *	│     4     │     5     │
+ *	├───────┬───┴───┬───────┤
+ *	│   1   │   2   │   3   │
+ *	└───────┴───────┴───────┘
+ *
+ *	┌───────┬───────┬───────┐
+ *	│   4   │   5   │   6   │
+ *	├───────┼───────┼───────┤
+ *	│   1   │   2   │   3   │
+ *	└───────┴───────┴───────┘
+ *
+ *	┌───────────┬─────────┬─────────┐
+ *	│     5     │    6    │    7    │
+ *	├───────┬───┴───┬─────┴─┬───────┤
+ *	│   1   │   2   │   3   │   4   │
+ *	└───────┴───────┴───────┴───────┘
+ *
+ *	┌───────┬───────┬───────┬───────┐
+ *	│   5   │   6   │   7   │   8   │
+ *	├───────┼───────┼───────┼───────┤
+ *	│   1   │   2   │   3   │   4   │
+ *	└───────┴───────┴───────┴───────┘
+ *
+ * @param length
+ * @param width
+ * @param height
+ * @returns
+ */
+export declare const calculateSize: (length: number, width: number, height: number) => StreamWindowBounds[][];
+/**
+ * 计算 9 宫格布局
+ * 计算规则为 1^2  2^2 3^2
+ */
+export declare const calculateSizeSquare: (length: number, width: number, height: number) => StreamWindowBounds[][];
+/**
+ * 需要把 x, y 为可移动距离的比例
+ * 最大有效移动范围（Maximum Effective Distance, MED）：在不超出教室布局的前提下，分别能够在 X 轴、Y 轴方向移动的最大距离
+ * 移动偏移量：
+ * @param rect
+ */
+export declare const convertToWidgetTrackPos: (rect: StreamWindow, bigRect: {
+    width: number;
+    height: number;
+}) => {
+    position: {
+        xaxis: number;
+        yaxis: number;
+    };
+    size: {
+        width: number;
+        height: number;
+    };
+    extra: {
+        contain: boolean;
+        zIndex: number;
+    };
+};
+/**
+ * 把 widget 坐标转换为目前的用的坐标
+ * @param rect
+ * @param bigRect
+ */
+export declare const convertToRelativePos: (rect: WidgetTrackStruct, streamWindowRect: {
+    width: number;
+    height: number;
+}) => {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    zIndex: number;
+    contain: boolean;
+};

package/lib/infra/stores/common/stream-window/index.d.ts

@@ -0,0 +1,223 @@
+import { EduStream } from 'agora-edu-core';
+import { IReactionDisposer, Lambda } from 'mobx';
+import { DraggableData } from 'react-draggable';
+import { EduUIStoreBase } from '../base';
+import { StreamBounds } from '../stream/struct';
+import { StreamWindowWidget } from './struct';
+import { StreamWindow } from './type';
+export declare class StreamWindowUIStore extends EduUIStoreBase {
+    private _dataStore;
+    protected _disposers: (IReactionDisposer | Lambda)[];
+    private _snapshotPosition;
+    private _streamWindowFirstOffset;
+    private _streamWindowUpdatedFromRoom;
+    private _lowUuids;
+    private _highUuids;
+    private _streamWindowContainerBounds;
+    get minRect(): {
+        calculateCount: number;
+        minWidth: number;
+        minHeight: number;
+    };
+    get streamDraggable(): boolean;
+    get needDraggable(): boolean;
+    /**
+     *
+     */
+    get streamWindowMap(): Map<string, StreamWindowWidget>;
+    /**
+     *
+     */
+    get transitionStreams(): Map<string, boolean>;
+    /**
+     *
+     */
+    get tempStreamWindowPosMap(): Map<string, StreamWindowWidget>;
+    /**
+     * 正在拖拉的 streamUuid
+     */
+    get draggingStreamUuid(): string;
+    /**
+     * 讲台状态
+     */
+    get stageVisible(): boolean;
+    get streamWindowStreamUuids(): string[];
+    get streamWindowRealBoundsMap(): Map<string, StreamWindow>;
+    /**
+     *  用于 UI 展示
+     */
+    get streamWindows(): [string, StreamWindow][];
+    /**
+     * 是否有全屏展示的 streamWindow
+     */
+    get containedStreamWindow(): StreamWindowWidget | undefined;
+    /**
+     * 覆盖组件透明度（底部工具栏，侧边工具栏，举手按钮，聊天按钮）
+     */
+    get containedStreamWindowCoverOpacity(): 1 | 0.9;
+    /**
+     * 全屏展示的 streamWindow 数量
+     */
+    get containedStreamWindowSize(): number;
+    /**
+     * 返回没有在指定区域展示的 streams
+     */
+    get streamsShouldOffPodium(): EduStream[];
+    /**
+     * 小流ID
+     */
+    get lowStreamUuids(): Set<string>;
+    /**
+     * 拖拉权限控制
+     */
+    streamWindowLocked: (stream: EduStream) => boolean;
+    /**
+     * 是否存在 streamWindow widget
+     * true 代表大窗里有 stream
+     * false 代表大窗里没有 stream
+     */
+    visibleStream: (streamUuid: string) => boolean;
+    /**
+     * 设置大窗显示区域
+     * @param bounds
+     */
+    setMiddleContainerBounds(bounds: StreamBounds): void;
+    /**
+     * for drag
+     * @param param0
+     */
+    setStreamDragInformation({ stream, active, pos, }: {
+        stream: EduStream;
+        active: boolean;
+        pos: [number, number];
+    }): void;
+    /**
+     * 是否在多视频的容器内
+     * @param x
+     * @param y
+     * @returns
+     */
+    private _isMatchWindowContainer;
+    private _createStreamWindowByUuid;
+    private _addStreamWindowByUuid;
+    private _removeStreamWindowByUuid;
+    private _initStreamWindowSize;
+    /**
+     * 从小视频向拉创建 stream window
+     * @param streamUuid
+     */
+    private _createStreamWindow;
+    /**
+     *
+     * @param streamUuid
+     * @param pos
+     */
+    private _updateStreamWindow;
+    private _setValidStreamWindowOffset;
+    /**
+     * 值都是具体的数值
+     * @param streamUuid
+     * @param param1
+     */
+    private _setStreamWindowMap;
+    private _handleTempStreamWindowMap;
+    _setStreamWindowUpdate(status: boolean): void;
+    /**
+     * 双击视频窗口逻辑处理
+     * @param stream
+     * @returns
+     */
+    handleDBClickStreamWindow(stream: EduStream): void;
+    /**
+     * 双击全屏的时候
+     * 1. 讲台展示直接删除 streamwindow widget，
+     * 2. 讲台隐藏的时候需要查看之前窗口的位置，
+     *  2.1 如果有位置那么返回之前的位置
+     *  2.2 如果么位置那么创建一个位置不要重叠
+     * @param stream
+     * @returns
+     */
+    handleStreamWindowContain(stream: EduStream): void;
+    /**
+     * 设置重新计算后的 widget rect
+     * 需要要没有全屏的 widget 删除
+     */
+    private _handleCalculateContains;
+    /**
+     * 单击处理 zIndex 问题
+     * @param streamUuid
+     */
+    handleStreamWindowSingalClick(stream: EduStream): void;
+    /**
+     * https://github.com/facebook/react/issues/3185
+     * @param streamUuid
+     * @returns
+     */
+    handleStreamWindowClick(stream: EduStream): () => void;
+    private _calculateSize;
+    /**
+     * 获取全屏的视频
+     */
+    private _getStreamWindowContain;
+    setTransitionStreams(streamUuid: string): void;
+    removeTransitionStreams(streamUuid: string): void;
+    private _handleStageStreamAdded;
+    private _handleStageStreamRemoved;
+    private _handleClassroomUIEvents;
+    private _handleOffAllStreamWindow;
+    private _handleToggleTeacherStreamWindow;
+    /**
+     * 发送数据到远端，teacher only
+     */
+    sendWidgetDataToServer(streamUuid?: string): void;
+    /**
+     * 删除 widget streamwindow
+     * @param widgetUuid
+     */
+    private _deleteStreamWindowWidgetToServer;
+    /**
+     * for stream window drag
+     * @param e
+     * @param data
+     * @param streamUuid
+     * @param offsetX
+     * @returns
+     */
+    handleDrag(e: any, data: DraggableData, streamUuid: string, offsetX: number): void;
+    /**
+     * 区域内更新 streamsWindowMap 信息
+     * @param streamUuid
+     * @param streamWindowInfo
+     */
+    handleStreamWindowInfo(stream: EduStream, streamWindowInfo: {
+        x?: number;
+        y?: number;
+        width?: number;
+        height?: number;
+        zIndex?: number;
+        contain?: boolean;
+    }, sendToServer?: boolean): void;
+    private _handldeStreamWindowCollisionDetection;
+    /**
+     * 转换为 widget 坐标
+     * @returns
+     */
+    private _encodeWidgetRect;
+    private _createNewTempStreamWindow;
+    private _getTempStreamWindowPosCache;
+    private _handleToggleWhiteboard;
+    private _setRemoteStreamType;
+    removeStreamWindowByUuid(streamUuid: string): void;
+    handleWidgetInformationFromServer(widgets: any): void;
+    updateDraggingStreamUuid(streamUuid: string): void;
+    resetDraggingStreamUuid(): void;
+    /**
+     * 转换 widget 坐标方式
+     * @param widgetProps
+     * @returns
+     */
+    private _decodeWidgetRect;
+    private _setEventHandler;
+    onInstall(): void;
+    onDestroy(): void;
+}