From a67bcc4c0702aa38c373736151c77c79ac91e77c Mon Sep 17 00:00:00 2001
From: Oliver Lazoroski <oliver.lazoroski@gmail.com>
Date: Thu, 20 Nov 2025 12:15:34 +0100
Subject: [PATCH] chore: incoming video selector for the bare join page

---
 .../components/IncomingVideoSettings.tsx      |  2 +
 .../pages/bare/join/[callId].tsx              | 47 ++++++++++++++++++-
 2 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/sample-apps/react/react-dogfood/components/IncomingVideoSettings.tsx b/sample-apps/react/react-dogfood/components/IncomingVideoSettings.tsx
index 843ca50786..4163f840e8 100644
--- a/sample-apps/react/react-dogfood/components/IncomingVideoSettings.tsx
+++ b/sample-apps/react/react-dogfood/components/IncomingVideoSettings.tsx
@@ -85,6 +85,8 @@ const IncomingVideoSettingsMenu = (props: {
             className={clsx('rd__button rd__button--align-left', {
               'rd__button--primary': value === props.value,
             })}
+            type="button"
+            data-testid={`incoming-video-resolution-${value}`}
             onClick={() => props.onChange(value as IncomingVideoSetting)}
           >
             <span className="str-video__dropdown-label">
diff --git a/sample-apps/react/react-dogfood/pages/bare/join/[callId].tsx b/sample-apps/react/react-dogfood/pages/bare/join/[callId].tsx
index cb5d75db7f..7f088534fe 100644
--- a/sample-apps/react/react-dogfood/pages/bare/join/[callId].tsx
+++ b/sample-apps/react/react-dogfood/pages/bare/join/[callId].tsx
@@ -1,13 +1,21 @@
 import {
   Call,
-  CallControls,
   CallingState,
+  CancelCallButton,
   Icon,
+  OwnCapability,
   PreferredCodec,
+  ReactionsButton,
+  RecordCallButton,
+  Restricted,
+  ScreenShareButton,
   SpeakerLayout,
+  SpeakingWhileMutedNotification,
   StreamCall,
   StreamVideo,
   StreamVideoClient,
+  ToggleAudioPublishingButton,
+  ToggleVideoPublishingButton,
   useCall,
   useCallStateHooks,
 } from '@stream-io/video-react-sdk';
@@ -20,6 +28,8 @@ import {
   getServerSideCredentialsProps,
   ServerSideCredentialsProps,
 } from '../../../lib/getServerSideCredentialsProps';
+import { IncomingVideoSettingsButton } from '../../../components/IncomingVideoSettings';
+import appTranslations from '../../../translations';
 
 export default function BareCallRoom(props: ServerSideCredentialsProps) {
   const { apiKey, userToken, user } = props;
@@ -100,7 +110,11 @@ export default function BareCallRoom(props: ServerSideCredentialsProps) {
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
       </Head>
 
-      <StreamVideo client={client}>
+      <StreamVideo
+        client={client}
+        language="en"
+        translationsOverrides={appTranslations}
+      >
         <StreamCall call={call}>
           <Stage />
         </StreamCall>
@@ -183,4 +197,33 @@ const Lobby = (props: { onJoin: () => void }) => {
   );
 };
 
+const CallControls = () => (
+  <div className="str-video__call-controls">
+    <Restricted requiredGrants={[OwnCapability.SEND_AUDIO]}>
+      <SpeakingWhileMutedNotification>
+        <ToggleAudioPublishingButton />
+      </SpeakingWhileMutedNotification>
+    </Restricted>
+    <Restricted requiredGrants={[OwnCapability.SEND_VIDEO]}>
+      <ToggleVideoPublishingButton />
+    </Restricted>
+    <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>
+      <ReactionsButton />
+    </Restricted>
+    <Restricted requiredGrants={[OwnCapability.SCREENSHARE]}>
+      <ScreenShareButton />
+    </Restricted>
+    <Restricted
+      requiredGrants={[
+        OwnCapability.START_RECORD_CALL,
+        OwnCapability.STOP_RECORD_CALL,
+      ]}
+    >
+      <RecordCallButton />
+    </Restricted>
+    <IncomingVideoSettingsButton />
+    <CancelCallButton />
+  </div>
+);
+
 export const getServerSideProps = getServerSideCredentialsProps;