trtc-electron-sdk 12.2.115-beta.5 → 12.2.115-beta.7

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,43 +172,73 @@ 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 left = `${this.absoluteWorkingArea.left + this.previewLeft}px`;
+            let top = `${this.absoluteWorkingArea.top + this.previewTop}px`;
             let width = '0px';
             let height = '0px';
             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`;
+                left = `${this.absoluteWorkingArea.left + this.previewLeft + selectedPreviewRect.left}px`;
+                top = `${this.absoluteWorkingArea.top + this.previewTop + selectedPreviewRect.top}px`;
                 width = `${selectedPreviewRect.right - selectedPreviewRect.left}px`;
                 height = `${selectedPreviewRect.bottom - selectedPreviewRect.top}px`;
             }
@@ -238,6 +246,7 @@ class TRTCMediaMixingDesigner {
             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}`);
         }
     }
     onMove(left, top) {
@@ -247,10 +256,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 +269,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 +303,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 +346,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/extensions/MediaMixingManager/StreamLayout/CustomStreamLayoutManager.d.ts

@@ -0,0 +1,15 @@
+import { TRTCStreamLayout, TRTCStreamLayoutMode } from "../types";
+import { ITRTCStreamLayoutManager, INativeStreamLayoutManager } from "./types";
+declare class CustomStreamLayoutManager implements ITRTCStreamLayoutManager {
+    private logPrefix;
+    private layoutMode;
+    private nativeStreamLayoutManager;
+    private layout;
+    private context;
+    constructor(nativeStreamLayoutManager: INativeStreamLayoutManager, context?: Record<string, any>);
+    setLayout(layout: TRTCStreamLayout): void;
+    getLayoutMode(): TRTCStreamLayoutMode;
+    setContext(context: Record<string, any>): void;
+    destroy(): void;
+}
+export default CustomStreamLayoutManager;

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

@@ -0,0 +1,36 @@
+"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 logger_1 = __importDefault(require("../../../logger"));
+class CustomStreamLayoutManager {
+    constructor(nativeStreamLayoutManager, context) {
+        this.logPrefix = "[TRTCCustomStreamLayoutManager]";
+        this.layoutMode = types_1.TRTCStreamLayoutMode.Custom;
+        this.nativeStreamLayoutManager = nativeStreamLayoutManager;
+        this.layout = null;
+        this.context = context;
+    }
+    setLayout(layout) {
+        this.layout = layout;
+        if (layout.userList) {
+            this.nativeStreamLayoutManager.setStreamLayout(layout.userList);
+        }
+        else {
+            logger_1.default.error(`${this.logPrefix}setLayout invalid parameter, no 'userList'`);
+        }
+    }
+    getLayoutMode() {
+        return this.layoutMode;
+    }
+    setContext(context) {
+        this.context = context;
+    }
+    destroy() {
+        this.layout = null;
+        this.context = null;
+    }
+}
+exports.default = CustomStreamLayoutManager;

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

@@ -0,0 +1,15 @@
+import { TRTCStreamLayout, TRTCStreamLayoutMode } from "../types";
+import { ITRTCStreamLayoutManager, INativeStreamLayoutManager } from "./types";
+declare class FloatStreamLayoutManager implements ITRTCStreamLayoutManager {
+    private logPrefix;
+    private layoutMode;
+    private nativeStreamLayoutManager;
+    private layout;
+    private context;
+    constructor(nativeStreamLayoutManager: INativeStreamLayoutManager, context?: Record<string, any>);
+    setLayout(layout: TRTCStreamLayout): void;
+    getLayoutMode(): TRTCStreamLayoutMode;
+    setContext(context: Record<string, any>): void;
+    destroy(): void;
+}
+export default FloatStreamLayoutManager;

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

@@ -0,0 +1,36 @@
+"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 logger_1 = __importDefault(require("../../../logger"));
+class FloatStreamLayoutManager {
+    constructor(nativeStreamLayoutManager, context) {
+        this.logPrefix = "[TRTCFloatStreamLayoutManager]";
+        this.layoutMode = types_1.TRTCStreamLayoutMode.Float;
+        this.nativeStreamLayoutManager = nativeStreamLayoutManager;
+        this.layout = null;
+        this.context = context;
+    }
+    setLayout(layout) {
+        this.layout = layout;
+        if (layout.userList) {
+            this.nativeStreamLayoutManager.setStreamLayout(layout.userList);
+        }
+        else {
+            logger_1.default.error(`${this.logPrefix}setLayout invalid parameter, no 'userList'`);
+        }
+    }
+    getLayoutMode() {
+        return this.layoutMode;
+    }
+    setContext(context) {
+        this.context = context;
+    }
+    destroy() {
+        this.layout = null;
+        this.context = null;
+    }
+}
+exports.default = FloatStreamLayoutManager;

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

@@ -0,0 +1,15 @@
+import { TRTCStreamLayout, TRTCStreamLayoutMode } from "../types";
+import { ITRTCStreamLayoutManager, INativeStreamLayoutManager } from "./types";
+declare class GridStreamLayoutManager implements ITRTCStreamLayoutManager {
+    private logPrefix;
+    private layoutMode;
+    private nativeStreamLayoutManager;
+    private layout;
+    private context;
+    constructor(nativeStreamLayoutManager: INativeStreamLayoutManager, context?: Record<string, any>);
+    setLayout(layout: TRTCStreamLayout): void;
+    getLayoutMode(): TRTCStreamLayoutMode;
+    setContext(context: Record<string, any>): void;
+    destroy(): void;
+}
+export default GridStreamLayoutManager;

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

@@ -0,0 +1,36 @@
+"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 logger_1 = __importDefault(require("../../../logger"));
+class GridStreamLayoutManager {
+    constructor(nativeStreamLayoutManager, context) {
+        this.logPrefix = "[TRTCGridStreamLayoutManager]";
+        this.layoutMode = types_1.TRTCStreamLayoutMode.Grid;
+        this.nativeStreamLayoutManager = nativeStreamLayoutManager;
+        this.layout = null;
+        this.context = context;
+    }
+    setLayout(layout) {
+        this.layout = layout;
+        if (layout.userList) {
+            this.nativeStreamLayoutManager.setStreamLayout(layout.userList);
+        }
+        else {
+            logger_1.default.error(`${this.logPrefix}setLayout invalid parameter, no 'userList'`);
+        }
+    }
+    getLayoutMode() {
+        return this.layoutMode;
+    }
+    setContext(context) {
+        this.context = context;
+    }
+    destroy() {
+        this.layout = null;
+        this.context = null;
+    }
+}
+exports.default = GridStreamLayoutManager;

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

@@ -0,0 +1,16 @@
+import { TRTCStreamLayout, TRTCStreamLayoutMode } from "../types";
+import { ITRTCStreamLayoutManager, INativeStreamLayoutManager } from "./types";
+declare class NoneStreamLayoutManager implements ITRTCStreamLayoutManager {
+    private logPrefix;
+    private layoutMode;
+    private nativeStreamLayoutManager;
+    private layout;
+    private context;
+    constructor(nativeStreamLayoutManager: INativeStreamLayoutManager, context?: Record<string, any>);
+    setLayout(layout: TRTCStreamLayout): void;
+    getLayoutMode(): TRTCStreamLayoutMode;
+    setContext(context: Record<string, any>): void;
+    destroy(): void;
+    private centerLiveOwner;
+}
+export default NoneStreamLayoutManager;

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

@@ -0,0 +1,73 @@
+"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 trtc_define_1 = require("../../../trtc_define");
+const logger_1 = __importDefault(require("../../../logger"));
+class NoneStreamLayoutManager {
+    constructor(nativeStreamLayoutManager, context) {
+        this.logPrefix = "[TRTCNoneStreamLayoutManager]";
+        this.layoutMode = types_1.TRTCStreamLayoutMode.None;
+        this.nativeStreamLayoutManager = nativeStreamLayoutManager;
+        this.layout = null;
+        this.context = context;
+    }
+    setLayout(layout) {
+        var _a;
+        this.layout = layout || { layoutMode: types_1.TRTCStreamLayoutMode.None, userList: [] };
+        if (this.context && this.layout.userList) {
+            this.centerLiveOwner();
+            (_a = this.nativeStreamLayoutManager) === null || _a === void 0 ? void 0 : _a.setStreamLayout(this.layout.userList);
+        }
+        else {
+            logger_1.default.error(`${this.logPrefix}setLayout context is null or no user`);
+        }
+    }
+    getLayoutMode() {
+        return this.layoutMode;
+    }
+    setContext(context) {
+        this.context = context;
+    }
+    destroy() {
+        this.layout = null;
+        this.context = null;
+    }
+    centerLiveOwner() {
+        if (this.context && this.layout) {
+            const layoutPixelWidth = this.context.layoutPixelRect.width;
+            const layoutPixelHeight = this.context.layoutPixelRect.height;
+            const mixingVideoWidth = this.context.mixingVideoSize.width;
+            const mixingVideoHeight = this.context.mixingVideoSize.height;
+            // Live Owner(local user)
+            let scaleRate;
+            if (mixingVideoWidth === 0 || mixingVideoHeight === 0) {
+                scaleRate = 1;
+                logger_1.default.error(`${this.logPrefix}centerLiveOwner mixingVideoSize is 0, use default scaleRate '1'`);
+            }
+            else {
+                scaleRate = Math.min(layoutPixelWidth / mixingVideoWidth, layoutPixelHeight / mixingVideoHeight);
+            }
+            const previewWidth = mixingVideoWidth * scaleRate;
+            const previewHeight = mixingVideoHeight * scaleRate;
+            const previewLeft = (layoutPixelWidth - previewWidth) / 2;
+            const previewTop = (layoutPixelHeight - previewHeight) / 2;
+            const previewRight = previewLeft + previewWidth;
+            const previewBottom = previewTop + previewHeight;
+            this.layout.userList = [{
+                    userId: '',
+                    rect: {
+                        left: previewLeft,
+                        top: previewTop,
+                        right: previewRight,
+                        bottom: previewBottom,
+                    },
+                    fillMode: trtc_define_1.TRTCVideoFillMode.TRTCVideoFillMode_Fit,
+                    zOrder: 0
+                }];
+        }
+    }
+}
+exports.default = NoneStreamLayoutManager;

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

@@ -0,0 +1,7 @@
+import { TRTCStreamLayoutMode } from '../types';
+import { ITRTCStreamLayoutManager, INativeStreamLayoutManager } from './types';
+export * from './types';
+declare function create(layoutMode: TRTCStreamLayoutMode, nativeStreamLayoutManager: INativeStreamLayoutManager): ITRTCStreamLayoutManager;
+export declare const StreamLayoutFactory: {
+    create: typeof create;
+};

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

@@ -0,0 +1,42 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StreamLayoutFactory = void 0;
+const FloatStreamLayoutManager_1 = __importDefault(require("./FloatStreamLayoutManager"));
+const GridStreamLayoutManager_1 = __importDefault(require("./GridStreamLayoutManager"));
+const CustomStreamLayoutManager_1 = __importDefault(require("./CustomStreamLayoutManager"));
+const NoneStreamLayoutManager_1 = __importDefault(require("./NoneStreamLayoutManager"));
+const types_1 = require("../types");
+__exportStar(require("./types"), exports);
+function create(layoutMode, nativeStreamLayoutManager) {
+    let layoutManager;
+    if (layoutMode === types_1.TRTCStreamLayoutMode.Custom) {
+        layoutManager = new CustomStreamLayoutManager_1.default(nativeStreamLayoutManager);
+    }
+    else if (layoutMode === types_1.TRTCStreamLayoutMode.Float) {
+        layoutManager = new FloatStreamLayoutManager_1.default(nativeStreamLayoutManager);
+    }
+    else if (layoutMode === types_1.TRTCStreamLayoutMode.Grid) {
+        layoutManager = new GridStreamLayoutManager_1.default(nativeStreamLayoutManager);
+    }
+    else {
+        // layoutMode === TRTCStreamLayoutMode.None
+        layoutManager = new NoneStreamLayoutManager_1.default(nativeStreamLayoutManager);
+    }
+    return layoutManager;
+}
+exports.StreamLayoutFactory = {
+    create: create,
+};

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

@@ -0,0 +1,13 @@
+import { TRTCStreamInfo, TRTCStreamLayout, TRTCStreamLayoutMode } from '../types';
+export interface INativeStreamLayoutManager {
+    setStreamLayout: (streamList: Array<TRTCStreamInfo>) => void;
+}
+export interface ITRTCStreamLayoutManager {
+    setLayout(layout: TRTCStreamLayout): void;
+    getLayoutMode(): TRTCStreamLayoutMode;
+    destroy(): void;
+    setContext(context: Record<string, any>): void;
+}
+export interface ITRTCStreamLayoutEvent {
+    onStreamLayoutChanged(streams: Array<TRTCStreamInfo>): void;
+}

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });