From 0b7241082832a3b09dc40790d5632a01436051da Mon Sep 17 00:00:00 2001
From: harshithpabbati <pabbatiharshith@gmail.com>
Date: Fri, 7 Jan 2022 16:57:05 +0530
Subject: [PATCH] Hide screenshare, recording, livestreaming options to non
 owner participants

---
 custom/fitness-demo/components/Tray/Record.js      | 7 +++++++
 custom/fitness-demo/components/Tray/ScreenShare.js | 3 ++-
 custom/fitness-demo/components/Tray/Stream.js      | 4 ++++
 custom/fitness-demo/components/Tray/View.js        | 4 +++-
 4 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/custom/fitness-demo/components/Tray/Record.js b/custom/fitness-demo/components/Tray/Record.js
index b4ac465..9a3b37a 100644
--- a/custom/fitness-demo/components/Tray/Record.js
+++ b/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'}
diff --git a/custom/fitness-demo/components/Tray/ScreenShare.js b/custom/fitness-demo/components/Tray/ScreenShare.js
index d7a3f8d..6321f82 100644
--- a/custom/fitness-demo/components/Tray/ScreenShare.js
+++ b/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
diff --git a/custom/fitness-demo/components/Tray/Stream.js b/custom/fitness-demo/components/Tray/Stream.js
index e998a38..a8e9893 100644
--- a/custom/fitness-demo/components/Tray/Stream.js
+++ b/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
diff --git a/custom/fitness-demo/components/Tray/View.js b/custom/fitness-demo/components/Tray/View.js
index 62828e0..951fe1c 100644
--- a/custom/fitness-demo/components/Tray/View.js
+++ b/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'}