Merge branch 'dev'

.github/workflows/stale.yml

@@ -0,0 +1,20 @@
+name: Close stale issues and PRs
+on:
+  workflow_dispatch: {}
+  schedule:
+    - cron: "30 1 * * *"
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v8
+        with:
+          stale-issue-message: "This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days."
+          stale-pr-message: "This PR is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 10 days."
+          close-issue-message: "This issue was closed because it has been stalled for 5 days with no activity."
+          close-pr-message: "This PR was closed because it has been stalled for 10 days with no activity."
+          days-before-issue-stale: 30
+          days-before-pr-stale: 45
+          days-before-issue-close: 5
+          days-before-pr-close: 10

README.md

@@ -113,6 +113,34 @@ Once the app has been deployed, you can append the room code at the end of the d
 
 <br>
 
+### Maintaining A Forked Version
+
+Tthe following command will build the roomkit-react package and generate a .tgz file:
+
+```
+yarn && yarn build;
+cd packages/roomkit-react;
+yarn pack
+```
+
+Push your changes and the .tgz file to the forked repository and in the package.json of the app you are building, use the following link for the roomkit-react package:
+
+```
+"@100mslive/roomkit-react":"https://github.com/<user_name>/web-sdks/raw/main/packages/roomkit-react/<tgz_file_name>.tgz",
+```
+
+Re-install the dependencies after updating the package.json and build using the following command:
+
+```
+yarn && yarn build
+```
+
+You can now import the HMSPrebuilt component in the same way as before:
+
+```
+import { HMSPrebuilt } from '@100mslive/roomkit-react';
+```
+
 ## Contributing
 We welcome external contributors or anyone excited to help improve 100ms SDKs. If you'd like to get involved, check out our [contribution guide](./DEVELOPER.MD), and get started exploring the codebase.
 

packages/hls-player/src/controllers/HMSHLSPlayer.ts

