ref(TS) Convert some features to TS (#12425)

react/features/base/conference/reducer.ts

@@ -70,6 +70,7 @@ export interface IJitsiConference {
     sendFeedback: Function;
     sendLobbyMessage: Function;
     sessionId: string;
+    setDesktopSharingFrameRate: Function;
     setDisplayName: Function;
     setLocalParticipantProperty: Function;
     setSubject: Function;

react/features/screen-share/actions.ts

@@ -1,16 +1,15 @@
-// @flow
-
+import { IStore } from '../app/types';
 import { openDialog } from '../base/dialog/actions';
 import { browser } from '../base/lib-jitsi-meet';
-import { shouldHideShareAudioHelper } from '../base/settings';
-import { toggleScreensharing } from '../base/tracks';
+import { shouldHideShareAudioHelper } from '../base/settings/functions';
+import { toggleScreensharing } from '../base/tracks/actions';
 
 import {
     SET_SCREENSHARE_CAPTURE_FRAME_RATE,
     SET_SCREENSHARE_TRACKS,
     SET_SCREEN_AUDIO_SHARE_STATE
 } from './actionTypes';
-import { ShareAudioDialog } from './components';
+import ShareAudioDialog from './components/ShareAudioDialog';
 import ShareMediaWarningDialog from './components/ShareScreenWarningDialog';
 import { isAudioOnlySharing, isScreenVideoShared } from './functions';
 
@@ -55,7 +54,7 @@ export function setScreenshareFramerate(captureFrameRate: number) {
  *      desktopAudioTrack: JitsiTrack
  * }}
  */
-export function setScreenshareAudioTrack(desktopAudioTrack) {
+export function setScreenshareAudioTrack(desktopAudioTrack: any) {
     return {
         type: SET_SCREENSHARE_TRACKS,
         desktopAudioTrack
@@ -69,12 +68,12 @@ export function setScreenshareAudioTrack(desktopAudioTrack) {
  * @returns {void}
  */
 export function startAudioScreenShareFlow() {
-    return (dispatch: Object => Object, getState: () => any) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
         const audioOnlySharing = isAudioOnlySharing(state);
 
         // If we're already in a normal screen sharing session, warn the user.
-        if (isScreenVideoShared(state)) {
+        if (isScreenVideoShared(state)) { // @ts-ignore
             dispatch(openDialog(ShareMediaWarningDialog, { _isAudioScreenShareWarning: true }));
 
             return;
@@ -92,6 +91,7 @@ export function startAudioScreenShareFlow() {
             return;
         }
 
+        // @ts-ignore
         dispatch(openDialog(ShareAudioDialog));
     };
 }
@@ -104,12 +104,12 @@ export function startAudioScreenShareFlow() {
  * @returns {void}
  */
 export function startScreenShareFlow(enabled: boolean) {
-    return (dispatch: Object => Object, getState: () => any) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
         const audioOnlySharing = isAudioOnlySharing(state);
 
         // If we're in an audio screen sharing session, warn the user.
-        if (audioOnlySharing) {
+        if (audioOnlySharing) { // @ts-ignore
             dispatch(openDialog(ShareMediaWarningDialog, { _isAudioScreenShareWarning: false }));
 
             return;

react/features/screen-share/logger.ts

@@ -1,5 +1,3 @@
-// @flow
-
 import { getLogger } from '../base/logging/functions';
 
 export default getLogger('features/screen-share');

react/features/screen-share/middleware.ts

@@ -1,14 +1,11 @@
-// @flow
-
-import { CONFERENCE_JOINED } from '../base/conference';
-import { MEDIA_TYPE } from '../base/media';
-import { MiddlewareRegistry } from '../base/redux';
+import { IStore } from '../app/types';
+import { CONFERENCE_JOINED } from '../base/conference/actionTypes';
+import { MEDIA_TYPE } from '../base/media/constants';
+import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
 
 import { SET_SCREENSHARE_CAPTURE_FRAME_RATE, SET_SCREEN_AUDIO_SHARE_STATE } from './actionTypes';
 import logger from './logger';
 
-declare var APP: Object;
-
 /**
  * Implements the middleware of the feature screen-share.
  *
@@ -57,7 +54,7 @@ MiddlewareRegistry.register(store => next => action => {
  * @private
  * @returns {void}
  */
-function _setScreenshareCaptureFps(store, frameRate) {
+function _setScreenshareCaptureFps(store: IStore, frameRate?: number) {
     const state = store.getState();
     const { conference } = state['features/base/conference'];
     const { captureFrameRate } = state['features/screen-share'];

react/features/settings/actions.ts

@@ -1,21 +1,22 @@
-// @flow
 import { batch } from 'react-redux';
 
-
+import { IStore } from '../app/types';
 import {
     setFollowMe,
     setStartMutedPolicy,
     setStartReactionsMuted
-} from '../base/conference';
-import { openDialog } from '../base/dialog';
-import { i18next } from '../base/i18n';
-import { updateSettings } from '../base/settings';
+} from '../base/conference/actions';
+import { openDialog } from '../base/dialog/actions';
+import i18next from '../base/i18n/i18next';
+import { updateSettings } from '../base/settings/actions';
 import { setScreenshareFramerate } from '../screen-share/actions';
 
 import {
     SET_AUDIO_SETTINGS_VISIBILITY,
     SET_VIDEO_SETTINGS_VISIBILITY
 } from './actionTypes';
+// eslint-disable-next-line lines-around-comment
+// @ts-ignore
 import { LogoutDialog, SettingsDialog } from './components';
 import {
     getModeratorTabProps,
@@ -24,8 +25,6 @@ import {
     getSoundsTabProps
 } from './functions';
 
-declare var APP: Object;
-
 /**
  * Opens {@code LogoutDialog}.
  *
@@ -46,7 +45,7 @@ export function openLogoutDialog(onLogout: Function) {
  * welcome page or not.
  * @returns {Function}
  */
-export function openSettingsDialog(defaultTab: string, isDisplayedOnWelcomePage: boolean) {
+export function openSettingsDialog(defaultTab: string, isDisplayedOnWelcomePage?: boolean) {
     return openDialog(SettingsDialog, {
         defaultTab,
         isDisplayedOnWelcomePage
@@ -85,8 +84,8 @@ function setVideoSettingsVisibility(value: boolean) {
  * @param {Object} newState - The new settings.
  * @returns {Function}
  */
-export function submitMoreTab(newState: Object): Function {
-    return (dispatch, getState) => {
+export function submitMoreTab(newState: any) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const currentState = getMoreTabProps(getState());
 
         const showPrejoinPage = newState.showPrejoinPage;
@@ -134,8 +133,8 @@ export function submitMoreTab(newState: Object): Function {
  * @param {Object} newState - The new settings.
  * @returns {Function}
  */
-export function submitModeratorTab(newState: Object): Function {
-    return (dispatch, getState) => {
+export function submitModeratorTab(newState: any) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const currentState = getModeratorTabProps(getState());
 
         if (newState.followMeEnabled !== currentState.followMeEnabled) {
@@ -164,8 +163,8 @@ export function submitModeratorTab(newState: Object): Function {
  * @param {Object} newState - The new settings.
  * @returns {Function}
  */
-export function submitProfileTab(newState: Object): Function {
-    return (dispatch, getState) => {
+export function submitProfileTab(newState: any) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const currentState = getProfileTabProps(getState());
 
         if (newState.displayName !== currentState.displayName) {
@@ -184,8 +183,8 @@ export function submitProfileTab(newState: Object): Function {
  * @param {Object} newState - The new settings.
  * @returns {Function}
  */
-export function submitSoundsTab(newState: Object): Function {
-    return (dispatch, getState) => {
+export function submitSoundsTab(newState: any) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const currentState = getSoundsTabProps(getState());
         const shouldNotUpdateReactionSounds = getModeratorTabProps(getState()).startReactionsMuted;
         const shouldUpdate = (newState.soundsIncomingMessage !== currentState.soundsIncomingMessage)
@@ -219,7 +218,7 @@ export function submitSoundsTab(newState: Object): Function {
  * @returns {void}
  */
 export function toggleAudioSettings() {
-    return (dispatch: Function, getState: Function) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const value = getState()['features/settings'].audioSettingsVisible;
 
         dispatch(setAudioSettingsVisibility(!value));
@@ -232,7 +231,7 @@ export function toggleAudioSettings() {
  * @returns {void}
  */
 export function toggleVideoSettings() {
-    return (dispatch: Function, getState: Function) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const value = getState()['features/settings'].videoSettingsVisible;
 
         dispatch(setVideoSettingsVisibility(!value));

react/features/settings/functions.ts

@@ -1,25 +1,27 @@
-// @flow
-
-import { isNameReadOnly } from '../base/config';
-import { SERVER_URL_CHANGE_ENABLED, getFeatureFlag } from '../base/flags';
-import { DEFAULT_LANGUAGE, LANGUAGES, i18next } from '../base/i18n';
+/* eslint-disable lines-around-comment */
+import { IReduxState } from '../app/types';
+import { IStateful } from '../base/app/types';
+import { isNameReadOnly } from '../base/config/functions';
+import { SERVER_URL_CHANGE_ENABLED } from '../base/flags/constants';
+import { getFeatureFlag } from '../base/flags/functions';
+import i18next, { DEFAULT_LANGUAGE, LANGUAGES } from '../base/i18n/i18next';
 import { createLocalTrack } from '../base/lib-jitsi-meet/functions';
 import {
     getLocalParticipant,
     isLocalParticipantModerator
-} from '../base/participants';
-import { toState } from '../base/redux';
-import { getHideSelfView } from '../base/settings';
-import { parseStandardURIString } from '../base/util';
+} from '../base/participants/functions';
+import { toState } from '../base/redux/functions';
+import { getHideSelfView } from '../base/settings/functions';
+import { parseStandardURIString } from '../base/util/uri';
+// @ts-ignore
 import { isStageFilmstripEnabled } from '../filmstrip/functions';
+// @ts-ignore
 import { isFollowMeActive } from '../follow-me';
 import { getParticipantsPaneConfig } from '../participants-pane/functions';
 import { isReactionsEnabled } from '../reactions/functions.any';
 
 import { SS_DEFAULT_FRAME_RATE, SS_SUPPORTED_FRAMERATES } from './constants';
 
-declare var interfaceConfig: Object;
-
 /**
  * Used for web. Indicates if the setting section is enabled.
  *
@@ -39,7 +41,7 @@ export function isSettingEnabled(settingName: string) {
  * {@code getState} function to be used to retrieve the state.
  * @returns {boolean} True to indicate that user can change Server URL, false otherwise.
  */
-export function isServerURLChangeEnabled(stateful: Object | Function) {
+export function isServerURLChangeEnabled(stateful: IStateful) {
     const state = toState(stateful);
     const flag = getFeatureFlag(state, SERVER_URL_CHANGE_ENABLED, true);
 
@@ -88,11 +90,15 @@ export function normalizeUserInputURL(url: string) {
  * {@code getState} function to be used to retrieve the state.
  * @returns {Object} - The section of notifications to be configured.
  */
-export function getNotificationsMap(stateful: Object | Function) {
+export function getNotificationsMap(stateful: IStateful) {
     const state = toState(stateful);
     const { notifications } = state['features/base/config'];
     const { userSelectedNotifications } = state['features/base/settings'];
 
+    if (!userSelectedNotifications) {
+        return {};
+    }
+
     return Object.keys(userSelectedNotifications)
         .filter(key => !notifications || notifications.includes(key))
         .reduce((notificationsMap, key) => {
@@ -111,7 +117,7 @@ export function getNotificationsMap(stateful: Object | Function) {
  * {@code getState} function to be used to retrieve the state.
  * @returns {Object} - The properties for the "More" tab from settings dialog.
  */
-export function getMoreTabProps(stateful: Object | Function) {
+export function getMoreTabProps(stateful: IStateful) {
     const state = toState(stateful);
     const framerate = state['features/screen-share'].captureFrameRate ?? SS_DEFAULT_FRAME_RATE;
     const language = i18next.language || DEFAULT_LANGUAGE;
@@ -147,7 +153,7 @@ export function getMoreTabProps(stateful: Object | Function) {
  * {@code getState} function to be used to retrieve the state.
  * @returns {Object} - The properties for the "More" tab from settings dialog.
  */
-export function getModeratorTabProps(stateful: Object | Function) {
+export function getModeratorTabProps(stateful: IStateful) {
     const state = toState(stateful);
     const {
         conference,
@@ -179,7 +185,7 @@ export function getModeratorTabProps(stateful: Object | Function) {
  * {@code getState} function to be used to retrieve the state.
  * @returns {boolean} True to indicate that moderator tab should be visible, false otherwise.
  */
-export function shouldShowModeratorSettings(stateful: Object | Function) {
+export function shouldShowModeratorSettings(stateful: IStateful) {
     const state = toState(stateful);
     const { hideModeratorSettingsTab } = getParticipantsPaneConfig(state);
     const hasModeratorRights = Boolean(isSettingEnabled('moderator') && isLocalParticipantModerator(state));
@@ -196,7 +202,7 @@ export function shouldShowModeratorSettings(stateful: Object | Function) {
  * @returns {Object} - The properties for the "Profile" tab from settings
  * dialog.
  */
-export function getProfileTabProps(stateful: Object | Function) {
+export function getProfileTabProps(stateful: IStateful) {
     const state = toState(stateful);
     const {
         authEnabled,
@@ -209,8 +215,8 @@ export function getProfileTabProps(stateful: Object | Function) {
     return {
         authEnabled: Boolean(conference && authEnabled),
         authLogin,
-        displayName: localParticipant.name,
-        email: localParticipant.email,
+        displayName: localParticipant?.name,
+        email: localParticipant?.email,
         readOnlyName: isNameReadOnly(state),
         hideEmailInSettings
     };
@@ -225,7 +231,7 @@ export function getProfileTabProps(stateful: Object | Function) {
  * @returns {Object} - The properties for the "Sounds" tab from settings
  * dialog.
  */
-export function getSoundsTabProps(stateful: Object | Function) {
+export function getSoundsTabProps(stateful: IStateful) {
     const state = toState(stateful);
     const {
         soundsIncomingMessage,
@@ -259,9 +265,9 @@ export function getSoundsTabProps(stateful: Object | Function) {
  *
  * @returns {Promise<Object[]>}
  */
-export function createLocalVideoTracks(ids: string[], timeout: ?number) {
+export function createLocalVideoTracks(ids: string[], timeout?: number) {
     return Promise.all(ids.map(deviceId => createLocalTrack('video', deviceId, timeout)
-                   .then(jitsiTrack => {
+                    .then((jitsiTrack: any) => {
                         return {
                             jitsiTrack,
                             deviceId
@@ -290,7 +296,7 @@ export function createLocalVideoTracks(ids: string[], timeout: ?number) {
  *   label: string
  * }[]>}
  */
-export function createLocalAudioTracks(devices: Object[], timeout: ?number) {
+export function createLocalAudioTracks(devices: MediaDeviceInfo[], timeout?: number) {
     return Promise.all(
         devices.map(async ({ deviceId, label }) => {
             let jitsiTrack = null;
@@ -317,7 +323,7 @@ export function createLocalAudioTracks(devices: Object[], timeout: ?number) {
  * @param {Object} state - The state of the application.
  * @returns {boolean}
  */
-export function getAudioSettingsVisibility(state: Object) {
+export function getAudioSettingsVisibility(state: IReduxState) {
     return state['features/settings'].audioSettingsVisible;
 }
 
@@ -327,6 +333,6 @@ export function getAudioSettingsVisibility(state: Object) {
  * @param {Object} state - The state of the application.
  * @returns {boolean}
  */
-export function getVideoSettingsVisibility(state: Object) {
+export function getVideoSettingsVisibility(state: IReduxState) {
     return state['features/settings'].videoSettingsVisible;
 }

react/features/settings/logger.ts

@@ -1,5 +1,3 @@
-// @flow
-
 import { getLogger } from '../base/logging/functions';
 
 export default getLogger('features/settings');

react/features/settings/middleware.web.ts

@@ -1,6 +1,8 @@
-import { MiddlewareRegistry } from '../base/redux';
-import { SETTINGS_UPDATED, getHideSelfView } from '../base/settings';
-import { DISABLE_SELF_VIEW_NOTIFICATION_ID, NOTIFICATION_TIMEOUT_TYPE, showNotification } from '../notifications';
+import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
+import { SETTINGS_UPDATED } from '../base/settings/actionTypes';
+import { getHideSelfView } from '../base/settings/functions';
+import { showNotification } from '../notifications/actions';
+import { DISABLE_SELF_VIEW_NOTIFICATION_ID, NOTIFICATION_TIMEOUT_TYPE } from '../notifications/constants';
 
 import { openSettingsDialog } from './actions';
 import { SETTINGS_TABS } from './constants';