fix(virtual-background) Fix virtual backgrounds list (#11833)

This reverts commit 8f1fae79e4.

WorkD needs to be adjusted, we'll bring it in on the next release.

interface_config.js

@@ -144,7 +144,7 @@ var interfaceConfig = {
     RECENT_LIST_ENABLED: true,
     REMOTE_THUMBNAIL_RATIO: 1, // 1:1
 
-    SETTINGS_SECTIONS: [ 'devices', 'language', 'moderator', 'profile', 'calendar', 'sounds', 'more' ],
+    SETTINGS_SECTIONS: [ 'devices', 'language', 'moderator', 'profile', 'calendar', 'sounds' ],
 
     /**
      * Specify which sharing features should be displayed. If the value is not set

package-lock.json

@@ -74,7 +74,7 @@
         "js-md5": "0.6.1",
         "js-sha512": "0.8.0",
         "jwt-decode": "2.2.0",
-        "lib-jitsi-meet": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1461.0.0+96664436/lib-jitsi-meet.tgz",
+        "lib-jitsi-meet": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1462.0.0+bac6c6d7/lib-jitsi-meet.tgz",
         "lodash": "4.17.21",
         "moment": "2.29.2",
         "moment-duration-format": "2.2.2",
@@ -12169,8 +12169,8 @@
     },
     "node_modules/lib-jitsi-meet": {
       "version": "0.0.0",
-      "resolved": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1461.0.0+96664436/lib-jitsi-meet.tgz",
-      "integrity": "sha512-DbtYpqJ9qsZtugeQIGDEmQOactpGQLSjCHd2obVU+1gdYxp2N6STVTxx7pw7zzlvW7S2pwkIXK/b5B6NFrt2iA==",
+      "resolved": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1462.0.0+bac6c6d7/lib-jitsi-meet.tgz",
+      "integrity": "sha512-1UilEHIxnjsfKQhnFq6JrcaUW1/FLpI9XFsOOlbOf4UDvKW6UlxQrVR+htZpsU+znJfOriGN3lkyg4nW6AwBcQ==",
       "license": "Apache-2.0",
       "dependencies": {
         "@jitsi/js-utils": "2.0.0",
@@ -29375,8 +29375,8 @@
       }
     },
     "lib-jitsi-meet": {
-      "version": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1461.0.0+96664436/lib-jitsi-meet.tgz",
-      "integrity": "sha512-DbtYpqJ9qsZtugeQIGDEmQOactpGQLSjCHd2obVU+1gdYxp2N6STVTxx7pw7zzlvW7S2pwkIXK/b5B6NFrt2iA==",
+      "version": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1462.0.0+bac6c6d7/lib-jitsi-meet.tgz",
+      "integrity": "sha512-1UilEHIxnjsfKQhnFq6JrcaUW1/FLpI9XFsOOlbOf4UDvKW6UlxQrVR+htZpsU+znJfOriGN3lkyg4nW6AwBcQ==",
       "requires": {
         "@jitsi/js-utils": "2.0.0",
         "@jitsi/logger": "2.0.0",

package.json

@@ -79,7 +79,7 @@
     "js-md5": "0.6.1",
     "js-sha512": "0.8.0",
     "jwt-decode": "2.2.0",
-    "lib-jitsi-meet": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1461.0.0+96664436/lib-jitsi-meet.tgz",
+    "lib-jitsi-meet": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1462.0.0+bac6c6d7/lib-jitsi-meet.tgz",
     "lodash": "4.17.21",
     "moment": "2.29.2",
     "moment-duration-format": "2.2.2",

react/features/settings/components/web/SettingsDialog.js

@@ -268,8 +268,7 @@ function _mapStateToProps(state, ownProps) {
     const moderatorTabProps = getModeratorTabProps(state);
     const { showModeratorSettings } = moderatorTabProps;
     const { showLanguageSettings, showNotificationsSettings, showPrejoinSettings } = moreTabProps;
-    const showMoreTab
-        = configuredTabs.includes('more') && (showLanguageSettings || showNotificationsSettings || showPrejoinSettings);
+    const showMoreTab = showLanguageSettings || showNotificationsSettings || showPrejoinSettings;
     const showProfileSettings
         = configuredTabs.includes('profile') && !state['features/base/config'].disableProfile;
     const showCalendarSettings
@@ -371,7 +370,7 @@ function _mapStateToProps(state, ownProps) {
                     currentLanguage: tabState?.currentLanguage,
                     hideSelfView: tabState?.hideSelfView,
                     showPrejoinPage: tabState?.showPrejoinPage,
-                    enabledNotifications: tabState?.enabledNotifications,
+                    enabledNotifications: tabState?.enabledNotifications || {},
                     maxStageParticipants: tabState?.maxStageParticipants
                 };
             },

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

@@ -110,7 +110,12 @@ const VirtualBackgroundDialog = translate(connect(_mapStateToProps)(VirtualBackg
 
 const useStyles = makeStyles(theme => {
     return {
+        container: {
+            display: 'flex',
+            flexDirection: 'column'
+        },
         dialog: {
+            alignSelf: 'flex-start',
             marginLeft: '-10px',
             position: 'relative',
             maxHeight: '300px',
@@ -198,10 +203,11 @@ const useStyles = makeStyles(theme => {
                     left: '51px'
                 }
             },
-            '@media (max-width: 360px)': {
-                gridTemplateColumns: 'auto auto auto'
+            '@media (max-width: 720px)': {
+                gridTemplateColumns: 'auto auto auto auto'
             },
             '@media (max-width: 632px)': {
+                gridTemplateColumns: 'auto auto auto auto auto',
                 fontSize: '1.5vw',
 
                 [[ '& .desktop-share:hover',
@@ -229,6 +235,12 @@ const useStyles = makeStyles(theme => {
                     height: '60px',
                     width: '60px'
                 }
+            },
+            '@media (max-width: 360px)': {
+                gridTemplateColumns: 'auto auto auto auto'
+            },
+            '@media (max-width: 319px)': {
+                gridTemplateColumns: 'auto auto'
             }
         },
         dialogMarginTop: {
@@ -527,7 +539,7 @@ function VirtualBackground({
                         size = 'medium' />
                 </div>
             ) : (
-                <div>
+                <div className = { classes.container }>
                     {_showUploadButton
                     && <UploadImageButton
                         setLoading = { setLoading }