educast-classroom-sdk 1.0.0

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

@@ -0,0 +1,149 @@
+import { WindowID } from '@classroom/infra/api';
+import { AGError, Logger } from 'agora-rte-sdk';
+import { ConfirmDialogAction, OrientationEnum } from '../type';
+export declare enum DialogCategory {
+    CloudDriver = 0,
+    Roster = 1,
+    LectureRoster = 2,
+    KickOut = 3,
+    ErrorGeneric = 4,
+    Confirm = 5,
+    DeviceSetting = 6,
+    ScreenPicker = 7,
+    BreakoutRoom = 8,
+    Quit = 9,
+    ScreenShare = 10,
+    RemoteControlConfirm = 11,
+    VideoGallery = 12,
+    InvitePodium = 13,
+    InviteConfirm = 14
+}
+export interface ToastType {
+    id: string;
+    desc: string;
+    type?: ToastTypeEnum;
+}
+export declare type ToastTypeEnum = 'success' | 'error' | 'warning' | 'info' | 'normal';
+export interface DialogType {
+    id: string;
+    category: DialogCategory;
+    props?: unknown;
+}
+export declare class EduShareUIStore {
+    protected readonly logger: Logger;
+    readonly classroomViewportClassName = "classroom-viewport";
+    readonly classroomViewportTransitionDuration = 300;
+    readonly navHeight = 27;
+    private _viewportAspectRatio;
+    private _classroomMinimumSize;
+    private _containerNode;
+    private _matchMedia;
+    private _resizeEventListenerAdded;
+    /**
+     * 教室UI布局完毕
+     */
+    layoutReady: boolean;
+    /**
+     * 模态框列表
+     */
+    dialogQueue: DialogType[];
+    /**
+     * Toast 列表
+     */
+    toastQueue: ToastType[];
+    /**
+     * 视口尺寸信息
+     */
+    classroomViewportSize: {
+        width: number;
+        height: number;
+        h5Width?: number;
+        h5Height?: number;
+    };
+    orientation: OrientationEnum;
+    forceLandscape: boolean;
+    get isLandscape(): boolean;
+    setForceLandscape(forceLandscape: boolean): void;
+    /**
+     * 添加一条 单例 Toast 信息
+     * @param desc
+     * @returns
+     */
+    addSingletonToast(desc: string, type: ToastTypeEnum): string;
+    /**
+     * 显示一条 Toast 信息
+     * @param desc
+     * @param type
+     * @returns
+     */
+    addToast(desc: string, type?: ToastTypeEnum): string;
+    /**
+     * 移除 Toast 信息
+     * @param id
+     * @returns
+     */
+    removeToast(id: string): string;
+    /**
+     * 显示错误提示模态框
+     * @param error
+     * @param opts
+     */
+    addGenericErrorDialog(error: AGError, opts?: {
+        onOK?: () => void;
+        okBtnText?: string;
+    }): void;
+    /**
+     * 显示确认模态框
+     * @param title
+     * @param content
+     * @param onOK
+     * @param actions
+     * @param onCancel
+     */
+    addConfirmDialog(title: string, content: string, { onOK, actions, onCancel, btnText, timeout, }?: {
+        onOK?: () => void;
+        actions?: ConfirmDialogAction[];
+        onCancel?: () => void;
+        btnText?: Record<ConfirmDialogAction, string>;
+        timeout?: number;
+    }): string;
+    /**
+     * 显示模态框
+     * @param category
+     * @param props
+     * @returns
+     */
+    addDialog(category: DialogCategory, props?: any): any;
+    /**
+     * 移除模态框
+     * @param id
+     */
+    removeDialog(id: string): void;
+    /** Actions */
+    /**
+     * 更新教室视口尺寸信息
+     */
+    updateClassroomViewportSize(): void;
+    handleOrientationchange(): void;
+    /**
+     设置 Resize 事件处理器
+     */
+    addWindowResizeEventListener(): void;
+    /**
+     * 移除 Resize 事件处理器
+     */
+    removeWindowResizeEventListener(): void;
+    addOrientationchange(): void;
+    removeOrientationchange(): void;
+    showWindow(windowID: WindowID): void;
+    hideWindow(windowID: WindowID): void;
+    openWindow(windowID: WindowID, payload: {
+        args?: Record<string, string | number | boolean>;
+        options?: Record<string, string | number | boolean>;
+    }): void;
+    moveWindowToTargetScreen(windowID: WindowID, screenId: string, options: Record<string, string | number | boolean>): void;
+    moveWindowAlignToWindow(windowID: WindowID, windowIDAlignTo: WindowID, options: Record<string, string | number | boolean>): void;
+    closeWindow(windowID: WindowID): void;
+    addViewportResizeObserver(callback: () => void): ResizeObserver;
+    setLayoutReady(ready: boolean): void;
+}

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 = "#357bf6",
+    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;
+};