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

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,25 +52,26 @@ 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);
         if (media.isSelected) {
@@ -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;
-            this.moveAndResizeOverlay.style.top = top;
-            this.moveAndResizeOverlay.style.width = width;
-            this.moveAndResizeOverlay.style.height = height;
+            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';
+            }
+            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);
@@ -459,7 +487,12 @@ class TRTCMediaMixingDesigner {
         var _a;
         logger_1.default.log(`${this.logPrefix}onRightButtonClicked:`, event.target, event.currentTarget, event.buttons);
         event.preventDefault();
-        (_a = this.eventEmitter) === null || _a === void 0 ? void 0 : _a.emit('onRightButtonClicked', Object.assign({}, this.mediaList[this.selectedMediaIndex]));
+        (_a = this.eventEmitter) === null || _a === void 0 ? void 0 : _a.emit('onRightButtonClicked', Object.assign({}, this.mediaList[this.selectedMediaIndex]), {
+            windowX: event.clientX,
+            windowY: event.clientY,
+            screenX: event.screenX,
+            screenY: event.screenY
+        });
     }
 }
 exports.default = TRTCMediaMixingDesigner;

package/liteav/base/PromiseStore.d.ts

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

package/liteav/base/PromiseStore.js

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const logger_1 = __importDefault(require("../logger"));
+class PromiseStore {
+    constructor() {
+        this.logPrefix = '[PromiseStore]';
+        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);
+        }
+        else {
+            logger_1.default.warn(`${this.logPrefix}resolvePromise '${key}' not existed`);
+        }
+    }
+    rejectPromise(key, reason) {
+        var _a;
+        const storedPromises = (_a = this.promiseStore) === null || _a === void 0 ? void 0 : _a.get(key);
+        if (storedPromises) {
+            storedPromises.forEach(({ reject }) => {
+                reject(reason);
+            });
+            this.promiseStore.delete(key);
+        }
+        else {
+            logger_1.default.warn(`${this.logPrefix}rejectPromise '${key}' not existed`);
+        }
+    }
+    destroy() {
+        this.promiseStore.forEach((value) => {
+            value.forEach(({ reject }) => {
+                reject({
+                    code: Number.NEGATIVE_INFINITY,
+                    message: 'Instance destroyed, reject all pending promises',
+                });
+            });
+        });
+        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 = '';