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

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

package/dist/src/core/contexts/MediaDevicesContext.d.ts

@@ -1,180 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { getAudioStream, getVideoStream } from '@stream-io/video-client';
-type EnabledStateType = 'starting' | 'playing';
-type DisabledStateType = 'uninitialized' | 'stopped';
-type EnabledDeviceState<T extends EnabledStateType> = {
-    type: T;
-    enabled: true;
-};
-type DisabledDeviceState<T extends DisabledStateType> = {
-    type: T;
-    enabled: false;
-};
-type ErrorDeviceState = {
-    type: 'error';
-    message: string;
-    enabled: false;
-};
-type DeviceState = EnabledDeviceState<EnabledStateType> | DisabledDeviceState<DisabledStateType> | ErrorDeviceState;
-/**
- * Exclude types from documentation site, but we should still add doc comments
- * @internal
- */
-export declare const DEVICE_STATE: {
-    starting: EnabledDeviceState<'starting'>;
-    playing: EnabledDeviceState<'playing'>;
-    stopped: DisabledDeviceState<'stopped'>;
-    uninitialized: DisabledDeviceState<'uninitialized'>;
-    error: ErrorDeviceState;
-};
-/**
- * API to control device enablement, device selection and media stream access for a call.
- * @category Device Management
- */
-export type MediaDevicesContextAPI = {
-    /**
-     * Deactivates MediaStream (stops and removes tracks) to be later garbage collected
-     *
-     * @param stream MediaStream
-     * @returns void
-     */
-    disposeOfMediaStream: (stream: MediaStream) => void;
-    /**
-     * Returns an 'audioinput' media stream with the given `deviceId`, if no `deviceId` is provided, it uses the first available device.
-     *
-     * @param deviceId
-     * @returns
-     */
-    getAudioStream: typeof getAudioStream;
-    /**
-     * Returns a 'videoinput' media stream with the given `deviceId`, if no `deviceId` is provided, it uses the first available device.
-     *
-     * @param deviceId
-     * @returns
-     */
-    getVideoStream: typeof getVideoStream;
-    /**
-     * [Tells if the browser supports audio output change on 'audio' elements](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/setSinkId).
-     */
-    isAudioOutputChangeSupported: boolean;
-    /**
-     * Signals whether audio stream will be published when the call is joined.
-     */
-    initialAudioEnabled: boolean;
-    /**
-     * Signals whether audio stream will be published when the call is joined.
-     */
-    initialVideoState: DeviceState;
-    /**
-     * Publishes audio stream for currently selected audio input (microphone) device to other call participants.
-     */
-    publishAudioStream: () => Promise<void>;
-    /**
-     * Publishes video stream for currently selected video input (camera) device to other call participants.
-     */
-    publishVideoStream: () => Promise<void>;
-    /**
-     * Stops publishing audio stream for currently selected audio input (microphone) device to other call participants.
-     */
-    stopPublishingAudio: () => Promise<void>;
-    /**
-     * Stops publishing video stream for currently selected video input (camera) device to other call participants.
-     */
-    stopPublishingVideo: () => Promise<void>;
-    /**
-     * Sets the initialAudioEnabled flag to a given boolean value.
-     * The latest value set will be used to decide, whether audio stream will be published when joining a call.
-     * @param enabled
-     */
-    setInitialAudioEnabled: (enabled: boolean) => void;
-    /**
-     * Sets the initialVideoState to a given DeviceState value.
-     * The latest value set will be used to decide, whether video stream will be published when joining a call.
-     * @param enabled
-     */
-    setInitialVideoState: (state: DeviceState) => void;
-    /**
-     * Stores audio input device (microphone) id which is used to publish user's sound to other call participants.
-     */
-    selectedAudioInputDeviceId?: string;
-    /**
-     * Stores audio output device (speaker) id used to reproduce incoming audio from other call participants.
-     */
-    selectedAudioOutputDeviceId?: string;
-    /**
-     * Stores video input device (camera) id which is used to publish user's video to other call participants.
-     */
-    selectedVideoDeviceId?: string;
-    /**
-     * Function should be used to change selected device id.
-     * The change is later reflected in selectedAudioInputDeviceId, selectedAudioOutputDeviceId or selectedVideoDeviceId depending on kind parameter.
-     * @param kind
-     * @param deviceId
-     */
-    switchDevice: (kind: MediaDeviceKind, deviceId?: string) => void;
-    /**
-     * Sets the initialAudioEnabled flag by negating the current state value.
-     * The latest value set will be used to decide, whether audio stream will be published when joining a call.
-     * @param enabled
-     */
-    toggleInitialAudioMuteState: () => void;
-    /**
-     * Sets the initialVideoState by toggling  the current state DeviceState value.
-     * The latest value set will be used to decide, whether video stream will be published when joining a call.
-     * @param enabled
-     */
-    toggleInitialVideoMuteState: () => void;
-};
-/**
- * Configuration parameters for MediaDevicesProvider.
- * @category Device Management
- */
-export type MediaDevicesProviderProps = {
-    /**
-     * Provides external control over the initial audio input (microphone) enablement. Overrides the default false.
-     */
-    initialAudioEnabled?: boolean;
-    /**
-     * Provides external control over the initial video input (camera) enablement. Overrides the default false.
-     */
-    initialVideoEnabled?: boolean;
-    /**
-     * Allows to override the default audio input (microphone) stream to be published. Overrides the default string 'default'.
-     */
-    initialAudioInputDeviceId?: string;
-    /**
-     * Allows to override the default audio output (speaker) device to reproduce incoming audio from the SFU. Overrides the default string 'default'.
-     */
-    initialAudioOutputDeviceId?: string;
-    /**
-     * Allows to override the default video input (camera) stream to be published. Overrides the default string 'default'.
-     */
-    initialVideoInputDeviceId?: string;
-};
-/**
- * Context provider that internally puts in place mechanisms that:
- * 1. fall back to selecting a default device when trying to switch to a non-existent device
- * 2. fall back to a default device when an active device is disconnected
- * 3. stop publishing a media stream when a non-default device is disconnected
- * 4. republish a media stream from the newly connected default device
- * 5. republish a media stream when a new device is selected
- *
- * Provides `MediaDevicesContextAPI` that allow the integrators to handle:
- * 1. the initial device state enablement (for example apt for lobby scenario)
- * 2. media stream retrieval and disposal
- * 3. media stream publishing
- * 4. specific device selection
- * @param params
- * @returns
- *
- * @category Device Management
- */
-export declare const MediaDevicesProvider: ({ children, initialAudioEnabled, initialVideoEnabled, initialVideoInputDeviceId, initialAudioOutputDeviceId, initialAudioInputDeviceId, }: PropsWithChildren<MediaDevicesProviderProps>) => import("react/jsx-runtime").JSX.Element;
-/**
- * Context consumer retrieving MediaDevicesContextAPI.
- * @returns
- *
- * @category Device Management
- */
-export declare const useMediaDevices: () => MediaDevicesContextAPI;
-export {};

