ref(TS) Convert some features to TS (jitsi#12591)

globals.d.ts

@@ -13,6 +13,7 @@ declare global {
         keyboardshortcut: {
             registerShortcut: Function;
             unregisterShortcut: Function;
+            openDialog: Function;
         }
     };
     const interfaceConfig: any;

react/features/base/conference/functions.ts

@@ -454,18 +454,18 @@ export function sendLocalParticipant(
         name
     } = getLocalParticipant(stateful) ?? {};
 
-    avatarURL && conference.sendCommand(AVATAR_URL_COMMAND, {
+    avatarURL && conference?.sendCommand(AVATAR_URL_COMMAND, {
         value: avatarURL
     });
-    email && conference.sendCommand(EMAIL_COMMAND, {
+    email && conference?.sendCommand(EMAIL_COMMAND, {
         value: email
     });
 
     if (features && features['screen-sharing'] === 'true') {
-        conference.setLocalParticipantProperty('features_screen-sharing', true);
+        conference?.setLocalParticipantProperty('features_screen-sharing', true);
     }
 
-    conference.setDisplayName(name);
+    conference?.setDisplayName(name);
 }
 
 /**

react/features/base/conference/reducer.ts

@@ -65,6 +65,7 @@ export interface IJitsiConference {
     isStartAudioMuted: Function;
     isStartVideoMuted: Function;
     join: Function;
+    joinLobby: Function;
     kickParticipant: Function;
     lock: Function;
     muteParticipant: Function;
@@ -104,7 +105,7 @@ export interface IConferenceState {
     leaving?: Object;
     localSubject?: string;
     locked?: string;
-    membersOnly?: Object;
+    membersOnly?: IJitsiConference;
     obfuscatedRoom?: string;
     obfuscatedRoomSource?: string;
     p2p?: Object;
@@ -227,7 +228,8 @@ function _authStatusChanged(state: IConferenceState,
  * @returns {Object} The new state of the feature base/conference after the
  * reduction of the specified action.
  */
-function _conferenceFailed(state: IConferenceState, { conference, error }: { conference: Object; error: Error; }) {
+function _conferenceFailed(state: IConferenceState, { conference, error }: {
+    conference: IJitsiConference; error: Error; }) {
     // The current (similar to getCurrentConference in
     // base/conference/functions.any.js) conference which is joining or joined:
     const conference_ = state.conference || state.joining;

react/features/base/tracks/functions.any.ts

@@ -214,7 +214,7 @@ export function getVideoTrackByParticipant(
 export function getTrackByMediaTypeAndParticipant(
         tracks: ITrack[],
         mediaType: MediaType,
-        participantId: string) {
+        participantId?: string) {
     return tracks.find(
         t => Boolean(t.jitsiTrack) && t.participantId === participantId && t.mediaType === mediaType
     );

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

@@ -11,7 +11,6 @@ import {
     getParticipantDisplayName,
     isWhiteboardParticipant
 } from '../../../base/participants/functions';
-import { IParticipant } from '../../../base/participants/types';
 import { withPixelLineHeight } from '../../../base/styles/functions.web';
 // @ts-ignore
 import { getLargeVideoParticipant } from '../../../large-video/functions';
@@ -50,9 +49,9 @@ const useStyles = makeStyles()(theme => {
  */
 const StageParticipantNameLabel = () => {
     const { classes, cx } = useStyles();
-    const largeVideoParticipant: IParticipant = useSelector(getLargeVideoParticipant);
+    const largeVideoParticipant = useSelector(getLargeVideoParticipant);
     const selectedId = largeVideoParticipant?.id;
-    const nameToDisplay = useSelector((state: IReduxState) => getParticipantDisplayName(state, selectedId));
+    const nameToDisplay = useSelector((state: IReduxState) => getParticipantDisplayName(state, selectedId ?? ''));
 
     const localParticipant = useSelector(getLocalParticipant);
     const localId = localParticipant?.id;

react/features/keyboard-shortcuts/middleware.js → react/features/keyboard-shortcuts/middleware.ts

@@ -1,19 +1,14 @@
-// @flow
-
-import { MiddlewareRegistry } from '../base/redux';
+import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
 
 import { OPEN_KEYBOARD_SHORTCUTS_DIALOG } from './actionTypes';
 
-declare var APP: Object;
-
 /**
  * Implements the middleware of the feature keyboard-shortcuts.
  *
  * @param {Store} store - The redux store.
  * @returns {Function}
  */
-// eslint-disable-next-line no-unused-vars
-MiddlewareRegistry.register(store => next => action => {
+MiddlewareRegistry.register(_store => next => action => {
     switch (action.type) {
     case OPEN_KEYBOARD_SHORTCUTS_DIALOG:
         if (typeof APP === 'object') {

react/features/large-video/actions.any.js → react/features/large-video/actions.any.ts

@@ -1,18 +1,16 @@
-// @flow
-
-import type { Dispatch } from 'redux';
-
-import { MEDIA_TYPE } from '../base/media';
+import { IReduxState, IStore } from '../app/types';
+import { MEDIA_TYPE } from '../base/media/constants';
 import {
     getDominantSpeakerParticipant,
     getLocalParticipant,
     getLocalScreenShareParticipant,
     getPinnedParticipant,
     getRemoteParticipants,
     getVirtualScreenshareParticipantByOwnerId
-} from '../base/participants';
+} from '../base/participants/functions';
+import { ITrack } from '../base/tracks/types';
 import { isStageFilmstripAvailable } from '../filmstrip/functions';
-import { getAutoPinSetting } from '../video-layout';
+import { getAutoPinSetting } from '../video-layout/functions';
 
 import {
     SELECT_LARGE_VIDEO_PARTICIPANT,
@@ -30,8 +28,8 @@ import {
  * displayed on the large video.
  * @returns {Function}
  */
-export function selectParticipantInLargeVideo(participant: ?string) {
-    return (dispatch: Dispatch<any>, getState: Function) => {
+export function selectParticipantInLargeVideo(participant?: string) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
 
         if (isStageFilmstripAvailable(state, 2)) {
@@ -48,7 +46,7 @@ export function selectParticipantInLargeVideo(participant: ?string) {
         const remoteScreenShares = state['features/video-layout'].remoteScreenShares;
         let latestScreenshareParticipantId;
 
-        if (remoteScreenShares && remoteScreenShares.length) {
+        if (remoteScreenShares?.length) {
             latestScreenshareParticipantId = remoteScreenShares[remoteScreenShares.length - 1];
         }
 
@@ -94,7 +92,7 @@ export function updateKnownLargeVideoResolution(resolution: number) {
  *     width: number
  * }}
  */
-export function setLargeVideoDimensions(height, width) {
+export function setLargeVideoDimensions(height: number, width: number) {
     return {
         type: SET_LARGE_VIDEO_DIMENSIONS,
         height,
@@ -109,7 +107,7 @@ export function setLargeVideoDimensions(height, width) {
  * @private
  * @returns {(Track|undefined)}
  */
-function _electLastVisibleRemoteVideo(tracks) {
+function _electLastVisibleRemoteVideo(tracks: ITrack[]) {
     // First we try to get most recent remote video track.
     for (let i = tracks.length - 1; i >= 0; --i) {
         const track = tracks[i];
@@ -129,7 +127,7 @@ function _electLastVisibleRemoteVideo(tracks) {
  * @private
  * @returns {(string|undefined)}
  */
-function _electParticipantInLargeVideo(state) {
+function _electParticipantInLargeVideo(state: IReduxState) {
     // If a participant is pinned, they will be shown in the LargeVideo (regardless of whether they are local or
     // remote) when the filmstrip on stage is disabled.
     let participant = getPinnedParticipant(state);

react/features/large-video/actions.native.js → react/features/large-video/actions.native.ts

@@ -1,3 +1 @@
-// @flow
-
 export * from './actions.any';

react/features/large-video/actions.web.js → react/features/large-video/actions.web.ts

@@ -1,10 +1,8 @@
-// @flow
-
-import type { Dispatch } from 'redux';
-
+// @ts-expect-error
 import VideoLayout from '../../../modules/UI/videolayout/VideoLayout';
-import { MEDIA_TYPE } from '../base/media';
-import { getTrackByMediaTypeAndParticipant } from '../base/tracks';
+import { IStore } from '../app/types';
+import { MEDIA_TYPE } from '../base/media/constants';
+import { getTrackByMediaTypeAndParticipant } from '../base/tracks/functions.web';
 
 import { SET_SEE_WHAT_IS_BEING_SHARED, UPDATE_LAST_LARGE_VIDEO_MEDIA_EVENT } from './actionTypes';
 
@@ -16,7 +14,7 @@ export * from './actions.any';
 * @returns {Function}
 */
 export function captureLargeVideoScreenshot() {
-    return (dispatch: Dispatch<any>, getState: Function): Promise<string> => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
         const largeVideo = state['features/large-video'];
         const promise = Promise.resolve();
@@ -28,7 +26,7 @@ export function captureLargeVideoScreenshot() {
         const participantTrack = getTrackByMediaTypeAndParticipant(tracks, MEDIA_TYPE.VIDEO, largeVideo.participantId);
 
         // Participants that join the call video muted do not have a jitsiTrack attached.
-        if (!(participantTrack && participantTrack.jitsiTrack)) {
+        if (!participantTrack?.jitsiTrack) {
             return promise;
         }
         const videoStream = participantTrack.jitsiTrack.getOriginalStream();
@@ -39,7 +37,7 @@ export function captureLargeVideoScreenshot() {
 
         // Get the video element for the large video, cast HTMLElement to HTMLVideoElement to make flow happy.
         /* eslint-disable-next-line no-extra-parens*/
-        const videoElement = ((document.getElementById('largeVideo'): any): HTMLVideoElement);
+        const videoElement = (document.getElementById('largeVideo') as any);
 
         if (!videoElement) {
             return promise;
@@ -54,11 +52,11 @@ export function captureLargeVideoScreenshot() {
         canvasElement.style.display = 'none';
         canvasElement.height = parseInt(height, 10);
         canvasElement.width = parseInt(width, 10);
-        ctx.drawImage(videoElement, 0, 0);
+        ctx?.drawImage(videoElement, 0, 0);
         const dataURL = canvasElement.toDataURL('image/png', 1.0);
 
         // Cleanup.
-        ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);
+        ctx?.clearRect(0, 0, canvasElement.width, canvasElement.height);
         canvasElement.remove();
 
         return Promise.resolve(dataURL);
@@ -73,7 +71,7 @@ export function captureLargeVideoScreenshot() {
  * @returns {Function}
  */
 export function resizeLargeVideo(width: number, height: number) {
-    return (dispatch: Dispatch<any>, getState: Function) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
         const largeVideo = state['features/large-video'];
 

react/features/large-video/functions.ts

@@ -0,0 +1,14 @@
+import { IReduxState } from '../app/types';
+import { getParticipantById } from '../base/participants/functions';
+
+/**
+ * Selector for the participant currently displaying on the large video.
+ *
+ * @param {Object} state - The redux state.
+ * @returns {Object}
+ */
+export function getLargeVideoParticipant(state: IReduxState) {
+    const { participantId } = state['features/large-video'];
+
+    return getParticipantById(state, participantId ?? '');
+}

react/features/large-video/logger.js → react/features/large-video/logger.ts

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

react/features/large-video/middleware.js → react/features/large-video/middleware.ts

@@ -1,19 +1,16 @@
-// @flow
-
 import {
     DOMINANT_SPEAKER_CHANGED,
     PARTICIPANT_JOINED,
     PARTICIPANT_LEFT,
-    PIN_PARTICIPANT,
-    getDominantSpeakerParticipant,
-    getLocalParticipant
-} from '../base/participants';
-import { MiddlewareRegistry } from '../base/redux';
-import { isTestModeEnabled } from '../base/testing';
+    PIN_PARTICIPANT
+} from '../base/participants/actionTypes';
+import { getDominantSpeakerParticipant, getLocalParticipant } from '../base/participants/functions';
+import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
+import { isTestModeEnabled } from '../base/testing/functions';
 import {
     TRACK_ADDED,
     TRACK_REMOVED
-} from '../base/tracks';
+} from '../base/tracks/actionTypes';
 import { TOGGLE_DOCUMENT_EDITING } from '../etherpad/actionTypes';
 
 import { selectParticipantInLargeVideo } from './actions';

react/features/large-video/subscriber.web.js → react/features/large-video/subscriber.web.ts

@@ -1,8 +1,7 @@
-// @flow
-
+// @ts-expect-error
 import VideoLayout from '../../../modules/UI/videolayout/VideoLayout';
-import { StateListenerRegistry } from '../base/redux';
-import { getVideoTrackByParticipant } from '../base/tracks';
+import StateListenerRegistry from '../base/redux/StateListenerRegistry';
+import { getVideoTrackByParticipant } from '../base/tracks/functions.web';
 
 import { getLargeVideoParticipant } from './functions';
 
@@ -29,7 +28,7 @@ StateListenerRegistry.register(
             streamingStatus: videoTrack?.streamingStatus
         };
     },
-    /* listener */ ({ participantId, streamingStatus }, previousState = {}) => {
+    /* listener */ ({ participantId, streamingStatus }, previousState: any = {}) => {
         if (streamingStatus !== previousState.streamingStatus) {
             VideoLayout.updateLargeVideo(participantId, true);
         }