@fishjam-cloud/react-native-client 0.1.1 → 0.2.0

package/src/common/client.ts

@@ -1,33 +0,0 @@
-import { GenericMetadata } from '../types';
-import RNFishjamClientModule from '../RNFishjamClientModule';
-
-export type ConnectionConfig = {
-  /**
-   * Configuration for automatic reconnection
-   * sdk uses a linear backoff algorithm, that is the formula
-   * for the delay of the nth attempt is
-   * n * delayMs + initialDelayMs
-   *
-   * Pass 0 for maxAttempts to disable automatic reconnection
-   */
-  reconnectConfig?: {
-    maxAttempts?: number;
-    initialDelayMs?: number;
-    delayMs?: number;
-  };
-};
-
-export async function connect<
-  ParticipantMetadata extends GenericMetadata = GenericMetadata,
->(
-  url: string,
-  peerToken: string,
-  peerMetadata: ParticipantMetadata,
-  config: ConnectionConfig = {},
-) {
-  await RNFishjamClientModule.connect(url, peerToken, peerMetadata, config);
-}
-
-export async function leaveRoom() {
-  await RNFishjamClientModule.leaveRoom();
-}

package/src/common/eventEmitter.ts

@@ -1,21 +0,0 @@
-import { NativeModulesProxy, EventEmitter } from 'expo-modules-core';
-
-import RNFishjamClientModule from '../RNFishjamClientModule';
-
-export const ReceivableEvents = {
-  IsCameraOn: 'IsCameraOn',
-  IsMicrophoneOn: 'IsMicrophoneOn',
-  IsScreencastOn: 'IsScreencastOn',
-  SimulcastConfigUpdate: 'SimulcastConfigUpdate',
-  PeersUpdate: 'PeersUpdate',
-  AudioDeviceUpdate: 'AudioDeviceUpdate',
-  SendMediaEvent: 'SendMediaEvent',
-  BandwidthEstimation: 'BandwidthEstimation',
-  ReconnectionRetriesLimitReached: 'ReconnectionRetriesLimitReached',
-  ReconnectionStarted: 'ReconnectionStarted',
-  Reconnected: 'Reconnected',
-} as const;
-
-export const eventEmitter = new EventEmitter(
-  RNFishjamClientModule ?? NativeModulesProxy.RNFishjamClient,
-);

package/src/common/metadata.ts

@@ -1,12 +0,0 @@
-import { GenericMetadata } from '../types';
-import RNFishjamClientModule from '../RNFishjamClientModule';
-
-/**
- * a function that updates endpoints's metadata on the server
- * @param metadata a map indexed by strings, containing participants metadata to be sent to the server
- */
-export async function updatePeerMetadata<
-  ParticipantMetadata extends GenericMetadata = GenericMetadata,
->(metadata: ParticipantMetadata) {
-  await RNFishjamClientModule.updatePeerMetadata(metadata);
-}

package/src/common/webRTC.ts

@@ -1,31 +0,0 @@
-import { TrackEncoding } from '../types';
-import RNFishjamClientModule from '../RNFishjamClientModule';
-
-export type LoggingSeverity = 'verbose' | 'info' | 'warning' | 'error' | 'none';
-
-/**
- * sets track encoding that server should send to the client library.
- * The encoding will be sent whenever it is available. If chooses encoding is
- * temporarily unavailable, some other encoding will be sent until choose encoding
- *  becomes active again.
- *
- * @param trackId id of a track which encoding you want to select
- * @param encoding encoding to select
- */
-export async function setTargetTrackEncoding(
-  trackId: string,
-  encoding: TrackEncoding,
-) {
-  await RNFishjamClientModule.setTargetTrackEncoding(trackId, encoding);
-}
-
-/**
- * Function that changes level of debugging logs in WebRTC.
- * @param severity to use when displaying logs
- * @returns a promise that is resolved when debug severity is changed
- */
-export function changeWebRTCLoggingSeverity(
-  severity: LoggingSeverity,
-): Promise<void> {
-  return RNFishjamClientModule.changeWebRTCLoggingSeverity(severity);
-}

package/src/components/VideoPreviewView.tsx

@@ -1,33 +0,0 @@
-import { requireNativeViewManager } from 'expo-modules-core';
-import * as React from 'react';
-import { ViewStyle } from 'react-native';
-
-import { VideoLayout } from '../types';
-import { CaptureDeviceId } from '../hooks/useCamera';
-
-export type VideoPreviewViewProps = {
-  /**
-   * `FILL` or `FIT` - it works just like RN Image component. `FILL` fills the whole view
-   * with video and it may cut some parts of the video. `FIT` scales the video so the whole
-   * video is visible, but it may leave some empty space in the view.
-   * @default `FILL`
-   */
-  videoLayout?: VideoLayout;
-  style?: ViewStyle;
-  /**
-   * Id of the camera used for preview. Get available cameras with `getCaptureDevices()` function.
-   * @default the first front camera
-   */
-  captureDeviceId?: CaptureDeviceId;
-};
-
-const NativeView: React.ComponentType<VideoPreviewViewProps> =
-  requireNativeViewManager('VideoPreviewViewModule');
-
-export const VideoPreviewView = React.forwardRef<
-  React.ComponentType<VideoPreviewViewProps>,
-  VideoPreviewViewProps
->((props, ref) => (
-  // @ts-expect-error ref prop needs to be updated
-  <NativeView {...props} ref={ref} />
-));

package/src/components/VideoRendererView.tsx

@@ -1,31 +0,0 @@
-import { requireNativeViewManager } from 'expo-modules-core';
-import * as React from 'react';
-import { ViewStyle } from 'react-native';
-
-import { VideoLayout } from '../types';
-
-export type VideoRendererProps = {
-  /**
-   * id of the video track which you want to render.
-   */
-  trackId: string;
-  /**
-   * `FILL` or `FIT` - it works just like RN Image component. `FILL` fills the whole view
-   * with video and it may cut some parts of the video. `FIT` scales the video so the whole
-   * video is visible, but it may leave some empty space in the view.
-   * @default `FILL`
-   */
-  videoLayout?: VideoLayout;
-  style?: ViewStyle;
-};
-
-const NativeView: React.ComponentType<VideoRendererProps> =
-  requireNativeViewManager('VideoRendererViewModule');
-
-export const VideoRendererView = React.forwardRef<
-  React.ComponentType<VideoRendererProps>,
-  VideoRendererProps
->((props, ref) => (
-  // @ts-expect-error ref prop needs to be updated
-  <NativeView {...props} ref={ref} />
-));

package/src/hooks/useAudioSettings.ts

@@ -1,115 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { Platform } from 'react-native';
-
-import RNFishjamClientModule from '../RNFishjamClientModule';
-import { ReceivableEvents, eventEmitter } from '../common/eventEmitter';
-
-export type AudioOutputDeviceType =
-  | 'bluetooth'
-  | 'headset'
-  | 'speaker'
-  | 'earpiece';
-
-export type AudioSessionMode = 'voiceChat' | 'videoChat';
-
-export type AudioOutputDevice = {
-  type: AudioOutputDeviceType;
-  name: string;
-};
-
-type OnAudioDeviceEvent = {
-  AudioDeviceUpdate: {
-    selectedDevice: AudioOutputDevice;
-    availableDevices: AudioOutputDevice[];
-  };
-};
-
-/**
- * This hook manages audio settings.
- */
-export function useAudioSettings() {
-  const [selectedAudioOutputDevice, setSelectedAudioOutputDevice] =
-    useState<AudioOutputDevice | null>(null);
-  const [availableDevices, setAvailableDevices] = useState<AudioOutputDevice[]>(
-    [],
-  );
-
-  const onAudioDevice = useCallback((event: OnAudioDeviceEvent) => {
-    setSelectedAudioOutputDevice(event.AudioDeviceUpdate.selectedDevice);
-    setAvailableDevices(event.AudioDeviceUpdate.availableDevices);
-  }, []);
-
-  useEffect(() => {
-    const eventListener = eventEmitter.addListener(
-      ReceivableEvents.AudioDeviceUpdate,
-      onAudioDevice,
-    );
-    RNFishjamClientModule.startAudioSwitcher();
-    return () => {
-      eventListener.remove();
-      if (Platform.OS === 'android') {
-        RNFishjamClientModule.stopAudioSwitcher();
-      }
-    };
-  }, [onAudioDevice]);
-
-  /**
-   * [Android only] selects output audio device.
-   * For detecting and selecting bluettoth devices make sure you have the BLUETOOTH_CONNECT permission.
-   */
-  const selectOutputAudioDevice = useCallback(
-    async (device: AudioOutputDeviceType) => {
-      if (Platform.OS === 'ios') {
-        throw Error(
-          'selectOutputAudioDevice function is supported only on Android. ' +
-            'To select an output audio device on iOS use selectAudioSessionMode or showAudioRoutePicker functions',
-        );
-      }
-      await RNFishjamClientModule.setOutputAudioDevice(device);
-    },
-    [],
-  );
-
-  /**
-   * [iOS only] selects audio session mode. For more information refer to Apple's documentation:
-   *  https://developer.apple.com/documentation/avfaudio/avaudiosession/mode/
-   *
-   */
-  const selectAudioSessionMode = useCallback(
-    async (audioSessionMode: AudioSessionMode) => {
-      if (Platform.OS === 'android') {
-        throw Error('selectAudioSessionMode function is supported only on iOS');
-      }
-      await RNFishjamClientModule.selectAudioSessionMode(audioSessionMode);
-    },
-    [],
-  );
-
-  /**
-   * [iOS only] Shows a picker modal that allows user to select output audio device. For more
-   * information refer to Apple's documentation: https://developer.apple.com/documentation/avkit/avroutepickerview
-   */
-  const showAudioRoutePicker = useCallback(async () => {
-    if (Platform.OS === 'android') {
-      throw Error(
-        'showAudioRoutePicker function is supported only on iOS. ' +
-          'To select an output audio device on Android use selectOutputAudioDevice function',
-      );
-    }
-    await RNFishjamClientModule.showAudioRoutePicker();
-  }, []);
-
-  return {
-    /**
-     * currently selected output audio device
-     */
-    selectedAudioOutputDevice,
-    /**
-     * [Android only] available audio output devices to be set
-     */
-    availableDevices,
-    selectOutputAudioDevice,
-    selectAudioSessionMode,
-    showAudioRoutePicker,
-  };
-}

package/src/hooks/useBandwidthEstimation.ts

@@ -1,24 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { ReceivableEvents, eventEmitter } from '../common/eventEmitter';
-
-export type BandwidthEstimationEvent = { BandwidthEstimation: number };
-
-/**
- * This hook provides current bandwidth estimation
- * estimation - client's available incoming bitrate estimated
- * by the server. It's measured in bits per second.
- */
-export function useBandwidthEstimation() {
-  const [estimation, setEstimation] = useState<number | null>(null);
-
-  useEffect(() => {
-    const eventListener = eventEmitter.addListener<BandwidthEstimationEvent>(
-      ReceivableEvents.BandwidthEstimation,
-      (event) => setEstimation(event.BandwidthEstimation),
-    );
-    return () => eventListener.remove();
-  }, []);
-
-  return { estimation };
-}

package/src/hooks/useCamera.ts

@@ -1,270 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { Platform } from 'react-native';
-
-import {
-  BandwidthLimit,
-  Brand,
-  SimulcastBandwidthLimit,
-  SimulcastConfig,
-  TrackBandwidthLimit,
-  TrackEncoding,
-} from '../types';
-import RNFishjamClientModule from '../RNFishjamClientModule';
-import { ReceivableEvents, eventEmitter } from '../common/eventEmitter';
-
-type IsCameraOnEvent = { IsCameraOn: boolean };
-type SimulcastConfigUpdateEvent = SimulcastConfig;
-export type CaptureDeviceId = Brand<string, 'CaptureDeviceId'>;
-
-export type CaptureDevice = {
-  id: CaptureDeviceId;
-  name: string;
-  isFrontFacing: boolean;
-  isBackFacing: boolean;
-};
-
-export type VideoQuality =
-  | 'QVGA169'
-  | 'VGA169'
-  | 'QHD169'
-  | 'HD169'
-  | 'FHD169'
-  | 'QVGA43'
-  | 'VGA43'
-  | 'QHD43'
-  | 'HD43'
-  | 'FHD43';
-
-type CameraConfigBase = {
-  /**
-   * resolution + aspect ratio of local video track, one of: `QVGA_169`, `VGA_169`, `QHD_169`, `HD_169`,
-   * `FHD_169`, `QVGA_43`, `VGA_43`, `QHD_43`, `HD_43`, `FHD_43`. Note that quality might be worse than
-   * specified due to device capabilities, internet connection etc.
-   * @default `VGA_169`
-   */
-  quality?: VideoQuality;
-  /**
-   * whether to flip the dimensions of the video, that is whether to film in vertical orientation.
-   * @default `true`
-   */
-  flipVideo?: boolean;
-  /**
-   * whether the camera track is initially enabled, you can toggle it on/off later with toggleCamera method
-   * @default `true`
-   */
-  cameraEnabled?: boolean;
-  /**
-   * id of the camera to start capture with. Get available cameras with `getCaptureDevices()`.
-   * You can switch the cameras later with `flipCamera`/`switchCamera` functions.
-   * @default the first front camera
-   */
-  captureDeviceId?: CaptureDeviceId;
-};
-
-export type CameraConfig = CameraConfigBase & {
-  /**
-   *  whether video track uses simulcast. By default simulcast is disabled.
-   */
-  simulcastEnabled?: boolean;
-  /**
-   *  bandwidth limit of a video track. By default there is no bandwidth limit.
-   */
-  maxBandwidth?: TrackBandwidthLimit;
-};
-
-export type CameraConfigInternal = CameraConfigBase & {
-  videoTrackMetadata?: { active: boolean; type: 'camera' };
-  /**
-   *  SimulcastConfig of a video track. By default simulcast is disabled.
-   */
-  simulcastConfig?: SimulcastConfig;
-  /**
-   *  bandwidth limit of a video track. By default there is no bandwidth limit.
-   */
-  maxBandwidth?: TrackBandwidthLimit;
-} & (
-    | { maxBandwidthInt?: BandwidthLimit }
-    | { maxBandwidthMap?: SimulcastBandwidthLimit }
-  );
-
-const defaultSimulcastConfig = () => ({
-  enabled: false,
-  activeEncodings: [],
-});
-
-function maxBandwidthConfig(maxBandwidth: TrackBandwidthLimit | undefined) {
-  if (Platform.OS === 'android') {
-    if (typeof maxBandwidth === 'object') {
-      return {
-        maxBandwidth: undefined,
-        maxBandwidthMap: maxBandwidth,
-      };
-    } else {
-      return {
-        maxBandwidth: undefined,
-        maxBandwidthInt: maxBandwidth,
-      };
-    }
-  }
-  return { maxBandwidth };
-}
-
-function simulcastConfig(
-  simulcastEnabled: boolean | undefined,
-): SimulcastConfig | undefined {
-  // iOS has a limit of 3 hardware encoders
-  // 3 simulcast layers + 1 screencast layer = 4, which is too much
-  // so we limit simulcast layers to 2
-  if (simulcastEnabled) {
-    return Platform.select<SimulcastConfig>({
-      ios: { enabled: true, activeEncodings: ['l', 'h'] },
-      android: { enabled: true, activeEncodings: ['l', 'm', 'h'] },
-    });
-  }
-  return undefined;
-}
-
-export function updateCameraConfig(
-  config: Readonly<CameraConfig>,
-): CameraConfigInternal {
-  return {
-    ...config,
-    ...maxBandwidthConfig(config.maxBandwidth),
-    videoTrackMetadata: { active: true, type: 'camera' },
-    simulcastConfig: simulcastConfig(config.simulcastEnabled),
-  };
-}
-
-/**
- * This hook can toggle camera on/off and provides current camera state.
- */
-export function useCamera() {
-  const [isCameraOn, setIsCameraOn] = useState<boolean>(
-    RNFishjamClientModule.isCameraOn,
-  );
-
-  const [simulcastConfig, setSimulcastConfig] = useState<SimulcastConfig>(
-    defaultSimulcastConfig(),
-  );
-
-  useEffect(() => {
-    const eventListener = eventEmitter.addListener<SimulcastConfigUpdateEvent>(
-      ReceivableEvents.SimulcastConfigUpdate,
-      (event) => setSimulcastConfig(event),
-    );
-    return () => eventListener.remove();
-  }, []);
-
-  useEffect(() => {
-    const eventListener = eventEmitter.addListener<IsCameraOnEvent>(
-      ReceivableEvents.IsCameraOn,
-      (event) => setIsCameraOn(event.IsCameraOn),
-    );
-    setIsCameraOn(RNFishjamClientModule.isCameraOn);
-    return () => eventListener.remove();
-  }, []);
-
-  /**
-   * toggles encoding of a video track on/off
-   * @param encoding encoding to toggle
-   */
-  const toggleVideoTrackEncoding = useCallback(
-    async (encoding: TrackEncoding) => {
-      const videoSimulcastConfig =
-        await RNFishjamClientModule.toggleVideoTrackEncoding(encoding);
-      setSimulcastConfig(videoSimulcastConfig);
-    },
-    [],
-  );
-
-  /**
-   * updates maximum bandwidth for the given simulcast encoding of the video track
-   * @param encoding  encoding to update
-   * @param bandwidth BandwidthLimit to set
-   */
-  const setVideoTrackEncodingBandwidth = useCallback(
-    async (encoding: TrackEncoding, bandwidth: BandwidthLimit) => {
-      await RNFishjamClientModule.setVideoTrackEncodingBandwidth(
-        encoding,
-        bandwidth,
-      );
-    },
-    [],
-  );
-
-  /**
-   * Function to toggle camera on/off
-   */
-  const toggleCamera = useCallback(async () => {
-    const state = await RNFishjamClientModule.toggleCamera();
-    await RNFishjamClientModule.updateVideoTrackMetadata({
-      active: state,
-      type: 'camera',
-    });
-    setIsCameraOn(state);
-  }, []);
-
-  /**
-   * Starts local camera capture.
-   * @param config configuration of the camera capture
-   * @returns A promise that resolves when camera is started.
-   */
-
-  const startCamera = useCallback(
-    async (config: Readonly<CameraConfig> = {}) => {
-      const updatedConfig = updateCameraConfig(config);
-      await RNFishjamClientModule.startCamera(updatedConfig);
-    },
-    [],
-  );
-
-  /**
-   * Function that toggles between front and back camera. By default the front camera is used.
-   * @returns A promise that resolves when camera is toggled.
-   */
-  const flipCamera = useCallback(async () => {
-    await RNFishjamClientModule.flipCamera();
-  }, []);
-
-  /**
-   * Function that switches to the specified camera. By default the front camera is used.
-   * @returns A promise that resolves when camera is switched.
-   */
-  const switchCamera = useCallback(async (captureDeviceId: CaptureDeviceId) => {
-    await RNFishjamClientModule.switchCamera(captureDeviceId);
-  }, []);
-
-  /** Function that queries available cameras.
-   * @returns A promise that resolves to the list of available cameras.
-   */
-  const getCaptureDevices = useCallback(async () => {
-    return RNFishjamClientModule.getCaptureDevices();
-  }, []);
-
-  /**
-   * updates maximum bandwidth for the video track. This value directly translates
-   * to quality of the stream and the amount of RTP packets being sent. In case simulcast
-   * is enabled bandwidth is split between all of the variant streams proportionally to
-   * their resolution.
-   * @param BandwidthLimit to set
-   */
-  const setVideoTrackBandwidth = useCallback(
-    async (bandwidth: BandwidthLimit) => {
-      await RNFishjamClientModule.setVideoTrackBandwidth(bandwidth);
-    },
-    [],
-  );
-
-  return {
-    isCameraOn,
-    simulcastConfig,
-    toggleCamera,
-    startCamera,
-    flipCamera,
-    switchCamera,
-    getCaptureDevices,
-    toggleVideoTrackEncoding,
-    setVideoTrackEncodingBandwidth,
-    setVideoTrackBandwidth,
-  };
-}

