From 5c77f610377dce601bad8dca1f93f2badd75568c Mon Sep 17 00:00:00 2001 From: Robert Pintilii Date: Thu, 29 Sep 2022 14:45:34 +0300 Subject: [PATCH] ref(gifs) Convert feature to TS (#12264) --- globals.d.ts | 1 + react/features/base/config/configType.ts | 2 +- react/features/base/settings/reducer.ts | 2 + .../filmstrip/components/web/Thumbnail.tsx | 2 +- .../features/gifs/{actions.js => actions.ts} | 12 ++--- .../features/gifs/components/web/GifsMenu.tsx | 2 +- .../gifs/{functions.js => functions.ts} | 32 ++++++------ .../{middleware.any.js => middleware.any.ts} | 7 +-- ...dleware.native.js => middleware.native.ts} | 0 .../{middleware.web.js => middleware.web.ts} | 0 react/features/gifs/reducer.ts | 10 ++-- ...scriber.native.js => subscriber.native.ts} | 4 +- .../{functions.js => functions.ts} | 29 +++++------ .../{functions.web.js => functions.web.ts} | 52 +++++++++---------- 14 files changed, 81 insertions(+), 74 deletions(-) rename react/features/gifs/{actions.js => actions.ts} (83%) rename react/features/gifs/{functions.js => functions.ts} (67%) rename react/features/gifs/{middleware.any.js => middleware.any.ts} (88%) rename react/features/gifs/{middleware.native.js => middleware.native.ts} (100%) rename react/features/gifs/{middleware.web.js => middleware.web.ts} (100%) rename react/features/gifs/{subscriber.native.js => subscriber.native.ts} (84%) rename react/features/screen-share/{functions.js => functions.ts} (66%) rename react/features/toolbox/{functions.web.js => functions.web.ts} (64%) diff --git a/globals.d.ts b/globals.d.ts index 3b5e0b199..afae76d92 100644 --- a/globals.d.ts +++ b/globals.d.ts @@ -14,5 +14,6 @@ declare global { interface Window { config?: IConfig; + JITSI_MEET_LITE_SDK?: boolean; } } diff --git a/react/features/base/config/configType.ts b/react/features/base/config/configType.ts index e30f508ef..f3bbb159d 100644 --- a/react/features/base/config/configType.ts +++ b/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?: { diff --git a/react/features/base/settings/reducer.ts b/react/features/base/settings/reducer.ts index af12f0406..f93cd752f 100644 --- a/react/features/base/settings/reducer.ts +++ b/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; } diff --git a/react/features/filmstrip/components/web/Thumbnail.tsx b/react/features/filmstrip/components/web/Thumbnail.tsx index 4f00fda2a..da9d43618 100644 --- a/react/features/filmstrip/components/web/Thumbnail.tsx +++ b/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; diff --git a/react/features/gifs/actions.js b/react/features/gifs/actions.ts similarity index 83% rename from react/features/gifs/actions.js rename to react/features/gifs/actions.ts index 7a33ce5d6..64a18e43f 100644 --- a/react/features/gifs/actions.js +++ b/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 diff --git a/react/features/gifs/components/web/GifsMenu.tsx b/react/features/gifs/components/web/GifsMenu.tsx index fc7fdb890..a8a543b54 100644 --- a/react/features/gifs/components/web/GifsMenu.tsx +++ b/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(); const { classes: styles, cx } = useStyles(); diff --git a/react/features/gifs/functions.js b/react/features/gifs/functions.ts similarity index 67% rename from react/features/gifs/functions.js rename to react/features/gifs/functions.ts index e4ab46453..efb6c9d00 100644 --- a/react/features/gifs/functions.js +++ b/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) { - return state['features/base/config']?.giphy?.sdkKey; +export function getGifAPIKey(state: IState) { + 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'; diff --git a/react/features/gifs/middleware.any.js b/react/features/gifs/middleware.any.ts similarity index 88% rename from react/features/gifs/middleware.any.js rename to react/features/gifs/middleware.any.ts index 731b8e2d9..da23750e7 100644 --- a/react/features/gifs/middleware.any.js +++ b/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); diff --git a/react/features/gifs/middleware.native.js b/react/features/gifs/middleware.native.ts similarity index 100% rename from react/features/gifs/middleware.native.js rename to react/features/gifs/middleware.native.ts diff --git a/react/features/gifs/middleware.web.js b/react/features/gifs/middleware.web.ts similarity index 100% rename from react/features/gifs/middleware.web.js rename to react/features/gifs/middleware.web.ts diff --git a/react/features/gifs/reducer.ts b/react/features/gifs/reducer.ts index 5e94effff..5e5d8b85a 100644 --- a/react/features/gifs/reducer.ts +++ b/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; + gifList: Map; menuOpen: boolean; } diff --git a/react/features/gifs/subscriber.native.js b/react/features/gifs/subscriber.native.ts similarity index 84% rename from react/features/gifs/subscriber.native.js rename to react/features/gifs/subscriber.native.ts index 2f570607d..011932fab 100644 --- a/react/features/gifs/subscriber.native.js +++ b/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 diff --git a/react/features/screen-share/functions.js b/react/features/screen-share/functions.ts similarity index 66% rename from react/features/screen-share/functions.js rename to react/features/screen-share/functions.ts index be4fc6dfe..fa4c029d9 100644 --- a/react/features/screen-share/functions.js +++ b/react/features/screen-share/functions.ts @@ -1,29 +1,28 @@ -// @flow - -import { getMultipleVideoSendingSupportFeatureFlag } from '../base/config'; -import { isWindows } from '../base/environment'; +import { IState } from '../app/types'; +import { getMultipleVideoSendingSupportFeatureFlag } from '../base/config/functions.any'; +import { isWindows } from '../base/environment/environment'; import { isMobileBrowser } from '../base/environment/utils'; import { browser } from '../base/lib-jitsi-meet'; -import { VIDEO_TYPE } from '../base/media'; -import { getLocalDesktopTrack, getLocalVideoTrack } from '../base/tracks'; +import { VIDEO_TYPE } from '../base/media/constants'; +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); diff --git a/react/features/toolbox/functions.web.js b/react/features/toolbox/functions.web.ts similarity index 64% rename from react/features/toolbox/functions.web.js rename to react/features/toolbox/functions.web.ts index cce016cf0..80028a073 100644 --- a/react/features/toolbox/functions.web.js +++ b/react/features/toolbox/functions.web.ts @@ -1,6 +1,6 @@ -// @flow -import { getToolbarButtons } from '../base/config'; -import { hasAvailableDevices } from '../base/devices'; +import { IState } from '../app/types'; +import { getToolbarButtons } from '../base/config/functions.web'; +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')) - || state['features/base/config'].startSilent; + || hasAvailableDevices(state, 'audioOutput')) + || 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) { - const { toolbarConfig: { timeout } } = state['features/base/config']; +export function getToolbarTimeout(state: IState) { + const { toolbarConfig } = state['features/base/config']; - return timeout || TOOLBAR_TIMEOUT; + return toolbarConfig?.timeout || TOOLBAR_TIMEOUT; }