mirror of
https://gitcode.com/GitHub_Trending/ji/jitsi-meet.git
synced 2026-05-12 10:02:30 +00:00
1355876f83
Update Android build to support gif Use GIF format instead of animated webp Show GIFs in chat messages Display GIF over tile Add Giphy button in reactions menu Added Giphy dialog Fix isGifMessage to also allow upper case
110 lines
2.3 KiB
JavaScript
110 lines
2.3 KiB
JavaScript
// @flow
|
|
|
|
import React, { useCallback } from 'react';
|
|
import { Text, TouchableHighlight } from 'react-native';
|
|
import { useDispatch } from 'react-redux';
|
|
|
|
import { createReactionMenuEvent, sendAnalytics } from '../../../analytics';
|
|
import { translate } from '../../../base/i18n';
|
|
import type { StyleType } from '../../../base/styles';
|
|
import { addReactionToBuffer } from '../../actions.any';
|
|
import { REACTIONS } from '../../constants';
|
|
|
|
|
|
export type ReactionStyles = {
|
|
|
|
/**
|
|
* Style for the gif button.
|
|
*/
|
|
gifButton: StyleType,
|
|
|
|
/**
|
|
* Style for the button.
|
|
*/
|
|
style: StyleType,
|
|
|
|
/**
|
|
* Underlay color for the button.
|
|
*/
|
|
underlayColor: StyleType,
|
|
|
|
/**
|
|
* Style for the emoji text on the button.
|
|
*/
|
|
emoji: StyleType,
|
|
|
|
/**
|
|
* Style for the label text on the button.
|
|
*/
|
|
text?: StyleType,
|
|
|
|
/**
|
|
* Style for text container. Used on raise hand button.
|
|
*/
|
|
container?: StyleType
|
|
|
|
}
|
|
|
|
/**
|
|
* The type of the React {@code Component} props of {@link ReactionButton}.
|
|
*/
|
|
type Props = {
|
|
|
|
/**
|
|
* Component children.
|
|
*/
|
|
children?: ReactNode,
|
|
|
|
/**
|
|
* External click handler.
|
|
*/
|
|
onClick?: Function,
|
|
|
|
/**
|
|
* Collection of styles for the button.
|
|
*/
|
|
styles: ReactionStyles,
|
|
|
|
/**
|
|
* The reaction to be sent.
|
|
*/
|
|
reaction: string,
|
|
|
|
/**
|
|
* Invoked to obtain translated strings.
|
|
*/
|
|
t: Function
|
|
};
|
|
|
|
/**
|
|
* An implementation of a button to send a reaction.
|
|
*
|
|
* @returns {ReactElement}
|
|
*/
|
|
function ReactionButton({
|
|
children,
|
|
onClick,
|
|
styles,
|
|
reaction,
|
|
t
|
|
}: Props) {
|
|
const dispatch = useDispatch();
|
|
const _onClick = useCallback(() => {
|
|
dispatch(addReactionToBuffer(reaction));
|
|
sendAnalytics(createReactionMenuEvent(reaction));
|
|
}, [ reaction ]);
|
|
|
|
return (
|
|
<TouchableHighlight
|
|
accessibilityLabel = { t(`toolbar.accessibilityLabel.${reaction}`) }
|
|
accessibilityRole = 'button'
|
|
onPress = { onClick || _onClick }
|
|
style = { [ styles.style, children && styles?.gifButton ] }
|
|
underlayColor = { styles.underlayColor }>
|
|
{children ?? <Text style = { styles.emoji }>{REACTIONS[reaction].emoji}</Text>}
|
|
</TouchableHighlight>
|
|
);
|
|
}
|
|
|
|
export default translate(ReactionButton);
|