trtc-electron-sdk 12.2.115-beta.1 → 12.2.115-beta.10

package/liteav/MediaMixingDesigner/index.d.ts

@@ -1,4 +1,4 @@
-import { TRTCVideoResolution, TRTCVideoResolutionMode, Rect } from "../trtc_define";
+import { Rect, TRTCVideoFillMode } from "../trtc_define";
 export declare type TRTCMediaInfo = {
     id: string;
     rect: Rect;
@@ -9,8 +9,6 @@ export declare type TRTCMediaInfo = {
 declare class TRTCMediaMixingDesigner {
     private logPrefix;
     private container;
-    private videoResolution;
-    private resMode;
     private mixingVideoWidth;
     private mixingVideoHeight;
     private canExceedContainer;
@@ -33,16 +31,20 @@ declare class TRTCMediaMixingDesigner {
     private mousedownTop;
     private eventButton;
     private resizeObserver;
+    private relativeWorkingArea;
+    private absoluteWorkingArea;
+    private fillMode;
     constructor(options: {
         view: HTMLElement;
-        videoResolution: TRTCVideoResolution;
-        resMode: TRTCVideoResolutionMode;
+        width: number;
+        height: number;
         canExceedContainer: boolean;
     });
     updateOptions(options: {
-        videoResolution?: TRTCVideoResolution;
-        resMode?: TRTCVideoResolutionMode;
+        width: number;
+        height: number;
     }): void;
+    setWorkingArea(relative: Rect | null | undefined, fillMode?: TRTCVideoFillMode): void;
     addMedia(media: TRTCMediaInfo): void;
     removeMedia(media: TRTCMediaInfo): void;
     updateMedia(media: TRTCMediaInfo): void;
@@ -54,6 +56,7 @@ declare class TRTCMediaMixingDesigner {
     private initContainerMouseEventHander;
     private initContainerResizeObserver;
     private onPreviewAreaResize;
+    private updateWorkingArea;
     private updatePreviewProperty;
     private updateOverlay;
     private onMove;

package/liteav/MediaMixingDesigner/index.js

@@ -5,26 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const events_1 = require("events");
 const trtc_define_1 = require("../trtc_define");
-const utils_1 = require("../utils");
 const logger_1 = __importDefault(require("../logger"));
 const Movable_1 = __importDefault(require("./Movable"));
 const Resizable_1 = __importDefault(require("./Resizable"));
 const MIN_MOVE_DISTANCE = 5; // minimum moving distance
-const initResolutionMap = () => {
-    const map = new Map();
-    for (const key in trtc_define_1.TRTCVideoResolution) {
-        if (isNaN(Number(key))) {
-            const value = trtc_define_1.TRTCVideoResolution[key];
-            const tmp = key.split('_');
-            map.set(value, {
-                width: parseInt(tmp[1]),
-                height: parseInt(tmp[2]),
-            });
-        }
-    }
-    return map;
-};
-const resolutionMap = initResolutionMap();
 class TRTCMediaMixingDesigner {
     constructor(options) {
         this.logPrefix = '[TRTCMediaMixingDesigner]';
@@ -48,19 +32,12 @@ class TRTCMediaMixingDesigner {
         this.resizeObserver = null;
         this.container = options.view;
         this.container.style.position = 'absolute';
-        this.videoResolution = options.videoResolution;
-        this.resMode = options.resMode;
-        if (resolutionMap.has(options.videoResolution)) {
-            const { width, height } = resolutionMap.get(options.videoResolution);
-            if (this.resMode === trtc_define_1.TRTCVideoResolutionMode.TRTCVideoResolutionModeLandscape) {
-                this.mixingVideoWidth = width;
-                this.mixingVideoHeight = height;
-            }
-            else {
-                this.mixingVideoWidth = height;
-                this.mixingVideoHeight = width;
-            }
-        }
+        this.relativeWorkingArea = { left: 0, top: 0, right: 1, bottom: 1 };
+        this.absoluteWorkingArea = {};
+        this.fillMode = trtc_define_1.TRTCVideoFillMode.TRTCVideoFillMode_Fit;
+        this.updateWorkingArea();
+        this.mixingVideoWidth = options.width;
+        this.mixingVideoHeight = options.height;
         this.updatePreviewProperty();
         this.canExceedContainer = options.canExceedContainer || false;
         this.eventEmitter = new events_1.EventEmitter();
@@ -75,24 +52,25 @@ class TRTCMediaMixingDesigner {
         this.initContainerResizeObserver();
     }
     updateOptions(options) {
-        if (!(0, utils_1.isNullOrUndefined)(options.videoResolution) || !(0, utils_1.isNullOrUndefined)(options.resMode)) {
-            this.resMode = !(0, utils_1.isNullOrUndefined)(options.resMode) ? options.resMode : this.resMode;
-            if (options.videoResolution) {
-                if (resolutionMap.has(options.videoResolution)) {
-                    const { width, height } = resolutionMap.get(options.videoResolution);
-                    if (this.resMode === trtc_define_1.TRTCVideoResolutionMode.TRTCVideoResolutionModeLandscape) {
-                        this.mixingVideoWidth = width;
-                        this.mixingVideoHeight = height;
-                    }
-                    else {
-                        this.mixingVideoWidth = height;
-                        this.mixingVideoHeight = width;
-                    }
-                }
-            }
+        if (this.mixingVideoWidth !== options.width || this.mixingVideoHeight !== options.height) {
+            this.mixingVideoWidth = options.width;
+            this.mixingVideoHeight = options.height;
+            this.updatePreviewProperty();
+            this.updateOverlay();
+        }
+    }
+    setWorkingArea(relative, fillMode = trtc_define_1.TRTCVideoFillMode.TRTCVideoFillMode_Fit) {
+        logger_1.default.log(`${this.logPrefix}setWorkingArea:`, JSON.stringify(relative), `fillMode:${fillMode}`);
+        if (relative) {
+            this.relativeWorkingArea = Object.assign({}, relative);
+            this.fillMode = fillMode;
+            this.updateWorkingArea();
             this.updatePreviewProperty();
             this.updateOverlay();
         }
+        else {
+            logger_1.default.error(`${this.logPrefix}setWorkingArea invalid parameter:`, relative);
+        }
     }
     addMedia(media) {
         this.mediaList.unshift(media);
@@ -194,50 +172,98 @@ class TRTCMediaMixingDesigner {
         logger_1.default.log(`${this.logPrefix}onPreviewAreaResize:`, entries);
         for (const entry of entries) {
             if (entry.target === this.container) {
+                this.updateWorkingArea();
                 this.updatePreviewProperty();
                 this.updateOverlay();
                 break;
             }
         }
     }
+    updateWorkingArea() {
+        if (this.relativeWorkingArea && this.container) {
+            const containerRect = this.container.getBoundingClientRect();
+            this.absoluteWorkingArea = {
+                left: this.relativeWorkingArea.left * containerRect.width,
+                top: this.relativeWorkingArea.top * containerRect.height,
+                right: this.relativeWorkingArea.right * containerRect.width,
+                bottom: this.relativeWorkingArea.bottom * containerRect.height,
+                width: (this.relativeWorkingArea.right - this.relativeWorkingArea.left) * containerRect.width,
+                height: (this.relativeWorkingArea.bottom - this.relativeWorkingArea.top) * containerRect.height,
+            };
+            logger_1.default.log(`${this.logPrefix}updateWorkingArea absolute working area:`, JSON.stringify(this.absoluteWorkingArea));
+        }
+        else {
+            logger_1.default.error(`${this.logPrefix}updateWorkingArea no data:`, this.relativeWorkingArea, this.container);
+        }
+    }
     updatePreviewProperty() {
-        if (this.container) {
-            const containerWidth = this.container.offsetWidth;
-            const containerHeight = this.container.offsetHeight;
-            const widthScale = containerWidth / this.mixingVideoWidth;
-            const heightScale = containerHeight / this.mixingVideoHeight;
-            this.previewScale = widthScale > heightScale ? heightScale : widthScale;
+        if (this.absoluteWorkingArea) {
+            if (this.mixingVideoWidth <= 0 || this.mixingVideoHeight <= 0) {
+                logger_1.default.error(`${this.logPrefix}updatePreviewProperty failed, mixingVideoWidth or mixingVideoHeight is zero`);
+                return;
+            }
+            const workingAreaWidth = this.absoluteWorkingArea.width;
+            const workingAreaHeight = this.absoluteWorkingArea.height;
+            const widthScale = workingAreaWidth / this.mixingVideoWidth;
+            const heightScale = workingAreaHeight / this.mixingVideoHeight;
+            if (this.fillMode === trtc_define_1.TRTCVideoFillMode.TRTCVideoFillMode_Fill) {
+                this.previewScale = widthScale > heightScale ? widthScale : heightScale;
+            }
+            else {
+                this.fillMode = trtc_define_1.TRTCVideoFillMode.TRTCVideoFillMode_Fit;
+                this.previewScale = widthScale > heightScale ? heightScale : widthScale;
+            }
             this.previewWidth = this.mixingVideoWidth * this.previewScale;
             this.previewHeight = this.mixingVideoHeight * this.previewScale;
-            this.previewLeft = (containerWidth - this.previewWidth) / 2;
-            this.previewTop = (containerHeight - this.previewHeight) / 2;
+            this.previewLeft = (workingAreaWidth - this.previewWidth) / 2;
+            this.previewTop = (workingAreaHeight - this.previewHeight) / 2;
+            logger_1.default.debug(`${this.logPrefix}updatePreviewProperty: fillMode: ${this.fillMode} previewScale: ${this.previewScale}, previewWidth: ${this.previewWidth}, previewHeight: ${this.previewHeight}, previewLeft: ${this.previewLeft}, previewTop: ${this.previewTop}`);
         }
         else {
-            logger_1.default.error(`${this.logPrefix}calcPreviewScale failed, no HTML element to display`);
+            logger_1.default.error(`${this.logPrefix}updatePreviewProperty failed, no HTML element to display`);
         }
     }
     updateOverlay() {
         if (this.moveAndResizeOverlay) {
-            let left = `${this.previewLeft}px`;
-            let top = `${this.previewTop}px`;
-            let width = '0px';
-            let height = '0px';
+            let left = this.absoluteWorkingArea.left + this.previewLeft;
+            let top = this.absoluteWorkingArea.top + this.previewTop;
+            let width = 0;
+            let height = 0;
             if (this.selectedMediaIndex >= 0) {
+                logger_1.default.debug(`${this.logPrefix}updateOverlay: selected media:`, this.mediaList[this.selectedMediaIndex].rect);
                 const selectedPreviewRect = {
                     left: this.mediaList[this.selectedMediaIndex].rect.left * this.previewScale,
                     top: this.mediaList[this.selectedMediaIndex].rect.top * this.previewScale,
                     right: this.mediaList[this.selectedMediaIndex].rect.right * this.previewScale,
                     bottom: this.mediaList[this.selectedMediaIndex].rect.bottom * this.previewScale
                 };
-                left = `${selectedPreviewRect.left + this.previewLeft}px`;
-                top = `${selectedPreviewRect.top + this.previewTop}px`;
-                width = `${selectedPreviewRect.right - selectedPreviewRect.left}px`;
-                height = `${selectedPreviewRect.bottom - selectedPreviewRect.top}px`;
+                left = this.absoluteWorkingArea.left + this.previewLeft + selectedPreviewRect.left;
+                top = this.absoluteWorkingArea.top + this.previewTop + selectedPreviewRect.top;
+                width = selectedPreviewRect.right - selectedPreviewRect.left;
+                height = selectedPreviewRect.bottom - selectedPreviewRect.top;
+            }
+            let renderScale = 1;
+            if (this.container) {
+                const containerLayoutWidth = this.container.offsetWidth;
+                const containerRenderWidth = Math.round(this.container.getBoundingClientRect().width);
+                if (containerLayoutWidth !== containerRenderWidth) {
+                    logger_1.default.warn(`${this.logPrefix}updateOverlay container layout width: ${containerLayoutWidth} container render width: ${containerRenderWidth}`);
+                    renderScale = containerRenderWidth / containerLayoutWidth;
+                }
+            }
+            this.moveAndResizeOverlay.style.left = `${left}px`;
+            this.moveAndResizeOverlay.style.top = `${top}px`;
+            this.moveAndResizeOverlay.style.width = `${width}px`;
+            this.moveAndResizeOverlay.style.height = `${height}px`;
+            if (renderScale !== 1) {
+                this.moveAndResizeOverlay.style.transform = `scale(${1 / renderScale})`;
+                this.moveAndResizeOverlay.style.transformOrigin = `-${left}px -${top}px`; // Why?
+            }
+            else {
+                this.moveAndResizeOverlay.style.transform = 'none';
+                this.moveAndResizeOverlay.style.transformOrigin = 'none';
             }
-            this.moveAndResizeOverlay.style.left = left;
-            this.moveAndResizeOverlay.style.top = top;
-            this.moveAndResizeOverlay.style.width = width;
-            this.moveAndResizeOverlay.style.height = height;
+            logger_1.default.debug(`${this.logPrefix}updateOverlay: ${left} ${top} ${width} ${height} ${renderScale}`);
         }
     }
     onMove(left, top) {
@@ -247,10 +273,10 @@ class TRTCMediaMixingDesigner {
         if (target && this.moveAndResizeOverlay) {
             // calc new preview rect
             const newPreviewRect = {
-                left: left - this.previewLeft,
-                top: top - this.previewTop,
-                right: left - this.previewLeft + this.moveAndResizeOverlay.offsetWidth,
-                bottom: top - this.previewTop + this.moveAndResizeOverlay.offsetHeight,
+                left: left - this.absoluteWorkingArea.left - this.previewLeft,
+                top: top - this.absoluteWorkingArea.top - this.previewTop,
+                right: left - this.absoluteWorkingArea.left - this.previewLeft + this.moveAndResizeOverlay.offsetWidth,
+                bottom: top - this.absoluteWorkingArea.top - this.previewTop + this.moveAndResizeOverlay.offsetHeight,
             };
             this.doAdsorption(newPreviewRect);
             // calc new mixing rect
@@ -260,6 +286,8 @@ class TRTCMediaMixingDesigner {
                 right: Math.round(newPreviewRect.right / this.previewScale),
                 bottom: Math.round(newPreviewRect.bottom / this.previewScale),
             };
+            logger_1.default.debug(`${this.logPrefix}onMove new preview rect: ${JSON.stringify(newPreviewRect)}`);
+            logger_1.default.debug(`${this.logPrefix}onMove new rect in mixing: ${JSON.stringify(newRectInMixing)}`);
             (_a = this.eventEmitter) === null || _a === void 0 ? void 0 : _a.emit('onSourceMoved', Object.assign({}, target), newRectInMixing);
         }
         else {
@@ -292,10 +320,10 @@ class TRTCMediaMixingDesigner {
         if (target) {
             // calc new preview rect
             const newPreviewRect = {
-                left: left - this.previewLeft,
-                top: top - this.previewTop,
-                right: left - this.previewLeft + width,
-                bottom: top - this.previewTop + height,
+                left: left - this.absoluteWorkingArea.left - this.previewLeft,
+                top: top - this.absoluteWorkingArea.top - this.previewTop,
+                right: left - this.absoluteWorkingArea.left - this.previewLeft + width,
+                bottom: top - this.absoluteWorkingArea.top - this.previewTop + height,
             };
             // calc new mixing rect
             const newRectInMixing = {
@@ -335,8 +363,8 @@ class TRTCMediaMixingDesigner {
             // calc click point coordinates in mix video image
             logger_1.default.log(`${this.logPrefix}onContainerMousedown mix video image clicked`);
             const containerBounds = this.container.getBoundingClientRect();
-            const xInPreviewImage = event.clientX - containerBounds.x - this.previewLeft;
-            const yInPreviewImage = event.clientY - containerBounds.y - this.previewTop;
+            const xInPreviewImage = event.clientX - containerBounds.left - this.absoluteWorkingArea.left - this.previewLeft;
+            const yInPreviewImage = event.clientY - containerBounds.top - this.absoluteWorkingArea.top - this.previewTop;
             const xInImage = xInPreviewImage / this.previewScale;
             const yInImage = yInPreviewImage / this.previewScale;
             logger_1.default.log(`${this.logPrefix}onContainerMousedown click point coordinates in mix video:`, xInPreviewImage, yInPreviewImage, xInImage, yInImage);

package/liteav/base/PromiseStore.d.ts

@@ -0,0 +1,9 @@
+declare class PromiseStore {
+    private promiseStore;
+    constructor();
+    addPromise(key: string, resolve: (data: any) => void, reject: (data: any) => void): void;
+    resolvePromise(key: string, value: any): void;
+    rejectPromise(key: string, value: any): void;
+    destroy(): void;
+}
+export default PromiseStore;

package/liteav/base/PromiseStore.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+class PromiseStore {
+    constructor() {
+        this.promiseStore = new Map();
+    }
+    addPromise(key, resolve, reject) {
+        if (!this.promiseStore.has(key)) {
+            this.promiseStore.set(key, []);
+        }
+        const storedPromises = this.promiseStore.get(key);
+        storedPromises === null || storedPromises === void 0 ? void 0 : storedPromises.push({
+            resolve,
+            reject
+        });
+    }
+    resolvePromise(key, value) {
+        var _a;
+        const storedPromises = (_a = this.promiseStore) === null || _a === void 0 ? void 0 : _a.get(key);
+        if (storedPromises) {
+            storedPromises.forEach(({ resolve }) => {
+                resolve(value);
+            });
+            this.promiseStore.delete(key);
+        }
+    }
+    rejectPromise(key, value) {
+        var _a;
+        const storedPromises = (_a = this.promiseStore) === null || _a === void 0 ? void 0 : _a.get(key);
+        if (storedPromises) {
+            storedPromises.forEach(({ reject }) => {
+                reject(value);
+            });
+            this.promiseStore.delete(key);
+        }
+    }
+    destroy() {
+        this.promiseStore.forEach((value) => {
+            value.forEach(({ reject }) => {
+                reject();
+            });
+        });
+        this.promiseStore.clear();
+    }
+}
+exports.default = PromiseStore;

package/liteav/constant.d.ts

@@ -0,0 +1 @@
+export declare const LOCAL_USER_ID = "";

package/liteav/constant.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LOCAL_USER_ID = void 0;
+exports.LOCAL_USER_ID = '';

package/liteav/extensions/MediaMixingManager/StreamLayout/BaseStreamLayoutManager.d.ts

@@ -0,0 +1,27 @@
+import { TRTCStreamLayout, TRTCStreamLayoutMode } from "../types";
+import { ITRTCStreamLayoutManager, INativeStreamLayoutManager, TRTCStreamLayoutContext } from "./types";
+declare class BaseStreamLayoutManager implements ITRTCStreamLayoutManager {
+    protected logPrefix: string;
+    protected nativeStreamLayoutManager: INativeStreamLayoutManager;
+    protected layout: TRTCStreamLayout;
+    protected context: TRTCStreamLayoutContext | null;
+    protected container: HTMLElement | null;
+    protected displayArea: {
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+        width: number;
+        height: number;
+    };
+    protected resizeObserver: ResizeObserver | null;
+    constructor(nativeStreamLayoutManager: INativeStreamLayoutManager, context: TRTCStreamLayoutContext);
+    setLayout(layout: TRTCStreamLayout): void;
+    getLayoutMode(): TRTCStreamLayoutMode;
+    destroy(): void;
+    protected refreshLayout(): void;
+    private onResize;
+    private setResizeObserver;
+    private updateDisplayArea;
+}
+export default BaseStreamLayoutManager;

package/liteav/extensions/MediaMixingManager/StreamLayout/BaseStreamLayoutManager.js

@@ -0,0 +1,99 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const types_1 = require("../types");
+const utils_1 = require("../../../utils");
+const logger_1 = __importDefault(require("../../../logger"));
+class BaseStreamLayoutManager {
+    constructor(nativeStreamLayoutManager, context) {
+        this.logPrefix = "[BaseStreamLayoutManager]";
+        this.container = null;
+        this.displayArea = {
+            left: 0,
+            top: 0,
+            right: 0,
+            bottom: 0,
+            width: 0,
+            height: 0,
+        };
+        this.resizeObserver = null;
+        this.nativeStreamLayoutManager = nativeStreamLayoutManager;
+        this.layout = {
+            layoutMode: types_1.TRTCStreamLayoutMode.None,
+        };
+        this.context = context;
+        this.container = context.container;
+        this.onResize = (0, utils_1.debounce)(this.onResize.bind(this), 100);
+        if (this.container) {
+            this.setResizeObserver();
+            this.updateDisplayArea();
+        }
+        else {
+            logger_1.default.warn(`${this.logPrefix}constructor failed, no context.container.`);
+        }
+    }
+    setLayout(layout) {
+        this.layout = layout;
+        this.refreshLayout();
+    }
+    getLayoutMode() {
+        return this.layout.layoutMode;
+    }
+    destroy() {
+        this.layout = {
+            layoutMode: types_1.TRTCStreamLayoutMode.None,
+        };
+        this.container = null;
+        this.context = null;
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+    }
+    refreshLayout() {
+        logger_1.default.warn(`${this.logPrefix}refreshLayout should be implemented by sub-class.`);
+    }
+    onResize(entries) {
+        logger_1.default.log(`${this.logPrefix}onResize entries:`, entries);
+        for (const entry of entries) {
+            if (entry.target === this.container) {
+                logger_1.default.debug(`${this.logPrefix}onResize:`, this.container.getBoundingClientRect());
+                this.updateDisplayArea();
+                this.refreshLayout();
+                break;
+            }
+        }
+    }
+    setResizeObserver() {
+        logger_1.default.debug(`${this.logPrefix}setResizeObserver container:`, this.container, ' resizeObserver:', this.resizeObserver);
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+        if (this.container) {
+            this.resizeObserver = new ResizeObserver(this.onResize);
+            this.resizeObserver.observe(this.container);
+        }
+        else {
+            logger_1.default.warn(`${this.logPrefix}setResizeObserver failed, container is null.`);
+        }
+    }
+    updateDisplayArea() {
+        if (this.container) {
+            const containerRect = this.container.getBoundingClientRect();
+            this.displayArea = {
+                left: containerRect.left,
+                top: containerRect.top,
+                right: containerRect.right,
+                bottom: containerRect.bottom,
+                width: containerRect.width,
+                height: containerRect.height,
+            };
+        }
+        else {
+            logger_1.default.warn(`${this.logPrefix}updateDisplayArea failed, no container.`);
+        }
+    }
+}
+exports.default = BaseStreamLayoutManager;

package/liteav/extensions/MediaMixingManager/StreamLayout/CustomStreamLayoutManager.d.ts

@@ -0,0 +1,11 @@
+import BaseStreamLayoutManager from "./BaseStreamLayoutManager";
+import { TRTCStreamLayout } from "../types";
+import { INativeStreamLayoutManager, TRTCStreamLayoutContext } from "./types";
+declare class CustomStreamLayoutManager extends BaseStreamLayoutManager {
+    protected logPrefix: string;
+    constructor(nativeStreamLayoutManager: INativeStreamLayoutManager, context: TRTCStreamLayoutContext);
+    setLayout(layout: TRTCStreamLayout): void;
+    protected refreshLayout(): void;
+    private convertRelativeToAbsolute;
+}
+export default CustomStreamLayoutManager;

package/liteav/extensions/MediaMixingManager/StreamLayout/CustomStreamLayoutManager.js

@@ -0,0 +1,119 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const BaseStreamLayoutManager_1 = __importDefault(require("./BaseStreamLayoutManager"));
+const types_1 = require("../types");
+const trtc_define_1 = require("../../../trtc_define");
+const logger_1 = __importDefault(require("../../../logger"));
+const constant_1 = require("../../../constant");
+class CustomStreamLayoutManager extends BaseStreamLayoutManager_1.default {
+    constructor(nativeStreamLayoutManager, context) {
+        super(nativeStreamLayoutManager, context);
+        this.logPrefix = "[TRTCCustomStreamLayoutManager]";
+        this.layout = {
+            layoutMode: types_1.TRTCStreamLayoutMode.Custom,
+        };
+    }
+    setLayout(layout) {
+        this.layout = Object.assign(Object.assign({}, layout), { layoutMode: types_1.TRTCStreamLayoutMode.Custom });
+        this.refreshLayout();
+    }
+    refreshLayout() {
+        var _a;
+        if (this.layout.userList) {
+            this.nativeStreamLayoutManager.setStreamLayout(this.layout.userList);
+        }
+        else if (this.layout.size && this.layout.streams) {
+            const userList = this.convertRelativeToAbsolute(this.layout);
+            if (userList) {
+                logger_1.default.debug(`${this.logPrefix}refreshLayout userList:`, userList);
+                const localUser = userList.filter(user => user.userId === constant_1.LOCAL_USER_ID)[0];
+                if ((localUser === null || localUser === void 0 ? void 0 : localUser.rect) && ((_a = this.context) === null || _a === void 0 ? void 0 : _a.mediaMixingDesigner)) {
+                    const workingArea = localUser.rect;
+                    this.context.mediaMixingDesigner.setWorkingArea({
+                        left: workingArea.left / this.displayArea.width,
+                        top: workingArea.top / this.displayArea.height,
+                        right: workingArea.right / this.displayArea.width,
+                        bottom: workingArea.bottom / this.displayArea.height,
+                    }, localUser.fillMode);
+                }
+                userList.forEach(user => {
+                    if (user.rect) {
+                        user.rect = {
+                            left: user.rect.left * window.devicePixelRatio,
+                            right: user.rect.right * window.devicePixelRatio,
+                            top: user.rect.top * window.devicePixelRatio,
+                            bottom: user.rect.bottom * window.devicePixelRatio,
+                        };
+                    }
+                });
+                logger_1.default.debug(`${this.logPrefix}refreshLayout transfer layout to pixel unit::`, userList);
+                this.nativeStreamLayoutManager.setStreamLayout(userList);
+            }
+            else {
+                logger_1.default.error(`${this.logPrefix}refreshLayout invalid parameter, no 'streams' or 'size'`, JSON.stringify(this.layout));
+            }
+        }
+        else {
+            logger_1.default.error(`${this.logPrefix}refreshLayout invalid parameter:`, JSON.stringify(this.layout));
+        }
+    }
+    convertRelativeToAbsolute(serverMixingLayout) {
+        if (!serverMixingLayout.streams || !serverMixingLayout.size) {
+            return null;
+        }
+        // 1. calculate valid video content width and height
+        let minX = 1;
+        let minY = 1;
+        let maxX = 0;
+        let maxY = 0;
+        for (let i = 0; i < serverMixingLayout.streams.length; i++) {
+            const stream = serverMixingLayout.streams[i];
+            minX = Math.min(minX, stream.x);
+            minY = Math.min(minY, stream.y);
+            maxX = Math.max(maxX, stream.x + stream.w);
+            maxY = Math.max(maxY, stream.y + stream.h);
+        }
+        const xLength = maxX - minX;
+        const yLength = maxY - minY;
+        const contentWidth = xLength * serverMixingLayout.size.width;
+        const contentHeight = yLength * serverMixingLayout.size.height;
+        // 2. calculate fitting scale rate and fitting area
+        const scaleRate = Math.min(this.displayArea.width / contentWidth, this.displayArea.height / contentHeight);
+        const fittingArea = {
+            width: contentWidth * scaleRate,
+            height: contentHeight * scaleRate,
+            left: (this.displayArea.width - contentWidth * scaleRate) / 2,
+            top: (this.displayArea.height - contentHeight * scaleRate) / 2,
+            right: (this.displayArea.width + contentWidth * scaleRate) / 2,
+            bottom: (this.displayArea.height + contentHeight * scaleRate) / 2,
+        };
+        // 3. transfer relative coordinates to absolute coordinates
+        return serverMixingLayout.streams.map((stream, index, list) => {
+            // 3.1 cut left and top black area
+            // 3.2 transfer relative video ratio to valid video content ratio
+            // 3.3 fit valid video content to dispaying area, that is fitting area
+            const result = {
+                x: (stream.x - minX) / xLength * contentWidth * scaleRate + fittingArea.left,
+                y: (stream.y - minY) / yLength * contentHeight * scaleRate + fittingArea.top,
+                w: (stream.w) / xLength * contentWidth * scaleRate,
+                h: (stream.h) / yLength * contentHeight * scaleRate,
+            };
+            // 3.4 convert to TRTCStreamLayout.userList item
+            return {
+                userId: stream.userId,
+                fillMode: list.length >= 2 ? trtc_define_1.TRTCVideoFillMode.TRTCVideoFillMode_Fill : trtc_define_1.TRTCVideoFillMode.TRTCVideoFillMode_Fit,
+                zOrder: index,
+                rect: {
+                    left: Math.round(result.x),
+                    top: Math.round(result.y),
+                    right: Math.round(result.x + result.w),
+                    bottom: Math.round(result.y + result.h),
+                }
+            };
+        });
+    }
+}
+exports.default = CustomStreamLayoutManager;

package/liteav/extensions/MediaMixingManager/StreamLayout/NoneStreamLayoutManager.d.ts

@@ -0,0 +1,11 @@
+import BaseStreamLayoutManager from "./BaseStreamLayoutManager";
+import { TRTCStreamLayout } from "../types";
+import { INativeStreamLayoutManager, TRTCStreamLayoutContext } from "./types";
+declare class NoneStreamLayoutManager extends BaseStreamLayoutManager {
+    protected logPrefix: string;
+    constructor(nativeStreamLayoutManager: INativeStreamLayoutManager, context: TRTCStreamLayoutContext);
+    setLayout(layout: TRTCStreamLayout): void;
+    protected refreshLayout(): void;
+    private centerLiveOwner;
+}
+export default NoneStreamLayoutManager;