@netless/window-manager 1.0.0-canary.8 → 1.0.0

package/src/index.ts

@@ -2,11 +2,12 @@ import pRetry from "p-retry";
 import { AppManager } from "./AppManager";
 import { appRegister } from "./Register";
 import { callbacks } from "./callback";
-import { checkVersion, setupWrapper } from "./Helper";
+import { checkVersion, createInvisiblePlugin, setupWrapper } from "./Helper";
+import { ContainerResizeObserver } from "./ContainerResizeObserver";
 import { createBoxManager } from "./BoxManager";
 import { CursorManager } from "./Cursor";
 import { DEFAULT_CONTAINER_RATIO, Events, INIT_DIR, ROOT_DIR } from "./constants";
-import { emitter } from "./InternalEmitter";
+import { internalEmitter } from "./InternalEmitter";
 import { Fields } from "./AttributesDelegate";
 import { initDb } from "./Register/storage";
 import { InvisiblePlugin, isPlayer, isRoom, RoomPhase, ViewMode } from "white-web-sdk";
@@ -29,7 +30,7 @@ import {
 } from "./Utils/Common";
 import type { TELE_BOX_STATE, BoxManager } from "./BoxManager";
 import * as Errors from "./Utils/error";
-import type { Apps, Position , ICamera, ISize } from "./AttributesDelegate";
+import type { Apps, Position } from "./AttributesDelegate";
 import type {
     Displayer,
     SceneDefinition,
@@ -54,6 +55,9 @@ import type { PublicEvent } from "./callback";
 import type Emittery from "emittery";
 import type { PageController, AddPageParams, PageState } from "./Page";
 import { boxEmitter } from "./BoxEmitter";
+import { IframeBridge } from "./View/IframeBridge";
+import { setOptions } from "@netless/app-media-player";
+export * from "./View/IframeBridge";
 
 export type WindowMangerAttributes = {
     modelValue?: string;
@@ -104,8 +108,6 @@ export type AppSyncAttributes = {
     isDynamicPPT?: boolean;
     fullPath?: string;
     createdAt?: number;
-    camera?: ICamera;
-    size?: ISize;
 };
 
 export type AppInitState = {
@@ -124,33 +126,53 @@ export type AppInitState = {
 
 export type CursorMovePayload = { uid: string; state?: "leave"; position: Position };
 
+export type CursorOptions = {
+    /**
+     * If `"custom"`, it will render the pencil / eraser cursor as a circle and shapes cursor as a cross.
+     *
+     * @default "default"
+     */
+    style?: "default" | "custom";
+};
+
 export type MountParams = {
     room: Room | Player;
     container?: HTMLElement;
     /** 白板高宽比例, 默认为 9 / 16 */
     containerSizeRatio?: number;
-    /** 显示 PS 透明背景，默认 true */
+    /** @deprecated 显示 PS 透明背景，默认 true */
     chessboard?: boolean;
     collectorContainer?: HTMLElement;
     collectorStyles?: Partial<CSSStyleDeclaration>;
     overwriteStyles?: string;
     cursor?: boolean;
+    cursorOptions?: CursorOptions;
     debug?: boolean;
     disableCameraTransform?: boolean;
     prefersColorScheme?: TeleBoxColorScheme;
     applianceIcons?: ApplianceIcons;
+    fullscreen?: boolean;
+    polling?: boolean;
+    supportAppliancePlugin?: boolean;
 };
 
-export const reconnectRefresher = new ReconnectRefresher({ emitter });
+export const reconnectRefresher = new ReconnectRefresher({ emitter: internalEmitter });
 
-export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> implements PageController {
+export class WindowManager
+    extends InvisiblePlugin<WindowMangerAttributes, any>
+    implements PageController
+{
     public static kind = "WindowManager";
     public static displayer: Displayer;
+    public static wrapper?: HTMLElement;
+    public static sizer?: HTMLElement;
     public static playground?: HTMLElement;
     public static container?: HTMLElement;
     public static debug = false;
     public static containerSizeRatio = DEFAULT_CONTAINER_RATIO;
+    public static supportAppliancePlugin?: boolean;
     private static isCreated = false;
+    private static _resolve = (_manager: WindowManager) => void 0;
 
     public version = __APP_VERSION__;
     public dependencies = __APP_DEPENDENCIES__;
@@ -164,10 +186,14 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
     public viewMode = ViewMode.Broadcaster;
     public isReplay = isPlayer(this.displayer);
     private _pageState?: PageStateImpl;
+    private _fullscreen?: boolean;
+    private _cursorUIDs: string[] = [];
+    private _cursorUIDsStyleDOM?: HTMLStyleElement;
 
     private boxManager?: BoxManager;
     private static params?: MountParams;
 
+    private containerResizeObserver?: ContainerResizeObserver;
     public containerSizeRatio = WindowManager.containerSizeRatio;
 
     constructor(context: InvisiblePluginContext) {
@@ -176,9 +202,14 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         (window as any).NETLESS_DEPS = __APP_DEPENDENCIES__;
     }
 
+    public static onCreate(manager: WindowManager) {
+        WindowManager._resolve(manager);
+    }
+
     public static async mount(params: MountParams): Promise<WindowManager> {
         const room = params.room;
         WindowManager.container = params.container;
+        WindowManager.supportAppliancePlugin = params.supportAppliancePlugin;
         const containerSizeRatio = params.containerSizeRatio;
         const debug = params.debug;
 
@@ -202,6 +233,9 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         }
 
         this.debug = Boolean(debug);
+        if (this.debug) {
+            setOptions({ verbose: true });
+        }
         log("Already insert room", manager);
 
         if (isRoom(this.displayer)) {
@@ -211,13 +245,14 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         } else {
             await pRetry(
                 async count => {
-                    manager = (await room.getInvisiblePlugin(WindowManager.kind)) as WindowManager;
+                    manager = room.getInvisiblePlugin(WindowManager.kind) as WindowManager;
                     if (!manager) {
                         log(`manager is empty. retrying ${count}`);
                         throw new Error();
                     }
                 },
-                { retries: 10 }
+                // 1s, 2s, 4s, 5s, 5s, 5s, 5s, 5s, 5s
+                { retries: 10, maxTimeout: 5000 } as any
             );
         }
 
@@ -230,25 +265,26 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         }
         await manager.ensureAttributes();
 
+        manager._fullscreen = params.fullscreen;
         manager.appManager = new AppManager(manager);
+        manager.appManager.polling = params.polling || false;
         manager._pageState = new PageStateImpl(manager.appManager);
-        manager.cursorManager = new CursorManager(manager.appManager, Boolean(cursor), params.applianceIcons);
+        manager.cursorManager = new CursorManager(
+            manager.appManager,
+            Boolean(cursor),
+            params.cursorOptions,
+            params.applianceIcons
+        );
         if (containerSizeRatio) {
             manager.containerSizeRatio = containerSizeRatio;
         }
-        manager.boxManager = createBoxManager(manager, callbacks, emitter, boxEmitter, {
-            collectorContainer: params.collectorContainer,
-            collectorStyles: params.collectorStyles,
-            prefersColorScheme: params.prefersColorScheme,
-            stageRatio: params.containerSizeRatio,
-        });
-        manager.appManager?.setBoxManager(manager.boxManager);
+
         if (params.container) {
             manager.bindContainer(params.container);
         }
 
         replaceRoomFunction(room, manager);
-        emitter.emit("onCreated");
+        internalEmitter.emit("onCreated");
         WindowManager.isCreated = true;
         try {
             await initDb();
@@ -259,48 +295,44 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         return manager;
     }
 
-    private static async initManager(room: Room): Promise<WindowManager> {
-        let manager = room.getInvisiblePlugin(WindowManager.kind) as WindowManager;
-        if (!manager) {
-            if (isRoom(room)) {
-                if (room.isWritable === false) {
-                    try {
-                        await room.setWritable(true);
-                    } catch (error) {
-                        throw new Error("[WindowManger]: room must be switched to be writable");
-                    }
-                    manager = (await room.createInvisiblePlugin(
-                        WindowManager,
-                        {}
-                    )) as WindowManager;
-                    manager.ensureAttributes();
-                    await wait(500);
-                    await room.setWritable(false);
-                } else {
-                    manager = (await room.createInvisiblePlugin(
-                        WindowManager,
-                        {}
-                    )) as WindowManager;
-                }
-            }
-        }
-        return manager;
+    private static initManager(room: Room): Promise<WindowManager | undefined> {
+        return createInvisiblePlugin(room);
     }
 
     private static initContainer(
+        manager: WindowManager,
         container: HTMLElement,
-        overwriteStyles: string | undefined
+        params: {
+            chessboard?: boolean;
+            overwriteStyles?: string;
+            fullscreen?: boolean;
+        }
     ) {
+        const { chessboard, overwriteStyles, fullscreen } = params;
         if (!WindowManager.container) {
             WindowManager.container = container;
         }
-        const { playground, mainViewElement } = setupWrapper(container);
+        const { playground, wrapper, sizer, mainViewElement } = setupWrapper(container);
         WindowManager.playground = playground;
+        if (chessboard) {
+            sizer.classList.add("netless-window-manager-chess-sizer");
+        }
+        if (fullscreen) {
+            sizer.classList.add("netless-window-manager-fullscreen");
+        }
         if (overwriteStyles) {
             const style = document.createElement("style");
             style.textContent = overwriteStyles;
             playground.appendChild(style);
         }
+        manager.containerResizeObserver = ContainerResizeObserver.create(
+            playground,
+            sizer,
+            wrapper,
+            internalEmitter
+        );
+        WindowManager.wrapper = wrapper;
+        WindowManager.sizer = sizer;
         return mainViewElement;
     }
 
@@ -319,20 +351,24 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         } else {
             if (WindowManager.params) {
                 const params = WindowManager.params;
-                const mainViewElement = WindowManager.initContainer(
-                    container,
-                    params.overwriteStyles
-                );
-                if (this.boxManager && WindowManager.playground) {
-                    this.boxManager.setRoot(WindowManager.playground);
+                const mainViewElement = WindowManager.initContainer(this, container, params);
+                if (this.boxManager) {
+                    this.boxManager.destroy();
                 }
+                const boxManager = createBoxManager(this, callbacks, internalEmitter, boxEmitter, {
+                    collectorContainer: params.collectorContainer,
+                    collectorStyles: params.collectorStyles,
+                    prefersColorScheme: params.prefersColorScheme,
+                });
+                this.boxManager = boxManager;
+                this.appManager?.setBoxManager(boxManager);
                 this.bindMainView(mainViewElement, params.disableCameraTransform);
-                if (WindowManager.playground) {
-                    this.cursorManager?.setupWrapper(WindowManager.playground);
+                if (WindowManager.wrapper) {
+                    this.cursorManager?.setupWrapper(WindowManager.wrapper);
                 }
             }
         }
-        emitter.emit("updateManagerRect");
+        internalEmitter.emit("updateManagerRect");
         this.appManager?.refresh();
         this.appManager?.resetMaximized();
         this.appManager?.resetMinimized();
@@ -342,7 +378,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
 
     public bindCollectorContainer(container: HTMLElement) {
         if (WindowManager.isCreated && this.boxManager) {
-            this.boxManager.setCollector(container);
+            this.boxManager.setCollectorContainer(container);
         } else {
             if (WindowManager.params) {
                 WindowManager.params.collectorContainer = container;
@@ -353,9 +389,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
     /**
      * 注册插件
      */
-    public static register<AppOptions = any, SetupResult = any, Attributes = any>(
-        params: RegisterParams<AppOptions, SetupResult, Attributes>
-    ): Promise<void> {
+    public static register(params: RegisterParams<any, any, any>): Promise<void> {
         return appRegister.register(params);
     }
 
@@ -374,7 +408,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
             // 移除根目录时需要做一些异步的释放操作 addApp 需要等待释放完成才可以继续添加
             if (this.appManager.rootDirRemoving) {
                 return new Promise((resolve, reject) => {
-                    emitter.once("rootDirRemoved").then(async () => {
+                    internalEmitter.once("rootDirRemoved").then(async () => {
                         try {
                             const appId = await this._addApp(params);
                             resolve(appId);
@@ -396,6 +430,9 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
             if (!params.kind || typeof params.kind !== "string") {
                 throw new Errors.ParamsInvalidError();
             }
+            if (params.src && typeof params.src === "string") {
+                appRegister.register({ kind: params.kind, src: params.src });
+            }
             const appImpl = await appRegister.appClasses.get(params.kind)?.();
             if (appImpl && appImpl.config?.singleton) {
                 if (this.appManager.appProxies.has(params.kind)) {
@@ -428,11 +465,12 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
                 for (const appId of apps) {
                     const appScenePath = appManager.store.getAppScenePath(appId);
                     if (appScenePath && appScenePath === scenePath) {
-                        console.warn(`[WindowManager]: ScenePath ${scenePath} Already opened`);
+                        console.warn(`[WindowManager]: ScenePath "${scenePath}" already opened`);
                         if (this.boxManager) {
                             const topBox = this.boxManager.getTopBox();
                             if (topBox) {
                                 this.boxManager.setZIndex(appId, topBox.zIndex + 1, false);
+                                this.boxManager.focusBox({ appId }, false);
                             }
                         }
                         return;
@@ -504,6 +542,19 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         }
     }
 
+    public async jumpPage(index: number): Promise<boolean> {
+        if (this.appManager) {
+            if (index < 0 || index >= this.pageState.length) {
+                console.warn(`[WindowManager]: index ${index} out of range`);
+                return false;
+            }
+            await this.appManager.setMainViewSceneIndex(index);
+            return true;
+        } else {
+            return false;
+        }
+    }
+
     public async addPage(params?: AddPageParams): Promise<void> {
         if (this.appManager) {
             const after = params?.after;
@@ -533,7 +584,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
                 console.warn(`[WindowManager]: index ${index} out of range`);
                 return false;
             }
-            return this.appManager.removeSceneByIndex(needRemoveIndex);;
+            return this.appManager.removeSceneByIndex(needRemoveIndex);
         } else {
             return false;
         }
@@ -559,7 +610,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
     public setReadonly(readonly: boolean): void {
         this.readonly = readonly;
         this.boxManager?.setReadonly(readonly);
-        emitter.emit("setReadonly", readonly);
+        internalEmitter.emit("setReadonly", readonly);
     }
 
     /**
@@ -576,12 +627,24 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         addEmitterOnceListener(`destroy-${kind}`, listener);
     }
 
+    /**
+     * app 本地自定义事件回调
+     *
+     * 返回一个用于撤销此监听的函数
+     */
+    public onAppEvent(
+        kind: string,
+        listener: (args: { kind: string; appId: string; type: string; value: any }) => void
+    ): () => void {
+        return internalEmitter.on(`custom-${kind}` as any, listener);
+    }
+
     /**
      * 设置 ViewMode
      */
     public setViewMode(mode: ViewMode): void {
-        if (mode === ViewMode.Broadcaster) {
-            if (this.canOperate) {
+        if (mode === ViewMode.Broadcaster || mode === ViewMode.Follower) {
+            if (this.canOperate && mode === ViewMode.Broadcaster) {
                 this.appManager?.mainViewProxy.setCameraAndSize();
             }
             this.appManager?.mainViewProxy.start();
@@ -590,6 +653,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
             this.appManager?.mainViewProxy.stop();
         }
         this.viewMode = mode;
+        this.appManager?.mainViewProxy.setViewMode(mode);
     }
 
     public setBoxState(boxState: TeleBoxState): void {
@@ -621,6 +685,35 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         this.boxManager?.setMinimized(minimized, false);
     }
 
+    public setFullscreen(fullscreen: boolean): void {
+        if (this._fullscreen !== fullscreen) {
+            this._fullscreen = fullscreen;
+            WindowManager.sizer?.classList.toggle("netless-window-manager-fullscreen", fullscreen);
+            callbacks.emit("fullscreenChange", fullscreen);
+        }
+    }
+
+    public get cursorUIDs(): string[] {
+        return this._cursorUIDs;
+    }
+
+    public setCursorUIDs(cursorUIDs?: string[] | null): void {
+        this._cursorUIDs = cursorUIDs || [];
+        if (this._cursorUIDs.length === 0) {
+            this._cursorUIDsStyleDOM?.remove();
+        } else {
+            if (!this._cursorUIDsStyleDOM) {
+                this._cursorUIDsStyleDOM = document.createElement("style");
+            }
+            WindowManager.playground?.appendChild(this._cursorUIDsStyleDOM);
+            let style = "[data-cursor-uid] { display: none }";
+            for (const uid of this._cursorUIDs) {
+                style += `\n[data-cursor-uid="${uid}"] { display: flex }`;
+            }
+            this._cursorUIDsStyleDOM.textContent = style;
+        }
+    }
+
     public get mainView(): View {
         if (this.appManager) {
             return this.appManager.mainViewProxy.view;
@@ -677,6 +770,27 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         return this.appManager?.focusApp?.view || this.mainView;
     }
 
+    public get polling(): boolean {
+        return this.appManager?.polling || false;
+    }
+
+    public set polling(b: boolean) {
+        if (this.appManager) {
+            this.appManager.polling = b;
+        }
+    }
+
+    public get cursorStyle(): "default" | "custom" {
+        return this.cursorManager?.style || "default";
+    }
+
+    public set cursorStyle(value: "default" | "custom") {
+        if (!this.cursorManager) {
+            throw new Error("[WindowManager]: cursor is not enabled, please set { cursor: true }.");
+        }
+        this.cursorManager.style = value;
+    }
+
     public get mainViewSceneIndex(): number {
         return this._pageState?.index || 0;
     }
@@ -722,6 +836,10 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         }
     }
 
+    public get fullscreen(): boolean {
+        return Boolean(this._fullscreen);
+    }
+
     /**
      * 查询所有的 App
      */
@@ -743,6 +861,18 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         return this.appManager?.closeApp(appId);
     }
 
+    /**
+     * 切换 focus 到指定的 app, 并且把这个 app 放到最前面
+     */
+    public focusApp(appId: string) {
+        const box = this.boxManager?.getBox(appId);
+        if (box) {
+            this.boxManager?.focusBox({ appId }, false);
+            // 1.0 版本这里会有正式的 api
+            (this.boxManager?.teleBoxManager as any).makeBoxTop(box, false);
+        }
+    }
+
     public moveCamera(
         camera: Partial<Camera> & { animationMode?: AnimationMode | undefined }
     ): void {
@@ -786,14 +916,19 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
     }
 
     private _destroy() {
+        this.containerResizeObserver?.disconnect();
         this.appManager?.destroy();
         this.cursorManager?.destroy();
         WindowManager.container = undefined;
+        WindowManager.wrapper = undefined;
+        WindowManager.sizer = undefined;
         WindowManager.isCreated = false;
         if (WindowManager.playground) {
             WindowManager.playground.parentNode?.removeChild(WindowManager.playground);
         }
         WindowManager.params = undefined;
+        this._iframeBridge?.destroy();
+        this._iframeBridge = undefined;
         log("Destroyed");
     }
 
@@ -836,6 +971,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
     }
 
     public cleanCurrentScene(): void {
+        log("clean current scene");
         this.focusedView?.cleanCurrentScene();
     }
 
@@ -884,26 +1020,28 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
     }
 
     public refresh() {
-       this._refresh();
-       this.appManager?.dispatchInternalEvent(Events.Refresh);
+        this._refresh();
+        this.appManager?.dispatchInternalEvent(Events.Refresh);
     }
-    
-    /** @inner */
+
+    /** @internal */
     public _refresh() {
         this.appManager?.mainViewProxy.rebind();
         if (WindowManager.container) {
             this.bindContainer(WindowManager.container);
         }
-        this.appManager?.refresher?.refresh();
+        this.appManager?.refresher.refresh();
     }
 
     public setContainerSizeRatio(ratio: number) {
-        if (!isNumber(ratio)) {
-            throw new Error(`[WindowManager]: updateContainerSizeRatio error, ratio must be a number. but got ${ratio}`);
+        if (!isNumber(ratio) || !(ratio > 0)) {
+            throw new Error(
+                `[WindowManager]: updateContainerSizeRatio error, ratio must be a positive number. but got ${ratio}`
+            );
         }
         WindowManager.containerSizeRatio = ratio;
         this.containerSizeRatio = ratio;
-        emitter.emit("containerSizeRatioUpdate", ratio);
+        internalEmitter.emit("containerSizeRatioUpdate", ratio);
     }
 
     private isDynamicPPT(scenes: SceneDefinition[]) {
@@ -931,7 +1069,19 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
             if (!this.attributes[Fields.Registered]) {
                 this.safeSetAttributes({ [Fields.Registered]: {} });
             }
+            if (!this.attributes[Fields.IframeBridge]) {
+                this.safeSetAttributes({ [Fields.IframeBridge]: {} });
+            }
+        }
+    }
+
+    private _iframeBridge?: IframeBridge;
+    public getIframeBridge() {
+        if (!this.appManager) {
+            throw new Error("[WindowManager]: should call getIframeBridge() after await mount()");
         }
+        this._iframeBridge || (this._iframeBridge = new IframeBridge(this, this.appManager));
+        return this._iframeBridge;
     }
 }
 

package/src/style.css

@@ -53,7 +53,6 @@
     height: 100%;
 }
 
-
 .netless-window-manager-cursor-pencil-image {
     width: 26px;
     height: 26px;
@@ -122,9 +121,10 @@
     left: 0;
     top: 0;
     will-change: transform;
-    transition: transform 0.1s;
+    transition: transform 0.12s;
     transform-origin: 0 0;
     user-select: none;
+    pointer-events: none;
 }
 
 .netless-window-manager-cursor-pencil-offset {
@@ -158,6 +158,20 @@
     margin-top: 3px;
 }
 
+.netless-window-manager-cursor-pencilEraser-image {
+    margin-left: -22px;
+    margin-top: 3px;
+}
+
+.netless-window-manager-laserPointer-pencilEraser-offset {
+    margin-left: -18px;
+}
+
+.netless-window-manager-pencilEraser-3-offset {
+    margin-top: -14px;
+    margin-left: -6px;
+}
+
 .netless-window-manager-cursor-name {
     width: 100%;
     height: 48px;
@@ -179,11 +193,14 @@
     bottom: 15px;
 }
 
-.window-manager-view-wrapper {
-    z-index: 5000;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    left: 0;
-    top: 0;
-}
+.netless-iframe-brdige-hidden {
+    display: none;
+}
+
+.netless-window-manager-fullscreen .telebox-titlebar,
+.netless-window-manager-fullscreen .telebox-max-titlebar-maximized,
+.netless-window-manager-fullscreen .netless-app-slide-footer,
+.netless-window-manager-fullscreen .telebox-footer-wrap,
+.netless-window-manager-fullscreen .telebox-titlebar-wrap {
+    display: none;
+}