language(typescript) actionTypes.js -> actionTypes.ts (#10940)

* language(typescript) first ts component, added ts configurations, actionTypes.js are now ts files

.eslintignore

@@ -16,4 +16,4 @@ react/features/face-landmarks/resources/*
 !.eslintrc.js
 
 # Not worth it.
-actionTypes.js
+actionTypes.ts

CONTRIBUTING.md

@@ -130,7 +130,7 @@ When adding a new feature, this would be the usual layout.
 
 ```
 react/features/sample/
-├── actionTypes.js
+├── actionTypes.ts
 ├── actions.js
 ├── components
 │   ├── AnotherComponent.js

conference.js

@@ -66,7 +66,6 @@ import {
 } from './react/features/base/devices';
 import {
     browser,
-    isFatalJitsiConnectionError,
     JitsiConferenceErrors,
     JitsiConferenceEvents,
     JitsiConnectionErrors,
@@ -77,6 +76,7 @@ import {
     JitsiTrackErrors,
     JitsiTrackEvents
 } from './react/features/base/lib-jitsi-meet';
+import { isFatalJitsiConnectionError } from './react/features/base/lib-jitsi-meet/functions';
 import {
     getStartWithAudioMuted,
     getStartWithVideoMuted,

connection.js

@@ -13,10 +13,10 @@ import {
 import { openDialog } from './react/features/base/dialog/actions';
 import { setJWT } from './react/features/base/jwt';
 import {
-    isFatalJitsiConnectionError,
     JitsiConnectionErrors,
     JitsiConnectionEvents
 } from './react/features/base/lib-jitsi-meet';
+import { isFatalJitsiConnectionError } from './react/features/base/lib-jitsi-meet/functions';
 import { getCustomerDetails } from './react/features/jaas/actions.any';
 import { isVpaasMeeting, getJaasJWT } from './react/features/jaas/functions';
 import { setPrejoinDisplayNameRequired } from './react/features/prejoin/actions';

package-lock.json

@@ -161,6 +161,7 @@
         "string-replace-loader": "3.0.3",
         "style-loader": "0.19.0",
         "traverse": "0.6.6",
+        "ts-loader": "9.2.6",
         "typescript": "4.3.5",
         "unorm": "1.6.0",
         "webpack": "5.57.1",
@@ -18332,6 +18333,110 @@
       "resolved": "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz",
       "integrity": "sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ=="
     },
+    "node_modules/ts-loader": {
+      "version": "9.2.6",
+      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.2.6.tgz",
+      "integrity": "sha512-QMTC4UFzHmu9wU2VHZEmWWE9cUajjfcdcws+Gh7FhiO+Dy0RnR1bNz0YCHqhI0yRowCE9arVnNxYHqELOy9Hjw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "enhanced-resolve": "^5.0.0",
+        "micromatch": "^4.0.0",
+        "semver": "^7.3.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "typescript": "*",
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/ts-loader/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/ts-loader/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/ts-loader/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/ts-loader/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/ts-loader/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ts-loader/node_modules/semver": {
+      "version": "7.3.5",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
+      "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/ts-loader/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/tsconfig-paths": {
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.12.0.tgz",
@@ -33840,6 +33945,78 @@
       "resolved": "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz",
       "integrity": "sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ=="
     },
+    "ts-loader": {
+      "version": "9.2.6",
+      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.2.6.tgz",
+      "integrity": "sha512-QMTC4UFzHmu9wU2VHZEmWWE9cUajjfcdcws+Gh7FhiO+Dy0RnR1bNz0YCHqhI0yRowCE9arVnNxYHqELOy9Hjw==",
+      "dev": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "enhanced-resolve": "^5.0.0",
+        "micromatch": "^4.0.0",
+        "semver": "^7.3.4"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "semver": {
+          "version": "7.3.5",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
+          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "tsconfig-paths": {
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.12.0.tgz",

package.json

@@ -166,6 +166,7 @@
     "string-replace-loader": "3.0.3",
     "style-loader": "0.19.0",
     "traverse": "0.6.6",
+    "ts-loader": "9.2.6",
     "typescript": "4.3.5",
     "unorm": "1.6.0",
     "webpack": "5.57.1",

react/features/analytics/functions.js

@@ -8,9 +8,9 @@ import {
 } from '../base/environment/utils';
 import JitsiMeetJS, {
     analytics,
-    browser,
-    isAnalyticsEnabled
+    browser
 } from '../base/lib-jitsi-meet';
+import { isAnalyticsEnabled } from '../base/lib-jitsi-meet/functions';
 import { getJitsiMeetGlobalNS, loadScript, parseURIString } from '../base/util';
 
 import { AmplitudeHandler, MatomoHandler } from './handlers';

react/features/app/actions.web.js

@@ -13,7 +13,7 @@ import {
     storeConfig
 } from '../base/config';
 import { setLocationURL } from '../base/connection';
-import { loadConfig } from '../base/lib-jitsi-meet';
+import { loadConfig } from '../base/lib-jitsi-meet/functions.web';
 import {
     getBackendSafeRoomName,
     parseURIString

react/features/base/lib-jitsi-meet/index.js

@@ -24,7 +24,3 @@ export const JitsiRecordingConstants = JitsiMeetJS.constants.recording;
 export const JitsiSIPVideoGWStatus = JitsiMeetJS.constants.sipVideoGW;
 export const JitsiTrackErrors = JitsiMeetJS.errors.track;
 export const JitsiTrackEvents = JitsiMeetJS.events.track;
-
-export * from './actions';
-export * from './actionTypes';
-export * from './functions';

react/features/base/logging/middleware.js

@@ -5,9 +5,9 @@ import Logger from '@jitsi/logger';
 import { APP_WILL_MOUNT } from '../app';
 import { CONFERENCE_JOINED, getCurrentConference } from '../conference';
 import JitsiMeetJS, {
-    LIB_WILL_INIT,
     JitsiConferenceEvents
 } from '../lib-jitsi-meet';
+import { LIB_WILL_INIT } from '../lib-jitsi-meet/actionTypes';
 import { MiddlewareRegistry } from '../redux';
 import { isTestModeEnabled } from '../testing';
 

react/features/base/tracks/actions.js

@@ -7,7 +7,8 @@ import {
 import { NOTIFICATION_TIMEOUT_TYPE, showErrorNotification, showNotification } from '../../notifications';
 import { getCurrentConference } from '../conference';
 import { getMultipleVideoSupportFeatureFlag, getSourceNameSignalingFeatureFlag } from '../config';
-import { JitsiTrackErrors, JitsiTrackEvents, createLocalTrack } from '../lib-jitsi-meet';
+import { JitsiTrackErrors, JitsiTrackEvents } from '../lib-jitsi-meet';
+import { createLocalTrack } from '../lib-jitsi-meet/functions';
 import {
     CAMERA_FACING_MODE,
     MEDIA_TYPE,

react/features/display-name/components/native/DisplayNameLabel.tsx

@@ -1,13 +1,11 @@
-// @flow
-
-import React, { Component } from 'react';
+import * as React from 'react';
 import { Text, View } from 'react-native';
 
 import {
     getParticipantById,
     getParticipantDisplayName
-} from '../../../base/participants';
-import { connect } from '../../../base/redux';
+} from '../../../base/participants/functions';
+import { connect } from '../../../base/redux/functions';
 
 import styles from './styles';
 
@@ -16,28 +14,28 @@ type Props = {
     /**
      * The name of the participant to render.
      */
-    _participantName: string,
+    _participantName: string;
 
     /**
      * True of the label needs to be rendered. False otherwise.
      */
-    _render: boolean,
+    _render: boolean;
 
     /**
      * Whether ot not the name is in a container.
      */
-    contained?: boolean,
+    contained?: boolean;
 
     /**
      * The ID of the participant to render the label for.
      */
-    participantId: string
+    participantId: string;
 }
 
 /**
  * Renders a label with the display name of the on-stage participant.
  */
-class DisplayNameLabel extends Component<Props> {
+class DisplayNameLabel extends React.Component<Props> {
     /**
      * Implements {@code Component#render}.
      *
@@ -63,18 +61,16 @@ class DisplayNameLabel extends Component<Props> {
 /**
  * Maps part of the Redux state to the props of this component.
  *
- * @param {Object} state - The Redux state.
+ * @param {any} state - The Redux state.
  * @param {Props} ownProps - The own props of the component.
- * @returns {{
- * }}
+ * @returns {Props}
  */
-function _mapStateToProps(state: Object, ownProps: Props) {
-    const { participantId, contained } = ownProps;
-    const participant = getParticipantById(state, participantId);
+function _mapStateToProps(state: any, ownProps) {
+    const participant = getParticipantById(state, ownProps.participantId);
 
     return {
-        _participantName: getParticipantDisplayName(state, participantId),
-        _render: participant && (!participant?.local || contained) && !participant?.isFakeParticipant
+        _participantName: getParticipantDisplayName(state, ownProps.participantId),
+        _render: participant && (!participant?.local || ownProps.contained) && !participant?.isFakeParticipant
     };
 }
 

react/features/display-name/components/native/index.js

@@ -1,4 +1,2 @@
-// @flow
-
 export { default as DisplayNameLabel } from './DisplayNameLabel';
 export { default as DisplayNamePrompt } from './DisplayNamePrompt';

react/features/display-name/components/web/DisplayNameBadge.tsx

@@ -1,22 +1,19 @@
-// @flow
-
 import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 
-type Props = {
-
-    /**
-     * The name to be displayed within the badge.
-     */
-    name: string
+interface Theme {
+    palette: any;
+    text01: string;
 }
 
-const useStyles = makeStyles(theme => {
+const useStyles = makeStyles((theme: Theme) => {
+    const { text01 } = theme.palette;
+
     return {
         badge: {
             background: 'rgba(0, 0, 0, 0.6)',
             borderRadius: '3px',
-            color: theme.palette.text01,
+            color: text01,
             maxWidth: '50%',
             overflow: 'hidden',
             padding: '2px 16px',
@@ -32,12 +29,12 @@ const useStyles = makeStyles(theme => {
  * @param {Props} props - The props of the component.
  * @returns {ReactElement}
  */
-const DisplayNameBadge = ({ name }: Props) => {
+const DisplayNameBadge: React.FC<{ name: string }> = ({ name }) => {
     const classes = useStyles();
 
     return (
         <div className = { classes.badge }>
-            {name}
+            { name }
         </div>
     );
 };

react/features/display-name/functions.ts

@@ -1,4 +1,3 @@
-// @flow
 
 /**
  * Appends a suffix to the display name.
@@ -7,7 +6,7 @@
  * @param {string} suffix - Suffix that will be appended.
  * @returns {string} The formatted display name.
  */
-export function appendSuffix(displayName: string, suffix: string = '') {
+export function appendSuffix(displayName: string, suffix = ''): string {
     return `${displayName || suffix}${
         displayName && suffix && displayName !== suffix ? ` (${suffix})` : ''}`;
 }

react/features/dynamic-branding/functions.any.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { loadConfig } from '../base/lib-jitsi-meet';
+import { loadConfig } from '../base/lib-jitsi-meet/functions';
 
 /**
  * Extracts the fqn part from a path, where fqn represents

react/features/face-landmarks/actionTypes.ts

@@ -1,5 +1,3 @@
-// @flow
-
 /**
  * Redux action type dispatched in order to add a face expression.
  *
@@ -19,7 +17,7 @@ export const ADD_FACE_EXPRESSION = 'ADD_FACE_EXPRESSION';
  *      faceExpression: string
  * }
 */
-export const ADD_TO_FACE_EXPRESSIONS_BUFFER = 'ADD_TO_FACE_EXPRESSIONS_BUFFER ';
+export const ADD_TO_FACE_EXPRESSIONS_BUFFER = 'ADD_TO_FACE_EXPRESSIONS_BUFFER';
 
 /**
  * Redux action type dispatched in order to clear the face expressions buffer in the state.

react/features/face-landmarks/middleware.js

@@ -1,5 +1,3 @@
-// @flow
-
 import {
     CONFERENCE_JOINED,
     CONFERENCE_WILL_LEAVE,

react/features/overlay/components/AbstractPageReloadOverlay.js

@@ -12,7 +12,7 @@ import { reloadNow } from '../../app/actions';
 import {
     isFatalJitsiConferenceError,
     isFatalJitsiConnectionError
-} from '../../base/lib-jitsi-meet';
+} from '../../base/lib-jitsi-meet/functions';
 import logger from '../logger';
 
 import ReloadButton from './web/ReloadButton';

react/features/overlay/middleware.js

@@ -1,10 +1,10 @@
 // @flow
 
+import { JitsiConferenceErrors } from '../base/lib-jitsi-meet';
 import {
-    JitsiConferenceErrors,
     isFatalJitsiConferenceError,
     isFatalJitsiConnectionError
-} from '../base/lib-jitsi-meet';
+} from '../base/lib-jitsi-meet/functions';
 import { StateListenerRegistry } from '../base/redux';
 
 import { setFatalError } from './actions';

react/features/prejoin/actions.js

@@ -6,7 +6,8 @@ declare var APP: Object;
 import { v4 as uuidv4 } from 'uuid';
 
 import { getDialOutStatusUrl, getDialOutUrl, updateConfig } from '../base/config';
-import { browser, createLocalTrack } from '../base/lib-jitsi-meet';
+import { browser } from '../base/lib-jitsi-meet';
+import { createLocalTrack } from '../base/lib-jitsi-meet/functions';
 import { isVideoMutedByUser, MEDIA_TYPE } from '../base/media';
 import {
     createLocalTracksF,

react/features/recording/actions.any.js

@@ -21,7 +21,12 @@ import {
     SET_SELECTED_RECORDING_SERVICE,
     SET_STREAM_KEY
 } from './actionTypes';
-import { getRecordingLink, getResourceId, isSavingRecordingOnDropbox, sendMeetingHighlight } from './functions';
+import {
+    getRecordingLink,
+    getResourceId,
+    isSavingRecordingOnDropbox,
+    sendMeetingHighlight
+} from './functions';
 import logger from './logger';
 
 declare var APP: Object;

react/features/rtcstats/middleware.js

@@ -4,7 +4,7 @@ import { jitsiLocalStorage } from '@jitsi/js-utils';
 
 import { getAmplitudeIdentity } from '../analytics';
 import { CONFERENCE_UNIQUE_ID_SET, E2E_RTT_CHANGED, getConferenceOptions, getRoomName } from '../base/conference';
-import { LIB_WILL_INIT } from '../base/lib-jitsi-meet';
+import { LIB_WILL_INIT } from '../base/lib-jitsi-meet/actionTypes';
 import { DOMINANT_SPEAKER_CHANGED, getLocalParticipant } from '../base/participants';
 import { MiddlewareRegistry } from '../base/redux';
 import { ADD_FACE_EXPRESSION } from '../face-landmarks/actionTypes';

react/features/transcribing/reducer.js

@@ -1,10 +1,12 @@
+
 import { ReducerRegistry } from '../base/redux';
+
 import {
     _TRANSCRIBER_JOINED,
     _TRANSCRIBER_LEFT,
     _POTENTIAL_TRANSCRIBER_JOINED,
     SET_PENDING_TRANSCRIBING_NOTIFICATION_UID
-} from '../transcribing/actionTypes';
+} from './actionTypes';
 
 /**
  * Returns initial state for transcribing feature part of Redux store.

react/features/video-layout/middleware.web.js

@@ -10,7 +10,7 @@ import {
 } from '../base/participants';
 import { MiddlewareRegistry } from '../base/redux';
 import { TRACK_ADDED, TRACK_REMOVED, TRACK_STOPPED } from '../base/tracks';
-import { PARTICIPANTS_PANE_CLOSE, PARTICIPANTS_PANE_OPEN } from '../participants-pane/actionTypes.js';
+import { PARTICIPANTS_PANE_CLOSE, PARTICIPANTS_PANE_OPEN } from '../participants-pane/actionTypes';
 
 import './middleware.any';