WindowManager

中文

WindowManager is a window management system based on white-web-sdk InvisiblePlugin implementation.

This application provides the following.

1. provides NetlessApp plug-in API system
2. support APP to open as a window
3. support application synchronization in each end
4. cursor synchronization
5. view angle following

Content list

• Install
• QuickStart
• concept
• references
• migration from whiteboard
• replay
• advanced use
  • view-follow
• Develop custom APP

Install

pnpm

$ pnpm install @netless/window-manager

yarn

$ yarn install @netless/window-manager

QuickStart

import { White-WebSdk } from "white-web-sdk";
import { WindowManager, BuiltinApps } from "@netless/window-manager";
import "@netless/window-manager/dist/style.css";

const sdk = new WhiteWebSdk({
    appIdentifier: "appIdentifier",
    useMobXState: true // make sure this option is turned on
});

sdk.joinRoom({
    uuid: "room uuid",
    roomToken: "room token",
    invisiblePlugins: [WindowManager],
    useMultiViews: true, // Multi-window must be enabled with useMultiViews
    disableMagixEventDispatchLimit: true, // Make sure this option is turned on
}).then(async room => {
    const manager = await WindowManager.mount(
        room,
        container
        // See below for full configuration
    );
});

mount full parameter

containerSizeRatio In order to ensure that the window is displayed at different resolutions, the whiteboard can only be synchronized in the same scale area

MainView

MainView, the main whiteboard, is the main whiteboard that sits underneath all windows.

Because of the multiple windows, we abstracted out a main whiteboard, and migrated some of the previous operations on room to mainView operations

collector

collector is the icon when the window is minimized, default size width: 40px; height: 40px;

Cursor synchronization

The original cursorAdapter in SDK is not available in multi-window, if you need cursor synchronization, you need to enable cursor option in manager.

sdk.joinRoom({
    // cursorAdapter: cursorAdapter, the original cursorAdapter in sdk needs to be turned off
    userPayload: {
        userId: "user id",
        cursorName: "cursor name",
        avatar: "User avatar link",
    },
});

WindowManager.mount({
    cursor: true, // turn on cursor synchronization
});

APP

Static and dynamic PPTs are inserted into the whiteboard as App, and persisted to the whiteboard

App may be created automatically when the page is refreshed, no need to insert it repeatedly

If the App requires a scenePath, then a scenePath can only be opened at the same time, requiring a unique App instance

Add static/dynamic PPT to whiteboard

const appId = await manager.addApp({
    kind: BuiltinApps.DocsViewer,
    options: {
        scenePath: "/docs-viewer",
        title: "docs1", // optional
        scenes: [], // SceneDefinition[] Static/Dynamic Scene data
    },
});

Add audio and video to the whiteboard

const appId = await manager.addApp({
    kind: BuiltinApps.MediaPlayer,
    options: {
        title: "test.mp3", // optional
    },
    attributes: {
        src: "xxxx", // audio/video url
    },
});

Set follow mode

Only the broadcast side, i.e. the teacher, needs to set the follow mode, the other side of the main whiteboard will follow the view of the broadcast side

Note that manager's setViewMode cannot be used at the same time as room.setViewMode.

manager.setViewMode("broadcaster"); // turn on follow mode
manager.setViewMode("freedom"); // turn off follow mode

Get the current broadcaster ID

manager.broadcaster

Set readonly for all apps

manager.setReadonly(true); // all windows become readonly
manager.setReadonly(false); // unlock the readonly setting, note that if the current whiteboard isWritable is false, the whiteboard's state is the highest priority

Toggle mainView to writable state

manager.switchMainViewToWriter();

Switch mainView scenePath

Switch the ScenePath of the main whiteboard and set the main whiteboard to writable state

manager.setMainViewScenePath(scenePath);

toggle mainView sceneIndex

Toggles the SceneIndex of the main whiteboard and sets the main whiteboard to writable state

manager.setMainViewSceneIndex(sceneIndex);

Get the mainView scenePath

manager.getMainViewScenePath();

Get mainView sceneIndex

manager.getMainViewSceneIndex();

Listen to the mainView mode

manager.emitter.on("mainViewModeChange", mode => {
    // mode type is ViewVisionMode
});

Listening for window maximization and minimization

manager.emitter.on("boxStateChange", state => {
    if (state === "maximized") {
        // maximize
    }
    if (state === "minimized") {
        // minimized
    }
    if (state === "normal") {
        // return to normal
    }
});

Listening for broadcaster changes

manager.emitter.on("broadcastChange", id => {
    // broadcast id changed
})

Close the App

manager.closeApp(appId);

Manually destroy WindowManager

manager.destroy();

Development process

pnpm install

pnpm build

cd example

pnpm install

pnpm dev