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

Merge pull request #18289 from ramonlsouza/issue-15863

Browse Source 
Layout Settings Enhancements
This commit is contained in:
Ramón Souza 2023-07-10 16:53:16 -03:00 committed by GitHub
commit af593e41ee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 153 additions and 246 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx
View File

@ -101,10 +101,6 @@ const intlMessages = defineMessages({
id: 'app.actionsBar.actionsDropdown.selectRandUserDesc', id: 'app.actionsBar.actionsDropdown.selectRandUserDesc',
description: 'Description for select random user option', description: 'Description for select random user option',
}, },
propagateLayoutLabel: {
id: 'app.actionsBar.actionsDropdown.propagateLayoutLabel',
description: 'Label for propagate layout button',
},
layoutModal: { layoutModal: {
id: 'app.actionsBar.actionsDropdown.layoutModal', id: 'app.actionsBar.actionsDropdown.layoutModal',
description: 'Label for layouts selection button', description: 'Label for layouts selection button',
@ -274,19 +270,9 @@ class ActionsDropdown extends PureComponent {
}); });
} }
if (amIPresenter && showPushLayout && isLayoutsEnabled()) {
actions.push({
icon: 'send',
label: intl.formatMessage(intlMessages.propagateLayoutLabel),
key: 'propagate layout',
onClick: amIPresenter ? setMeetingLayout : setPushLayout,
dataTest: 'propagateLayout',
});
}
if (isLayoutsEnabled()) { if (isLayoutsEnabled()) {
actions.push({ actions.push({
icon: 'send', icon: 'manage_layout',
label: intl.formatMessage(intlMessages.layoutModal), label: intl.formatMessage(intlMessages.layoutModal),
key: 'layoutModal', key: 'layoutModal',
onClick: () => this.setLayoutModalIsOpen(true), onClick: () => this.setLayoutModalIsOpen(true),

57
bigbluebutton-html5/imports/ui/components/layout/modal/component.jsx
View File

@ -4,7 +4,6 @@ import { defineMessages, injectIntl } from 'react-intl';
import { LAYOUT_TYPE } from '/imports/ui/components/layout/enums'; import { LAYOUT_TYPE } from '/imports/ui/components/layout/enums';
import SettingsService from '/imports/ui/components/settings/service'; import SettingsService from '/imports/ui/components/settings/service';
import deviceInfo from '/imports/utils/deviceInfo'; import deviceInfo from '/imports/utils/deviceInfo';
import Toggle from '/imports/ui/components/common/switch/component';
import Button from '/imports/ui/components/common/button/component'; import Button from '/imports/ui/components/common/button/component';
import Styled from './styles'; import Styled from './styles';
@ -14,7 +13,6 @@ const LayoutModalComponent = (props) => {
setIsOpen, setIsOpen,
isModerator, isModerator,
isPresenter, isPresenter,
showToggleLabel,
application, application,
updateSettings, updateSettings,
onRequestClose, onRequestClose,
@ -22,8 +20,6 @@ const LayoutModalComponent = (props) => {
} = props; } = props;
const [selectedLayout, setSelectedLayout] = useState(application.selectedLayout); const [selectedLayout, setSelectedLayout] = useState(application.selectedLayout);
// eslint-disable-next-line react/prop-types
const [isKeepPushingLayout, setIsKeepPushingLayout] = useState(application.pushLayout);
const BASE_NAME = Meteor.settings.public.app.basename; const BASE_NAME = Meteor.settings.public.app.basename;
@ -35,13 +31,13 @@ const LayoutModalComponent = (props) => {
id: 'app.layout.modal.title', id: 'app.layout.modal.title',
description: 'Modal title', description: 'Modal title',
}, },
confirm: { update: {
id: 'app.layout.modal.confirm', id: 'app.layout.modal.update',
description: 'Modal confirm button', description: 'Modal confirm button',
}, },
cancel: { updateAll: {
id: 'app.layout.modal.cancel', id: 'app.layout.modal.updateAll',
description: 'Modal cancel button', description: 'Modal updateAll button',
}, },
layoutLabel: { layoutLabel: {
id: 'app.layout.modal.layoutLabel', id: 'app.layout.modal.layoutLabel',
@ -51,10 +47,6 @@ const LayoutModalComponent = (props) => {
id: 'app.layout.modal.layoutToastLabel', id: 'app.layout.modal.layoutToastLabel',
description: 'Layout toast label', description: 'Layout toast label',
}, },
keepPushingLayoutLabel: {
id: 'app.layout.modal.keepPushingLayoutLabel',
description: 'Keep push layout Label',
},
customLayout: { customLayout: {
id: 'app.layout.style.custom', id: 'app.layout.style.custom',
description: 'label for custom layout style', description: 'label for custom layout style',
@ -85,14 +77,10 @@ const LayoutModalComponent = (props) => {
setSelectedLayout(e); setSelectedLayout(e);
}; };
const handleKeepPushingLayout = () => { const handleUpdateLayout = (updateAll) => {
setIsKeepPushingLayout((newValue) => !newValue);
};
const handleCloseModal = () => {
const obj = { const obj = {
application: application:
{ ...application, selectedLayout, pushLayout: isKeepPushingLayout }, { ...application, selectedLayout, pushLayout: updateAll },
}; };
updateSettings(obj, intlMessages.layoutToastLabel); updateSettings(obj, intlMessages.layoutToastLabel);
@ -106,19 +94,12 @@ const LayoutModalComponent = (props) => {
if (isKeepPushingLayoutEnabled) { if (isKeepPushingLayoutEnabled) {
return ( return (
<Styled.PushContainer> <Styled.BottomButton
<Styled.LabelPushLayout> label={intl.formatMessage(intlMessages.updateAll)}
{intl.formatMessage(intlMessages.keepPushingLayoutLabel)} onClick={() => handleUpdateLayout(true)}
</Styled.LabelPushLayout> color="secondary"
<Toggle data-test="updateEveryoneLayoutBtn"
id="TogglePush"
icons={false}
defaultChecked={isKeepPushingLayout}
onChange={handleKeepPushingLayout}
ariaLabel="push"
showToggleLabel={showToggleLabel}
/> />
</Styled.PushContainer>
); );
} }
return null; return null;
@ -129,7 +110,6 @@ const LayoutModalComponent = (props) => {
{Object.values(LAYOUT_TYPE) {Object.values(LAYOUT_TYPE)
.map((layout) => ( .map((layout) => (
<Styled.ButtonLayoutContainer key={layout}> <Styled.ButtonLayoutContainer key={layout}>
<Styled.LabelLayoutNames aria-hidden>{intl.formatMessage(intlMessages[`${layout}Layout`])}</Styled.LabelLayoutNames>
<Styled.LayoutBtn <Styled.LayoutBtn
label="" label=""
customIcon={( customIcon={(
@ -143,6 +123,7 @@ const LayoutModalComponent = (props) => {
aria-describedby="layout-btn-desc" aria-describedby="layout-btn-desc"
data-test={`${layout}Layout`} data-test={`${layout}Layout`}
/> />
<Styled.LabelLayoutNames aria-hidden>{intl.formatMessage(intlMessages[`${layout}Layout`])}</Styled.LabelLayoutNames>
</Styled.ButtonLayoutContainer> </Styled.ButtonLayoutContainer>
))} ))}
</Styled.ButtonsContainer> </Styled.ButtonsContainer>
@ -165,19 +146,15 @@ const LayoutModalComponent = (props) => {
<Styled.Content> <Styled.Content>
<Styled.BodyContainer> <Styled.BodyContainer>
{renderLayoutButtons()} {renderLayoutButtons()}
{renderPushLayoutsOptions()}
</Styled.BodyContainer> </Styled.BodyContainer>
</Styled.Content> </Styled.Content>
<Styled.ButtonBottomContainer> <Styled.ButtonBottomContainer>
<Styled.BottomButton {renderPushLayoutsOptions()}
label={intl.formatMessage(intlMessages.cancel)}
onClick={() => setIsOpen(false)}
color="secondary"
/>
<Button <Button
color="primary" color="primary"
label={intl.formatMessage(intlMessages.confirm)} label={intl.formatMessage(intlMessages.update)}
onClick={handleCloseModal} onClick={() => handleUpdateLayout(false)}
data-test="updateLayoutBtn"
/> />
</Styled.ButtonBottomContainer> </Styled.ButtonBottomContainer>
<div style={{ display: 'none' }} id="layout-btn-desc">{intl.formatMessage(intlMessages.layoutBtnDesc)}</div> <div style={{ display: 'none' }} id="layout-btn-desc">{intl.formatMessage(intlMessages.layoutBtnDesc)}</div>

5
bigbluebutton-html5/imports/ui/components/layout/modal/container.jsx
View File

@ -9,10 +9,10 @@ import {
} from '/imports/ui/components/settings/service'; } from '/imports/ui/components/settings/service';
const LayoutModalContainer = (props) => { const LayoutModalContainer = (props) => {
const { intl, setIsOpen,onRequestClose, isOpen, isModerator, isPresenter, showToggleLabel, const { intl, setIsOpen,onRequestClose, isOpen, isModerator, isPresenter,
application, updateSettings, } = props; application, updateSettings, } = props;
return <LayoutModalComponent {...{ return <LayoutModalComponent {...{
intl, setIsOpen, isModerator, isPresenter, showToggleLabel, intl, setIsOpen, isModerator, isPresenter,
application, updateSettings, onRequestClose, isOpen, application, updateSettings, onRequestClose, isOpen,
}} />}; }} />};
@ -21,5 +21,4 @@ export default withTracker(({ amIModerator }) => ({
updateSettings, updateSettings,
isPresenter: isPresenter(), isPresenter: isPresenter(),
isModerator: amIModerator, isModerator: amIModerator,
showToggleLabel: false,
}))(LayoutModalContainer); }))(LayoutModalContainer);

40
bigbluebutton-html5/imports/ui/components/layout/modal/styles.js
View File

@ -14,16 +14,13 @@ const Content = styled.div`
flex-direction: column; flex-direction: column;
padding: .5rem 0 .5rem 0; padding: .5rem 0 .5rem 0;
overflow: hidden; overflow: hidden;
min-height: 30rem;
`; `;
const LayoutModal = styled(ModalSimple)` const LayoutModal = styled(ModalSimple)`
padding: 1rem; padding: 1rem;
min-height: 44rem;
@media ${smallOnly} { @media ${smallOnly} {
height: unset; height: unset;
min-height: 22.5rem;
} }
${({ isPhone }) => isPhone && ` ${({ isPhone }) => isPhone && `
@ -64,7 +61,7 @@ const LayoutBtn = styled(Button)`
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
padding: 0 !important; padding: 0 !important;
margin: 0.5rem 1rem 1rem 1rem; margin: 1rem 1rem 0.5rem 1rem;
width: fit-content; width: fit-content;
@media ${smallOnly} { @media ${smallOnly} {
@ -88,6 +85,41 @@ const LayoutBtn = styled(Button)`
border: ${colorPrimary} solid 4px; border: ${colorPrimary} solid 4px;
border-radius: 5px; border-radius: 5px;
} }
&:before {
font-family: 'bbb-icons';
color: ${colorWhite};
position: fixed;
content: "\\e946";
background-color: ${colorPrimary};
margin-left: 13.1rem;
padding: 0.3rem 0.2rem 0 0.6rem;
border-radius: 0 0 0 .3rem;
[dir="rtl"] & {
left: auto;
margin-right: 13.1rem;
margin-left: unset;
padding: 0.3rem 0.6rem 0 0.2rem;
border-radius: 0 0 .3rem 0;
}
width: 1.8rem;
height: 1.8rem;
@media ${smallOnly} {
width: 1rem;
height: 1rem;
font-size: 0.6rem;
margin-left: 4.5rem;
padding: 0.2rem 0.2rem 0 0.3rem;
[dir="rtl"] & {
margin-right: 4.5rem;
margin-left: unset;
padding: 0.2rem 0.3rem 0 0.2rem;
}
}
}
`}; `};
`; `;

18
bigbluebutton-html5/public/locales/en.json
View File

@ -484,7 +484,7 @@
"app.actionsBar.actionsDropdown.restorePresentationDesc": "Button to restore presentation after it has been minimized", "app.actionsBar.actionsDropdown.restorePresentationDesc": "Button to restore presentation after it has been minimized",
"app.actionsBar.actionsDropdown.minimizePresentationLabel": "Minimize presentation", "app.actionsBar.actionsDropdown.minimizePresentationLabel": "Minimize presentation",
"app.actionsBar.actionsDropdown.minimizePresentationDesc": "Button used to minimize presentation", "app.actionsBar.actionsDropdown.minimizePresentationDesc": "Button used to minimize presentation",
"app.actionsBar.actionsDropdown.layoutModal": "Layout Settings Modal", "app.actionsBar.actionsDropdown.layoutModal": "Manage layout",
"app.actionsBar.actionsDropdown.shareCameraAsContent": "Share camera as content", "app.actionsBar.actionsDropdown.shareCameraAsContent": "Share camera as content",
"app.actionsBar.actionsDropdown.unshareCameraAsContent": "Stop camera as content", "app.actionsBar.actionsDropdown.unshareCameraAsContent": "Stop camera as content",
"app.screenshare.screenShareLabel" : "Screen share", "app.screenshare.screenShareLabel" : "Screen share",
@ -632,7 +632,6 @@
"app.actionsBar.actionsDropdown.takePresenterDesc": "Assign yourself as the new presenter", "app.actionsBar.actionsDropdown.takePresenterDesc": "Assign yourself as the new presenter",
"app.actionsBar.actionsDropdown.selectRandUserLabel": "Select random user", "app.actionsBar.actionsDropdown.selectRandUserLabel": "Select random user",
"app.actionsBar.actionsDropdown.selectRandUserDesc": "Chooses a user from available viewers at random", "app.actionsBar.actionsDropdown.selectRandUserDesc": "Chooses a user from available viewers at random",
"app.actionsBar.actionsDropdown.propagateLayoutLabel": "Propagate layout",
"app.actionsBar.interactions.interactions": "Interactions", "app.actionsBar.interactions.interactions": "Interactions",
"app.actionsBar.interactions.raiseHand": "Raise your hand", "app.actionsBar.interactions.raiseHand": "Raise your hand",
"app.actionsBar.interactions.lowHand": "Lower your hand", "app.actionsBar.interactions.lowHand": "Lower your hand",
@ -1236,19 +1235,18 @@
"app.debugWindow.form.enableAutoarrangeLayoutDescription": "(it will be disabled if you drag or resize the webcams area)", "app.debugWindow.form.enableAutoarrangeLayoutDescription": "(it will be disabled if you drag or resize the webcams area)",
"app.debugWindow.form.chatLoggerLabel": "Test Chat Logger Levels", "app.debugWindow.form.chatLoggerLabel": "Test Chat Logger Levels",
"app.debugWindow.form.button.apply": "Apply", "app.debugWindow.form.button.apply": "Apply",
"app.layout.modal.title": "Layouts", "app.layout.modal.title": "Where do you want the presentation?",
"app.layout.modal.confirm": "Confirm", "app.layout.modal.update": "Update",
"app.layout.modal.cancel": "Cancel", "app.layout.modal.updateAll": "Update everyone",
"app.layout.modal.layoutLabel": "Select your layout", "app.layout.modal.layoutLabel": "Select your layout",
"app.layout.modal.keepPushingLayoutLabel": "Push layout to all",
"app.layout.modal.pushLayoutLabel": "Push to everyone", "app.layout.modal.pushLayoutLabel": "Push to everyone",
"app.layout.modal.layoutToastLabel": "Layout settings changed", "app.layout.modal.layoutToastLabel": "Layout settings changed",
"app.layout.modal.layoutSingular": "Layout", "app.layout.modal.layoutSingular": "Layout",
"app.layout.modal.layoutBtnDesc": "Sets layout as selected option", "app.layout.modal.layoutBtnDesc": "Sets layout as selected option",
"app.layout.style.custom": "Custom", "app.layout.style.custom": "Shared",
"app.layout.style.smart": "Smart layout", "app.layout.style.smart": "Dynamic",
"app.layout.style.presentationFocus": "Focus on presentation", "app.layout.style.presentationFocus": "Larger",
"app.layout.style.videoFocus": "Focus on video", "app.layout.style.videoFocus": "Smaller",
"app.layout.style.customPush": "Custom (push layout to all)", "app.layout.style.customPush": "Custom (push layout to all)",
"app.layout.style.smartPush": "Smart layout (push layout to all)", "app.layout.style.smartPush": "Smart layout (push layout to all)",
"app.layout.style.presentationFocusPush": "Focus on presentation (push layout to all)", "app.layout.style.presentationFocusPush": "Focus on presentation (push layout to all)",

71
bigbluebutton-html5/public/resources/images/layouts/custom.svg
View File

@ -1,53 +1,20 @@
<?xml version="1.0" encoding="utf-8"?> <svg width="221" height="125" viewBox="0 0 221 125" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="221" height="125" rx="4" fill="#4E5A66"/>
<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <path d="M0 4C0 1.79086 1.79086 0 4 0H44V125H4C1.79086 125 0 123.209 0 121V4Z" fill="#DCE4EC"/>
<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" <rect x="60" y="61" width="145" height="52" fill="#363A43"/>
viewBox="0 0 192 108" enable-background="new 0 0 192 108" xml:space="preserve"> <rect x="60" y="19" width="32" height="26" fill="white"/>
<g> <path fill-rule="evenodd" clip-rule="evenodd" d="M69.1194 38.9841C69.2646 37.9745 69.839 37.0718 70.7178 36.5043C71.9685 35.6956 73.5975 35.3355 76.0006 35.3355C78.3377 35.3355 80.0171 35.7081 81.288 36.5075C82.1656 37.0593 82.7389 37.9614 82.8823 38.9841H69.1194ZM81.8908 35.6635C80.4336 34.7462 78.5616 34.3193 76.0006 34.3193C73.3655 34.3193 71.5467 34.7348 70.1046 35.6668H70.104C68.7868 36.5178 68 37.9478 68 39.4925C68 39.7732 68.2424 40.0003 68.5415 40.0003H83.4585C83.7582 40.0003 84 39.7732 84 39.4925C84 37.9256 83.2115 36.4939 81.8908 35.6635Z" fill="#4E5A66"/>
<g> <path fill-rule="evenodd" clip-rule="evenodd" d="M73.9768 25.9943C74.5815 25.3637 75.3674 25.0162 76.1912 25.0162C77.0161 25.0162 77.8339 25.3806 78.4365 26.0171C79.0862 26.7041 79.416 27.6073 79.365 28.5599C79.2576 30.551 77.9527 31.9413 76.1912 31.9413C74.4047 31.9413 73.0999 30.5537 73.0174 28.5659C72.9778 27.6095 73.3282 26.6721 73.9768 25.9943ZM76.1912 32.9575C78.482 32.9575 80.2425 31.131 80.3786 28.6143C80.4442 27.3803 80.0163 26.2094 79.173 25.3187C78.3801 24.4807 77.2932 24 76.1912 24C75.0892 24 74.0425 24.4584 73.2452 25.2904C72.4057 26.167 71.9534 27.3765 72.0038 28.6077C72.1079 31.1283 73.8689 32.9575 76.1912 32.9575Z" fill="#4E5A66"/>
<g> <rect x="98" y="19" width="31" height="26" fill="white"/>
<rect fill="#06172A" width="192" height="108"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M106.119 38.9841C106.265 37.9745 106.839 37.0718 107.718 36.5043C108.968 35.6956 110.598 35.3355 113.001 35.3355C115.338 35.3355 117.017 35.7081 118.288 36.5075C119.166 37.0593 119.739 37.9614 119.882 38.9841H106.119ZM118.891 35.6635C117.434 34.7462 115.562 34.3193 113.001 34.3193C110.366 34.3193 108.547 34.7348 107.105 35.6668H107.104C105.787 36.5178 105 37.9478 105 39.4925C105 39.7732 105.242 40.0003 105.541 40.0003H120.459C120.758 40.0003 121 39.7732 121 39.4925C121 37.9256 120.212 36.4939 118.891 35.6635Z" fill="#4E5A66"/>
</g> <path fill-rule="evenodd" clip-rule="evenodd" d="M110.977 25.9943C111.582 25.3637 112.367 25.0162 113.191 25.0162C114.016 25.0162 114.834 25.3806 115.436 26.0171C116.086 26.7041 116.416 27.6073 116.365 28.5599C116.258 30.551 114.953 31.9413 113.191 31.9413C111.405 31.9413 110.1 30.5537 110.017 28.5659C109.978 27.6095 110.328 26.6721 110.977 25.9943ZM113.191 32.9575C115.482 32.9575 117.242 31.131 117.379 28.6143C117.444 27.3803 117.016 26.2094 116.173 25.3187C115.38 24.4807 114.293 24 113.191 24C112.089 24 111.042 24.4584 110.245 25.2904C109.406 26.167 108.953 27.3765 109.004 28.6077C109.108 31.1283 110.869 32.9575 113.191 32.9575Z" fill="#4E5A66"/>
<g> <rect x="136" y="19" width="31" height="26" fill="white"/>
<rect fill="#92BCEA" width="38.4" height="108"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M172.119 38.9841C172.265 37.9745 172.839 37.0718 173.718 36.5043C174.968 35.6956 176.598 35.3355 179.001 35.3355C181.338 35.3355 183.017 35.7081 184.288 36.5075C185.166 37.0593 185.739 37.9614 185.882 38.9841H172.119ZM184.891 35.6635C183.434 34.7462 181.562 34.3193 179.001 34.3193C176.366 34.3193 174.547 34.7348 173.105 35.6668H173.104C171.787 36.5178 171 37.9478 171 39.4925C171 39.7732 171.242 40.0003 171.541 40.0003H186.459C186.758 40.0003 187 39.7732 187 39.4925C187 37.9256 186.212 36.4939 184.891 35.6635Z" fill="#4E5A66"/>
</g> <path fill-rule="evenodd" clip-rule="evenodd" d="M176.977 25.9943C177.582 25.3637 178.367 25.0162 179.191 25.0162C180.016 25.0162 180.834 25.3806 181.436 26.0171C182.086 26.7041 182.416 27.6073 182.365 28.5599C182.258 30.551 180.953 31.9413 179.191 31.9413C177.405 31.9413 176.1 30.5537 176.017 28.5659C175.978 27.6095 176.328 26.6721 176.977 25.9943ZM179.191 32.9575C181.482 32.9575 183.242 31.131 183.379 28.6143C183.444 27.3803 183.016 26.2094 182.173 25.3187C181.38 24.4807 180.293 24 179.191 24C178.089 24 177.042 24.4584 176.245 25.2904C175.406 26.167 174.953 27.3765 175.004 28.6077C175.108 31.1283 176.869 32.9575 179.191 32.9575Z" fill="#4E5A66"/>
<g> <rect x="173" y="19" width="32" height="26" fill="white"/>
<g> <path fill-rule="evenodd" clip-rule="evenodd" d="M145.119 38.9841C145.265 37.9745 145.839 37.0718 146.718 36.5043C147.968 35.6956 149.598 35.3355 152.001 35.3355C154.338 35.3355 156.017 35.7081 157.288 36.5075C158.166 37.0593 158.739 37.9614 158.882 38.9841H145.119ZM157.891 35.6635C156.434 34.7462 154.562 34.3193 152.001 34.3193C149.366 34.3193 147.547 34.7348 146.105 35.6668H146.104C144.787 36.5178 144 37.9478 144 39.4925C144 39.7732 144.242 40.0003 144.541 40.0003H159.459C159.758 40.0003 160 39.7732 160 39.4925C160 37.9256 159.212 36.4939 157.891 35.6635Z" fill="#4E5A66"/>
<g> <path fill-rule="evenodd" clip-rule="evenodd" d="M149.977 25.9943C150.582 25.3637 151.367 25.0162 152.191 25.0162C153.016 25.0162 153.834 25.3806 154.436 26.0171C155.086 26.7041 155.416 27.6073 155.365 28.5599C155.258 30.551 153.953 31.9413 152.191 31.9413C150.405 31.9413 149.1 30.5537 149.017 28.5659C148.978 27.6095 149.328 26.6721 149.977 25.9943ZM152.191 32.9575C154.482 32.9575 156.242 31.131 156.379 28.6143C156.444 27.3803 156.016 26.2094 155.173 25.3187C154.38 24.4807 153.293 24 152.191 24C151.089 24 150.042 24.4584 149.245 25.2904C148.406 26.167 147.953 27.3765 148.004 28.6077C148.108 31.1283 149.869 32.9575 152.191 32.9575Z" fill="#4E5A66"/>
<rect x="52.8" y="7.92" fill="#0F70D7" width="34.56" height="25.92"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M182.119 38.9841C182.265 37.9745 182.839 37.0718 183.718 36.5043C184.968 35.6956 186.598 35.3355 189.001 35.3355C191.338 35.3355 193.017 35.7081 194.288 36.5075C195.166 37.0593 195.739 37.9614 195.882 38.9841H182.119ZM194.891 35.6635C193.434 34.7462 191.562 34.3193 189.001 34.3193C186.366 34.3193 184.547 34.7348 183.105 35.6668H183.104C181.787 36.5178 181 37.9478 181 39.4925C181 39.7732 181.242 40.0003 181.541 40.0003H196.459C196.758 40.0003 197 39.7732 197 39.4925C197 37.9256 196.212 36.4939 194.891 35.6635Z" fill="#4E5A66"/>
</g> <path fill-rule="evenodd" clip-rule="evenodd" d="M186.977 25.9943C187.582 25.3637 188.367 25.0162 189.191 25.0162C190.016 25.0162 190.834 25.3806 191.436 26.0171C192.086 26.7041 192.416 27.6073 192.365 28.5599C192.258 30.551 190.953 31.9413 189.191 31.9413C187.405 31.9413 186.1 30.5537 186.017 28.5659C185.978 27.6095 186.328 26.6721 186.977 25.9943ZM189.191 32.9575C191.482 32.9575 193.242 31.131 193.379 28.6143C193.444 27.3803 193.016 26.2094 192.173 25.3187C191.38 24.4807 190.293 24 189.191 24C188.089 24 187.042 24.4584 186.245 25.2904C185.406 26.167 184.953 27.3765 185.004 28.6077C185.108 31.1283 186.869 32.9575 189.191 32.9575Z" fill="#4E5A66"/>
<g> <path fill-rule="evenodd" clip-rule="evenodd" d="M124.334 80.4731H141.667V78.3338H124.334V80.4731ZM124.333 90.4579H141.666V81.8062H124.333V90.4579ZM142.333 77H123.667C123.299 77 123 77.2986 123 77.6669V80.4724V81.8062V91.1241C123 91.4931 123.299 91.791 123.667 91.791H131.257L126.742 95.8366C126.467 96.0828 126.445 96.5034 126.69 96.7779C126.937 97.0524 127.358 97.0745 127.632 96.8303L132.333 92.6172V96.3331C132.333 96.7014 132.632 97 133 97C133.368 97 133.667 96.7014 133.667 96.3331V92.6172L138.368 96.8303C138.496 96.9441 138.654 97 138.813 97C138.996 97 139.178 96.9255 139.31 96.7779C139.555 96.5034 139.533 96.0828 139.258 95.8366L134.743 91.791H142.333C142.701 91.791 143 91.4931 143 91.1241V81.8062V80.4724V77.6669C143 77.2986 142.701 77 142.333 77Z" fill="white"/>
<rect x="143.04" y="7.92" fill="#0F70D7" width="34.56" height="25.92"/>
</g>
<g>
<rect x="97.92" y="7.92" fill="#0F70D7" width="34.56" height="25.92"/>
</g>
</g>
<g>
<path fill="#FFFFFF" d="M71.43,20.82c1.64-0.56,2.82-2.11,2.82-3.94c0-2.3-1.86-4.16-4.16-4.16s-4.16,1.86-4.16,4.16
c0,1.83,1.18,3.38,2.82,3.94c-3.96,0.64-6.98,4.08-6.98,8.22h16.65C78.41,24.9,75.38,21.47,71.43,20.82z"/>
<path fill="#FFFFFF" d="M116.55,20.82c1.64-0.56,2.82-2.11,2.82-3.94c0-2.3-1.86-4.16-4.16-4.16c-2.3,0-4.16,1.86-4.16,4.16
c0,1.83,1.18,3.38,2.82,3.94c-3.96,0.64-6.98,4.08-6.98,8.22h16.65C123.53,24.9,120.5,21.47,116.55,20.82z"/>
<path fill="#FFFFFF" d="M161.67,20.82c1.64-0.56,2.82-2.11,2.82-3.94c0-2.3-1.86-4.16-4.16-4.16s-4.16,1.86-4.16,4.16
c0,1.83,1.18,3.38,2.82,3.94c-3.96,0.64-6.98,4.08-6.98,8.22h16.65C168.65,24.9,165.62,21.47,161.67,20.82z"/>
</g>
</g>
<g>
<rect x="52.8" y="47.28" fill="#FFFFFF" width="124.8" height="52.8"/>
<g>
<polygon fill="#008081" points="107.44,56.88 126.84,90.48 88.04,90.48 "/>
<polygon fill="#008081" points="130.72,70.32 142.36,90.48 119.08,90.48 "/>
<circle fill="#DF2721" cx="122.96" cy="64.47" r="4.49"/>
</g>
</g>
</g>
<g>
<g>
<line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="52.8" y1="40.56" x2="57.3" y2="40.56"/>
<line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="8.6132,3.8281" x1="61.13" y1="40.56" x2="171.19" y2="40.56"/>
<line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="173.1" y1="40.56" x2="177.6" y2="40.56"/>
</g>
</g>
</g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 7.3 KiB

44
bigbluebutton-html5/public/resources/images/layouts/presentationFocus.svg
View File

@ -1,28 +1,18 @@
<?xml version="1.0" encoding="utf-8"?> <svg width="221" height="125" viewBox="0 0 221 125" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <rect width="221" height="125" rx="4" fill="#4E5A66"/>
<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" <path d="M0 4C0 1.79086 1.79086 0 4 0H44V91H0V4Z" fill="#DCE4EC"/>
viewBox="0 0 192 108" enable-background="new 0 0 192 108" xml:space="preserve"> <rect x="60" y="12" width="145" height="101" fill="#363A43"/>
<g> <rect x="4" y="95" width="18" height="13" fill="white"/>
<g> <rect x="4" y="110" width="18" height="13" fill="white"/>
<rect fill="#06172A" width="192" height="108"/> <rect x="26" y="95" width="18" height="13" fill="white"/>
</g> <rect x="26" y="110" width="18" height="13" fill="white"/>
<g> <path fill-rule="evenodd" clip-rule="evenodd" d="M9.55969 105.492C9.63229 104.987 9.91952 104.535 10.3589 104.252C10.9842 103.847 11.7988 103.667 13.0003 103.667C14.1688 103.667 15.0085 103.854 15.644 104.253C16.0828 104.529 16.3694 104.98 16.4412 105.492H9.55969ZM15.9454 103.831C15.2168 103.373 14.2808 103.159 13.0003 103.159C11.6828 103.159 10.7734 103.367 10.0523 103.833H10.052C9.39338 104.258 9 104.973 9 105.746C9 105.886 9.12119 106 9.27074 106H16.7293C16.8791 106 17 105.886 17 105.746C17 104.962 16.6058 104.246 15.9454 103.831Z" fill="#4E5A66"/>
<rect fill="#92BCEA" width="38.4" height="76.8"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9884 98.9971C12.2908 98.6819 12.6837 98.5081 13.0956 98.5081C13.5081 98.5081 13.917 98.6903 14.2182 99.0086C14.5431 99.3521 14.708 99.8037 14.6825 100.28C14.6288 101.275 13.9764 101.971 13.0956 101.971C12.2024 101.971 11.5499 101.277 11.5087 100.283C11.4889 99.8048 11.6641 99.336 11.9884 98.9971ZM13.0956 102.479C14.241 102.479 15.1212 101.566 15.1893 100.307C15.2221 99.6902 15.0082 99.1047 14.5865 98.6593C14.19 98.2403 13.6466 98 13.0956 98C12.5446 98 12.0212 98.2292 11.6226 98.6452C11.2028 99.0835 10.9767 99.6883 11.0019 100.304C11.054 101.564 11.9345 102.479 13.0956 102.479Z" fill="#4E5A66"/>
</g> <path fill-rule="evenodd" clip-rule="evenodd" d="M9.55969 120.492C9.63229 119.987 9.91952 119.535 10.3589 119.252C10.9842 118.847 11.7988 118.667 13.0003 118.667C14.1688 118.667 15.0085 118.854 15.644 119.253C16.0828 119.529 16.3694 119.98 16.4412 120.492H9.55969ZM15.9454 118.831C15.2168 118.373 14.2808 118.159 13.0003 118.159C11.6828 118.159 10.7734 118.367 10.0523 118.833H10.052C9.39338 119.258 9 119.973 9 120.746C9 120.886 9.12119 121 9.27074 121H16.7293C16.8791 121 17 120.886 17 120.746C17 119.962 16.6058 119.246 15.9454 118.831Z" fill="#4E5A66"/>
<g> <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9884 113.997C12.2908 113.682 12.6837 113.508 13.0956 113.508C13.5081 113.508 13.917 113.69 14.2182 114.009C14.5431 114.352 14.708 114.804 14.6825 115.28C14.6288 116.275 13.9764 116.971 13.0956 116.971C12.2024 116.971 11.5499 116.277 11.5087 115.283C11.4889 114.805 11.6641 114.336 11.9884 113.997ZM13.0956 117.479C14.241 117.479 15.1212 116.566 15.1893 115.307C15.2221 114.69 15.0082 114.105 14.5865 113.659C14.19 113.24 13.6466 113 13.0956 113C12.5446 113 12.0212 113.229 11.6226 113.645C11.2028 114.084 10.9767 114.688 11.0019 115.304C11.054 116.564 11.9345 117.479 13.0956 117.479Z" fill="#4E5A66"/>
<g> <path fill-rule="evenodd" clip-rule="evenodd" d="M31.5597 105.492C31.6323 104.987 31.9195 104.535 32.3589 104.252C32.9842 103.847 33.7988 103.667 35.0003 103.667C36.1688 103.667 37.0085 103.854 37.644 104.253C38.0828 104.529 38.3694 104.98 38.4412 105.492H31.5597ZM37.9454 103.831C37.2168 103.373 36.2808 103.159 35.0003 103.159C33.6828 103.159 32.7734 103.367 32.0523 103.833H32.052C31.3934 104.258 31 104.973 31 105.746C31 105.886 31.1212 106 31.2707 106H38.7293C38.8791 106 39 105.886 39 105.746C39 104.962 38.6058 104.246 37.9454 103.831Z" fill="#4E5A66"/>
<rect x="3.84" y="80.64" fill="#0F70D7" width="30.72" height="23.52"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M33.9884 98.9971C34.2908 98.6819 34.6837 98.5081 35.0956 98.5081C35.5081 98.5081 35.917 98.6903 36.2182 99.0086C36.5431 99.3521 36.708 99.8037 36.6825 100.28C36.6288 101.275 35.9764 101.971 35.0956 101.971C34.2024 101.971 33.5499 101.277 33.5087 100.283C33.4889 99.8048 33.6641 99.336 33.9884 98.9971ZM35.0956 102.479C36.241 102.479 37.1212 101.566 37.1893 100.307C37.2221 99.6902 37.0082 99.1047 36.5865 98.6593C36.19 98.2403 35.6466 98 35.0956 98C34.5446 98 34.0212 98.2292 33.6226 98.6452C33.2028 99.0835 32.9767 99.6883 33.0019 100.304C33.054 101.564 33.9345 102.479 35.0956 102.479Z" fill="#4E5A66"/>
</g> <path fill-rule="evenodd" clip-rule="evenodd" d="M31.5597 120.492C31.6323 119.987 31.9195 119.535 32.3589 119.252C32.9842 118.847 33.7988 118.667 35.0003 118.667C36.1688 118.667 37.0085 118.854 37.644 119.253C38.0828 119.529 38.3694 119.98 38.4412 120.492H31.5597ZM37.9454 118.831C37.2168 118.373 36.2808 118.159 35.0003 118.159C33.6828 118.159 32.7734 118.367 32.0523 118.833H32.052C31.3934 119.258 31 119.973 31 120.746C31 120.886 31.1212 121 31.2707 121H38.7293C38.8791 121 39 120.886 39 120.746C39 119.962 38.6058 119.246 37.9454 118.831Z" fill="#4E5A66"/>
<path fill="#FFFFFF" d="M20.55,92.34c1.64-0.56,2.82-2.11,2.82-3.94c0-2.3-1.86-4.16-4.16-4.16s-4.16,1.86-4.16,4.16 <path fill-rule="evenodd" clip-rule="evenodd" d="M33.9884 113.997C34.2908 113.682 34.6837 113.508 35.0956 113.508C35.5081 113.508 35.917 113.69 36.2182 114.009C36.5431 114.352 36.708 114.804 36.6825 115.28C36.6288 116.275 35.9764 116.971 35.0956 116.971C34.2024 116.971 33.5499 116.277 33.5087 115.283C33.4889 114.805 33.6641 114.336 33.9884 113.997ZM35.0956 117.479C36.241 117.479 37.1212 116.566 37.1893 115.307C37.2221 114.69 37.0082 114.105 36.5865 113.659C36.19 113.24 35.6466 113 35.0956 113C34.5446 113 34.0212 113.229 33.6226 113.645C33.2028 114.084 32.9767 114.688 33.0019 115.304C33.054 116.564 33.9345 117.479 35.0956 117.479Z" fill="#4E5A66"/>
c0,1.83,1.18,3.38,2.82,3.94c-3.96,0.64-6.98,4.08-6.98,8.22h16.65C27.53,96.42,24.5,92.99,20.55,92.34z"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M112.201 48.3354H153.801V43.2011H112.201V48.3354ZM112.199 72.299H153.799V51.5349H112.199V72.299ZM155.399 40H110.601C109.717 40 109 40.7167 109 41.6006V48.3338V51.5349V73.8979C109 74.7834 109.717 75.4985 110.601 75.4985H128.817L117.981 85.2077C117.321 85.7986 117.268 86.8083 117.857 87.467C118.449 88.1258 119.459 88.1788 120.116 87.5928L131.399 77.4814V86.3994C131.399 87.2833 132.116 88 133 88C133.884 88 134.601 87.2833 134.601 86.3994V77.4814L145.884 87.5928C146.19 87.8659 146.571 88 146.951 88C147.39 88 147.827 87.8212 148.143 87.467C148.732 86.8083 148.679 85.7986 148.019 85.2077L137.183 75.4985H155.399C156.283 75.4985 157 74.7834 157 73.8979V51.5349V48.3338V41.6006C157 40.7167 156.283 40 155.399 40Z" fill="white"/>
</g>
<g>
<rect x="55.2" y="20.4" fill="#FFFFFF" width="124.8" height="67.2"/>
<g>
<polygon fill="#008081" points="107.62,32.4 132.56,75.6 82.68,75.6 "/>
<polygon fill="#008081" points="137.55,49.68 152.52,75.6 122.59,75.6 "/>
<circle fill="#DF2721" cx="127.58" cy="42.16" r="5.77"/>
</g>
</g>
</g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 6.0 KiB

56
bigbluebutton-html5/public/resources/images/layouts/smart.svg
View File

@ -1,42 +1,16 @@
<?xml version="1.0" encoding="utf-8"?> <svg width="221" height="125" viewBox="0 0 221 125" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <rect width="221" height="125" rx="4" fill="#4E5A66"/>
<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" <path d="M0 4C0 1.79086 1.79086 0 4 0H44V125H4C1.79086 125 0 123.209 0 121V4Z" fill="#DCE4EC"/>
viewBox="0 0 192 108" enable-background="new 0 0 192 108" xml:space="preserve"> <rect x="60" y="12" width="64.604" height="45" fill="white"/>
<g> <path fill-rule="evenodd" clip-rule="evenodd" d="M84.8607 42.5016C85.0225 41.377 85.6623 40.3715 86.6411 39.7394C88.0342 38.8386 89.8487 38.4375 92.5254 38.4375C95.1287 38.4375 96.9992 38.8525 98.4149 39.743C99.3924 40.3576 100.031 41.3624 100.191 42.5016H84.8607ZM99.0863 38.8029C97.4632 37.7812 95.378 37.3057 92.5254 37.3057C89.5904 37.3057 87.5645 37.7685 85.9581 38.8065H85.9574C84.4902 39.7545 83.6139 41.3473 83.6139 43.0678C83.6139 43.3806 83.8839 43.6334 84.217 43.6334H100.833C101.166 43.6334 101.436 43.3806 101.436 43.0678C101.436 41.3225 100.557 39.7279 99.0863 38.8029Z" fill="#4E5A66"/>
<g> <path fill-rule="evenodd" clip-rule="evenodd" d="M90.2713 28.0329C90.9448 27.3305 91.8201 26.9434 92.7378 26.9434C93.6566 26.9434 94.5675 27.3493 95.2387 28.0583C95.9624 28.8236 96.3297 29.8296 96.2729 30.8907C96.1533 33.1084 94.6998 34.6571 92.7378 34.6571C90.7479 34.6571 89.2944 33.1114 89.2026 30.8973C89.1585 29.832 89.5488 28.7879 90.2713 28.0329ZM92.7378 35.7889C95.2894 35.7889 97.2503 33.7545 97.4019 30.9512C97.475 29.5767 96.9984 28.2725 96.059 27.2803C95.1759 26.3469 93.9653 25.8115 92.7378 25.8115C91.5102 25.8115 90.3444 26.3221 89.4563 27.2489C88.5212 28.2253 88.0174 29.5725 88.0736 30.9439C88.1896 33.7515 90.151 35.7889 92.7378 35.7889Z" fill="#4E5A66"/>
<rect fill="#06172A" width="192" height="108"/> <rect x="60" y="63" width="64.604" height="45" fill="white"/>
</g> <path fill-rule="evenodd" clip-rule="evenodd" d="M84.8607 93.5016C85.0225 92.377 85.6623 91.3715 86.6411 90.7394C88.0342 89.8386 89.8487 89.4375 92.5254 89.4375C95.1287 89.4375 96.9992 89.8525 98.4149 90.743C99.3924 91.3576 100.031 92.3624 100.191 93.5016H84.8607ZM99.0863 89.8029C97.4632 88.7812 95.378 88.3057 92.5254 88.3057C89.5904 88.3057 87.5645 88.7685 85.9581 89.8065H85.9574C84.4902 90.7545 83.6139 92.3473 83.6139 94.0678C83.6139 94.3806 83.8839 94.6334 84.217 94.6334H100.833C101.166 94.6334 101.436 94.3806 101.436 94.0678C101.436 92.3225 100.557 90.7279 99.0863 89.8029Z" fill="#4E5A66"/>
<g> <path fill-rule="evenodd" clip-rule="evenodd" d="M90.2713 79.0329C90.9448 78.3305 91.8201 77.9434 92.7378 77.9434C93.6566 77.9434 94.5675 78.3493 95.2387 79.0583C95.9624 79.8236 96.3297 80.8296 96.2729 81.8907C96.1533 84.1084 94.6998 85.6571 92.7378 85.6571C90.7479 85.6571 89.2944 84.1114 89.2026 81.8973C89.1585 80.832 89.5488 79.7879 90.2713 79.0329ZM92.7378 86.7889C95.2894 86.7889 97.2503 84.7545 97.4019 81.9512C97.475 80.5767 96.9984 79.2725 96.059 78.2803C95.1759 77.3469 93.9653 76.8115 92.7378 76.8115C91.5102 76.8115 90.3444 77.3221 89.4563 78.2489C88.5212 79.2253 88.0174 80.5725 88.0736 81.9439C88.1896 84.7515 90.151 86.7889 92.7378 86.7889Z" fill="#4E5A66"/>
<rect fill="#92BCEA" width="38.4" height="108"/> <rect x="128" y="12" width="64.604" height="45" fill="white"/>
</g> <path fill-rule="evenodd" clip-rule="evenodd" d="M152.861 42.5016C153.022 41.377 153.662 40.3715 154.641 39.7394C156.034 38.8386 157.849 38.4375 160.525 38.4375C163.129 38.4375 164.999 38.8525 166.415 39.743C167.392 40.3576 168.031 41.3624 168.191 42.5016H152.861ZM167.086 38.8029C165.463 37.7812 163.378 37.3057 160.525 37.3057C157.59 37.3057 155.564 37.7685 153.958 38.8065H153.957C152.49 39.7545 151.614 41.3473 151.614 43.0678C151.614 43.3806 151.884 43.6334 152.217 43.6334H168.833C169.166 43.6334 169.436 43.3806 169.436 43.0678C169.436 41.3225 168.557 39.7279 167.086 38.8029Z" fill="#4E5A66"/>
<g> <path fill-rule="evenodd" clip-rule="evenodd" d="M158.271 28.0329C158.945 27.3305 159.82 26.9434 160.738 26.9434C161.657 26.9434 162.568 27.3493 163.239 28.0583C163.962 28.8236 164.33 29.8296 164.273 30.8907C164.153 33.1084 162.7 34.6571 160.738 34.6571C158.748 34.6571 157.294 33.1114 157.203 30.8973C157.159 29.832 157.549 28.7879 158.271 28.0329ZM160.738 35.7889C163.289 35.7889 165.25 33.7545 165.402 30.9512C165.475 29.5767 164.998 28.2725 164.059 27.2803C163.176 26.3469 161.965 25.8115 160.738 25.8115C159.51 25.8115 158.344 26.3221 157.456 27.2489C156.521 28.2253 156.017 29.5725 156.074 30.9439C156.19 33.7515 158.151 35.7889 160.738 35.7889Z" fill="#4E5A66"/>
<g> <rect x="128" y="63" width="64.604" height="45" fill="white"/>
<g> <path fill-rule="evenodd" clip-rule="evenodd" d="M152.861 93.5016C153.022 92.377 153.662 91.3715 154.641 90.7394C156.034 89.8386 157.849 89.4375 160.525 89.4375C163.129 89.4375 164.999 89.8525 166.415 90.743C167.392 91.3576 168.031 92.3624 168.191 93.5016H152.861ZM167.086 89.8029C165.463 88.7812 163.378 88.3057 160.525 88.3057C157.59 88.3057 155.564 88.7685 153.958 89.8065H153.957C152.49 90.7545 151.614 92.3473 151.614 94.0678C151.614 94.3806 151.884 94.6334 152.217 94.6334H168.833C169.166 94.6334 169.436 94.3806 169.436 94.0678C169.436 92.3225 168.557 90.7279 167.086 89.8029Z" fill="#4E5A66"/>
<rect x="52.8" y="9.84" fill="#0F70D7" width="34.56" height="25.92"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M158.271 79.0329C158.945 78.3305 159.82 77.9434 160.738 77.9434C161.657 77.9434 162.568 78.3493 163.239 79.0583C163.962 79.8236 164.33 80.8296 164.273 81.8907C164.153 84.1084 162.7 85.6571 160.738 85.6571C158.748 85.6571 157.294 84.1114 157.203 81.8973C157.159 80.832 157.549 79.7879 158.271 79.0329ZM160.738 86.7889C163.289 86.7889 165.25 84.7545 165.402 81.9512C165.475 80.5767 164.998 79.2725 164.059 78.2803C163.176 77.3469 161.965 76.8115 160.738 76.8115C159.51 76.8115 158.344 77.3221 157.456 78.2489C156.521 79.2253 156.017 80.5725 156.074 81.9439C156.19 84.7515 158.151 86.7889 160.738 86.7889Z" fill="#4E5A66"/>
</g>
<g>
<rect x="143.04" y="9.84" fill="#0F70D7" width="34.56" height="25.92"/>
</g>
<g>
<rect x="97.92" y="9.84" fill="#0F70D7" width="34.56" height="25.92"/>
</g>
</g>
<g>
<path fill="#FFFFFF" d="M71.43,22.74c1.64-0.56,2.82-2.11,2.82-3.94c0-2.3-1.86-4.16-4.16-4.16s-4.16,1.86-4.16,4.16
c0,1.83,1.18,3.38,2.82,3.94c-3.96,0.64-6.98,4.08-6.98,8.22h16.65C78.41,26.82,75.38,23.39,71.43,22.74z"/>
<path fill="#FFFFFF" d="M116.55,22.74c1.64-0.56,2.82-2.11,2.82-3.94c0-2.3-1.86-4.16-4.16-4.16c-2.3,0-4.16,1.86-4.16,4.16
c0,1.83,1.18,3.38,2.82,3.94c-3.96,0.64-6.98,4.08-6.98,8.22h16.65C123.53,26.82,120.5,23.39,116.55,22.74z"/>
<path fill="#FFFFFF" d="M161.67,22.74c1.64-0.56,2.82-2.11,2.82-3.94c0-2.3-1.86-4.16-4.16-4.16s-4.16,1.86-4.16,4.16
c0,1.83,1.18,3.38,2.82,3.94c-3.96,0.64-6.98,4.08-6.98,8.22h16.65C168.65,26.82,165.62,23.39,161.67,22.74z"/>
</g>
</g>
<g>
<rect x="52.8" y="45.36" fill="#FFFFFF" width="124.8" height="52.8"/>
<g>
<polygon fill="#008081" points="107.44,54.96 126.84,88.56 88.04,88.56 "/>
<polygon fill="#008081" points="130.72,68.4 142.36,88.56 119.08,88.56 "/>
<circle fill="#DF2721" cx="122.96" cy="62.55" r="4.49"/>
</g>
</g>
</g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 5.5 KiB

46
bigbluebutton-html5/public/resources/images/layouts/videoFocus.svg
View File

@ -1,30 +1,18 @@
<?xml version="1.0" encoding="utf-8"?> <svg width="221" height="125" viewBox="0 0 221 125" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <rect width="221" height="125" rx="4" fill="#4E5A66"/>
<svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" <path d="M0 4C0 1.79086 1.79086 0 4 0H44V91H0V4Z" fill="#DCE4EC"/>
viewBox="0 0 192 108" enable-background="new 0 0 192 108" xml:space="preserve"> <rect x="60" y="12" width="64.604" height="45" fill="white"/>
<g> <path fill-rule="evenodd" clip-rule="evenodd" d="M84.8607 42.5016C85.0225 41.377 85.6623 40.3715 86.6411 39.7394C88.0342 38.8386 89.8487 38.4375 92.5254 38.4375C95.1287 38.4375 96.9992 38.8525 98.4149 39.743C99.3924 40.3576 100.031 41.3624 100.191 42.5016H84.8607ZM99.0863 38.8029C97.4632 37.7812 95.378 37.3057 92.5254 37.3057C89.5904 37.3057 87.5645 37.7685 85.9581 38.8065H85.9574C84.4902 39.7545 83.6139 41.3473 83.6139 43.0678C83.6139 43.3806 83.8839 43.6334 84.217 43.6334H100.833C101.166 43.6334 101.436 43.3806 101.436 43.0678C101.436 41.3225 100.557 39.7279 99.0863 38.8029Z" fill="#4E5A66"/>
<g> <path fill-rule="evenodd" clip-rule="evenodd" d="M90.2713 28.0329C90.9448 27.3305 91.8201 26.9434 92.7378 26.9434C93.6566 26.9434 94.5675 27.3493 95.2387 28.0583C95.9624 28.8236 96.3297 29.8296 96.2729 30.8907C96.1533 33.1084 94.6998 34.6571 92.7378 34.6571C90.7479 34.6571 89.2944 33.1114 89.2026 30.8973C89.1585 29.832 89.5488 28.7879 90.2713 28.0329ZM92.7378 35.7889C95.2894 35.7889 97.2503 33.7545 97.4019 30.9512C97.475 29.5767 96.9984 28.2725 96.059 27.2803C95.1759 26.3469 93.9653 25.8115 92.7378 25.8115C91.5102 25.8115 90.3444 26.3221 89.4563 27.2489C88.5212 28.2253 88.0174 29.5725 88.0736 30.9439C88.1896 33.7515 90.151 35.7889 92.7378 35.7889Z" fill="#4E5A66"/>
<rect fill="#06172A" width="192" height="108"/> <rect x="60" y="63" width="64.604" height="45" fill="white"/>
</g> <path fill-rule="evenodd" clip-rule="evenodd" d="M84.8607 93.5016C85.0225 92.377 85.6623 91.3715 86.6411 90.7394C88.0342 89.8386 89.8487 89.4375 92.5254 89.4375C95.1287 89.4375 96.9992 89.8525 98.4149 90.743C99.3924 91.3576 100.031 92.3624 100.191 93.5016H84.8607ZM99.0863 89.8029C97.4632 88.7812 95.378 88.3057 92.5254 88.3057C89.5904 88.3057 87.5645 88.7685 85.9581 89.8065H85.9574C84.4902 90.7545 83.6139 92.3473 83.6139 94.0678C83.6139 94.3806 83.8839 94.6334 84.217 94.6334H100.833C101.166 94.6334 101.436 94.3806 101.436 94.0678C101.436 92.3225 100.557 90.7279 99.0863 89.8029Z" fill="#4E5A66"/>
<g> <path fill-rule="evenodd" clip-rule="evenodd" d="M90.2713 79.0329C90.9448 78.3305 91.8201 77.9434 92.7378 77.9434C93.6566 77.9434 94.5675 78.3493 95.2387 79.0583C95.9624 79.8236 96.3297 80.8296 96.2729 81.8907C96.1533 84.1084 94.6998 85.6571 92.7378 85.6571C90.7479 85.6571 89.2944 84.1114 89.2026 81.8973C89.1585 80.832 89.5488 79.7879 90.2713 79.0329ZM92.7378 86.7889C95.2894 86.7889 97.2503 84.7545 97.4019 81.9512C97.475 80.5767 96.9984 79.2725 96.059 78.2803C95.1759 77.3469 93.9653 76.8115 92.7378 76.8115C91.5102 76.8115 90.3444 77.3221 89.4563 78.2489C88.5212 79.2253 88.0174 80.5725 88.0736 81.9439C88.1896 84.7515 90.151 86.7889 92.7378 86.7889Z" fill="#4E5A66"/>
<rect fill="#92BCEA" width="38.4" height="76.8"/> <rect x="128" y="12" width="64.604" height="45" fill="white"/>
</g> <path fill-rule="evenodd" clip-rule="evenodd" d="M152.861 42.5016C153.022 41.377 153.662 40.3715 154.641 39.7394C156.034 38.8386 157.849 38.4375 160.525 38.4375C163.129 38.4375 164.999 38.8525 166.415 39.743C167.392 40.3576 168.031 41.3624 168.191 42.5016H152.861ZM167.086 38.8029C165.463 37.7812 163.378 37.3057 160.525 37.3057C157.59 37.3057 155.564 37.7685 153.958 38.8065H153.957C152.49 39.7545 151.614 41.3473 151.614 43.0678C151.614 43.3806 151.884 43.6334 152.217 43.6334H168.833C169.166 43.6334 169.436 43.3806 169.436 43.0678C169.436 41.3225 168.557 39.7279 167.086 38.8029Z" fill="#4E5A66"/>
<g> <path fill-rule="evenodd" clip-rule="evenodd" d="M158.271 28.0329C158.945 27.3305 159.82 26.9434 160.738 26.9434C161.657 26.9434 162.568 27.3493 163.239 28.0583C163.962 28.8236 164.33 29.8296 164.273 30.8907C164.153 33.1084 162.7 34.6571 160.738 34.6571C158.748 34.6571 157.294 33.1114 157.203 30.8973C157.159 29.832 157.549 28.7879 158.271 28.0329ZM160.738 35.7889C163.289 35.7889 165.25 33.7545 165.402 30.9512C165.475 29.5767 164.998 28.2725 164.059 27.2803C163.176 26.3469 161.965 25.8115 160.738 25.8115C159.51 25.8115 158.344 26.3221 157.456 27.2489C156.521 28.2253 156.017 29.5725 156.074 30.9439C156.19 33.7515 158.151 35.7889 160.738 35.7889Z" fill="#4E5A66"/>
<g> <rect x="128" y="63" width="64.604" height="45" fill="white"/>
<g> <path fill-rule="evenodd" clip-rule="evenodd" d="M152.861 93.5016C153.022 92.377 153.662 91.3715 154.641 90.7394C156.034 89.8386 157.849 89.4375 160.525 89.4375C163.129 89.4375 164.999 89.8525 166.415 90.743C167.392 91.3576 168.031 92.3624 168.191 93.5016H152.861ZM167.086 89.8029C165.463 88.7812 163.378 88.3057 160.525 88.3057C157.59 88.3057 155.564 88.7685 153.958 89.8065H153.957C152.49 90.7545 151.614 92.3473 151.614 94.0678C151.614 94.3806 151.884 94.6334 152.217 94.6334H168.833C169.166 94.6334 169.436 94.3806 169.436 94.0678C169.436 92.3225 168.557 90.7279 167.086 89.8029Z" fill="#4E5A66"/>
<rect x="55.2" y="20.4" fill="#0F70D7" width="124.8" height="67.2"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M158.271 79.0329C158.945 78.3305 159.82 77.9434 160.738 77.9434C161.657 77.9434 162.568 78.3493 163.239 79.0583C163.962 79.8236 164.33 80.8296 164.273 81.8907C164.153 84.1084 162.7 85.6571 160.738 85.6571C158.748 85.6571 157.294 84.1114 157.203 81.8973C157.159 80.832 157.549 79.7879 158.271 79.0329ZM160.738 86.7889C163.289 86.7889 165.25 84.7545 165.402 81.9512C165.475 80.5767 164.998 79.2725 164.059 78.2803C163.176 77.3469 161.965 76.8115 160.738 76.8115C159.51 76.8115 158.344 77.3221 157.456 78.2489C156.521 79.2253 156.017 80.5725 156.074 81.9439C156.19 84.7515 158.151 86.7889 160.738 86.7889Z" fill="#4E5A66"/>
</g> <rect x="4" y="95" width="36" height="26" fill="#363A43"/>
</g> <path fill-rule="evenodd" clip-rule="evenodd" d="M16.867 104.258H28.1335V102.867H16.867V104.258ZM16.8665 110.748H28.133V105.124H16.8665V110.748ZM28.5665 102H16.4335C16.1941 102 16 102.194 16 102.433V104.257V105.124V111.181C16 111.421 16.1941 111.614 16.4335 111.614H21.3672L18.4323 114.244C18.2535 114.404 18.2391 114.677 18.3987 114.856C18.5592 115.034 18.8327 115.048 19.0106 114.89L22.0665 112.151V114.567C22.0665 114.806 22.2606 115 22.5 115C22.7394 115 22.9335 114.806 22.9335 114.567V112.151L25.9894 114.89C26.0723 114.964 26.1754 115 26.2785 115C26.3973 115 26.5157 114.952 26.6013 114.856C26.7609 114.677 26.7465 114.404 26.5677 114.244L23.6328 111.614H28.5665C28.8059 111.614 29 111.421 29 111.181V105.124V104.257V102.433C29 102.194 28.8059 102 28.5665 102Z" fill="white"/>
<path fill="#FFFFFF" d="M121.16,53.85c4.34-1.48,7.46-5.59,7.46-10.43c0-6.09-4.93-11.02-11.02-11.02s-11.02,4.93-11.02,11.02
c0,4.84,3.12,8.95,7.46,10.43c-10.48,1.7-18.48,10.79-18.48,21.75h44.08C139.64,64.64,131.64,55.55,121.16,53.85z"/>
</g>
<g>
<rect x="3.84" y="80.64" fill="#FFFFFF" width="30.72" height="23.52"/>
<g>
<polygon fill="#008081" points="15.63,84.68 24.55,100.12 6.72,100.12 "/>
<polygon fill="#008081" points="26.33,90.86 31.68,100.12 20.98,100.12 "/>
<circle fill="#DF2721" cx="22.77" cy="88.17" r="2.06"/>
</g>
</g>
</g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 6.3 KiB

5
bigbluebutton-tests/playwright/core/elements.js
View File

@ -155,7 +155,6 @@ exports.selectCameraQualityId = 'select[id="setQuality"]';
exports.virtualBackgrounds = 'div[data-test="virtualBackground"]'; exports.virtualBackgrounds = 'div[data-test="virtualBackground"]';
exports.speechRecognition = 'div[data-test="speechRecognition"]'; exports.speechRecognition = 'div[data-test="speechRecognition"]';
exports.learningDashboard = 'li[data-test="learningDashboard"]'; exports.learningDashboard = 'li[data-test="learningDashboard"]';
exports.propagateLayout = 'li[data-test="propagateLayout"]';
exports.layoutModal = 'li[data-test="layoutModal"]'; exports.layoutModal = 'li[data-test="layoutModal"]';
// Notes // Notes
@ -489,8 +488,8 @@ exports.focusOnPresentation = 'button[data-test="presentationFocusLayout"]';
exports.focusOnVideo = 'button[data-test="videoFocusLayout"]'; exports.focusOnVideo = 'button[data-test="videoFocusLayout"]';
exports.smartLayout = 'button[data-test="smartLayout"]'; exports.smartLayout = 'button[data-test="smartLayout"]';
exports.customLayout = 'button[data-test="customLayout"]'; exports.customLayout = 'button[data-test="customLayout"]';
exports.pushLayoutToggle = 'input#TogglePush'; exports.updateLayoutBtn = 'button[data-test="updateLayoutBtn"]';
exports.confirmButton = 'button[aria-label="Confirm"]'; exports.updateEveryoneLayoutBtn = 'button[data-test="updateEveryoneLayoutBtn"]';
exports.cameraDock = 'div#cameraDock'; exports.cameraDock = 'div#cameraDock';
// Font size // Font size

2
bigbluebutton-tests/playwright/customparameters/customparameters.js
View File

@ -257,7 +257,6 @@ class CustomParameters extends MultiUsers {
async layouts() { async layouts() {
await this.modPage.waitAndClick(e.actions); await this.modPage.waitAndClick(e.actions);
await this.modPage.wasRemoved(e.propagateLayout);
await this.modPage.wasRemoved(e.layoutModal); await this.modPage.wasRemoved(e.layoutModal);
} }
@ -344,7 +343,6 @@ class CustomParameters extends MultiUsers {
async layoutsExclude() { async layoutsExclude() {
await this.modPage.waitAndClick(e.actions); await this.modPage.waitAndClick(e.actions);
await this.modPage.hasElement(e.propagateLayout);
await this.modPage.hasElement(e.layoutModal); await this.modPage.hasElement(e.layoutModal);
} }

15
bigbluebutton-tests/playwright/layouts/layouts.js
View File

@ -7,7 +7,7 @@ class Layouts extends MultiUsers {
await this.modPage.waitAndClick(e.actions); await this.modPage.waitAndClick(e.actions);
await this.modPage.waitAndClick(e.layoutSettingsModalButton); await this.modPage.waitAndClick(e.layoutSettingsModalButton);
await this.modPage.waitAndClick(e.focusOnPresentation); await this.modPage.waitAndClick(e.focusOnPresentation);
await this.modPage.waitAndClick(e.confirmButton); await this.modPage.waitAndClick(e.updateLayoutBtn);
await this.modPage.waitAndClick(e.toastContainer); await this.modPage.waitAndClick(e.toastContainer);
await this.modPage.wasRemoved(e.toastContainer); await this.modPage.wasRemoved(e.toastContainer);
@ -18,7 +18,7 @@ class Layouts extends MultiUsers {
await this.modPage.waitAndClick(e.actions); await this.modPage.waitAndClick(e.actions);
await this.modPage.waitAndClick(e.layoutSettingsModalButton); await this.modPage.waitAndClick(e.layoutSettingsModalButton);
await this.modPage.waitAndClick(e.focusOnVideo); await this.modPage.waitAndClick(e.focusOnVideo);
await this.modPage.waitAndClick(e.confirmButton); await this.modPage.waitAndClick(e.updateLayoutBtn);
await this.modPage.waitAndClick(e.toastContainer); await this.modPage.waitAndClick(e.toastContainer);
await this.modPage.wasRemoved(e.toastContainer); await this.modPage.wasRemoved(e.toastContainer);
@ -29,7 +29,7 @@ class Layouts extends MultiUsers {
await this.modPage.waitAndClick(e.actions); await this.modPage.waitAndClick(e.actions);
await this.modPage.waitAndClick(e.layoutSettingsModalButton); await this.modPage.waitAndClick(e.layoutSettingsModalButton);
await this.modPage.waitAndClick(e.smartLayout); await this.modPage.waitAndClick(e.smartLayout);
await this.modPage.waitAndClick(e.confirmButton); await this.modPage.waitAndClick(e.updateLayoutBtn);
await this.modPage.waitAndClick(e.toastContainer); await this.modPage.waitAndClick(e.toastContainer);
await this.modPage.wasRemoved(e.toastContainer); await this.modPage.wasRemoved(e.toastContainer);
@ -46,7 +46,7 @@ class Layouts extends MultiUsers {
await this.modPage.waitAndClick(e.actions); await this.modPage.waitAndClick(e.actions);
await this.modPage.waitAndClick(e.layoutSettingsModalButton); await this.modPage.waitAndClick(e.layoutSettingsModalButton);
await this.modPage.waitAndClick(e.customLayout); await this.modPage.waitAndClick(e.customLayout);
await this.modPage.waitAndClick(e.confirmButton); await this.modPage.waitAndClick(e.updateLayoutBtn);
await this.modPage.waitAndClick(e.toastContainer); await this.modPage.waitAndClick(e.toastContainer);
await this.modPage.wasRemoved(e.toastContainer); await this.modPage.wasRemoved(e.toastContainer);
@ -79,12 +79,11 @@ class Layouts extends MultiUsers {
await reopenChatSidebar(this.modPage); await reopenChatSidebar(this.modPage);
} }
async pushLayout() { async updateEveryone() {
await this.modPage.waitAndClick(e.actions); await this.modPage.waitAndClick(e.actions);
await this.modPage.waitAndClick(e.layoutSettingsModalButton); await this.modPage.waitAndClick(e.layoutSettingsModalButton);
await this.modPage.waitAndClick(e.customLayout); await this.modPage.waitAndClick(e.customLayout);
await this.modPage.waitAndClickElement(e.pushLayoutToggle); await this.modPage.waitAndClick(e.updateEveryoneLayoutBtn);
await this.modPage.waitAndClick(e.confirmButton);
await this.modPage.waitAndClick(e.toastContainer); await this.modPage.waitAndClick(e.toastContainer);
await this.modPage.wasRemoved(e.toastContainer); await this.modPage.wasRemoved(e.toastContainer);
@ -105,7 +104,7 @@ class Layouts extends MultiUsers {
await this.modPage.waitAndClick(e.restorePresentation); await this.modPage.waitAndClick(e.restorePresentation);
await this.modPage.dragAndDropWebcams(e.dropAreaSidebarBottom); await this.modPage.dragAndDropWebcams(e.dropAreaSidebarBottom);
await checkScreenshots(this, 'video', 'push-layout'); await checkScreenshots(this, 'video', 'update-everyone');
} }
} }

14
bigbluebutton-tests/playwright/layouts/layouts.spec.js
View File

@ -7,7 +7,7 @@ const hidePresentationToast = encodeCustomParams(PARAMETER_HIDE_PRESENTATION_TOA
const CUSTOM_MEETING_ID = 'layout_management_meeting'; const CUSTOM_MEETING_ID = 'layout_management_meeting';
test.describe.serial('Layout management', () => { test.describe.serial("Layout management", () => {
const layouts = new Layouts(); const layouts = new Layouts();
test.beforeAll(async ({ browser }) => { test.beforeAll(async ({ browser }) => {
@ -19,23 +19,23 @@ test.describe.serial('Layout management', () => {
await layouts.userPage.shareWebcam(); await layouts.userPage.shareWebcam();
}); });
test('Focus on presentation', async () => { test("Focus on presentation", async () => {
await layouts.focusOnPresentation(); await layouts.focusOnPresentation();
}); });
test('Focus on video', async () => { test("Focus on video", async () => {
await layouts.focusOnVideo(); await layouts.focusOnVideo();
}); });
test('Smart layout', async () => { test("Smart layout", async () => {
await layouts.smartLayout(); await layouts.smartLayout();
}); });
test('Custom layout', async () => { test("Custom layout", async () => {
await layouts.customLayout(); await layouts.customLayout();
}); });
test('Push layout to all', async () => { test("Update everyone's layout", async () => {
await layouts.pushLayout(); await layouts.updateEveryone();
}); });
}); });

BIN
bigbluebutton-tests/playwright/layouts/layouts.spec.js-snapshots/moderator-push-layout-Chromium-linux.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 107 KiB

BIN
bigbluebutton-tests/playwright/layouts/layouts.spec.js-snapshots/moderator-update-everyone-Chromium-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 KiB

BIN
bigbluebutton-tests/playwright/layouts/layouts.spec.js-snapshots/user-push-layout-Chromium-linux.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 93 KiB

BIN
bigbluebutton-tests/playwright/layouts/layouts.spec.js-snapshots/user-update-everyone-Chromium-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 109 KiB