Skip to content

Commit

Permalink
feat(VideoControls): split into smaller components, update layout, lo…
Browse files Browse the repository at this point in the history
…gic and styles
  • Loading branch information
dariaoldenburg committed Jan 7, 2025
1 parent 06adcc8 commit 1b684dc
Show file tree
Hide file tree
Showing 7 changed files with 400 additions and 142 deletions.
9 changes: 9 additions & 0 deletions src/i18n/en-US.json
Original file line number Diff line number Diff line change
Expand Up @@ -331,6 +331,7 @@
"callReactionButtonsAriaLabel": "Emoji selection bar",
"callReactions": "Reactions",
"callReactionsAriaLabel": "Emoji {{emoji}} from {{from}}",
"callMenuMoreInteractions": "More settings",
"callStateCbr": "Constant Bit Rate",
"callStateConnecting": "Connecting…",
"callStateIncoming": "Calling…",
Expand Down Expand Up @@ -1582,6 +1583,14 @@
"verify.headline": "You’ve got mail",
"verify.resendCode": "Resend code",
"verify.subhead": "Enter the verification code we sent to{newline}{email}",
"videoCallMenuMoreAudioSettings": "Audio Settings",
"videoCallMenuMoreVideoSettings": "Video Settings",
"videoCallMenuMoreChangeView": "Change view",
"videoCallMenuMoreRaiseHand": "Raise hand",
"videoCallMenuMoreAddReaction": "Add reaction",
"videoCallMenuMoreCloseReactions": "Close reactions",
"videoCallMenuMoreSeeParticipants": "See participants",
"videoCallMenuMoreHideParticipants": "Hide participants",
"videoCallOverlayCamera": "Camera",
"videoCallOverlayChangeViewMode": "Change view mode",
"videoCallOverlayCloseFullScreen": "Go back to minimized view",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
/*
* Wire
* Copyright (C) 2020 Wire Swiss GmbH
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see http://www.gnu.org/licenses/.
*
*/

import {CSSObject} from '@emotion/react';

import {media} from '@wireapp/react-ui-kit';

export const wrapperStyles: CSSObject = {
position: 'absolute',
bottom: '130%',
left: '50%',
display: 'grid',
padding: '0.4rem',
borderRadius: '1rem',
backgroundColor: 'var(--app-bg-secondary)',
boxShadow: '0px 7px 15px 0 #0000004d',
gap: '0.5rem',
gridTemplateColumns: 'repeat(3, 1fr)',
transform: 'translateX(-50%)',

[media.tablet]: {
transform: 'none',
left: 'auto',
right: 0,
},

'&::after': {
position: 'absolute',
bottom: '-0.5rem',
left: '50%',
width: 0,
height: 0,
borderTop: '0.5rem solid var(--app-bg-secondary)',
borderRight: '0.5rem solid transparent',
borderLeft: '0.5rem solid transparent',
content: '""',
transform: 'translateX(-50%)',

[media.tablet]: {
transform: 'none',
left: 'auto',
right: '1.5rem',
},
},
};

export const buttonStyles: CSSObject = {
backgroundColor: 'transparent',
border: 0,
padding: '0.5rem',
borderRadius: '1rem',
fontSize: '1.5rem',

'&:disabled': {
cursor: 'not-allowed',
opacity: 0.5,
},

'&:hover': {
backgroundColor: 'var(--inactive-call-button-hover-bg)',
},
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
/*
* Wire
* Copyright (C) 2021 Wire Swiss GmbH
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see http://www.gnu.org/licenses/.
*
*/

import React, {useState} from 'react';

import {CallingRepository} from 'src/script/calling/CallingRepository';
import {t} from 'Util/LocalizerUtil';

import {buttonStyles, wrapperStyles} from './EmojisBar.styles';

const EMOJIS_LIST = ['👍', '🎉', '❤️', '😂', '😮', '👏', '🤔', '😢', '👎'];

export interface EmojisBarProps {
onEmojiClick: (emoji: string) => void;
}

export const EmojisBar: React.FC<EmojisBarProps> = ({onEmojiClick}) => {
const [disabledEmojis, setDisabledEmojis] = useState<string[]>([]);

const handleEmojiClick = (selectedEmoji: string) => {
setDisabledEmojis(prev => [...prev, selectedEmoji]);

onEmojiClick(selectedEmoji);

setTimeout(() => {
setDisabledEmojis(prev => [...prev].filter(emoji => emoji !== selectedEmoji));
}, CallingRepository.EMOJI_TIME_OUT_DURATION);
};

return (
<div
role="toolbar"
data-uie-name="video-controls-emojis-bar"
aria-label={t('callReactionButtonsAriaLabel')}
css={wrapperStyles}
>
{EMOJIS_LIST.map(emoji => {
const isDisabled = disabledEmojis.includes(emoji);
return (
<button
aria-label={t('callReactionButtonAriaLabel', {emoji})}
data-uie-name="video-controls-emoji"
data-uie-value={emoji}
key={emoji}
disabled={isDisabled}
onClick={() => handleEmojiClick(emoji)}
css={buttonStyles}
>
{emoji}
</button>
);
})}
</div>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -19,36 +19,39 @@

import {css, CSSObject} from '@emotion/react';

import {media} from '@wireapp/react-ui-kit';

export const videoControlsWrapperStyles: CSSObject = {
position: 'relative',
display: 'flex',
alignItems: 'center',
padding: '8px 16px',
padding: '4px 16px 8px',
margin: 0,
gap: '8px',

'@media (min-width: 640px)': {
[media.tabletUp]: {
gap: '16px',
},
};

export const minimizeVideoControlStyles: CSSObject = {
'@media (min-width: 640px)': {
[media.tabletUp]: {
marginRight: 'auto',
},
};

export const shareScreenVideoControlStyles: CSSObject = {
'@media (max-width: 639px)': {
[media.mobile]: {
marginLeft: 'auto',
marginRight: 'auto',
},
};

export const hangUpVideoControlStyles: CSSObject = {
'@media (max-width: 639px)': {
[media.mobile]: {
order: 2,
},
'@media (min-width: 640px)': {
[media.tabletUp]: {
marginRight: 'auto',
},
};
Expand Down
Loading

0 comments on commit 1b684dc

Please sign in to comment.