ref(connection-indicator) Convert to TS (#12239)

react/features/base/conference/reducer.ts

@@ -51,6 +51,7 @@ export interface IJitsiConference {
     kickParticipant: Function;
     muteParticipant: Function;
     myLobbyUserId: Function;
+    myUserId: Function;
     on: Function;
     removeTrack: Function;
     replaceTrack: Function;

react/features/base/connection/reducer.ts

@@ -20,6 +20,7 @@ export interface IConnectionState {
     connecting?: Object;
     connection?: {
         getJid: () => string;
+        getLogs: () => Object;
     };
     error?: ConnectionFailedError;
     locationURL?: URL;

react/features/connection-indicator/actions.js → react/features/connection-indicator/actions.ts

@@ -1,3 +1,4 @@
+import { IStore } from '../app/types';
 import getRoomName from '../base/config/getRoomName';
 import { downloadJSON } from '../base/util/downloadJSON';
 
@@ -8,11 +9,11 @@ import { downloadJSON } from '../base/util/downloadJSON';
  * @returns {Function}
  */
 export function saveLogs() {
-    return (dispatch, getState) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
 
-        const logs = getState()['features/base/connection'].connection.getLogs();
+        const logs = getState()['features/base/connection'].connection?.getLogs();
         const roomName = getRoomName() || '';
 
-        downloadJSON(logs, `meetlog-${roomName}.json`);
+        downloadJSON(logs ?? {}, `meetlog-${roomName}.json`);
     };
 }

react/features/connection-indicator/components/web/ConnectionIndicator.tsx

@@ -25,7 +25,6 @@ import {
     isParticipantConnectionStatusInterrupted,
     isTrackStreamingStatusInactive,
     isTrackStreamingStatusInterrupted
-    // @ts-ignore
 } from '../../functions';
 import AbstractConnectionIndicator, {
     INDICATOR_DISPLAY_THRESHOLD,

react/features/connection-indicator/functions.js → react/features/connection-indicator/functions.ts

@@ -1,4 +1,6 @@
 import { JitsiParticipantConnectionStatus, JitsiTrackStreamingStatus } from '../base/lib-jitsi-meet';
+import { Participant } from '../base/participants/types';
+import { ITrack } from '../base/tracks/reducer';
 
 /**
  * Checks if the passed track's streaming status is active.
@@ -6,7 +8,7 @@ import { JitsiParticipantConnectionStatus, JitsiTrackStreamingStatus } from '../
  * @param {Object} videoTrack - Track reference.
  * @returns {boolean} - Is streaming status active.
  */
-export function isTrackStreamingStatusActive(videoTrack) {
+export function isTrackStreamingStatusActive(videoTrack: ITrack) {
     const streamingStatus = videoTrack?.streamingStatus;
 
     return streamingStatus === JitsiTrackStreamingStatus.ACTIVE;
@@ -18,7 +20,7 @@ export function isTrackStreamingStatusActive(videoTrack) {
  * @param {Object} videoTrack - Track reference.
  * @returns {boolean} - Is streaming status inactive.
  */
-export function isTrackStreamingStatusInactive(videoTrack) {
+export function isTrackStreamingStatusInactive(videoTrack: ITrack) {
     const streamingStatus = videoTrack?.streamingStatus;
 
     return streamingStatus === JitsiTrackStreamingStatus.INACTIVE;
@@ -30,7 +32,7 @@ export function isTrackStreamingStatusInactive(videoTrack) {
  * @param {Object} videoTrack - Track reference.
  * @returns {boolean} - Is streaming status interrupted.
  */
-export function isTrackStreamingStatusInterrupted(videoTrack) {
+export function isTrackStreamingStatusInterrupted(videoTrack: ITrack) {
     const streamingStatus = videoTrack?.streamingStatus;
 
     return streamingStatus === JitsiTrackStreamingStatus.INTERRUPTED;
@@ -42,7 +44,7 @@ export function isTrackStreamingStatusInterrupted(videoTrack) {
  * @param {Object} participant - Participant reference.
  * @returns {boolean} - Is connection status active.
  */
-export function isParticipantConnectionStatusActive(participant) {
+export function isParticipantConnectionStatusActive(participant: Participant) {
     const connectionStatus = participant?.connectionStatus;
 
     return connectionStatus === JitsiParticipantConnectionStatus.ACTIVE;
@@ -54,7 +56,7 @@ export function isParticipantConnectionStatusActive(participant) {
  * @param {Object} participant - Participant reference.
  * @returns {boolean} - Is connection status inactive.
  */
-export function isParticipantConnectionStatusInactive(participant) {
+export function isParticipantConnectionStatusInactive(participant?: Participant) {
     const connectionStatus = participant?.connectionStatus;
 
     return connectionStatus === JitsiParticipantConnectionStatus.INACTIVE;
@@ -66,7 +68,7 @@ export function isParticipantConnectionStatusInactive(participant) {
  * @param {Object} participant - Participant reference.
  * @returns {boolean} - Is connection status interrupted.
  */
-export function isParticipantConnectionStatusInterrupted(participant) {
+export function isParticipantConnectionStatusInterrupted(participant?: Participant) {
     const connectionStatus = participant?.connectionStatus;
 
     return connectionStatus === JitsiParticipantConnectionStatus.INTERRUPTED;

react/features/connection-indicator/middleware.js → react/features/connection-indicator/middleware.ts

@@ -1,9 +1,7 @@
-// @flow
+import { CONFERENCE_JOINED } from '../base/conference/actionTypes';
+import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
 
-import { CONFERENCE_JOINED } from '../base/conference';
-import { MiddlewareRegistry } from '../base/redux';
-
-import { statsEmitter } from './index';
+import statsEmitter from './statsEmitter';
 
 /**
  * Implements the middleware of the feature connection-indicator.
@@ -11,7 +9,7 @@ import { statsEmitter } from './index';
  * @param {Store} store - The redux store.
  * @returns {Function}
  */
-// eslint-disable-next-line no-unused-vars
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 MiddlewareRegistry.register(store => next => action => {
     switch (action.type) {
     case CONFERENCE_JOINED: {

react/features/connection-indicator/statsEmitter.js → react/features/connection-indicator/statsEmitter.ts

@@ -1,7 +1,6 @@
-// @flow
-
 import _ from 'lodash';
 
+import { IJitsiConference } from '../base/conference/reducer';
 import {
     JitsiConnectionQualityEvents
 } from '../base/lib-jitsi-meet';
@@ -13,7 +12,13 @@ import {
  *     userId: Function[]
  * }.
  */
-const subscribers = {};
+const subscribers: any = {};
+
+interface Stats {
+    codec?: Object;
+    framerate?: Object;
+    resolution?: Object;
+}
 
 /**
  * A singleton that acts as a pub/sub service for connection stat updates.
@@ -27,12 +32,12 @@ const statsEmitter = {
      * {@code statsEmitter} should subscribe for stat updates.
      * @returns {void}
      */
-    startListeningForStats(conference: Object) {
+    startListeningForStats(conference: IJitsiConference) {
         conference.on(JitsiConnectionQualityEvents.LOCAL_STATS_UPDATED,
-            stats => this._onStatsUpdated(conference.myUserId(), stats));
+            (stats: Stats) => this._onStatsUpdated(conference.myUserId(), stats));
 
         conference.on(JitsiConnectionQualityEvents.REMOTE_STATS_UPDATED,
-            (id, stats) => this._emitStatsUpdate(id, stats));
+            (id: string, stats: Stats) => this._emitStatsUpdate(id, stats));
     },
 
     /**
@@ -44,7 +49,7 @@ const statsEmitter = {
      * user have been updated.
      * @returns {void}
      */
-    subscribeToClientStats(id: ?string, callback: Function) {
+    subscribeToClientStats(id: string | undefined, callback: Function) {
         if (!id) {
             return;
         }
@@ -72,7 +77,7 @@ const statsEmitter = {
         }
 
         const filteredSubscribers = subscribers[id].filter(
-            subscriber => subscriber !== callback);
+            (subscriber: Function) => subscriber !== callback);
 
         if (filteredSubscribers.length) {
             subscribers[id] = filteredSubscribers;
@@ -89,10 +94,10 @@ const statsEmitter = {
      * @param {Object} stats - New connection stats for the user.
      * @returns {void}
      */
-    _emitStatsUpdate(id: string, stats: Object = {}) {
+    _emitStatsUpdate(id: string, stats: Stats = {}) {
         const callbacks = subscribers[id] || [];
 
-        callbacks.forEach(callback => {
+        callbacks.forEach((callback: Function) => {
             callback(stats);
         });
     },
@@ -107,7 +112,7 @@ const statsEmitter = {
      * by the library.
      * @returns {void}
      */
-    _onStatsUpdated(localUserId: string, stats: Object) {
+    _onStatsUpdated(localUserId: string, stats: Stats) {
         const allUserFramerates = stats.framerate || {};
         const allUserResolutions = stats.resolution || {};
         const allUserCodecs = stats.codec || {};
@@ -117,9 +122,9 @@ const statsEmitter = {
         // be primitives, not maps, so here we override the 'lib-jitsi-meet'
         // stats objects.
         const modifiedLocalStats = Object.assign({}, stats, {
-            framerate: allUserFramerates[localUserId],
-            resolution: allUserResolutions[localUserId],
-            codec: allUserCodecs[localUserId]
+            framerate: allUserFramerates[localUserId as keyof typeof allUserFramerates],
+            resolution: allUserResolutions[localUserId as keyof typeof allUserResolutions],
+            codec: allUserCodecs[localUserId as keyof typeof allUserCodecs]
         });
 
         this._emitStatsUpdate(localUserId, modifiedLocalStats);
@@ -133,21 +138,21 @@ const statsEmitter = {
         _.union(framerateUserIds, resolutionUserIds, codecUserIds)
             .filter(id => id !== localUserId)
             .forEach(id => {
-                const remoteUserStats = {};
+                const remoteUserStats: Stats = {};
 
-                const framerate = allUserFramerates[id];
+                const framerate = allUserFramerates[id as keyof typeof allUserFramerates];
 
                 if (framerate) {
                     remoteUserStats.framerate = framerate;
                 }
 
-                const resolution = allUserResolutions[id];
+                const resolution = allUserResolutions[id as keyof typeof allUserResolutions];
 
                 if (resolution) {
                     remoteUserStats.resolution = resolution;
                 }
 
-                const codec = allUserCodecs[id];
+                const codec = allUserCodecs[id as keyof typeof allUserCodecs];
 
                 if (codec) {
                     remoteUserStats.codec = codec;