sort grid mode items

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

@@ -10,6 +10,8 @@ import logger from '/imports/startup/client/logger';
 import playAndRetry from '/imports/utils/mediaElementPlayRetry';
 import VideoService from '/imports/ui/components/video-provider/service';
 import { ACTIONS } from '../../layout/enums';
+import { sortVideoStreams } from '/imports/ui/components/video-provider/stream-sorting';
+const { defaultSorting: DEFAULT_SORTING } = Meteor.settings.public.kurento.cameraSortingModes;
 
 const propTypes = {
   streams: PropTypes.arrayOf(PropTypes.object).isRequired,
@@ -311,39 +313,22 @@ class VideoList extends Component {
     } = this.props;
     const numOfStreams = streams.length;
 
-    const userItems = users ? users.map((user) => {
+    let videoItems = streams;
-      const { userId, name } = user;
+
+    if (users) {
+      videoItems = sortVideoStreams(videoItems.concat(users), DEFAULT_SORTING);
+    }
+
+    return videoItems.map((item) => {
+      const { userId, name } = item;
+      const isStream = !!item.stream;
+      const stream = isStream ? item.stream : null;
+      const key = isStream ? stream : userId;
+      const isFocused = isStream && focusedId === stream && numOfStreams > 2;
 
       return (
         <Styled.VideoListItem
-          key={userId}
+          key={key}
-          focused={false}
-          data-test="webcamVideoItem"
-        >
-          <VideoListItemContainer
-            numOfStreams={numOfStreams}
-            cameraId={userId}
-            userId={userId}
-            name={name}
-            focused={false}
-            isStream={false}
-            onVideoItemMount={() => {
-              this.handleCanvasResize();
-            }}
-            onVideoItemUnmount={onVideoItemUnmount}
-            swapLayout={swapLayout}
-          />
-        </Styled.VideoListItem>
-      );
-    }) : null;
-
-    const videoItems = streams.map((vs) => {
-      const { stream, userId, name } = vs;
-      const isFocused = focusedId === stream && numOfStreams > 2;
-
-      return (
-        <Styled.VideoListItem
-          key={stream}
           focused={isFocused}
           data-test="webcamVideoItem"
         >
@@ -353,21 +338,19 @@ class VideoList extends Component {
             userId={userId}
             name={name}
             focused={isFocused}
-            isStream={true}
+            isStream={isStream}
-            onHandleVideoFocus={handleVideoFocus}
+            onHandleVideoFocus={isStream ? handleVideoFocus : null}
             onVideoItemMount={(videoRef) => {
               this.handleCanvasResize();
-              onVideoItemMount(stream, videoRef);
+              if (isStream) onVideoItemMount(stream, videoRef);
             }}
             onVideoItemUnmount={onVideoItemUnmount}
             swapLayout={swapLayout}
-            onVirtualBgDrop={(type, name, data) => onVirtualBgDrop(stream, type, name, data)}
+            onVirtualBgDrop={(type, name, data) => isStream ? onVirtualBgDrop(stream, type, name, data) : null}
           />
         </Styled.VideoListItem>
       );
     });
-
-    return videoItems.concat(userItems);
   }
 
   render() {