@openreplay/tracker-assist - npm Package Compare versions

Comparing version 4.1.1 to 4.1.3-beta.1

cjs/Assist.d.ts

@@ -16,2 +16,3 @@ import type { Properties } from 'csstype';
     config: RTCConfiguration;
+    serverURL: string;
     callUITemplate?: string;
@@ -22,3 +23,3 @@ }
     private readonly noSecureMode;
-    readonly version = "4.1.1";
+    readonly version = "4.1.3-beta.1";
     private socket;
@@ -28,2 +29,3 @@ private peer;
     private callingState;
+    private remoteControl;
     private agents;
@@ -35,2 +37,4 @@ private readonly options;
     private readonly setCallingState;
+    private getHost;
+    private getBasePrefixUrl;
     private onStart;
@@ -37,0 +41,0 @@ private playNotificationSound;

cjs/Assist.js

@@ -22,3 +22,3 @@ "use strict";
         this.noSecureMode = noSecureMode;
-        this.version = '4.1.1';
+        this.version = '4.1.3-beta.1';
         this.socket = null;
@@ -28,2 +28,3 @@ this.peer = null;
         this.callingState = CallingState.False;
+        this.remoteControl = null;
         this.agents = {};
@@ -37,2 +38,3 @@ this.setCallingState = (newState) => {
             config: null,
+            serverURL: null,
             onCallStart: () => { },
@@ -83,2 +85,14 @@ onAgentConnect: () => { },
     }
