Hide screenshare, recording, livestreaming options to non owner participants

custom/fitness-demo/components/Tray/Record.js

@@ -1,6 +1,8 @@
 import React, { useEffect } from 'react';
 
 import { TrayButton } from '@custom/shared/components/Tray';
+import { useCallState } from '@custom/shared/contexts/CallProvider';
+import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
 import { useUIState } from '@custom/shared/contexts/UIStateProvider';
 import { ReactComponent as IconRecord } from '@custom/shared/icons/record-md.svg';
 
@@ -14,8 +16,10 @@ import {
 import { RECORDING_MODAL } from '../Modals/RecordingModal';
 
 export const Tray = () => {
+  const { enableRecording } = useCallState();
   const { openModal } = useUIState();
   const { recordingState } = useRecording();
+  const { localParticipant } = useParticipants();
 
   useEffect(() => {
     console.log(`⏺️ Recording state: ${recordingState}`);
@@ -31,6 +35,9 @@ export const Tray = () => {
     RECORDING_SAVED,
   ].includes(recordingState);
 
+  if (!enableRecording) return null;
+  if (!localParticipant.isOwner) return null;
+
   return (
     <TrayButton
       label={isRecording ? 'Stop' : 'Record'}

custom/fitness-demo/components/Tray/ScreenShare.js

@@ -9,7 +9,7 @@ const MAX_SCREEN_SHARES = 2;
 
 export const ScreenShareTray = () => {
   const { callObject, enableScreenShare } = useCallState();
-  const { screens, participants } = useParticipants();
+  const { screens, participants, localParticipant } = useParticipants();
 
   const isSharingScreen = useMemo(
     () => screens.some((s) => s.isLocal),
@@ -27,6 +27,7 @@ export const ScreenShareTray = () => {
     !isSharingScreen;
 
   if (!enableScreenShare) return null;
+  if (!localParticipant.isOwner) return null;
 
   return (
     <TrayButton

custom/fitness-demo/components/Tray/Stream.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { TrayButton } from '@custom/shared/components/Tray';
+import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
 import { useUIState } from '@custom/shared/contexts/UIStateProvider';
 import { ReactComponent as IconStream } from '@custom/shared/icons/streaming-md.svg';
 
@@ -10,6 +11,9 @@ import { LIVE_STREAMING_MODAL } from '../Modals/LiveStreamingModal';
 export const Stream = () => {
   const { openModal } = useUIState();
   const { isStreaming } = useLiveStreaming();
+  const { localParticipant } = useParticipants();
+
+  if (!localParticipant.isOwner) return null;
 
   return (
     <TrayButton

custom/fitness-demo/components/Tray/View.js

@@ -7,12 +7,14 @@ import { ReactComponent as IconGridView } from '@custom/shared/icons/grid-md.svg
 import { ReactComponent as IconSpeakerView } from '@custom/shared/icons/speaker-view-md.svg';
 
 export const ViewTray = () => {
-  const { participants } = useParticipants();
+  const { participants, localParticipant } = useParticipants();
   const { viewMode, setPreferredViewMode } = useUIState();
 
   const onViewClick = () =>
     setPreferredViewMode(viewMode === VIEW_MODE_SPEAKER ? VIEW_MODE_GRID : VIEW_MODE_SPEAKER);
 
+  if (!localParticipant.isOwner) return null;
+
   return (
     <TrayButton
       label={viewMode === VIEW_MODE_GRID ? 'Speaker': 'Grid'}