package/dist/src/core/contexts/index.d.ts

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

package/dist/src/core/hooks/useAudioPublisher.d.ts

@@ -1,12 +0,0 @@
-/**
- * @internal
- */
-export type AudioPublisherInit = {
-    initialAudioMuted?: boolean;
-    audioDeviceId?: string;
-};
-/**
- * @internal
- * @category Device Management
- */
-export declare const useAudioPublisher: ({ initialAudioMuted, audioDeviceId, }: AudioPublisherInit) => () => Promise<void>;

package/dist/src/core/hooks/useVideoPublisher.d.ts

@@ -1,12 +0,0 @@
-/**
- * @internal
- */
-export type VideoPublisherInit = {
-    initialVideoMuted?: boolean;
-    videoDeviceId?: string;
-};
-/**
- * @internal
- * @category Device Management
- */
-export declare const useVideoPublisher: ({ initialVideoMuted, videoDeviceId, }: VideoPublisherInit) => () => Promise<void>;

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

@@ -1,4 +0,0 @@
-export declare const useToggleAudioMuteState: () => {
-    toggleAudioMuteState: () => Promise<void>;
-    isAwaitingPermission: boolean;
-};

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

@@ -1,5 +0,0 @@
-export declare const useToggleScreenShare: () => {
-    toggleScreenShare: () => Promise<void>;
-    isAwaitingPermission: boolean;
-    isScreenSharing: boolean;
-};

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

