ref(gifs) Convert feature to TS (#12264)

globals.d.ts

@@ -14,5 +14,6 @@ declare global {
 
     interface Window {
         config?: IConfig;
+        JITSI_MEET_LITE_SDK?: boolean;
     }
 }

react/features/base/config/configType.ts

@@ -311,7 +311,7 @@ export interface IConfig {
     giphy?: {
         displayMode?: 'all' | 'tile' | 'chat';
         enabled?: boolean;
-        sdkKey?: '';
+        sdkKey?: string;
         tileTime?: number;
     };
     gravatar?: {

react/features/base/settings/reducer.ts

@@ -53,6 +53,7 @@ const DEFAULT_STATE: ISettingsState = {
 
 export interface ISettingsState {
     audioOutputDeviceId?: string | boolean;
+    audioSettingsVisible?: boolean;
     avatarURL?: string;
     cameraDeviceId?: string | boolean;
     disableCallIntegration?: boolean;
@@ -85,6 +86,7 @@ export interface ISettingsState {
         [key: string]: boolean;
     } | boolean;
     userSelectedSkipPrejoin?: boolean;
+    videoSettingsVisible?: boolean;
     visible?: boolean;
 }
 

react/features/filmstrip/components/web/Thumbnail.tsx

@@ -1282,7 +1282,7 @@ function _mapStateToProps(state: IState, ownProps: any): Object {
         size._width = ownProps.width;
     }
 
-    const { gifUrl: gifSrc } = getGifForParticipant(state, id);
+    const { gifUrl: gifSrc } = getGifForParticipant(state, id ?? '');
     const mode = getGifDisplayMode(state);
     const participantId = isLocal ? getLocalParticipant(state)?.id : participantID;
 

react/features/gifs/actions.ts

@@ -14,7 +14,7 @@ import {
  * @param {string} gifUrl - The URL of the GIF.
  * @returns {Object}
  */
-export function addGif(participantId, gifUrl) {
+export function addGif(participantId: string, gifUrl: string) {
     return {
         type: ADD_GIF_FOR_PARTICIPANT,
         participantId,
@@ -28,7 +28,7 @@ export function addGif(participantId, gifUrl) {
  * @param {string} participantId - The Id of the participant for whom to remove the GIF.
  * @returns {Object}
  */
-export function removeGif(participantId) {
+export function removeGif(participantId: string) {
     return {
         type: REMOVE_GIF_FOR_PARTICIPANT,
         participantId
@@ -41,7 +41,7 @@ export function removeGif(participantId) {
  * @param {string} participantId - The Id of the participant for whom to show the GIF.
  * @returns {Object}
  */
-export function showGif(participantId) {
+export function showGif(participantId: string) {
     return {
         type: SHOW_GIF_FOR_PARTICIPANT,
         participantId
@@ -54,7 +54,7 @@ export function showGif(participantId) {
  * @param {string} participantId - The Id of the participant for whom to show the GIF.
  * @returns {Object}
  */
-export function hideGif(participantId) {
+export function hideGif(participantId: string) {
     return {
         type: HIDE_GIF_FOR_PARTICIPANT,
         participantId
@@ -67,7 +67,7 @@ export function hideGif(participantId) {
  * @param {boolean} visible - Whether or not it should be visible.
  * @returns {Object}
  */
-export function setGifDrawerVisibility(visible) {
+export function setGifDrawerVisibility(visible: boolean) {
     return {
         type: SET_GIF_DRAWER_VISIBILITY,
         visible
@@ -80,7 +80,7 @@ export function setGifDrawerVisibility(visible) {
  * @param {boolean} visible - Whether or not it should be visible.
  * @returns {Object}
  */
-export function setGifMenuVisibility(visible) {
+export function setGifMenuVisibility(visible: boolean) {
     return {
         type: SET_GIF_MENU_VISIBILITY,
         visible

react/features/gifs/components/web/GifsMenu.tsx

@@ -84,7 +84,7 @@ const useStyles = makeStyles()((theme: Theme) => {
  * @returns {ReactElement}
  */
 function GifsMenu() {
-    const API_KEY: string = useSelector(getGifAPIKey);
+    const API_KEY = useSelector(getGifAPIKey);
     const giphyFetch = new GiphyFetch(API_KEY);
     const [ searchKey, setSearchKey ] = useState<string>();
     const { classes: styles, cx } = useStyles();

react/features/gifs/functions.ts

@@ -1,15 +1,17 @@
+import { IState } from '../app/types';
 import { showOverflowDrawer } from '../toolbox/functions.web';
 
 import { GIF_PREFIX } from './constants';
+import { IGif } from './reducer';
 
 /**
  * Gets the URL of the GIF for the given participant or null if there's none.
  *
- * @param {Object} state - Redux state.
+ * @param {IState} state - Redux state.
  * @param {string} participantId - Id of the participant for which to remove the GIF.
  * @returns {Object}
  */
-export function getGifForParticipant(state, participantId) {
+export function getGifForParticipant(state: IState, participantId: string): IGif {
     return isGifEnabled(state) ? state['features/gifs'].gifList.get(participantId) || {} : {};
 }
 
@@ -19,7 +21,7 @@ export function getGifForParticipant(state, participantId) {
  * @param {string} message - Message to check.
  * @returns {boolean}
  */
-export function isGifMessage(message) {
+export function isGifMessage(message: string) {
     return message.trim().toLowerCase()
         .startsWith(GIF_PREFIX);
 }
@@ -27,10 +29,10 @@ export function isGifMessage(message) {
 /**
  * Returns the visibility state of the gifs menu.
  *
- * @param {Object} state - The state of the application.
+ * @param {IState} state - The state of the application.
  * @returns {boolean}
  */
-export function isGifsMenuOpen(state) {
+export function isGifsMenuOpen(state: IState) {
     const overflowDrawer = showOverflowDrawer(state);
     const { drawerVisible, menuOpen } = state['features/gifs'];
 
@@ -43,7 +45,7 @@ export function isGifsMenuOpen(state) {
  * @param {Object} gif - The gif data.
  * @returns {boolean}
  */
-export function getGifUrl(gif) {
+export function getGifUrl(gif?: { data?: { embed_url: string; }; embed_url?: string; }) {
     const embedUrl = gif?.embed_url || gif?.data?.embed_url || '';
     const idx = embedUrl.lastIndexOf('/');
     const id = embedUrl.substr(idx + 1);
@@ -57,27 +59,27 @@ export function getGifUrl(gif) {
  * @param {string} url - GIF url.
  * @returns {string}
  */
-export function formatGifUrlMessage(url) {
+export function formatGifUrlMessage(url: string) {
     return `${GIF_PREFIX}${url}]`;
 }
 
 /**
  * Get the Giphy API Key from config.
  *
- * @param {Object} state - Redux state.
+ * @param {IState} state - Redux state.
  * @returns {string}
  */
-export function getGifAPIKey(state) {
+export function getGifAPIKey(state: IState) {
-    return state['features/base/config']?.giphy?.sdkKey;
+    return state['features/base/config']?.giphy?.sdkKey ?? '';
 }
 
 /**
  * Returns whether or not the feature is enabled.
  *
- * @param {Object} state - Redux state.
+ * @param {IState} state - Redux state.
  * @returns {boolean}
  */
-export function isGifEnabled(state) {
+export function isGifEnabled(state: IState) {
     const { disableThirdPartyRequests } = state['features/base/config'];
     const { giphy } = state['features/base/config'];
 
@@ -85,16 +87,16 @@ export function isGifEnabled(state) {
         return false;
     }
 
-    return !disableThirdPartyRequests && giphy?.enabled && Boolean(giphy?.sdkKey);
+    return Boolean(!disableThirdPartyRequests && giphy?.enabled && Boolean(giphy?.sdkKey));
 }
 
 /**
  * Get the GIF display mode.
  *
- * @param {Object} state - Redux state.
+ * @param {IState} state - Redux state.
  * @returns {string}
  */
-export function getGifDisplayMode(state) {
+export function getGifDisplayMode(state: IState) {
     const { giphy } = state['features/base/config'];
 
     return giphy?.displayMode || 'all';

react/features/gifs/middleware.any.ts

@@ -1,4 +1,5 @@
-import { MiddlewareRegistry } from '../base/redux';
+import { IState } from '../app/types';
+import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
 
 import { ADD_GIF_FOR_PARTICIPANT, HIDE_GIF_FOR_PARTICIPANT, SHOW_GIF_FOR_PARTICIPANT } from './actionTypes';
 import { removeGif } from './actions';
@@ -49,11 +50,11 @@ MiddlewareRegistry.register(store => next => action => {
 /**
  * Clears GIF timeout.
  *
- * @param {Object} state - Redux state.
+ * @param {IState} state - Redux state.
  * @param {string} id - Id of the participant for whom to clear the timeout.
  * @returns {void}
  */
-function _clearGifTimeout(state, id) {
+function _clearGifTimeout(state: IState, id: string) {
     const gif = getGifForParticipant(state, id);
 
     clearTimeout(gif?.timeoutID);

react/features/gifs/reducer.ts

@@ -14,12 +14,14 @@ const initialState = {
     menuOpen: false
 };
 
+export interface IGif {
+    gifUrl?: string;
+    timeoutID?: number;
+}
+
 export interface IGifsState {
     drawerVisible: boolean;
-    gifList: Map<string, {
+    gifList: Map<string, IGif>;
-        gifUrl: string;
-        timeoutID: number;
-    }>;
     menuOpen: boolean;
 }
 

react/features/gifs/subscriber.native.ts

@@ -1,6 +1,6 @@
 import { GiphySDK } from '@giphy/react-native-sdk';
 
-import { StateListenerRegistry } from '../base/redux';
+import StateListenerRegistry from '../base/redux/StateListenerRegistry';
 
 import { isGifEnabled } from './functions';
 
@@ -13,7 +13,7 @@ StateListenerRegistry.register(
         const state = store.getState();
 
         if (isGifEnabled(state)) {
-            GiphySDK.configure({ apiKey: state['features/base/config'].giphy?.sdkKey });
+            GiphySDK.configure({ apiKey: state['features/base/config'].giphy?.sdkKey ?? '' });
         }
     }, {
         deepEquals: true

react/features/screen-share/functions.ts

@@ -1,29 +1,28 @@
-// @flow
+import { IState } from '../app/types';
-
+import { getMultipleVideoSendingSupportFeatureFlag } from '../base/config/functions.any';
-import { getMultipleVideoSendingSupportFeatureFlag } from '../base/config';
+import { isWindows } from '../base/environment/environment';
-import { isWindows } from '../base/environment';
 import { isMobileBrowser } from '../base/environment/utils';
 import { browser } from '../base/lib-jitsi-meet';
-import { VIDEO_TYPE } from '../base/media';
+import { VIDEO_TYPE } from '../base/media/constants';
-import { getLocalDesktopTrack, getLocalVideoTrack } from '../base/tracks';
+import { getLocalDesktopTrack, getLocalVideoTrack } from '../base/tracks/functions';
 
 /**
  * Is the current screen sharing session audio only.
  *
- * @param {Object} state - The state of the application.
+ * @param {IState} state - The state of the application.
  * @returns {boolean}
  */
-export function isAudioOnlySharing(state: Object) {
+export function isAudioOnlySharing(state: IState) {
     return isScreenAudioShared(state) && !isScreenVideoShared(state);
 }
 
 /**
  * State of audio sharing.
  *
- * @param {Object} state - The state of the application.
+ * @param {IState} state - The state of the application.
  * @returns {boolean}
  */
-export function isScreenAudioShared(state: Object) {
+export function isScreenAudioShared(state: IState) {
     return state['features/screen-share'].isSharingAudio;
 }
 
@@ -40,25 +39,25 @@ export function isScreenAudioSupported() {
 /**
  * Is any screen media currently being shared, audio or video.
  *
- * @param {Object} state - The state of the application.
+ * @param {IState} state - The state of the application.
  * @returns {boolean}
  */
-export function isScreenMediaShared(state: Object) {
+export function isScreenMediaShared(state: IState) {
     return isScreenAudioShared(state) || isScreenVideoShared(state);
 }
 
 /**
  * Is screen sharing currently active.
  *
- * @param {Object} state - The state of the application.
+ * @param {IState} state - The state of the application.
  * @returns {boolean}
  */
-export function isScreenVideoShared(state: Object) {
+export function isScreenVideoShared(state: IState) {
     const tracks = state['features/base/tracks'];
     const localScreenshare = getLocalDesktopTrack(tracks);
 
     if (getMultipleVideoSendingSupportFeatureFlag(state)) {
-        return localScreenshare && localScreenshare.jitsiTrack && !localScreenshare.jitsiTrack.isMuted();
+        return localScreenshare?.jitsiTrack && !localScreenshare.jitsiTrack.isMuted();
     }
     const localVideo = getLocalVideoTrack(tracks);
 

react/features/toolbox/functions.web.ts

@@ -1,6 +1,6 @@
-// @flow
+import { IState } from '../app/types';
-import { getToolbarButtons } from '../base/config';
+import { getToolbarButtons } from '../base/config/functions.web';
-import { hasAvailableDevices } from '../base/devices';
+import { hasAvailableDevices } from '../base/devices/functions';
 import { isScreenMediaShared } from '../screen-share/functions';
 
 import { TOOLBAR_TIMEOUT } from './constants';
@@ -15,7 +15,7 @@ export * from './functions.any';
 export function getToolboxHeight() {
     const toolbox = document.getElementById('new-toolbox');
 
-    return (toolbox && toolbox.clientHeight) || 0;
+    return toolbox?.clientHeight || 0;
 }
 
 /**
@@ -23,11 +23,11 @@ export function getToolboxHeight() {
  *
  * @param {string} name - The name of the setting section as defined in
  * interface_config.js.
- * @param {Object} state - The redux state.
+ * @param {IState} state - The redux state.
  * @returns {boolean|undefined} - True to indicate that the given toolbar button
  * is enabled, false - otherwise.
  */
-export function isButtonEnabled(name: string, state: Object) {
+export function isButtonEnabled(name: string, state: IState) {
     const toolbarButtons = getToolbarButtons(state);
 
     return toolbarButtons.indexOf(name) !== -1;
@@ -36,11 +36,11 @@ export function isButtonEnabled(name: string, state: Object) {
 /**
  * Indicates if the toolbox is visible or not.
  *
- * @param {Object} state - The state from the Redux store.
+ * @param {IState} state - The state from the Redux store.
  * @returns {boolean} - True to indicate that the toolbox is visible, false -
  * otherwise.
  */
-export function isToolboxVisible(state: Object) {
+export function isToolboxVisible(state: IState) {
     const { iAmRecorder, iAmSipGateway, toolbarConfig } = state['features/base/config'];
     const { alwaysVisible } = toolbarConfig || {};
     const {
@@ -56,23 +56,23 @@ export function isToolboxVisible(state: Object) {
 /**
  * Indicates if the audio settings 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 isAudioSettingsButtonDisabled(state: Object) {
+export function isAudioSettingsButtonDisabled(state: IState) {
 
     return !(hasAvailableDevices(state, 'audioInput')
-          || hasAvailableDevices(state, 'audioOutput'))
+        || hasAvailableDevices(state, 'audioOutput'))
-          || state['features/base/config'].startSilent;
+        || state['features/base/config'].startSilent;
 }
 
 /**
  * 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 || isScreenMediaShared(state);
 
@@ -82,20 +82,20 @@ export function isDesktopShareButtonDisabled(state: Object) {
 /**
  * Indicates if the video settings 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 isVideoSettingsButtonDisabled(state: Object) {
+export function isVideoSettingsButtonDisabled(state: IState) {
     return !hasAvailableDevices(state, 'videoInput');
 }
 
 /**
  * Indicates if the video mute 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 isVideoMuteButtonDisabled(state: Object) {
+export function isVideoMuteButtonDisabled(state: IState) {
     const { muted, unmuteBlocked } = state['features/base/media'].video;
 
     return !hasAvailableDevices(state, 'videoInput') || (unmuteBlocked && Boolean(muted));
@@ -105,31 +105,31 @@ export function isVideoMuteButtonDisabled(state: Object) {
  * If an overflow drawer should be displayed or not.
  * This is usually done for mobile devices or on narrow screens.
  *
- * @param {Object} state - The state from the Redux store.
+ * @param {IState} state - The state from the Redux store.
  * @returns {boolean}
  */
-export function showOverflowDrawer(state: Object) {
+export function showOverflowDrawer(state: IState) {
     return state['features/toolbox'].overflowDrawer;
 }
 
 /**
  * Indicates whether the toolbox is enabled or not.
  *
- * @param {Object} state - The state from the Redux store.
+ * @param {IState} state - The state from the Redux store.
  * @returns {boolean}
  */
-export function isToolboxEnabled(state: Object) {
+export function isToolboxEnabled(state: IState) {
     return state['features/toolbox'].enabled;
 }
 
 /**
  * Returns the toolbar timeout from config or the default value.
  *
- * @param {Object} state - The state from the Redux store.
+ * @param {IState} state - The state from the Redux store.
  * @returns {number} - Toolbar timeout in milliseconds.
  */
-export function getToolbarTimeout(state: Object) {
+export function getToolbarTimeout(state: IState) {
-    const { toolbarConfig: { timeout } } = state['features/base/config'];
+    const { toolbarConfig } = state['features/base/config'];
 
-    return timeout || TOOLBAR_TIMEOUT;
+    return toolbarConfig?.timeout || TOOLBAR_TIMEOUT;
 }