@videosdk.live/react-sdk 0.2.1 → 0.2.2

package/dist/types/index.d.ts

@@ -5,6 +5,7 @@
 //                 Zujo Now <https://github.com/zujonow>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 
+import React, { JSX } from 'react';
 import { Connection } from './connection';
 import {
   CameraDeviceInfo,
@@ -418,6 +419,34 @@ export function useMediaDevice({
  * });
  * ```
  * ---
+ * @param onStreamPaused -
+ * - It's a callback that gets triggered whenever a participant's stream is paused by adaptive subscription manager.
+ * - The `data` parameter contains the reason for pausing.
+ *
+ * **Code Example :**
+ * ```js
+ * function onStreamPaused(data) {
+ *   console.log("Stream paused:", data);
+ * }
+ * const { displayName } = useParticipant(participantId, {
+ *   onStreamPaused,
+ * });
+ * ```
+ * ---
+ * @param onStreamResumed -
+ * - It's a callback that gets triggered whenever a participant's stream is resumed by adaptive subscription manager.
+ * - The `stream` parameter contains the reason for resuming.
+ *
+ * **Code Example :**
+ * ```js
+ * function onStreamResumed(data) {
+ *   console.log("Stream resumed:", data);
+ * }
+ * const { displayName } = useParticipant(participantId, {
+ *   onStreamResumed,
+ * });
+ * ```
+ * ---
  * @returns This will return particular participant properties and method. You can refer this [API Reference](https://docs.videosdk.live/react/api/sdk-reference/use-participant/introduction)
  */
 export function useParticipant(
@@ -426,7 +455,9 @@ export function useParticipant(
     onStreamEnabled,
     onStreamDisabled,
     onMediaStatusChanged,
-    onVideoQualityChanged
+    onVideoQualityChanged,
+    onStreamPaused,
+    onStreamResumed
   }?: {
     onStreamDisabled?: (stream: Stream) => void;
     onStreamEnabled?: (stream: Stream) => void;
@@ -448,6 +479,20 @@ export function useParticipant(
       prevQuality: 'low' | 'med' | 'high';
       currentQuality: 'low' | 'med' | 'high';
     }) => void;
+    onStreamPaused?: ({
+      kind,
+      reason
+    }: {
+      kind: 'video';
+      reason: string;
+    }) => void;
+    onStreamResumed?: ({
+      kind,
+      reason
+    }: {
+      kind: 'video';
+      reason: string;
+    }) => void;
   }
 ): {
   displayName: string;
@@ -867,6 +912,13 @@ export function useMeeting({
     }
   ) => void;
   stopRecording: () => void;
+  switchTo: ({
+    meetingId,
+    token
+  }: {
+    meetingId: string;
+    token?: string;
+  }) => void;
   startLiveStream: (
     outputs: Array<{
       url: string;
@@ -1484,6 +1536,117 @@ export function getNetworkStats({
   timeoutDuration?: number | undefined;
 }): Promise<{ downloadSpeed: number; uploadSpeed: number }>;
 
+/**
+ * @param participantId - Unique ID of the participant whose video stream will be rendered.
+ * 
+ * ---
+ * @param type - Type of stream to render.
+ * - **"video"**: Renders the participant's webcam video stream.
+ * - **"share"**: Renders the participant's screen share video stream. Observers are not attached for this type.
+ * 
+ * ---
+ * @param containerStyle - Custom styles for the video container.
+ * 
+ * ---
+ * @param className - Custom class name for the video container.
+ * 
+ * ---
+ * @param classNameVideo - Custom class name for the video element inside the container.
+ * 
+ * ---
+ * @param videoStyle - Custom styles for the video element inside the container.
+ * 
+ * ---
+ * @returns A React component that renders the participant's video stream with optional adaptive observers.
+ *
+ * **Code Example:**
+ * ```tsx
+ * <VideoPlayer
+ *   participantId="participant123"
+ *   type="video"
+ *   containerStyle={{ border: "1px solid red" }}
+ *   className="custom-container"
+ *   classNameVideo="custom-video"
+ *   videoStyle={{ objectFit: "cover" }}
+ * />
+ * ```
+ */
+export function VideoPlayer({
+  participantId,
+  type,
+  containerStyle,
+  className,
+  classNameVideo,
+  videoStyle
+}: {
+  participantId: string;
+  type?: "video" | "share";
+  containerStyle?: React.CSSProperties;
+  className?: string;
+  classNameVideo?: string;
+  videoStyle?: React.CSSProperties;
+}): JSX.Element;
+
+/**
+ * @param participantId - Unique ID of the participant whose audio stream will be rendered.
+ * 
+ * ---
+ * @param type - Type of audio stream to render.
+ * - **"audio"**: Renders the participant's microphone audio stream.
+ * - **"shareAudio"**: Renders the participant's screen share audio stream.
+ * 
+ * ---
+ * @returns A React component that renders the participant's audio stream.
+ *
+ * **Code Example:**
+ * ```tsx
+ * <AudioPlayer
+ *   participantId="participant123"
+ *   type="audio"
+ * />
+ * ```
+ */
+export function AudioPlayer({
+  participantId,
+  type
+}: {
+  participantId: string;
+  type?: "audio" | "shareAudio";
+}): JSX.Element;
+
+/**
+ * @param VideoPlayerComponent - The base video player component to be enhanced with adaptive observers.
+ * 
+ * ---
+ * @param intersectionObserverOptions - Options for the IntersectionObserver.
+ * 
+ * ---
+ * @param debounceDelay - Delay in milliseconds for debouncing observer callbacks.
+ * 
+ * ---
+ * @returns A Higher-Order Component (HOC) that wraps the provided video player component and adds adaptive observers.
+ *
+ * **Code Example:**
+ * ```tsx
+ * const EnhancedVideoPlayer = withAdaptiveObservers(VideoPlayer, {
+ *   root: null,
+ *   rootMargin: "0px",
+ *   threshold: 0
+ * }, 400);
+ *
+ * <EnhancedVideoPlayer participantId="participant123" type="video" />;
+ * ```
+ */
+export function withAdaptiveObservers(
+  VideoPlayerComponent: React.ComponentType<any>,
+  intersectionObserverOptions?: {
+    root?: Element | null;
+    rootMargin?: string;
+    threshold?: number | number[];
+  },
+  debounceDelay?: number
+): React.ComponentType<any>;
+
 export const Constants: {
   errors: {
     INVALID_API_KEY: number;

package/dist/types/meeting.d.ts

@@ -296,6 +296,19 @@ export class Meeting {
    */
   changeMic(object: string | MediaStream): void;
 
+  /**
+ * @description This method is used to switch to a different meeting
+ * @param meetingId The ID of the meeting to switch to (mandatory)
+ * @param token The token for the new meeting (optional)
+ */
+  switchTo({
+    meetingId,
+    token
+  }: {
+    meetingId: string;
+    token?: string;
+  }): void;
+
   /**
    *
    * @param object These can be the  `deviceId` to which the webcam input has to be changed or
@@ -348,6 +361,17 @@ export class Meeting {
    * @param options
    */
   seekVideo({ currentTime }: { currentTime: number }): void;
+
+  /**
+   * @description Enables Adaptive Subscription, which dynamically adjusts the subscribed video streams 
+   * based on participant visibility and network conditions to optimize performance in large meetings.
+   */
+  enableAdaptiveSubscription(): void;
+  /**
+   * @description Disables Adaptive Subscription, forcing all subscribed video streams to remain active 
+   * regardless of participant visibility or network conditions.
+   */
+  disableAdaptiveSubscription(): void;
   pubSub: {
     /**
      * Publish message to a topic

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@videosdk.live/react-sdk",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "license": "ISC",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
@@ -13,7 +13,7 @@
     "lint": "eslint 'src/**/*.js'"
   },
   "peerDependencies": {
-    "react": "^16.13.1 || ^17 || ^18"
+    "react": "^16.13.1 || ^17 || ^18 || ^19"
   },
   "keywords": [
     "react",
@@ -74,7 +74,7 @@
     }
   },
   "dependencies": {
-    "@videosdk.live/js-sdk": "0.1.5",
+    "@videosdk.live/js-sdk": "0.1.6",
     "events": "^3.3.0"
   }
 }