Merge pull request #308 from SableClient/feat/large-room-call-button

add toggle to show call button for large rooms

Author: 7w1

.changeset/feat-large-room-call-button.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Added a toggle to enable/disable showing the call button for large (> 10 member) rooms.

src/app/features/room/RoomViewHeader.tsx

@@ -361,6 +361,8 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
     .getLiveTimeline()
     .getState(EventTimeline.FORWARDS)
     ?.maySendStateEvent('org.matrix.msc3401.call.member', mx.getUserId()!);
+  const [alwaysShowCallButton] = useSetting(settingsAtom, 'alwaysShowCallButton');
+  const shouldShowCallButton = alwaysShowCallButton || room.getJoinedMemberCount() <= 10;
 
   const encryptionEvent = useStateEvent(room, StateEvent.RoomEncryption);
   const encryptedRoom = !!encryptionEvent;
@@ -708,7 +710,7 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
                   </IconButton>
                 )}
               </TooltipProvider>
-              {canUseCalls && <RoomCallButton room={room} />}
+              {canUseCalls && shouldShowCallButton && <RoomCallButton room={room} />}
               <PopOut
                 anchor={pinMenuAnchor}
                 position="Bottom"

src/app/features/settings/general/General.tsx

@@ -823,6 +823,31 @@ function EmojiSelectorThresholdInput() {
   );
 }
 
+function Calls() {
+  const [alwaysShowCallButton, setAlwaysShowCallButton] = useSetting(
+    settingsAtom,
+    'alwaysShowCallButton'
+  );
+
+  return (
+    <Box direction="Column" gap="100">
+      <Text size="L400">Calls</Text>
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          title="Show Call Button for Large Rooms"
+          after={
+            <Switch
+              variant="Primary"
+              value={alwaysShowCallButton}
+              onChange={setAlwaysShowCallButton}
+            />
+          }
+        />
+      </SequenceCard>
+    </Box>
+  );
+}
+
 function Messages() {
   const [hideMembershipEvents, setHideMembershipEvents] = useSetting(
     settingsAtom,
@@ -1078,6 +1103,7 @@ export function General({ requestClose }: GeneralProps) {
               <Gestures isMobile={mobileOrTablet()} />
               <Editor isMobile={mobileOrTablet()} />
               <Messages />
+              <Calls />
             </Box>
           </PageContent>
         </Scroll>

src/app/state/settings.ts

@@ -96,6 +96,7 @@ export interface Settings {
   autoplayStickers: boolean;
   autoplayEmojis: boolean;
   saveStickerEmojiBandwidth: boolean;
+  alwaysShowCallButton: boolean;
 
   // furry stuff
   renderAnimals: boolean;
@@ -176,6 +177,7 @@ const defaultSettings: Settings = {
   autoplayStickers: true,
   autoplayEmojis: true,
   saveStickerEmojiBandwidth: false,
+  alwaysShowCallButton: false,
 
   // furry stuff
   renderAnimals: true,