Compare commits

...

5 Commits

Author SHA1 Message Date
damencho 3a73519218 fix: Fixes follow-me on the side that is screen sharing. 2023-02-01 09:57:50 -06:00
damencho eed2074393 fix: Fixes follow-me when there is a screenshare. 2023-02-01 09:57:31 -06:00
Boris Grozev bc1a835e97 Use cherry-picked version of ljm. 2023-01-27 11:32:08 -06:00
Robert Pintilii ed54031640 fix(recording-dialog) Fix switch UI (#12826) 2023-01-26 09:30:26 -06:00
Mihaela Dumitru 8f6883a237
feat(config/giphy) add proxyUrl config for giphy requests (#12816) (#12833) 2023-01-26 17:25:50 +02:00
11 changed files with 103 additions and 62 deletions

View File

@ -1518,6 +1518,8 @@ var config = {
// tileTime: 5000, // tileTime: 5000,
// // Limit results by rating: g, pg, pg-13, r. Default value: g. // // Limit results by rating: g, pg, pg-13, r. Default value: g.
// rating: 'pg', // rating: 'pg',
// // The proxy server url for giphy requests in the web app.
// proxyUrl: 'https://giphy-proxy.example.com',
// }, // },
// Logging // Logging

View File

@ -18,6 +18,7 @@
align-items: center; align-items: center;
font-size: 14px; font-size: 14px;
margin-left: 16px; margin-left: 16px;
max-width: 70%;
} }
&.space-top { &.space-top {
@ -82,7 +83,7 @@
background-color: #FFFFFF; background-color: #FFFFFF;
border-radius: 4px; border-radius: 4px;
height: 40px; height: 40px;
width: 56px; width: 40px;
} }
.jitsi-content-recording-icon-container-without-switch { .jitsi-content-recording-icon-container-without-switch {

50
package-lock.json generated
View File

@ -23,7 +23,7 @@
"@atlaskit/tooltip": "17.1.2", "@atlaskit/tooltip": "17.1.2",
"@emotion/react": "11.10.0", "@emotion/react": "11.10.0",
"@emotion/styled": "11.10.0", "@emotion/styled": "11.10.0",
"@giphy/js-fetch-api": "4.1.2", "@giphy/js-fetch-api": "4.7.1",
"@giphy/react-components": "5.6.0", "@giphy/react-components": "5.6.0",
"@giphy/react-native-sdk": "1.7.0", "@giphy/react-native-sdk": "1.7.0",
"@hapi/bourne": "2.0.0", "@hapi/bourne": "2.0.0",
@ -3496,26 +3496,26 @@
} }
}, },
"node_modules/@giphy/js-fetch-api": { "node_modules/@giphy/js-fetch-api": {
"version": "4.1.2", "version": "4.7.1",
"resolved": "https://registry.npmjs.org/@giphy/js-fetch-api/-/js-fetch-api-4.1.2.tgz", "resolved": "https://registry.npmjs.org/@giphy/js-fetch-api/-/js-fetch-api-4.7.1.tgz",
"integrity": "sha512-wDfDQu8HiVkLb+YXcZf8QFbznmMHWbg86ZBydYmnp2mfuHyaHKsz9n9PnxdH3RorMS9YM/Ca/zqAM5y89Qj+Hw==", "integrity": "sha512-LFpi8ZbV/N51nhIDc7ig6HnBUZ0Y/Av0GVCVDOs9zmUK1/zgTA33fkWMCNVxc4wgrugwRXCJA7Mj8Zb8BTea2w==",
"dependencies": { "dependencies": {
"@giphy/js-types": "^4.1.0", "@giphy/js-types": "^4.4.0",
"@giphy/js-util": "^4.0.1", "@giphy/js-util": "^4.3.0",
"qs": "^6.9.4" "qs": "^6.9.4"
} }
}, },
"node_modules/@giphy/js-types": { "node_modules/@giphy/js-types": {
"version": "4.1.0", "version": "4.4.0",
"resolved": "https://registry.npmjs.org/@giphy/js-types/-/js-types-4.1.0.tgz", "resolved": "https://registry.npmjs.org/@giphy/js-types/-/js-types-4.4.0.tgz",
"integrity": "sha512-+qSN4Mx4TmrjLQm4SC0I/ZBkb5eWM94sljXwfjIlqn0GMSR3geqEqwmE9Uf/ldgzFh+XMMCasQjIdUl2nWc++Q==" "integrity": "sha512-W9G6crS2oqTn7g0RpvYu1l/sna4LnivRTk25jmxdzujOFb9kvQ+VFM/v9RPYV2GIBnzT/maW/EwjFIba9jkflA=="
}, },
"node_modules/@giphy/js-util": { "node_modules/@giphy/js-util": {
"version": "4.0.1", "version": "4.3.0",
"resolved": "https://registry.npmjs.org/@giphy/js-util/-/js-util-4.0.1.tgz", "resolved": "https://registry.npmjs.org/@giphy/js-util/-/js-util-4.3.0.tgz",
"integrity": "sha512-46wXgt5Y+MxZjuzjE6JlvMLE+6Vlag+PYxbyTxpsunhmOKNoYK99d51E09iynmXTFuZWYgWJR9LcfnzqsWHy+Q==", "integrity": "sha512-ZxYw4DiNVchMxtCjVdLzXJ6+40To1C1B37PJ2a7zUP8Dxa62uGctbyb2PXAB1NmsCZOhy1d0QGEnjxK5LQocHQ==",
"dependencies": { "dependencies": {
"@giphy/js-types": "^4.1.0", "@giphy/js-types": "^4.4.0",
"dompurify": "^2.2.2", "dompurify": "^2.2.2",
"uuid": "^8.3.0" "uuid": "^8.3.0"
} }
@ -22970,26 +22970,26 @@
} }
}, },
"@giphy/js-fetch-api": { "@giphy/js-fetch-api": {
"version": "4.1.2", "version": "4.7.1",
"resolved": "https://registry.npmjs.org/@giphy/js-fetch-api/-/js-fetch-api-4.1.2.tgz", "resolved": "https://registry.npmjs.org/@giphy/js-fetch-api/-/js-fetch-api-4.7.1.tgz",
"integrity": "sha512-wDfDQu8HiVkLb+YXcZf8QFbznmMHWbg86ZBydYmnp2mfuHyaHKsz9n9PnxdH3RorMS9YM/Ca/zqAM5y89Qj+Hw==", "integrity": "sha512-LFpi8ZbV/N51nhIDc7ig6HnBUZ0Y/Av0GVCVDOs9zmUK1/zgTA33fkWMCNVxc4wgrugwRXCJA7Mj8Zb8BTea2w==",
"requires": { "requires": {
"@giphy/js-types": "^4.1.0", "@giphy/js-types": "^4.4.0",
"@giphy/js-util": "^4.0.1", "@giphy/js-util": "^4.3.0",
"qs": "^6.9.4" "qs": "^6.9.4"
} }
}, },
"@giphy/js-types": { "@giphy/js-types": {
"version": "4.1.0", "version": "4.4.0",
"resolved": "https://registry.npmjs.org/@giphy/js-types/-/js-types-4.1.0.tgz", "resolved": "https://registry.npmjs.org/@giphy/js-types/-/js-types-4.4.0.tgz",
"integrity": "sha512-+qSN4Mx4TmrjLQm4SC0I/ZBkb5eWM94sljXwfjIlqn0GMSR3geqEqwmE9Uf/ldgzFh+XMMCasQjIdUl2nWc++Q==" "integrity": "sha512-W9G6crS2oqTn7g0RpvYu1l/sna4LnivRTk25jmxdzujOFb9kvQ+VFM/v9RPYV2GIBnzT/maW/EwjFIba9jkflA=="
}, },
"@giphy/js-util": { "@giphy/js-util": {
"version": "4.0.1", "version": "4.3.0",
"resolved": "https://registry.npmjs.org/@giphy/js-util/-/js-util-4.0.1.tgz", "resolved": "https://registry.npmjs.org/@giphy/js-util/-/js-util-4.3.0.tgz",
"integrity": "sha512-46wXgt5Y+MxZjuzjE6JlvMLE+6Vlag+PYxbyTxpsunhmOKNoYK99d51E09iynmXTFuZWYgWJR9LcfnzqsWHy+Q==", "integrity": "sha512-ZxYw4DiNVchMxtCjVdLzXJ6+40To1C1B37PJ2a7zUP8Dxa62uGctbyb2PXAB1NmsCZOhy1d0QGEnjxK5LQocHQ==",
"requires": { "requires": {
"@giphy/js-types": "^4.1.0", "@giphy/js-types": "^4.4.0",
"dompurify": "^2.2.2", "dompurify": "^2.2.2",
"uuid": "^8.3.0" "uuid": "^8.3.0"
} }

View File

@ -28,7 +28,7 @@
"@atlaskit/tooltip": "17.1.2", "@atlaskit/tooltip": "17.1.2",
"@emotion/react": "11.10.0", "@emotion/react": "11.10.0",
"@emotion/styled": "11.10.0", "@emotion/styled": "11.10.0",
"@giphy/js-fetch-api": "4.1.2", "@giphy/js-fetch-api": "4.7.1",
"@giphy/react-components": "5.6.0", "@giphy/react-components": "5.6.0",
"@giphy/react-native-sdk": "1.7.0", "@giphy/react-native-sdk": "1.7.0",
"@hapi/bourne": "2.0.0", "@hapi/bourne": "2.0.0",
@ -79,7 +79,7 @@
"js-md5": "0.6.1", "js-md5": "0.6.1",
"js-sha512": "0.8.0", "js-sha512": "0.8.0",
"jwt-decode": "2.2.0", "jwt-decode": "2.2.0",
"lib-jitsi-meet": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1569.0.0+5f8d02c9/lib-jitsi-meet.tgz", "lib-jitsi-meet": "github:jitsi/lib-jitsi-meet#21045828ae9f8d68b6e48ec1c4689eabdf891b0c",
"lodash": "4.17.21", "lodash": "4.17.21",
"moment": "2.29.4", "moment": "2.29.4",
"moment-duration-format": "2.2.2", "moment-duration-format": "2.2.2",

View File

@ -343,6 +343,7 @@ export interface IConfig {
giphy?: { giphy?: {
displayMode?: 'all' | 'tile' | 'chat'; displayMode?: 'all' | 'tile' | 'chat';
enabled?: boolean; enabled?: boolean;
proxyUrl?: string;
rating?: 'g' | 'pg' | 'pg-13' | 'r'; rating?: 'g' | 'pg' | 'pg-13' | 'r';
sdkKey?: string; sdkKey?: string;
tileTime?: number; tileTime?: number;

View File

@ -92,7 +92,7 @@ function _getFollowMeState(state: IReduxState) {
return { return {
filmstripVisible: state['features/filmstrip'].visible, filmstripVisible: state['features/filmstrip'].visible,
maxStageParticipants: stageFilmstrip ? state['features/base/settings'].maxStageParticipants : undefined, maxStageParticipants: stageFilmstrip ? state['features/base/settings'].maxStageParticipants : undefined,
nextOnStage: stageFilmstrip ? undefined : pinnedParticipant?.id, nextOnStage: pinnedParticipant?.id,
pinnedStageParticipants: stageFilmstrip ? JSON.stringify(getPinnedActiveParticipants(state)) : undefined, pinnedStageParticipants: stageFilmstrip ? JSON.stringify(getPinnedActiveParticipants(state)) : undefined,
sharedDocumentVisible: state['features/etherpad'].editing, sharedDocumentVisible: state['features/etherpad'].editing,
tileViewEnabled: shouldDisplayTileView(state) tileViewEnabled: shouldDisplayTileView(state)

View File

@ -8,7 +8,7 @@ import JitsiScreen from '../../../base/modal/components/JitsiScreen';
import Input from '../../../base/ui/components/native/Input'; import Input from '../../../base/ui/components/native/Input';
import { sendMessage } from '../../../chat/actions.any'; import { sendMessage } from '../../../chat/actions.any';
import { goBack } from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef'; import { goBack } from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
import { formatGifUrlMessage, getGifRating, getGifUrl } from '../../functions'; import { formatGifUrlMessage, getGifRating, getGifUrl, getGiphyProxyUrl } from '../../functions';
import GifsMenuFooter from './GifsMenuFooter'; import GifsMenuFooter from './GifsMenuFooter';
import styles from './styles'; import styles from './styles';
@ -18,6 +18,7 @@ const GifsMenu = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const { t } = useTranslation(); const { t } = useTranslation();
const rating = useSelector(getGifRating); const rating = useSelector(getGifRating);
const proxyUrl = useSelector(getGiphyProxyUrl);
const options = { const options = {
mediaType: GiphyMediaType.Gif, mediaType: GiphyMediaType.Gif,
@ -33,7 +34,7 @@ const GifsMenu = () => {
}); });
const sendGif = useCallback(e => { const sendGif = useCallback(e => {
const url = getGifUrl(e.nativeEvent.media); const url = getGifUrl(e.nativeEvent.media, proxyUrl);
sendAnalytics(createGifSentEvent()); sendAnalytics(createGifSentEvent());

View File

@ -1,4 +1,4 @@
import { GiphyFetch, TrendingOptions } from '@giphy/js-fetch-api'; import { GiphyFetch, TrendingOptions, setServerUrl } from '@giphy/js-fetch-api';
import { Grid } from '@giphy/react-components'; import { Grid } from '@giphy/react-components';
import React, { useCallback, useEffect, useState } from 'react'; import React, { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
@ -22,7 +22,8 @@ import {
formatGifUrlMessage, formatGifUrlMessage,
getGifAPIKey, getGifAPIKey,
getGifRating, getGifRating,
getGifUrl getGifUrl,
getGiphyProxyUrl
} from '../../function.any'; } from '../../function.any';
const OVERFLOW_DRAWER_PADDING = 16; const OVERFLOW_DRAWER_PADDING = 16;
@ -92,6 +93,7 @@ function GifsMenu() {
const overflowDrawer: boolean = useSelector(showOverflowDrawer); const overflowDrawer: boolean = useSelector(showOverflowDrawer);
const { clientWidth } = useSelector((state: IReduxState) => state['features/base/responsive-ui']); const { clientWidth } = useSelector((state: IReduxState) => state['features/base/responsive-ui']);
const rating = useSelector(getGifRating); const rating = useSelector(getGifRating);
const proxyUrl = useSelector(getGiphyProxyUrl);
const fetchGifs = useCallback(async (offset = 0) => { const fetchGifs = useCallback(async (offset = 0) => {
const options: TrendingOptions = { const options: TrendingOptions = {
@ -114,7 +116,7 @@ function GifsMenu() {
const handleGifClick = useCallback((gif, e) => { const handleGifClick = useCallback((gif, e) => {
e?.stopPropagation(); e?.stopPropagation();
const url = getGifUrl(gif); const url = getGifUrl(gif, proxyUrl);
sendAnalytics(createGifSentEvent()); sendAnalytics(createGifSentEvent());
batch(() => { batch(() => {
@ -177,6 +179,12 @@ function GifsMenu() {
// This fixes that. // This fixes that.
useEffect(() => setSearchKey(''), []); useEffect(() => setSearchKey(''), []);
useEffect(() => {
if (proxyUrl) {
setServerUrl(proxyUrl);
}
}, []);
const onInputKeyPress = useCallback((e: React.KeyboardEvent) => { const onInputKeyPress = useCallback((e: React.KeyboardEvent) => {
e.stopPropagation(); e.stopPropagation();
}, []); }, []);

View File

@ -3,6 +3,46 @@ import { IReduxState } from '../app/types';
import { GIF_DEFAULT_RATING, GIF_PREFIX } from './constants'; import { GIF_DEFAULT_RATING, GIF_PREFIX } from './constants';
import { IGif } from './reducer'; import { IGif } from './reducer';
/**
* Returns the gif config.
*
* @param {IReduxState} state - Redux state.
* @returns {Object}
*/
export function getGifConfig(state: IReduxState) {
return state['features/base/config'].giphy || {};
}
/**
* Get the GIF display mode.
*
* @param {IReduxState} state - Redux state.
* @returns {string}
*/
export function getGifDisplayMode(state: IReduxState) {
return getGifConfig(state).displayMode || 'all';
}
/**
* Get the GIF audience rating.
*
* @param {IReduxState} state - Redux state.
* @returns {string}
*/
export function getGifRating(state: IReduxState) {
return getGifConfig(state).rating || GIF_DEFAULT_RATING;
}
/**
* Get the Giphy proxy url.
*
* @param {IReduxState} state - Redux state.
* @returns {string}
*/
export function getGiphyProxyUrl(state: IReduxState) {
return getGifConfig(state).proxyUrl;
}
/** /**
* Gets the URL of the GIF for the given participant or null if there's none. * Gets the URL of the GIF for the given participant or null if there's none.
* *
@ -29,13 +69,18 @@ export function isGifMessage(message: string) {
* Returns the url of the gif selected in the gifs menu. * Returns the url of the gif selected in the gifs menu.
* *
* @param {Object} gif - The gif data. * @param {Object} gif - The gif data.
* @param {string} proxyUrl - The proxy server url.
* @returns {boolean} * @returns {boolean}
*/ */
export function getGifUrl(gif?: { data?: { embed_url: string; }; embed_url?: string; }) { export function getGifUrl(gif?: { data?: { embed_url: string; }; embed_url?: string; }, proxyUrl?: string) {
const embedUrl = gif?.embed_url || gif?.data?.embed_url || ''; const embedUrl = gif?.embed_url || gif?.data?.embed_url || '';
const idx = embedUrl.lastIndexOf('/'); const idx = embedUrl.lastIndexOf('/');
const id = embedUrl.substr(idx + 1); const id = embedUrl.substr(idx + 1);
if (proxyUrl) {
return `${proxyUrl}gifs/id/${id}`;
}
return `https://i.giphy.com/media/${id}/giphy.gif`; return `https://i.giphy.com/media/${id}/giphy.gif`;
} }
@ -56,7 +101,7 @@ export function formatGifUrlMessage(url: string) {
* @returns {string} * @returns {string}
*/ */
export function getGifAPIKey(state: IReduxState) { export function getGifAPIKey(state: IReduxState) {
return state['features/base/config']?.giphy?.sdkKey ?? ''; return getGifConfig(state).sdkKey ?? '';
} }
/** /**
@ -77,26 +122,3 @@ export function isGifEnabled(state: IReduxState) {
return showGiphyIntegration && Boolean(!disableThirdPartyRequests && giphy?.enabled && Boolean(giphy?.sdkKey)); return showGiphyIntegration && Boolean(!disableThirdPartyRequests && giphy?.enabled && Boolean(giphy?.sdkKey));
} }
/**
* Get the GIF display mode.
*
* @param {IReduxState} state - Redux state.
* @returns {string}
*/
export function getGifDisplayMode(state: IReduxState) {
const { giphy } = state['features/base/config'];
return giphy?.displayMode || 'all';
}
/**
* Get the GIF audience rating.
*
* @param {IReduxState} state - Redux state.
* @returns {string}
*/
export function getGifRating(state: IReduxState) {
const { giphy } = state['features/base/config'];
return giphy?.rating || GIF_DEFAULT_RATING;
}

View File

@ -2,13 +2,13 @@ import { GiphySDK } from '@giphy/react-native-sdk';
import StateListenerRegistry from '../base/redux/StateListenerRegistry'; import StateListenerRegistry from '../base/redux/StateListenerRegistry';
import { isGifEnabled } from './function.any'; import { getGifConfig, isGifEnabled } from './function.any';
/** /**
* Listens for changes in the number of participants to calculate the dimensions of the tile view grid and the tiles. * Listens for changes in the number of participants to calculate the dimensions of the tile view grid and the tiles.
*/ */
StateListenerRegistry.register( StateListenerRegistry.register(
/* selector */ state => state['features/base/config']?.giphy, /* selector */ state => getGifConfig(state),
/* listener */ (_, store) => { /* listener */ (_, store) => {
const state = store.getState(); const state = store.getState();

View File

@ -49,9 +49,15 @@ MiddlewareRegistry.register(store => next => action => {
return result; return result;
} }
case PIN_PARTICIPANT: {
const result = next(action);
store.dispatch(selectParticipantInLargeVideo(action.participant?.id));
return result;
}
case PARTICIPANT_JOINED: case PARTICIPANT_JOINED:
case PARTICIPANT_LEFT: case PARTICIPANT_LEFT:
case PIN_PARTICIPANT:
case TOGGLE_DOCUMENT_EDITING: case TOGGLE_DOCUMENT_EDITING:
case TRACK_ADDED: case TRACK_ADDED:
case TRACK_REMOVED: { case TRACK_REMOVED: {