Unify events and output single TypeScript declaration (#2407)

* fix(events): unify events to a single EventManager type, add support for single typescript declaration

* fix(lint): fix lint

* fix(events): fix incorrect instatiation

* fix(events): clean up redundant methods

* fix(events): keep EventEmitter name, alias NodeEventEmitter

* fix(events): fix loose reference

* fix(EventEmitter): remove on/off alias as redundant

* fix(RTCUtils): bring event handlers under class to use same event emitter

* fix(RTCUtils): fix lint

.gitignore

@@ -14,6 +14,7 @@ npm-*.log
 stats.json
 .vscode
 dist
+index.d.ts
 types/auto
 types/types-comparer/auto.json
 types/types-comparer/hand-crafted.json

JitsiConference.js

@@ -1,5 +1,4 @@
 import { getLogger } from '@jitsi/logger';
-import EventEmitter from 'events';
 import $ from 'jquery';
 import isEqual from 'lodash.isequal';
 import { Strophe } from 'strophe.js';
@@ -38,6 +37,7 @@ import AvgRTPStatsReporter from './modules/statistics/AvgRTPStatsReporter';
 import LocalStatsCollector from './modules/statistics/LocalStatsCollector';
 import SpeakerStatsCollector from './modules/statistics/SpeakerStatsCollector';
 import Statistics from './modules/statistics/statistics';
+import EventEmitter from './modules/util/EventEmitter';
 import { safeSubtract } from './modules/util/MathUtil';
 import RandomUtil from './modules/util/RandomUtil';
 import ComponentsVersions from './modules/version/ComponentsVersions';

JitsiMediaDevices.js

@@ -1,8 +1,7 @@
-import EventEmitter from 'events';
-
 import * as JitsiMediaDevicesEvents from './JitsiMediaDevicesEvents';
 import RTC from './modules/RTC/RTC';
 import browser from './modules/browser';
+import Listenable from './modules/util/Listenable';
 import { MediaType } from './service/RTC/MediaType';
 import RTCEvents from './service/RTC/RTCEvents';
 
@@ -13,19 +12,19 @@ const VIDEO_PERMISSION_NAME = 'camera';
 /**
  * Media devices utilities for Jitsi.
  */
-class JitsiMediaDevices {
+class JitsiMediaDevices extends Listenable {
     /**
      * Initializes a {@code JitsiMediaDevices} object. There will be a single
      * instance of this class.
      */
     constructor() {
-        this._eventEmitter = new EventEmitter();
+        super();
         this._permissions = {};
 
         RTC.addListener(
             RTCEvents.DEVICE_LIST_CHANGED,
             devices =>
-                this._eventEmitter.emit(
+                this.eventEmitter.emit(
                     JitsiMediaDevicesEvents.DEVICE_LIST_CHANGED,
                     devices));
 
@@ -128,7 +127,7 @@ class JitsiMediaDevices {
                 ...this._permissions,
                 ...permissions
             };
-            this._eventEmitter.emit(JitsiMediaDevicesEvents.PERMISSIONS_CHANGED, this._permissions);
+            this.eventEmitter.emit(JitsiMediaDevicesEvents.PERMISSIONS_CHANGED, this._permissions);
 
             if (this._permissions[MediaType.AUDIO] || this._permissions[MediaType.VIDEO]) {
                 // Triggering device list update when the permissiions are granted in order to update
@@ -265,32 +264,6 @@ class JitsiMediaDevices {
     setAudioOutputDevice(deviceId) {
         return RTC.setAudioOutputDevice(deviceId);
     }
-
-    /**
-     * Adds an event handler.
-     * @param {string} event - event name
-     * @param {function} handler - event handler
-     */
-    addEventListener(event, handler) {
-        this._eventEmitter.addListener(event, handler);
-    }
-
-    /**
-     * Removes event handler.
-     * @param {string} event - event name
-     * @param {function} handler - event handler
-     */
-    removeEventListener(event, handler) {
-        this._eventEmitter.removeListener(event, handler);
-    }
-
-    /**
-     * Emits an event.
-     * @param {string} event - event name
-     */
-    emitEvent(event, ...args) {
-        this._eventEmitter.emit(event, ...args);
-    }
 }
 
 export default new JitsiMediaDevices();

JitsiMeetJS.ts

@@ -318,11 +318,11 @@ export default {
 
         if (firePermissionPrompt && !RTC.arePermissionsGrantedForAvailableDevices()) {
             // @ts-ignore
-            JitsiMediaDevices.emitEvent(JitsiMediaDevicesEvents.PERMISSION_PROMPT_IS_SHOWN, browser.getName());
+            JitsiMediaDevices.emit(JitsiMediaDevicesEvents.PERMISSION_PROMPT_IS_SHOWN, browser.getName());
         } else if (fireSlowPromiseEvent) {
             window.setTimeout(() => {
                 if (!promiseFulfilled) {
-                    JitsiMediaDevices.emitEvent(JitsiMediaDevicesEvents.SLOW_GET_USER_MEDIA);
+                    JitsiMediaDevices.emit(JitsiMediaDevicesEvents.SLOW_GET_USER_MEDIA);
                 }
             }, USER_MEDIA_SLOW_PROMISE_TIMEOUT);
         }

modules/RTC/CodecSelection.spec.js

@@ -1,5 +1,3 @@
-import EventEmitter from 'events';
-
 import * as JitsiConferenceEvents from '../../JitsiConferenceEvents.ts';
 import Listenable from '../util/Listenable.js';
 import JingleSessionPC from '../xmpp/JingleSessionPC.js';
@@ -42,7 +40,6 @@ class MockConference extends Listenable {
         };
 
         this.activeMediaSession = undefined;
-        this.eventEmitter = new EventEmitter();
         this.mediaSessions = [];
         this.participants = [];
         this._signalingLayer = new MockSignalingLayerImpl();

modules/RTC/JitsiTrack.js

@@ -1,9 +1,9 @@
 import { getLogger } from '@jitsi/logger';
-import EventEmitter from 'events';
 
 import * as JitsiTrackEvents from '../../JitsiTrackEvents';
 import { MediaType } from '../../service/RTC/MediaType';
 import browser from '../browser';
+import EventEmitter from '../util/EventEmitter';
 
 import RTCUtils from './RTCUtils';
 
@@ -44,10 +44,6 @@ export default class JitsiTrack extends EventEmitter {
             videoType) {
         super();
 
-        // aliases for addListener/removeListener
-        this.addEventListener = this.addListener;
-        this.removeEventListener = this.off = this.removeListener;
-
         /**
          * Array with the HTML elements that are displaying the streams.
          * @type {Array}

modules/RTC/RTCUtils.js

@@ -1,5 +1,4 @@
 import { getLogger } from '@jitsi/logger';
-import EventEmitter from 'events';
 import clonedeep from 'lodash.clonedeep';
 import 'webrtc-adapter';
 
@@ -18,8 +17,6 @@ import screenObtainer from './ScreenObtainer';
 
 const logger = getLogger(__filename);
 
-const eventEmitter = new EventEmitter();
-
 const AVAILABLE_DEVICES_POLL_INTERVAL_TIME = 3000; // ms
 
 /**
@@ -157,29 +154,6 @@ function getConstraints(um = [], options = {}) {
     return constraints;
 }
 
-/**
- * Updates the granted permissions based on the options we requested and the
- * streams we received.
- * @param um the options we requested to getUserMedia.
- * @param stream the stream we received from calling getUserMedia.
- */
-function updateGrantedPermissions(um, stream) {
-    const audioTracksReceived
-        = Boolean(stream) && stream.getAudioTracks().length > 0;
-    const videoTracksReceived
-        = Boolean(stream) && stream.getVideoTracks().length > 0;
-    const grantedPermissions = {};
-
-    if (um.indexOf('video') !== -1) {
-        grantedPermissions.video = videoTracksReceived;
-    }
-    if (um.indexOf('audio') !== -1) {
-        grantedPermissions.audio = audioTracksReceived;
-    }
-
-    eventEmitter.emit(RTCEvents.PERMISSIONS_CHANGED, grantedPermissions);
-}
-
 /**
  * Checks if new list of available media devices differs from previous one.
  * @param {MediaDeviceInfo[]} newDevices - list of new devices.
@@ -247,52 +221,10 @@ function sendDeviceListToAnalytics(deviceList) {
     });
 }
 
-
-/**
- * Update known devices.
- *
- * @param {Array<Object>} pds - The new devices.
- * @returns {void}
- *
- * NOTE: Use this function as a shared callback to handle both the devicechange event  and the polling implementations.
- * This prevents duplication and works around a chrome bug (verified to occur on 68) where devicechange fires twice in
- * a row, which can cause async post devicechange processing to collide.
- */
-function updateKnownDevices(pds) {
-    if (compareAvailableMediaDevices(pds)) {
-        onMediaDevicesListChanged(pds);
-    }
-}
-
-/**
- * Event handler for the 'devicechange' event.
- *
- * @param {MediaDeviceInfo[]} devices - list of media devices.
- * @emits RTCEvents.DEVICE_LIST_CHANGED
- */
-function onMediaDevicesListChanged(devicesReceived) {
-    availableDevices = devicesReceived.slice(0);
-    logger.info('list of media devices has changed:', availableDevices);
-
-    sendDeviceListToAnalytics(availableDevices);
-
-    // Used by tracks to update the real device id before the consumer of lib-jitsi-meet receives the new device list.
-    eventEmitter.emit(RTCEvents.DEVICE_LIST_WILL_CHANGE, availableDevices);
-
-    eventEmitter.emit(RTCEvents.DEVICE_LIST_CHANGED, availableDevices);
-}
-
 /**
  *
  */
 class RTCUtils extends Listenable {
-    /**
-     *
-     */
-    constructor() {
-        super(eventEmitter);
-    }
-
     /**
      * Depending on the browser, sets difference instance methods for
      * interacting with user media and adds methods to native WebRTC-related
@@ -347,7 +279,7 @@ class RTCUtils extends Listenable {
                 logger.debug('Available devices: ', availableDevices);
                 sendDeviceListToAnalytics(availableDevices);
 
-                eventEmitter.emit(
+                this.eventEmitter.emit(
                     RTCEvents.DEVICE_LIST_AVAILABLE,
                     availableDevices);
 
@@ -373,12 +305,12 @@ class RTCUtils extends Listenable {
     enumerateDevices(callback) {
         navigator.mediaDevices.enumerateDevices()
             .then(devices => {
-                updateKnownDevices(devices);
+                this._updateKnownDevices(devices);
                 callback(devices);
             })
             .catch(error => {
                 logger.warn(`Failed to  enumerate devices. ${error}`);
-                updateKnownDevices([]);
+                this._updateKnownDevices([]);
                 callback([]);
             });
     }
@@ -407,7 +339,7 @@ class RTCUtils extends Listenable {
             navigator.mediaDevices.getUserMedia(constraints)
                 .then(stream => {
                     logger.log('onUserMediaSuccess');
-                    updateGrantedPermissions(umDevices, stream);
+                    this._updateGrantedPermissions(umDevices, stream);
                     if (!timeoutExpired) {
                         if (typeof gumTimeout !== 'undefined') {
                             clearTimeout(gumTimeout);
@@ -427,7 +359,7 @@ class RTCUtils extends Listenable {
                     }
 
                     if (jitsiError.name === JitsiTrackErrors.PERMISSION_DENIED) {
-                        updateGrantedPermissions(umDevices, undefined);
+                        this._updateGrantedPermissions(umDevices, undefined);
                     }
 
                     // else {
@@ -497,6 +429,65 @@ class RTCUtils extends Listenable {
         return missingDevices;
     }
 
+    /**
+     * Event handler for the 'devicechange' event.
+     *
+     * @param {MediaDeviceInfo[]} devices - list of media devices.
+     * @emits RTCEvents.DEVICE_LIST_CHANGED
+     */
+    _onMediaDevicesListChanged(devicesReceived) {
+        availableDevices = devicesReceived.slice(0);
+        logger.info('list of media devices has changed:', availableDevices);
+
+        sendDeviceListToAnalytics(availableDevices);
+
+        // Used by tracks to update the real device id before the consumer of lib-jitsi-meet receives the
+        // new device list.
+        this.eventEmitter.emit(RTCEvents.DEVICE_LIST_WILL_CHANGE, availableDevices);
+
+        this.eventEmitter.emit(RTCEvents.DEVICE_LIST_CHANGED, availableDevices);
+    }
+
+    /**
+     * Update known devices.
+     *
+     * @param {Array<Object>} pds - The new devices.
+     * @returns {void}
+     *
+     * NOTE: Use this function as a shared callback to handle both the devicechange event and the
+     * polling implementations.
+     * This prevents duplication and works around a chrome bug (verified to occur on 68) where devicechange
+     * fires twice in a row, which can cause async post devicechange processing to collide.
+     */
+    _updateKnownDevices(pds) {
+        if (compareAvailableMediaDevices(pds)) {
+            this._onMediaDevicesListChanged(pds);
+        }
+    }
+
+    /**
+     * Updates the granted permissions based on the options we requested and the
+     * streams we received.
+     * @param um the options we requested to getUserMedia.
+     * @param stream the stream we received from calling getUserMedia.
+     */
+    _updateGrantedPermissions(um, stream) {
+        const audioTracksReceived
+            = Boolean(stream) && stream.getAudioTracks().length > 0;
+        const videoTracksReceived
+            = Boolean(stream) && stream.getVideoTracks().length > 0;
+        const grantedPermissions = {};
+
+        if (um.indexOf('video') !== -1) {
+            grantedPermissions.video = videoTracksReceived;
+        }
+        if (um.indexOf('audio') !== -1) {
+            grantedPermissions.audio = audioTracksReceived;
+        }
+
+        this.eventEmitter.emit(RTCEvents.PERMISSIONS_CHANGED, grantedPermissions);
+    }
+
     /**
      * Gets streams from specified device types. This function intentionally
      * ignores errors for upstream to catch and handle instead.
@@ -792,7 +783,7 @@ class RTCUtils extends Listenable {
 
                 logger.log(`Audio output device set to ${deviceId}`);
 
-                eventEmitter.emit(RTCEvents.AUDIO_OUTPUT_DEVICE_CHANGED,
+                this.eventEmitter.emit(RTCEvents.AUDIO_OUTPUT_DEVICE_CHANGED,
                     deviceId);
             });
     }

modules/RTCStats/RTCStats.ts

@@ -2,7 +2,6 @@ import { getLogger } from '@jitsi/logger';
 
 import rtcstatsInit from '@jitsi/rtcstats/rtcstats';
 import traceInit from '@jitsi/rtcstats/trace-ws';
-import EventEmitter from 'events';
 
 import {
     CONFERENCE_JOINED,
@@ -12,6 +11,7 @@ import {
 import JitsiConference from '../../JitsiConference';
 import { IRTCStatsConfiguration } from './interfaces';
 import { RTC_STATS_PC_EVENT, RTC_STATS_WC_DISCONNECTED } from './RTCStatsEvents';
+import EventEmitter from '../util/EventEmitter';
 
 const logger = getLogger(__filename);
 

modules/detection/NoAudioSignalDetection.js

@@ -1,7 +1,6 @@
-import EventEmitter from 'events';
-
 import * as JitsiConferenceEvents from '../../JitsiConferenceEvents';
 import * as JitsiTrackEvents from '../../JitsiTrackEvents';
+import EventEmitter from '../util/EventEmitter';
 
 import * as DetectionEvents from './DetectionEvents';
 

modules/detection/TrackVADEmitter.js

@@ -1,6 +1,5 @@
-import EventEmitter from 'events';
-
 import RTC from '../RTC/RTC';
+import EventEmitter from '../util/EventEmitter';
 import { createAudioContext } from '../webaudio/WebAudioUtils';
 
 import { VAD_SCORE_PUBLISHED } from './DetectionEvents';

modules/detection/VADAudioAnalyser.js

@@ -1,7 +1,7 @@
 import { getLogger } from '@jitsi/logger';
-import { EventEmitter } from 'events';
 
 import * as JitsiConferenceEvents from '../../JitsiConferenceEvents';
+import EventEmitter from '../util/EventEmitter';
 
 import { DETECTOR_STATE_CHANGE, VAD_SCORE_PUBLISHED } from './DetectionEvents';
 import TrackVADEmitter from './TrackVADEmitter';

modules/detection/VADNoiseDetection.js

@@ -1,5 +1,4 @@
-import { EventEmitter } from 'events';
-
+import EventEmitter from '../util/EventEmitter';
 import { calculateAverage, filterPositiveValues } from '../util/MathUtil';
 
 import { DETECTOR_STATE_CHANGE, VAD_NOISY_DEVICE } from './DetectionEvents';

modules/detection/VADReportingService.js

@@ -1,5 +1,6 @@
 import { getLogger } from '@jitsi/logger';
-import EventEmitter from 'events';
+
+import EventEmitter from '../util/EventEmitter';
 
 import * as DetectionEvents from './DetectionEvents';
 import TrackVADEmitter from './TrackVADEmitter';

modules/detection/VADTalkMutedDetection.js

@@ -1,5 +1,4 @@
-import { EventEmitter } from 'events';
-
+import EventEmitter from '../util/EventEmitter';
 import { calculateAverage } from '../util/MathUtil';
 
 import { DETECTOR_STATE_CHANGE, VAD_TALK_WHILE_MUTED } from './DetectionEvents';

modules/statistics/SpeakerStatsCollector.spec.js

@@ -1,8 +1,7 @@
-import EventEmitter from 'events';
-
 import JitsiConference from '../../JitsiConference';
 import * as JitsiConferenceEvents from '../../JitsiConferenceEvents';
 import JitsiParticipant from '../../JitsiParticipant';
+import EventEmitter from '../util/EventEmitter';
 
 import SpeakerStats from './SpeakerStats';
 import SpeakerStatsCollector from './SpeakerStatsCollector';

modules/statistics/statistics.js

@@ -1,11 +1,10 @@
-import EventEmitter from 'events';
-
 import * as JitsiConferenceEvents from '../../JitsiConferenceEvents';
 import { JitsiTrackEvents } from '../../JitsiTrackEvents';
 import { FEEDBACK } from '../../service/statistics/AnalyticsEvents';
 import * as StatisticsEvents from '../../service/statistics/Events';
 import RTCStats from '../RTCStats/RTCStats';
 import browser from '../browser';
+import EventEmitter from '../util/EventEmitter';
 import WatchRTC from '../watchRTC/WatchRTC';
 
 import analytics from './AnalyticsAdapter';

modules/util/EventEmitter.js

@@ -0,0 +1,18 @@
+import { EventEmitter as NodeEventEmitter } from 'events';
+
+/**
+ * The class creates our own EventEmitter instance
+ */
+export default class EventEmitter extends NodeEventEmitter {
+    /**
+     * Creates new instance.
+     * @constructor
+     */
+    constructor() {
+        super();
+
+        // aliases for addListener/removeListener
+        this.addEventListener = this.addListener;
+        this.removeEventListener = this.removeListener;
+    }
+}

modules/util/Listenable.js

@@ -1,4 +1,4 @@
-import EventEmitter from 'events';
+import EventEmitter from './EventEmitter';
 
 /**
  * The class implements basic event operations - add/remove listener.
@@ -8,11 +8,10 @@ import EventEmitter from 'events';
 export default class Listenable {
     /**
      * Creates new instance.
-     * @param {EventEmitter} eventEmitter
      * @constructor
      */
-    constructor(eventEmitter = new EventEmitter()) {
-        this.eventEmitter = eventEmitter;
+    constructor() {
+        this.eventEmitter = new EventEmitter();
 
         // aliases for addListener/removeListener
         this.addEventListener = this.on = this.addListener;
@@ -20,15 +19,25 @@ export default class Listenable {
     }
 
     /**
-     * Adds new listener.
+     * Adds new cancellable listener.
      * @param {String} eventName the name of the event
      * @param {Function} listener the listener.
      * @returns {Function} - The unsubscribe function.
      */
-    addListener(eventName, listener) {
-        this.eventEmitter.addListener(eventName, listener);
+    addCancellableListener(eventName, listener) {
+        this.addListener(eventName, listener);
+
+        return () => this.removeListener(eventName, listener);
+    }
 
-        return () => this.removeEventListener(eventName, listener);
+    /**
+     * Adds new listener.
+     * @param {String} eventName the name of the event
+     * @param {Function} listener the listener.
+     * @returns {EventEmitter} - The unsubscribe function.
+     */
+    addListener(eventName, listener) {
+        return this.eventEmitter.addListener(eventName, listener);
     }
 
     /**
@@ -36,8 +45,17 @@ export default class Listenable {
      * @param {String} eventName the name of the event that triggers the
      * listener
      * @param {Function} listener the listener.
+     * @returns {EventEmitter} - The unsubscribe function.
      */
     removeListener(eventName, listener) {
-        this.eventEmitter.removeListener(eventName, listener);
+        return this.eventEmitter.removeListener(eventName, listener);
+    }
+
+    /**
+     * Emits an event.
+     * @param {string} event - event name
+     */
+    emit(event, ...args) {
+        this.eventEmitter.emit(event, ...args);
     }
 }

modules/xmpp/ResumeTask.js

@@ -51,7 +51,7 @@ export default class ResumeTask {
         this._resumeRetryN += 1;
 
         this._networkOnlineListener
-            = NetworkInfo.addEventListener(
+            = NetworkInfo.addCancellableListener(
                 NETWORK_INFO_EVENT,
                 ({ isOnline }) => {
                     if (isOnline) {

package.json

@@ -69,7 +69,7 @@
     "build:webpack": "LIB_JITSI_MEET_COMMIT_HASH=$(git rev-parse --short HEAD 2>/dev/null) webpack",
     "build:webpack-dev": "webpack --mode development",
     "build:tsc": "tsc --build --clean && tsc",
-    "gen-types": "tsc --declaration --declarationDir types/auto --emitDeclarationOnly",
+    "gen-types": "tsc --declaration --emitDeclarationOnly --out index.js",
     "lint": "eslint .",
     "lint-fix": "eslint . --fix",
     "postinstall": "patch-package",
@@ -83,7 +83,8 @@
   "module": "dist/esm/JitsiMeetJS.js",
   "files": [
     "dist",
-    "types"
+    "types",
+    "index.d.ts"
   ],
   "license": "Apache-2.0"
 }

types/hand-crafted/JitsiMediaDevices.d.ts

@@ -8,10 +8,7 @@ declare class JitsiMediaDevices {
   isMultipleAudioInputSupported: () => boolean;
   getAudioOutputDevice: () => string;
   setAudioOutputDevice: ( deviceId: string ) => Promise<unknown>; // TODO:
-  addEventListener: ( event: string, handler: unknown ) => void; // TODO: identify the enum for the event types and the strongly typed handlers
-  removeEventListener: ( event: string, handler: unknown ) => void; // TODO: identify the enum for the event types and the strongly typed handlers
-  emitEvent: ( event: string, ...args: unknown[] ) => void; // TODO: identify the enum for the event types
 }
 
 declare var _default: JitsiMediaDevices;
-export default _default;
+export default _default;