haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(gif) Added GIF support (GIPHY integration) (#11021) 

Show GIF menu in reactions menu
Search GIFs using the GIPHY API
Show GIFs as images in chat
Show GIFs on the thumbnail of the participant that sent it
Move GIF focus using up/ down arrows and send with Enter
Added analytics
This commit is contained in:
Robert Pintilii 2022-03-11 15:00:49 +02:00 committed by GitHub
parent b6d55571ba
commit 190041fc5a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
30 changed files with 1648 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
config.js
View File

@ -1300,6 +1300,21 @@ var config = {
// Specifies whether the chat emoticons are disabled or not
// disableChatSmileys: false,
// Settings for the GIPHY integration.
// giphy: {
// // Whether the feature is enabled or not.
// enabled: false,
// // SDK API Key from Giphy.
// sdkKey: '',
// // Display mode can be one of:
// // - tile: show the GIF on the tile of the participant that sent it.
// // - chat: show the GIF as a message in chat
// // - all: all of the above. This is the default option
// displayMode: 'all',
// // How long the GIF should be displayed on the tile (in miliseconds).
// tileTime: 5000
// },
// Allow all above example options to include a trailing comma and
// prevent fear when commenting out the last value.
makeJsonParserHappy: 'even if last key had a trailing comma'

18
css/_reactions-menu.scss
View File

@ -7,7 +7,20 @@
border-radius: 3px;
padding: 16px;
&.with-gif {
width: 328px;
.reactions-row .toolbox-button:last-of-type {
top: 3px;
& .toolbox-icon.toggled {
background-color: #000000;
}
}
}
&.overflow {
width: 100%;
.toolbox-icon {
width: 48px;
@ -27,6 +40,10 @@
.toolbox-button {
margin-right: 0;
}
.toolbox-button:last-of-type {
top: 0;
}
}
}
@ -56,6 +73,7 @@
.toolbox-button {
margin-right: 8px;
touch-action: manipulation;
position: relative;
}
.toolbox-button:last-of-type {

BIN
images/GIPHY_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 284 B

BIN
images/GIPHY_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

7
lang/main.json
View File

@ -421,6 +421,10 @@
"veryBad": "Very Bad",
"veryGood": "Very Good"
},
"giphy": {
"noResults": "No results found :(",
"search": "Search GIPHY"
},
"helpView": {
"header": "Help center"
},
@ -487,6 +491,7 @@
"focusLocal": "Focus on your video",
"focusRemote": "Focus on another person's video",
"fullScreen": "View or exit full screen",
"giphyMenu": "Toggle GIPHY menu",
"keyboardShortcuts": "Keyboard shortcuts",
"localRecording": "Show or hide local recording controls",
"mute": "Mute or unmute your microphone",
@ -1007,6 +1012,7 @@
"expand": "Expand",
"feedback": "Leave feedback",
"fullScreen": "Toggle full screen",
"giphy": "Toggle GIPHY menu",
"grantModerator": "Grant Moderator Rights",
"hangup": "Leave the meeting",
"help": "Help",
@ -1076,6 +1082,7 @@
"exitFullScreen": "Exit full screen",
"exitTileView": "Exit tile view",
"feedback": "Leave feedback",
"giphy": "Toggle GIPHY menu",
"hangup": "Leave the meeting",
"help": "Help",
"invite": "Invite people",

669
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -33,6 +33,8 @@
"@atlaskit/theme": "11.0.2",
"@atlaskit/toggle": "12.0.3",
"@atlaskit/tooltip": "17.1.2",
"@giphy/js-fetch-api": "4.1.2",
"@giphy/react-components": "5.6.0",
"@hapi/bourne": "2.0.0",
"@jitsi/js-utils": "2.0.0",
"@jitsi/logger": "2.0.0",

12
react/features/analytics/AnalyticsEvents.js
View File

@ -899,3 +899,15 @@ export function createBreakoutRoomsEvent(actionSubject) {
source: 'breakout.rooms'
};
}
/**
* Creates and event which indicates a GIF was sent.
*
* @returns {Object} The event in a format suitable for sending via
* sendAnalytics.
*/
export function createGifSentEvent() {
return {
action: 'gif.sent'
};
}

1
react/features/app/middlewares.any.js
View File

@ -30,6 +30,7 @@ import '../display-name/middleware';
import '../etherpad/middleware';
import '../filmstrip/middleware';
import '../follow-me/middleware';
import '../gifs/middleware';
import '../invite/middleware';
import '../jaas/middleware';
import '../large-video/middleware';

1
react/features/app/reducers.any.js
View File

@ -33,6 +33,7 @@ import '../dynamic-branding/reducer';
import '../etherpad/reducer';
import '../filmstrip/reducer';
import '../follow-me/reducer';
import '../gifs/reducer';
import '../google-api/reducer';
import '../invite/reducer';
import '../jaas/reducer';

1
react/features/base/config/configWhitelist.js
View File

@ -161,6 +161,7 @@ export default [
'forceJVB121Ratio',
'forceTurnRelay',
'gatherStats',
'giphy',
'googleApiApplicationClientID',
'hiddenPremeetingButtons',
'hideConferenceSubject',

4
react/features/base/premeeting/components/web/InputField.js
View File

@ -2,6 +2,7 @@
import React, { PureComponent } from 'react';
import { isMobileBrowser } from '../../../environment/utils';
import { getFieldValue } from '../../../react';
type Props = {
@ -132,6 +133,9 @@ export default class InputField extends PureComponent<Props, State> {
onKeyDown = { this._onKeyDown }
placeholder = { this.props.placeHolder }
readOnly = { this.props.readOnly }
// eslint-disable-next-line react/jsx-no-bind
ref = { inputElement => this.props.autoFocus && isMobileBrowser()
&& inputElement && inputElement.focus() }
type = { this.props.type }
value = { this.state.value } />
);

29
react/features/base/react/components/web/Message.js
View File

@ -3,6 +3,9 @@
import React, { Component } from 'react';
import { toArray } from 'react-emoji-render';
import GifMessage from '../../../../chat/components/web/GifMessage';
import { isGifMessage } from '../../../../gifs/functions';
import Linkify from './Linkify';
type Props = {
@ -44,16 +47,26 @@ class Message extends Component<Props> {
const content = [];
for (const token of tokens) {
if (token.includes('://')) {
// check if the message is a GIF
if (isGifMessage(text)) {
const url = text.substring(4, text.length - 1);
// Bypass the emojification when urls are involved
content.push(token);
} else {
content.push(...toArray(token, { className: 'smiley' }));
content.push(<GifMessage
key = { url }
url = { url } />);
} else {
for (const token of tokens) {
if (token.includes('://')) {
// Bypass the emojification when urls are involved
content.push(token);
} else {
content.push(...toArray(token, { className: 'smiley' }));
}
content.push(' ');
}
content.push(' ');
}
content.forEach(token => {

42
react/features/chat/components/web/GifMessage.js Normal file
View File

@ -0,0 +1,42 @@
// @flow
import { makeStyles } from '@material-ui/styles';
import React from 'react';
type Props = {
/**
* URL of the GIF.
*/
url: string
}
const useStyles = makeStyles(() => {
return {
container: {
display: 'flex',
justifyContent: 'center',
overflow: 'hidden',
maxHeight: '150px',
'& img': {
maxWidth: '100%',
maxHeight: '100%',
objectFit: 'contain',
flexGrow: '1'
}
}
};
});
const GifMessage = ({ url }: Props) => {
const styles = useStyles();
return (<div className = { styles.container }>
<img
alt = { url }
src = { url } />
</div>);
};
export default GifMessage;

58
react/features/chat/middleware.js
View File

@ -18,6 +18,9 @@ import {
} from '../base/participants';
import { MiddlewareRegistry, StateListenerRegistry } from '../base/redux';
import { playSound, registerSound, unregisterSound } from '../base/sounds';
import { addGif } from '../gifs/actions';
import { GIF_PREFIX } from '../gifs/constants';
import { getGifDisplayMode, isGifMessage } from '../gifs/functions';
import { NOTIFICATION_TIMEOUT_TYPE, showMessageNotification } from '../notifications';
import { resetNbUnreadPollsMessages } from '../polls/actions';
import { ADD_REACTION_MESSAGE } from '../reactions/actionTypes';
@ -226,25 +229,21 @@ function _addChatMsgListener(conference, store) {
conference.on(
JitsiConferenceEvents.MESSAGE_RECEIVED,
(id, message, timestamp) => {
_handleReceivedMessage(store, {
id,
_onConferenceMessageReceived(store, { id,
message,
privateMessage: false,
lobbyChat: false,
timestamp
});
timestamp,
privateMessage: false });
}
);
conference.on(
JitsiConferenceEvents.PRIVATE_MESSAGE_RECEIVED,
(id, message, timestamp) => {
_handleReceivedMessage(store, {
_onConferenceMessageReceived(store, {
id,
message,
privateMessage: true,
lobbyChat: false,
timestamp
timestamp,
privateMessage: true
});
}
);
@ -283,6 +282,45 @@ function _addChatMsgListener(conference, store) {
});
}
/**
* Handles a received message.
*
* @param {Object} store - Redux store.
* @param {Object} message - The message object.
* @returns {void}
*/
function _onConferenceMessageReceived(store, { id, message, timestamp, privateMessage }) {
const isGif = isGifMessage(message);
if (isGif) {
_handleGifMessageReceived(store, id, message);
if (getGifDisplayMode(store.getState()) === 'tile') {
return;
}
}
_handleReceivedMessage(store, {
id,
message,
privateMessage,
lobbyChat: false,
timestamp
}, true, isGif);
}
/**
* Handles a received gif message.
*
* @param {Object} store - Redux store.
* @param {string} id - Id of the participant that sent the message.
* @param {string} message - The message sent.
* @returns {void}
*/
function _handleGifMessageReceived(store, id, message) {
const url = message.substring(GIF_PREFIX.length, message.length - 1);
store.dispatch(addGif(id, url));
}
/**
* Handles a chat error received from the xmpp server.
*

116
react/features/filmstrip/components/web/Thumbnail.js
View File

@ -24,6 +24,8 @@ import {
updateLastTrackVideoMediaEvent
} from '../../../base/tracks';
import { getVideoObjectPosition } from '../../../face-centering/functions';
import { hideGif, showGif } from '../../../gifs/actions';
import { getGifDisplayMode, getGifForParticipant } from '../../../gifs/functions';
import { PresenceLabel } from '../../../presence-status';
import { getCurrentLayout, LAYOUTS } from '../../../video-layout';
import {
@ -96,6 +98,11 @@ export type Props = {|
*/
_disableTileEnlargement: boolean,
/**
* URL of GIF sent by this participant, null if there's none.
*/
_gifSrc ?: string,
/**
* The height of the Thumbnail.
*/
@ -181,16 +188,16 @@ export type Props = {|
*/
_width: number,
/**
* An object containing CSS classes.
*/
classes: Object,
/**
* The redux dispatch function.
*/
dispatch: Function,
/**
* An object containing the CSS classes.
*/
classes: Object,
/**
* The horizontal offset in px for the thumbnail. Used to center the thumbnails from the last row in tile view.
*/
@ -267,10 +274,14 @@ const defaultStyles = theme => {
position: 'absolute',
width: '100%',
height: '100%',
zIndex: '9',
zIndex: 9,
borderRadius: '4px'
},
borderIndicatorOnTop: {
zIndex: 11
},
activeSpeaker: {
'& .active-speaker-indicator': {
boxShadow: `inset 0px 0px 0px 4px ${theme.palette.link01Active} !important`
@ -281,6 +292,25 @@ const defaultStyles = theme => {
'& .raised-hand-border': {
boxShadow: `inset 0px 0px 0px 2px ${theme.palette.warning02} !important`
}
},
gif: {
position: 'absolute',
width: '100%',
height: '100%',
zIndex: 11,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
overflow: 'hidden',
backgroundColor: theme.palette.ui02,
'& img': {
maxWidth: '100%',
maxHeight: '100%',
objectFit: 'contain',
flexGrow: '1'
}
}
};
};
@ -339,6 +369,8 @@ class Thumbnail extends Component<Props, State> {
this._onTouchMove = this._onTouchMove.bind(this);
this._showPopover = this._showPopover.bind(this);
this._hidePopover = this._hidePopover.bind(this);
this._onGifMouseEnter = this._onGifMouseEnter.bind(this);
this._onGifMouseLeave = this._onGifMouseLeave.bind(this);
}
/**
@ -741,6 +773,52 @@ class Thumbnail extends Component<Props, State> {
return className;
}
_onGifMouseEnter: () => void;
/**
* Keep showing the GIF for the current participant.
*
* @returns {void}
*/
_onGifMouseEnter() {
const { dispatch, _participant: { id } } = this.props;
dispatch(showGif(id));
}
_onGifMouseLeave: () => void;
/**
* Keep showing the GIF for the current participant.
*
* @returns {void}
*/
_onGifMouseLeave() {
const { dispatch, _participant: { id } } = this.props;
dispatch(hideGif(id));
}
/**
* Renders GIF.
*
* @returns {Component}
*/
_renderGif() {
const { _gifSrc, classes } = this.props;
return _gifSrc && (
<div
className = { classes.gif }
onMouseEnter = { this._onGifMouseEnter }
onMouseLeave = { this._onGifMouseLeave }>
<img
alt = 'GIF'
src = { _gifSrc } />
</div>
);
}
_onCanPlay: Object => void;
/**
@ -798,7 +876,8 @@ class Thumbnail extends Component<Props, State> {
_localFlipX,
_participant,
_videoTrack,
classes
classes,
_gifSrc
} = this.props;
const { id } = _participant || {};
const { isHovered, popoverVisible } = this.state;
@ -850,9 +929,9 @@ class Thumbnail extends Component<Props, State> {
}
) }
style = { styles.thumbnail }>
{local
{!_gifSrc && (local
? <span id = 'localVideoWrapper'>{video}</span>
: video}
: video)}
<div className = { classes.containerBackground } />
<div
className = { clsx(classes.indicatorsContainer,
@ -880,7 +959,7 @@ class Thumbnail extends Component<Props, State> {
local = { local }
participantId = { id } />
</div>
{ this._renderAvatar(styles.avatar) }
{!_gifSrc && this._renderAvatar(styles.avatar) }
{ !local && (
<div className = 'presence-label-container'>
<PresenceLabel
@ -889,8 +968,15 @@ class Thumbnail extends Component<Props, State> {
</div>
)}
<ThumbnailAudioIndicator _audioTrack = { _audioTrack } />
<div className = { clsx(classes.borderIndicator, 'raised-hand-border') } />
<div className = { clsx(classes.borderIndicator, 'active-speaker-indicator') } />
{this._renderGif()}
<div
className = { clsx(classes.borderIndicator,
_gifSrc && classes.borderIndicatorOnTop,
'raised-hand-border') } />
<div
className = { clsx(classes.borderIndicator,
_gifSrc && classes.borderIndicatorOnTop,
'active-speaker-indicator') } />
</span>
);
}
@ -1003,6 +1089,9 @@ function _mapStateToProps(state, ownProps): Object {
}
}
const { gifUrl: gifSrc } = getGifForParticipant(state, id);
const mode = getGifDisplayMode(state);
return {
_audioTrack,
_currentLayout,
@ -1023,7 +1112,8 @@ function _mapStateToProps(state, ownProps): Object {
_raisedHand: hasRaisedHand(participant),
_videoObjectPosition: getVideoObjectPosition(state, participant?.id),
_videoTrack,
...size
...size,
_gifSrc: mode === 'chat' ? null : gifSrc
};
}

55
react/features/gifs/actionTypes.js Normal file
View File

@ -0,0 +1,55 @@
/**
* Adds a gif for a given participant.
* {{
* type: ADD_GIF_FOR_PARTICIPANT,
* participantId: string,
* gifUrl: string,
* timeoutID: number
* }}
*/
export const ADD_GIF_FOR_PARTICIPANT = 'ADD_GIF_FOR_PARTICIPANT';
/**
* Set timeout to hide a gif for a given participant.
* {{
* type: HIDE_GIF_FOR_PARTICIPANT,
* participantId: string
* }}
*/
export const HIDE_GIF_FOR_PARTICIPANT = 'HIDE_GIF_FOR_PARTICIPANT';
/**
* Removes a gif for a given participant.
* {{
* type: REMOVE_GIF_FOR_PARTICIPANT,
* participantId: string
* }}
*/
export const REMOVE_GIF_FOR_PARTICIPANT = 'REMOVE_GIF_FOR_PARTICIPANT';
/**
* Set gif menu drawer visibility.
* {{
* type: SET_GIF_DRAWER_VISIBILITY,
* visible: boolean
* }}
*/
export const SET_GIF_DRAWER_VISIBILITY = 'SET_GIF_DRAWER_VISIBILITY';
/**
* Set gif menu visibility.
* {{
* type: SET_GIF_MENU_VISIBILITY,
* visible: boolean
* }}
*/
export const SET_GIF_MENU_VISIBILITY = 'SET_GIF_MENU_VISIBILITY';
/**
* Keep showing a gif for a given participant.
* {{
* type: SHOW_GIF_FOR_PARTICIPANT,
* participantId: string
* }}
*/
export const SHOW_GIF_FOR_PARTICIPANT = 'SHOW_GIF_FOR_PARTICIPANT';

88
react/features/gifs/actions.js Normal file
View File

@ -0,0 +1,88 @@
import {
ADD_GIF_FOR_PARTICIPANT,
HIDE_GIF_FOR_PARTICIPANT,
REMOVE_GIF_FOR_PARTICIPANT,
SET_GIF_DRAWER_VISIBILITY,
SET_GIF_MENU_VISIBILITY,
SHOW_GIF_FOR_PARTICIPANT
} from './actionTypes';
/**
* Adds a GIF for a given participant.
*
* @param {string} participantId - The id of the participant that sent the GIF.
* @param {string} gifUrl - The URL of the GIF.
* @returns {Object}
*/
export function addGif(participantId, gifUrl) {
return {
type: ADD_GIF_FOR_PARTICIPANT,
participantId,
gifUrl
};
}
/**
* Removes the GIF of the given participant.
*
* @param {string} participantId - The Id of the participant for whom to remove the GIF.
* @returns {Object}
*/
export function removeGif(participantId) {
return {
type: REMOVE_GIF_FOR_PARTICIPANT,
participantId
};
}
/**
* Keep showing the GIF of the given participant.
*
* @param {string} participantId - The Id of the participant for whom to show the GIF.
* @returns {Object}
*/
export function showGif(participantId) {
return {
type: SHOW_GIF_FOR_PARTICIPANT,
participantId
};
}
/**
* Set timeout to hide the GIF of the given participant.
*
* @param {string} participantId - The Id of the participant for whom to show the GIF.
* @returns {Object}
*/
export function hideGif(participantId) {
return {
type: HIDE_GIF_FOR_PARTICIPANT,
participantId
};
}
/**
* Set visibility of the GIF drawer.
*
* @param {boolean} visible - Whether or not it should be visible.
* @returns {Object}
*/
export function setGifDrawerVisibility(visible) {
return {
type: SET_GIF_DRAWER_VISIBILITY,
visible
};
}
/**
* Set visibility of the GIF menu.
*
* @param {boolean} visible - Whether or not it should be visible.
* @returns {Object}
*/
export function setGifMenuVisibility(visible) {
return {
type: SET_GIF_MENU_VISIBILITY,
visible
};
}

1
react/features/gifs/components/_.web.js Normal file
View File

@ -0,0 +1 @@
export * from './web';

1
react/features/gifs/components/index.js Normal file
View File

@ -0,0 +1 @@
export * from './_';

223
react/features/gifs/components/web/GifsMenu.js Normal file
View File

@ -0,0 +1,223 @@
// @flow
import { GiphyFetch } from '@giphy/js-fetch-api';
import { Grid } from '@giphy/react-components';
import { makeStyles } from '@material-ui/core';
import clsx from 'clsx';
import React, { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { batch, useDispatch, useSelector } from 'react-redux';
import { createGifSentEvent, sendAnalytics } from '../../../analytics';
import InputField from '../../../base/premeeting/components/web/InputField';
import BaseTheme from '../../../base/ui/components/BaseTheme';
import { sendMessage } from '../../../chat/actions.any';
import { SCROLL_SIZE } from '../../../filmstrip';
import { toggleReactionsMenuVisibility } from '../../../reactions/actions.web';
import { setOverflowMenuVisible } from '../../../toolbox/actions.web';
import { Drawer, JitsiPortal } from '../../../toolbox/components/web';
import { showOverflowDrawer } from '../../../toolbox/functions.web';
import { setGifDrawerVisibility } from '../../actions';
import { formatGifUrlMessage, getGifAPIKey, getGifUrl } from '../../functions';
const OVERFLOW_DRAWER_PADDING = BaseTheme.spacing(3);
const useStyles = makeStyles(theme => {
return {
gifsMenu: {
width: '100%',
marginBottom: `${theme.spacing(2)}px`,
display: 'flex',
flexDirection: 'column',
'& div:focus': {
border: '1px solid red !important',
boxSizing: 'border-box'
}
},
searchField: {
backgroundColor: theme.palette.field01,
borderRadius: `${theme.shape.borderRadius}px`,
border: 'none',
outline: 0,
...theme.typography.bodyShortRegular,
lineHeight: `${theme.typography.bodyShortRegular.lineHeight}px`,
color: theme.palette.text01,
padding: `${theme.spacing(2)}px ${theme.spacing(3)}px`,
width: '100%',
marginBottom: `${theme.spacing(3)}px`
},
gifContainer: {
height: '245px',
overflowY: 'auto'
},
logoContainer: {
width: `calc(100% - ${SCROLL_SIZE}px)`,
backgroundColor: '#121119',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: '#fff',
marginTop: `${theme.spacing(1)}px`
},
overflowMenu: {
padding: `${theme.spacing(3)}px`,
width: '100%',
boxSizing: 'border-box'
},
gifContainerOverflow: {
flexGrow: 1
},
drawer: {
display: 'flex',
height: '100%'
}
};
});
/**
* Gifs menu.
*
* @returns {ReactElement}
*/
function GifsMenu() {
const API_KEY = useSelector(getGifAPIKey);
const giphyFetch = new GiphyFetch(API_KEY);
const [ searchKey, setSearchKey ] = useState();
const styles = useStyles();
const dispatch = useDispatch();
const { t } = useTranslation();
const overflowDrawer = useSelector(showOverflowDrawer);
const { clientWidth } = useSelector(state => state['features/base/responsive-ui']);
const fetchGifs = useCallback(async (offset = 0) => {
const options = {
rating: 'pg-13',
limit: 20,
offset
};
if (!searchKey) {
return await giphyFetch.trending(options);
}
return await giphyFetch.search(searchKey, options);
}, [ searchKey ]);
const onDrawerClose = useCallback(() => {
dispatch(setGifDrawerVisibility(false));
dispatch(setOverflowMenuVisible(false));
});
const handleGifClick = useCallback((gif, e) => {
e?.stopPropagation();
const url = getGifUrl(gif);
sendAnalytics(createGifSentEvent());
batch(() => {
dispatch(sendMessage(formatGifUrlMessage(url), true));
dispatch(toggleReactionsMenuVisibility());
overflowDrawer && onDrawerClose();
});
}, [ dispatch, overflowDrawer ]);
const handleGifKeyPress = useCallback((gif, e) => {
if (e.nativeEvent.keyCode === 13) {
handleGifClick(gif, null);
}
}, [ handleGifClick ]);
const handleSearchKeyChange = useCallback(value => {
setSearchKey(value);
});
const handleKeyDown = useCallback(e => {
if (e.keyCode === 38) { // up arrow
e.preventDefault();
// if the first gif is focused move focus to the input
if (document.activeElement.previousElementSibling === null) {
document.querySelector('.gif-input').focus();
} else {
document.activeElement.previousElementSibling.focus();
}
} else if (e.keyCode === 40) { // down arrow
e.preventDefault();
// if the input is focused move focus to the first gif
if (document.activeElement.classList.contains('gif-input')) {
document.querySelector('.giphy-gif').focus();
} else {
document.activeElement.nextElementSibling.focus();
}
}
}, []);
useEffect(() => {
document.addEventListener('keydown', handleKeyDown);
return () => document.removeEventListener('keydown', handleKeyDown);
}, []);
// For some reason, the Grid component does not do an initial call on mobile.
// This fixes that.
useEffect(() => setSearchKey(''), []);
const gifMenu = (
<div
className = { clsx(styles.gifsMenu,
overflowDrawer && styles.overflowMenu
) }>
<InputField
autoFocus = { true }
className = { clsx(styles.searchField, 'gif-input') }
onChange = { handleSearchKeyChange }
placeHolder = { t('giphy.search') }
testId = 'gifSearch.key'
type = 'text' />
<div
className = { clsx(styles.gifContainer,
overflowDrawer && styles.gifContainerOverflow) }>
<Grid
columns = { 2 }
fetchGifs = { fetchGifs }
gutter = { 6 }
hideAttribution = { true }
key = { searchKey }
noLink = { true }
noResultsMessage = { t('giphy.noResults') }
onGifClick = { handleGifClick }
onGifKeyPress = { handleGifKeyPress }
width = { overflowDrawer
? clientWidth - (2 * OVERFLOW_DRAWER_PADDING) - SCROLL_SIZE
: 320
} />
</div>
<div className = { styles.logoContainer }>
<span>Powered by</span>
<img
alt = 'GIPHY Logo'
src = 'images/GIPHY_logo.png' />
</div>
</div>
);
return overflowDrawer ? (
<JitsiPortal>
<Drawer
className = { styles.drawer }
isOpen = { true }
onClose = { onDrawerClose }>
{gifMenu}
</Drawer>
</JitsiPortal>
) : gifMenu;
}
export default GifsMenu;

42
react/features/gifs/components/web/GifsMenuButton.js Normal file
View File

@ -0,0 +1,42 @@
import React, { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { useDispatch, useSelector } from 'react-redux';
import ReactionButton from '../../../reactions/components/web/ReactionButton';
import { showOverflowDrawer } from '../../../toolbox/functions.web';
import { setGifDrawerVisibility, setGifMenuVisibility } from '../../actions';
import { isGifsMenuOpen } from '../../functions';
const GifsMenuButton = () => {
const menuOpen = useSelector(isGifsMenuOpen);
const overflowDrawer = useSelector(showOverflowDrawer);
const { t } = useTranslation();
const dispatch = useDispatch();
const icon = (
<img
alt = 'GIPHY Logo'
height = { 24 }
src = 'images/GIPHY_icon.png' />
);
const handleClick = useCallback(() =>
dispatch(
overflowDrawer
? setGifDrawerVisibility(!menuOpen)
: setGifMenuVisibility(!menuOpen)
)
, [ menuOpen, overflowDrawer ]);
return (
<ReactionButton
accessibilityLabel = { t('toolbar.accessibilityLabel.giphy') }
icon = { icon }
key = 'gif'
onClick = { handleClick }
toggled = { true }
tooltip = { t('toolbar.accessibilityLabel.giphy') } />
);
};
export default GifsMenuButton;

4
react/features/gifs/components/web/index.js Normal file
View File

@ -0,0 +1,4 @@
// @flow
export { default as GifsMenuButton } from './GifsMenuButton';
export { default as GifsMenu } from './GifsMenu';

9
react/features/gifs/constants.js Normal file
View File

@ -0,0 +1,9 @@
/**
* The default time that GIFs will be displayed on the tile.
*/
export const GIF_DEFAULT_TIMEOUT = 5000;
/**
* The prefix for formatted GIF messages.
*/
export const GIF_PREFIX = 'gif[';

96
react/features/gifs/functions.js Normal file
View File

@ -0,0 +1,96 @@
import { showOverflowDrawer } from '../toolbox/functions.web';
import { GIF_PREFIX } from './constants';
/**
* Gets the URL of the GIF for the given participant or null if there's none.
*
* @param {Object} state - Redux state.
* @param {string} participantId - Id of the participant for which to remove the GIF.
* @returns {Object}
*/
export function getGifForParticipant(state, participantId) {
return state['features/gifs'].gifList.get(participantId) || {};
}
/**
* Whether or not the message is a GIF message.
*
* @param {string} message - Message to check.
* @returns {boolean}
*/
export function isGifMessage(message) {
return message.trim().startsWith(GIF_PREFIX);
}
/**
* Returns the visibility state of the gifs menu.
*
* @param {Object} state - The state of the application.
* @returns {boolean}
*/
export function isGifsMenuOpen(state) {
const overflowDrawer = showOverflowDrawer(state);
const { drawerVisible, menuOpen } = state['features/gifs'];
return overflowDrawer ? drawerVisible : menuOpen;
}
/**
* Returns the url of the gif selected in the gifs menu.
*
* @param {Object} gif - The gif data.
* @returns {boolean}
*/
export function getGifUrl(gif) {
const embedUrl = gif?.embed_url || '';
const idx = embedUrl.lastIndexOf('/');
const id = embedUrl.substr(idx + 1);
return `https://i.giphy.com/media/${id}/giphy.webp`;
}
/**
* Formats the gif message.
*
* @param {string} url - GIF url.
* @returns {string}
*/
export function formatGifUrlMessage(url) {
return `${GIF_PREFIX}${url}]`;
}
/**
* Get the Giphy API Key from config.
*
* @param {Object} state - Redux state.
* @returns {string}
*/
export function getGifAPIKey(state) {
return state['features/base/config']?.giphy?.sdkKey;
}
/**
* Returns whether or not the feature is enabled.
*
* @param {Object} state - Redux state.
* @returns {boolean}
*/
export function isGifEnabled(state) {
const { disableThirdPartyRequests } = state['features/base/config'];
const { giphy } = state['features/base/config'];
return !disableThirdPartyRequests && giphy?.enabled && Boolean(giphy?.sdkKey);
}
/**
* Get the GIF display mode.
*
* @param {Object} state - Redux state.
* @returns {string}
*/
export function getGifDisplayMode(state) {
const { giphy } = state['features/base/config'];
return giphy?.displayMode || 'all';
}

60
react/features/gifs/middleware.js Normal file
View File

@ -0,0 +1,60 @@
import { MiddlewareRegistry } from '../base/redux';
import { ADD_GIF_FOR_PARTICIPANT, HIDE_GIF_FOR_PARTICIPANT, SHOW_GIF_FOR_PARTICIPANT } from './actionTypes';
import { removeGif } from './actions';
import { GIF_DEFAULT_TIMEOUT } from './constants';
import { getGifForParticipant } from './functions';
/**
* Middleware which intercepts Gifs actions to handle changes to the
* visibility timeout of the Gifs.
*
* @param {Store} store - The redux store.
* @returns {Function}
*/
MiddlewareRegistry.register(store => next => action => {
const { dispatch, getState } = store;
const state = getState();
switch (action.type) {
case ADD_GIF_FOR_PARTICIPANT: {
const id = action.participantId;
const { giphy } = state['features/base/config'];
_clearGifTimeout(state, id);
const timeoutID = setTimeout(() => dispatch(removeGif(id)), giphy?.tileTime || GIF_DEFAULT_TIMEOUT);
action.timeoutID = timeoutID;
break;
}
case SHOW_GIF_FOR_PARTICIPANT: {
const id = action.participantId;
_clearGifTimeout(state, id);
break;
}
case HIDE_GIF_FOR_PARTICIPANT: {
const { giphy } = state['features/base/config'];
const id = action.participantId;
const timeoutID = setTimeout(() => dispatch(removeGif(id)), giphy?.tileTime || GIF_DEFAULT_TIMEOUT);
action.timeoutID = timeoutID;
break;
}
}
return next(action);
});
/**
* Clears GIF timeout.
*
* @param {Object} state - Redux state.
* @param {string} id - Id of the participant for whom to clear the timeout.
* @returns {void}
*/
function _clearGifTimeout(state, id) {
const gif = getGifForParticipant(state, id);
clearTimeout(gif?.timeoutID);
}

73
react/features/gifs/reducer.js Normal file
View File

@ -0,0 +1,73 @@
import { ReducerRegistry } from '../base/redux';
import {
ADD_GIF_FOR_PARTICIPANT,
HIDE_GIF_FOR_PARTICIPANT,
REMOVE_GIF_FOR_PARTICIPANT,
SET_GIF_DRAWER_VISIBILITY,
SET_GIF_MENU_VISIBILITY
} from './actionTypes';
const initialState = {
drawerVisible: false,
gifList: new Map(),
menuOpen: false
};
ReducerRegistry.register(
'features/gifs',
(state = initialState, action) => {
switch (action.type) {
case ADD_GIF_FOR_PARTICIPANT: {
const newList = state.gifList;
newList.set(action.participantId, {
gifUrl: action.gifUrl,
timeoutID: action.timeoutID
});
return {
...state,
gifList: newList
};
}
case REMOVE_GIF_FOR_PARTICIPANT: {
const newList = state.gifList;
newList.delete(action.participantId);
return {
...state,
gifList: newList
};
}
case HIDE_GIF_FOR_PARTICIPANT: {
const newList = state.gifList;
const gif = state.gifList.get(action.participantId);
newList.set(action.participantId, {
gifUrl: gif.gifUrl,
timeoutID: action.timeoutID
});
return {
...state,
gifList: newList
};
}
case SET_GIF_DRAWER_VISIBILITY:
return {
...state,
drawerVisible: action.visible
};
case SET_GIF_MENU_VISIBILITY:
return {
...state,
menuOpen: action.visible
};
}
return state;
});

23
react/features/reactions/components/web/ReactionsMenu.js
View File

@ -3,6 +3,7 @@
/* eslint-disable react/jsx-no-bind */
import { withStyles } from '@material-ui/styles';
import clsx from 'clsx';
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
@ -15,6 +16,8 @@ import { isMobileBrowser } from '../../../base/environment/utils';
import { translate } from '../../../base/i18n';
import { getLocalParticipant, hasRaisedHand, raiseHand } from '../../../base/participants';
import { connect } from '../../../base/redux';
import { GifsMenu, GifsMenuButton } from '../../../gifs/components';
import { isGifEnabled, isGifsMenuOpen } from '../../../gifs/functions';
import { dockToolbox } from '../../../toolbox/actions.web';
import { addReactionToBuffer } from '../../actions.any';
import { toggleReactionsMenuVisibility } from '../../actions.web';
@ -29,6 +32,16 @@ type Props = {
*/
_dockToolbox: Function,
/**
* Whether or not the GIF feature is enabled.
*/
_isGifEnabled: boolean,
/**
* Whether or not the GIF menu is visible.
*/
_isGifMenuVisible: boolean,
/**
* Whether or not it's a mobile browser.
*/
@ -193,12 +206,16 @@ class ReactionsMenu extends Component<Props> {
* @inheritdoc
*/
render() {
const { _raisedHand, t, overflowMenu, _isMobile, classes } = this.props;
const { _raisedHand, t, overflowMenu, _isMobile, classes, _isGifMenuVisible, _isGifEnabled } = this.props;
return (
<div className = { `reactions-menu ${overflowMenu ? `overflow ${classes.overflow}` : ''}` }>
<div
className = { clsx('reactions-menu', _isGifEnabled && 'with-gif',
overflowMenu && `overflow ${classes.overflow}`) }>
{_isGifEnabled && _isGifMenuVisible && <GifsMenu />}
<div className = 'reactions-row'>
{ this._getReactionButtons() }
{_isGifEnabled && <GifsMenuButton />}
</div>
{_isMobile && (
<div className = 'raise-hand-row'>
@ -231,6 +248,8 @@ function mapStateToProps(state) {
return {
_localParticipantID: localParticipant.id,
_isMobile: isMobileBrowser(),
_isGifEnabled: isGifEnabled(state),
_isGifMenuVisible: isGifsMenuOpen(state),
_raisedHand: hasRaisedHand(localParticipant)
};
}

8
react/features/toolbox/components/web/Drawer.js
View File

@ -8,6 +8,11 @@ import { DRAWER_MAX_HEIGHT } from '../../constants';
type Props = {
/**
* Class name for custom styles.
*/
className: string,
/**
* The component(s) to be displayed within the drawer menu.
*/
@ -40,6 +45,7 @@ const useStyles = makeStyles(theme => {
*/
function Drawer({
children,
className = '',
isOpen,
onClose
}: Props) {
@ -72,7 +78,7 @@ function Drawer({
className = 'drawer-menu-container'
onClick = { handleOutsideClick }>
<div
className = { `drawer-menu ${styles.drawer}` }
className = { `drawer-menu ${styles.drawer} ${className}` }
onClick = { handleInsideClick }>
{children}
</div>

28
react/features/toolbox/components/web/Toolbox.js
View File

@ -3,6 +3,7 @@
import { withStyles } from '@material-ui/core/styles';
import clsx from 'clsx';
import React, { Component, Fragment } from 'react';
import { batch } from 'react-redux';
import keyboardShortcut from '../../../../../modules/keyboardshortcut/keyboardshortcut';
import {
@ -30,6 +31,8 @@ import { ChatButton } from '../../../chat/components';
import { EmbedMeetingButton } from '../../../embed-meeting';
import { SharedDocumentButton } from '../../../etherpad';
import { FeedbackButton } from '../../../feedback';
import { setGifMenuVisibility } from '../../../gifs/actions';
import { isGifEnabled } from '../../../gifs/functions';
import { InviteButton } from '../../../invite/components/add-people-dialog';
import { isVpaasMeeting } from '../../../jaas/functions';
import { KeyboardShortcutsButton } from '../../../keyboard-shortcuts';
@ -41,6 +44,7 @@ import {
import { ParticipantsPaneButton } from '../../../participants-pane/components/web';
import { getParticipantsPaneOpen } from '../../../participants-pane/functions';
import { addReactionToBuffer } from '../../../reactions/actions.any';
import { toggleReactionsMenuVisibility } from '../../../reactions/actions.web';
import { ReactionsMenuButton } from '../../../reactions/components';
import { REACTIONS, REACTIONS_MENU_HEIGHT } from '../../../reactions/constants';
import { isReactionsEnabled } from '../../../reactions/functions.any';
@ -159,6 +163,11 @@ type Props = {
*/
_fullScreen: boolean,
/**
* Whether or not the GIFs feature is enabled.
*/
_gifsEnabled: boolean,
/**
* Whether the app has Salesforce integration.
*/
@ -334,7 +343,7 @@ class Toolbox extends Component<Props> {
* @returns {void}
*/
componentDidMount() {
const { _toolbarButtons, t, dispatch, _reactionsEnabled } = this.props;
const { _toolbarButtons, t, dispatch, _reactionsEnabled, _gifsEnabled } = this.props;
const KEYBOARD_SHORTCUTS = [
isToolbarButtonEnabled('videoquality', _toolbarButtons) && {
character: 'A',
@ -408,6 +417,22 @@ class Toolbox extends Component<Props> {
shortcut.helpDescription,
shortcut.altKey);
});
if (_gifsEnabled) {
const onGifShortcut = () => {
batch(() => {
dispatch(toggleReactionsMenuVisibility());
dispatch(setGifMenuVisibility(true));
});
};
APP.keyboardshortcut.registerShortcut(
'G',
null,
onGifShortcut,
t('keyboardShortcuts.giphyMenu')
);
}
}
}
@ -1410,6 +1435,7 @@ function _mapStateToProps(state, ownProps) {
_disabled: Boolean(iAmRecorder || iAmSipGateway),
_feedbackConfigured: Boolean(callStatsID),
_fullScreen: fullScreen,
_gifsEnabled: isGifEnabled(state),
_isProfileDisabled: Boolean(disableProfile),
_isIosMobile: isIosMobileBrowser(),
_isMobile: isMobileBrowser(),