@videosdk.live/react-sdk 0.4.7 → 0.4.9

package/dist/types/index.d.ts

@@ -176,6 +176,8 @@ export function MeetingProvider({
  *      - **SEND_AND_RECV**: Both audio and video streams will be produced and consumed in this mode.
  *      - **RECV_ONLY**: Both audio and video streams will be only consumed in this mode.
  *      - **SIGNALLING_ONLY**: Audio and video streams will not be produced or consumed in this mode.
+ * ---
+ * @param onQualityLimitation - This event will be emitted when a quality limitation is detected or resolved during the meeting.
  */
 
 export function MeetingConsumer({
@@ -211,7 +213,8 @@ export function MeetingConsumer({
   onRecordingStateChanged,
   onLivestreamStateChanged,
   onMeetingStateChanged,
-  onParticipantModeChanged
+  onParticipantModeChanged,
+  onQualityLimitation,
 }: {
   children: any;
   onParticipantJoined?: (participant: Participant) => void;
@@ -338,6 +341,15 @@ export function MeetingConsumer({
     participantId: string;
     mode: 'SEND_AND_RECV' | 'SIGNALLING_ONLY' | 'RECV_ONLY'
   }) => void;
+  onQualityLimitation?: ({
+    type,
+    state,
+    timestamp,
+  }: {
+    type: "congestion" | "bandwidth" | "cpu",
+    state: "detected" | "resolved",
+    timestamp: number,
+  }) => void,
 }): any;
 
 /**
@@ -613,6 +625,53 @@ export function useParticipant(
   >;
 };
 
+/**
+ *
+ * @param streamId - ID of the stream.
+ * ---
+ * @param onStreamStateChanged - It’s a callback that triggers whenever the state of a remote participant’s video stream changes.
+ *
+ * **Code Example:**
+ * ```js
+ * function onStreamStateChanged({ state, timestamp }) {
+ *   console.log("onStreamStateChanged", state, timestamp);
+ * }
+ * const { kind, paused, pause, resume } = useStream(streamId, {
+ *   onStreamStateChanged,
+ * });
+ * ```
+ * ---
+ * @returns This will return the stream properties and methods.
+ */
+export function useStream(
+  streamId: string,
+  {
+    onStreamStateChanged,
+  }?: {
+    onStreamStateChanged?: ({
+      state,
+      timestamp,
+    }: {
+      state:
+        | 'active'
+        | 'ended'
+        | 'stuck'
+        | 'freeze-detected'
+        | 'freeze-resolved';
+      timestamp: number;
+    }) => void;
+  }
+): {
+  kind: 'audio' | 'video' | 'share' | 'shareAudio';
+  stream: Stream;
+  codec: string;
+  track: MediaStreamTrack;
+  paused: boolean;
+  pause: () => void;
+  resume: () => void;
+};
+
+
 /**
  * @param onParticipantJoined - This event callback is trigger when a new participant joins the meeting.
  * ---
@@ -679,6 +738,9 @@ export function useParticipant(
  * ---
  * @returns This will return Meeting properties and method. You can refer this [API Reference](https://docs.videosdk.live/react/api/sdk-reference/use-meeting/introduction)
  *
+ * ---
+ * @param onQualityLimitation - This event will be emitted when a quality limitation is detected or resolved during the meeting.
+
  */
 
 export function useMeeting({
@@ -721,6 +783,7 @@ export function useMeeting({
   onMediaRelayError,
   onMediaRelayRequestResponse,
   onMediaRelayRequestReceived,
+  onQualityLimitation,
 }?: {
   onParticipantJoined?: (participant: Participant) => void;
   onParticipantLeft?: (participant: Participant) => void;
@@ -889,6 +952,15 @@ export function useMeeting({
     accept: () => void;
     reject: () => void;
   }) => void;
+  onQualityLimitation?: ({
+    type,
+    state,
+    timestamp,
+  }: {
+    type: "congestion" | "bandwidth" | "cpu",
+    state: "detected" | "resolved",
+    timestamp: number,
+  }) => void,
 }): {
   meetingId: string;
   meeting: Meeting;
@@ -1707,6 +1779,8 @@ export function getNetworkStats({
  * ---
  * @param videoStyle - Custom styles for the video element inside the container.
  * 
+ * @param videoRef - Optional ref to the underlying <video> element.
+ * 
  * ---
  * @returns A React component that renders the participant's video stream with optional adaptive observers.
  *
@@ -1728,7 +1802,8 @@ export function VideoPlayer({
   containerStyle,
   className,
   classNameVideo,
-  videoStyle
+  videoStyle,
+  videoRef
 }: {
   participantId: string;
   type?: "video" | "share";
@@ -1736,6 +1811,7 @@ export function VideoPlayer({
   className?: string;
   classNameVideo?: string;
   videoStyle?: React.CSSProperties;
+  videoRef?: React.Ref<HTMLVideoElement>
 }): JSX.Element;
 
 /**

package/dist/types/meeting.d.ts

@@ -552,7 +552,8 @@ export class Meeting {
       | "media-relay-stopped"
       | "media-relay-error"
       | "media-relay-request-response"
-      | "media-relay-request-received",
+      | "media-relay-request-received"
+      | "quality-limitation",
     listener: (data: any) => void
   ): void;
   /**
@@ -609,7 +610,8 @@ export class Meeting {
       | "media-relay-stopped"
       | "media-relay-error"
       | "media-relay-request-response"
-      | "media-relay-request-received",
+      | "media-relay-request-received"
+      | "quality-limitation",
 
     listener: (data: any) => void
   ): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@videosdk.live/react-sdk",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "license": "ISC",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
@@ -76,6 +76,5 @@
   "dependencies": {
     "@videosdk.live/js-sdk": "0.3.9",
     "events": "^3.3.0"
-  },
-  "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
-}
+  }
+}