about sharescreen

[Zeusakos]

i want the main participant to render only when someone share his screen but when i use the context the component renders only in the initiators screen and shows his own camera..The code i used in the Room.tsx.. any help would be much apreciated. thank you in advance

<div>
      {isSharingScreen &&
    <div
      className={clsx(classes.container, {
        [classes.rightDrawerOpen]: isChatWindowOpen || isBackgroundSelectionOpen,
      })}
    >
      <MainParticipant/>
      <ParticipantList />
      <ChatWindow />
      <BackgroundSelectionDialog />
    </div>
      }
      {!isSharingScreen &&
       <div
       className={clsx(classes.container, {
         [classes.rightDrawerOpen]: isChatWindowOpen || isBackgroundSelectionOpen,
       })}
     >

       <ParticipantList />
       <ChatWindow />
       <BackgroundSelectionDialog />
     </div>

      }

    </div>
  );
}

[timmydoza]

Hi @Zeusakos - thanks for the question!

Your approach looks good, but I don't think that isSharingScreen is the value that you want. Luckily we have another hook that should work out for you.

The isSharingScreen value is only true when the Local Participant is sharing their screen. It will be false when any other user is sharing their screen.

To see if any other participants are sharing their screen, you can use the useScreenShareParticipant. This hook will return the Participant object for the current user (including the Local Participant) who is sharing their screen, or undefined if there is none. I think you could simply use the value returned by this hook instead of isSharingScreen.

Something like this could work in Room.tsx:

export default function Room() {
  const classes = useStyles();
  const { isChatWindowOpen } = useChatContext();
  const { isBackgroundSelectionOpen } = useVideoContext();

  const screenShareParticipant = useScreenShareParticipant();

  return (
    <div
      className={clsx(classes.container, {
        [classes.rightDrawerOpen]: isChatWindowOpen || isBackgroundSelectionOpen,
      })}
    >
      {screenShareParticipant && <MainParticipant />}
      <ParticipantList />
      <ChatWindow />
      <BackgroundSelectionDialog />
    </div>
  );
}

Let me know if that works out for you - and thanks again for the question!

[Zeusakos]

it works thank you very much!

[timmydoza]

Great to hear!!