@100mslive/react-native-room-kit 0.2.0 → 1.0.1

package/src/components/PressableIcon.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { StyleSheet, TouchableOpacity } from 'react-native';
 import type { TouchableOpacityProps } from 'react-native';
 
-import { useHMSRoomStyleSheet } from '../hooks-util';
+import { useHMSRoomStyleSheet, useIsHLSViewer } from '../hooks-util';
+import { hexToRgbA } from '../utils/theme';
 
 interface PressableIconProps extends Omit<TouchableOpacityProps, 'children'> {
   children: Pick<TouchableOpacityProps, 'children'>;
@@ -19,23 +20,35 @@ export const PressableIcon: React.FC<PressableIconProps> = ({
   border = true,
   ...restProps
 }) => {
-  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
-    border: {
-      borderColor: theme.palette.border_bright,
-    },
-    active: {
-      backgroundColor: theme.palette.surface_brighter,
-      borderColor: theme.palette.surface_brighter,
-    },
-  }));
+  const isHLSViewer = useIsHLSViewer();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet(
+    (theme) => ({
+      pressable: {
+        backgroundColor: isHLSViewer
+          ? theme.palette.background_dim &&
+            hexToRgbA(theme.palette.background_dim, 0.64)
+          : undefined,
+      },
+      border: {
+        borderColor: theme.palette.border_bright,
+      },
+      active: {
+        backgroundColor: theme.palette.surface_brighter,
+        borderColor: theme.palette.surface_brighter,
+      },
+    }),
+    [isHLSViewer]
+  );
 
   return (
     <TouchableOpacity
       style={[
         styles.pressable,
+        hmsRoomStyles.pressable,
         {
-          borderRadius: rounded ? 20 : undefined,
-          ...(border
+          borderRadius: rounded ? 20 : 8,
+          ...(border && !isHLSViewer
             ? { ...styles.withBorder, ...hmsRoomStyles.border }
             : undefined),
           ...(active ? hmsRoomStyles.active : undefined),
@@ -51,11 +64,11 @@ export const PressableIcon: React.FC<PressableIconProps> = ({
 
 const styles = StyleSheet.create({
   pressable: {
+    borderRadius: 8,
     padding: 8,
     alignSelf: 'flex-start',
   },
   withBorder: {
-    borderRadius: 8,
     borderWidth: 1,
   },
 });

package/src/components/Preview.tsx

@@ -5,10 +5,6 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
-import Animated, {
-  useAnimatedStyle,
-  useAnimatedKeyboard,
-} from 'react-native-reanimated';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import LinearGradient from 'react-native-linear-gradient';
 
@@ -27,19 +23,17 @@ import { HMSPreviewNetworkQuality } from './HMSPreviewNetworkQuality';
 import { useCanPublishVideo } from '../hooks-sdk';
 import { HMSPreviewHLSLiveIndicator } from './HMSPreviewHLSLiveIndicator';
 import { CompanyLogo } from './CompanyLogo';
-import { useHMSRoomStyleSheet } from '../hooks-util';
+import {
+  useHMSRoomColorPalette,
+  useHMSRoomStyleSheet,
+  useIsHLSViewer,
+} from '../hooks-util';
+import { HMSKeyboardAvoidingView } from './HMSKeyboardAvoidingView';
+import { hexToRgbA } from '../utils/theme';
 
 const backButtonEdges = ['top'] as const;
 const headerEdges = ['top', 'left', 'right'] as const;
 
-const gradientColorShades = [
-  '#000000',
-  'rgba(0, 0, 0, 0.9)',
-  'rgba(0, 0, 0, 0.7)',
-  'rgba(0, 0, 0, 0.1)',
-  'rgba(0, 0, 0, 0.05)',
-  'rgba(0, 0, 0, 0)',
-];
 const gradientColorShadeLocations = [0.45, 0.55, 0.7, 0.9, 0.95, 1];
 
 export const Preview = ({
@@ -50,13 +44,24 @@ export const Preview = ({
   loadingButtonState: boolean;
 }) => {
   const canPublishVideo = useCanPublishVideo();
-  const animatedKeyboard = useAnimatedKeyboard();
-
-  const keyboardAvoidStyle = useAnimatedStyle(() => {
-    return {
-      transform: [{ translateY: -animatedKeyboard.height.value }],
-    };
-  });
+  const isHLSViewer = useIsHLSViewer();
+
+  const { background_dim } = useHMSRoomColorPalette();
+
+  const gradientColorShades = React.useMemo(
+    () =>
+      background_dim
+        ? [
+            hexToRgbA(background_dim, 1),
+            hexToRgbA(background_dim, 0.9),
+            hexToRgbA(background_dim, 0.7),
+            hexToRgbA(background_dim, 0.1),
+            hexToRgbA(background_dim, 0.05),
+            hexToRgbA(background_dim, 0),
+          ]
+        : [],
+    [background_dim]
+  );
 
   const hmsRoomStyles = useHMSRoomStyleSheet(
     (theme) => ({
@@ -112,22 +117,24 @@ export const Preview = ({
         <View style={styles.footerWrapper}>
           <HMSPreviewNetworkQuality />
 
-          <Animated.View
-            style={[styles.footer, hmsRoomStyles.footer, keyboardAvoidStyle]}
+          <HMSKeyboardAvoidingView
+            style={[styles.footer, hmsRoomStyles.footer]}
           >
-            <View style={styles.controlsContainer}>
-              <View style={styles.micAndCameraControls}>
-                <HMSManageLocalAudio />
+            {isHLSViewer ? null : (
+              <View style={styles.controlsContainer}>
+                <View style={styles.micAndCameraControls}>
+                  <HMSManageLocalAudio />
 
-                <View style={styles.manageLocalVideoWrapper}>
-                  <HMSManageLocalVideo />
+                  <View style={styles.manageLocalVideoWrapper}>
+                    <HMSManageLocalVideo />
+                  </View>
+
+                  <HMSManageCameraRotation />
                 </View>
 
-                <HMSManageCameraRotation />
+                <HMSManageAudioOutput />
               </View>
-
-              <HMSManageAudioOutput />
-            </View>
+            )}
 
             <View style={styles.joinButtonRow}>
               <HMSPreviewEditName />
@@ -137,7 +144,7 @@ export const Preview = ({
                 loading={loadingButtonState}
               />
             </View>
-          </Animated.View>
+          </HMSKeyboardAvoidingView>
         </View>
       </View>
     </TouchableWithoutFeedback>

package/src/components/PreviewForRoleChangeModal.tsx

@@ -0,0 +1,443 @@
+import * as React from 'react';
+import Modal from 'react-native-modal';
+import { StyleSheet, TouchableOpacity, View, Text } from 'react-native';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import {
+  HMSLocalAudioTrack,
+  HMSLocalVideoTrack,
+  HMSTrackType,
+} from '@100mslive/react-native-hms';
+
+import type { RootState } from '../redux';
+import {
+  useHMSInstance,
+  useHMSRoomColorPalette,
+  useHMSRoomStyleSheet,
+} from '../hooks-util';
+import { setRoleChangeRequest } from '../redux/actions';
+import { useHMSActions } from '../hooks-sdk';
+import { parseMetadata } from '../utils/functions';
+import { NotificationTypes } from '../utils';
+import { Header } from './Header';
+import { selectCanPublishTrackForRole } from '../hooks-sdk-selectors';
+import { HMSPrimaryButton } from './HMSPrimaryButton';
+import { CameraIcon, MicIcon, RotateCameraIcon } from '../Icons';
+import { PressableIcon } from './PressableIcon';
+import { AvatarView } from './PeerVideoTile/AvatarView';
+import { HMSVideoView } from './HMSVideoView';
+import {
+  selectIsHLSViewer,
+  selectLayoutConfigForRole,
+} from '../hooks-util-selectors';
+
+const _PreviewForRoleChangeModal = () => {
+  const dispatch = useDispatch();
+  const hmsInstance = useHMSInstance();
+  const hmsActions = useHMSActions();
+  const roleChangeRequest = useSelector(
+    (state: RootState) => state.hmsStates.roleChangeRequest
+  );
+  const localPeerName = useSelector(
+    (state: RootState) => state.hmsStates.localPeer?.name || ''
+  );
+  const localPeerRoleName = useSelector(
+    (state: RootState) => state.hmsStates.localPeer?.role?.name
+  );
+  const localPeerMetadata = useSelector(
+    (state: RootState) => parseMetadata(state.hmsStates.localPeer?.metadata),
+    shallowEqual
+  );
+  const becomeHLSViewer = useSelector((state: RootState) => {
+    const layoutConfig = selectLayoutConfigForRole(
+      state.hmsStates.layoutConfig,
+      roleChangeRequest?.suggestedRole || null
+    );
+    return selectIsHLSViewer(roleChangeRequest?.suggestedRole, layoutConfig);
+  });
+
+  const [localVideoTrack, setLocalVideoTrack] =
+    React.useState<HMSLocalVideoTrack | null>(null);
+  const [localAudioTrack, setLocalAudioTrack] =
+    React.useState<HMSLocalAudioTrack | null>(null);
+
+  const [isLocalAudioMuted, setIsLocalAudioMuted] = React.useState<
+    boolean | undefined
+  >();
+  const [isLocalVideoMuted, setIsLocalVideoMuted] = React.useState<
+    boolean | undefined
+  >();
+
+  const { background_dim: backgroundDimColor } = useHMSRoomColorPalette();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet(
+    (theme, typography) => ({
+      container: {
+        backgroundColor: theme.palette.background_dim,
+      },
+      footer: {
+        backgroundColor: theme.palette.background_default,
+      },
+      heading: {
+        color: theme.palette.on_surface_high,
+        fontFamily: `${typography.font_family}-SemiBold`,
+      },
+      subheading: {
+        color: theme.palette.on_surface_medium,
+        fontFamily: `${typography.font_family}-Regular`,
+      },
+      cameraRotation: {
+        tintColor: isLocalVideoMuted
+          ? theme.palette.on_surface_low
+          : theme.palette.on_surface_high,
+      },
+      pressableIcon: {
+        borderColor: theme.palette.border_bright,
+      },
+      activePressableIcon: {
+        backgroundColor: theme.palette.surface_brighter,
+        borderColor: theme.palette.surface_brighter,
+      },
+      declineButton: {
+        borderColor: theme.palette.secondary_default,
+      },
+      declineButtonText: {
+        color: theme.palette.on_surface_high,
+        fontFamily: `${typography.font_family}-SemiBold`,
+      },
+    }),
+    [isLocalVideoMuted]
+  );
+
+  const onModalShow = async () => {
+    if (
+      roleChangeRequest &&
+      roleChangeRequest.suggestedRole &&
+      roleChangeRequest.suggestedRole.name
+    ) {
+      // get preview tracks
+      const previewForRoleTracks = await hmsInstance.previewForRole(
+        roleChangeRequest.suggestedRole.name
+      );
+
+      const localVideoTrack = previewForRoleTracks.find(
+        (track: HMSLocalVideoTrack | HMSLocalAudioTrack) =>
+          track.type === HMSTrackType.VIDEO
+      ) as HMSLocalVideoTrack;
+      if (localVideoTrack) {
+        setLocalVideoTrack(localVideoTrack);
+        setIsLocalVideoMuted(localVideoTrack.isMute());
+      }
+
+      const localAudioTrack = previewForRoleTracks.find(
+        (track: HMSLocalVideoTrack | HMSLocalAudioTrack) =>
+          track.type === HMSTrackType.AUDIO
+      ) as HMSLocalAudioTrack;
+      if (localAudioTrack) {
+        setLocalAudioTrack(localAudioTrack);
+        setIsLocalAudioMuted(localAudioTrack.isMute());
+      }
+
+      // lower hand
+      await hmsActions.lowerLocalPeerHand();
+    }
+  };
+
+  const handleRequestAccept = async () => {
+    dispatch(setRoleChangeRequest(null));
+    // saving current role in peer metadata,
+    // so that when peer is removed from stage, we can assign previous role to it.
+    if (localPeerRoleName) {
+      const newMetadata = {
+        ...localPeerMetadata,
+        prevRole: localPeerRoleName,
+      };
+      await hmsActions.changeMetadata(newMetadata);
+    }
+    await hmsInstance.acceptRoleChange();
+  };
+
+  const handleRequestDecline = async () => {
+    await hmsInstance.cancelPreview();
+    if (roleChangeRequest?.requestedBy) {
+      await hmsInstance.sendDirectMessage(
+        '',
+        roleChangeRequest.requestedBy,
+        NotificationTypes.ROLE_CHANGE_DECLINED
+      );
+    }
+    dispatch(setRoleChangeRequest(null));
+  };
+
+  const handleAudioMuteTogglePress = async () => {
+    if (!localAudioTrack) {
+      return;
+    }
+    const enable = !isLocalAudioMuted;
+    try {
+      setIsLocalAudioMuted(enable);
+      localAudioTrack.setMute(enable);
+    } catch (error) {
+      setIsLocalAudioMuted(!enable);
+      return Promise.reject(error);
+    }
+  };
+
+  const handleVideoMuteTogglePress = async () => {
+    if (!localVideoTrack) {
+      return;
+    }
+    const enable = !isLocalVideoMuted;
+    try {
+      setIsLocalVideoMuted(enable);
+      localVideoTrack.setMute(enable);
+    } catch (error) {
+      setIsLocalVideoMuted(!enable);
+      return Promise.reject(error);
+    }
+  };
+
+  const handleSwitchCameraPress = async () => {
+    if (isLocalVideoMuted) {
+      return;
+    }
+    if (!localVideoTrack) {
+      return;
+    }
+    localVideoTrack.switchCamera();
+  };
+
+  const canPublishAudio = selectCanPublishTrackForRole(
+    roleChangeRequest?.suggestedRole,
+    'audio'
+  );
+  const canPublishVideo = selectCanPublishTrackForRole(
+    roleChangeRequest?.suggestedRole,
+    'video'
+  );
+
+  const heading = becomeHLSViewer
+    ? "You're invited to view the live stream"
+    : "You're invited to join the stage";
+  const subheading = getSubheading(canPublishAudio, canPublishVideo);
+
+  return (
+    <Modal
+      isVisible={roleChangeRequest !== null}
+      animationIn={'fadeInUp'}
+      animationInTiming={100}
+      animationOutTiming={100}
+      animationOut={'fadeOutDown'}
+      backdropColor={backgroundDimColor}
+      backdropOpacity={0.3}
+      onBackButtonPress={handleRequestDecline}
+      onBackdropPress={handleRequestDecline}
+      onModalShow={onModalShow}
+      useNativeDriver={true}
+      useNativeDriverForBackdrop={true}
+      hideModalContentWhileAnimating={true}
+      style={styles.modal}
+      supportedOrientations={['portrait', 'landscape']}
+    >
+      <View style={[styles.container, hmsRoomStyles.container]}>
+        <View style={[styles.container, hmsRoomStyles.container]}>
+          <AvatarView
+            name={localPeerName}
+            avatarStyles={styles.avatar}
+            videoView={
+              localVideoTrack &&
+              localVideoTrack.trackId &&
+              !isLocalVideoMuted ? (
+                // && localVideoTrack.isMute() === false // can't rely on `isMute()` result, because we are not receiving ON_TRACK_UPDATES for `previewForRole` tracks
+                <HMSVideoView trackId={localVideoTrack.trackId} />
+              ) : null
+            }
+          />
+        </View>
+
+        {/* Header */}
+        <View style={styles.header}>
+          <Header showControls={false} transparent={true} />
+        </View>
+
+        {/* Footer */}
+        <View style={styles.footerWrapper}>
+          <View style={[styles.footer, hmsRoomStyles.footer]}>
+            <Text style={[styles.heading, hmsRoomStyles.heading]}>
+              {heading}
+            </Text>
+
+            {subheading ? (
+              <Text style={[styles.subheading, hmsRoomStyles.subheading]}>
+                {subheading}
+              </Text>
+            ) : null}
+
+            {canPublishAudio || canPublishVideo ? (
+              <View style={styles.micAndCameraControls}>
+                {/* Toggle Audio Mute Status */}
+                {canPublishAudio && localAudioTrack ? (
+                  <PressableIcon
+                    onPress={handleAudioMuteTogglePress}
+                    active={isLocalAudioMuted}
+                    style={[
+                      styles.pressableIcon,
+                      hmsRoomStyles.pressableIcon,
+                      !!isLocalAudioMuted
+                        ? hmsRoomStyles.activePressableIcon
+                        : null,
+                    ]}
+                  >
+                    <MicIcon muted={!!isLocalAudioMuted} />
+                  </PressableIcon>
+                ) : null}
+
+                {canPublishVideo && localVideoTrack ? (
+                  <>
+                    {/* Toggle Video Mute Status */}
+                    <View style={styles.manageLocalVideoWrapper}>
+                      <PressableIcon
+                        onPress={handleVideoMuteTogglePress}
+                        active={isLocalVideoMuted}
+                        style={[
+                          styles.pressableIcon,
+                          hmsRoomStyles.pressableIcon,
+                          !!isLocalVideoMuted
+                            ? hmsRoomStyles.activePressableIcon
+                            : null,
+                        ]}
+                      >
+                        <CameraIcon muted={!!isLocalVideoMuted} />
+                      </PressableIcon>
+                    </View>
+
+                    {/* Manage Camera Rotation */}
+                    <PressableIcon
+                      onPress={handleSwitchCameraPress}
+                      disabled={isLocalVideoMuted}
+                      style={[
+                        styles.pressableIcon,
+                        hmsRoomStyles.pressableIcon,
+                      ]}
+                    >
+                      <RotateCameraIcon style={hmsRoomStyles.cameraRotation} />
+                    </PressableIcon>
+                  </>
+                ) : null}
+              </View>
+            ) : null}
+
+            <HMSPrimaryButton
+              loading={false}
+              onPress={handleRequestAccept}
+              title="Join Now"
+              style={styles.joinButton}
+            />
+
+            <TouchableOpacity
+              style={[styles.declineButton, hmsRoomStyles.declineButton]}
+              onPress={handleRequestDecline}
+            >
+              <Text
+                style={[
+                  styles.declineButtonText,
+                  hmsRoomStyles.declineButtonText,
+                ]}
+              >
+                Decline
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export const PreviewForRoleChangeModal = React.memo(_PreviewForRoleChangeModal);
+
+const styles = StyleSheet.create({
+  modal: {
+    margin: 0,
+  },
+  container: {
+    flex: 1,
+    position: 'relative',
+    backgroundColor: 'silver',
+  },
+  header: {
+    position: 'absolute',
+    width: '100%',
+  },
+  micAndCameraControls: {
+    flexDirection: 'row',
+  },
+  manageLocalVideoWrapper: {
+    marginHorizontal: 16,
+  },
+  footerWrapper: {
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+    zIndex: 30,
+  },
+  footer: {
+    flex: 1,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    paddingHorizontal: 16,
+    paddingTop: 24,
+    paddingBottom: 32,
+  },
+  heading: {
+    fontSize: 20,
+    lineHeight: 24,
+    letterSpacing: 0.15,
+    marginBottom: 8,
+  },
+  subheading: {
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.25,
+    marginBottom: 24,
+  },
+  pressableIcon: {
+    backgroundColor: undefined,
+    borderWidth: 1,
+  },
+  avatar: {
+    marginBottom: 200,
+  },
+  joinButton: {
+    marginTop: 16,
+  },
+  declineButton: {
+    flex: 1,
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    borderRadius: 8,
+    borderWidth: 1,
+    marginTop: 16,
+  },
+  declineButtonText: {
+    fontSize: 16,
+    lineHeight: 24,
+    letterSpacing: 0.5,
+    textAlign: 'center',
+  },
+});
+
+const getSubheading = (canPublishAudio: boolean, canPublishVideo: boolean) => {
+  if (canPublishAudio && canPublishVideo) {
+    return 'Setup your audio and video before joining';
+  }
+
+  if (canPublishAudio) {
+    return 'Setup your audio before joining';
+  }
+
+  if (canPublishVideo) {
+    return 'Setup your video before joining';
+  }
+
+  return '';
+};

package/src/components/ReconnectionView.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { Platform, StyleSheet, Text, View } from 'react-native';
+import { useSelector } from 'react-redux';
+import { BlurView } from '@react-native-community/blur';
+
+import type { RootState } from '../redux';
+import { AlertTriangleIcon } from '../Icons';
+import { useHMSRoomStyleSheet } from '../hooks-util';
+
+export const _ReconnectionView: React.FC = () => {
+  const reconnecting = useSelector(
+    (state: RootState) => state.hmsStates.reconnecting
+  );
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    degradedText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+    icon: {
+      tintColor: theme.palette.on_surface_high,
+    },
+  }));
+
+  if (!reconnecting) {
+    return null;
+  }
+
+  return (
+    <View style={[StyleSheet.absoluteFill, styles.container]}>
+      <BlurView
+        style={StyleSheet.absoluteFill}
+        blurType="dark"
+        blurRadius={25}
+        blurAmount={Platform.OS === 'ios' ? 4 : 32}
+        downsampleFactor={25}
+      />
+
+      <AlertTriangleIcon
+        type="fill"
+        style={[styles.icon, hmsRoomStyles.icon]}
+      />
+
+      <Text
+        numberOfLines={2}
+        style={[styles.degradedText, hmsRoomStyles.degradedText]}
+      >
+        Your network is unstable
+      </Text>
+    </View>
+  );
+};
+
+export const ReconnectionView = React.memo(_ReconnectionView);
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  icon: {
+    width: 32,
+    height: 32,
+  },
+  degradedText: {
+    fontSize: 16,
+    lineHeight: 24,
+    letterSpacing: 0.4,
+    marginTop: 8,
+    textAlign: 'center',
+    paddingHorizontal: 8,
+  },
+});