feat(multi-stream) Add fake participant tile for screen share.

prioritize participants with screen shares
support local screen share track
auto pin screen share
support screen share for large video
ensure fake screen share participants are sorted
fix local screen share in vertical filmstrip
fix local screen share in tile mode
use FakeScreenShareParticipant component for screen share thumbnails
ensure changes are behind feature flag and update jsdocs
fix bug where local screen share was not rendering
update receiver constraints to include SS source names
remove fake ss participant creation on track update
fix: handle screenshare muted change and track removal
refactor: update key values for sortedFakeScreenShareParticipants
address PR comments
refactor getter for screenshare tracks
rename state to sortedRemoteFakeScreenShareParticipants

css/filmstrip/_horizontal_filmstrip.scss

@@ -48,7 +48,8 @@
         /**
          * The local video identifier.
          */
-        &#filmstripLocalVideo {
+        &#filmstripLocalVideo,
+        &#filmstripLocalScreenShare {
             align-self: flex-end;
             display: block;
             margin-bottom: 8px;

css/filmstrip/_tile_view_overrides.scss

@@ -2,7 +2,8 @@
  * Various overrides outside of the filmstrip to style the app to support a
  * tiled thumbnail experience.
  */
-.tile-view, .stage-filmstrip {
+.tile-view,
+.stage-filmstrip {
     /**
      * Let the avatar grow with the tile.
      */

css/filmstrip/_vertical_filmstrip.scss

@@ -87,9 +87,27 @@
             .videocontainer {
                 height: 0px;
                 width: 100%;
-    }
+            }
         }
+    }
 
+    #filmstripLocalScreenShare {
+        align-self: initial;
+        margin-bottom: 5px;
+        display: flex;
+        flex-direction: column-reverse;
+        height: auto;
+        justify-content: flex-start;
+        width: 100%;
+
+        #filmstripLocalScreenShareThumbnail {
+            width: calc(100% - 15px);
+
+            .videocontainer {
+                height: 0px;
+                width: 100%;
+            }
+        }
     }
 
     /**
@@ -97,6 +115,7 @@
      * filmstrip from overlapping the left edge of the screen.
      */
     #filmstripLocalVideo,
+    #filmstripLocalScreenShare,
     .remote-videos {
         padding: 0;
     }