ref: Convert some reducers to TS (#11994)

react/features/app/types.ts

@@ -30,6 +30,12 @@ import { IDropboxState } from '../dropbox/reducer';
 import { IDynamicBrandingState } from '../dynamic-branding/reducer';
 import { IE2EEState } from '../e2ee/reducer';
 import { IEtherpadState } from '../etherpad/reducer';
+import { IFaceLandmarksState } from '../face-landmarks/reducer';
+import { IFeedbackState } from '../feedback/reducer';
+import { IFilmstripState } from '../filmstrip/reducer';
+import { IFollowMeState } from '../follow-me/reducer';
+import { IGifsState } from '../gifs/reducer';
+import { IGoogleApiState } from '../google-api/reducer';
 import { INoiseSuppressionState } from '../noise-suppression/reducer';
 
 export interface IStore {
@@ -71,6 +77,12 @@ export interface IState {
     'features/dynamic-branding': IDynamicBrandingState,
     'features/e2ee': IE2EEState,
     'features/etherpad': IEtherpadState,
+    'features/face-landmarks': IFaceLandmarksState,
+    'features/feedback': IFeedbackState,
+    'features/filmstrip': IFilmstripState,
+    'features/follow-me': IFollowMeState,
+    'features/gifs': IGifsState,
+    'features/google-api': IGoogleApiState,
     'features/noise-suppression': INoiseSuppressionState,
     'features/testing': ITestingState
 }

react/features/face-landmarks/reducer.ts

@@ -1,6 +1,4 @@
-// @flow
-
-import { ReducerRegistry } from '../base/redux';
+import ReducerRegistry from '../base/redux/ReducerRegistry';
 
 import {
     ADD_FACE_EXPRESSION,
@@ -26,14 +24,37 @@ const defaultState = {
     recognitionActive: false
 };
 
-ReducerRegistry.register('features/face-landmarks', (state = defaultState, action) => {
+export interface IFaceLandmarksState {
+    faceBoxes: {
+        left?: number;
+        right?: number;
+        width?: number;
+    };
+    faceExpressions: {
+        angry: number;
+        disgusted: number;
+        fearful: number;
+        happy: number;
+        neutral: number;
+        sad: number;
+        surprised: number;
+    };
+    faceExpressionsBuffer: Array<{
+        emotion: string;
+        timestamp: string;
+    }>;
+    recognitionActive: boolean;
+}
+
+ReducerRegistry.register('features/face-landmarks', (state: IFaceLandmarksState = defaultState, action) => {
     switch (action.type) {
     case ADD_FACE_EXPRESSION: {
         return {
             ...state,
             faceExpressions: {
                 ...state.faceExpressions,
-                [action.faceExpression]: state.faceExpressions[action.faceExpression] + action.duration
+                [action.faceExpression]: state.faceExpressions[
+                    action.faceExpression as keyof typeof state.faceExpressions] + action.duration
             }
         };
     }

react/features/feedback/reducer.ts

@@ -1,6 +1,4 @@
-import {
-    ReducerRegistry
-} from '../base/redux';
+import ReducerRegistry from '../base/redux/ReducerRegistry';
 
 import {
     CANCEL_FEEDBACK,
@@ -17,12 +15,18 @@ const DEFAULT_STATE = {
     submitted: false
 };
 
+export interface IFeedbackState {
+    message: string;
+    score: number;
+    submitted: boolean;
+}
+
 /**
  * Reduces the Redux actions of the feature features/feedback.
  */
 ReducerRegistry.register(
     'features/feedback',
-    (state = DEFAULT_STATE, action) => {
+    (state: IFeedbackState = DEFAULT_STATE, action) => {
         switch (action.type) {
         case CANCEL_FEEDBACK: {
             return {

react/features/filmstrip/reducer.ts

@@ -1,7 +1,5 @@
-// @flow
-
-import { PARTICIPANT_LEFT } from '../base/participants';
-import { ReducerRegistry } from '../base/redux';
+import { PARTICIPANT_LEFT } from '../base/participants/actionTypes';
+import ReducerRegistry from '../base/redux/ReducerRegistry';
 
 import {
     REMOVE_STAGE_PARTICIPANT,
@@ -167,7 +165,7 @@ const DEFAULT_STATE = {
      * @public
      * @type {Set<string>}
      */
-    visibleRemoteParticipants: new Set(),
+    visibleRemoteParticipants: new Set<string>(),
 
     /**
      * The width of the resizable filmstrip.
@@ -189,9 +187,80 @@ const DEFAULT_STATE = {
     }
 };
 
+interface Dimensions {
+    height: number;
+    width: number;
+}
+
+interface FilmstripDimensions {
+    filmstripHeight?: number;
+    filmstripWidth?: number;
+    gridDimensions?: {
+        columns: number;
+        rows: number;
+    }
+    hasScroll?: boolean;
+    thumbnailSize?: Dimensions;
+}
+
+export interface IFilmstripState {
+    activeParticipants: Array<{
+        participantId: string;
+        pinned?: boolean
+    }>;
+    enabled: boolean;
+    horizontalViewDimensions: {
+        hasScroll?: boolean;
+        local?: Dimensions;
+        remote?: Dimensions;
+        remoteVideosContainer?: Dimensions;
+    };
+    isResizing: boolean;
+    maxStageParticipants: number;
+    participantsVolume: {
+        [participantId: string]: number;
+    };
+    remoteParticipants: string[];
+    screenshareFilmstripDimensions: {
+        filmstripHeight?: number;
+        filmstripWidth?: number;
+        thumbnailSize?: Dimensions;
+    };
+    screenshareFilmstripParticipantId?: string|null;
+    stageFilmstripDimensions: FilmstripDimensions;
+    tileViewDimensions?: FilmstripDimensions;
+    topPanelHeight: {
+        current: number|null;
+        userSet: number|null;
+    };
+    topPanelVisible: boolean;
+    verticalViewDimensions: {
+        gridView?: {
+            gridDimensions: {
+                columns: number;
+                rows: number;
+            };
+            hasScroll: boolean;
+            thumbnailSize: Dimensions;
+        };
+        hasScroll?: boolean;
+        local?: Dimensions;
+        remote?: Dimensions;
+        remoteVideosContainer?: Dimensions;
+    };
+    visible: boolean;
+    visibleParticipantsEndIndex: number;
+    visibleParticipantsStartIndex: number;
+    visibleRemoteParticipants: Set<string>;
+    width: {
+        current: number|null;
+        userSet: number|null;
+    }
+}
+
 ReducerRegistry.register(
     'features/filmstrip',
-    (state = DEFAULT_STATE, action) => {
+    (state: IFilmstripState = DEFAULT_STATE, action) => {
         switch (action.type) {
         case SET_FILMSTRIP_ENABLED:
             return {

react/features/follow-me/reducer.ts

@@ -1,18 +1,24 @@
-// @flow
-
-import { ReducerRegistry, set } from '../base/redux';
+import ReducerRegistry from '../base/redux/ReducerRegistry';
+import { set } from '../base/redux/functions';
 
 import {
     SET_FOLLOW_ME_MODERATOR,
     SET_FOLLOW_ME_STATE
 } from './actionTypes';
 
+export interface IFollowMeState {
+    moderator?: string;
+    state?: {
+        [key: string]: string;
+    }
+}
+
 /**
  * Listen for actions that contain the Follow Me feature active state, so that it can be stored.
  */
 ReducerRegistry.register(
     'features/follow-me',
-    (state = {}, action) => {
+    (state: IFollowMeState = {}, action) => {
         switch (action.type) {
 
         case SET_FOLLOW_ME_MODERATOR: {

react/features/gifs/reducer.ts

@@ -1,5 +1,4 @@
-
-import { ReducerRegistry } from '../base/redux';
+import ReducerRegistry from '../base/redux/ReducerRegistry';
 
 import {
     ADD_GIF_FOR_PARTICIPANT,
@@ -15,6 +14,15 @@ const initialState = {
     menuOpen: false
 };
 
+export interface IGifsState {
+    drawerVisible: boolean;
+    gifList: Map<string, {
+        gifUrl: string;
+        timeoutID: number;
+    }>;
+    menuOpen: boolean;
+}
+
 ReducerRegistry.register(
     'features/gifs',
     (state = initialState, action) => {

react/features/google-api/constants.ts

@@ -1,5 +1,3 @@
-// @flow
-
 /**
  * Google API URL to retrieve streams for a live broadcast of a user.
  *

react/features/google-api/reducer.ts

@@ -1,6 +1,4 @@
-// @flow
-
-import { ReducerRegistry } from '../base/redux';
+import ReducerRegistry from '../base/redux/ReducerRegistry';
 
 import {
     SET_GOOGLE_API_PROFILE,
@@ -18,11 +16,17 @@ const DEFAULT_STATE = {
     profileEmail: ''
 };
 
+export interface IGoogleApiState {
+    googleAPIState: number;
+    googleResponse?: Object;
+    profileEmail: string;
+}
+
 /**
  * Reduces the Redux actions of the feature features/google-api.
  */
 ReducerRegistry.register('features/google-api',
-    (state = DEFAULT_STATE, action) => {
+    (state: IGoogleApiState = DEFAULT_STATE, action) => {
         switch (action.type) {
         case SET_GOOGLE_API_STATE:
             return {