@@ -236,7 +236,7 @@ export class HMSHLSPlayer implements IHMSHLSPlayer, IHMSHLSPlayerEventEmitter {
     });
   };
   private volumeEventHandler = () => {
-    this._volume = this._videoEl.volume;
+    this._volume = Math.round(this._videoEl.volume * 100);
   };
 
   private reConnectToStream = () => {

packages/hms-video-store/README.md

@@ -34,10 +34,10 @@ you want to do -
       passed in selector such that whenever the portion changes, the passed in callback is notified.
 2. Actions - The actions interface for dispatching actions which in turn may reach
    out to server and update the store. Check the interface with detailed doc
-   [here](src/core/IHMSActions.ts).
+   [here](./src/IHMSActions.ts).
 
 We also provide optimized and efficient selectors for most common use cases. These are
-available in [this folder](src/core/selectors).
+available in [this folder](./src/selectors).
 
 Important Note: The data received from either getState or Subscribe is immutable, the
 object received is frozen, and it is not allowed to mutate it. You'll get an error

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

@@ -232,16 +232,16 @@ export interface IHMSActions<T extends HMSGenericTypes = { sessionStore: Record<
   /**
    * Add  video plugins to the local peer video stream. Eg. Virtual Background, Face Filters etc.
    * Video plugins can be added/removed at any time after the video track is available.
-   * @param plugin HMSMediaStreamPlugin
    * @see HMSMediaStreamPlugin
+   * @param plugins
    */
   addPluginsToVideoStream(plugins: HMSMediaStreamPlugin[]): Promise<void>;
 
   /**
    * Remove video plugins to the local peer video stream. Eg. Virtual Background, Face Filters etc.
    * Video plugins can be added/removed at any time after the video track is available.
-   * @param plugin HMSMediaStreamPlugin
    * @see HMSMediaStreamPlugin
+   * @param plugins
    */
   removePluginsFromVideoStream(plugins: HMSMediaStreamPlugin[]): Promise<void>;
 
@@ -344,6 +344,7 @@ export interface IHMSActions<T extends HMSGenericTypes = { sessionStore: Record<
   /**
    * After leave send feedback to backend for call quality purpose.
    * @param feedback
+   * @param eventEndpoint
    */
   submitSessionFeedback(feedback: HMSSessionFeedback, eventEndpoint?: string): Promise<void>;
 

packages/hms-video-store/src/connection/subscribe/subscribeConnection.ts

@@ -98,8 +98,11 @@ export default class HMSSubscribeConnection extends HMSConnection {
       });
 
       const remote = this.remoteStreams.get(streamId)!;
-      const TrackCls = e.track.kind === 'audio' ? HMSRemoteAudioTrack : HMSRemoteVideoTrack;
-      const track = new TrackCls(remote, e.track);
+      const isAudioTrack = e.track.kind === 'audio';
+      const TrackCls = isAudioTrack ? HMSRemoteAudioTrack : HMSRemoteVideoTrack;
+      const track = isAudioTrack
+        ? new TrackCls(remote, e.track)
+        : new TrackCls(remote, e.track, undefined, this.isFlagEnabled(InitFlags.FLAG_DISABLE_NONE_LAYER_REQUEST));
       // reset the simulcast layer to none when new video tracks are added, UI will subscribe when required
       if (e.track.kind === 'video') {
         remote.setVideoLayerLocally(HMSSimulcastLayer.NONE, 'addTrack', 'subscribeConnection');

packages/hms-video-store/src/device-manager/DeviceManager.ts

@@ -4,7 +4,7 @@ import { ErrorFactory } from '../error/ErrorFactory';
 import { HMSException } from '../error/HMSException';
 import { EventBus } from '../events/EventBus';
 import { DeviceMap, HMSDeviceChangeEvent, SelectedDevices } from '../interfaces';
-import { isIOS } from '../internal';
+import { getAudioDeviceCategory, isIOS } from '../internal';
 import { HMSAudioTrackSettingsBuilder, HMSVideoTrackSettingsBuilder } from '../media/settings';
 import { HMSLocalAudioTrack, HMSLocalTrack, HMSLocalVideoTrack } from '../media/tracks';
 import { Store } from '../sdk/store';
@@ -443,14 +443,14 @@ export class DeviceManager implements HMSDeviceManager {
     let earpiece: InputDeviceInfo | null = null;
 
     for (const device of this.audioInput) {
-      const label = device.label.toLowerCase();
-      if (label.includes('speakerphone')) {
+      const deviceCategory = getAudioDeviceCategory(device.label);
+      if (deviceCategory === 'speakerphone') {
         speakerPhone = device;
-      } else if (label.includes('wired')) {
+      } else if (deviceCategory === 'wired') {
         wired = device;
-      } else if (/airpods|buds|wireless|bluetooth/gi.test(label)) {
+      } else if (deviceCategory === 'bluetooth') {
         bluetoothDevice = device;
-      } else if (label.includes('earpiece')) {
+      } else if (deviceCategory === 'speakerhone') {
         earpiece = device;
       }
     }

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

@@ -20,6 +20,7 @@ export {
   simulcastMapping,
   DeviceType,
   HMSPeerType,
+  getAudioDeviceCategory,
 } from './internal';
 
 export type {

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

@@ -34,6 +34,7 @@ export interface HMSRoom {
   max_size?: number;
   large_room_optimization?: boolean;
   isEffectsEnabled?: boolean;
+  disableNoneLayerRequest?: boolean;
   isVBEnabled?: boolean;
   effectsKey?: string;
   isHipaaEnabled?: boolean;

packages/hms-video-store/src/media/tracks/HMSLocalAudioTrack.ts

@@ -184,8 +184,8 @@ export class HMSLocalAudioTrack extends HMSAudioTrack {
       return;
     }
 
-    // Replace silent empty track with an actual audio track, if enabled.
-    if (value && isEmptyTrack(this.nativeTrack)) {
+    // Replace silent empty track or muted track(happens when microphone is disabled from address bar in iOS) with an actual audio track, if enabled.
+    if (value && (isEmptyTrack(this.nativeTrack) || this.nativeTrack.muted)) {
       await this.replaceTrackWith(this.settings);
     }
     await super.setEnabled(value);

packages/hms-video-store/src/media/tracks/HMSLocalVideoTrack.ts

@@ -566,12 +566,7 @@ export class HMSLocalVideoTrack extends HMSVideoTrack {
     if (document.visibilityState === 'hidden') {
       this.enabledStateBeforeBackground = this.enabled;
       if (this.enabled) {
-        const track = await this.replaceTrackWithBlank();
-        await this.replaceSender(track, this.enabled);
-        this.nativeTrack?.stop();
-        this.nativeTrack = track;
-      } else {
-        await this.replaceSender(this.nativeTrack, false);
+        await this.setEnabled(false);
       }
       // started interruption event
       this.eventBus.analytics.publish(
@@ -581,12 +576,9 @@ export class HMSLocalVideoTrack extends HMSVideoTrack {
         }),
       );
     } else {
-      HMSLogger.d(this.TAG, 'visibility visibile, restoring track state', this.enabledStateBeforeBackground);
+      HMSLogger.d(this.TAG, 'visibility visible, restoring track state', this.enabledStateBeforeBackground);
       if (this.enabledStateBeforeBackground) {
         await this.setEnabled(true);
-      } else {
-        this.nativeTrack.enabled = this.enabledStateBeforeBackground;
-        await this.replaceSender(this.nativeTrack, this.enabledStateBeforeBackground);
       }
       // ended interruption event
       this.eventBus.analytics.publish(
@@ -596,6 +588,5 @@ export class HMSLocalVideoTrack extends HMSVideoTrack {
         }),
       );
     }
-    this.eventBus.localVideoEnabled.publish({ enabled: this.nativeTrack.enabled, track: this });
   };
 }

packages/hms-video-store/src/media/tracks/HMSRemoteVideoTrack.ts

@@ -18,9 +18,11 @@ export class HMSRemoteVideoTrack extends HMSVideoTrack {
   private history = new TrackHistory();
   private preferredLayer: HMSPreferredSimulcastLayer = HMSSimulcastLayer.HIGH;
   private bizTrackId!: string;
+  private disableNoneLayerRequest = false;
 
-  constructor(stream: HMSRemoteStream, track: MediaStreamTrack, source?: string) {
+  constructor(stream: HMSRemoteStream, track: MediaStreamTrack, source?: string, disableNoneLayerRequest?: boolean) {
     super(stream, track, source);
+    this.disableNoneLayerRequest = !!disableNoneLayerRequest;
     this.setVideoHandler(new VideoElementManager(this));
   }
 
@@ -146,10 +148,7 @@ export class HMSRemoteVideoTrack extends HMSVideoTrack {
    * @returns {boolean} isDegraded - returns true if degraded
    * */
   setLayerFromServer(layerUpdate: VideoTrackLayerUpdate) {
-    this._degraded =
-      this.enabled &&
-      (layerUpdate.publisher_degraded || layerUpdate.subscriber_degraded) &&
-      layerUpdate.current_layer === HMSSimulcastLayer.NONE;
+    this._degraded = this.getDegradationValue(layerUpdate);
     this._degradedAt = this._degraded ? new Date() : this._degradedAt;
     const currentLayer = layerUpdate.current_layer;
     HMSLogger.d(
@@ -169,8 +168,22 @@ export class HMSRemoteVideoTrack extends HMSVideoTrack {
     return this._degraded;
   }
 
+  private getDegradationValue(layerUpdate: VideoTrackLayerUpdate) {
+    return (
+      this.enabled &&
+      (layerUpdate.publisher_degraded || layerUpdate.subscriber_degraded) &&
+      layerUpdate.current_layer === HMSSimulcastLayer.NONE
+    );
+  }
+
   private async updateLayer(source: string) {
-    const newLayer = this.degraded || !this.enabled || !this.hasSinks() ? HMSSimulcastLayer.NONE : this.preferredLayer;
+    let newLayer: HMSSimulcastLayer = this.preferredLayer;
+    if (this.enabled && this.hasSinks()) {
+      newLayer = this.preferredLayer;
+      // send none only when the flag is not set
+    } else if (!this.disableNoneLayerRequest) {
+      newLayer = HMSSimulcastLayer.NONE;
+    }
     if (!this.shouldSendVideoLayer(newLayer, source)) {
       return;
     }

packages/hms-video-store/src/media/tracks/RemoteVideoTrack.test.ts

@@ -19,7 +19,7 @@ describe('remoteVideoTrack', () => {
     const connection = { sendOverApiDataChannelWithResponse } as unknown as HMSSubscribeConnection;
     stream = new HMSRemoteStream(nativeStream, connection);
     nativeTrack = { id: trackId, kind: 'video', enabled: true } as MediaStreamTrack;
-    track = new HMSRemoteVideoTrack(stream, nativeTrack, 'regular');
+    track = new HMSRemoteVideoTrack(stream, nativeTrack, 'regular', false);
     window.MediaStream = jest.fn().mockImplementation(() => ({
       addTrack: jest.fn(),
       // Add any method you want to mock
@@ -156,3 +156,63 @@ describe('remoteVideoTrack', () => {
     expectLayersSent([HMSSimulcastLayer.HIGH, HMSSimulcastLayer.NONE]);
   });
 });
+
+describe('HMSRemoteVideoTrack with disableNoneLayerRequest', () => {
+  let stream: HMSRemoteStream;
+  let sendOverApiDataChannelWithResponse: jest.Mock;
+  let track: HMSRemoteVideoTrack;
+  let nativeTrack: MediaStreamTrack;
+  let videoElement: HTMLVideoElement;
+  const trackId = 'test-track-id';
+
+  beforeEach(() => {
+    videoElement = document.createElement('video');
+    sendOverApiDataChannelWithResponse = jest.fn();
+    const connection = { sendOverApiDataChannelWithResponse } as unknown as HMSSubscribeConnection;
+    const nativeStream = new MediaStream();
+    stream = new HMSRemoteStream(nativeStream, connection);
+    nativeTrack = { id: trackId, kind: 'video', enabled: true } as MediaStreamTrack;
+    track = new HMSRemoteVideoTrack(stream, nativeTrack, 'regular', true); // disableNoneLayerRequest flag is set
+    track.setTrackId(trackId);
+
+    window.MediaStream = jest.fn().mockImplementation(() => ({
+      addTrack: jest.fn(),
+    }));
+  });
+
+  const expectLayersSent = (layers: HMSSimulcastLayer[]) => {
+    const allCalls = sendOverApiDataChannelWithResponse.mock.calls;
+    expect(allCalls.length).toBe(layers.length);
+    for (let i = 0; i < allCalls.length; i++) {
+      const data = allCalls[i][0];
+      expect(data.params.max_spatial_layer).toBe(layers[i]);
+    }
+  };
+
+  const sfuDegrades = () => {
+    track.setLayerFromServer({
+      subscriber_degraded: true,
+      expected_layer: HMSSimulcastLayer.HIGH,
+      current_layer: HMSSimulcastLayer.NONE,
+      publisher_degraded: false,
+      track_id: trackId,
+    });
+  };
+
+  test('disableNoneLayerRequest - degradation', async () => {
+    await track.addSink(videoElement);
+    expectLayersSent([HMSSimulcastLayer.HIGH]);
+
+    sfuDegrades();
+    expectLayersSent([HMSSimulcastLayer.HIGH]);
+  });
+
+  test('disableNoneLayerRequest - mute and removeSink', async () => {
+    await track.addSink(videoElement);
+    track.setEnabled(false);
+    expectLayersSent([HMSSimulcastLayer.HIGH]);
+
+    await track.removeSink(videoElement);
+    expectLayersSent([HMSSimulcastLayer.HIGH]);
+  });
+});

packages/hms-video-store/src/notification-manager/managers/onDemandTrackManager.ts

@@ -67,7 +67,12 @@ export class OnDemandTrackManager extends TrackManager {
     const remoteStream = new HMSRemoteStream(new MediaStream(), this.transport.getSubscribeConnection()!);
     const emptyTrack = LocalTrackManager.getEmptyVideoTrack();
     emptyTrack.enabled = !trackInfo.mute;
-    const track = new HMSRemoteVideoTrack(remoteStream, emptyTrack, trackInfo.source);
+    const track = new HMSRemoteVideoTrack(
+      remoteStream,
+      emptyTrack,
+      trackInfo.source,
+      this.store.getRoom()?.disableNoneLayerRequest,
+    );
     track.setTrackId(trackInfo.track_id);
     track.peerId = hmsPeer.peerId;
     track.logIdentifier = hmsPeer.name;

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

@@ -159,6 +159,7 @@ export class SDKToHMS {
       peerCount: sdkRoom.peerCount,
       isLargeRoom: sdkRoom.large_room_optimization,
       isEffectsEnabled: sdkRoom.isEffectsEnabled,
+      disableNoneLayerRequest: sdkRoom.disableNoneLayerRequest,
       isVBEnabled: sdkRoom.isVBEnabled,
       effectsKey: sdkRoom.effectsKey,
       isHipaaEnabled: sdkRoom.isHipaaEnabled,