Properly use LiveKit screen sharing

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}
+      />
     </>
   );
 }