trtc-electron-sdk 12.2.115-beta.2 → 12.2.115-beta.21

package/liteav/MediaMixingDesigner/index.d.ts

@@ -1,16 +1,14 @@
-import { TRTCVideoResolution, TRTCVideoResolutionMode, Rect } from "../trtc_define";
+import { Rect, TRTCVideoFillMode } from "../trtc_define";
 export declare type TRTCMediaInfo = {
     id: string;
     rect: Rect;
     isSelected: boolean;
-    zOrder?: number;
+    zOrder: number;
     origin: any;
 };
 declare class TRTCMediaMixingDesigner {
     private logPrefix;
     private container;
-    private videoResolution;
-    private resMode;
     private mixingVideoWidth;
     private mixingVideoHeight;
     private canExceedContainer;
@@ -33,19 +31,24 @@ 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;
+    removeAllMedia(): void;
     on(event: string, func: (...args: any[]) => void): void;
     off(event: string, func: (...args: any[]) => void): void;
     destroy(): void;
@@ -54,6 +57,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,29 +52,44 @@ 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);
+        // sort by zOrder desc
+        const length = this.mediaList.length;
+        let insertIndex = -1;
+        for (let i = 0; i < length; i++) {
+            if (media.zOrder >= this.mediaList[i].zOrder) {
+                insertIndex = i;
+                break;
+            }
+        }
+        if (insertIndex >= 0) {
+            this.mediaList.splice(insertIndex, 0, media);
+        }
+        else {
+            this.mediaList.push(media);
+        }
         if (media.isSelected) {
-            this.selectedMediaIndex = 0;
+            this.selectedMediaIndex = insertIndex >= 0 ? insertIndex : (this.mediaList.length - 1);
             this.updateOverlay();
         }
     }
@@ -112,15 +104,24 @@ class TRTCMediaMixingDesigner {
         }
     }
     updateMedia(media) {
-        const targetIndex = this.mediaList.findIndex(item => item.id === media.id);
+        let targetIndex = this.mediaList.findIndex(item => item.id === media.id);
         if (targetIndex !== -1) {
+            const isZOrderChanged = media.zOrder !== this.mediaList[targetIndex].zOrder;
             this.mediaList[targetIndex] = Object.assign({}, this.mediaList[targetIndex], media);
+            if (isZOrderChanged) {
+                this.mediaList.sort((a, b) => b.zOrder - a.zOrder);
+                targetIndex = this.mediaList.findIndex(item => item.id === media.id);
+            }
             if (media.isSelected) {
                 this.selectedMediaIndex = targetIndex;
                 this.updateOverlay();
             }
         }
     }
+    removeAllMedia() {
+        this.mediaList = [];
+        this.selectedMediaIndex = -1;
+    }
     on(event, func) {
         var _a;
         (_a = this.eventEmitter) === null || _a === void 0 ? void 0 : _a.on(event, func);
@@ -194,50 +195,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;
             }
-            this.moveAndResizeOverlay.style.left = left;
-            this.moveAndResizeOverlay.style.top = top;
-            this.moveAndResizeOverlay.style.width = width;
-            this.moveAndResizeOverlay.style.height = height;
+            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';
+            }
+            logger_1.default.debug(`${this.logPrefix}updateOverlay: ${left} ${top} ${width} ${height} ${renderScale}`);
         }
     }
     onMove(left, top) {
@@ -247,10 +296,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 +309,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 +343,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 +386,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 +510,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/DevicePixelRatioObserver.d.ts

@@ -0,0 +1,12 @@
+declare class DevicePixelRatioObserver {
+    private mediaQueryString;
+    private mediaQuery;
+    private eventEmitter;
+    constructor();
+    destroy(): void;
+    on(event: string, func: (...args: any[]) => void): void;
+    off(event: string, func: (...args: any[]) => void): void;
+    private onPixelRatioChanged;
+}
+declare const devicePixelRationObserver: DevicePixelRatioObserver;
+export default devicePixelRationObserver;

package/liteav/base/DevicePixelRatioObserver.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const events_1 = require("events");
+class DevicePixelRatioObserver {
+    constructor() {
+        this.mediaQueryString = `(resolution: ${window.devicePixelRatio}dppx)`;
+        this.mediaQuery = window.matchMedia(this.mediaQueryString);
+        this.eventEmitter = new events_1.EventEmitter();
+        this.onPixelRatioChanged = this.onPixelRatioChanged.bind(this);
+        this.mediaQuery.addEventListener('change', this.onPixelRatioChanged);
+    }
+    destroy() {
+        var _a;
+        (_a = this.mediaQuery) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', this.onPixelRatioChanged);
+        this.mediaQuery = null;
+        this.eventEmitter = null;
+    }
+    on(event, func) {
+        var _a;
+        (_a = this.eventEmitter) === null || _a === void 0 ? void 0 : _a.on(event, func);
+    }
+    off(event, func) {
+        var _a;
+        (_a = this.eventEmitter) === null || _a === void 0 ? void 0 : _a.off(event, func);
+    }
+    onPixelRatioChanged() {
+        var _a;
+        (_a = this.eventEmitter) === null || _a === void 0 ? void 0 : _a.emit('change');
+    }
+}
+const devicePixelRationObserver = new DevicePixelRatioObserver();
+exports.default = devicePixelRationObserver;

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>): boolean;
+    rejectPromise(key: string, reason?: any): boolean;
+    destroy(): void;
+}
+export default PromiseStore;

package/liteav/base/PromiseStore.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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);
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    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);
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    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 = '';