BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(modal): added blur backdrop filter when user join the room (#21029)

Browse Source
This commit is contained in:
Átila 2024-08-27 13:39:11 -03:00 committed by GitHub
parent 4e7868b31e
commit 226a5bda63
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 109 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
bigbluebutton-html5/imports/ui/components/audio/audio-modal/component.jsx
View File

@ -681,34 +681,36 @@ const AudioModal = ({
: null;
return (
<Styled.AudioModal
modalName="AUDIO"
onRequestClose={closeModal}
data-test="audioModal"
contentLabel={intl.formatMessage(intlMessages.ariaModalTitle)}
title={title}
{...{
setIsOpen,
isOpen,
priority,
}}
>
{isIE ? (
<Styled.BrowserWarning>
<FormattedMessage
id="app.audioModal.unsupportedBrowserLabel"
description="Warning when someone joins with a browser that isn't supported"
values={{
0: <a href="https://www.google.com/chrome/">Chrome</a>,
1: <a href="https://getfirefox.com">Firefox</a>,
}}
/>
</Styled.BrowserWarning>
) : null}
<Styled.Content>
{renderContent()}
</Styled.Content>
</Styled.AudioModal>
<Styled.Background isBlurred={Session.getItem('audioModalIsOpen')}>
<Styled.AudioModal
modalName="AUDIO"
onRequestClose={closeModal}
data-test="audioModal"
contentLabel={intl.formatMessage(intlMessages.ariaModalTitle)}
title={title}
{...{
setIsOpen,
isOpen,
priority,
}}
>
{isIE ? (
<Styled.BrowserWarning>
<FormattedMessage
id="app.audioModal.unsupportedBrowserLabel"
description="Warning when someone joins with a browser that isn't supported"
values={{
0: <a href="https://www.google.com/chrome/">Chrome</a>,
1: <a href="https://getfirefox.com">Firefox</a>,
}}
/>
</Styled.BrowserWarning>
) : null}
<Styled.Content>
{renderContent()}
</Styled.Content>
</Styled.AudioModal>
</Styled.Background>
);
};

14
bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.js
View File

@ -139,10 +139,24 @@ const Content = styled.div`
}
`;
const Background = styled.span`
${({ isBlurred }) => isBlurred
&& css`
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
backdrop-filter: blur(10px);
z-index: 998;
`}
`;
export default {
AudioOptions,
AudioModalButton,
AudioDial,
Background,
Connecting,
ConnectingAnimation,
AudioModal,

96
bigbluebutton-html5/imports/ui/components/video-preview/component.jsx
View File

@ -26,6 +26,8 @@ import Checkbox from '/imports/ui/components/common/checkbox/component'
import AppService from '/imports/ui/components/app/service';
import { CustomVirtualBackgroundsContext } from '/imports/ui/components/video-preview/virtual-background/context';
import VBGSelectorService from '/imports/ui/components/video-preview/virtual-background/service';
import Storage from '/imports/ui/services/storage/session';
import getFromUserSettings from '/imports/ui/services/users-settings';
const VIEW_STATES = {
finding: 'finding',
@ -1311,6 +1313,8 @@ class VideoPreview extends Component {
const WebcamBackgroundImg = `${BASE_NAME}/resources/images/webcam_background.svg`;
const darkThemeState = AppService.isDarkThemeEnabled();
const isBlurred = Storage.getItem('isFirstJoin') !== false
&& getFromUserSettings('bbb_auto_share_webcam', window.meetingClientSettings.public.kurento.autoShareWebcam);
if (isCamLocked === true) {
this.handleProceed();
@ -1336,58 +1340,60 @@ class VideoPreview extends Component {
&& isVirtualBackgroundSupported()
return (
<Styled.VideoPreviewModal
onRequestClose={this.handleProceed}
contentLabel={intl.formatMessage(intlMessages.webcamSettingsTitle)}
shouldShowCloseButton={allowCloseModal}
shouldCloseOnOverlayClick={allowCloseModal}
isPhone={deviceInfo.isPhone}
data-test="webcamSettingsModal"
{...{
isOpen,
priority,
}}
>
<Styled.Container>
<Styled.Header>
<Styled.WebcamTabs
onSelect={this.handleSelectTab}
selectedIndex={selectedTab}
>
<Styled.WebcamTabList>
<Styled.WebcamTabSelector selectedClassName="is-selected">
<Styled.IconSvg
src={WebcamSettingsImg}
darkThemeState={darkThemeState}
/>
<span
id="webcam-settings-title">{this.getModalTitle()}
</span>
</Styled.WebcamTabSelector>
{shouldShowVirtualBackgroundsTab && (
<>
<Styled.HeaderSeparator />
<Styled.Background isBlurred={isBlurred}>
<Styled.VideoPreviewModal
onRequestClose={this.handleProceed}
contentLabel={intl.formatMessage(intlMessages.webcamSettingsTitle)}
shouldShowCloseButton={allowCloseModal}
shouldCloseOnOverlayClick={allowCloseModal}
isPhone={deviceInfo.isPhone}
data-test="webcamSettingsModal"
{...{
isOpen,
priority,
}}
>
<Styled.Container>
<Styled.Header>
<Styled.WebcamTabs
onSelect={this.handleSelectTab}
selectedIndex={selectedTab}
>
<Styled.WebcamTabList>
<Styled.WebcamTabSelector selectedClassName="is-selected">
<Styled.IconSvg
src={WebcamBackgroundImg}
src={WebcamSettingsImg}
darkThemeState={darkThemeState}
/>
<span id="backgrounds-title">{intl.formatMessage(intlMessages.webcamVirtualBackgroundTitle)}</span>
<span
id="webcam-settings-title">{this.getModalTitle()}
</span>
</Styled.WebcamTabSelector>
</>
)}
</Styled.WebcamTabList>
</Styled.WebcamTabs>
</Styled.Header>
{shouldShowVirtualBackgroundsTab && (
<>
<Styled.HeaderSeparator />
<Styled.WebcamTabSelector selectedClassName="is-selected">
<Styled.IconSvg
src={WebcamBackgroundImg}
darkThemeState={darkThemeState}
/>
<span id="backgrounds-title">{intl.formatMessage(intlMessages.webcamVirtualBackgroundTitle)}</span>
</Styled.WebcamTabSelector>
</>
)}
</Styled.WebcamTabList>
</Styled.WebcamTabs>
</Styled.Header>
{deviceInfo.hasMediaDevices
? this.renderModalContent(selectedTab)
: this.supportWarning()
}
{deviceInfo.hasMediaDevices
? this.renderModalContent(selectedTab)
: this.supportWarning()
}
</Styled.Container>
</Styled.VideoPreviewModal>
</Styled.Container>
</Styled.VideoPreviewModal>
</Styled.Background>
);
}
}

14
bigbluebutton-html5/imports/ui/components/video-preview/styles.js
View File

@ -255,6 +255,19 @@ const ellipsis = keyframes`
}
`;
const Background = styled.span`
${({ isBlurred }) => isBlurred
&& css`
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
backdrop-filter: blur(10px);
z-index: 998;
`}
`;
const FetchingAnimation = styled.span`
margin: auto;
display: inline-block;
@ -413,6 +426,7 @@ export default {
BottomSeparator,
VideoCol,
BackgroundCol,
Background,
IconSvg,
SharingButton,
CancelButton,