Release PR

packages/hms-video-store/src/IHMSActions.ts

@@ -168,12 +168,14 @@ export interface IHMSActions<T extends HMSGenericTypes = { sessionStore: Record<
    * `({ volume, codec, maxBitrate, deviceId, advanced })`
    */
   setAudioSettings(settings: Partial<HMSAudioTrackSettings>): Promise<void>;
+
   /**
    * Change settings of the local peer's video track
    * @param settings HMSVideoTrackSettings
    * `({ width, height, codec, maxFramerate, maxBitrate, deviceId, advanced, facingMode })`
    */
   setVideoSettings(settings: Partial<HMSVideoTrackSettings>): Promise<void>;
+
   /**
    * Toggle the camera between front and back if the both the camera's exist
    */

packages/hms-video-store/src/interfaces/settings.ts

@@ -1,9 +1,12 @@
+import { HMSAudioMode } from './track-settings';
+
 export default interface InitialSettings {
   isAudioMuted?: boolean;
   isVideoMuted?: boolean;
   audioInputDeviceId?: string;
   audioOutputDeviceId?: string;
   videoDeviceId?: string;
+  audioMode?: HMSAudioMode;
   /**
    * When a peer joins the room for the first time or when a device change happens,
    * after selecting the mic for audio input, we try to find the matching output device

packages/hms-video-store/src/reactive-store/HMSSDKActions.ts

@@ -20,6 +20,7 @@ import { Diagnostics } from '../diagnostics';
 import { IHMSActions } from '../IHMSActions';
 import { IHMSStore } from '../IHMSStore';
 import {
+  HMSAudioMode,
   HMSAudioPlugin,
   HMSAudioTrack as SDKHMSAudioTrack,
   HMSChangeMultiTrackStateParams as SDKHMSChangeMultiTrackStateParams,
@@ -1419,6 +1420,7 @@ export class HMSSDKActions<T extends HMSGenericTypes = { sessionStore: Record<st
       audioInputDeviceId: audioTrack?.settings.deviceId || settings.audioInputDeviceId,
       videoInputDeviceId: videoTrack?.settings.deviceId || settings.videoInputDeviceId,
       audioOutputDeviceId: this.sdk.getAudioOutput().getDevice()?.deviceId,
+      audioMode: audioTrack?.settings.audioMode || HMSAudioMode.VOICE,
     };
   }
 

packages/hms-video-store/src/schema/settings.ts

@@ -1,5 +1,8 @@
+import { HMSAudioMode } from '../interfaces';
+
 export interface HMSMediaSettings {
   audioInputDeviceId: string;
   videoInputDeviceId: string;
   audioOutputDeviceId?: string;
+  audioMode?: HMSAudioMode;
 }

packages/hms-video-store/src/sdk/LocalTrackManager.ts

@@ -9,7 +9,13 @@ import { HMSAction } from '../error/HMSAction';
 import { HMSException } from '../error/HMSException';
 import { BuildGetMediaError, HMSGetMediaActions } from '../error/utils';
 import { EventBus } from '../events/EventBus';
-import { HMSAudioCodec, HMSScreenShareConfig, HMSVideoCodec, ScreenCaptureHandleConfig } from '../interfaces';
+import {
+  HMSAudioCodec,
+  HMSAudioMode,
+  HMSScreenShareConfig,
+  HMSVideoCodec,
+  ScreenCaptureHandleConfig,
+} from '../interfaces';
 import InitialSettings from '../interfaces/settings';
 import { HMSLocalAudioTrack, HMSLocalTrack, HMSLocalVideoTrack, HMSTrackType } from '../internal';
 import {
@@ -31,6 +37,7 @@ const defaultSettings = {
   audioInputDeviceId: 'default',
   audioOutputDeviceId: 'default',
   videoDeviceId: 'default',
+  audioMode: HMSAudioMode.VOICE,
 };
 type IFetchTrackOptions = boolean | 'empty';
 interface IFetchAVTrackOptions {

packages/hms-video-store/src/sdk/index.ts

@@ -174,6 +174,7 @@ export class HMSSdk implements HMSInterface {
 
     this.sdkState.isInitialised = true;
     this.store = new Store();
+    this.store.setErrorListener(this.errorListener);
     this.eventBus = new EventBus();
     this.pluginUsageTracker = new PluginUsageTracker(this.eventBus);
     this.wakeLockManager = new WakeLockManager();

packages/hms-video-store/src/selectors/selectors.ts

@@ -63,7 +63,7 @@ export const selectTracksMap = (store: HMSStore) => store.tracks;
 
 /**
  * Select your media settings
- * i.e., choosen audio input device, audio output device and video input device.
+ * i.e., choosen audio input device, audio output device and video input device, audio mode
  * @param store
  */
 export const selectLocalMediaSettings = (store: HMSStore) => store.settings;

packages/hms-video-store/src/signal/jsonrpc/index.ts

@@ -610,16 +610,17 @@ export default class JsonRpcSignal {
   private async call<T>(method: HMSSignalMethod, params: Record<string, any>): Promise<T> {
     const MAX_RETRIES = 3;
     let error: HMSException = ErrorFactory.WebsocketMethodErrors.ServerErrors(500, method, `Default ${method} error`);
-    this.validateConnection();
     let retry;
     for (retry = 1; retry <= MAX_RETRIES; retry++) {
       try {
+        this.validateConnection();
         HMSLogger.d(this.TAG, `Try number ${retry} sending ${method}`, params);
         return await this.internalCall(method, params);
       } catch (err) {
         error = err as HMSException;
         HMSLogger.e(this.TAG, `Failed sending ${method} try: ${retry}`, { method, params, error });
-        const shouldRetry = parseInt(`${error.code / 100}`) === 5 || error.code === 429;
+        // 1003 is websocket disconnect - could be because you are offline - retry with delay in this case as well
+        const shouldRetry = parseInt(`${error.code / 100}`) === 5 || error.code === 429 || error.code === 1003;
         if (!shouldRetry) {
           break;
         }

packages/hms-whiteboard/src/Whiteboard.tsx

@@ -6,12 +6,12 @@ import './index.css';
 
 export interface WhiteboardProps {
   endpoint?: string;
-  token?: string;
+  token: string;
   zoomToContent?: boolean;
   transparentCanvas?: boolean;
   onMount?: (args: { store?: unknown; editor?: unknown }) => void;
 }
-export function Whiteboard({ onMount, endpoint, token, zoomToContent, transparentCanvas }: WhiteboardProps) {
+export function Whiteboard({ endpoint, token, zoomToContent, transparentCanvas, onMount }: WhiteboardProps) {
   const [editor, setEditor] = useState<Editor>();
   const store = useCollaboration({
     endpoint,

packages/hms-whiteboard/src/hooks/useSessionStore.ts

@@ -5,7 +5,7 @@ import decodeJWT from '../utils';
 
 export const useSessionStore = ({
   token,
-  endpoint,
+  endpoint = 'https://store-prod-in3-grpc.100ms.live',
   handleError,
 }: {
   token?: string;

packages/react-sdk/src/hooks/useAudioMode.tsx

@@ -0,0 +1,11 @@
+import { HMSAudioMode, selectLocalMediaSettings } from '@100mslive/hms-video-store';
+import { useHMSActions, useHMSStore } from '../primitives/HmsRoomProvider';
+
+export const useAudioMode = () => {
+  const hmsActions = useHMSActions();
+  const { audioMode } = useHMSStore(selectLocalMediaSettings);
+  const isMusicModeEnabled = audioMode === HMSAudioMode.MUSIC;
+  const toggleMusicMode = async () =>
+    await hmsActions.setAudioSettings({ audioMode: isMusicModeEnabled ? HMSAudioMode.VOICE : HMSAudioMode.MUSIC });
+  return { toggleMusicMode, isMusicModeEnabled };
+};

packages/react-sdk/src/index.ts

@@ -26,6 +26,7 @@ export { usePaginatedParticipants } from './hooks/usePaginatedParticipants';
 export { useWhiteboard } from './hooks/useWhiteboard';
 export { useAwayNotifications } from './hooks/useAwayNotifications';
 export { useTranscript } from './hooks/useTranscript';
+export { useAudioMode } from './hooks/useAudioMode';
 
 // types
 export type { hooksErrHandler } from './hooks/types';

packages/roomkit-react/src/Diagnostics/AudioTest.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
   HMSException,
   selectDevices,
@@ -18,15 +18,16 @@ import { Progress } from '../Progress';
 import { Text } from '../Text';
 // @ts-ignore: No implicit any
 import { DeviceSelector } from './DeviceSelector';
-import { hmsDiagnostics } from './hms';
+import { DiagnosticsStep, useDiagnostics } from './DiagnosticsContext';
 import { useAudioOutputTest } from '../Prebuilt/components/hooks/useAudioOutputTest';
 import { TEST_AUDIO_URL } from '../Prebuilt/common/constants';
 
 const SelectContainer = ({ children }: { children: React.ReactNode }) => (
   <Box css={{ w: 'calc(50% - 0.75rem)', '@lg': { w: '100%' } }}>{children}</Box>
 );
 
-const MicTest = ({ setError }: { setError: React.Dispatch<React.SetStateAction<Error | undefined>> }) => {
+const MicTest = ({ setError }: { setError: (err?: Error) => void }) => {
+  const { hmsDiagnostics } = useDiagnostics();
   const devices = useHMSStore(selectDevices);
   const [isRecording, setIsRecording] = useState(false);
   const [selectedMic, setSelectedMic] = useState(devices.audioInput[0]?.deviceId || 'default');
@@ -45,8 +46,9 @@ const MicTest = ({ setError }: { setError: React.Dispatch<React.SetStateAction<E
         selection={selectedMic}
         icon={<MicOnIcon />}
         onChange={(deviceId: string) => {
+          setError(undefined);
           setSelectedMic(deviceId);
-          hmsDiagnostics.stopMicCheck();
+          hmsDiagnostics?.stopMicCheck();
         }}
       />
       <Flex css={{ gap: '$6', alignItems: 'center' }}>
@@ -55,9 +57,9 @@ const MicTest = ({ setError }: { setError: React.Dispatch<React.SetStateAction<E
           icon
           onClick={() => {
             isRecording
-              ? hmsDiagnostics.stopMicCheck()
+              ? hmsDiagnostics?.stopMicCheck()
               : hmsDiagnostics
-                  .startMicCheck({
+                  ?.startMicCheck({
                     inputDevice: selectedMic,
                     onError: (err: Error) => {
                       setError(err);
@@ -79,14 +81,14 @@ const MicTest = ({ setError }: { setError: React.Dispatch<React.SetStateAction<E
         <Button
           icon
           variant="standard"
-          outlined={hmsDiagnostics.getRecordedAudio() === TEST_AUDIO_URL}
+          outlined={hmsDiagnostics?.getRecordedAudio() === TEST_AUDIO_URL}
           onClick={() => {
             if (audioRef.current) {
-              audioRef.current.src = hmsDiagnostics.getRecordedAudio() || '';
+              audioRef.current.src = hmsDiagnostics?.getRecordedAudio() || '';
               audioRef.current.play();
             }
           }}
-          disabled={playing || hmsDiagnostics.getRecordedAudio() === TEST_AUDIO_URL}
+          disabled={playing || hmsDiagnostics?.getRecordedAudio() === TEST_AUDIO_URL}
         >
           <SpeakerIcon />
           {playing ? 'Playing...' : 'Playback'}
@@ -141,10 +143,20 @@ const SpeakerTest = () => {
 };
 
 export const AudioTest = () => {
-  const [error, setError] = useState<Error | undefined>();
+  const { hmsDiagnostics, updateStep } = useDiagnostics();
+  const [error, setErrorAlone] = useState<Error | undefined>();
+
+  const setError = useCallback(
+    (err?: Error) => {
+      updateStep(DiagnosticsStep.AUDIO, { hasFailed: !!err });
+      setErrorAlone(err);
+    },
+    [updateStep, setErrorAlone],
+  );
+
   useEffect(() => {
-    hmsDiagnostics.requestPermission({ audio: true }).catch(error => setError(error));
-  }, []);
+    hmsDiagnostics?.requestPermission({ audio: true }).catch(error => setError(error));
+  }, [hmsDiagnostics, setError]);
 
   return (
     <>

packages/roomkit-react/src/Diagnostics/BrowserTest.tsx

@@ -3,7 +3,7 @@ import { parsedUserAgent } from '@100mslive/react-sdk';
 import { TestContainer, TestFooter } from './components';
 import { Box, Flex } from '../Layout';
 import { Text } from '../Text';
-import { hmsDiagnostics } from './hms';
+import { DiagnosticsStep, useDiagnostics } from './DiagnosticsContext';
 
 const CMS_MEDIA_SERVER = 'https://storage.googleapis.com/100ms-cms-prod/';
 
@@ -103,14 +103,16 @@ const CheckDetails = ({ title, value, iconURL }: { title: string; value: string;
 );
 
 export const BrowserTest = () => {
+  const { hmsDiagnostics, updateStep } = useDiagnostics();
   const [error, setError] = useState<Error | undefined>();
   useEffect(() => {
     try {
-      hmsDiagnostics.checkBrowserSupport();
+      hmsDiagnostics?.checkBrowserSupport();
     } catch (err) {
+      updateStep(DiagnosticsStep.BROWSER, { hasFailed: true });
       setError(err as Error);
     }
-  }, []);
+  }, [hmsDiagnostics, updateStep]);
   return (
     <>
       <TestContainer css={{ display: 'flex', gap: '$8', '@lg': { display: 'block' } }}>