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

This commit is contained in:
Robert Pintilii 2022-09-29 14:45:34 +03:00 committed by GitHub
parent 8162ae4dbe
commit 5c77f61037
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 81 additions and 74 deletions

1
globals.d.ts vendored
View File

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

View File

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

View File

@ -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;
}

View File

@ -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;

View File

@ -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

View File

@ -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();

View File

@ -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';

View File

@ -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);

View File

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

View File

@ -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

View File

@ -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);

View File

@ -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;
}