Fix Screenshare alignment and remove improper drag cursor #7869 #7785

bigbluebutton-html5/imports/ui/components/screenshare/styles.scss

@@ -10,8 +10,11 @@
 }
 
 .screenshareContainer{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
   position: relative;
   width: 100%;
   height: 100%;
-  background-color: var(--color-gray-darkest);
 }

bigbluebutton-html5/imports/ui/components/video-provider/component.jsx

@@ -1147,6 +1147,7 @@ class VideoProvider extends Component {
   }
 
   render() {
+    const { swapLayout } = this.props;
     const { socketOpen } = this.state;
     if (!socketOpen) return null;
 
@@ -1161,6 +1162,7 @@ class VideoProvider extends Component {
         getStats={this.getStats}
         stopGettingStats={this.stopGettingStats}
         enableVideoStats={enableVideoStats}
+        swapLayout={swapLayout}
       />
     );
   }

bigbluebutton-html5/imports/ui/components/video-provider/video-list/component.jsx

@@ -195,6 +195,7 @@ class VideoList extends Component {
       getStats,
       stopGettingStats,
       enableVideoStats,
+      swapLayout,
     } = this.props;
     const { focusedId } = this.state;
 
@@ -230,6 +231,7 @@ class VideoList extends Component {
             getStats={(videoRef, callback) => getStats(user.userId, videoRef, callback)}
             stopGettingStats={() => stopGettingStats(user.userId)}
             enableVideoStats={enableVideoStats}
+            swapLayout={swapLayout}
           />
         </div>
       );

bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss

@@ -111,7 +111,6 @@
 .connecting {
   @extend %media-area;
   position: absolute;
-  background-color: var(--color-gray-darkest);
   color: var(--color-white-with-transparency);
   font-size: 2.5rem;
   text-align: center;
@@ -145,7 +144,7 @@
 
 .media {
   @extend %media-area;
-  background-color: var(--color-gray-darkest);
+  background-color: var(--color-gray);
 }
 
 .info {

bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/component.jsx

@@ -182,6 +182,7 @@ class VideoListItem extends Component {
       voiceUser,
       numOfUsers,
       webcamDraggableState,
+      swapLayout,
     } = this.props;
     const availableActions = this.getAvailableActions();
     const enableVideoMenu = Meteor.settings.public.kurento.enableVideoMenu || false;
@@ -208,9 +209,9 @@ class VideoListItem extends Component {
             className={cx({
               [styles.media]: true,
               [styles.cursorGrab]: !webcamDraggableState.dragging
-                && !isFullscreen,
+                && !isFullscreen && !swapLayout,
               [styles.cursorGrabbing]: webcamDraggableState.dragging
-                && !isFullscreen,
+                && !isFullscreen && !swapLayout,
             })}
             ref={(ref) => { this.videoTag = ref; }}
             autoPlay