@stream-io/video-react-sdk 0.4.7 → 0.4.9

package/dist/src/components/index.d.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';

package/dist/src/hooks/useFloatingUIPreset.d.ts

@@ -1,8 +1,14 @@
-import type { UseFloatingProps } from '@floating-ui/react';
-export declare const useFloatingUIPreset: ({ placement, strategy, }: Pick<UseFloatingProps, 'placement' | 'strategy'>) => {
-    refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
-    x: number | null;
-    y: number | null;
+/// <reference types="react" />
+import type { UseFloatingData } from '@floating-ui/react';
+export declare const useFloatingUIPreset: ({ placement, strategy, }: Pick<UseFloatingData, 'placement' | 'strategy'>) => {
+    refs: {
+        reference: import("react").MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
+        floating: import("react").MutableRefObject<HTMLElement | null>;
+        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+    x: number;
+    y: number;
     domReference: Element | null;
     floating: HTMLElement | null;
     strategy: import("@floating-ui/utils").Strategy;

package/dist/src/translations/index.d.ts

@@ -67,6 +67,8 @@ export declare const translations: {
         Leave: string;
         "{{ direction }} fullscreen": string;
         "{{ direction }} picture-in-picture": string;
+        "Dominant Speaker": string;
+        "Poor connection quality": string;
         Participants: string;
         Anonymous: string;
         "No participants found": string;

package/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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "packageManager": "yarn@3.2.4",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
@@ -28,11 +28,11 @@
     "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": "^0.4.4",
-    "@stream-io/video-react-bindings": "^0.3.4",
+    "@stream-io/video-client": "^0.4.6",
+    "@stream-io/video-react-bindings": "^0.3.6",
     "clsx": "^2.0.0",
     "prop-types": "^15.8.1"
   },
@@ -44,7 +44,7 @@
     "@rollup/plugin-json": "^6.0.1",
     "@rollup/plugin-replace": "^5.0.4",
     "@rollup/plugin-typescript": "^11.1.5",
-    "@stream-io/video-styling": "^0.1.13",
+    "@stream-io/video-styling": "^0.1.14",
     "@types/prop-types": "^15.7.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package/src/components/Permissions/PermissionRequests.tsx

@@ -49,6 +49,7 @@ export const PermissionRequests = () => {
     OwnCapability.UPDATE_CALL_PERMISSIONS,
   );
 
+  const localUserId = localParticipant?.userId;
   useEffect(() => {
     if (!call || !canUpdateCallPermissions) return;
 
@@ -56,8 +57,7 @@ export const PermissionRequests = () => {
       '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 () => {

package/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';

package/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,8 +132,6 @@ 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">
@@ -145,7 +139,7 @@ export const ParticipantDetails = ({
         {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>
   );
 };

package/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,

package/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",

package/dist/src/components/Debug/DebugParticipantPublishQuality.d.ts

@@ -1,5 +0,0 @@
-import { Call, StreamVideoParticipant } from '@stream-io/video-client';
-export declare const DebugParticipantPublishQuality: (props: {
-    participant: StreamVideoParticipant;
-    call: Call;
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Debug/DebugStatsView.d.ts

@@ -1,7 +0,0 @@
-import { Call } from '@stream-io/video-client';
-export declare const DebugStatsView: (props: {
-    call: Call;
-    mediaStream?: MediaStream;
-    sessionId: string;
-    userId: string;
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Debug/useIsDebugMode.d.ts

@@ -1,5 +0,0 @@
-/**
- * Internal purpose hook. Enables certain development mode tools.
- */
-export declare const useIsDebugMode: () => boolean;
-export declare const useDebugPreferredVideoCodec: () => string | null | undefined;

package/dist/src/types/components.d.ts

@@ -1,7 +0,0 @@
-import { ReactNode } from 'react';
-export type ChildrenOnly = {
-    children: ReactNode;
-};
-export type Readable<T> = {
-    [k in keyof T]: T[k];
-} & {};

package/dist/src/types/index.d.ts

@@ -1 +0,0 @@
-export * from './components';

package/src/components/Debug/DebugParticipantPublishQuality.tsx

@@ -1,62 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Call, StreamVideoParticipant } from '@stream-io/video-client';
-
-export const DebugParticipantPublishQuality = (props: {
-  participant: StreamVideoParticipant;
-  call: Call;
-}) => {
-  const { call, participant } = props;
-  const [quality, setQuality] = useState<string>();
-  const [publishStats, setPublishStats] = useState(() => ({
-    f: true,
-    h: true,
-    q: true,
-  }));
-
-  useEffect(() => {
-    return call.on('changePublishQuality', (event) => {
-      if (event.eventPayload.oneofKind !== 'changePublishQuality') return;
-      const { videoSenders } = event.eventPayload.changePublishQuality;
-      // FIXME OL: support additional layers (like screenshare)
-      const [videoLayer] = videoSenders.map(({ layers }) => {
-        return layers.map((l) => ({ [l.name]: l.active }));
-      });
-      setPublishStats((s) => ({
-        ...s,
-        ...videoLayer,
-      }));
-    });
-  }, [call]);
-
-  return (
-    <select
-      title={`Published tracks: ${JSON.stringify(publishStats)}`}
-      value={quality}
-      onChange={(e) => {
-        const value = e.target.value;
-        setQuality(value);
-        let w = 960;
-        let h = 540;
-        if (value === 'h') {
-          w = w / 2; // 480
-          h = h / 2; // 270
-        } else if (value === 'q') {
-          w = w / 4; // 240
-          h = h / 4; // 135
-        }
-        call.updateSubscriptionsPartial('video', {
-          [participant.sessionId]: {
-            dimension: {
-              width: w,
-              height: h,
-            },
-          },
-        });
-      }}
-    >
-      <option value="f">High (f)</option>
-      <option value="h">Medium (h)</option>
-      <option value="q">Low (q)</option>
-    </select>
-  );
-};

package/src/components/Debug/DebugStatsView.tsx

@@ -1,126 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { Call } from '@stream-io/video-client';
-import { useFloatingUIPreset } from '../../hooks';
-import { StatCard } from '../CallStats';
-import { useCallStateHooks } from '@stream-io/video-react-bindings';
-
-export const DebugStatsView = (props: {
-  call: Call;
-  mediaStream?: MediaStream;
-  sessionId: string;
-  userId: string;
-}) => {
-  const { call, mediaStream, sessionId, userId } = props;
-  const { useCallStatsReport } = useCallStateHooks();
-  const callStatsReport = useCallStatsReport();
-
-  useEffect(() => {
-    call.startReportingStatsFor(sessionId);
-    return () => {
-      call.stopReportingStatsFor(sessionId);
-    };
-  }, [call, sessionId]);
-
-  const reportForTracks = callStatsReport?.participants[sessionId];
-  const trackStats = reportForTracks?.flatMap((report) => report.streams);
-
-  const previousWidth = useRef<Record<string, number>>({ f: 0, h: 0, q: 0 });
-  const previousHeight = useRef<Record<string, number>>({ f: 0, h: 0, q: 0 });
-  trackStats?.forEach((track) => {
-    if (track.kind !== 'video') return;
-    const { frameWidth = 0, frameHeight = 0, rid = '' } = track;
-    if (
-      frameWidth !== previousWidth.current[rid] ||
-      frameHeight !== previousHeight.current[rid]
-    ) {
-      const trackSize = `${frameWidth}x${frameHeight}`;
-      console.log(`Track stats (${userId}/${sessionId}): ${rid}(${trackSize})`);
-      previousWidth.current[rid] = frameWidth;
-      previousHeight.current[rid] = frameHeight;
-    }
-  });
-
-  const { refs, strategy, y, x } = useFloatingUIPreset({
-    placement: 'top',
-    strategy: 'absolute',
-  });
-
-  const [isPopperOpen, setIsPopperOpen] = useState(false);
-
-  const [videoTrack] = mediaStream?.getVideoTracks() ?? [];
-  const settings = videoTrack?.getSettings();
-  return (
-    <>
-      <span
-        className="str-video__debug__track-stats-icon"
-        tabIndex={0}
-        ref={refs.setReference}
-        title={
-          settings &&
-          `${settings.width}x${settings.height}@${Math.round(
-            settings.frameRate || 0,
-          )}`
-        }
-        onClick={() => {
-          setIsPopperOpen((v) => !v);
-        }}
-      />
-      {isPopperOpen && (
-        <div
-          className="str-video__debug__track-stats str-video__call-stats"
-          ref={refs.setFloating}
-          style={{
-            position: strategy,
-            top: y ?? 0,
-            left: x ?? 0,
-            overflowY: 'auto',
-          }}
-        >
-          <h3>Participant stats</h3>
-          <div className="str-video__call-stats__card-container">
-            {trackStats
-              ?.map((track) => {
-                if (track.kind === 'video') {
-                  return (
-                    <StatCard
-                      key={`${track.rid}/${track.ssrc}/${track.codec}/${track.kind}`}
-                      label={
-                        `${track.kind}: ${track.codec} ` +
-                        (track.rid ? ` (${track.rid})` : '')
-                      }
-                      value={`${track.frameWidth || 0}x${
-                        track.frameHeight || 0
-                      }@${track.framesPerSecond || 0}fps`}
-                    />
-                  );
-                } else if (track.kind === 'audio') {
-                  return (
-                    <StatCard
-                      key={`${track.ssrc}/${track.codec}/${track.kind}`}
-                      label={track.codec || 'N/A'}
-                      value={`Jitter: ${track.jitter || 0}ms`}
-                    />
-                  );
-                }
-                return null;
-              })
-              .filter(Boolean)}
-          </div>
-          {reportForTracks?.map((report, index) => (
-            <pre key={index}>
-              {JSON.stringify(unwrapStats(report.rawStats), null, 2)}
-            </pre>
-          ))}
-        </div>
-      )}
-    </>
-  );
-};
-
-const unwrapStats = (rawStats?: RTCStatsReport) => {
-  const decodedStats: Record<string, string> = {};
-  rawStats?.forEach((s) => {
-    decodedStats[s.id] = s;
-  });
-  return decodedStats;
-};

package/src/components/Debug/useIsDebugMode.ts

@@ -1,24 +0,0 @@
-import { useMemo } from 'react';
-
-const useQueryParams = () => {
-  return useMemo(
-    () =>
-      typeof window === 'undefined'
-        ? null
-        : new URLSearchParams(window.location.search),
-    [],
-  );
-};
-
-/**
- * Internal purpose hook. Enables certain development mode tools.
- */
-export const useIsDebugMode = () => {
-  const params = useQueryParams();
-  return !!params?.get('debug');
-};
-
-export const useDebugPreferredVideoCodec = () => {
-  const params = useQueryParams();
-  return params?.get('video_codec');
-};

package/src/types/components.ts

@@ -1,7 +0,0 @@
-import { ReactNode } from 'react';
-
-export type ChildrenOnly = { children: ReactNode };
-
-export type Readable<T> = {
-  [k in keyof T]: T[k];
-} & {};

package/src/types/index.ts

@@ -1 +0,0 @@
-export * from './components';