feat(virtual-background) Virtual background UI changes

css/modals/virtual-background/_virtual-background.scss

@@ -1,54 +1,118 @@
 .virtual-background-dialog {
+    max-height: 300px;
+    color: white;
     display: inline-grid;
-    grid-template-columns: auto auto auto auto auto auto auto auto;
-    max-width: 370px;
+    grid-template-columns: auto auto auto auto auto;
+    column-gap: 8px;
     cursor: pointer;
+    .thumbnail:hover, .blur:hover, .slight-blur:hover, .virtual-background-none:hover{
+        height: 56px;
+        width: 103px;
+        opacity: .5;
+        border: 2px solid #99bbf3;
+        @media (min-width: 432px) and (max-width: 632px) {
+            height: 56px;
+            width: 56px;
+        }
+    }
     .thumbnail {
-        border-radius: 10px;
+        margin-top: 8px;
+        border-radius: 6px;
         object-fit: cover;
-        padding: 5px;
-        height: 40px;
-        width: 40px;
+        height: 60px;
+        width: 107px;
     }
 
     .thumbnail:hover ~ .delete-image-icon {
         display: block;
     }
     .thumbnail-selected {
-        border-radius: 10px;
+        margin-top: 8px;
+        border-radius: 6px;
         object-fit: cover;
-        padding: 5px;
-        height: 40px;
-        width: 40px;
-        border: 2px solid #a4b8d1;
+        height: 60px;
+        width: 107px;
+        border: 2px solid #246FE5;
+    }
+    .blur{
+        box-shadow: inset 0 0 12px #000000;
+        margin-top: 8px;
+        background: #7E8287;
+        font-weight: bold;
+        height: 60px;
+        width: 107px;
+        border-radius: 6px;
+        text-align: center;
+        vertical-align: middle;
+        line-height: 60px;
     }
     .blur-selected {
-        border-radius: 10px;
-        border: 2px solid #a4b8d1;
+        box-shadow: inset 0 0 12px #000000;
+        margin-top: 8px;
+        background: #7E8287;
+        font-weight: bold;
+        height: 60px;
+        width: 107px;
+        border-radius: 6px;
+        border: 2px solid #246FE5;
+        text-align: center;
+        vertical-align: middle;
+        line-height: 60px;
+    }
+    .slight-blur{
+        box-shadow: inset 0 0 12px #000000;
+        margin-top: 8px;
+        background: #A4A4A4;
+        font-weight: bold;
+        height: 60px;
+        width: 107px;
+        border-radius: 6px;
+        text-align: center;
+        vertical-align: middle;
+        line-height: 60px;
+    }
+    .slight-blur-selected{
+        box-shadow: inset 0 0 12px #000000;
+        margin-top: 8px;
+        background: #A4A4A4;
+        font-weight: bold;
+        height: 60px;
+        width: 107px;
+        border-radius: 6px;
+        border: 2px solid #246FE5;
+        text-align: center;
+        vertical-align: middle;
+        line-height: 60px;
     }
     .virtual-background-none {
+        margin-top: 8px;
+        background: #525252;
         font-weight: bold;
-        padding: 5px;
-        height: 34px;
-        width: 34px;
-        border-radius: 10px;
-        border: 1px solid #a4b8d1;
+        height: 60px;
+        width: 107px;
+        border-radius: 6px;
         text-align: center;
         vertical-align: middle;
-        line-height: 35px;
-        margin-right: 5px;
+        line-height: 60px;
     }
     .none-selected {
+        margin-top: 8px;
+        background: #525252;
         font-weight: bold;
-        padding: 5px;
-        height: 34px;
-        width: 34px;
-        border-radius: 10px;
-        border: 2px solid #a4b8d1;
+        height: 60px;
+        width: 107px;
+        border-radius: 6px;
+        border: 2px solid #246FE5;
         text-align: center;
         vertical-align: middle;
-        line-height: 35px;
-        margin-right: 5px;
+        line-height: 60px;
+    }
+    @media (min-width: 432px) and (max-width: 632px) {
+        font-size: 1.5vw;
+        .virtual-background-none, .thumbnail, .thumbnail-selected, .none-selected, .blur, .blur-selected, .slight-blur, .slight-blur-selected{
+            height: 60px;
+            width: 60px;
+        }
     }
 }
 
@@ -58,27 +122,25 @@
 .file-upload-btn {
     display: none;
 }