@@ -1,4 +0,0 @@
-export declare const useToggleVideoMuteState: () => {
-    toggleVideoMuteState: () => Promise<void>;
-    isAwaitingPermission: boolean;
-};

package/src/components/Video/VideoPreview.tsx

@@ -1,152 +0,0 @@
-import {
-  ComponentType,
-  ReactEventHandler,
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
-import clsx from 'clsx';
-import { disposeOfMediaStream } from '@stream-io/video-client';
-import { BaseVideo } from '../../core/components/Video';
-import {
-  DEVICE_STATE,
-  useMediaDevices,
-  useOnUnavailableVideoDevices,
-  useVideoDevices,
-} from '../../core';
-import { LoadingIndicator } from '../LoadingIndicator';
-
-const DefaultDisabledVideoPreview = () => {
-  return <div>Video is disabled</div>;
-};
-
-const DefaultNoCameraPreview = () => {
-  return <div>No camera found</div>;
-};
-
-type VideoErrorPreviewProps = {
-  message?: string;
-};
-const DefaultVideoErrorPreview = ({ message }: VideoErrorPreviewProps) => {
-  return (
-    <>
-      <div>Error:</div>
-      <p>{message || 'Unexpected error happened'}</p>
-    </>
-  );
-};
-
-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;
-  /**
-   * Component rendered when the video stream could not be retrieved.
-   */
-  VideoErrorPreview?: ComponentType<VideoErrorPreviewProps>;
-};
-
-export const VideoPreview = ({
-  mirror = true,
-  DisabledVideoPreview = DefaultDisabledVideoPreview,
-  NoCameraPreview = DefaultNoCameraPreview,
-  StartingCameraPreview = LoadingIndicator,
-  VideoErrorPreview = DefaultVideoErrorPreview,
-}: VideoPreviewProps) => {
-  const [stream, setStream] = useState<MediaStream>();
-  const {
-    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) return;
-
-    getVideoStream({ deviceId: selectedVideoDeviceId })
-      .then((s) => {
-        setStream((previousStream) => {
-          if (previousStream) {
-            disposeOfMediaStream(previousStream);
-          }
-          return s;
-        });
-      })
-      .catch((e) =>
-        setInitialVideoState({
-          ...DEVICE_STATE.error,
-          message: (e as Error).message,
-        }),
-      );
-    return () => {
-      setStream(undefined);
-    };
-  }, [
-    initialVideoState,
-    getVideoStream,
-    selectedVideoDeviceId,
-    setInitialVideoState,
-    videoDevices.length,
-  ]);
-
-  useEffect(() => {
-    if (initialVideoState.type === 'stopped') {
-      setStream(undefined);
-    }
-  }, [initialVideoState]);
-
-  const handleOnPlay: ReactEventHandler<HTMLVideoElement> = useCallback(() => {
-    setInitialVideoState(DEVICE_STATE.playing);
-  }, [setInitialVideoState]);
-
-  let contents;
-  if (initialVideoState.type === 'error') {
-    contents = <VideoErrorPreview />;
-  } else if (initialVideoState.type === 'stopped' && !videoDevices.length) {
-    contents = <NoCameraPreview />;
-  } else if (initialVideoState.enabled) {
-    const loading = initialVideoState.type === 'starting';
-    contents = (
-      <>
-        {stream && (
-          <BaseVideo
-            stream={stream}
-            className={clsx('str-video__video-preview', {
-              'str-video__video-preview--mirror': mirror,
-              'str-video__video-preview--loading': loading,
-            })}
-            onPlay={handleOnPlay}
-          />
-        )}
-        {loading && <StartingCameraPreview />}
-      </>
-    );
-  } else {
-    contents = <DisabledVideoPreview />;
-  }
-
-  return (
-    <div className={clsx('str-video__video-preview-container')}>{contents}</div>
-  );
-};