Skip to content

Commit

Permalink
Close emoji picker and bar when a reaction is chosen (#673)
Browse files Browse the repository at this point in the history
  • Loading branch information
@streamer45
streamer45 committed Apr 3, 2024
1 parent 79a89ed commit 8832b2d
Show file tree
Hide file tree
Showing 2 changed files with 174 additions and 23 deletions.
133 changes: 124 additions & 9 deletions e2e/tests/popout.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,6 +240,33 @@ test.describe('popout window', () => {
await expect(page.locator('#calls-widget')).toBeHidden();
});

test('/call leave slash command', async ({page, context}) => {
const devPage = new PlaywrightDevPage(page);
await devPage.goto();
await devPage.startCall();

const [popOut, _] = await Promise.all([
context.waitForEvent('page'),
page.click('#calls-widget-expand-button'),
]);
await expect(popOut.locator('#calls-expanded-view')).toBeVisible();

await popOut.click('#calls-popout-chat-button');

await expect(popOut.locator('#sidebar-right [data-testid=call-thread]')).toBeVisible();

await popOut.locator('#reply_textbox').fill('/call leave ');
await popOut.getByTestId('SendMessageButton').click();

// Verify we left the call.
await expect(page.locator('#calls-widget')).toBeHidden();
await expect(popOut.isClosed()).toEqual(true);
});
});

