fix: lift the debug helpers from the SDK to Pronto

packages/client/package.json

@@ -32,7 +32,7 @@
     "@protobuf-ts/runtime-rpc": "^2.9.1",
     "@protobuf-ts/twirp-transport": "^2.9.1",
     "@types/ws": "^8.5.7",
-    "axios": "^1.5.1",
+    "axios": "^1.6.0",
     "base64-js": "^1.5.1",
     "isomorphic-ws": "^5.0.0",
     "jsonwebtoken": "^9.0.2",

packages/client/src/Call.ts

@@ -701,14 +701,6 @@ export class Call {
       throw error;
     }
 
-    // FIXME OL: remove once cascading is implemented
-    if (typeof window !== 'undefined' && window.location?.search) {
-      const params = new URLSearchParams(window.location.search);
-      sfuServer.url = params.get('sfuUrl') || sfuServer.url;
-      sfuServer.ws_endpoint = params.get('sfuWsUrl') || sfuServer.ws_endpoint;
-      sfuServer.edge_name = params.get('sfuUrl') || sfuServer.edge_name;
-    }
-
     const previousSfuClient = this.sfuClient;
     const sfuClient = (this.sfuClient = new StreamSfuClient({
       dispatcher: this.dispatcher,

packages/client/src/devices/CameraManager.ts

@@ -16,8 +16,9 @@ export class CameraManager extends InputMediaDeviceManager<CameraManagerState> {
   }
 
   /**
-   * Select the camera direaction
-   * @param direction
+   * Select the camera direction.
+   *
+   * @param direction the direction of the camera to select.
    */
   async selectDirection(direction: Exclude<CameraDirection, undefined>) {
     this.state.setDirection(direction);

packages/client/src/rtc/flows/join.ts

@@ -44,25 +44,6 @@ const doJoin = async (
     ...data,
     location,
   };
-
-  // FIXME OL: remove this once cascading is enabled by default
-  const cascadingModeParams = getCascadingModeParams();
-  if (cascadingModeParams) {
-    // FIXME OL: remove after SFU migration is done
-    if (data?.migrating_from && cascadingModeParams['next_sfu_id']) {
-      cascadingModeParams['sfu_id'] = cascadingModeParams['next_sfu_id'];
-    }
-    return httpClient.doAxiosRequest<JoinCallResponse, JoinCallRequest>(
-      'post',
-      `/call/${type}/${id}/join`,
-      request,
-      {
-        params: {
-          ...cascadingModeParams,
-        },
-      },
-    );
-  }
   return httpClient.post<JoinCallResponse, JoinCallRequest>(
     `/call/${type}/${id}/join`,
     request,
@@ -81,20 +62,6 @@ const toRtcConfiguration = (config?: ICEServer[]) => {
   return rtcConfig;
 };
 
-const getCascadingModeParams = () => {
-  if (typeof window === 'undefined') return null;
-  const params = new URLSearchParams(window.location?.search);
-  const cascadingEnabled = params.get('cascading') !== null;
-  if (cascadingEnabled) {
-    const rawParams: Record<string, string> = {};
-    params.forEach((value, key) => {
-      rawParams[key] = value;
-    });
-    return rawParams;
-  }
-  return null;
-};
-
 /**
  * Reconciles the local state of the source participant into the target participant.
  *

packages/react-sdk/index.ts

@@ -6,7 +6,6 @@ export * from '@stream-io/video-react-bindings';
 export * from './src/core';
 
 export * from './src/components';
-export * from './src/types';
 export * from './src/translations';
 export {
   useHorizontalScrollPosition,

packages/react-sdk/package.json

@@ -28,7 +28,7 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "@floating-ui/react": "^0.22.0",
+    "@floating-ui/react": "^0.26.1",
     "@nivo/core": "^0.80.0",
     "@nivo/line": "^0.80.0",
     "@stream-io/video-client": "workspace:^",

packages/react-sdk/src/components/Permissions/PermissionRequests.tsx

@@ -49,15 +49,15 @@ export const PermissionRequests = () => {
     OwnCapability.UPDATE_CALL_PERMISSIONS,
   );
 
+  const localUserId = localParticipant?.userId;
   useEffect(() => {
     if (!call || !canUpdateCallPermissions) return;
 
     const unsubscribe = call.on(
       'call.permission_request',
       (event: StreamVideoEvent) => {
         if (event.type !== 'call.permission_request') return;
-
-        if (event.user.id !== localParticipant?.userId) {
+        if (event.user.id !== localUserId) {
           setPermissionRequests((requests) =>
             [...requests, event as PermissionRequestEvent].sort((a, b) =>
               byNameOrId(a.user, b.user),
@@ -69,7 +69,7 @@ export const PermissionRequests = () => {
     return () => {
       unsubscribe();
     };
-  }, [call, canUpdateCallPermissions, localParticipant]);
+  }, [call, canUpdateCallPermissions, localUserId]);
 
   const handleUpdatePermission: HandleUpdatePermission = (request, type) => {
     return async () => {

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

@@ -4,6 +4,7 @@ export * from './CallControls';
 export * from './CallParticipantsList';
 export * from './CallPreview';
 export * from './CallRecordingList';
+export * from './CallStats';
 export * from './DeviceSettings';
 export * from './Icon';
 export * from './LoadingIndicator';

packages/react-sdk/src/core/components/ParticipantView/DefaultParticipantViewUI.tsx

@@ -13,10 +13,6 @@ import {
   ToggleMenuButtonProps,
 } from '../../../components';
 import { Reaction } from '../../../components/Reaction';
-
-import { DebugParticipantPublishQuality } from '../../../components/Debug/DebugParticipantPublishQuality';
-import { DebugStatsView } from '../../../components/Debug/DebugStatsView';
-import { useIsDebugMode } from '../../../components/Debug/useIsDebugMode';
 import { useParticipantViewContext } from './ParticipantViewContext';
 
 export type DefaultParticipantViewUIProps = {
@@ -124,10 +120,10 @@ export const ParticipantDetails = ({
     sessionId,
     name,
     userId,
-    videoStream,
   } = participant;
-  const call = useCall()!;
+  const call = useCall();
 
+  const { t } = useI18n();
   const connectionQualityAsString =
     !!connectionQuality &&
     SfuModels.ConnectionQuality[connectionQuality].toLowerCase();
@@ -136,16 +132,14 @@ export const ParticipantDetails = ({
   const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
   const canUnpin = !!pin && pin.isLocalPin;
 
-  const isDebugMode = useIsDebugMode();
-
   return (
     <div className="str-video__participant-details">
       <span className="str-video__participant-details__name">
         {name || userId}
         {indicatorsVisible && isDominantSpeaker && (
           <span
             className="str-video__participant-details__name--dominant_speaker"
-            title="Dominant speaker"
+            title={t('Dominant speaker')}
           />
         )}
         {indicatorsVisible && (
@@ -154,7 +148,7 @@ export const ParticipantDetails = ({
               isLocalParticipant &&
               connectionQuality === SfuModels.ConnectionQuality.POOR
             }
-            message="Poor connection quality. Please check your internet connection."
+            message={t('Poor connection quality')}
           >
             {connectionQualityAsString && (
               <span
@@ -176,27 +170,13 @@ export const ParticipantDetails = ({
         {indicatorsVisible && canUnpin && (
           // TODO: remove this monstrosity once we have a proper design
           <span
-            title="Unpin"
+            title={t('Unpin')}
             onClick={() => call?.unpin(sessionId)}
             style={{ cursor: 'pointer' }}
             className="str-video__participant-details__name--pinned"
           />
         )}
       </span>
-      {isDebugMode && (
-        <>
-          <DebugParticipantPublishQuality
-            participant={participant}
-            call={call}
-          />
-          <DebugStatsView
-            call={call}
-            sessionId={sessionId}
-            userId={userId}
-            mediaStream={videoStream}
-          />
-        </>
-      )}
     </div>
   );
 };

packages/react-sdk/src/hooks/useFloatingUIPreset.ts

@@ -1,18 +1,18 @@
 import { useEffect } from 'react';
+import type { UseFloatingData } from '@floating-ui/react';
 import {
-  offset,
   autoUpdate,
+  flip,
+  offset,
+  shift,
   size,
   useFloating,
-  shift,
-  flip,
 } from '@floating-ui/react';
-import type { UseFloatingProps } from '@floating-ui/react';
 
 export const useFloatingUIPreset = ({
   placement,
   strategy,
-}: Pick<UseFloatingProps, 'placement' | 'strategy'>) => {
+}: Pick<UseFloatingData, 'placement' | 'strategy'>) => {
   const {
     refs,
     x,

packages/react-sdk/src/translations/en.json

@@ -72,6 +72,9 @@
   "{{ direction }} fullscreen": "{{ direction }} fullscreen",
   "{{ direction }} picture-in-picture": "{{ direction }} picture-in-picture",
 
+  "Dominant Speaker": "Dominant Speaker",
+  "Poor connection quality": "Poor connection quality. Please check your internet connection.",
+
   "Participants": "Participants",
   "Anonymous": ", and ({{ count }}) anonymous",
   "No participants found": "No participants found",

packages/styling/index.scss

@@ -27,5 +27,3 @@
 @import 'src/Tooltip';
 @import 'src/Video';
 @import 'src/VideoPreview';
-
-@import './src/Debug';

packages/styling/src/CallStats.scss

@@ -11,15 +11,6 @@
     margin: unset;
   }
 
-  &.str-video__call-stats-angular {
-    width: 400px;
-
-    canvas {
-      width: 400px;
-      height: 200px;
-    }
-  }
-
   .str-video__call-stats__card-container {
     --gap: 1rem;
     display: flex;

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

@@ -1,7 +1,6 @@
 $scope-name: 'str-video__participant-view';
 
-.str-video__participant-view,
-.str-video__participant-view--angular-host {
+.str-video__participant-view {
   position: relative;
   width: 100%;
   max-width: 1280px;

packages/styling/src/StreamCall.scss

@@ -1,11 +1,3 @@
-.str-video__call-angular-host {
-  height: 100%;
-  max-height: 100%;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-}
-
 .str-video__call {
   background-color: var(--str-video__background-color2);
   color: var(--str-video__text-color1);

sample-apps/react/audio-rooms/src/components/Room/RoomAccessControls.tsx

@@ -1,13 +1,13 @@
 import {
   CallingState,
-  ChildrenOnly,
   OwnCapability,
   Restricted,
   useCall,
   useCallStateHooks,
 } from '@stream-io/video-react-sdk';
 import { useNavigate } from 'react-router-dom';
 import { useJoinedCall } from '../../contexts';
+import { PropsWithChildren } from 'react';
 
 export const RoomAccessControls = () => {
   const { setJoinedCall, joinedCall } = useJoinedCall();
@@ -91,7 +91,7 @@ export const RoomAccessControls = () => {
   );
 };
 
-export const CloseInactiveRoomButton = ({ children }: ChildrenOnly) => {
+export const CloseInactiveRoomButton = ({ children }: PropsWithChildren) => {
   const navigate = useNavigate();
   return (
     <button