Merge branch 'feature/WD-1079' into fast-reconnects

packages/client/src/__tests__/server-side/call.test.ts

@@ -58,7 +58,11 @@ describe('call API', () => {
   });
 
   it('RTMP address', async () => {
-    const resp = await call.getOrCreate();
+    const resp = await call.getOrCreate({
+      data: {
+        created_by_id: 'john',
+      },
+    });
     const address = resp.call.ingress.rtmp.address;
 
     expect(address).toBeDefined();

packages/react-sdk/src/components/Button/CompositeButton.tsx

@@ -33,7 +33,12 @@ export const CompositeButton = forwardRef<
     ref,
   ) => {
     return (
-      <div className="str-video__composite-button" ref={ref}>
+      <div
+        className={clsx('str-video__composite-button', {
+          'str-video__composite-button--caption': caption,
+        })}
+        ref={ref}
+      >
         <div
           className={clsx('str-video__composite-button__button-group', {
             'str-video__composite-button__button-group--active': active,

packages/react-sdk/src/components/DeviceSettings/DeviceSelector.tsx

@@ -1,14 +1,14 @@
 import clsx from 'clsx';
 import { ChangeEventHandler, useCallback } from 'react';
 
-import { Icon } from '../Icon';
+import { generateCode } from '../../utilities';
 
 import { DefaultDropDownSelectOption, DropDownSelect } from '../DropdownSelect';
 
 type DeviceSelectorOptionProps = {
   id: string;
   label: string;
-  name: string;
+  name?: string;
   selected?: boolean;
   value: string;
   disabled?: boolean;
@@ -49,36 +49,10 @@ const DeviceSelectorOption = ({
   );
 };
 
-const DeviceDropdownSelectorOption = ({
-  label,
-  selected,
-  icon,
-}: {
-  label: string;
-  selected: boolean;
-  icon: string;
-}) => {
-  return (
-    <label
-      className={clsx('str-video__device-settings__option', {
-        'str-video__device-settings__option--selected': selected,
-      })}
-    >
-      <Icon
-        className={clsx('str-video__device-settings__icon', {
-          'str-video__device-settings__icon--selected': selected,
-        })}
-        icon={icon}
-      />
-      {label}
-    </label>
-  );
-};
-
 export const DeviceSelectorList = (props: {
   devices: MediaDeviceInfo[];
   selectedDeviceId?: string;
-  title: string;
+  title?: string;
   onChange?: (deviceId: string) => void;
 }) => {
   const {
@@ -87,7 +61,8 @@ export const DeviceSelectorList = (props: {
     title,
     onChange,
   } = props;
-  const inputGroupName = title.replace(' ', '-').toLowerCase();
+  const inputGroupName =
+    title?.replace(' ', '-').toLowerCase() || generateCode();
 
   // sometimes the browser (Chrome) will report the system-default device
   // with an id of 'default'. In case when it doesn't, we'll select the first
@@ -102,9 +77,11 @@ export const DeviceSelectorList = (props: {
 
   return (
     <div className="str-video__device-settings__device-kind">
-      <div className="str-video__device-settings__device-selector-title">
-        {title}
-      </div>
+      {title && (
+        <div className="str-video__device-settings__device-selector-title">
+          {title}
+        </div>
+      )}
       {!devices.length ? (
         <DeviceSelectorOption
           id={`${inputGroupName}--default`}
@@ -139,7 +116,7 @@ export const DeviceSelectorList = (props: {
 export const DeviceSelectorDropdown = (props: {
   devices: MediaDeviceInfo[];
   selectedDeviceId?: string;
-  title: string;
+  title?: string;
   onChange?: (deviceId: string) => void;
   visualType?: 'list' | 'dropdown';
   icon: string;
@@ -151,7 +128,6 @@ export const DeviceSelectorDropdown = (props: {
     title,
     onChange,
     icon,
-    placeholder,
   } = props;
 
   // sometimes the browser (Chrome) will report the system-default device
@@ -207,7 +183,7 @@ export const DeviceSelectorDropdown = (props: {
 export const DeviceSelector = (props: {
   devices: MediaDeviceInfo[];
   selectedDeviceId?: string;
-  title: string;
+  title?: string;
   onChange?: (deviceId: string) => void;
   visualType?: 'list' | 'dropdown';
   icon: string;

packages/react-sdk/src/components/DeviceSettings/DeviceSelectorAudio.tsx

@@ -1,4 +1,4 @@
-import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
 import { DeviceSelector } from './DeviceSelector';
 
 export type DeviceSelectorAudioInputProps = {
@@ -10,7 +10,6 @@ export const DeviceSelectorAudioInput = ({
   title,
   visualType,
 }: DeviceSelectorAudioInputProps) => {
-  const { t } = useI18n();
   const { useMicrophoneState } = useCallStateHooks();
   const { microphone, selectedDevice, devices } = useMicrophoneState();
 
@@ -21,7 +20,7 @@ export const DeviceSelectorAudioInput = ({
       onChange={async (deviceId) => {
         await microphone.select(deviceId);
       }}
-      title={title || t('Select a Mic')}
+      title={title}
       visualType={visualType}
       icon={'mic'}
     />
@@ -37,7 +36,6 @@ export const DeviceSelectorAudioOutput = ({
   title,
   visualType,
 }: DeviceSelectorAudioOutputProps) => {
-  const { t } = useI18n();
   const { useSpeakerState } = useCallStateHooks();
   const { speaker, selectedDevice, devices, isDeviceSelectionSupported } =
     useSpeakerState();
@@ -51,7 +49,7 @@ export const DeviceSelectorAudioOutput = ({
       onChange={(deviceId) => {
         speaker.select(deviceId);
       }}
-      title={title || t('Select Speakers')}
+      title={title}
       icon="speaker"
       visualType={visualType}
     />

packages/react-sdk/src/components/DeviceSettings/DeviceSelectorVideo.tsx

@@ -1,5 +1,5 @@
 import { DeviceSelector } from './DeviceSelector';
-import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
 
 export type DeviceSelectorVideoProps = {
   title?: string;
@@ -10,7 +10,6 @@ export const DeviceSelectorVideo = ({
   title,
   visualType,
 }: DeviceSelectorVideoProps) => {
-  const { t } = useI18n();
   const { useCameraState } = useCallStateHooks();
   const { camera, devices, selectedDevice } = useCameraState();
 
@@ -21,7 +20,7 @@ export const DeviceSelectorVideo = ({
       onChange={async (deviceId) => {
         await camera.select(deviceId);
       }}
-      title={title || t('Select a Camera')}
+      title={title}
       visualType={visualType}
       icon="camera"
     />

packages/react-sdk/src/components/DeviceSettings/DeviceSettings.tsx

@@ -25,13 +25,16 @@ export const DeviceSettings = ({ visualType = MenuVisualType.MENU }) => {
   );
 };
 
-const Menu = () => (
-  <div className="str-video__device-settings">
-    <DeviceSelectorVideo />
-    <DeviceSelectorAudioInput />
-    <DeviceSelectorAudioOutput />
-  </div>
-);
+const Menu = () => {
+  const { t } = useI18n();
+  return (
+    <div className="str-video__device-settings">
+      <DeviceSelectorVideo title={t('Select a Camera')} />
+      <DeviceSelectorAudioInput title={t('Select a Mic')} />
+      <DeviceSelectorAudioOutput title={t('Select Speakers')} />
+    </div>
+  );
+};
 
 const ToggleMenuButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
   ({ menuShown }, ref) => {

packages/react-sdk/src/utilities/index.ts

@@ -1,3 +1,4 @@
 export * from './isComponentType';
 export * from './chunk';
 export * from './applyElementToRef';
+export * from './random';

packages/react-sdk/src/utilities/random.ts

@@ -0,0 +1,13 @@
+export function getRandomUppercaseChar() {
+  var r = Math.floor(Math.random() * 26);
+  return String.fromCharCode(65 + r);
+}
+
+export function generateCode() {
+  var prefix = new Array(2)
+      .fill(() => getRandomUppercaseChar())
+      .map(() => getRandomUppercaseChar())
+      .join(''),
+    integer = Math.floor(Math.random() * 9999 * 7);
+  return prefix + integer;
+}

packages/styling/src/Button/Button-layout.scss

@@ -33,11 +33,14 @@
 
 .str-video__composite-button {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: 0.25rem;
   height: 100%;
 
+  &--caption {
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
   .str-video__composite-button__button-group {
     display: flex;
     align-items: center;

packages/styling/src/DeviceSettings/DeviceSettings-layout.scss

@@ -62,12 +62,16 @@
     border-radius: var(--str-video__border-radius-lg);
     background-color: var(--str-video__button-primary-base);
     padding: var(--str-video__spacing-xs) var(--str-video__spacing-md);
-    margin-top: 8px;
+
     gap: 8px;
 
     font-weight: 600;
     font-size: var(--str-video__font-size-sm);
 
+    &:not(:first-of-type) {
+      margin-top: 8px;
+    }
+
     &__icon {
       &--selected {
         background-color: var(--str-video__brand-color1);

packages/styling/src/Icon/Icon-theme.scss

@@ -31,6 +31,11 @@
     -webkit-mask-image: var(--str-video__icon--mediation);
   }
 
+  &--copy {
+    mask-image: var(--str-video__icon--copy);
+    -webkit-mask-image: var(--str-video__icon--copy);
+  }
+
   &--layout-speaker-bottom {
     mask-image: var(--str-video__icon--layout-speaker-bottom);
     -webkit-mask-image: var(--str-video__icon--layout-speaker-bottom);

packages/styling/src/_global-theme-variables.scss

@@ -133,7 +133,7 @@
   --str-video__icon--connection-quality-poor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzMiIGhlaWdodD0iMzMiIHZpZXdCb3g9IjAgMCAzMyAzMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuMjU0ODgzIDYuMjVDMC4yNTQ4ODMgMi45MzYyOSAyLjk0MTE3IDAuMjUgNi4yNTQ4OCAwLjI1SDMyLjI1NDlWMjYuMjVDMzIuMjU0OSAyOS41NjM3IDI5LjU2ODYgMzIuMjUgMjYuMjU0OSAzMi4yNUgwLjI1NDg4M1Y2LjI1WiIgZmlsbD0iIzBDMEQwRSIgZmlsbC1vcGFjaXR5PSIwLjY1Ii8+CjxwYXRoIGQ9Ik0xNi4yNTQ5IDIwLjI1TDE2LjI1NDkgMTUuMjUiIHN0cm9rZT0iI0UzRTRFNSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTExLjI1NDkgMjAuMjVMMTEuMjU0OSAxOC4yNSIgc3Ryb2tlPSIjREM0MzNCIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMjEuMjU0OSAyMC4yNUwyMS4yNTQ5IDEyLjI1IiBzdHJva2U9IiNFM0U0RTUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=');
   --str-video__icon--connection-quality-good: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzMiIGhlaWdodD0iMzMiIHZpZXdCb3g9IjAgMCAzMyAzMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuOTI0ODA1IDYuMjVDMC45MjQ4MDUgMi45MzYyOSAzLjYxMTEgMC4yNSA2LjkyNDggMC4yNUgzMi45MjQ4VjI2LjI1QzMyLjkyNDggMjkuNTYzNyAzMC4yMzg1IDMyLjI1IDI2LjkyNDggMzIuMjVIMC45MjQ4MDVWNi4yNVoiIGZpbGw9IiMwQzBEMEUiIGZpbGwtb3BhY2l0eT0iMC42NSIvPgo8cGF0aCBkPSJNMTYuOTI0OCAyMC4yNUwxNi45MjQ4IDE1LjI1IiBzdHJva2U9IiMwMEUyQTEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xMS45MjQ4IDIwLjI1TDExLjkyNDggMTguMjUiIHN0cm9rZT0iIzAwRTJBMSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTIxLjkyNDggMjAuMjVMMjEuOTI0OCAxMi4yNSIgc3Ryb2tlPSIjRTNFNEU1IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');
   --str-video__icon--connection-quality-excellent: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzMiIGhlaWdodD0iMzMiIHZpZXdCb3g9IjAgMCAzMyAzMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuMjU0ODgzIDYuMjVDMC4yNTQ4ODMgMi45MzYyOSAyLjk0MTE3IDAuMjUgNi4yNTQ4OCAwLjI1SDMyLjI1NDlWMjYuMjVDMzIuMjU0OSAyOS41NjM3IDI5LjU2ODYgMzIuMjUgMjYuMjU0OSAzMi4yNUgwLjI1NDg4M1Y2LjI1WiIgZmlsbD0iIzBDMEQwRSIgZmlsbC1vcGFjaXR5PSIwLjY1Ii8+CjxwYXRoIGQ9Ik0xNi4yNTQ5IDIwLjI1TDE2LjI1NDkgMTUuMjUiIHN0cm9rZT0iIzAwRTJBMSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTExLjI1NDkgMjAuMjVMMTEuMjU0OSAxOC4yNSIgc3Ryb2tlPSIjMDBFMkExIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMjEuMjU0OSAyMC4yNUwyMS4yNTQ5IDEyLjI1IiBzdHJva2U9IiMwMEUyQTEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=');
-  --str-video__icon--copy: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0zLjUgMCAxOSAxOSI+PHBhdGggZD0iTTExLjQxNSA1LjA2OHY5LjE2YS40NjMuNDYzIDAgMCAxLS40NjIuNDYxSDkuNDc3djEuNDc3YS40NjMuNDYzIDAgMCAxLS40NjIuNDYySDEuMDQ3YS40NjMuNDYzIDAgMCAxLS40NjItLjQ2MlY0Ljk3NmEuNDYzLjQ2MyAwIDAgMSAuNDYyLS40NjJoMS40NzZWMy4wMzdhLjQ2My40NjMgMCAwIDEgLjQ2Mi0uNDYyaDUuOTM3ek04LjM2OSA3Ljg3NEg2LjYyOGEuNTI5LjUyOSAwIDAgMS0uNTI3LS41MjdWNS42MjJIMS42OTN2OS44OTdIOC4zN3ptLTQuNzM3LTQuMTl2LjgzaDMuMzUybDEuMDk1IDEuMDk1YS41MTguNTE4IDAgMCAxLS4wNC0uMlYzLjY4NHptNS44NDUgMy4zMjN2Ni41NzRoLjgzVjUuOTM2aC0xLjc0YS41MTcuNTE3IDAgMCAxLS4yLS4wNHoiLz48L3N2Zz4K');
+  --str-video__icon--copy: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNSAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9ImNvcHlfYWxsIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTE4Ljk2NDggMi40OTY1OEg5Ljk2NDg0QzguODY0ODQgMi40OTY1OCA3Ljk2NDg0IDMuMzk2NTggNy45NjQ4NCA0LjQ5NjU4VjE2LjQ5NjZDNy45NjQ4NCAxNy41OTY2IDguODY0ODQgMTguNDk2NiA5Ljk2NDg0IDE4LjQ5NjZIMTguOTY0OEMyMC4wNjQ4IDE4LjQ5NjYgMjAuOTY0OCAxNy41OTY2IDIwLjk2NDggMTYuNDk2NlY0LjQ5NjU4QzIwLjk2NDggMy4zOTY1OCAyMC4wNjQ4IDIuNDk2NTggMTguOTY0OCAyLjQ5NjU4Wk0xOC45NjQ4IDE2LjQ5NjZIOS45NjQ4NFY0LjQ5NjU4SDE4Ljk2NDhWMTYuNDk2NlpNMy45NjQ4NCAxNS40OTY2VjEzLjQ5NjZINS45NjQ4NFYxNS40OTY2SDMuOTY0ODRaTTMuOTY0ODQgOS45OTY1OEg1Ljk2NDg0VjExLjk5NjZIMy45NjQ4NFY5Ljk5NjU4Wk0xMC45NjQ4IDIwLjQ5NjZIMTIuOTY0OFYyMi40OTY2SDEwLjk2NDhWMjAuNDk2NlpNMy45NjQ4NCAxOC45OTY2VjE2Ljk5NjZINS45NjQ4NFYxOC45OTY2SDMuOTY0ODRaTTUuOTY0ODQgMjIuNDk2NkM0Ljg2NDg0IDIyLjQ5NjYgMy45NjQ4NCAyMS41OTY2IDMuOTY0ODQgMjAuNDk2Nkg1Ljk2NDg0VjIyLjQ5NjZaTTkuNDY0ODQgMjIuNDk2Nkg3LjQ2NDg0VjIwLjQ5NjZIOS40NjQ4NFYyMi40OTY2Wk0xNC40NjQ4IDIyLjQ5NjZWMjAuNDk2NkgxNi40NjQ4QzE2LjQ2NDggMjEuNTk2NiAxNS41NjQ4IDIyLjQ5NjYgMTQuNDY0OCAyMi40OTY2Wk01Ljk2NDg0IDYuNDk2NThWOC40OTY1OEgzLjk2NDg0QzMuOTY0ODQgNy4zOTY1OCA0Ljg2NDg0IDYuNDk2NTggNS45NjQ4NCA2LjQ5NjU4WiIgZmlsbD0iI0UzRTRFNSIvPgo8L2c+Cjwvc3ZnPgo=');
   --str-video__icon--dominant-speaker: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNSAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMC4xNzk2ODgiIHk9IjAuMjEyNDYzIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHJ4PSI2IiBmaWxsPSIjMEMwRDBFIiBmaWxsLW9wYWNpdHk9IjAuNjUiLz4KPHBhdGggZD0iTTcuMTc5NjkgMTUuMjEyNUw3LjE3OTY5IDkuMjEyNDYiIHN0cm9rZT0iIzAwNUZGRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTEyLjE3OTcgMTcuMjEyNUwxMi4xNzk3IDcuMjEyNDYiIHN0cm9rZT0iIzAwNUZGRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTE3LjE3OTcgMTMuODY4N0wxNy4xNzk3IDEwLjU1NjIiIHN0cm9rZT0iIzAwNUZGRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==');
   --str-video__icon--non-dominant-speaker: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNSAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMC4xNzk2ODgiIHk9IjAuMjEyNDYzIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHJ4PSI2IiBmaWxsPSIjMEMwRDBFIiBmaWxsLW9wYWNpdHk9IjAuNjUiLz4KPHBhdGggZD0iTTcuMTc5NjkgMTUuMjEyNUw3LjE3OTY5IDkuMjEyNDYiIHN0cm9rZT0iIzAwNUZGRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTEyLjE3OTcgMTcuMjEyNUwxMi4xNzk3IDcuMjEyNDYiIHN0cm9rZT0iIzAwNUZGRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTE3LjE3OTcgMTMuODY4N0wxNy4xNzk3IDEwLjU1NjIiIHN0cm9rZT0iIzAwNUZGRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==');
   --str-video__icon--download: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGQ9Ik01MTIgNjY2LjUgMzY3LjIgNTIxLjdsMzYuMi0zNi4yIDgzIDgzVjI1Nmg1MS4ydjMxMi41bDgzLTgzIDM2LjIgMzYuMkw1MTIgNjY2LjV6bS0yMDQuOCA1MC4zVjc2OGg0MDkuNnYtNTEuMkgzMDcuMnoiLz48L3N2Zz4K');

sample-apps/react/react-dogfood/components/ActiveCall.tsx

@@ -11,13 +11,13 @@ import {
   RecordCallButton,
   ScreenShareButton,
   SpeakingWhileMutedNotification,
-  ToggleAudioPublishingButton,
-  ToggleVideoPublishingButton,
+  useCallStateHooks,
 } from '@stream-io/video-react-sdk';
 import { StreamChat } from 'stream-chat';
+
 import { ActiveCallHeader } from './ActiveCallHeader';
 import { Stage } from './Stage';
-import { InvitePanel } from './InvitePanel/InvitePanel';
+import { InvitePanel, InvitePopup } from './InvitePanel/InvitePanel';
 import { ChatWrapper } from './ChatWrapper';
 import { ChatUI } from './ChatUI';
 import { ToggleSettingsTabModal } from './Settings/SettingsTabModal';
@@ -26,10 +26,13 @@ import { ToggleDeveloperButton } from './ToggleDeveloperButton';
 import { ToggleMoreOptionsListButton } from './ToggleMoreOptionsListButton';
 import { ToggleLayoutButton } from './ToggleLayoutButton';
 import { ToggleParticipantListButton } from './ToggleParticipantListButton';
+import { ToggleDualCameraButton } from './ToggleDualCameraButton';
+import { ToggleDualMicButton } from './ToggleDualMicButton';
 import { NewMessageNotification } from './NewMessageNotification';
 import { UnreadCountBadge } from './UnreadCountBadge';
 import { DEFAULT_LAYOUT, getLayoutSettings, LayoutMap } from './LayoutSelector';
-import { useWatchChannel, useBreakpoint } from '../hooks';
+
+import { useBreakpoint, useWatchChannel } from '../hooks';
 
 export type ActiveCallProps = {
   chatClient?: StreamChat | null;
@@ -41,6 +44,7 @@ export type ActiveCallProps = {
 export const ActiveCall = (props: ActiveCallProps) => {
   const { chatClient, activeCall, onLeave, onJoin } = props;
   const [showParticipants, setShowParticipants] = useState(false);
+  const [showInvitePopup, setShowInvitePopup] = useState(true);
   const [showChat, setShowChat] = useState(false);
   const [layout, setLayout] = useState<keyof typeof LayoutMap>(() => {
     const storedLayout = getLayoutSettings()?.selectedLayout;
@@ -51,6 +55,8 @@ export const ActiveCall = (props: ActiveCallProps) => {
       : DEFAULT_LAYOUT;
   });
 
+  const { useParticipantCount } = useCallStateHooks();
+  const participantCount = useParticipantCount();
   const breakpoint = useBreakpoint();
 
   useEffect(() => {
@@ -94,14 +100,20 @@ export const ActiveCall = (props: ActiveCallProps) => {
         <PermissionRequests />
         <div className="rd__layout">
           <Stage selectedLayout={layout} />
+          {showInvitePopup && participantCount === 1 && (
+            <InvitePopup
+              callId={activeCall.id}
+              close={() => setShowInvitePopup(false)}
+            />
+          )}
           {showSidebar && (
             <div className="rd__sidebar">
               {showParticipants && (
                 <div className="rd__participants">
                   <CallParticipantsList
                     onClose={() => setShowParticipants(false)}
                   />
-                  <InvitePanel callId={activeCall.id} />
+                  <InvitePanel />
                 </div>
               )}
 
@@ -152,8 +164,8 @@ export const ActiveCall = (props: ActiveCallProps) => {
               <ReactionsButton />
             </div>
 
-            <ToggleAudioPublishingButton />
-            <ToggleVideoPublishingButton />
+            <ToggleDualMicButton />
+            <ToggleDualCameraButton />
             <div className="str-video__call-controls__desktop">
               <CancelCallConfirmButton onLeave={onLeave} />
             </div>