@stream-io/video-react-sdk 0.3.47 → 0.4.0

package/src/components/Notification/SpeakingWhileMutedNotification.tsx

@@ -1,13 +1,10 @@
-import { PropsWithChildren, useEffect, useState } from 'react';
-import { createSoundDetector, SfuModels } from '@stream-io/video-client';
+import { PropsWithChildren } from 'react';
 import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
-
-import { useMediaDevices } from '../../core';
 import { Notification } from './Notification';
 
 export type SpeakingWhileMutedNotificationProps = {
-  /*
-  Text message displayed by the notification.
+  /**
+   * Text message displayed by the notification.
    */
   text?: string;
 };
@@ -16,52 +13,11 @@ export const SpeakingWhileMutedNotification = ({
   children,
   text,
 }: PropsWithChildren<SpeakingWhileMutedNotificationProps>) => {
-  const { useLocalParticipant } = useCallStateHooks();
-  const localParticipant = useLocalParticipant();
-  const { getAudioStream } = useMediaDevices();
+  const { useMicrophoneState } = useCallStateHooks();
+  const { isSpeakingWhileMuted } = useMicrophoneState();
   const { t } = useI18n();
 
   const message = text ?? t('You are muted. Unmute to speak.');
-  const isAudioMute = !localParticipant?.publishedTracks.includes(
-    SfuModels.TrackType.AUDIO,
-  );
-  const audioDeviceId = localParticipant?.audioDeviceId;
-  const [isSpeakingWhileMuted, setIsSpeakingWhileMuted] = useState(false);
-  useEffect(() => {
-    // do nothing when not muted
-    if (!isAudioMute) return;
-    const disposeSoundDetector = getAudioStream({
-      deviceId: audioDeviceId,
-    }).then((audioStream) =>
-      createSoundDetector(audioStream, ({ isSoundDetected }) => {
-        setIsSpeakingWhileMuted((isNotified) =>
-          isNotified ? isNotified : isSoundDetected,
-        );
-      }),
-    );
-    disposeSoundDetector.catch((err) => {
-      console.error('Error while creating sound detector', err);
-    });
-    return () => {
-      disposeSoundDetector
-        .then((dispose) => dispose())
-        .catch((err) => {
-          console.error('Error while disposing sound detector', err);
-        });
-      setIsSpeakingWhileMuted(false);
-    };
-  }, [audioDeviceId, getAudioStream, isAudioMute]);
-
-  useEffect(() => {
-    if (!isSpeakingWhileMuted) return;
-    const timeout = setTimeout(() => {
-      setIsSpeakingWhileMuted(false);
-    }, 3500);
-    return () => {
-      clearTimeout(timeout);
-      setIsSpeakingWhileMuted(false);
-    };
-  }, [isSpeakingWhileMuted]);
   return (
     <Notification message={message} isVisible={isSpeakingWhileMuted}>
       {children}

package/src/components/VideoPreview/VideoPreview.tsx

@@ -0,0 +1,67 @@
+import { ComponentType } from 'react';
+import clsx from 'clsx';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { BaseVideo } from '../../core/components/Video';
+import { LoadingIndicator } from '../LoadingIndicator';
+
+const DefaultDisabledVideoPreview = () => {
+  return <div>Video is disabled</div>;
+};
+
+const DefaultNoCameraPreview = () => {
+  return <div>No camera found</div>;
+};
+
+export type VideoPreviewProps = {
+  /**
+   * Component rendered when user turns off the video.
+   */
+  DisabledVideoPreview?: ComponentType;
+  /**
+   * Enforces mirroring of the video on the X axis. Defaults to true.
+   */
+  mirror?: boolean;
+  /**
+   * Component rendered when no camera devices are available.
+   */
+  NoCameraPreview?: ComponentType;
+  /**
+   * Component rendered above the BaseVideo until the video is ready (meaning until the play event is emitted).
+   */
+  StartingCameraPreview?: ComponentType;
+};
+
+export const VideoPreview = ({
+  mirror = true,
+  DisabledVideoPreview = DefaultDisabledVideoPreview,
+  NoCameraPreview = DefaultNoCameraPreview,
+  StartingCameraPreview = LoadingIndicator,
+}: VideoPreviewProps) => {
+  const { useCameraState } = useCallStateHooks();
+  const { devices, status, isMute, mediaStream } = useCameraState();
+
+  let contents;
+  if (isMute && devices?.length === 0) {
+    contents = <NoCameraPreview />;
+  } else if (status === 'enabled') {
+    const loading = !mediaStream;
+    contents = (
+      <>
+        {mediaStream && (
+          <BaseVideo
+            stream={mediaStream}
+            className={clsx('str-video__video-preview', {
+              'str-video__video-preview--mirror': mirror,
+              'str-video__video-preview--loading': loading,
+            })}
+          />
+        )}
+        {loading && <StartingCameraPreview />}
+      </>
+    );
+  } else {
+    contents = <DisabledVideoPreview />;
+  }
+
+  return <div className="str-video__video-preview-container">{contents}</div>;
+};

package/src/components/index.ts

@@ -14,4 +14,4 @@ export * from './Permissions';
 export * from './StreamTheme';
 export * from './Search';
 export * from './Tooltip';
-export * from './Video';
+export * from './VideoPreview';

package/src/core/components/CallLayout/PaginatedGridLayout.tsx

@@ -1,9 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
-import {
-  StreamVideoLocalParticipant,
-  StreamVideoParticipant,
-} from '@stream-io/video-client';
+import { StreamVideoParticipant } from '@stream-io/video-client';
 import clsx from 'clsx';
 
 import {
@@ -22,7 +19,7 @@ type PaginatedGridLayoutGroupProps = {
   /**
    * The group of participants to render.
    */
-  group: Array<StreamVideoParticipant | StreamVideoLocalParticipant>;
+  group: Array<StreamVideoParticipant>;
 } & Pick<ParticipantViewProps, 'VideoPlaceholder'> &
   Required<Pick<ParticipantViewProps, 'ParticipantViewUI'>>;
 

package/src/core/components/ParticipantView/DefaultParticipantViewUI.tsx

@@ -1,8 +1,8 @@
 import { forwardRef } from 'react';
 import { Placement } from '@floating-ui/react';
 import { SfuModels } from '@stream-io/video-client';
-import { useCall } from '@stream-io/video-react-bindings';
-import { clsx } from 'clsx';
+import { useCall, useI18n } from '@stream-io/video-react-bindings';
+import clsx from 'clsx';
 
 import {
   Icon,
@@ -17,7 +17,7 @@ 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 './ParticipantView';
+import { useParticipantViewContext } from './ParticipantViewContext';
 
 export type DefaultParticipantViewUIProps = {
   /**
@@ -42,22 +42,23 @@ const ToggleButton = forwardRef<HTMLButtonElement, ToggleMenuButtonProps>(
 
 export const DefaultScreenShareOverlay = () => {
   const call = useCall();
+  const { t } = useI18n();
 
   const stopScreenShare = () => {
-    call?.stopPublish(SfuModels.TrackType.SCREEN_SHARE).catch(console.error);
+    call?.screenShare.disable();
   };
 
   return (
     <div className="str-video__screen-share-overlay">
       <Icon icon="screen-share-off" />
       <span className="str-video__screen-share-overlay__title">
-        You are presenting your screen
+        {t('You are presenting your screen')}
       </span>
       <button
         onClick={stopScreenShare}
         className="str-video__screen-share-overlay__button"
       >
-        <Icon icon="close" /> Stop Screen Sharing
+        <Icon icon="close" /> {t('Stop Screen Sharing')}
       </button>
     </div>
   );

package/src/core/components/ParticipantView/ParticipantView.tsx

@@ -1,16 +1,13 @@
 import {
   ComponentType,
-  createContext,
   forwardRef,
   ReactElement,
-  useContext,
   useMemo,
   useState,
 } from 'react';
 import clsx from 'clsx';
 import {
   SfuModels,
-  StreamVideoLocalParticipant,
   StreamVideoParticipant,
   VideoTrackType,
 } from '@stream-io/video-client';
@@ -20,27 +17,13 @@ import { Video, VideoProps } from '../Video';
 import { useTrackElementVisibility } from '../../hooks';
 import { DefaultParticipantViewUI } from './DefaultParticipantViewUI';
 import { applyElementToRef, isComponentType } from '../../../utilities';
-
-export type ParticipantViewContextValue = Required<
-  Pick<ParticipantViewProps, 'participant' | 'trackType'>
-> & {
-  participantViewElement: HTMLDivElement | null;
-  videoElement: HTMLVideoElement | null;
-  videoPlaceholderElement: HTMLDivElement | null;
-};
-
-const ParticipantViewContext = createContext<
-  ParticipantViewContextValue | undefined
->(undefined);
-
-export const useParticipantViewContext = () =>
-  useContext(ParticipantViewContext) as ParticipantViewContextValue;
+import { ParticipantViewContext } from './ParticipantViewContext';
 
 export type ParticipantViewProps = {
   /**
    * The participant whose video/audio stream we want to play.
    */
-  participant: StreamVideoParticipant | StreamVideoLocalParticipant;
+  participant: StreamVideoParticipant;
 
   /**
    * Override the default UI for rendering participant information/actions.

package/src/core/components/ParticipantView/ParticipantViewContext.tsx

@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+import { ParticipantViewProps } from './ParticipantView';
+
+export type ParticipantViewContextValue = Required<
+  Pick<ParticipantViewProps, 'participant' | 'trackType'>
+> & {
+  participantViewElement: HTMLDivElement | null;
+  videoElement: HTMLVideoElement | null;
+  videoPlaceholderElement: HTMLDivElement | null;
+};
+
+export const ParticipantViewContext = createContext<
+  ParticipantViewContextValue | undefined
+>(undefined);
+
+export const useParticipantViewContext = () =>
+  useContext(ParticipantViewContext) as ParticipantViewContextValue;

package/src/core/components/ParticipantView/index.ts

@@ -1,2 +1,3 @@
 export * from './ParticipantView';
+export * from './ParticipantViewContext';
 export * from './DefaultParticipantViewUI';

package/src/core/components/StreamCall/StreamCall.tsx

@@ -1,30 +1,4 @@
-import { PropsWithChildren } from 'react';
-import { Call } from '@stream-io/video-client';
 import { StreamCallProvider } from '@stream-io/video-react-bindings';
-import {
-  MediaDevicesProvider,
-  MediaDevicesProviderProps,
-} from '../../contexts';
 
-export type StreamCallProps = {
-  call: Call;
-
-  /**
-   * An optional props to pass to the `MediaDevicesProvider`.
-   */
-  mediaDevicesProviderProps?: MediaDevicesProviderProps;
-};
-
-export const StreamCall = ({
-  children,
-  call,
-  mediaDevicesProviderProps,
-}: PropsWithChildren<StreamCallProps>) => {
-  return (
-    <StreamCallProvider call={call}>
-      <MediaDevicesProvider {...mediaDevicesProviderProps}>
-        {children}
-      </MediaDevicesProvider>
-    </StreamCallProvider>
-  );
-};
+// re-exporting the StreamCallProvider as StreamCall
+export const StreamCall = StreamCallProvider;

package/src/core/hooks/index.ts

@@ -1,4 +1,2 @@
-export * from './useAudioPublisher';
 export * from './useDevices';
-export * from './useVideoPublisher';
 export * from './useTrackElementVisibility';

package/src/core/hooks/useDevices.ts

@@ -1,10 +1,4 @@
 import { ChangeEvent, useEffect, useState } from 'react';
-import { Observable, pairwise } from 'rxjs';
-import {
-  getAudioDevices,
-  getAudioOutputDevices,
-  getVideoDevices,
-} from '@stream-io/video-client';
 
 export const useHasBrowserPermissions = (permissionName: PermissionName) => {
   const [canSubscribe, enableSubscription] = useState(false);
@@ -37,192 +31,3 @@ export const useHasBrowserPermissions = (permissionName: PermissionName) => {
 
   return canSubscribe;
 };
-
-/**
- * Observes changes in connected devices and maintains an up-to-date array of connected MediaDeviceInfo objects.
- * @param observeDevices
- * @category Device Management
- */
-export const useDevices = (
-  observeDevices: () => Observable<MediaDeviceInfo[]>,
-) => {
-  const [devices, setDevices] = useState<MediaDeviceInfo[]>([]);
-
-  useEffect(() => {
-    const subscription = observeDevices().subscribe(setDevices);
-
-    return () => {
-      subscription.unsubscribe();
-    };
-  }, [observeDevices]);
-
-  return devices;
-};
-
-/**
- * Observes changes and maintains an array of connected video input devices
- * @category Device Management
- */
-export const useVideoDevices = () => useDevices(getVideoDevices);
-
-/**
- * Observes changes and maintains an array of connected audio input devices
- * @category Device Management
- */
-export const useAudioInputDevices = () => useDevices(getAudioDevices);
-
-/**
- * Observes changes and maintains an array of connected audio output devices
- * @category Device Management
- */
-export const useAudioOutputDevices = () => useDevices(getAudioOutputDevices);
-
-/**
- * Verifies that newly selected device id exists among the registered devices.
- * If the selected device id is not found among existing devices, switches to the default device.
- * The media devices are observed only if a given permission ('camera' resp. 'microphone') is granted in browser.
- * Regardless of current permissions settings, an intent to observe devices will take place in Firefox.
- * This is due to the fact that Firefox does not allow to query for 'camera' and 'microphone' permissions.
- * @param canObserve
- * @param devices$
- * @param switchToDefaultDevice
- * @param selectedDeviceId
- * @category Device Management
- */
-export const useDeviceFallback = (
-  canObserve: boolean,
-  devices$: Observable<MediaDeviceInfo[]>,
-  switchToDefaultDevice: () => void,
-  selectedDeviceId?: string,
-) => {
-  useEffect(() => {
-    if (!canObserve) return;
-    const validateDeviceId = devices$.pipe().subscribe((devices) => {
-      const deviceFound = devices.find(
-        (device) => device.deviceId === selectedDeviceId,
-      );
-      if (!deviceFound) switchToDefaultDevice();
-    });
-
-    return () => {
-      validateDeviceId.unsubscribe();
-    };
-  }, [canObserve, devices$, selectedDeviceId, switchToDefaultDevice]);
-};
-
-/**
- * Verifies that newly selected video device id exists among the registered devices.
- * If the selected device id is not found among existing devices, switches to the default video device.
- * The media devices are observed only if 'camera' permission is granted in browser.
- * It is integrators responsibility to instruct users how to enable required permissions.
- * Regardless of current permissions settings, an intent to observe devices will take place in Firefox.
- * This is due to the fact that Firefox does not allow to query for 'camera' and 'microphone' permissions.
- * @param switchToDefaultDevice
- * @param canObserve
- * @param selectedDeviceId
- * @category Device Management
- */
-export const useVideoDeviceFallback = (
-  switchToDefaultDevice: () => void,
-  canObserve: boolean,
-  selectedDeviceId?: string,
-) =>
-  useDeviceFallback(
-    canObserve,
-    getVideoDevices(),
-    switchToDefaultDevice,
-    selectedDeviceId,
-  );
-
-/**
- * Verifies that newly selected audio input device id exists among the registered devices.
- * If the selected device id is not found among existing devices, switches to the default audio input device.
- * The media devices are observed only if 'microphone' permission is granted in browser.
- * It is integrators responsibility to instruct users how to enable required permissions.
- * Regardless of current permissions settings, an intent to observe devices will take place in Firefox.
- * This is due to the fact that Firefox does not allow to query for 'camera' and 'microphone' permissions.
- * @param switchToDefaultDevice
- * @param canObserve
- * @param selectedDeviceId
- * @category Device Management
- */
-export const useAudioInputDeviceFallback = (
-  switchToDefaultDevice: () => void,
-  canObserve: boolean,
-  selectedDeviceId?: string,
-) =>
-  useDeviceFallback(
-    canObserve,
-    getAudioDevices(),
-    switchToDefaultDevice,
-    selectedDeviceId,
-  );
-
-/**
- * Verifies that newly selected audio output device id exists among the registered devices.
- * If the selected device id is not found among existing devices, switches to the default audio output device.
- * The media devices are observed only if 'microphone' permission is granted in browser.
- * It is integrators responsibility to instruct users how to enable required permissions.
- * Regardless of current permissions settings, an intent to observe devices will take place in Firefox.
- * This is due to the fact that Firefox does not allow to query for 'camera' and 'microphone' permissions.
- * @param switchToDefaultDevice
- * @param canObserve
- * @param selectedDeviceId
- * @category Device Management
- */
-export const useAudioOutputDeviceFallback = (
-  switchToDefaultDevice: () => void,
-  canObserve: boolean,
-  selectedDeviceId?: string,
-) =>
-  useDeviceFallback(
-    canObserve,
-    getAudioOutputDevices(),
-    switchToDefaultDevice,
-    selectedDeviceId,
-  );
-
-/**
- * Observes devices of certain kind are made unavailable and executes onDisconnect callback.
- * @param observeDevices
- * @param onDisconnect
- * @category Device Management
- */
-export const useOnUnavailableDevices = (
-  observeDevices: Observable<MediaDeviceInfo[]>,
-  onDisconnect: () => void,
-) => {
-  useEffect(() => {
-    const subscription = observeDevices
-      .pipe(pairwise())
-      .subscribe(([prev, current]) => {
-        if (prev.length > 0 && current.length === 0) onDisconnect();
-      });
-
-    return () => subscription.unsubscribe();
-  }, [observeDevices, onDisconnect]);
-};
-
-/**
- * Observes disconnect of all video devices and executes onDisconnect callback.
- * @param onDisconnect
- * @category Device Management
- */
-export const useOnUnavailableVideoDevices = (onDisconnect: () => void) =>
-  useOnUnavailableDevices(getVideoDevices(), onDisconnect);
-
-/**
- * Observes disconnect of all audio input devices and executes onDisconnect callback.
- * @param onDisconnect
- * @category Device Management
- */
-export const useOnUnavailableAudioInputDevices = (onDisconnect: () => void) =>
-  useOnUnavailableDevices(getAudioDevices(), onDisconnect);
-
-/**
- * Observes disconnect of all audio output devices and executes onDisconnect callback.
- * @param onDisconnect
- * @category Device Management
- */
-export const useOnUnavailableAudioOutputDevices = (onDisconnect: () => void) =>
-  useOnUnavailableDevices(getAudioOutputDevices(), onDisconnect);

package/src/core/index.ts

@@ -1,3 +1,2 @@
 export * from './components';
-export * from './contexts';
 export * from './hooks';

package/src/hooks/index.ts

@@ -1,7 +1,5 @@
 export * from './useFloatingUIPreset';
+export * from './usePersistedDevicePreferences';
 export * from './useScrollPosition';
-export * from './useToggleAudioMuteState';
-export * from './useToggleVideoMuteState';
-export * from './useToggleScreenShare';
 export * from './useToggleCallRecording';
 export * from './useRequestPermission';

package/src/hooks/usePersistedDevicePreferences.ts

@@ -0,0 +1,118 @@
+import { useEffect } from 'react';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+
+export type LocalDevicePreference = {
+  selectedDeviceId: string;
+  muted: boolean;
+};
+
+export type LocalDevicePreferences = {
+  [type in 'mic' | 'camera' | 'speaker']: LocalDevicePreference;
+};
+
+/**
+ * This hook will persist the device settings to local storage.
+ *
+ * @param key the key to use for local storage.
+ */
+const usePersistDevicePreferences = (key: string) => {
+  const { useMicrophoneState, useCameraState, useSpeakerState } =
+    useCallStateHooks();
+  const mic = useMicrophoneState();
+  const camera = useCameraState();
+  const speaker = useSpeakerState();
+  useEffect(() => {
+    try {
+      const defaultDevice = 'default';
+      const preferences: LocalDevicePreferences = {
+        mic: {
+          selectedDeviceId: mic.selectedDevice || defaultDevice,
+          muted: mic.isMute,
+        },
+        camera: {
+          selectedDeviceId: camera.selectedDevice || defaultDevice,
+          muted: camera.isMute,
+        },
+        speaker: {
+          selectedDeviceId: speaker.selectedDevice || defaultDevice,
+          muted: false,
+        },
+      };
+      window.localStorage.setItem(key, JSON.stringify(preferences));
+    } catch (err) {
+      console.warn('Failed to save device preferences', err);
+    }
+  }, [
+    camera.isMute,
+    camera.selectedDevice,
+    key,
+    mic.isMute,
+    mic.selectedDevice,
+    speaker.selectedDevice,
+  ]);
+};
+
+/**
+ * This hook will apply the device settings from local storage.
+ *
+ * @param key the key to use for local storage.
+ */
+const useApplyDevicePreferences = (key: string) => {
+  const call = useCall();
+  useEffect(() => {
+    if (!call) return;
+
+    const apply = async () => {
+      const initMic = async (setting: LocalDevicePreference) => {
+        await call.microphone.select(setting.selectedDeviceId);
+        if (setting.muted) {
+          await call.microphone.disable();
+        } else {
+          await call.microphone.enable();
+        }
+      };
+
+      const initCamera = async (setting: LocalDevicePreference) => {
+        await call.camera.select(setting.selectedDeviceId);
+        if (setting.muted) {
+          await call.camera.disable();
+        } else {
+          await call.camera.enable();
+        }
+      };
+
+      const initSpeaker = (setting: LocalDevicePreference) => {
+        call.speaker.select(setting.selectedDeviceId);
+      };
+
+      try {
+        const preferences = JSON.parse(
+          window.localStorage.getItem(key)!,
+        ) as LocalDevicePreferences;
+        if (preferences) {
+          await initMic(preferences.mic);
+          await initCamera(preferences.camera);
+          initSpeaker(preferences.speaker);
+        }
+      } catch (err) {
+        console.warn('Failed to load device preferences', err);
+      }
+    };
+
+    apply().catch((err) => {
+      console.warn('Failed to apply device preferences', err);
+    });
+  }, [call, key]);
+};
+
+/**
+ * This hook will apply and persist the device preferences from local storage.
+ *
+ * @param key the key to use for local storage.
+ */
+export const usePersistedDevicePreferences = (
+  key: string = '@stream-io/device-preferences',
+) => {
+  useApplyDevicePreferences(key);
+  usePersistDevicePreferences(key);
+};

package/src/translations/en.json

@@ -38,6 +38,9 @@
   "Unknown": "Unknown",
   "Toggle device menu": "Toggle device menu",
 
+  "You are presenting your screen": "You are presenting your screen",
+  "Stop Screen Sharing": "Stop Screen Sharing",
+
   "Allow": "Allow",
   "Revoke": "Revoke",
   "Dismiss": "Dismiss",