Animated floating emojis

This commit is contained in:
Josh Perez 2022-05-04 13:43:22 -04:00 committed by GitHub
parent 7d8464757b
commit 36c5de4600
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 121 additions and 2 deletions

View file

@ -18,6 +18,7 @@ import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
import type { RenderEmojiPickerProps } from './conversation/ReactionPicker';
import type { ReplyStateType } from '../types/Stories';
import type { StoryViewType } from './StoryListItem';
import { AnimatedEmojiGalore } from './AnimatedEmojiGalore';
import { Avatar, AvatarSize } from './Avatar';
import { ConfirmationDialog } from './ConfirmationDialog';
import { ContextMenuPopper } from './ContextMenu';
@ -117,6 +118,7 @@ export const StoryViewer = ({
const [hasConfirmHideStory, setHasConfirmHideStory] = useState(false);
const [referenceElement, setReferenceElement] =
useState<HTMLButtonElement | null>(null);
const [reactionEmoji, setReactionEmoji] = useState<string | undefined>();
const visibleStory = stories[currentStoryIndex];
@ -263,7 +265,8 @@ export const StoryViewer = ({
hasConfirmHideStory ||
hasExpandedCaption ||
hasReplyModal ||
isShowingContextMenu;
isShowingContextMenu ||
Boolean(reactionEmoji);
useEffect(() => {
if (shouldPauseViewing) {
@ -392,7 +395,18 @@ export const StoryViewer = ({
moduleClassName="StoryViewer__story"
queueStoryDownload={queueStoryDownload}
storyId={messageId}
/>
>
{reactionEmoji && (
<div className="StoryViewer__animated-emojis">
<AnimatedEmojiGalore
emoji={reactionEmoji}
onAnimationEnd={() => {
setReactionEmoji(undefined);
}}
/>
</div>
)}
</StoryImage>
{hasExpandedCaption && (
<button
aria-label={i18n('close-popup')}
@ -610,6 +624,8 @@ export const StoryViewer = ({
onClose={() => setHasReplyModal(false)}
onReact={emoji => {
onReactToStory(emoji, visibleStory);
setHasReplyModal(false);
setReactionEmoji(emoji);
}}
onReply={(message, mentions, replyTimestamp) => {
if (!isGroupStory) {