@stream-io/video-react-native-sdk 1.13.3 → 1.14.0

package/src/components/Livestream/ViewerLivestream/ViewerLobby.tsx

@@ -0,0 +1,171 @@
+import {
+  useCall,
+  useCallStateHooks,
+  useI18n,
+} from '@stream-io/video-react-bindings';
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  ActivityIndicator,
+  Button,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { useTheme } from '../../../contexts';
+import { CallingState } from '@stream-io/video-client';
+import { getLogger } from '@stream-io/video-client';
+
+type LobbyProps = {
+  isLive: boolean;
+  handleJoinCall?: () => void;
+};
+
+export const ViewerLobby = ({ isLive }: LobbyProps) => {
+  const styles = useStyles();
+  const { theme } = useTheme();
+  const { t } = useI18n();
+  const { useCallStartsAt, useParticipants, useCallCallingState } =
+    useCallStateHooks();
+  const callingState = useCallCallingState();
+  const call = useCall();
+  const startsAt = useCallStartsAt();
+  const [error, setError] = useState<Error | undefined>(undefined);
+  const [countdown, setCountdown] = React.useState(getCountdown(startsAt));
+  const participants = useParticipants();
+
+  useEffect(() => {
+    if (!startsAt || isLive) return;
+
+    const updateCountdown = () => {
+      const timeRemaining = Math.max(0, startsAt.getTime() - Date.now());
+      if (timeRemaining <= 0) {
+        setCountdown('0:00');
+        clearInterval(intervalId);
+        return;
+      }
+
+      setCountdown(getCountdown(startsAt));
+    };
+
+    updateCountdown();
+
+    const intervalId = setInterval(updateCountdown, 1000);
+
+    return () => clearInterval(intervalId);
+  }, [startsAt, isLive]);
+
+  /**
+   * Getting the call details is done through `call.get()`.
+   * It is essential so that the call is watched and any changes in the call is intercepted.
+   */
+  useEffect(() => {
+    const getCall = async () => {
+      if (!call) {
+        return;
+      }
+
+      try {
+        await call.get();
+      } catch (err) {
+        if (err instanceof Error) {
+          const logger = getLogger(['ViewerLobby']);
+          logger('error', 'Error getting call:', err);
+          setError(err);
+        }
+      }
+    };
+    getCall();
+  }, [call]);
+
+  if (error) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.text}>
+          Error joining the livestream. Please try again later.
+        </Text>
+      </View>
+    );
+  }
+
+  const isJoiningLiveCall = callingState === CallingState.JOINING;
+  if (isJoiningLiveCall) {
+    return (
+      <View style={styles.container}>
+        <ActivityIndicator size="large" color={theme.colors.textPrimary} />
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>
+        {isLive
+          ? t('Livestream is still in progress')
+          : startsAt
+            ? t('Livestream will start in:')
+            : t('Livestream will start soon')}
+      </Text>
+      {startsAt && !isLive && (
+        <Text style={styles.countdownText}>{countdown}</Text>
+      )}
+      {!isLive && participants.length > 0 && (
+        <>
+          <Text style={styles.participantsText}>
+            {`${participants.length} ${t('participants have joined early')}`}
+          </Text>
+        </>
+      )}
+      {isLive && (
+        <Button title={t('Join Livestream')} onPress={() => call?.join()} />
+      )}
+    </View>
+  );
+};
+
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+          justifyContent: 'center',
+          alignItems: 'center',
+          backgroundColor: theme.colors.sheetPrimary,
+          padding: theme.variants.spacingSizes.lg,
+        },
+        text: {
+          color: theme.colors.textPrimary,
+          fontSize: theme.variants.fontSizes.lg,
+          margin: theme.variants.spacingSizes.md,
+          textAlign: 'center',
+        },
+        countdownText: {
+          color: theme.colors.textPrimary,
+          fontSize: theme.variants.fontSizes.xl,
+          fontWeight: 'bold',
+          marginBottom: theme.variants.spacingSizes.md,
+          textAlign: 'center',
+        },
+        participantsText: {
+          color: theme.colors.textSecondary,
+          fontSize: theme.variants.fontSizes.md,
+          marginBottom: theme.variants.spacingSizes.sm,
+        },
+      }),
+    [theme],
+  );
+};
+
+const getCountdown = (startsAt: Date | undefined) => {
+  if (!startsAt) {
+    return '';
+  }
+
+  const now = Date.now();
+  const timeRemaining = Math.max(0, startsAt.getTime() - now);
+
+  const minutes = Math.floor(timeRemaining / (1000 * 60));
+  const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
+  return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+};

package/src/icons/LivestreamControls.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Path, Svg } from 'react-native-svg';
+import { ColorValue } from 'react-native/types';
+
+type IconProps = {
+  color: ColorValue;
+  size: number;
+};
+
+export const VolumeOn = ({ color, size }: IconProps) => (
+  <Svg viewBox="0 0 24 24" width={size} height={size}>
+    <Path
+      d="M14 5.6v12.8c0 .88-1.04 1.32-1.66.8L7.5 15H5c-.6 0-1-.4-1-1v-4c0-.6.4-1 1-1h2.5l4.84-4.2c.62-.52 1.66-.08 1.66.8z"
+      fill={color}
+    />
+    <Path
+      d="M16.5 8.5c1 1 1.5 2.3 1.5 3.5s-.5 2.5-1.5 3.5"
+      stroke={color}
+      strokeWidth={1.5}
+      strokeLinecap="round"
+    />
+    <Path
+      d="M18 6c1.5 1.5 2.5 3.6 2.5 6s-1 4.5-2.5 6"
+      stroke={color}
+      strokeWidth={1.5}
+      strokeLinecap="round"
+    />
+  </Svg>
+);
+
+export const VolumeOff = ({ color, size }: IconProps) => (
+  <Svg viewBox="0 0 24 24" width={size} height={size}>
+    <Path
+      d="M14 5.6v12.8c0 .88-1.04 1.32-1.66.8L7.5 15H5c-.6 0-1-.4-1-1v-4c0-.6.4-1 1-1h2.5l4.84-4.2c.62-.52 1.66-.08 1.66.8z"
+      fill={color}
+    />
+    <Path d="M3 3L21 21" stroke={color} strokeWidth={2} strokeLinecap="round" />
+  </Svg>
+);
+
+export const PlayIcon = ({ color, size }: IconProps) => (
+  <Svg viewBox="0 0 24 24" width={size} height={size}>
+    <Path d="M8 5v14l11-7z" fill={color} />
+  </Svg>
+);
+
+export const PauseIcon = ({ color, size }: IconProps) => (
+  <Svg viewBox="0 0 24 24" width={size} height={size}>
+    <Path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" fill={color} />
+  </Svg>
+);

package/src/icons/Maximize.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { type ColorValue } from 'react-native/types';
+import Svg, { Path } from 'react-native-svg';
+
+type IconProps = {
+  color: ColorValue;
+  width: number;
+  height: number;
+};
+
+export const Maximize = ({ color, width, height }: IconProps) => {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 24 24" fill="none">
+      <Path
+        d="M8 3V5H4V9H2V3H8Z"
+        fill={color}
+        stroke={color}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Path
+        d="M16 3H22V9H20V5H16V3Z"
+        fill={color}
+        stroke={color}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Path
+        d="M4 15H2V21H8V19H4V15Z"
+        fill={color}
+        stroke={color}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Path
+        d="M20 15V19H16V21H22V15H20Z"
+        fill={color}
+        stroke={color}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};

package/src/icons/index.tsx

@@ -20,3 +20,4 @@ export * from './StopScreenShare';
 export * from './EndStreamIcon';
 export * from './LeaveStreamIcon';
 export * from './IconWrapper';
+export * from './Maximize';

package/src/index.ts

@@ -32,5 +32,6 @@ export * from './translations';
 // Explicitly re-exporting to resolve ambiguity.
 export { StreamVideo } from './providers/StreamVideo';
 export { StreamCall } from './providers/StreamCall';
+export * from './providers/NoiseCancellation';
 
 setClientDetails();

package/src/providers/NoiseCancellation/NoiseCancellationProvider.tsx