+    getHost() {
+        if (this.options.serverURL) {
+            return new URL(this.options.serverURL).host;
+        }
+        return this.app.getHost();
+    }
+    getBasePrefixUrl() {
+        if (this.options.serverURL) {
+            return new URL(this.options.serverURL).pathname;
+        }
+        return '';
+    }
     onStart() {
@@ -92,4 +106,4 @@ const app = this.app;
         // SocketIO
-        const socket = this.socket = (0, socket_io_client_1.connect)(app.getHost(), {
-            path: '/ws-assist/socket',
+        const socket = this.socket = (0, socket_io_client_1.connect)(this.getHost(), {
+            path: this.getBasePrefixUrl() + '/ws-assist/socket',
             query: {
@@ -103,7 +117,9 @@ 'peerId': peerID,
         socket.onAny((...args) => app.debug.log('Socket:', ...args));
-        const remoteControl = new RemoteControl_js_1.default(this.options, id => {
+        this.remoteControl = new RemoteControl_js_1.default(this.options, id => {
             if (!callUI) {
                 callUI = new CallWindow_js_1.default(app.debug.error, this.options.callUITemplate);
             }
-            callUI === null || callUI === void 0 ? void 0 : callUI.showRemoteControl(remoteControl.releaseControl);
+            if (this.remoteControl) {
+                callUI === null || callUI === void 0 ? void 0 : callUI.showRemoteControl(this.remoteControl.releaseControl);
+            }
             this.agents[id].onControlReleased = this.options.onRemoteControlStart();
@@ -132,14 +148,14 @@ this.emit('control_granted', id);
         // TODO: check incoming args
-        socket.on('request_control', remoteControl.requestControl);
-        socket.on('release_control', remoteControl.releaseControl);
-        socket.on('scroll', remoteControl.scroll);
-        socket.on('click', remoteControl.click);
-        socket.on('move', remoteControl.move);
+        socket.on('request_control', this.remoteControl.requestControl);
+        socket.on('release_control', this.remoteControl.releaseControl);
+        socket.on('scroll', this.remoteControl.scroll);
+        socket.on('click', this.remoteControl.click);
+        socket.on('move', this.remoteControl.move);
         socket.on('focus', (clientID, nodeID) => {
             const el = app.nodes.getNode(nodeID);
-            if (el instanceof HTMLElement) {
-                remoteControl.focus(clientID, el);
+            if (el instanceof HTMLElement && this.remoteControl) {
+                this.remoteControl.focus(clientID, el);
             }
         });
-        socket.on('input', remoteControl.input);
+        socket.on('input', this.remoteControl.input);
         let annot = null;
@@ -157,2 +173,3 @@ socket.on('moveAnnotation', (_, p) => annot && annot.move(p)); // TODO: restrict by id
         socket.on('AGENTS_CONNECTED', (ids) => {
+            var _a;
             ids.forEach(id => {
@@ -167,8 +184,8 @@ var _a, _b;
             this.app.start().then(() => { this.assistDemandedRestart = false; }).catch(e => app.debug.error(e));
-            remoteControl.reconnect(ids);
+            (_a = this.remoteControl) === null || _a === void 0 ? void 0 : _a.reconnect(ids);
         });
         socket.on('AGENT_DISCONNECTED', (id) => {
-            var _a, _b;
-            remoteControl.releaseControl();
-            (_b = (_a = this.agents[id]) === null || _a === void 0 ? void 0 : _a.onDisconnect) === null || _b === void 0 ? void 0 : _b.call(_a);
+            var _a, _b, _c;
+            (_a = this.remoteControl) === null || _a === void 0 ? void 0 : _a.releaseControl();
+            (_c = (_b = this.agents[id]) === null || _b === void 0 ? void 0 : _b.onDisconnect) === null || _c === void 0 ? void 0 : _c.call(_b);
             delete this.agents[id];
@@ -192,2 +209,5 @@ endAgentCall(id);
         });
+        socket.on('videofeed', (id, feedState) => {
+            callUI === null || callUI === void 0 ? void 0 : callUI.toggleVideoStream(feedState);
+        });
         const callingAgents = new Map(); // !! uses socket.io ID
@@ -210,4 +230,4 @@ // TODO: merge peerId & socket.io id  (simplest way - send peerId with the name)
         const peerOptions = {
-            host: app.getHost(),
-            path: '/assist',
+            host: this.getHost(),
+            path: this.getBasePrefixUrl() + '/assist',
             port: location.protocol === 'http:' && this.noSecureMode ? 80 : 443,
@@ -253,2 +273,3 @@ //debug: appOptions.__debug_log ? 2 : 0, // 0 Print nothing //1 Prints only errors. / 2 Prints errors and warnings. / 3 Prints all logs.
         const handleCallEnd = () => {
+            var _a;
             // Streams
@@ -263,3 +284,3 @@ Object.values(calls).forEach(call => call.close());
             closeCallConfirmWindow();
-            if (remoteControl.status === RemoteControl_js_1.RCStatus.Disabled) {
+            if (((_a = this.remoteControl) === null || _a === void 0 ? void 0 : _a.status) === RemoteControl_js_1.RCStatus.Disabled) {
                 callUI === null || callUI === void 0 ? void 0 : callUI.remove();
@@ -282,2 +303,3 @@ annot === null || annot === void 0 ? void 0 : annot.remove();
         };
+        const updateVideoFeed = ({ enabled, }) => { var _a; return this.emit('videofeed', { streamId: (_a = this.peer) === null || _a === void 0 ? void 0 : _a.id, enabled, }); };
         peer.on('call', (call) => {
@@ -325,2 +347,3 @@ app.debug.log('Incoming call: ', call);
                     callUI = new CallWindow_js_1.default(app.debug.error, this.options.callUITemplate);
+                    callUI.setVideoToggleCallback(updateVideoFeed);
                 }
@@ -339,3 +362,3 @@ callUI.showControls(initiateCallEnd);
                 call.on('stream', (rStream) => {
-                    callUI === null || callUI === void 0 ? void 0 : callUI.addRemoteStream(rStream);
+                    callUI === null || callUI === void 0 ? void 0 : callUI.addRemoteStream(rStream, call.peer);
                     const onInteraction = () => {
@@ -380,2 +403,4 @@ callUI === null || callUI === void 0 ? void 0 : callUI.playRemote();
     clean() {
+        var _a;
+        (_a = this.remoteControl) === null || _a === void 0 ? void 0 : _a.releaseControl;
         if (this.peer) {
@@ -382,0 +407,0 @@ this.peer.destroy();

cjs/CallWindow.d.ts

@@ -5,2 +5,3 @@ import type { LocalStream } from './LocalStream.js';
     private readonly callUITemplate?;
+    private remoteVideoId;
     private readonly iframe;
@@ -18,3 +19,7 @@ private vRemote;
     private controlsContainer;
+    private remoteVideoOn;
+    private localVideoOn;
+    private onToggleVideo;
     private tsInterval;
+    private remoteVideo;
     private readonly load;
@@ -25,3 +30,3 @@ constructor(logError: (...args: any[]) => void, callUITemplate?: string | undefined);
     private audioContainer;
-    addRemoteStream(rStream: MediaStream): void;
+    addRemoteStream(rStream: MediaStream, peerId: string): void;
     toggleRemoteVideoUI(enable: boolean): void;
@@ -40,3 +45,8 @@ private localStreams;
     hideRemoteControl(): void;
+    setVideoToggleCallback(cb: any): void;
     remove(): void;
+    toggleVideoStream({ streamId, enabled, }: {
+        streamId: string;
+        enabled: boolean;
+    }): void;
 }

cjs/CallWindow.js

@@ -20,2 +20,4 @@ "use strict";
         this.controlsContainer = null;
+        this.remoteVideoOn = false;
+        this.localVideoOn = false;
         this.audioContainer = null;
@@ -28,3 +30,3 @@ this.localStreams = [];
             border: 'none',
-            bottom: '10px',
+            bottom: '50px',
             right: '10px',
@@ -44,4 +46,5 @@ height: '200px',
         }
-        //const baseHref = "https://static.openreplay.com/tracker-assist/test"
+        // const baseHref = "https://static.openreplay.com/tracker-assist/test"
         const baseHref = 'https://static.openreplay.com/tracker-assist/4.0.0';
+        // this.load = fetch(this.callUITemplate || baseHref + '/index2.html')
         this.load = fetch(this.callUITemplate || baseHref + '/index.html')
@@ -92,3 +95,3 @@ .then((r) => r.text())
                     const secs = secsFull - mins * 60;
-                    tsElem.innerText = `${mins}:${secs < 10 ? 0 : ''}${secs}`;
+                    tsElem.innerText = `${mins > 0 ? `${mins}m` : ''}${secs < 10 ? 0 : ''}${secs}s`;
                 }, 500);
@@ -113,3 +116,3 @@ }
     }
-    addRemoteStream(rStream) {
+    addRemoteStream(rStream, peerId) {
         this.load
@@ -120,2 +123,4 @@ .then(() => {
                 this.vRemote.srcObject = rStream;
+                this.remoteVideo = rStream.getVideoTracks()[0];
+                this.remoteVideoId = peerId;
                 if (this.vPlaceholder) {
@@ -133,4 +138,4 @@ this.vPlaceholder.innerText =
                     var _a;
-                    const settings = (_a = rStream.getVideoTracks()[0]) === null || _a === void 0 ? void 0 : _a.getSettings();
-                    const isDummyVideoTrack = !!settings && (settings.width === 2 || settings.frameRate === 0);
+                    const settings = (_a = this.remoteVideo) === null || _a === void 0 ? void 0 : _a.getSettings();
+                    const isDummyVideoTrack = !this.remoteVideo.enabled || (!!settings && (settings.width === 2 || settings.frameRate === 0));
                     const shouldBeEnabled = !isDummyVideoTrack;
@@ -161,2 +166,3 @@ if (enabled !== shouldBeEnabled) {
             if (this.videoContainer) {
+                this.remoteVideoOn = enable;
                 if (enable) {
@@ -213,2 +219,3 @@ this.videoContainer.classList.add('remote');
         }
+        this.localVideoOn = enabled;
         if (enabled) {
@@ -229,2 +236,4 @@ this.videoContainer.classList.add('local');
                 .then((enabled) => {
+                var _a;
+                (_a = this.onToggleVideo) === null || _a === void 0 ? void 0 : _a.call(this, { streamId: stream.stream.id, enabled, });
                 this.toggleVideoUI(enabled);
@@ -280,2 +289,5 @@ this.load
     }
+    setVideoToggleCallback(cb) {
+        this.onToggleVideo = cb;
+    }
     remove() {
@@ -294,3 +306,9 @@ clearInterval(this.tsInterval);
     }
+    toggleVideoStream({ streamId, enabled, }) {
+        if (this.remoteVideoId === streamId) {
+            this.remoteVideo.enabled = enabled;
+            this.toggleRemoteVideoUI(enabled);
+        }
+    }
 }
 exports.default = CallWindow;

lib/Assist.d.ts

@@ -16,2 +16,3 @@ import type { Properties } from 'csstype';
     config: RTCConfiguration;
+    serverURL: string;
     callUITemplate?: string;
@@ -22,3 +23,3 @@ }
     private readonly noSecureMode;
-    readonly version = "4.1.1";
+    readonly version = "4.1.3-beta.1";
     private socket;
@@ -28,2 +29,3 @@ private peer;
     private callingState;
+    private remoteControl;
     private agents;
@@ -35,2 +37,4 @@ private readonly options;
     private readonly setCallingState;
+    private getHost;
+    private getBasePrefixUrl;
     private onStart;
@@ -37,0 +41,0 @@ private playNotificationSound;

lib/Assist.js

@@ -20,3 +20,3 @@ import { connect, } from 'socket.io-client';
         this.noSecureMode = noSecureMode;
-        this.version = '4.1.1';
+        this.version = '4.1.3-beta.1';
         this.socket = null;
@@ -26,2 +26,3 @@ this.peer = null;
         this.callingState = CallingState.False;
+        this.remoteControl = null;
         this.agents = {};
@@ -35,2 +36,3 @@ this.setCallingState = (newState) => {
             config: null,
+            serverURL: null,
             onCallStart: () => { },
@@ -81,2 +83,14 @@ onAgentConnect: () => { },
     }
+    getHost() {
+        if (this.options.serverURL) {
+            return new URL(this.options.serverURL).host;
+        }
+        return this.app.getHost();
+    }
+    getBasePrefixUrl() {
+        if (this.options.serverURL) {
+            return new URL(this.options.serverURL).pathname;
+        }
+        return '';
+    }
     onStart() {
@@ -90,4 +104,4 @@ const app = this.app;
         // SocketIO
-        const socket = this.socket = connect(app.getHost(), {
-            path: '/ws-assist/socket',
+        const socket = this.socket = connect(this.getHost(), {
+            path: this.getBasePrefixUrl() + '/ws-assist/socket',
             query: {
@@ -101,7 +115,9 @@ 'peerId': peerID,
         socket.onAny((...args) => app.debug.log('Socket:', ...args));
-        const remoteControl = new RemoteControl(this.options, id => {
+        this.remoteControl = new RemoteControl(this.options, id => {
             if (!callUI) {
                 callUI = new CallWindow(app.debug.error, this.options.callUITemplate);
             }
-            callUI === null || callUI === void 0 ? void 0 : callUI.showRemoteControl(remoteControl.releaseControl);
+            if (this.remoteControl) {
+                callUI === null || callUI === void 0 ? void 0 : callUI.showRemoteControl(this.remoteControl.releaseControl);
+            }
             this.agents[id].onControlReleased = this.options.onRemoteControlStart();
@@ -130,14 +146,14 @@ this.emit('control_granted', id);
         // TODO: check incoming args
-        socket.on('request_control', remoteControl.requestControl);
-        socket.on('release_control', remoteControl.releaseControl);
-        socket.on('scroll', remoteControl.scroll);
-        socket.on('click', remoteControl.click);
-        socket.on('move', remoteControl.move);
+        socket.on('request_control', this.remoteControl.requestControl);
+        socket.on('release_control', this.remoteControl.releaseControl);
+        socket.on('scroll', this.remoteControl.scroll);
+        socket.on('click', this.remoteControl.click);
+        socket.on('move', this.remoteControl.move);
         socket.on('focus', (clientID, nodeID) => {
             const el = app.nodes.getNode(nodeID);
-            if (el instanceof HTMLElement) {
-                remoteControl.focus(clientID, el);
+            if (el instanceof HTMLElement && this.remoteControl) {
+                this.remoteControl.focus(clientID, el);
             }
         });
-        socket.on('input', remoteControl.input);
+        socket.on('input', this.remoteControl.input);
         let annot = null;
@@ -155,2 +171,3 @@ socket.on('moveAnnotation', (_, p) => annot && annot.move(p)); // TODO: restrict by id
         socket.on('AGENTS_CONNECTED', (ids) => {
+            var _a;
             ids.forEach(id => {
@@ -165,8 +182,8 @@ var _a, _b;
             this.app.start().then(() => { this.assistDemandedRestart = false; }).catch(e => app.debug.error(e));
-            remoteControl.reconnect(ids);
+            (_a = this.remoteControl) === null || _a === void 0 ? void 0 : _a.reconnect(ids);
         });
         socket.on('AGENT_DISCONNECTED', (id) => {
-            var _a, _b;
-            remoteControl.releaseControl();
-            (_b = (_a = this.agents[id]) === null || _a === void 0 ? void 0 : _a.onDisconnect) === null || _b === void 0 ? void 0 : _b.call(_a);
+            var _a, _b, _c;
+            (_a = this.remoteControl) === null || _a === void 0 ? void 0 : _a.releaseControl();
+            (_c = (_b = this.agents[id]) === null || _b === void 0 ? void 0 : _b.onDisconnect) === null || _c === void 0 ? void 0 : _c.call(_b);
             delete this.agents[id];
@@ -190,2 +207,5 @@ endAgentCall(id);
         });
+        socket.on('videofeed', (id, feedState) => {
+            callUI === null || callUI === void 0 ? void 0 : callUI.toggleVideoStream(feedState);
+        });
         const callingAgents = new Map(); // !! uses socket.io ID
@@ -208,4 +228,4 @@ // TODO: merge peerId & socket.io id  (simplest way - send peerId with the name)
         const peerOptions = {
-            host: app.getHost(),
-            path: '/assist',
+            host: this.getHost(),
+            path: this.getBasePrefixUrl() + '/assist',
             port: location.protocol === 'http:' && this.noSecureMode ? 80 : 443,
@@ -251,2 +271,3 @@ //debug: appOptions.__debug_log ? 2 : 0, // 0 Print nothing //1 Prints only errors. / 2 Prints errors and warnings. / 3 Prints all logs.
         const handleCallEnd = () => {
+            var _a;
             // Streams
@@ -261,3 +282,3 @@ Object.values(calls).forEach(call => call.close());
             closeCallConfirmWindow();
-            if (remoteControl.status === RCStatus.Disabled) {
+            if (((_a = this.remoteControl) === null || _a === void 0 ? void 0 : _a.status) === RCStatus.Disabled) {
                 callUI === null || callUI === void 0 ? void 0 : callUI.remove();
@@ -280,2 +301,3 @@ annot === null || annot === void 0 ? void 0 : annot.remove();
         };
+        const updateVideoFeed = ({ enabled, }) => { var _a; return this.emit('videofeed', { streamId: (_a = this.peer) === null || _a === void 0 ? void 0 : _a.id, enabled, }); };
         peer.on('call', (call) => {
@@ -323,2 +345,3 @@ app.debug.log('Incoming call: ', call);
                     callUI = new CallWindow(app.debug.error, this.options.callUITemplate);
+                    callUI.setVideoToggleCallback(updateVideoFeed);
                 }
@@ -337,3 +360,3 @@ callUI.showControls(initiateCallEnd);
                 call.on('stream', (rStream) => {
-                    callUI === null || callUI === void 0 ? void 0 : callUI.addRemoteStream(rStream);
+                    callUI === null || callUI === void 0 ? void 0 : callUI.addRemoteStream(rStream, call.peer);
                     const onInteraction = () => {
@@ -378,2 +401,4 @@ callUI === null || callUI === void 0 ? void 0 : callUI.playRemote();
     clean() {
+        var _a;
+        (_a = this.remoteControl) === null || _a === void 0 ? void 0 : _a.releaseControl;
         if (this.peer) {
@@ -380,0 +405,0 @@ this.peer.destroy();

lib/CallWindow.d.ts

@@ -5,2 +5,3 @@ import type { LocalStream } from './LocalStream.js';
     private readonly callUITemplate?;
+    private remoteVideoId;
     private readonly iframe;
@@ -18,3 +19,7 @@ private vRemote;
     private controlsContainer;
+    private remoteVideoOn;
+    private localVideoOn;
+    private onToggleVideo;
     private tsInterval;
+    private remoteVideo;
     private readonly load;
@@ -25,3 +30,3 @@ constructor(logError: (...args: any[]) => void, callUITemplate?: string | undefined);
     private audioContainer;
-    addRemoteStream(rStream: MediaStream): void;
+    addRemoteStream(rStream: MediaStream, peerId: string): void;
     toggleRemoteVideoUI(enable: boolean): void;
@@ -40,3 +45,8 @@ private localStreams;
     hideRemoteControl(): void;
+    setVideoToggleCallback(cb: any): void;
     remove(): void;
+    toggleVideoStream({ streamId, enabled, }: {
+        streamId: string;
+        enabled: boolean;
+    }): void;
 }

lib/CallWindow.js

@@ -18,2 +18,4 @@ import attachDND from './dnd.js';
         this.controlsContainer = null;
+        this.remoteVideoOn = false;
+        this.localVideoOn = false;
         this.audioContainer = null;
@@ -26,3 +28,3 @@ this.localStreams = [];
             border: 'none',
-            bottom: '10px',
+            bottom: '50px',
             right: '10px',
@@ -42,4 +44,5 @@ height: '200px',
         }
-        //const baseHref = "https://static.openreplay.com/tracker-assist/test"
+        // const baseHref = "https://static.openreplay.com/tracker-assist/test"
         const baseHref = 'https://static.openreplay.com/tracker-assist/4.0.0';
+        // this.load = fetch(this.callUITemplate || baseHref + '/index2.html')
         this.load = fetch(this.callUITemplate || baseHref + '/index.html')
@@ -90,3 +93,3 @@ .then((r) => r.text())
                     const secs = secsFull - mins * 60;
-                    tsElem.innerText = `${mins}:${secs < 10 ? 0 : ''}${secs}`;
+                    tsElem.innerText = `${mins > 0 ? `${mins}m` : ''}${secs < 10 ? 0 : ''}${secs}s`;
                 }, 500);
@@ -111,3 +114,3 @@ }
     }
-    addRemoteStream(rStream) {
+    addRemoteStream(rStream, peerId) {
         this.load
@@ -118,2 +121,4 @@ .then(() => {
                 this.vRemote.srcObject = rStream;
+                this.remoteVideo = rStream.getVideoTracks()[0];
+                this.remoteVideoId = peerId;
                 if (this.vPlaceholder) {
@@ -131,4 +136,4 @@ this.vPlaceholder.innerText =
                     var _a;
-                    const settings = (_a = rStream.getVideoTracks()[0]) === null || _a === void 0 ? void 0 : _a.getSettings();
-                    const isDummyVideoTrack = !!settings && (settings.width === 2 || settings.frameRate === 0);
+                    const settings = (_a = this.remoteVideo) === null || _a === void 0 ? void 0 : _a.getSettings();
+                    const isDummyVideoTrack = !this.remoteVideo.enabled || (!!settings && (settings.width === 2 || settings.frameRate === 0));
                     const shouldBeEnabled = !isDummyVideoTrack;
@@ -159,2 +164,3 @@ if (enabled !== shouldBeEnabled) {
             if (this.videoContainer) {
+                this.remoteVideoOn = enable;
                 if (enable) {
@@ -211,2 +217,3 @@ this.videoContainer.classList.add('remote');
         }
+        this.localVideoOn = enabled;
         if (enabled) {
@@ -227,2 +234,4 @@ this.videoContainer.classList.add('local');
                 .then((enabled) => {
+                var _a;
+                (_a = this.onToggleVideo) === null || _a === void 0 ? void 0 : _a.call(this, { streamId: stream.stream.id, enabled, });
                 this.toggleVideoUI(enabled);
@@ -278,2 +287,5 @@ this.load
     }
+    setVideoToggleCallback(cb) {
+        this.onToggleVideo = cb;
+    }
     remove() {
@@ -292,2 +304,8 @@ clearInterval(this.tsInterval);
     }
+    toggleVideoStream({ streamId, enabled, }) {
+        if (this.remoteVideoId === streamId) {
+            this.remoteVideo.enabled = enabled;
+            this.toggleRemoteVideoUI(enabled);
+        }
+    }
 }

package.json

 {
   "name": "@openreplay/tracker-assist",
   "description": "Tracker plugin for screen assistance through the WebRTC",
-  "version": "4.1.1",
+  "version": "4.1.3-beta.1",
   "keywords": [
@@ -6,0 +6,0 @@ "WebRTC",

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

137692

increased by3.83%

Lines of code

3101

increased by3.82%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes