@fishjam-cloud/react-native-client 0.22.1 → 0.23.0

package/build/livestream/components/LivestreamViewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"LivestreamViewer.js","sourceRoot":"","sources":["../../../src/livestream/components/LivestreamViewer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAqB,MAAM,wBAAwB,CAAC;AA4C3E;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,KAAK,EACL,WAAW,EACX,UAAU,EACV,YAAY,EACZ,WAAW,EACX,OAAO,EACP,GAAG,GACmB,EAAE,EAAE,CAAC,CAC3B,CAAC,cAAc,CACb,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,KAAK,CAAC,CAAC,KAAsB,CAAC,CAC9B,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,OAAO,CAAC,CAAC,OAAO,CAAC,EACjB,CACH,CAAC","sourcesContent":["import { CSSProperties, Ref } from 'react';\nimport { StyleProp, ViewStyle } from 'react-native';\nimport { WhepClientView, WhepClientViewRef } from 'react-native-whip-whep';\n\nexport type LivestreamViewerRef = WhepClientViewRef;\n\n/**\n * Props of the LivestreamView component\n */\nexport type LivestreamViewerProps = {\n  /**\n   * Styles of the LivestreamView component\n   */\n  style?: StyleProp<ViewStyle>;\n  /**\n   * Used to override the orientation of the video (from metadata).\n   * Defaults to \"portrait\".\n   */\n  orientation?: 'landscape' | 'portrait';\n  /**\n   * A variable deciding whether the Picture-in-Picture is enabled.\n   * Defaults to true.\n   */\n  pipEnabled?: boolean;\n  /**\n   * A variable deciding whether the Picture-in-Picture mode should be started automatically after the app is backgrounded.\n   * Defaults to false.\n   */\n  autoStartPip?: boolean;\n  /**\n   * A variable deciding whether the Picture-in-Picture mode should be stopped automatically on iOS after the app is foregrounded.\n   * Always enabled on Android as PiP is not supported in foreground.\n   * Defaults to false.\n   */\n  autoStopPip?: boolean;\n  /**\n   * A variable deciding the size of the Picture-in-Picture mode.\n   */\n  pipSize?: {\n    width: number;\n    height: number;\n  };\n\n  ref?: Ref<LivestreamViewerRef>;\n};\n\n/**\n * Renders a video player playing the livestream set up with {@link useLivestreamViewer} hook.\n *\n * @category Components\n * @param {object} props\n * @param {object} props.style\n */\nexport const LivestreamViewer = ({\n  style,\n  orientation,\n  pipEnabled,\n  autoStartPip,\n  autoStopPip,\n  pipSize,\n  ref,\n}: LivestreamViewerProps) => (\n  <WhepClientView\n    ref={ref}\n    style={style as CSSProperties}\n    pipEnabled={pipEnabled}\n    autoStartPip={autoStartPip}\n    autoStopPip={autoStopPip}\n    pipSize={pipSize}\n  />\n);\n"]}
+{"version":3,"file":"LivestreamViewer.js","sourceRoot":"","sources":["../../../src/livestream/components/LivestreamViewer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAqB,MAAM,wBAAwB,CAAC;AAuC3E;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,KAAK,EACL,UAAU,EACV,YAAY,EACZ,WAAW,EACX,OAAO,EACP,GAAG,GACmB,EAAE,EAAE,CAAC,CAC3B,CAAC,cAAc,CACb,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,KAAK,CAAC,CAAC,KAAsB,CAAC,CAC9B,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,OAAO,CAAC,CAAC,OAAO,CAAC,EACjB,CACH,CAAC","sourcesContent":["import { CSSProperties, Ref } from 'react';\nimport { StyleProp, ViewStyle } from 'react-native';\nimport { WhepClientView, WhepClientViewRef } from 'react-native-whip-whep';\n\nexport type LivestreamViewerRef = WhepClientViewRef;\n\n/**\n * Props of the LivestreamView component\n */\nexport type LivestreamViewerProps = {\n  /**\n   * Styles of the LivestreamView component\n   */\n  style?: StyleProp<ViewStyle>;\n  /**\n   * A variable deciding whether the Picture-in-Picture is enabled.\n   * Defaults to true.\n   */\n  pipEnabled?: boolean;\n  /**\n   * A variable deciding whether the Picture-in-Picture mode should be started automatically after the app is backgrounded.\n   * Defaults to false.\n   */\n  autoStartPip?: boolean;\n  /**\n   * A variable deciding whether the Picture-in-Picture mode should be stopped automatically on iOS after the app is foregrounded.\n   * Always enabled on Android as PiP is not supported in foreground.\n   * Defaults to false.\n   */\n  autoStopPip?: boolean;\n  /**\n   * A variable deciding the size of the Picture-in-Picture mode.\n   */\n  pipSize?: {\n    width: number;\n    height: number;\n  };\n\n  ref: Ref<LivestreamViewerRef>;\n};\n\n/**\n * Renders a video player playing the livestream set up with {@link useLivestreamViewer} hook.\n *\n * @category Components\n * @param {object} props\n * @param {object} props.style\n */\nexport const LivestreamViewer = ({\n  style,\n  pipEnabled,\n  autoStartPip,\n  autoStopPip,\n  pipSize,\n  ref,\n}: LivestreamViewerProps) => (\n  <WhepClientView\n    ref={ref}\n    style={style as CSSProperties}\n    pipEnabled={pipEnabled}\n    autoStartPip={autoStartPip}\n    autoStopPip={autoStopPip}\n    pipSize={pipSize}\n  />\n);\n"]}

package/build/livestream/hooks/useLivestreamStreamer.d.ts

@@ -1,4 +1,4 @@
-import { WhipClient } from 'react-native-whip-whep';
+import { Camera, SenderAudioCodecName, SenderVideoCodecName, VideoParameters, WhipClientViewRef } from 'react-native-whip-whep';
 /**
  * @category Livestream
  */
@@ -12,17 +12,54 @@ export interface useLivestreamStreamerResult {
     connect: (token: string, urlOverride?: string) => Promise<void>;
     /** Callback to stop publishing anything previously published with {@link connect} */
     disconnect: () => Promise<void>;
+    /** Callback to flip camera */
+    flipCamera: () => Promise<void>;
+    /** Callback to switch camera to the one passed as arguement */
+    switchCamera: (deviceId: string) => Promise<void>;
+    /** Callback to get the id of camera which is used for streaming  */
+    currentCameraDeviceId: () => Promise<string | undefined>;
     /** Utility flag which indicates the current connection status */
     isConnected: boolean;
     /**
      * Reference to the WhipClient instance. Needs to be passed to the {@link LivestreamStreamer} component.
      */
-    whipClientRef: React.RefObject<WhipClient | null>;
+    whipClientRef: React.RefObject<WhipClientViewRef | null>;
 }
+export type UseLivestreamStreamerParams = {
+    /**
+     * If video track should be enabled.
+     * Defaults to true.
+     */
+    videoEnabled?: boolean;
+    /**
+     * If audio track should be enabled.
+     * Defaults to true.
+     */
+    audioEnabled?: boolean;
+    /**
+     * Camera to use for the livestream.
+     * Use {@link cameras} to get the list of supported cameras.
+     */
+    camera?: Camera;
+    /**
+     *  Set video parameters for the camera
+     */
+    videoParameters?: VideoParameters;
+    /**
+     * Set the preferred video codecs for sending the video.
+     * Use {@link WhipClient.getSupportedVideoCodecs} to get the list of supported video codecs.
+     */
+    preferredVideoCodecs?: SenderVideoCodecName[];
+    /**
+     * Set the preferred audio codecs for sending the audio.
+     * Use {@link WhipClient.getSupportedAudioCodecs} to get the list of supported audio codecs.
+     */
+    preferredAudioCodecs?: SenderAudioCodecName[];
+};
 /**
  * Hook for publishing a livestream, which can be then received with {@link useLivestreamViewer}
  * @category Livestream
  * @group Hooks
  */
-export declare const useLivestreamStreamer: () => useLivestreamStreamerResult;
+export declare const useLivestreamStreamer: ({ videoEnabled, audioEnabled, camera, videoParameters, preferredVideoCodecs, preferredAudioCodecs, }?: UseLivestreamStreamerParams) => useLivestreamStreamerResult;
 //# sourceMappingURL=useLivestreamStreamer.d.ts.map

package/build/livestream/hooks/useLivestreamStreamer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLivestreamStreamer.d.ts","sourceRoot":"","sources":["../../../src/livestream/hooks/useLivestreamStreamer.ts"],"names":[],"mappings":"AACA,OAAO,EAA0B,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAG5E;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC1C;;;;;OAKG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE,qFAAqF;IACrF,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAChC,iEAAiE;IACjE,WAAW,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC;CACnD;AAED;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,QAAO,2BAwBxC,CAAC"}
+{"version":3,"file":"useLivestreamStreamer.d.ts","sourceRoot":"","sources":["../../../src/livestream/hooks/useLivestreamStreamer.ts"],"names":[],"mappings":"AACA,OAAO,EACL,MAAM,EAEN,oBAAoB,EACpB,oBAAoB,EACpB,eAAe,EACf,iBAAiB,EAElB,MAAM,wBAAwB,CAAC;AAGhC;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC1C;;;;;OAKG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE,qFAAqF;IACrF,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAChC,8BAA8B;IAC9B,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAChC,+DAA+D;IAC/D,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAClD,oEAAoE;IACpE,qBAAqB,EAAE,MAAM,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACzD,iEAAiE;IACjE,WAAW,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CAC1D;AAED,MAAM,MAAM,2BAA2B,GAAG;IACxC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC;;;OAGG;IACH,oBAAoB,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAC9C;;;OAGG;IACH,oBAAoB,CAAC,EAAE,oBAAoB,EAAE,CAAC;CAC/C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,GAAI,uGAOnC,2BAAgC,KAAG,2BAqErC,CAAC"}

package/build/livestream/hooks/useLivestreamStreamer.js

@@ -1,12 +1,12 @@
-import { useCallback, useRef } from 'react';
-import { useWhipConnectionState } from 'react-native-whip-whep';
+import { useCallback, useRef, useEffect } from 'react';
+import { cameras, useWhipConnectionState, } from 'react-native-whip-whep';
 import { FISHJAM_WHIP_URL } from '../../consts';
 /**
  * Hook for publishing a livestream, which can be then received with {@link useLivestreamViewer}
  * @category Livestream
  * @group Hooks
  */
-export const useLivestreamStreamer = () => {
+export const useLivestreamStreamer = ({ videoEnabled, audioEnabled, camera, videoParameters, preferredVideoCodecs, preferredAudioCodecs, } = {}) => {
     const state = useWhipConnectionState();
     const isConnected = state === 'connected';
     const whipClientRef = useRef(null);
@@ -20,9 +20,51 @@ export const useLivestreamStreamer = () => {
     const disconnect = useCallback(async () => {
         await whipClientRef.current?.disconnect();
     }, []);
+    const flipCamera = useCallback(async () => {
+        await whipClientRef.current?.flipCamera();
+    }, []);
+    const switchCamera = useCallback(async (deviceId) => {
+        return await whipClientRef.current?.switchCamera(deviceId);
+    }, []);
+    const currentCameraDeviceId = useCallback(async () => {
+        return await whipClientRef.current?.currentCameraDeviceId();
+    }, []);
+    useEffect(() => {
+        try {
+            const initializeCamera = async () => {
+                await whipClientRef.current?.initializeCamera({
+                    audioEnabled: audioEnabled ?? true,
+                    videoEnabled: videoEnabled ?? true,
+                    videoDeviceId: camera?.id ?? cameras[0].id,
+                    videoParameters: videoParameters,
+                    preferredVideoCodecs: preferredVideoCodecs,
+                    preferredAudioCodecs: preferredAudioCodecs,
+                });
+            };
+            initializeCamera();
+        }
+        catch {
+            console.error('Failed to initialize camera');
+        }
+        const ref = whipClientRef.current;
+        return () => {
+            ref?.disconnect();
+        };
+    }, [
+        camera,
+        videoParameters,
+        videoEnabled,
+        audioEnabled,
+        preferredVideoCodecs,
+        preferredAudioCodecs,
+        whipClientRef,
+    ]);
     return {
         connect,
         disconnect,
+        flipCamera,
+        switchCamera,
+        currentCameraDeviceId,
         isConnected,
         whipClientRef,
     };

package/build/livestream/hooks/useLivestreamStreamer.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLivestreamStreamer.js","sourceRoot":"","sources":["../../../src/livestream/hooks/useLivestreamStreamer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,sBAAsB,EAAc,MAAM,wBAAwB,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAuBhD;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAgC,EAAE;IACrE,MAAM,KAAK,GAAG,sBAAsB,EAAE,CAAC;IACvC,MAAM,WAAW,GAAG,KAAK,KAAK,WAAW,CAAC;IAE1C,MAAM,aAAa,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAEtD,MAAM,OAAO,GAAG,WAAW,CAAC,KAAK,EAAE,KAAa,EAAE,WAAoB,EAAE,EAAE;QACxE,MAAM,WAAW,GAAG,WAAW,IAAI,gBAAgB,CAAC;QACpD,MAAM,aAAa,CAAC,OAAO,EAAE,OAAO,CAAC;YACnC,SAAS,EAAE,KAAK;YAChB,SAAS,EAAE,WAAW;SACvB,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACxC,MAAM,aAAa,CAAC,OAAO,EAAE,UAAU,EAAE,CAAC;IAC5C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,OAAO;QACP,UAAU;QACV,WAAW;QACX,aAAa;KACd,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useCallback, useRef } from 'react';\nimport { useWhipConnectionState, WhipClient } from 'react-native-whip-whep';\nimport { FISHJAM_WHIP_URL } from '../../consts';\n\n/**\n * @category Livestream\n */\nexport interface useLivestreamStreamerResult {\n  /**\n   * Callback used to start publishing the selected audio and video media streams.\n   *\n   * @remarks\n   * Calling {@link connect} multiple times will have the effect of only publishing the **last** specified inputs.\n   */\n  connect: (token: string, urlOverride?: string) => Promise<void>;\n  /** Callback to stop publishing anything previously published with {@link connect} */\n  disconnect: () => Promise<void>;\n  /** Utility flag which indicates the current connection status */\n  isConnected: boolean;\n  /**\n   * Reference to the WhipClient instance. Needs to be passed to the {@link LivestreamStreamer} component.\n   */\n  whipClientRef: React.RefObject<WhipClient | null>;\n}\n\n/**\n * Hook for publishing a livestream, which can be then received with {@link useLivestreamViewer}\n * @category Livestream\n * @group Hooks\n */\nexport const useLivestreamStreamer = (): useLivestreamStreamerResult => {\n  const state = useWhipConnectionState();\n  const isConnected = state === 'connected';\n\n  const whipClientRef = useRef<WhipClient | null>(null);\n\n  const connect = useCallback(async (token: string, urlOverride?: string) => {\n    const resolvedUrl = urlOverride ?? FISHJAM_WHIP_URL;\n    await whipClientRef.current?.connect({\n      authToken: token,\n      serverUrl: resolvedUrl,\n    });\n  }, []);\n\n  const disconnect = useCallback(async () => {\n    await whipClientRef.current?.disconnect();\n  }, []);\n\n  return {\n    connect,\n    disconnect,\n    isConnected,\n    whipClientRef,\n  };\n};\n"]}
+{"version":3,"file":"useLivestreamStreamer.js","sourceRoot":"","sources":["../../../src/livestream/hooks/useLivestreamStreamer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAEL,OAAO,EAKP,sBAAsB,GACvB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AA6DhD;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EACpC,YAAY,EACZ,YAAY,EACZ,MAAM,EACN,eAAe,EACf,oBAAoB,EACpB,oBAAoB,MACW,EAAE,EAA+B,EAAE;IAClE,MAAM,KAAK,GAAG,sBAAsB,EAAE,CAAC;IACvC,MAAM,WAAW,GAAG,KAAK,KAAK,WAAW,CAAC;IAE1C,MAAM,aAAa,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IAE7D,MAAM,OAAO,GAAG,WAAW,CAAC,KAAK,EAAE,KAAa,EAAE,WAAoB,EAAE,EAAE;QACxE,MAAM,WAAW,GAAG,WAAW,IAAI,gBAAgB,CAAC;QACpD,MAAM,aAAa,CAAC,OAAO,EAAE,OAAO,CAAC;YACnC,SAAS,EAAE,KAAK;YAChB,SAAS,EAAE,WAAW;SACvB,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACxC,MAAM,aAAa,CAAC,OAAO,EAAE,UAAU,EAAE,CAAC;IAC5C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACxC,MAAM,aAAa,CAAC,OAAO,EAAE,UAAU,EAAE,CAAC;IAC5C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,EAAE,QAAgB,EAAE,EAAE;QAC1D,OAAO,MAAM,aAAa,CAAC,OAAO,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAC7D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,qBAAqB,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACnD,OAAO,MAAM,aAAa,CAAC,OAAO,EAAE,qBAAqB,EAAE,CAAC;IAC9D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC;YACH,MAAM,gBAAgB,GAAG,KAAK,IAAI,EAAE;gBAClC,MAAM,aAAa,CAAC,OAAO,EAAE,gBAAgB,CAAC;oBAC5C,YAAY,EAAE,YAAY,IAAI,IAAI;oBAClC,YAAY,EAAE,YAAY,IAAI,IAAI;oBAClC,aAAa,EAAE,MAAM,EAAE,EAAE,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE;oBAC1C,eAAe,EAAE,eAAe;oBAChC,oBAAoB,EAAE,oBAAoB;oBAC1C,oBAAoB,EAAE,oBAAoB;iBAC3C,CAAC,CAAC;YACL,CAAC,CAAC;YACF,gBAAgB,EAAE,CAAC;QACrB,CAAC;QAAC,MAAM,CAAC;YACP,OAAO,CAAC,KAAK,CAAC,6BAA6B,CAAC,CAAC;QAC/C,CAAC;QACD,MAAM,GAAG,GAAG,aAAa,CAAC,OAAO,CAAC;QAClC,OAAO,GAAG,EAAE;YACV,GAAG,EAAE,UAAU,EAAE,CAAC;QACpB,CAAC,CAAC;IACJ,CAAC,EAAE;QACD,MAAM;QACN,eAAe;QACf,YAAY;QACZ,YAAY;QACZ,oBAAoB;QACpB,oBAAoB;QACpB,aAAa;KACd,CAAC,CAAC;IAEH,OAAO;QACL,OAAO;QACP,UAAU;QACV,UAAU;QACV,YAAY;QACZ,qBAAqB;QACrB,WAAW;QACX,aAAa;KACd,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useCallback, useRef, useEffect } from 'react';\nimport {\n  Camera,\n  cameras,\n  SenderAudioCodecName,\n  SenderVideoCodecName,\n  VideoParameters,\n  WhipClientViewRef,\n  useWhipConnectionState,\n} from 'react-native-whip-whep';\nimport { FISHJAM_WHIP_URL } from '../../consts';\n\n/**\n * @category Livestream\n */\nexport interface useLivestreamStreamerResult {\n  /**\n   * Callback used to start publishing the selected audio and video media streams.\n   *\n   * @remarks\n   * Calling {@link connect} multiple times will have the effect of only publishing the **last** specified inputs.\n   */\n  connect: (token: string, urlOverride?: string) => Promise<void>;\n  /** Callback to stop publishing anything previously published with {@link connect} */\n  disconnect: () => Promise<void>;\n  /** Callback to flip camera */\n  flipCamera: () => Promise<void>;\n  /** Callback to switch camera to the one passed as arguement */\n  switchCamera: (deviceId: string) => Promise<void>;\n  /** Callback to get the id of camera which is used for streaming  */\n  currentCameraDeviceId: () => Promise<string | undefined>;\n  /** Utility flag which indicates the current connection status */\n  isConnected: boolean;\n  /**\n   * Reference to the WhipClient instance. Needs to be passed to the {@link LivestreamStreamer} component.\n   */\n  whipClientRef: React.RefObject<WhipClientViewRef | null>;\n}\n\nexport type UseLivestreamStreamerParams = {\n  /**\n   * If video track should be enabled.\n   * Defaults to true.\n   */\n  videoEnabled?: boolean;\n  /**\n   * If audio track should be enabled.\n   * Defaults to true.\n   */\n  audioEnabled?: boolean;\n  /**\n   * Camera to use for the livestream.\n   * Use {@link cameras} to get the list of supported cameras.\n   */\n  camera?: Camera;\n  /**\n   *  Set video parameters for the camera\n   */\n  videoParameters?: VideoParameters;\n  /**\n   * Set the preferred video codecs for sending the video.\n   * Use {@link WhipClient.getSupportedVideoCodecs} to get the list of supported video codecs.\n   */\n  preferredVideoCodecs?: SenderVideoCodecName[];\n  /**\n   * Set the preferred audio codecs for sending the audio.\n   * Use {@link WhipClient.getSupportedAudioCodecs} to get the list of supported audio codecs.\n   */\n  preferredAudioCodecs?: SenderAudioCodecName[];\n};\n\n/**\n * Hook for publishing a livestream, which can be then received with {@link useLivestreamViewer}\n * @category Livestream\n * @group Hooks\n */\nexport const useLivestreamStreamer = ({\n  videoEnabled,\n  audioEnabled,\n  camera,\n  videoParameters,\n  preferredVideoCodecs,\n  preferredAudioCodecs,\n}: UseLivestreamStreamerParams = {}): useLivestreamStreamerResult => {\n  const state = useWhipConnectionState();\n  const isConnected = state === 'connected';\n\n  const whipClientRef = useRef<WhipClientViewRef | null>(null);\n\n  const connect = useCallback(async (token: string, urlOverride?: string) => {\n    const resolvedUrl = urlOverride ?? FISHJAM_WHIP_URL;\n    await whipClientRef.current?.connect({\n      authToken: token,\n      serverUrl: resolvedUrl,\n    });\n  }, []);\n\n  const disconnect = useCallback(async () => {\n    await whipClientRef.current?.disconnect();\n  }, []);\n\n  const flipCamera = useCallback(async () => {\n    await whipClientRef.current?.flipCamera();\n  }, []);\n\n  const switchCamera = useCallback(async (deviceId: string) => {\n    return await whipClientRef.current?.switchCamera(deviceId);\n  }, []);\n\n  const currentCameraDeviceId = useCallback(async () => {\n    return await whipClientRef.current?.currentCameraDeviceId();\n  }, []);\n\n  useEffect(() => {\n    try {\n      const initializeCamera = async () => {\n        await whipClientRef.current?.initializeCamera({\n          audioEnabled: audioEnabled ?? true,\n          videoEnabled: videoEnabled ?? true,\n          videoDeviceId: camera?.id ?? cameras[0].id,\n          videoParameters: videoParameters,\n          preferredVideoCodecs: preferredVideoCodecs,\n          preferredAudioCodecs: preferredAudioCodecs,\n        });\n      };\n      initializeCamera();\n    } catch {\n      console.error('Failed to initialize camera');\n    }\n    const ref = whipClientRef.current;\n    return () => {\n      ref?.disconnect();\n    };\n  }, [\n    camera,\n    videoParameters,\n    videoEnabled,\n    audioEnabled,\n    preferredVideoCodecs,\n    preferredAudioCodecs,\n    whipClientRef,\n  ]);\n\n  return {\n    connect,\n    disconnect,\n    flipCamera,\n    switchCamera,\n    currentCameraDeviceId,\n    isConnected,\n    whipClientRef,\n  };\n};\n"]}

package/build/livestream/hooks/useLivestreamViewer.d.ts

@@ -1,3 +1,4 @@
+import { WhepClientViewRef } from 'react-native-whip-whep';
 export type ConnectViewerConfig = {
     token: string;
     streamId?: never;
@@ -19,6 +20,12 @@ export interface useLivestreamViewerResult {
     disconnect: () => Promise<void>;
     /** Utility flag which indicates the current connection status */
     isConnected: boolean;
+    /** Utility flag which indicates if whep client is connecting */
+    isLoading: boolean;
+    /**
+     * Reference to the WhepClient instance. Needs to be passed to the {@link LivestreamViewer} component.
+     */
+    whepClientRef: React.RefObject<WhepClientViewRef | null>;
 }
 /**
  * Hook for receiving a published livestream.

package/build/livestream/hooks/useLivestreamViewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLivestreamViewer.d.ts","sourceRoot":"","sources":["../../../src/livestream/hooks/useLivestreamViewer.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,mBAAmB,GAC3B;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,GACnC;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAOxC;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC;;;;OAIG;IACH,OAAO,EAAE,CAAC,MAAM,EAAE,mBAAmB,EAAE,GAAG,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACtE,4EAA4E;IAC5E,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAChC,iEAAiE;IACjE,WAAW,EAAE,OAAO,CAAC;CACtB;AAED;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,QAAO,yBAuCtC,CAAC"}
+{"version":3,"file":"useLivestreamViewer.d.ts","sourceRoot":"","sources":["../../../src/livestream/hooks/useLivestreamViewer.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,iBAAiB,EAClB,MAAM,wBAAwB,CAAC;AAGhC,MAAM,MAAM,mBAAmB,GAC3B;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,GACnC;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAOxC;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC;;;;OAIG;IACH,OAAO,EAAE,CAAC,MAAM,EAAE,mBAAmB,EAAE,GAAG,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACtE,4EAA4E;IAC5E,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAChC,iEAAiE;IACjE,WAAW,EAAE,OAAO,CAAC;IACrB,gEAAgE;IAChE,SAAS,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CAC1D;AAED;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,QAAO,yBAqEtC,CAAC"}

package/build/livestream/hooks/useLivestreamViewer.js

@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useRef } from 'react';
-import { WhepClient, useWhepConnectionState } from 'react-native-whip-whep';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useWhepConnectionState, } from 'react-native-whip-whep';
 import { FISHJAM_WHEP_URL } from '../../consts';
 const urlFromConfig = (config) => {
     if (config.streamId)
@@ -12,34 +12,62 @@ const urlFromConfig = (config) => {
  * @group Hooks
  */
 export const useLivestreamViewer = () => {
+    const [isLoading, setIsLoading] = useState(false);
+    const [isInitialized, setIsInitialized] = useState(false);
     const state = useWhepConnectionState();
     const isConnected = state === 'connected';
-    const whepClient = useRef(null);
+    const whepClientRef = useRef(null);
+    const isConnectingRef = useRef(false);
     useEffect(() => {
         const createClient = () => {
-            whepClient.current = new WhepClient({
+            whepClientRef.current?.createWhepClient({
                 audioEnabled: true,
                 videoEnabled: true,
             });
         };
         createClient();
+        const ref = whepClientRef.current;
         return () => {
-            whepClient.current?.disconnect();
+            ref?.disconnect();
         };
     }, []);
     const connect = useCallback(async (config, url) => {
-        await whepClient.current?.connect({
-            serverUrl: url ?? urlFromConfig(config),
-            authToken: config.token,
-        });
-    }, []);
+        if (isConnectingRef.current) {
+            return;
+        }
+        isConnectingRef.current = true;
+        setIsLoading(true);
+        try {
+            if (!isInitialized) {
+                await whepClientRef.current?.createWhepClient({
+                    audioEnabled: true,
+                    videoEnabled: true,
+                });
+                setIsInitialized(true);
+            }
+            await whepClientRef.current?.connect({
+                serverUrl: url ?? urlFromConfig(config),
+                authToken: config.token,
+            });
+            setIsLoading(false);
+        }
+        catch (error) {
+            console.error('Failed to connect to WHEP Client', error);
+            setIsLoading(false);
+        }
+        finally {
+            isConnectingRef.current = false;
+        }
+    }, [isInitialized]);
     const disconnect = useCallback(async () => {
-        await whepClient.current?.disconnect();
+        await whepClientRef.current?.disconnect();
     }, []);
     return {
         connect,
         disconnect,
+        whepClientRef,
         isConnected,
+        isLoading,
     };
 };
 //# sourceMappingURL=useLivestreamViewer.js.map

package/build/livestream/hooks/useLivestreamViewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLivestreamViewer.js","sourceRoot":"","sources":["../../../src/livestream/hooks/useLivestreamViewer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAMhD,MAAM,aAAa,GAAG,CAAC,MAA2B,EAAE,EAAE;IACpD,IAAI,MAAM,CAAC,QAAQ;QAAE,OAAO,GAAG,gBAAgB,IAAI,MAAM,CAAC,QAAQ,EAAE,CAAC;IACrE,OAAO,gBAAgB,CAAC;AAC1B,CAAC,CAAC;AAkBF;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAA8B,EAAE;IACjE,MAAM,KAAK,GAAG,sBAAsB,EAAE,CAAC;IACvC,MAAM,WAAW,GAAG,KAAK,KAAK,WAAW,CAAC;IAE1C,MAAM,UAAU,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAEnD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,GAAG,EAAE;YACxB,UAAU,CAAC,OAAO,GAAG,IAAI,UAAU,CAAC;gBAClC,YAAY,EAAE,IAAI;gBAClB,YAAY,EAAE,IAAI;aACnB,CAAC,CAAC;QACL,CAAC,CAAC;QACF,YAAY,EAAE,CAAC;QAEf,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,OAAO,EAAE,UAAU,EAAE,CAAC;QACnC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,OAAO,GAAG,WAAW,CACzB,KAAK,EAAE,MAA2B,EAAE,GAAY,EAAE,EAAE;QAClD,MAAM,UAAU,CAAC,OAAO,EAAE,OAAO,CAAC;YAChC,SAAS,EAAE,GAAG,IAAI,aAAa,CAAC,MAAM,CAAC;YACvC,SAAS,EAAE,MAAM,CAAC,KAAK;SACxB,CAAC,CAAC;IACL,CAAC,EACD,EAAE,CACH,CAAC;IAEF,MAAM,UAAU,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACxC,MAAM,UAAU,CAAC,OAAO,EAAE,UAAU,EAAE,CAAC;IACzC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,OAAO;QACP,UAAU;QACV,WAAW;KACZ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { WhepClient, useWhepConnectionState } from 'react-native-whip-whep';\nimport { FISHJAM_WHEP_URL } from '../../consts';\n\nexport type ConnectViewerConfig =\n  | { token: string; streamId?: never }\n  | { streamId: string; token?: never };\n\nconst urlFromConfig = (config: ConnectViewerConfig) => {\n  if (config.streamId) return `${FISHJAM_WHEP_URL}/${config.streamId}`;\n  return FISHJAM_WHEP_URL;\n};\n\n/**\n * @category Livestream\n */\nexport interface useLivestreamViewerResult {\n  /**\n   * Callback to start receiving a livestream.\n   * If the livestream is private, provide `token`.\n   * If the livestream is public, provide `streamId`.\n   */\n  connect: (config: ConnectViewerConfig, url?: string) => Promise<void>;\n  /** Disconnect from a stream previously connected to with {@link connect} */\n  disconnect: () => Promise<void>;\n  /** Utility flag which indicates the current connection status */\n  isConnected: boolean;\n}\n\n/**\n * Hook for receiving a published livestream.\n * @category Livestream\n * @group Hooks\n */\nexport const useLivestreamViewer = (): useLivestreamViewerResult => {\n  const state = useWhepConnectionState();\n  const isConnected = state === 'connected';\n\n  const whepClient = useRef<WhepClient | null>(null);\n\n  useEffect(() => {\n    const createClient = () => {\n      whepClient.current = new WhepClient({\n        audioEnabled: true,\n        videoEnabled: true,\n      });\n    };\n    createClient();\n\n    return () => {\n      whepClient.current?.disconnect();\n    };\n  }, []);\n\n  const connect = useCallback(\n    async (config: ConnectViewerConfig, url?: string) => {\n      await whepClient.current?.connect({\n        serverUrl: url ?? urlFromConfig(config),\n        authToken: config.token,\n      });\n    },\n    [],\n  );\n\n  const disconnect = useCallback(async () => {\n    await whepClient.current?.disconnect();\n  }, []);\n\n  return {\n    connect,\n    disconnect,\n    isConnected,\n  };\n};\n"]}
+{"version":3,"file":"useLivestreamViewer.js","sourceRoot":"","sources":["../../../src/livestream/hooks/useLivestreamViewer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjE,OAAO,EACL,sBAAsB,GAEvB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAMhD,MAAM,aAAa,GAAG,CAAC,MAA2B,EAAE,EAAE;IACpD,IAAI,MAAM,CAAC,QAAQ;QAAE,OAAO,GAAG,gBAAgB,IAAI,MAAM,CAAC,QAAQ,EAAE,CAAC;IACrE,OAAO,gBAAgB,CAAC;AAC1B,CAAC,CAAC;AAwBF;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAA8B,EAAE;IACjE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,KAAK,GAAG,sBAAsB,EAAE,CAAC;IACvC,MAAM,WAAW,GAAG,KAAK,KAAK,WAAW,CAAC;IAE1C,MAAM,aAAa,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IAC7D,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAEtC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,GAAG,EAAE;YACxB,aAAa,CAAC,OAAO,EAAE,gBAAgB,CAAC;gBACtC,YAAY,EAAE,IAAI;gBAClB,YAAY,EAAE,IAAI;aACnB,CAAC,CAAC;QACL,CAAC,CAAC;QACF,YAAY,EAAE,CAAC;QAEf,MAAM,GAAG,GAAG,aAAa,CAAC,OAAO,CAAC;QAClC,OAAO,GAAG,EAAE;YACV,GAAG,EAAE,UAAU,EAAE,CAAC;QACpB,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,OAAO,GAAG,WAAW,CACzB,KAAK,EAAE,MAA2B,EAAE,GAAY,EAAE,EAAE;QAClD,IAAI,eAAe,CAAC,OAAO,EAAE,CAAC;YAC5B,OAAO;QACT,CAAC;QAED,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;QAC/B,YAAY,CAAC,IAAI,CAAC,CAAC;QAEnB,IAAI,CAAC;YACH,IAAI,CAAC,aAAa,EAAE,CAAC;gBACnB,MAAM,aAAa,CAAC,OAAO,EAAE,gBAAgB,CAAC;oBAC5C,YAAY,EAAE,IAAI;oBAClB,YAAY,EAAE,IAAI;iBACnB,CAAC,CAAC;gBACH,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACzB,CAAC;YAED,MAAM,aAAa,CAAC,OAAO,EAAE,OAAO,CAAC;gBACnC,SAAS,EAAE,GAAG,IAAI,aAAa,CAAC,MAAM,CAAC;gBACvC,SAAS,EAAE,MAAM,CAAC,KAAK;aACxB,CAAC,CAAC;YAEH,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,kCAAkC,EAAE,KAAK,CAAC,CAAC;YACzD,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC;gBAAS,CAAC;YACT,eAAe,CAAC,OAAO,GAAG,KAAK,CAAC;QAClC,CAAC;IACH,CAAC,EACD,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,MAAM,UAAU,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACxC,MAAM,aAAa,CAAC,OAAO,EAAE,UAAU,EAAE,CAAC;IAC5C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,OAAO;QACP,UAAU;QACV,aAAa;QACb,WAAW;QACX,SAAS;KACV,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n  useWhepConnectionState,\n  WhepClientViewRef,\n} from 'react-native-whip-whep';\nimport { FISHJAM_WHEP_URL } from '../../consts';\n\nexport type ConnectViewerConfig =\n  | { token: string; streamId?: never }\n  | { streamId: string; token?: never };\n\nconst urlFromConfig = (config: ConnectViewerConfig) => {\n  if (config.streamId) return `${FISHJAM_WHEP_URL}/${config.streamId}`;\n  return FISHJAM_WHEP_URL;\n};\n\n/**\n * @category Livestream\n */\nexport interface useLivestreamViewerResult {\n  /**\n   * Callback to start receiving a livestream.\n   * If the livestream is private, provide `token`.\n   * If the livestream is public, provide `streamId`.\n   */\n  connect: (config: ConnectViewerConfig, url?: string) => Promise<void>;\n  /** Disconnect from a stream previously connected to with {@link connect} */\n  disconnect: () => Promise<void>;\n  /** Utility flag which indicates the current connection status */\n  isConnected: boolean;\n  /** Utility flag which indicates if whep client is connecting */\n  isLoading: boolean;\n  /**\n   * Reference to the WhepClient instance. Needs to be passed to the {@link LivestreamViewer} component.\n   */\n  whepClientRef: React.RefObject<WhepClientViewRef | null>;\n}\n\n/**\n * Hook for receiving a published livestream.\n * @category Livestream\n * @group Hooks\n */\nexport const useLivestreamViewer = (): useLivestreamViewerResult => {\n  const [isLoading, setIsLoading] = useState(false);\n  const [isInitialized, setIsInitialized] = useState(false);\n  const state = useWhepConnectionState();\n  const isConnected = state === 'connected';\n\n  const whepClientRef = useRef<WhepClientViewRef | null>(null);\n  const isConnectingRef = useRef(false);\n\n  useEffect(() => {\n    const createClient = () => {\n      whepClientRef.current?.createWhepClient({\n        audioEnabled: true,\n        videoEnabled: true,\n      });\n    };\n    createClient();\n\n    const ref = whepClientRef.current;\n    return () => {\n      ref?.disconnect();\n    };\n  }, []);\n\n  const connect = useCallback(\n    async (config: ConnectViewerConfig, url?: string) => {\n      if (isConnectingRef.current) {\n        return;\n      }\n\n      isConnectingRef.current = true;\n      setIsLoading(true);\n\n      try {\n        if (!isInitialized) {\n          await whepClientRef.current?.createWhepClient({\n            audioEnabled: true,\n            videoEnabled: true,\n          });\n          setIsInitialized(true);\n        }\n\n        await whepClientRef.current?.connect({\n          serverUrl: url ?? urlFromConfig(config),\n          authToken: config.token,\n        });\n\n        setIsLoading(false);\n      } catch (error) {\n        console.error('Failed to connect to WHEP Client', error);\n        setIsLoading(false);\n      } finally {\n        isConnectingRef.current = false;\n      }\n    },\n    [isInitialized],\n  );\n\n  const disconnect = useCallback(async () => {\n    await whepClientRef.current?.disconnect();\n  }, []);\n\n  return {\n    connect,\n    disconnect,\n    whepClientRef,\n    isConnected,\n    isLoading,\n  };\n};\n"]}

package/build/livestream/index.d.ts

@@ -2,7 +2,7 @@ export { LivestreamStreamer } from './components/LivestreamStreamer';
 export { LivestreamViewer } from './components/LivestreamViewer';
 export { useLivestreamViewer } from './hooks/useLivestreamViewer';
 export { useLivestreamStreamer } from './hooks/useLivestreamStreamer';
-export { cameras, VideoParameters, WhipClient, WhepClient, } from 'react-native-whip-whep';
+export { cameras, VideoParameters } from 'react-native-whip-whep';
 export type { LivestreamStreamerProps } from './components/LivestreamStreamer';
 export type { ConnectViewerConfig } from './hooks/useLivestreamViewer';
 export type { useLivestreamViewerResult } from './hooks/useLivestreamViewer';

package/build/livestream/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/livestream/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EACL,OAAO,EACP,eAAe,EACf,UAAU,EACV,UAAU,GACX,MAAM,wBAAwB,CAAC;AAChC,YAAY,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAC/E,YAAY,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AACvE,YAAY,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAC7E,YAAY,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AACjF,YAAY,EACV,qBAAqB,EACrB,mBAAmB,GACpB,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/livestream/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAClE,YAAY,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAC/E,YAAY,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AACvE,YAAY,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAC7E,YAAY,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AACjF,YAAY,EACV,qBAAqB,EACrB,mBAAmB,GACpB,MAAM,+BAA+B,CAAC"}

package/build/livestream/index.js

@@ -2,5 +2,5 @@ export { LivestreamStreamer } from './components/LivestreamStreamer';
 export { LivestreamViewer } from './components/LivestreamViewer';
 export { useLivestreamViewer } from './hooks/useLivestreamViewer';
 export { useLivestreamStreamer } from './hooks/useLivestreamStreamer';
-export { cameras, VideoParameters, WhipClient, WhepClient, } from 'react-native-whip-whep';
+export { cameras, VideoParameters } from 'react-native-whip-whep';
 //# sourceMappingURL=index.js.map

package/build/livestream/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/livestream/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EACL,OAAO,EACP,eAAe,EACf,UAAU,EACV,UAAU,GACX,MAAM,wBAAwB,CAAC","sourcesContent":["export { LivestreamStreamer } from './components/LivestreamStreamer';\nexport { LivestreamViewer } from './components/LivestreamViewer';\nexport { useLivestreamViewer } from './hooks/useLivestreamViewer';\nexport { useLivestreamStreamer } from './hooks/useLivestreamStreamer';\nexport {\n  cameras,\n  VideoParameters,\n  WhipClient,\n  WhepClient,\n} from 'react-native-whip-whep';\nexport type { LivestreamStreamerProps } from './components/LivestreamStreamer';\nexport type { ConnectViewerConfig } from './hooks/useLivestreamViewer';\nexport type { useLivestreamViewerResult } from './hooks/useLivestreamViewer';\nexport type { useLivestreamStreamerResult } from './hooks/useLivestreamStreamer';\nexport type {\n  LivestreamViewerProps,\n  LivestreamViewerRef,\n} from './components/LivestreamViewer';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/livestream/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["export { LivestreamStreamer } from './components/LivestreamStreamer';\nexport { LivestreamViewer } from './components/LivestreamViewer';\nexport { useLivestreamViewer } from './hooks/useLivestreamViewer';\nexport { useLivestreamStreamer } from './hooks/useLivestreamStreamer';\nexport { cameras, VideoParameters } from 'react-native-whip-whep';\nexport type { LivestreamStreamerProps } from './components/LivestreamStreamer';\nexport type { ConnectViewerConfig } from './hooks/useLivestreamViewer';\nexport type { useLivestreamViewerResult } from './hooks/useLivestreamViewer';\nexport type { useLivestreamStreamerResult } from './hooks/useLivestreamStreamer';\nexport type {\n  LivestreamViewerProps,\n  LivestreamViewerRef,\n} from './components/LivestreamViewer';\n"]}

package/expo-module.config.json

@@ -4,14 +4,16 @@
     "modules": [
       "RNFishjamClientModule",
       "VideoPreviewViewModule",
-      "VideoRendererViewModule"
+      "VideoRendererViewModule",
+      "PipContainerViewModule"
     ]
   },
   "android": {
     "modules": [
       "io.fishjam.reactnative.RNFishjamClientModule",
       "io.fishjam.reactnative.VideoPreviewViewModule",
-      "io.fishjam.reactnative.VideoRendererViewModule"
+      "io.fishjam.reactnative.VideoRendererViewModule",
+      "io.fishjam.reactnative.PipContainerViewModule"
     ]
   }
 }

package/ios/PictureInPictureManager.swift

@@ -0,0 +1,215 @@
+import AVKit
+import FishjamCloudClient
+import WebRTC
+
+@MainActor
+class PictureInPictureManager {
+    private let sourceView: UIView
+    private let eventEmitter: (EmitableEvent) -> Void
+    private weak var fishjamClient: FishjamClient?
+    private var lastActiveVadInfo: RemoteTrackInfo? = nil
+    
+    private var controller: PictureInPictureController?
+    
+    private var startAutomatically: Bool {
+        didSet {
+            controller?.startAutomatically = startAutomatically
+        }
+    }
+    
+    private var stopAutomatically: Bool {
+        didSet {
+            controller?.stopAutomatically = stopAutomatically
+        }
+    }
+    
+    var primaryPlaceholderText: String = "No camera" {
+        didSet {
+            controller?.primaryPlaceholderText = primaryPlaceholderText
+        }
+    }
+    
+    var secondaryPlaceholderText: String = "No active speaker" {
+        didSet {
+            controller?.secondaryPlaceholderText = secondaryPlaceholderText
+        }
+    }
+
+    init(
+        sourceView: UIView,
+        eventEmitter: @escaping (EmitableEvent) -> Void,
+        fishjamClient: FishjamClient?
+    ) {
+        self.sourceView = sourceView
+        self.eventEmitter = eventEmitter
+        self.fishjamClient = fishjamClient
+        self.startAutomatically = true
+        self.stopAutomatically = true
+        
+        RNFishjamClient.tracksUpdateListenersManager.add(self)
+    }
+    
+    deinit {
+        RNFishjamClient.tracksUpdateListenersManager.remove(self)
+    }
+    
+    @discardableResult
+    private func ensureController() -> PictureInPictureController? {
+        if controller == nil {
+            let newController = PictureInPictureController(
+                sourceView: sourceView,
+                primaryPlaceholder: primaryPlaceholderText,
+                secondaryPlaceholder: secondaryPlaceholderText
+            )
+            newController.startAutomatically = startAutomatically
+            newController.stopAutomatically = stopAutomatically
+            controller = newController
+            
+            updateTracks()
+        }
+        return controller
+    }
+    
+    private func findLocalCameraTrack() -> RTCVideoTrack? {
+        guard let fishjamClient = fishjamClient else { return nil }
+        
+        let localEndpoint = fishjamClient.getLocalEndpoint()
+        
+        for (_, track) in localEndpoint.tracks {
+            if let videoTrack = track as? LocalVideoTrack,
+               track.metadata.toDict()["type"] as? String == "camera" {
+                return videoTrack.mediaTrack as? RTCVideoTrack
+            }
+        }
+        
+        return nil
+    }
+    
+    private func findRemoteVadActiveTrack() -> RemoteTrackInfo? {
+        guard let fishjamClient else { return nil }
+        
+        let remoteEndpoints = fishjamClient.getRemoteEndpoints()
+        
+        // First pass: look for active VAD
+        for endpoint in remoteEndpoints {
+            // Check if this endpoint has an active VAD audio track
+            let hasActiveVad = endpoint.tracks.values.contains { track in
+                if let audioTrack = track as? RemoteAudioTrack {
+                    return audioTrack.vadStatus == .speech
+                }
+                return false
+            }
+            
+            if hasActiveVad {
+                let videoTrack = endpoint.tracks.values.first { track in
+                    track is RemoteVideoTrack
+                } as? RemoteVideoTrack
+                lastActiveVadInfo = trackToTrackInfo(videoTrack: videoTrack, endpoint: endpoint)
+                return lastActiveVadInfo
+            }
+        }
+        if lastActiveVadInfo != nil {
+            return lastActiveVadInfo
+        }
+        
+        // Fallback: return first available remote peer with video track
+        for endpoint in remoteEndpoints {
+            if let videoTrack = endpoint.tracks.values.first(where: { $0 is RemoteVideoTrack }) as? RemoteVideoTrack {
+                return trackToTrackInfo(videoTrack: videoTrack, endpoint: endpoint)
+            }
+        }
+        
+        return nil
+    }
+    
+    private func trackToTrackInfo(videoTrack: RemoteVideoTrack?, endpoint: Endpoint) -> RemoteTrackInfo {
+        let metadataDict = endpoint.metadata.toDict()
+        let peerMetadata = metadataDict["peer"] as? [String: String]
+        let displayName = peerMetadata?["displayName"] ?? peerMetadata?["name"]
+        
+        var isVideoTrackActive: Bool? = nil
+        if videoTrack?.metadata["active"] as? Bool == false { isVideoTrackActive = false }
+        if videoTrack?.metadata["paused"] as? Bool == true { isVideoTrackActive = false }
+        
+        return RemoteTrackInfo(
+            videoTrack: videoTrack?.mediaTrack as? RTCVideoTrack,
+            displayName: displayName,
+            hasVideoTrack: videoTrack != nil,
+            isVideoActive: isVideoTrackActive ?? true
+        )
+    }
+    
+    private func updateTracks() {
+        guard let pipController = controller else { return }
+        
+        let localCameraTrack = findLocalCameraTrack()
+        let remoteTrackInfo = findRemoteVadActiveTrack()
+        
+        pipController.primaryVideoTrack = localCameraTrack
+        pipController.updateSecondaryTrack(trackInfo: remoteTrackInfo)
+    }
+    
+
+    
+    private func emitWarning(_ message: String) {
+        eventEmitter(.warning(message: message))
+    }
+    
+    
+    func start() {
+        _ = ensureController()
+        controller?.startPictureInPicture()
+    }
+    
+    func stop() {
+        controller?.stopPictureInPicture()
+        lastActiveVadInfo = nil
+    }
+    
+    func setAllowsCameraWhileInPictureInPicture(_ enabled: Bool) {
+        guard let fishjamClient = fishjamClient else {
+            emitWarning("PictureInPicture: Fishjam client not available")
+            return
+        }
+        
+        let localEndpoint = fishjamClient.getLocalEndpoint()
+        guard let cameraTrack = localEndpoint.tracks.compactMap({ $0.value as? LocalCameraTrack }).first else {
+            emitWarning("PictureInPicture: Unable to configure background camera - camera not initialized")
+            return
+        }
+        
+        guard cameraTrack.isMultitaskingCameraAccessSupported() else {
+            emitWarning("PictureInPicture: Background camera is not supported on this device.")
+            return
+        }
+
+        cameraTrack.setMultitaskingCameraAccessEnabled(enabled)
+    }
+    
+    func setStartAutomatically(_ enabled: Bool) {
+        if enabled {
+            ensureController()
+        }
+        startAutomatically = enabled
+        controller?.startAutomatically = enabled
+    }
+    
+    func setStopAutomatically(_ enabled: Bool) {
+        stopAutomatically = enabled
+        controller?.stopAutomatically = enabled
+    }
+    
+    func cleanup() {
+        controller?.stopPictureInPicture()
+        controller = nil
+        lastActiveVadInfo = nil
+    }
+}
+
+extension PictureInPictureManager: TrackUpdateListener {
+    nonisolated func onTracksUpdate() {
+        Task { @MainActor in
+            updateTracks()
+        }
+    }
+}

package/ios/PipContainerView.swift

@@ -0,0 +1,56 @@
+import ExpoModulesCore
+
+@MainActor
+class PipContainerView: ExpoView {
+    private var pipManager: PictureInPictureManager!
+    
+    required init(appContext: AppContext? = nil) {
+        super.init(appContext: appContext)
+        pipManager = PictureInPictureManager(
+            sourceView: self,
+            eventEmitter: { event in
+                RNFishjamClient.sendEvent?(event)
+            },
+            fishjamClient: RNFishjamClient.fishjamClient
+        )
+    }
+    
+    var startAutomatically: Bool = true {
+        didSet {
+            pipManager.setStartAutomatically(startAutomatically)
+        }
+    }
+    
+    var stopAutomatically: Bool = true {
+        didSet {
+            pipManager.setStopAutomatically(stopAutomatically)
+        }
+    }
+    
+    var allowsCameraInBackground: Bool = false {
+        didSet {
+            pipManager.setAllowsCameraWhileInPictureInPicture(allowsCameraInBackground)
+        }
+    }
+    
+    var primaryPlaceholderText: String = "No camera" {
+        didSet {
+            pipManager.primaryPlaceholderText = primaryPlaceholderText
+        }
+    }
+    
+    var secondaryPlaceholderText: String = "No active speaker" {
+        didSet {
+            pipManager.secondaryPlaceholderText = secondaryPlaceholderText
+        }
+    }
+    
+    func startPictureInPicture() {
+        pipManager.start()
+    }
+    
+    func stopPictureInPicture() {
+        pipManager.stop()
+    }
+}
+