-.custom-file-upload {
-    font-size: x-large;
-    font-weight: bold;
-    display: inline-block;
-    padding: 4px;
-    height: 35px;
-    width: 35px;
-    border-radius: 10px;
-    border: 1px solid #a4b8d1;
-    text-align: center;
-    vertical-align: middle;
-    line-height: 35px;
-    margin-left: 5px;
+.file-upload-label{
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+    margin-bottom: 8px;
+    color: #669AEC;
+    display: inline-flex;
     cursor: pointer;
 }
 
 .delete-image-icon {
+    background: #3d3d3d;
     position: absolute;
     display: none;
-    left: 36;
-    bottom: 36;
+    left: 96;
+    bottom: 51;
+    @media (min-width: 432px) and (max-width: 632px) {
+        left: 51px
+    }
 }
 .delete-image-icon:hover {
     display: block;
@@ -91,3 +153,7 @@
 .loading-content-text{
   margin-right: 15px;
 }
+
+.add-background{
+    margin-right: 8px;
+}

lang/main.json

@@ -338,11 +338,11 @@
         "title": "Embed this meeting"
     },
     "virtualBackground": {
-        "title": "Backgrounds",
+        "title": "Virtual backgrounds",
         "blur": "Blur",
         "slightBlur": "Slight Blur",
         "removeBackground": "Remove background",
-        "uploadImage": "Upload image",
+        "addBackground": "Add background",
         "pleaseWait": "Please wait...",
         "none": "None"
     },

react/features/base/icons/svg/blur-background.svg

@@ -1,3 +0,0 @@
-<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 4.58333C8.75626 4.58333 9.16667 4.17293 9.16667 3.66667C9.16667 3.16041 8.75626 2.75 8.25 2.75C7.74374 2.75 7.33333 3.16041 7.33333 3.66667C7.33333 4.17293 7.74374 4.58333 8.25 4.58333ZM8.25 10.0833C9.26252 10.0833 10.0833 9.26252 10.0833 8.25C10.0833 7.23748 9.26252 6.41667 8.25 6.41667C7.23748 6.41667 6.41667 7.23748 6.41667 8.25C6.41667 9.26252 7.23748 10.0833 8.25 10.0833ZM13.75 10.0833C14.7625 10.0833 15.5833 9.26252 15.5833 8.25C15.5833 7.23748 14.7625 6.41667 13.75 6.41667C12.7375 6.41667 11.9167 7.23748 11.9167 8.25C11.9167 9.26252 12.7375 10.0833 13.75 10.0833ZM10.0833 13.75C10.0833 14.7625 9.26252 15.5833 8.25 15.5833C7.23748 15.5833 6.41667 14.7625 6.41667 13.75C6.41667 12.7375 7.23748 11.9167 8.25 11.9167C9.26252 11.9167 10.0833 12.7375 10.0833 13.75ZM8.25 19.25C8.75626 19.25 9.16667 18.8396 9.16667 18.3333C9.16667 17.8271 8.75626 17.4167 8.25 17.4167C7.74374 17.4167 7.33333 17.8271 7.33333 18.3333C7.33333 18.8396 7.74374 19.25 8.25 19.25ZM14.6667 18.3333C14.6667 18.8396 14.2563 19.25 13.75 19.25C13.2437 19.25 12.8333 18.8396 12.8333 18.3333C12.8333 17.8271 13.2437 17.4167 13.75 17.4167C14.2563 17.4167 14.6667 17.8271 14.6667 18.3333ZM3.66667 14.6667C4.17293 14.6667 4.58333 14.2563 4.58333 13.75C4.58333 13.2437 4.17293 12.8333 3.66667 12.8333C3.16041 12.8333 2.75 13.2437 2.75 13.75C2.75 14.2563 3.16041 14.6667 3.66667 14.6667ZM4.58333 8.25C4.58333 8.75626 4.17293 9.16667 3.66667 9.16667C3.16041 9.16667 2.75 8.75626 2.75 8.25C2.75 7.74374 3.16041 7.33333 3.66667 7.33333C4.17293 7.33333 4.58333 7.74374 4.58333 8.25ZM18.3333 14.6667C18.8396 14.6667 19.25 14.2563 19.25 13.75C19.25 13.2437 18.8396 12.8333 18.3333 12.8333C17.8271 12.8333 17.4167 13.2437 17.4167 13.75C17.4167 14.2563 17.8271 14.6667 18.3333 14.6667ZM19.25 8.25C19.25 8.75626 18.8396 9.16667 18.3333 9.16667C17.8271 9.16667 17.4167 8.75626 17.4167 8.25C17.4167 7.74374 17.8271 7.33333 18.3333 7.33333C18.8396 7.33333 19.25 7.74374 19.25 8.25ZM14.6667 3.66667C14.6667 4.17293 14.2563 4.58333 13.75 4.58333C13.2437 4.58333 12.8333 4.17293 12.8333 3.66667C12.8333 3.16041 13.2437 2.75 13.75 2.75C14.2563 2.75 14.6667 3.16041 14.6667 3.66667ZM13.75 15.5833C14.7625 15.5833 15.5833 14.7625 15.5833 13.75C15.5833 12.7375 14.7625 11.9167 13.75 11.9167C12.7375 11.9167 11.9167 12.7375 11.9167 13.75C11.9167 14.7625 12.7375 15.5833 13.75 15.5833Z"/>
-</svg>

react/features/base/icons/svg/close-small.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.69136 8.00002L11.4568 5.23457C11.6477 5.04366 11.6477 4.73412 11.4568 4.54321C11.2659 4.3523 10.9564 4.3523 10.7654 4.54321L7.99999 7.30866L5.23454 4.54321C5.04363 4.3523 4.73409 4.3523 4.54318 4.54321C4.35227 4.73412 4.35227 5.04366 4.54318 5.23457L7.30863 8.00002L4.54318 10.7655C4.35227 10.9564 4.35227 11.2659 4.54318 11.4568C4.73409 11.6478 5.04363 11.6478 5.23454 11.4568L7.99999 8.69139L10.7654 11.4568C10.9564 11.6478 11.2659 11.6478 11.4568 11.4568C11.6477 11.2659 11.6477 10.9564 11.4568 10.7655L8.69136 8.00002Z" fill="white"/>
+</svg>

react/features/base/icons/svg/index.js

@@ -14,8 +14,8 @@ export { default as IconArrowLeft } from './arrow-left.svg';
 export { default as IconAudioOnly } from './visibility.svg';
 export { default as IconAudioOnlyOff } from './visibility-off.svg';
 export { default as IconAudioRoute } from './volume.svg';
-export { default as IconBlurBackground } from './blur-background.svg';
 export { default as IconPlusCalendar } from './calendar-plus.svg';
+export { default as IconPlusCircle } from './plus-circle.svg';
 export { default as IconCamera } from './camera.svg';
 export { default as IconCameraDisabled } from './camera-disabled.svg';
 export { default as IconCameraEmpty } from './camera-empty.svg';
@@ -29,6 +29,7 @@ export { default as IconCheck } from './check.svg';
 export { default as IconClose } from './close.svg';
 export { default as IconCloseX } from './close-x.svg';
 export { default as IconClosedCaption } from './closed_caption.svg';
+export { default as IconCloseSmall } from './close-small.svg';
 export { default as IconCodeBlock } from './code-block.svg';
 export { default as IconConnectionActive } from './gsm-bars.svg';
 export { default as IconConnectionInactive } from './ninja.svg';

react/features/base/icons/svg/plus-circle.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.66666 9.99999C1.66666 14.6024 5.39762 18.3333 10 18.3333C14.6024 18.3333 18.3333 14.6024 18.3333 9.99999C18.3333 5.39762 14.6024 1.66666 10 1.66666C5.39762 1.66666 1.66666 5.39762 1.66666 9.99999ZM16.8182 9.99999C16.8182 13.7656 13.7656 16.8182 10 16.8182C6.23442 16.8182 3.18182 13.7656 3.18182 9.99999C3.18182 6.23441 6.23442 3.18181 10 3.18181C13.7656 3.18181 16.8182 6.23441 16.8182 9.99999ZM9.24242 10.7576V13.7879H10.7576V10.7576H13.7879V9.24241H10.7576V6.21211H9.24242V9.24241H6.21212V10.7576H9.24242Z" fill="#669AEC"/>
+</svg>

react/features/virtual-background/components/VirtualBackgroundDialog.js

@@ -7,9 +7,8 @@ import uuid from 'uuid';
 
 import { Dialog } from '../../base/dialog';
 import { translate } from '../../base/i18n';
-import { Icon, IconBlurBackground, IconCancelSelection } from '../../base/icons';
+import { Icon, IconCloseSmall, IconPlusCircle } from '../../base/icons';
 import { connect } from '../../base/redux';
-import { Tooltip } from '../../base/tooltip';
 import { toggleBackgroundEffect } from '../actions';
 import { resizeImage, toDataURL } from '../functions';
 import logger from '../logger';
@@ -34,6 +33,18 @@ const images = [
     {
         id: '4',
         src: 'images/virtual-background/background-4.jpg'
+    },
+    {
+        id: '5',
+        src: 'images/virtual-background/background-5.jpg'
+    },
+    {
+        id: '6',
+        src: 'images/virtual-background/background-6.jpg'
+    },
+    {
+        id: '7',
+        src: 'images/virtual-background/background-7.jpg'
     }
 ];
 type Props = {
@@ -170,9 +181,9 @@ function VirtualBackground({ _selectedThumbnail, dispatch, t }: Props) {
     return (
         <Dialog
             hideCancelButton = { true }
-            submitDisabled = { false }
+            submitDisabled = { true }
             titleKey = { 'virtualBackground.title' }
-            width = '450px'>
+            width = '640px'>
             {loading ? (
                 <div className = 'virtual-background-loading'>
                     <span className = 'loading-content-text'>{t('virtualBackground.pleaseWait')}</span>
@@ -182,35 +193,38 @@ function VirtualBackground({ _selectedThumbnail, dispatch, t }: Props) {
                 </div>
             ) : (
                 <div>
+                    <label
+                        className = 'file-upload-label'
+                        htmlFor = 'file-upload'>
+                        <Icon
+                            className = { 'add-background' }
+                            size = { 20 }
+                            src = { IconPlusCircle } />
+                        {t('virtualBackground.addBackground')}
+                    </label>
+                    <input
+                        accept = 'image/*'
+                        className = 'file-upload-btn'
+                        id = 'file-upload'
+                        onChange = { e => uploadImage(e.target.files) }
+                        type = 'file' />
                     <div className = 'virtual-background-dialog'>
-                        <Tooltip
-                            content = { t('virtualBackground.removeBackground') }
-                            position = { 'top' }>
                         <div
-                                className = { _selectedThumbnail === 'none'
-                                    ? 'none-selected' : 'virtual-background-none' }
+                            className = { _selectedThumbnail === 'none' ? 'none-selected' : 'virtual-background-none' }
                             onClick = { removeBackground }>
                             {t('virtualBackground.none')}
                         </div>
-                        </Tooltip>
-                        <Tooltip
-                            content = { t('virtualBackground.slightBlur') }
-                            position = { 'top' }>
-                            <Icon
-                                className = { _selectedThumbnail === 'slight-blur' ? 'blur-selected' : '' }
-                                onClick = { () => enableBlur(8, 'slight-blur') }
-                                size = { 50 }
-                                src = { IconBlurBackground } />
-                        </Tooltip>
-                        <Tooltip
-                            content = { t('virtualBackground.blur') }
-                            position = { 'top' }>
-                            <Icon
-                                className = { _selectedThumbnail === 'blur' ? 'blur-selected' : '' }
-                                onClick = { () => enableBlur(25, 'blur') }
-                                size = { 50 }
-                                src = { IconBlurBackground } />
-                        </Tooltip>
+                        <div
+                            className = { _selectedThumbnail === 'slight-blur'
+                                ? 'slight-blur-selected' : 'slight-blur' }
+                            onClick = { () => enableBlur(8, 'slight-blur') }>
+                            {t('virtualBackground.slightBlur')}
+                        </div>
+                        <div
+                            className = { _selectedThumbnail === 'blur' ? 'blur-selected' : 'blur' }
+                            onClick = { () => enableBlur(25, 'blur') }>
+                            {t('virtualBackground.blur')}
+                        </div>
                         {images.map((image, index) => (
                             <img
                                 className = { _selectedThumbnail === image.id ? 'thumbnail-selected' : 'thumbnail' }
@@ -219,24 +233,6 @@ function VirtualBackground({ _selectedThumbnail, dispatch, t }: Props) {
                                 onError = { event => event.target.style.display = 'none' }
                                 src = { image.src } />
                         ))}
-                        <Tooltip
-                            content = { t('virtualBackground.uploadImage') }
-                            position = { 'top' }>
-                            <label
-                                className = 'custom-file-upload'
-                                htmlFor = 'file-upload'>
-                                +
-                            </label>
-                            <input
-                                accept = 'image/*'
-                                className = 'file-upload-btn'
-                                id = 'file-upload'
-                                onChange = { e => uploadImage(e.target.files) }
-                                type = 'file' />
-                        </Tooltip>
-                    </div>
-
-                    <div className = 'virtual-background-dialog'>
                         {storedImages.map((image, index) => (
                             <div
                                 className = { 'thumbnail-container' }
@@ -250,7 +246,7 @@ function VirtualBackground({ _selectedThumbnail, dispatch, t }: Props) {
                                     className = { 'delete-image-icon' }
                                     onClick = { () => deleteStoredImage(image) }
                                     size = { 15 }
-                                    src = { IconCancelSelection } />
+                                    src = { IconCloseSmall } />
                             </div>
                         ))}
                     </div>