package/src/hooks/useMicrophone.ts

@@ -1,38 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-
-import RNFishjamClientModule from '../RNFishjamClientModule';
-import { ReceivableEvents, eventEmitter } from '../common/eventEmitter';
-
-type IsMicrophoneOnEvent = { IsMicrophoneOn: boolean };
-
-/**
- * This hook can toggle microphone on/off and provides current microphone state.
- */
-export function useMicrophone() {
-  const [isMicrophoneOn, setIsMicrophoneOn] = useState<boolean>(
-    RNFishjamClientModule.isMicrophoneOn,
-  );
-
-  useEffect(() => {
-    const eventListener = eventEmitter.addListener<IsMicrophoneOnEvent>(
-      ReceivableEvents.IsMicrophoneOn,
-      (event) => setIsMicrophoneOn(event.IsMicrophoneOn),
-    );
-    setIsMicrophoneOn(RNFishjamClientModule.isMicrophoneOn);
-    return () => eventListener.remove();
-  }, []);
-
-  /**
-   * Function to toggle microphone on/off
-   */
-  const toggleMicrophone = useCallback(async () => {
-    const status = await RNFishjamClientModule.toggleMicrophone();
-    await RNFishjamClientModule.updateAudioTrackMetadata({
-      active: status,
-      type: 'audio',
-    });
-    setIsMicrophoneOn(status);
-  }, []);
-
-  return { isMicrophoneOn, toggleMicrophone };
-}