@100mslive/react-native-room-kit 1.1.8 → 1.1.9-beta.1

package/src/components/VirtualBackgroundModalContent.tsx

@@ -0,0 +1,500 @@
+import * as React from 'react';
+import {
+  Image,
+  Text,
+  View,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+  ActivityIndicator,
+} from 'react-native';
+import type { ImageRequireSource } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+import { HMSTrackType, HMSVideoViewMode } from '@100mslive/react-native-hms';
+import type { HMSVirtualBackgroundPlugin } from '../modules/videoPluginWrapper';
+import { ImagePicker } from '../modules/imagePickerWrapper';
+
+import { BottomSheet } from './BottomSheet';
+import {
+  AddImageIcon,
+  BlurPeopleIcon,
+  CloseIcon,
+  CrossCircleIcon,
+} from '../Icons';
+import {
+  useDisableAutoPip,
+  useHMSRoomColorPalette,
+  useHMSRoomStyleSheet,
+} from '../hooks-util';
+import { VideoView } from './PeerVideoTile/VideoView';
+import type { RootState } from '../redux';
+import {
+  setAutoEnterPipMode,
+  setSelectedVirtualBackground,
+} from '../redux/actions';
+import { useState } from 'react';
+import { hexToRgbA } from '../utils/theme';
+
+export interface VirtualBackgroundModalContentProps {
+  dismissModal(): void;
+}
+
+export const VirtualBackgroundModalContent: React.FC<
+  VirtualBackgroundModalContentProps
+> = ({ dismissModal }) => {
+  const dispatch = useDispatch();
+  const localPeer = useSelector(
+    (state: RootState) => state.hmsStates.localPeer
+  );
+  const isLocalVideoMuted = useSelector(
+    (state: RootState) => state.hmsStates.isLocalVideoMuted
+  );
+  const autoEnterPipMode = useSelector(
+    (state: RootState) => state.app.autoEnterPipMode
+  );
+  const disableAutoPip = useDisableAutoPip();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    semiBoldSurfaceHigh: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    regularSurfaceMedium: {
+      color: theme.palette.on_surface_medium,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+    effectButton: {
+      backgroundColor: theme.palette.surface_bright,
+    },
+    active: {
+      borderColor: theme.palette.primary_default,
+    },
+    inactive: {
+      borderColor: theme.palette.surface_bright,
+    },
+    loadingContainer: {
+      backgroundColor:
+        theme.palette.background_default &&
+        hexToRgbA(theme.palette.background_default, 0.5),
+    },
+  }));
+
+  const { primary_bright: primaryBrightColor } = useHMSRoomColorPalette();
+
+  const videoPlugin = useSelector(
+    (state: RootState) => state.hmsStates.videoPlugin
+  );
+  const selectedVirtualBG = useSelector(
+    (state: RootState) => state.app.selectedVirtualBackground
+  );
+
+  const handleClosePress = () => dismissModal();
+
+  const handleNoEffectPress = async () => {
+    if (videoPlugin) {
+      await videoPlugin.disable();
+      dispatch(setSelectedVirtualBackground(null));
+    }
+  };
+
+  const [showLoading, setShowLoading] = useState(false);
+
+  const handlePhotoLibraryPress = async () => {
+    if (!ImagePicker) {
+      return;
+    }
+    // Current value of `autoEnterPipMode` state
+    let pipModeEnabled = autoEnterPipMode;
+    try {
+      // If PIP is enabled, disable it
+      if (pipModeEnabled) {
+        dispatch(setAutoEnterPipMode(false));
+        disableAutoPip();
+      }
+
+      const imageLibraryResponse = await ImagePicker.launchImageLibrary({
+        mediaType: 'photo',
+        selectionLimit: 1,
+      });
+
+      // If PIP was enabled earlier, enable it again
+      if (pipModeEnabled) {
+        dispatch(setAutoEnterPipMode(true));
+      }
+      handleImagePickerResponse(imageLibraryResponse);
+    } catch (error) {
+      console.warn(error);
+    }
+  };
+
+  // const handleCameraPress = async () => {
+  //   if (!ImagePicker) {
+  //     return;
+  //   }
+  //   try {
+  //     const cameraResponse = await ImagePicker.launchCamera({
+  //       mediaType: 'photo',
+  //       cameraType: 'back',
+  //     });
+  //     handleImagePickerResponse(cameraResponse);
+  //   } catch (error) {
+  //     console.warn(error);
+  //   }
+  // };
+
+  const handleImagePickerResponse = (response: any) => {
+    if (response.didCancel) {
+      throw new Error('User cancelled');
+    }
+    if (response.errorCode !== undefined) {
+      throw new Error(response.errorCode, {
+        cause: response.errorMessage,
+      });
+    }
+    const firstAsset = response.assets?.[0];
+    if (firstAsset && firstAsset.uri && firstAsset.fileName) {
+      handleImagePress({ label: firstAsset.fileName, src: firstAsset });
+    }
+  };
+
+  const handleBlurEffectPress = async () => {
+    try {
+      if (videoPlugin) {
+        setShowLoading(true);
+        if (selectedVirtualBG === null) {
+          await videoPlugin.enable();
+        }
+        await videoPlugin.setBlur(100);
+        setShowLoading(false);
+        dispatch(setSelectedVirtualBackground('blur'));
+      }
+    } catch (error) {
+      setShowLoading(false);
+      console.error('Error setting blur effect', error);
+    }
+  };
+
+  const handleImagePress = async (asset: {
+    label: string;
+    src: Parameters<HMSVirtualBackgroundPlugin['setBackground']>[0];
+  }) => {
+    try {
+      if (videoPlugin) {
+        setShowLoading(true);
+        if (selectedVirtualBG === null) {
+          await videoPlugin.enable();
+        }
+        await videoPlugin.setBackground(asset.src);
+        setShowLoading(false);
+        dispatch(setSelectedVirtualBackground(asset.label));
+      }
+    } catch (error) {
+      setShowLoading(false);
+      console.error('Error setting virtual background', error);
+    }
+  };
+
+  const showingVideoTrack =
+    localPeer &&
+    localPeer.videoTrack &&
+    localPeer.videoTrack.trackId &&
+    localPeer.videoTrack.type === HMSTrackType.VIDEO &&
+    !isLocalVideoMuted;
+
+  const backgrounds: Array<
+    | {
+        icon: React.JSX.Element;
+        onPress: () => Promise<void>;
+        label: string;
+        src?: undefined;
+      }
+    | {
+        icon?: undefined;
+        onPress?: undefined;
+        label: string;
+        src: ImageRequireSource;
+      }
+  > = [];
+
+  if (ImagePicker) {
+    // backgrounds.push({
+    //   label: 'Camera',
+    //   onPress: handleCameraPress,
+    // });
+    backgrounds.push({
+      icon: <AddImageIcon />,
+      label: 'Upload',
+      onPress: handlePhotoLibraryPress,
+    });
+  }
+
+  return (
+    <View style={styles.flexView}>
+      {/* Header */}
+      <View style={styles.header}>
+        <Text style={[styles.headerText, hmsRoomStyles.semiBoldSurfaceHigh]}>
+          Virtual Background
+        </Text>
+
+        <TouchableOpacity
+          onPress={handleClosePress}
+          hitSlop={styles.closeIconHitSlop}
+          style={styles.closeIconButton}
+        >
+          <CloseIcon />
+        </TouchableOpacity>
+      </View>
+
+      {/* Divider */}
+      <BottomSheet.Divider style={styles.divider} />
+
+      {/* Content */}
+      <View style={styles.flexView}>
+        {showingVideoTrack ? (
+          <View style={{ height: 280, alignItems: 'center', marginTop: 32 }}>
+            <View style={{ width: 166, height: 280 }}>
+              <VideoView
+                peer={localPeer}
+                trackId={localPeer.videoTrack.trackId}
+                scaleType={HMSVideoViewMode.ASPECT_FILL}
+              />
+            </View>
+          </View>
+        ) : null}
+
+        <ScrollView
+          style={styles.scrollView}
+          contentContainerStyle={styles.scrollContent}
+        >
+          <View style={{ marginHorizontal: 24 }}>
+            <Text
+              style={[hmsRoomStyles.semiBoldSurfaceHigh, styles.normalText]}
+            >
+              Effects
+            </Text>
+
+            <View style={{ flexDirection: 'row' }}>
+              <TouchableOpacity
+                activeOpacity={0.8}
+                onPress={handleNoEffectPress}
+              >
+                <View
+                  style={[
+                    styles.effectButton,
+                    hmsRoomStyles.effectButton,
+                    selectedVirtualBG === null
+                      ? hmsRoomStyles.active
+                      : hmsRoomStyles.inactive,
+                  ]}
+                >
+                  <CrossCircleIcon size="large" style={{ marginBottom: 8 }} />
+                  <Text
+                    style={[
+                      styles.smallText,
+                      hmsRoomStyles.regularSurfaceMedium,
+                    ]}
+                  >
+                    No Effect
+                  </Text>
+                </View>
+              </TouchableOpacity>
+
+              <TouchableOpacity
+                activeOpacity={0.8}
+                style={styles.horizontalSpacing}
+                onPress={handleBlurEffectPress}
+              >
+                <View
+                  style={[
+                    styles.effectButton,
+                    hmsRoomStyles.effectButton,
+                    selectedVirtualBG === 'blur'
+                      ? hmsRoomStyles.active
+                      : hmsRoomStyles.inactive,
+                  ]}
+                >
+                  <BlurPeopleIcon style={{ marginBottom: 8 }} />
+                  <Text
+                    style={[
+                      styles.smallText,
+                      hmsRoomStyles.regularSurfaceMedium,
+                    ]}
+                  >
+                    Blur
+                  </Text>
+                </View>
+              </TouchableOpacity>
+            </View>
+
+            {/* Blur radius slider here */}
+          </View>
+
+          {backgrounds && backgrounds.length > 0 ? (
+            <View style={styles.backgroundContainer}>
+              <Text
+                style={[
+                  hmsRoomStyles.semiBoldSurfaceHigh,
+                  styles.normalText,
+                  { marginHorizontal: 24 },
+                ]}
+              >
+                Backgrounds
+              </Text>
+
+              <View style={[styles.backgroundImages, { marginHorizontal: 18 }]}>
+                {backgrounds.map((asset) => {
+                  return (
+                    <TouchableOpacity
+                      key={asset.label}
+                      activeOpacity={0.8}
+                      onPress={() => {
+                        const src = asset.src;
+                        if (src) {
+                          handleImagePress({ label: asset.label, src });
+                        } else if (asset.onPress) {
+                          asset.onPress();
+                        }
+                      }}
+                      style={
+                        asset.src
+                          ? styles.backgroundImageContainer
+                          : [
+                              styles.effectButton,
+                              hmsRoomStyles.effectButton,
+                              hmsRoomStyles.inactive,
+                              styles.backgroundImageContainer,
+                            ]
+                      }
+                    >
+                      {asset.src ? (
+                        <Image
+                          source={asset.src}
+                          style={[
+                            styles.backgroundImage,
+                            selectedVirtualBG === asset.label
+                              ? hmsRoomStyles.active
+                              : null,
+                          ]}
+                        />
+                      ) : (
+                        <>
+                          {asset.icon || null}
+                          <Text
+                            style={[
+                              styles.smallText,
+                              hmsRoomStyles.regularSurfaceMedium,
+                            ]}
+                          >
+                            {asset.label}
+                          </Text>
+                        </>
+                      )}
+                    </TouchableOpacity>
+                  );
+                })}
+              </View>
+            </View>
+          ) : null}
+        </ScrollView>
+
+        {showLoading && (
+          <View
+            style={[styles.loadingContainer, hmsRoomStyles.loadingContainer]}
+          >
+            <ActivityIndicator size="large" color={primaryBrightColor} />
+          </View>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  // Header
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginTop: 16,
+    marginHorizontal: 24,
+  },
+  headerText: {
+    fontSize: 16,
+    lineHeight: 24,
+    letterSpacing: 0.15,
+  },
+  closeIconButton: {
+    marginLeft: 16,
+  },
+  closeIconHitSlop: {
+    bottom: 16,
+    left: 16,
+    right: 16,
+    top: 16,
+  },
+  // Divider
+  divider: {
+    marginVertical: 0,
+    marginTop: 16,
+  },
+  // Content
+  flexView: {
+    flex: 1,
+    position: 'relative',
+  },
+  scrollView: {
+    marginTop: 16,
+  },
+  scrollContent: {
+    paddingTop: 8,
+    paddingBottom: 24,
+  },
+  normalText: {
+    fontSize: 14,
+    lineHeight: 20,
+    marginBottom: 8,
+  },
+  smallText: {
+    fontSize: 12,
+    lineHeight: 16,
+    letterSpacing: 0.4,
+  },
+  effectButton: {
+    width: 104,
+    height: 88,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 2,
+  },
+  horizontalSpacing: {
+    marginHorizontal: 12,
+  },
+  backgroundContainer: {
+    marginTop: 24,
+  },
+  backgroundImages: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  backgroundImage: {
+    width: 104,
+    height: 88,
+    borderRadius: 8,
+    resizeMode: 'cover',
+    borderWidth: 2,
+    borderColor: 'transparent',
+  },
+  backgroundImageContainer: {
+    marginHorizontal: 6,
+    marginVertical: 8,
+  },
+  loadingContainer: {
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/modules/imagePickerWrapper.ts

@@ -0,0 +1,20 @@
+let ImagePicker:
+  | {
+      launchCamera: (options: Record<string, any>) => Promise<any>;
+      launchImageLibrary: (options: Record<string, any>) => Promise<any>;
+    }
+  | undefined;
+
+try {
+  ImagePicker = require('react-native-image-picker');
+} catch (error) {
+  ImagePicker = undefined;
+}
+
+if (!ImagePicker?.launchCamera || !ImagePicker?.launchImageLibrary) {
+  // Make sure the loaded module is actually `react-native-image-picker`, if it's not
+  // reset the module to undefined so we can fallback to the default implementation
+  ImagePicker = undefined;
+}
+
+export { ImagePicker };

package/src/modules/videoPluginWrapper.ts

@@ -0,0 +1,32 @@
+import type { ImageRequireSource, ImageURISource } from 'react-native';
+
+export declare class HMSVideoPlugin {
+  protected type: string;
+  constructor(pluginType: string);
+  protected get nativeModule(): any;
+  enable(): Promise<boolean>;
+  disable(): Promise<boolean>;
+}
+
+export declare class HMSVirtualBackgroundPlugin extends HMSVideoPlugin {
+  static NAME: string;
+  constructor();
+  setBlur(blurRadius: number): Promise<boolean>;
+  setBackground(
+    backgroundImage: ImageURISource | ImageRequireSource
+  ): Promise<boolean>;
+}
+
+let VideoPlugin:
+  | {
+      HMSVirtualBackgroundPlugin: typeof HMSVirtualBackgroundPlugin;
+    }
+  | undefined;
+
+try {
+  VideoPlugin = require('@100mslive/react-native-video-plugin');
+} catch (error) {
+  VideoPlugin = undefined;
+}
+
+export { VideoPlugin };

package/src/redux/actionTypes.ts

@@ -117,6 +117,8 @@ const SET_HLS_FULL_SCREEN = 'SET_HLS_FULL_SCREEN';
 
 const SET_ANDROID_HLS_STREAM_PAUSED = 'SET_ANDROID_HLS_STREAM_PAUSED';
 
+const SET_SELECTED_VIRTUAL_BG = 'SET_SELECTED_VIRTUAL_BG';
+
 const FILTER_OUT_BLOCKED_MSGS = 'FILTER_OUT_BLOCKED_MSGS';
 
 export default {
@@ -170,6 +172,7 @@ export default {
   SET_HLS_DESC_PANE_VISIBLE,
   SET_HLS_FULL_SCREEN,
   SET_ANDROID_HLS_STREAM_PAUSED,
+  SET_SELECTED_VIRTUAL_BG,
   FILTER_OUT_BLOCKED_MSGS,
 };
 
@@ -198,6 +201,7 @@ export enum HmsStateActionTypes {
   SET_ACTIVE_SPEAKERS = 'SET_ACTIVE_SPEAKERS',
   SET_RECONNECTING = 'SET_RECONNECTING',
   SET_NOISE_CANCELLATION_PLUGIN = 'SET_NOISE_CANCELLATION_PLUGIN',
+  SET_VIDEO_PLUGIN = 'SET_VIDEO_PLUGIN',
   SET_WHITEBOARD = 'SET_WHITEBOARD',
   SET_INITIAL_ROLE = 'SET_INITIAL_ROLE',
 }

package/src/redux/actions/index.ts

@@ -16,6 +16,7 @@ import type {
   HMSSpeaker,
   HMSWhiteboard,
 } from '@100mslive/react-native-hms';
+import type { HMSVirtualBackgroundPlugin } from '../../modules/videoPluginWrapper';
 import type { Layout } from '@100mslive/types-prebuilt';
 
 import type {
@@ -445,6 +446,11 @@ export const setNoiseCancellationPlugin = (
   noiseCancellationPlugin,
 });
 
+export const setVideoPlugin = (videoPlugin: HMSVirtualBackgroundPlugin) => ({
+  type: HmsStateActionTypes.SET_VIDEO_PLUGIN,
+  videoPlugin,
+});
+
 export const setWhiteboard = (whiteboard: HMSWhiteboard | null) => ({
   type: HmsStateActionTypes.SET_WHITEBOARD,
   whiteboard,
@@ -502,6 +508,11 @@ export const setAndroidHLSStreamPaused = (paused: boolean) => ({
   payload: { hlsStreamPaused_android: paused },
 });
 
+export const setSelectedVirtualBackground = (vb: string | null) => ({
+  type: actionTypes.SET_SELECTED_VIRTUAL_BG,
+  payload: { selectedVirtualBackground: vb },
+});
+
 /**
  * POLLS
  */

package/src/redux/reducers/appState.ts

@@ -66,6 +66,7 @@ type IntialStateType = {
   hlsDescriptionPaneVisible: boolean;
   hlsFullScreen: boolean;
   hlsStreamPaused_android: boolean;
+  selectedVirtualBackground: string | null;
 };
 
 const INITIAL_STATE: IntialStateType = {
@@ -107,6 +108,7 @@ const INITIAL_STATE: IntialStateType = {
   hlsDescriptionPaneVisible: false,
   hlsFullScreen: false,
   hlsStreamPaused_android: false,
+  selectedVirtualBackground: null,
 };
 
 const appReducer = (
@@ -389,6 +391,12 @@ const appReducer = (
         hlsStreamPaused_android: action.payload.hlsStreamPaused_android,
       };
     }
+    case ActionTypes.SET_SELECTED_VIRTUAL_BG: {
+      return {
+        ...state,
+        selectedVirtualBackground: action.payload.selectedVirtualBackground,
+      };
+    }
     case HmsStateActionTypes.CLEAR_STATES:
       return INITIAL_STATE;
     default:

package/src/redux/reducers/hmsStates.ts

@@ -8,6 +8,7 @@ import type {
   HMSSpeaker,
   HMSWhiteboard,
 } from '@100mslive/react-native-hms';
+import type { HMSVirtualBackgroundPlugin } from '../../modules/videoPluginWrapper';
 import type { Layout } from '@100mslive/types-prebuilt';
 import { HmsStateActionTypes } from '../actionTypes';
 
@@ -33,6 +34,7 @@ type ActionType =
   | SetActiveSpeakers
   | SetReconnecting
   | SetNoiseCancellationPlugin
+  | SetVideoPlugin
   | SetWhiteboard;
 
 type SetRoomAction = {
@@ -140,6 +142,11 @@ type SetNoiseCancellationPlugin = {
   noiseCancellationPlugin: HMSNoiseCancellationPlugin;
 };
 
+type SetVideoPlugin = {
+  type: HmsStateActionTypes.SET_VIDEO_PLUGIN;
+  videoPlugin: HMSVirtualBackgroundPlugin;
+};
+
 type SetWhiteboard = {
   type: HmsStateActionTypes.SET_WHITEBOARD;
   whiteboard: HMSWhiteboard | null;
@@ -160,6 +167,7 @@ type IntialStateType = {
   layoutConfig: Layout[] | null;
   roleChangeRequest: HMSRoleChangeRequest | null;
   noiseCancellationPlugin: HMSNoiseCancellationPlugin | null;
+  videoPlugin: HMSVirtualBackgroundPlugin | null;
   whiteboard: HMSWhiteboard | null;
 };
 
@@ -178,6 +186,7 @@ const INITIAL_STATE: IntialStateType = {
   layoutConfig: null,
   roleChangeRequest: null,
   noiseCancellationPlugin: null,
+  videoPlugin: null,
   whiteboard: null,
 };
 
@@ -580,6 +589,11 @@ const hmsStatesReducer = (
         ...state,
         noiseCancellationPlugin: action.noiseCancellationPlugin,
       };
+    case HmsStateActionTypes.SET_VIDEO_PLUGIN:
+      return {
+        ...state,
+        videoPlugin: action.videoPlugin,
+      };
     case HmsStateActionTypes.SET_WHITEBOARD:
       return {
         ...state,