Properly use LiveKit screen sharing

src/room/InCallView.tsx

@@ -72,6 +72,7 @@ import { RageshakeRequestModal } from "./RageshakeRequestModal";
 import { MatrixInfo } from "./VideoPreview";
 import { useJoinRule } from "./useJoinRule";
 import { ParticipantInfo } from "./useGroupCall";
+import { TileContent } from "../video-grid/VideoTile";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 // There is currently a bug in Safari our our code with cloning and sending MediaStreams
@@ -234,18 +235,6 @@ export function InCallView({
   const reducedControls = boundsValid && bounds.width <= 400;
   const noControls = reducedControls && bounds.height <= 400;
 
-  const items = useParticipantTiles(livekitRoom, participants, {
-    userId: client.getUserId()!,
-    deviceId: client.getDeviceId()!,
-  });
-
-  // The maximised participant: the focused (active) participant if the
-  // window is too small to show everyone.
-  const maximisedParticipant = useMemo(
-    () => (noControls ? items.find((item) => item.focused) ?? null : null),
-    [noControls, items]
-  );
-
   const renderAvatar = useCallback(
     (roomMember: RoomMember, width: number, height: number) => {
       const avatarUrl = roomMember.getMxcAvatarUrl();
@@ -266,6 +255,8 @@ export function InCallView({
 
   const prefersReducedMotion = usePrefersReducedMotion();
 
+  const items = useParticipantTiles(livekitRoom, participants);
+
   const renderContent = (): JSX.Element => {
     if (items.length === 0) {
       return (
@@ -274,18 +265,6 @@ export function InCallView({
         </div>
       );
     }
-    if (maximisedParticipant) {
-      return (
-        <VideoTileContainer
-          height={bounds.height}
-          width={bounds.width}
-          key={maximisedParticipant.id}
-          item={maximisedParticipant.data}
-          getAvatar={renderAvatar}
-          maximised={Boolean(maximisedParticipant)}
-        />
-      );
-    }
 
     return (
       <VideoGrid
@@ -296,7 +275,6 @@ export function InCallView({
         {(child) => (
           <VideoTileContainer
             getAvatar={renderAvatar}
-            maximised={false}
             item={child.data}
             {...child}
           />
@@ -311,7 +289,7 @@ export function InCallView({
   } = useRageshakeRequestModal(groupCall.room.roomId);
 
   const containerClasses = classNames(styles.inRoom, {
-    [styles.maximised]: maximisedParticipant,
+    [styles.maximised]: undefined,
   });
 
   let footer: JSX.Element | null;
@@ -337,16 +315,14 @@ export function InCallView({
             onPress={toggleScreenSharing}
           />
         )}
-        {!maximisedParticipant && (
-          <OverflowMenu
-            roomId={matrixInfo.roomId}
-            mediaDevices={mediaDevices}
-            inCall
-            showInvite={joinRule === JoinRule.Public}
-            feedbackModalState={feedbackModalState}
-            feedbackModalProps={feedbackModalProps}
-          />
-        )}
+        <OverflowMenu
+          roomId={matrixInfo.roomId}
+          mediaDevices={mediaDevices}
+          inCall
+          showInvite={joinRule === JoinRule.Public}
+          feedbackModalState={feedbackModalState}
+          feedbackModalProps={feedbackModalProps}
+        />
         <HangupButton onPress={onLeave} />
       </div>
     );
@@ -354,7 +330,7 @@ export function InCallView({
 
   return (
     <div className={containerClasses} ref={containerRef}>
-      {!hideHeader && !maximisedParticipant && (
+      {!hideHeader && (
         <Header>
           <LeftNav>
             <RoomHeaderInfo
@@ -389,43 +365,54 @@ export function InCallView({
   );
 }
 
-interface ParticipantID {
-  userId: string;
-  deviceId: string;
-}
-
 function useParticipantTiles(
   livekitRoom: Room,
-  participants: Map<RoomMember, Map<string, ParticipantInfo>>,
-  local: ParticipantID
+  participants: Map<RoomMember, Map<string, ParticipantInfo>>
 ): TileDescriptor<ItemData>[] {
   const sfuParticipants = useParticipants({
     room: livekitRoom,
   });
 
-  const [localUserId, localDeviceId] = [local.userId, local.deviceId];
-
   const items = useMemo(() => {
     const tiles: TileDescriptor<ItemData>[] = [];
+
     for (const [member, participantMap] of participants) {
       for (const [deviceId] of participantMap) {
         const id = `${member.userId}:${deviceId}`;
         const sfuParticipant = sfuParticipants.find((p) => p.identity === id);
 
-        const hasScreenShare =
-          sfuParticipant?.getTrack(Track.Source.ScreenShare) !== undefined;
+        // Skip rendering participants that did not connect to the SFU.
+        if (!sfuParticipant) {
+          continue;
+        }
 
-        const descriptor = {
+        const userMediaTile = {
           id,
-          focused: hasScreenShare && !sfuParticipant?.isLocal,
-          local: member.userId == localUserId && deviceId == localDeviceId,
+          focused: false,
+          local: sfuParticipant.isLocal,
           data: {
             member,
             sfuParticipant,
+            content: TileContent.UserMedia,
           },
         };
 
-        tiles.push(descriptor);
+        // Add a tile for user media.
+        tiles.push(userMediaTile);
+
+        // If there is a screen sharing enabled for this participant, create a tile for it as well.
+        if (sfuParticipant.isScreenShareEnabled) {
+          const screenShareTile = {
+            ...userMediaTile,
+            id: `${id}:screen-share`,
+            focused: true,
+            data: {
+              ...userMediaTile.data,
+              content: TileContent.ScreenShare,
+            },
+          };
+          tiles.push(screenShareTile);
+        }
       }
     }
 
@@ -434,7 +421,7 @@ function useParticipantTiles(
     );
 
     return tiles;
-  }, [localUserId, localDeviceId, participants, sfuParticipants]);
+  }, [participants, sfuParticipants]);
 
   return items;
 }

src/video-grid/VideoTile.tsx

@@ -29,20 +29,29 @@ import styles from "./VideoTile.module.css";
 import { ReactComponent as MicMutedIcon } from "../icons/MicMuted.svg";
 import { ReactComponent as VideoMutedIcon } from "../icons/VideoMuted.svg";
 
+export enum TileContent {
+  UserMedia = "user-media",
+  ScreenShare = "screen-share",
+}
+
 interface Props {
-  name: string;
   avatar?: JSX.Element;
   className?: string;
+
+  name: string;
   sfuParticipant: LocalParticipant | RemoteParticipant;
+  content: TileContent;
 }
 
 export const VideoTile = forwardRef<HTMLDivElement, Props>(
-  ({ name, avatar, className, sfuParticipant, ...rest }, ref) => {
+  ({ name, avatar, className, sfuParticipant, content, ...rest }, ref) => {
     const { t } = useTranslation();
 
     const audioEl = React.useRef<HTMLAudioElement>(null);
     const { isMuted: microphoneMuted } = useMediaTrack(
-      Track.Source.Microphone,
+      content === TileContent.UserMedia
+        ? Track.Source.Microphone
+        : Track.Source.ScreenShareAudio,
       sfuParticipant,
       {
         element: audioEl,
@@ -56,7 +65,6 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
           [styles.speaking]: sfuParticipant.isSpeaking,
           [styles.muted]: microphoneMuted,
           [styles.screenshare]: false,
-          [styles.maximised]: false,
         })}
         ref={ref}
         {...rest}
@@ -80,7 +88,14 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
               <ConnectionQualityIndicator participant={sfuParticipant} />
             </div>
           ))}
-        <VideoTrack participant={sfuParticipant} source={Track.Source.Camera} />
+        <VideoTrack
+          participant={sfuParticipant}
+          source={
+            content === TileContent.UserMedia
+              ? Track.Source.Camera
+              : Track.Source.ScreenShare
+          }
+        />
         <audio ref={audioEl} />
       </animated.div>
     );

src/video-grid/VideoTileContainer.tsx

@@ -19,11 +19,12 @@ import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { LocalParticipant, RemoteParticipant } from "livekit-client";
 
 import { useRoomMemberName } from "./useRoomMemberName";
-import { VideoTile } from "./VideoTile";
+import { TileContent, VideoTile } from "./VideoTile";
 
 export interface ItemData {
   member: RoomMember;
-  sfuParticipant?: LocalParticipant | RemoteParticipant;
+  sfuParticipant: LocalParticipant | RemoteParticipant;
+  content: TileContent;
 }
 
 interface Props {
@@ -35,7 +36,6 @@ interface Props {
     width: number,
     height: number
   ) => JSX.Element;
-  maximised: boolean;
 }
 
 export function VideoTileContainer({
@@ -43,22 +43,19 @@ export function VideoTileContainer({
   width,
   height,
   getAvatar,
-  maximised,
   ...rest
 }: Props) {
   const { rawDisplayName } = useRoomMemberName(item.member);
 
   return (
     <>
-      {!item.sfuParticipant && null}
-      {item.sfuParticipant && (
-        <VideoTile
-          sfuParticipant={item.sfuParticipant}
-          name={rawDisplayName}
-          avatar={getAvatar && getAvatar(item.member, width, height)}
-          {...rest}
-        />
-      )}
+      <VideoTile
+        sfuParticipant={item.sfuParticipant}
+        content={item.content}
+        name={rawDisplayName}
+        avatar={getAvatar && getAvatar(item.member, width, height)}
+        {...rest}
+      />
     </>
   );
 }