ref(toolbox) Convert feature to TS (#12413)

react/features/toolbox/actions.any.ts

@@ -1,12 +1,12 @@
-// @flow
+// @ts-expect-error
-
-import type { Dispatch } from 'redux';
-
 import UIEvents from '../../../service/UI/UIEvents';
-import { VIDEO_MUTE, createToolbarEvent, sendAnalytics } from '../analytics';
+import { VIDEO_MUTE, createToolbarEvent } from '../analytics/AnalyticsEvents';
-import { setAudioOnly } from '../base/audio-only';
+import { sendAnalytics } from '../analytics/functions';
-import { VIDEO_MUTISM_AUTHORITY, setVideoMuted } from '../base/media';
+import { IStore } from '../app/types';
-import { getLocalVideoType } from '../base/tracks';
+import { setAudioOnly } from '../base/audio-only/actions';
+import { setVideoMuted } from '../base/media/actions';
+import { VIDEO_MUTISM_AUTHORITY } from '../base/media/constants';
+import { getLocalVideoType } from '../base/tracks/functions';
 
 import {
     SET_TOOLBOX_ENABLED,
@@ -14,8 +14,6 @@ import {
     TOGGLE_TOOLBOX_VISIBLE
 } from './actionTypes';
 
-declare var APP: Object;
-
 /**
  * Enables/disables the toolbox.
  *
@@ -38,9 +36,10 @@ export function setToolboxEnabled(enabled: boolean): Object {
  * @param {boolean} visible - True to show the toolbox or false to hide it.
  * @returns {Function}
  */
-export function setToolboxVisible(visible: boolean): Object {
+export function setToolboxVisible(visible: boolean) {
-    return (dispatch: Dispatch<any>, getState: Function) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
-        const { toolbarConfig: { alwaysVisible } } = getState()['features/base/config'];
+        const { toolbarConfig } = getState()['features/base/config'];
+        const alwaysVisible = toolbarConfig?.alwaysVisible;
 
         if (!visible && alwaysVisible) {
             return;
@@ -59,9 +58,10 @@ export function setToolboxVisible(visible: boolean): Object {
  * @returns {Function}
  */
 export function toggleToolboxVisible() {
-    return (dispatch: Dispatch<any>, getState: Function) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
-        const { toolbarConfig: { alwaysVisible } } = state['features/base/config'];
+        const { toolbarConfig } = getState()['features/base/config'];
+        const alwaysVisible = toolbarConfig?.alwaysVisible;
         const { visible } = state['features/toolbox'];
 
         if (visible && alwaysVisible) {
@@ -84,8 +84,8 @@ export function toggleToolboxVisible() {
  * created if missing.
  * @returns {Function}
  */
-export function handleToggleVideoMuted(muted, showUI, ensureTrack) {
+export function handleToggleVideoMuted(muted: boolean, showUI: boolean, ensureTrack: boolean) {
-    return (dispatch: Dispatch<any>, getState: Function) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
         const { enabled: audioOnly } = state['features/base/audio-only'];
         const tracks = state['features/base/tracks'];

react/features/toolbox/actions.native.ts

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

react/features/toolbox/actions.web.ts

@@ -1,8 +1,5 @@
-// @flow
+import { IStore } from '../app/types';
-
+import { overwriteConfig } from '../base/config/actions';
-import type { Dispatch } from 'redux';
-
-import { overwriteConfig } from '../base/config';
 import { isMobileBrowser } from '../base/environment/utils';
 
 import {
@@ -15,8 +12,8 @@ import {
     SET_TOOLBAR_HOVERED,
     SET_TOOLBOX_TIMEOUT
 } from './actionTypes';
-import { setToolboxVisible } from './actions';
+import { setToolboxVisible } from './actions.web';
-import { getToolbarTimeout } from './functions';
+import { getToolbarTimeout } from './functions.web';
 
 export * from './actions.any';
 
@@ -26,8 +23,8 @@ export * from './actions.any';
  * @param {boolean} dock - True if dock, false otherwise.
  * @returns {Function}
  */
-export function dockToolbox(dock: boolean): Function {
+export function dockToolbox(dock: boolean) {
-    return (dispatch: Dispatch<any>, getState: Function) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
         const { visible } = state['features/toolbox'];
         const toolbarTimeout = getToolbarTimeout(state);
@@ -72,10 +69,12 @@ export function fullScreenChanged(fullScreen: boolean) {
  * caring about the extended toolbar side panels.
  * @returns {Function}
  */
-export function hideToolbox(force: boolean = false): Function {
+export function hideToolbox(force = false) {
-    return (dispatch: Dispatch<any>, getState: Function) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
-        const { toolbarConfig: { alwaysVisible, autoHideWhileChatIsOpen } } = state['features/base/config'];
+        const { toolbarConfig } = state['features/base/config'];
+        const alwaysVisible = toolbarConfig?.alwaysVisible;
+        const autoHideWhileChatIsOpen = toolbarConfig?.autoHideWhileChatIsOpen;
         const { hovered } = state['features/toolbox'];
         const toolbarTimeout = getToolbarTimeout(state);
 
@@ -124,14 +123,13 @@ export function setFullScreen(fullScreen: boolean) {
  * @param {number} timeout - Timeout for showing the toolbox.
  * @returns {Function}
  */
-export function showToolbox(timeout: number = 0): Object {
+export function showToolbox(timeout = 0) {
-    return (dispatch: Dispatch<any>, getState: Function) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
-        const {
+        const { toolbarConfig } = state['features/base/config'];
-            toolbarConfig: { initialTimeout, alwaysVisible },
-            toolbarConfig
-        } = state['features/base/config'];
         const toolbarTimeout = getToolbarTimeout(state);
+        const initialTimeout = toolbarConfig?.initialTimeout;
+        const alwaysVisible = toolbarConfig?.alwaysVisible;
 
         const {
             enabled,
@@ -183,7 +181,7 @@ export function setOverflowDrawer(displayAsDrawer: boolean) {
  *     type: CLEAR_TOOLBOX_TIMEOUT
  * }}
  */
-export function clearToolboxTimeout(): Object {
+export function clearToolboxTimeout() {
     return {
         type: CLEAR_TOOLBOX_TIMEOUT
     };
@@ -249,8 +247,8 @@ export function setToolbarHovered(hovered: boolean): Object {
  *     timeoutMS: number
  * }}
  */
-export function setToolboxTimeout(handler: Function, timeoutMS: number): Object {
+export function setToolboxTimeout(handler: Function, timeoutMS: number) {
-    return function(dispatch) {
+    return function(dispatch: IStore['dispatch']) {
         if (isMobileBrowser()) {
             return;
         }

react/features/toolbox/functions.native.ts

@@ -1,5 +1,5 @@
-// @flow
+import { IState } from '../app/types';
-
+import { IStateful } from '../base/app/types';
 import { hasAvailableDevices } from '../base/devices';
 import { TOOLBOX_ALWAYS_VISIBLE, TOOLBOX_ENABLED, getFeatureFlag } from '../base/flags';
 import { getParticipantCountWithFake } from '../base/participants';
@@ -23,7 +23,7 @@ const WIDTH = {
  * @returns {Set}
  */
 export function getMovableButtons(width: number): Set<string> {
-    let buttons = [];
+    let buttons: string[] = [];
 
     switch (true) {
     case width >= WIDTH.FIT_9_ICONS: {
@@ -56,10 +56,10 @@ export function getMovableButtons(width: number): Set<string> {
 /**
  * Indicates if the desktop share button is disabled or not.
  *
- * @param {Object} state - The state from the Redux store.
+ * @param {IState} state - The state from the Redux store.
  * @returns {boolean}
  */
-export function isDesktopShareButtonDisabled(state: Object) {
+export function isDesktopShareButtonDisabled(state: IState) {
     const { muted, unmuteBlocked } = state['features/base/media'].video;
     const videoOrShareInProgress = !muted || isLocalVideoTrackDesktop(state);
 
@@ -69,11 +69,11 @@ export function isDesktopShareButtonDisabled(state: Object) {
 /**
  * Returns true if the toolbox is visible.
  *
- * @param {Object | Function} stateful - A function or object that can be
+ * @param {IStateful} stateful - A function or object that can be
  * resolved to Redux state by the function {@code toState}.
  * @returns {boolean}
  */
-export function isToolboxVisible(stateful: Object | Function) {
+export function isToolboxVisible(stateful: IStateful) {
     const state = toState(stateful);
     const { toolbarConfig } = state['features/base/config'];
     const { alwaysVisible } = toolbarConfig || {};
@@ -89,10 +89,10 @@ export function isToolboxVisible(stateful: Object | Function) {
 /**
  * Indicates if the video mute button is disabled or not.
  *
- * @param {string} state - The state from the Redux store.
+ * @param {IState} state - The state from the Redux store.
  * @returns {boolean}
  */
-export function isVideoMuteButtonDisabled(state: Object) {
+export function isVideoMuteButtonDisabled(state: IState) {
     const { muted, unmuteBlocked } = state['features/base/media'].video;
 
     return !hasAvailableDevices(state, 'videoInput')

react/features/toolbox/middleware.ts

@@ -1,6 +1,6 @@
-// @flow
+import { AnyAction } from 'redux';
 
-import { MiddlewareRegistry } from '../base/redux';
+import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
 
 import {
     CLEAR_TOOLBOX_TIMEOUT,
@@ -10,8 +10,6 @@ import {
 
 import './subscriber';
 
-declare var APP: Object;
-
 /**
  * Middleware which intercepts Toolbox actions to handle changes to the
  * visibility timeout of the Toolbox.
@@ -25,7 +23,7 @@ MiddlewareRegistry.register(store => next => action => {
     case CLEAR_TOOLBOX_TIMEOUT: {
         const { timeoutID } = store.getState()['features/toolbox'];
 
-        clearTimeout(timeoutID);
+        clearTimeout(timeoutID ?? undefined);
         break;
     }
 
@@ -34,9 +32,9 @@ MiddlewareRegistry.register(store => next => action => {
 
     case SET_TOOLBOX_TIMEOUT: {
         const { timeoutID } = store.getState()['features/toolbox'];
-        const { handler, timeoutMS } = action;
+        const { handler, timeoutMS }: { handler: Function; timeoutMS: number; } = action;
 
-        clearTimeout(timeoutID);
+        clearTimeout(timeoutID ?? undefined);
         action.timeoutID = setTimeout(handler, timeoutMS);
 
         break;
@@ -47,10 +45,10 @@ MiddlewareRegistry.register(store => next => action => {
 });
 
 type DocumentElement = {
-    +requestFullscreen?: Function,
+    mozRequestFullScreen?: Function;
-    +mozRequestFullScreen?: Function,
+    requestFullscreen?: Function;
-    +webkitRequestFullscreen?: Function
+    webkitRequestFullscreen?: Function;
-}
+};
 
 /**
  * Makes an external request to enter or exit full screen mode.
@@ -62,7 +60,7 @@ type DocumentElement = {
  * @private
  * @returns {Object} The value returned by {@code next(action)}.
  */
-function _setFullScreen(next, action) {
+function _setFullScreen(next: Function, action: AnyAction) {
     const result = next(action);
 
     if (typeof APP === 'object') {
@@ -88,14 +86,14 @@ function _setFullScreen(next, action) {
         if (typeof document.exitFullscreen === 'function') {
             document.exitFullscreen();
 
-        // $FlowExpectedError
+        // @ts-ignore
         } else if (typeof document.mozCancelFullScreen === 'function') {
-            // $FlowExpectedError
+            // @ts-ignore
             document.mozCancelFullScreen();
 
-        // $FlowExpectedError
+        // @ts-ignore
         } else if (typeof document.webkitExitFullscreen === 'function') {
-            // $FlowExpectedError
+            // @ts-ignore
             document.webkitExitFullscreen();
         }
     }