@@ -0,0 +1,147 @@
+import React, {
+  createContext,
+  PropsWithChildren,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+import {
+  getLogger,
+  NoiseCancellationSettingsModeEnum,
+  OwnCapability,
+} from '@stream-io/video-client';
+
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import {
+  getNoiseCancellationLibThrowIfNotInstalled,
+  NoiseCancellationWrapper,
+} from './lib';
+
+/**
+ * The Noise Cancellation API.
+ */
+export type NoiseCancellationAPI = {
+  /**
+   * A boolean providing information whether the device supports advanced audio processing recommended for noise cancellation.
+   * This boolean returns `true` if the iOS device supports Apple's Neural Engine or if an Android device has the FEATURE_AUDIO_PROCESSING feature enabled.
+   * Devices with this capability are better suited for handling noise cancellation efficiently.
+   */
+  deviceSupportsAdvancedAudioProcessing: boolean | undefined;
+  /**
+   * A boolean providing information whether Noise Cancelling functionalities
+   * are supported for the current user in call settings.
+   */
+  isSupported: boolean | undefined;
+  /**
+   * Provides information whether Noise Cancellation is active or not.
+   */
+  isEnabled: boolean;
+  /**
+   * Allows you to enable or disable the Noise Cancellation audio filter.
+   *
+   * @param enabled a boolean or a setter.
+   */
+  setEnabled: (enabled: boolean | ((value: boolean) => boolean)) => void;
+};
+
+const NoiseCancellationContext = createContext<NoiseCancellationAPI | null>(
+  null,
+);
+
+/**
+ * Exposes the NoiseCancellation API.
+ * Throws an error if used outside <NoiseCancellationProvider />.
+ */
+export const useNoiseCancellation = (): NoiseCancellationAPI => {
+  const context = useContext(NoiseCancellationContext);
+  if (!context) {
+    throw new Error(
+      'useNoiseCancellation must be used within a NoiseCancellationProvider',
+    );
+  }
+  return context;
+};
+
+export const NoiseCancellationProvider = (props: PropsWithChildren<{}>) => {
+  const call = useCall();
+  const [
+    deviceSupportsAdvancedAudioProcessing,
+    setDeviceSupportsAdvancedAudioProcessing,
+  ] = useState<boolean>();
+  const { useCallSettings, useHasPermissions } = useCallStateHooks();
+  const settings = useCallSettings();
+  const noiseCancellationAllowed = !!(
+    settings &&
+    settings.audio.noise_cancellation &&
+    settings.audio.noise_cancellation.mode !==
+      NoiseCancellationSettingsModeEnum.DISABLED
+  );
+
+  const hasCapability = useHasPermissions(
+    OwnCapability.ENABLE_NOISE_CANCELLATION,
+  );
+  const [isEnabled, setIsEnabled] = useState(false);
+
+  useEffect(() => {
+    const noiseCancellationNativeLib =
+      getNoiseCancellationLibThrowIfNotInstalled();
+    noiseCancellationNativeLib
+      .deviceSupportsAdvancedAudioProcessing()
+      .then((result) => setDeviceSupportsAdvancedAudioProcessing(result));
+    noiseCancellationNativeLib.isEnabled().then((e) => setIsEnabled(e));
+  }, []);
+
+  const isSupported = hasCapability && noiseCancellationAllowed;
+
+  useEffect(() => {
+    if (!call || !isSupported) return;
+    const ncInstance = NoiseCancellationWrapper.getInstance();
+    const unsubscribe = ncInstance.on('change', (v) => setIsEnabled(v));
+    call.microphone
+      .enableNoiseCancellation(ncInstance)
+      .catch((err) =>
+        getLogger(['NoiseCancellationProvider'])(
+          'error',
+          `Can't initialize noise suppression`,
+          err,
+        ),
+      );
+
+    return () => {
+      call.microphone
+        .disableNoiseCancellation()
+        .catch((err) =>
+          getLogger(['NoiseCancellationProvider'])(
+            'error',
+            `Can't disable noise suppression`,
+            err,
+          ),
+        );
+      unsubscribe();
+    };
+  }, [call, isSupported]);
+
+  return (
+    <NoiseCancellationContext.Provider
+      value={{
+        deviceSupportsAdvancedAudioProcessing,
+        isSupported,
+        isEnabled,
+        setEnabled: (enabledOrSetter) => {
+          const ncInstance = NoiseCancellationWrapper.getInstance();
+          const enable =
+            typeof enabledOrSetter === 'function'
+              ? enabledOrSetter(isEnabled)
+              : enabledOrSetter;
+          if (enable) {
+            ncInstance.enable();
+          } else {
+            ncInstance.disable();
+          }
+        },
+      }}
+    >
+      {props.children}
+    </NoiseCancellationContext.Provider>
+  );
+};

package/src/providers/NoiseCancellation/index.ts

@@ -0,0 +1 @@
+export * from './NoiseCancellationProvider';

package/src/providers/NoiseCancellation/lib.ts

@@ -0,0 +1,37 @@
+export type Type = typeof import('@stream-io/noise-cancellation-react-native');
+
+let noiseCancellationLib: Type | undefined;
+
+try {
+  noiseCancellationLib = require('@stream-io/noise-cancellation-react-native');
+} catch {}
+
+export function getNoiseCancellationLibThrowIfNotInstalled() {
+  if (!noiseCancellationLib) {
+    throw Error(
+      '@stream-io/noise-cancellation-react-native is not installed. It is required for implementing noise cancellation. ',
+    );
+  }
+  return noiseCancellationLib;
+}
+
+export class NoiseCancellationWrapper {
+  private static noiseCancellationInstance:
+    | InstanceType<Type['NoiseCancellation']>
+    | undefined;
+
+  private constructor() {}
+
+  static getInstance(): InstanceType<Type['NoiseCancellation']> {
+    if (!this.noiseCancellationInstance) {
+      const ncLib = getNoiseCancellationLibThrowIfNotInstalled();
+      this.noiseCancellationInstance = new ncLib.NoiseCancellation();
+    }
+    return this.noiseCancellationInstance;
+  }
+}
+
+/*
+    IMPORTANT: must keep a failing import in a different file
+    Else on commonjs, metro doesnt resolve any other modules properly in a file, if one of the module is not installed
+*/

package/src/version.ts

@@ -1 +1 @@
-export const version = '1.13.3';
+export const version = '1.14.0';