@stream-io/video-react-sdk 0.0.1-alpha.9 → 0.0.1-alpha.91

package/src/components/CallControls/{ToggleCameraButton.tsx → ToggleVideoButton.tsx}

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import {
+  Restricted,
   useCall,
   useHasPermissions,
   useLocalParticipant,
@@ -7,17 +8,16 @@ import {
 
 import { OwnCapability, SfuModels } from '@stream-io/video-client';
 import { CompositeButton, IconButton } from '../Button/';
-import { useMediaDevices } from '../../core/contexts';
+import { DEVICE_STATE, useMediaDevices } from '../../core';
 import { DeviceSelectorVideo } from '../DeviceSettings';
 import { PermissionNotification } from '../Notification';
-import { Restricted } from '../Moderation';
 
-export type ToggleCameraPreviewButtonProps = { caption?: string };
+export type ToggleVideoPreviewButtonProps = { caption?: string };
 
-export const ToggleCameraPreviewButton = ({
+export const ToggleVideoPreviewButton = ({
   caption = 'Video',
-}: ToggleCameraPreviewButtonProps) => {
-  const { toggleVideoMuteState, initialVideoState } = useMediaDevices();
+}: ToggleVideoPreviewButtonProps) => {
+  const { toggleInitialVideoMuteState, initialVideoState } = useMediaDevices();
 
   return (
     <CompositeButton
@@ -27,20 +27,21 @@ export const ToggleCameraPreviewButton = ({
     >
       <IconButton
         icon={initialVideoState.enabled ? 'camera' : 'camera-off'}
-        onClick={toggleVideoMuteState}
+        onClick={toggleInitialVideoMuteState}
       />
     </CompositeButton>
   );
 };
 
-type ToggleCameraPublishingButtonProps = {
+type ToggleVideoPublishingButtonProps = {
   caption?: string;
 };
 
-export const ToggleCameraPublishingButton = ({
+export const ToggleVideoPublishingButton = ({
   caption = 'Video',
-}: ToggleCameraPublishingButtonProps) => {
-  const { publishVideoStream, stopPublishingVideo } = useMediaDevices();
+}: ToggleVideoPublishingButtonProps) => {
+  const { publishVideoStream, stopPublishingVideo, setInitialVideoState } =
+    useMediaDevices();
   const localParticipant = useLocalParticipant();
   const isVideoMute = !localParticipant?.publishedTracks.includes(
     SfuModels.TrackType.VIDEO,
@@ -71,8 +72,13 @@ export const ToggleCameraPublishingButton = ({
         });
       return;
     }
-    if (isVideoMute && hasPermission) {
-      await publishVideoStream();
+    if (isVideoMute) {
+      if (hasPermission) {
+        setInitialVideoState(DEVICE_STATE.playing);
+        await publishVideoStream();
+      } else {
+        console.log('Cannot publish video. Insufficient permissions.');
+      }
     } else {
       stopPublishingVideo();
     }
@@ -81,6 +87,7 @@ export const ToggleCameraPublishingButton = ({
     hasPermission,
     isVideoMute,
     publishVideoStream,
+    setInitialVideoState,
     stopPublishingVideo,
   ]);
 

package/src/components/CallControls/index.ts

@@ -1,3 +1,4 @@
+export * from './AcceptCallButton';
 export * from './CallControls';
 export * from './CallStatsButton';
 export * from './CancelCallButton';
@@ -5,6 +6,5 @@ export * from './ReactionsButton';
 export * from './RecordCallButton';
 export * from './ScreenShareButton';
 export * from './ToggleAudioButton';
-export * from './ToggleCameraButton';
 export * from './ToggleAudioOutputButton';
-export * from './ToggleParticipantListButton';
+export * from './ToggleVideoButton';

package/src/components/CallParticipantsList/BlockedUserListing.tsx

@@ -1,7 +1,6 @@
-import { useCall } from '@stream-io/video-react-bindings';
+import { Restricted, useCall } from '@stream-io/video-react-bindings';
 import { OwnCapability } from '@stream-io/video-client';
 
-import { Restricted } from '../Moderation';
 import { TextButton } from '../Button';
 
 export const BlockedUserListing = ({ data }: { data: string[] }) => {

package/src/components/CallParticipantsList/CallParticipantListingItem.tsx

@@ -1,6 +1,10 @@
 import clsx from 'clsx';
-import { ComponentProps, ComponentType, forwardRef } from 'react';
-import { useCall, useConnectedUser } from '@stream-io/video-react-bindings';
+import { ComponentProps, ComponentType, forwardRef, useState } from 'react';
+import {
+  Restricted,
+  useCall,
+  useConnectedUser,
+} from '@stream-io/video-react-bindings';
 import {
   OwnCapability,
   SfuModels,
@@ -13,7 +17,6 @@ import {
   MenuToggle,
   ToggleMenuButtonProps,
 } from '../Menu';
-import { Restricted } from '../Moderation';
 import { WithTooltip } from '../Tooltip';
 import { Icon } from '../Icon';
 
@@ -116,9 +119,14 @@ const ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
 
 export const ParticipantActionsContextMenu = ({
   participant,
+  participantViewElement,
 }: {
   participant: StreamVideoParticipant;
+  participantViewElement?: HTMLDivElement | null;
 }) => {
+  const [fullscreenModeOn, setFullscreenModeOn] = useState(
+    !!document.fullscreenElement,
+  );
   const activeCall = useCall();
 
   const blockUser = () => {
@@ -165,6 +173,19 @@ export const ParticipantActionsContextMenu = ({
     );
   };
 
+  const toggleFullscreenMode = () => {
+    if (!fullscreenModeOn)
+      return participantViewElement
+        ?.requestFullscreen()
+        .then(() => setFullscreenModeOn(true))
+        .catch(console.error);
+
+    document
+      .exitFullscreen()
+      .catch(console.error)
+      .finally(() => setFullscreenModeOn(false));
+  };
+
   return (
     <GenericMenu>
       <GenericMenuButtonItem onClick={toggleParticipantPinnedAt}>
@@ -211,6 +232,9 @@ export const ParticipantActionsContextMenu = ({
           Mute audio
         </GenericMenuButtonItem>
       </Restricted>
+      <GenericMenuButtonItem onClick={toggleFullscreenMode}>
+        {fullscreenModeOn ? 'Leave' : 'Enter'} fullscreen
+      </GenericMenuButtonItem>
       <Restricted requiredGrants={[OwnCapability.UPDATE_CALL_PERMISSIONS]}>
         <GenericMenuButtonItem
           onClick={grantPermission(OwnCapability.SEND_AUDIO)}

package/src/components/CallParticipantsList/CallParticipantsList.tsx

@@ -6,6 +6,7 @@ import {
   ComponentProps,
 } from 'react';
 import {
+  Restricted,
   useCall,
   useCallMetadata,
   useOwnCapabilities,
@@ -30,7 +31,6 @@ import { EmptyParticipantSearchList } from './EmptyParticipantSearchList';
 import { LoadingIndicator } from '../LoadingIndicator';
 import { SearchInput, SearchResults } from '../Search';
 import { useSearch, UseSearchParams } from '../Search/hooks';
-import { Restricted } from '../Moderation';
 import {
   GenericMenu,
   GenericMenuButtonItem,

package/src/components/{StreamCall → CallStats}/CallStats.tsx

@@ -3,7 +3,7 @@ import {
   AggregatedStatsReport,
   CallStatsReport,
 } from '@stream-io/video-client';
-import { useCurrentCallStatsReport } from '@stream-io/video-react-bindings';
+import { useCallStatsReport } from '@stream-io/video-react-bindings';
 import { CallStatsLatencyChart } from './CallStatsLatencyChart';
 
 export const CallStats = () => {
@@ -17,7 +17,7 @@ export const CallStats = () => {
   const [publishBitrate, setPublishBitrate] = useState('-');
   const [subscribeBitrate, setSubscribeBitrate] = useState('-');
   const previousStats = useRef<CallStatsReport>();
-  const callStatsReport = useCurrentCallStatsReport();
+  const callStatsReport = useCallStatsReport();
 
   useEffect(() => {
     if (!callStatsReport) return;
@@ -95,7 +95,7 @@ export const CallStats = () => {
   );
 };
 
-const StatCard = (props: { label: string; value: string }) => {
+export const StatCard = (props: { label: string; value: string }) => {
   const { label, value } = props;
   return (
     <div className="str-video__call-stats__card">

package/src/components/CallStats/index.ts

@@ -0,0 +1,2 @@
+export * from './CallStats';
+export * from './CallStatsLatencyChart';

package/src/components/Debug/DebugStatsView.tsx

@@ -1,15 +1,26 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Call } from '@stream-io/video-client';
-import { useRtcStats } from '../../hooks/useRtcStats';
 import { useFloatingUIPreset } from '../../hooks';
+import { StatCard } from '../CallStats';
+import { useCallStatsReport } from '@stream-io/video-react-bindings';
 
 export const DebugStatsView = (props: {
   call: Call;
-  kind: 'subscriber' | 'publisher';
   mediaStream?: MediaStream;
+  sessionId: string;
 }) => {
-  const { call, kind, mediaStream } = props;
-  const stats = useRtcStats(call, kind, mediaStream);
+  const { call, mediaStream, sessionId } = props;
+  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 { refs, strategy, y, x } = useFloatingUIPreset({
     placement: 'top',
@@ -38,7 +49,7 @@ export const DebugStatsView = (props: {
       />
       {isPopperOpen && (
         <div
-          className="str-video__debug__track-stats"
+          className="str-video__debug__track-stats str-video__call-stats"
           ref={refs.setFloating}
           style={{
             position: strategy,
@@ -47,9 +58,51 @@ export const DebugStatsView = (props: {
             overflowY: 'auto',
           }}
         >
-          <pre>{JSON.stringify(stats, null, 2)}</pre>
+          <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/DeviceSettings/DeviceSelectorAudio.tsx

@@ -1,5 +1,9 @@
 import { DeviceSelector } from './DeviceSelector';
-import { useMediaDevices } from '../../core/contexts';
+import {
+  useMediaDevices,
+  useAudioInputDevices,
+  useAudioOutputDevices,
+} from '../../core';
 
 export type DeviceSelectorAudioInputProps = {
   title?: string;
@@ -8,8 +12,8 @@ export type DeviceSelectorAudioInputProps = {
 export const DeviceSelectorAudioInput = ({
   title = 'Select a Mic',
 }: DeviceSelectorAudioInputProps) => {
-  const { audioInputDevices, selectedAudioInputDeviceId, switchDevice } =
-    useMediaDevices();
+  const { selectedAudioInputDeviceId, switchDevice } = useMediaDevices();
+  const audioInputDevices = useAudioInputDevices();
 
   return (
     <DeviceSelector
@@ -31,12 +35,13 @@ export const DeviceSelectorAudioOutput = ({
   title = 'Select speakers',
 }: DeviceSelectorAudioOutputProps) => {
   const {
-    audioOutputDevices,
     isAudioOutputChangeSupported,
     selectedAudioOutputDeviceId,
     switchDevice,
   } = useMediaDevices();
 
+  const audioOutputDevices = useAudioOutputDevices();
+
   if (!isAudioOutputChangeSupported) return null;
 
   return (

package/src/components/DeviceSettings/DeviceSelectorVideo.tsx

@@ -1,13 +1,13 @@
 import { DeviceSelector } from './DeviceSelector';
-import { useMediaDevices } from '../../core/contexts';
+import { useMediaDevices, useVideoDevices } from '../../core';
 
 export type DeviceSelectorVideoProps = {
   title?: string;
 };
 
 export const DeviceSelectorVideo = ({ title }: DeviceSelectorVideoProps) => {
-  const { videoDevices, selectedVideoDeviceId, switchDevice } =
-    useMediaDevices();
+  const { selectedVideoDeviceId, switchDevice } = useMediaDevices();
+  const videoDevices = useVideoDevices();
 
   return (
     <DeviceSelector

package/src/components/Notification/SpeakingWhileMutedNotification.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { createSoundDetector, SfuModels } from '@stream-io/video-client';
 import { useLocalParticipant } from '@stream-io/video-react-bindings';
 
-import { useMediaDevices } from '../../core/contexts';
+import { useMediaDevices } from '../../core';
 import { Notification } from './Notification';
 import { ChildrenOnly } from '../../types';
 
@@ -18,13 +18,14 @@ export const SpeakingWhileMutedNotification = ({ children }: ChildrenOnly) => {
   useEffect(() => {
     // do nothing when not muted
     if (!isAudioMute) return;
-    const disposeSoundDetector = getAudioStream(audioDeviceId).then(
-      (audioStream) =>
-        createSoundDetector(audioStream, (isSpeechDetected) => {
-          setIsSpeakingWhileMuted((isNotified) =>
-            isNotified ? isNotified : isSpeechDetected,
-          );
-        }),
+    const disposeSoundDetector = getAudioStream({
+      deviceId: audioDeviceId,
+    }).then((audioStream) =>
+      createSoundDetector(audioStream, (isSpeechDetected) => {
+        setIsSpeakingWhileMuted((isNotified) =>
+          isNotified ? isNotified : isSpeechDetected,
+        );
+      }),
     );
     disposeSoundDetector.catch((err) => {
       console.error('Error while creating sound detector', err);

package/src/components/PendingCallPanel/PendingCallControls.tsx

@@ -0,0 +1,27 @@
+import { CallingState } from '@stream-io/video-client';
+import { AcceptCallButton, CancelCallButton } from '../CallControls';
+import { useCall, useCallCallingState } from '@stream-io/video-react-bindings';
+
+export const PendingCallControls = () => {
+  const call = useCall();
+  const callCallingState = useCallCallingState();
+
+  if (!call) return null;
+
+  const buttonsDisabled = callCallingState !== CallingState.RINGING;
+  return (
+    <div className="str-video__pending-call-controls">
+      {call.isCreatedByMe ? (
+        <CancelCallButton disabled={buttonsDisabled} />
+      ) : (
+        <>
+          <AcceptCallButton disabled={buttonsDisabled} />
+          <CancelCallButton
+            onClick={() => call.leave({ reject: true })}
+            disabled={buttonsDisabled}
+          />
+        </>
+      )}
+    </div>
+  );
+};

package/src/components/PendingCallPanel/PendingCallPanel.tsx

@@ -0,0 +1,71 @@
+import { CallingState } from '@stream-io/video-client';
+import {
+  useCall,
+  useCallCallingState,
+  useCallMembers,
+  useCallMetadata,
+  useI18n,
+} from '@stream-io/video-react-bindings';
+import { Avatar } from '../Avatar';
+import { PendingCallControls } from './PendingCallControls';
+
+const CALLING_STATE_TO_LABEL: Record<CallingState, string> = {
+  [CallingState.JOINING]: 'Joining',
+  [CallingState.RINGING]: 'Ringing',
+  [CallingState.RECONNECTING]: 'Re-connecting',
+  [CallingState.RECONNECTING_FAILED]: 'Failed',
+  [CallingState.OFFLINE]: 'No internet connection',
+  [CallingState.IDLE]: '',
+  [CallingState.UNKNOWN]: '',
+  [CallingState.JOINED]: 'Joined',
+  [CallingState.LEFT]: 'Left call',
+};
+
+export const PendingCallPanel = () => {
+  const call = useCall();
+  const callingState = useCallCallingState();
+  const { t } = useI18n();
+  const metadata = useCallMetadata();
+  const members = useCallMembers();
+
+  if (!call) return null;
+
+  const caller = metadata?.created_by;
+  const membersToShow = call.isCreatedByMe
+    ? members
+        ?.slice(0, 3)
+        .map(({ user }) => user)
+        .filter((u) => !!u) || []
+    : caller
+    ? [caller]
+    : [];
+
+  const callingStateLabel = CALLING_STATE_TO_LABEL[callingState];
+
+  return (
+    <div className="str-video__call-panel str-video__call-panel--pending">
+      <div className="str-video__call-panel__members-list">
+        {membersToShow.map((user) => (
+          <div key={user.id} className="str-video__call-panel__member-box">
+            <Avatar name={user.name} imageSrc={user.image} />
+            {user.name && (
+              <div className="str-video__member_details">
+                <span className="str-video__member_name">{user.name}</span>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {callingStateLabel && (
+        <div className="str-video__call-panel__calling-state-label">
+          {t(callingStateLabel)}
+        </div>
+      )}
+
+      {[CallingState.RINGING, CallingState.JOINING].includes(callingState) && (
+        <PendingCallControls />
+      )}
+    </div>
+  );
+};

package/src/components/PendingCallPanel/index.ts

@@ -0,0 +1,2 @@
+export * from './PendingCallControls';
+export * from './PendingCallPanel';

package/src/components/Permissions/PermissionRequests.tsx

@@ -53,15 +53,9 @@ export const PermissionRequests = () => {
     return async () => {
       const { user, permissions } = request;
       if (allow) {
-        await call?.updateUserPermissions({
-          user_id: user.id,
-          grant_permissions: permissions,
-        });
+        await call?.grantPermissions(user.id, permissions);
       } else {
-        await call?.updateUserPermissions({
-          user_id: user.id,
-          revoke_permissions: permissions,
-        });
+        await call?.revokePermissions(user.id, permissions);
       }
       setPermissionRequests((requests) =>
         requests.filter((r) => r !== request),

package/src/components/StreamCall/CallParticipantsScreenView.tsx

@@ -5,7 +5,7 @@ import {
   useLocalParticipant,
   useParticipants,
 } from '@stream-io/video-react-bindings';
-import { ParticipantBox } from '../../core/components/ParticipantBox/ParticipantBox';
+import { ParticipantView, DefaultParticipantViewUI } from '../../core';
 import { Video } from '../Video';
 
 import { useVerticalScrollPosition } from './hooks';
@@ -60,7 +60,6 @@ export const CallParticipantsScreenView = (props: { call: Call }) => {
               <Video
                 className="str-video__screen-share"
                 participant={firstScreenSharingParticipant}
-                call={call}
                 kind="screen"
                 autoPlay
                 muted
@@ -104,11 +103,11 @@ export const CallParticipantsScreenView = (props: { call: Call }) => {
         >
           <div className="str-video__call-participants-screen-view__participants">
             {allParticipants.map((participant) => (
-              <ParticipantBox
+              <ParticipantView
                 key={participant.sessionId}
                 participant={participant}
-                call={call}
                 sinkId={localParticipant?.audioOutputDeviceId}
+                ParticipantViewUI={DefaultParticipantViewUI}
               />
             ))}
           </div>

package/src/components/StreamCall/CallParticipantsView.tsx

@@ -1,23 +1,22 @@
 import { Call } from '@stream-io/video-client';
-import { ParticipantBox } from '../../core/components/ParticipantBox/ParticipantBox';
+import { DefaultParticipantViewUI, ParticipantView } from '../../core';
 import {
   useLocalParticipant,
   useParticipants,
 } from '@stream-io/video-react-bindings';
 
 export const CallParticipantsView = (props: { call: Call }) => {
-  const { call } = props;
   const localParticipant = useLocalParticipant();
   const participants = useParticipants();
   const grid = `str-video__grid-${participants.length || 1}`;
   return (
     <div className={`str-video__call-participants-view ${grid}`}>
       {participants.map((participant) => (
-        <ParticipantBox
+        <ParticipantView
           key={participant.sessionId}
           participant={participant}
-          call={call}
           sinkId={localParticipant?.audioOutputDeviceId}
+          ParticipantViewUI={DefaultParticipantViewUI}
         />
       ))}
     </div>

package/src/components/StreamTheme/StreamTheme.tsx

@@ -0,0 +1,19 @@
+import { ElementType, HTMLProps, PropsWithChildren } from 'react';
+import clsx from 'clsx';
+
+export type StreamThemeProps = HTMLProps<HTMLElement> & {
+  as?: ElementType;
+};
+
+export const StreamTheme = ({
+  as: Component = 'div',
+  className,
+  children,
+  ...props
+}: PropsWithChildren<StreamThemeProps>) => {
+  return (
+    <Component {...props} className={clsx('str-video', className)}>
+      {children}
+    </Component>
+  );
+};

package/src/components/StreamTheme/index.ts

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

package/src/components/Video/VideoPreview.tsx

@@ -7,8 +7,13 @@ import {
 } from 'react';
 import clsx from 'clsx';
 import { disposeOfMediaStream } from '@stream-io/video-client';
-import { BaseVideo } from '../../core/components/Video/BaseVideo';
-import { DEVICE_STATE, useMediaDevices } from '../../core/contexts';
+import { BaseVideo } from '../../core/components/Video';
+import {
+  DEVICE_STATE,
+  useMediaDevices,
+  useOnUnavailableVideoDevices,
+  useVideoDevices,
+} from '../../core';
 import { LoadingIndicator } from '../LoadingIndicator';
 
 const DefaultDisabledVideoPreview = () => {
@@ -47,19 +52,24 @@ export const VideoPreview = ({
   VideoErrorPreview = DefaultVideoErrorPreview,
 }: VideoPreviewProps) => {
   const [stream, setStream] = useState<MediaStream>();
-
   const {
-    videoDevices,
     selectedVideoDeviceId,
     getVideoStream,
     initialVideoState,
     setInitialVideoState,
   } = useMediaDevices();
+  // When there are 0 video devices (e.g. when laptop lid closed),
+  // we do not restart the video automatically when the device is again available,
+  // but rather leave turning the video on manually to the user.
+  useOnUnavailableVideoDevices(() =>
+    setInitialVideoState(DEVICE_STATE.stopped),
+  );
+  const videoDevices = useVideoDevices();
 
   useEffect(() => {
-    if (!initialVideoState.enabled || videoDevices.length === 0) return;
+    if (!initialVideoState.enabled) return;
 
-    getVideoStream(selectedVideoDeviceId)
+    getVideoStream({ deviceId: selectedVideoDeviceId })
       .then((s) => {
         setStream((previousStream) => {
           if (previousStream) {

package/src/components/Video/index.ts

@@ -1,4 +1,4 @@
 export * from '../../core/components/Video/Video';
 export * from '../../core/components/Video/BaseVideo';
-export * from '../../core/components/Video/VideoPlaceholder';
+export * from '../../core/components/Video/DefaultVideoPlaceholder';
 export * from './VideoPreview';