test.describe('popout window - reactions', () => {
test.use({storageState: userStorages[0]});

test('raising hand', async ({page, context}) => {
const devPage = new PlaywrightDevPage(page);
await devPage.goto();
Expand All @@ -260,7 +287,7 @@ test.describe('popout window', () => {
await expect(popOut.getByTestId('raise-hand-button')).toBeVisible();
});

test('/call leave slash command', async ({page, context}) => {
test('quick reaction', async ({page, context}) => {
const devPage = new PlaywrightDevPage(page);
await devPage.goto();
await devPage.startCall();
Expand All @@ -269,17 +296,105 @@ test.describe('popout window', () => {
context.waitForEvent('page'),
page.click('#calls-widget-expand-button'),
]);
await expect(popOut.locator('#calls-expanded-view')).toBeVisible();
await expect(popOut.locator('#calls-popout-emoji-picker-button')).toBeVisible();

await popOut.click('#calls-popout-chat-button');
// Open reaction bar
await popOut.locator('#calls-popout-emoji-picker-button').click();

await expect(popOut.locator('#sidebar-right [data-testid=call-thread]')).toBeVisible();
// Verify the reactions bar is visibile and the full reaction picker is not
await expect(popOut.locator('#calls-popout-emoji-bar')).toBeVisible();
await expect(popOut.locator('#calls-popout-emoji-picker')).toBeHidden();

await popOut.locator('#reply_textbox').fill('/call leave ');
await popOut.getByTestId('SendMessageButton').click();
// Quick react
await popOut.locator('span.emoticon').first().click();

// Verify we left the call.
await expect(page.locator('#calls-widget')).toBeHidden();
await expect(popOut.isClosed()).toEqual(true);
// Verify that reacting closes the bar
await expect(popOut.locator('#calls-popout-emoji-bar')).toBeHidden();
await expect(popOut.locator('#calls-popout-emoji-picker')).toBeHidden();

// Open reaction bar
await popOut.locator('#calls-popout-emoji-picker-button').click();

// Verify the reactions bar is visibile and the full reaction picker is not
await expect(popOut.locator('#calls-popout-emoji-bar')).toBeVisible();
await expect(popOut.locator('#calls-popout-emoji-picker')).toBeHidden();

// Press Escape
await popOut.keyboard.press('Escape');

// Verify that hitting Escape key closes it
await expect(popOut.locator('#calls-popout-emoji-bar')).toBeHidden();
await expect(popOut.locator('#calls-popout-emoji-picker')).toBeHidden();

// Open reaction bar
await popOut.locator('#calls-popout-emoji-picker-button').click();

// Verify the reactions bar is visibile and the full reaction picker is not
await expect(popOut.locator('#calls-popout-emoji-bar')).toBeVisible();
await expect(popOut.locator('#calls-popout-emoji-picker')).toBeHidden();

// Click outside
await popOut.locator('#calls-expanded-view').click({force: true, position: {x: 0, y: 0}});

// Verify that clicking outside closes it
await expect(popOut.locator('#calls-popout-emoji-bar')).toBeHidden();
await expect(popOut.locator('#calls-popout-emoji-picker')).toBeHidden();
});

test('reaction picker', async ({page, context}) => {
const devPage = new PlaywrightDevPage(page);
await devPage.goto();
await devPage.startCall();

const [popOut, _] = await Promise.all([
context.waitForEvent('page'),
page.click('#calls-widget-expand-button'),
]);
await expect(popOut.locator('#calls-popout-emoji-picker-button')).toBeVisible();

// Open reaction bar
await popOut.locator('#calls-popout-emoji-picker-button').click();
await expect(popOut.locator('#calls-popout-emoji-bar')).toBeVisible();

// Open reaction picker
await popOut.locator('i.icon-emoticon-plus-outline').click();
await expect(popOut.locator('#calls-popout-emoji-picker')).toBeVisible();

// Pick a reaction
await popOut.locator('button.epr-visible').first().click();

// Verify that reacting closes both the bar and picker
await expect(popOut.locator('#calls-popout-emoji-bar')).toBeHidden();
await expect(popOut.locator('#calls-popout-emoji-picker')).toBeHidden();

// Open reaction bar
await popOut.locator('#calls-popout-emoji-picker-button').click();
await expect(popOut.locator('#calls-popout-emoji-bar')).toBeVisible();

// Open reaction picker
await popOut.locator('i.icon-emoticon-plus-outline').click();
await expect(popOut.locator('#calls-popout-emoji-picker')).toBeVisible();

// Press Escape
await popOut.keyboard.press('Escape');

// Verify that hitting Escape key closes everything
await expect(popOut.locator('#calls-popout-emoji-bar')).toBeHidden();
await expect(popOut.locator('#calls-popout-emoji-picker')).toBeHidden();

// Open reaction bar
await popOut.locator('#calls-popout-emoji-picker-button').click();
await expect(popOut.locator('#calls-popout-emoji-bar')).toBeVisible();

// Open reaction picker
await popOut.locator('i.icon-emoticon-plus-outline').click();
await expect(popOut.locator('#calls-popout-emoji-picker')).toBeVisible();

// Click outside
await popOut.locator('#calls-expanded-view').click({force: true, position: {x: 0, y: 0}});

// Verify that clicking outside closes everything
await expect(popOut.locator('#calls-popout-emoji-bar')).toBeHidden();
await expect(popOut.locator('#calls-popout-emoji-picker')).toBeHidden();
});
});
64 changes: 50 additions & 14 deletions webapp/src/components/expanded_view/reaction_button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import EmojiPicker, {
SkinTonePickerLocation,
SuggestionMode,
} from 'emoji-picker-react';
import React, {forwardRef, useImperativeHandle, useState} from 'react';
import React, {forwardRef, useEffect, useImperativeHandle, useRef, useState} from 'react';
import {OverlayTrigger} from 'react-bootstrap';
import {useIntl} from 'react-intl';
import {Emoji} from 'src/components/emoji/emoji';
Expand Down Expand Up @@ -47,21 +47,40 @@ export const ReactionButton = forwardRef(({trackEvent, isHandRaised}: Props, ref
},
}));

const innerRef = useRef<HTMLDivElement>(null);

const closeOnBlur = (e: Event) => {
if (innerRef && innerRef.current && e.target && innerRef.current.contains(e.target as Node)) {
return;
}

// hide everything
setShowPicker(false);
setShowBar(false);
};

const closeOnEscape = (e: KeyboardEvent) => {
if (e.key === 'Escape') {
// hide everything
setShowPicker(false);
setShowBar(false);
}
};

useEffect(() => {
document.addEventListener('click', closeOnBlur, true);
document.addEventListener('keyup', closeOnEscape, true);
return () => {
document.removeEventListener('click', closeOnBlur, true);
document.removeEventListener('keyup', closeOnEscape, true);
};
}, []);

const callsClient = getCallsClient();
const addReactionText = showBar ?
formatMessage({defaultMessage: 'Close reactions'}) :
formatMessage({defaultMessage: 'Add reaction'});

const handleUserPicksEmoji = (ecd: EmojiClickData) => {
const emojiData: EmojiData = {
name: findEmojiName(ecd.names),
skin: ecd.activeSkinTone,
unified: ecd.unified.toLowerCase(),
literal: ecd.emoji || '',
};
callsClient?.sendUserReaction(emojiData);
};

const onRaiseHandToggle = () => {
if (isHandRaised) {
trackEvent(Telemetry.Event.LowerHand, Telemetry.Source.ExpandedView, {initiator: 'button'});
Expand Down Expand Up @@ -91,10 +110,27 @@ export const ReactionButton = forwardRef(({trackEvent, isHandRaised}: Props, ref
return !prev;
});

const handleUserPicksEmoji = (ecd: EmojiClickData) => {
const emojiData: EmojiData = {
name: findEmojiName(ecd.names),
skin: ecd.activeSkinTone,
unified: ecd.unified.toLowerCase(),
literal: ecd.emoji || '',
};
callsClient?.sendUserReaction(emojiData);

// hide everything
setShowPicker(false);
setShowBar(false);
};

return (
<div style={{position: 'relative'}}>
<div
style={{position: 'relative'}}
ref={innerRef}
>
{showPicker &&
<PickerContainer>
<PickerContainer id={'calls-popout-emoji-picker'}>
<EmojiPicker
emojiVersion={EMOJI_VERSION}
emojiStyle={EmojiStyle.APPLE}
Expand All @@ -109,7 +145,7 @@ export const ReactionButton = forwardRef(({trackEvent, isHandRaised}: Props, ref
</PickerContainer>
}
{showBar &&
<Bar>
<Bar id={'calls-popout-emoji-bar'}>
<OverlayTrigger
key={'calls-popout-raisehand-button'}
placement='top'
Expand Down

0 comments on commit 8832b2d

Please sign in to comment.