@100mslive/react-native-room-kit 0.0.1

package/src/components/PeerDisplayView.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import type { ElementRef } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import {
+  HMSVideoViewMode,
+  HMSTrackSource,
+  HMSVideoTrack,
+  HMSPeer,
+} from '@100mslive/react-native-hms';
+import { useSelector } from 'react-redux';
+import type { HMSView } from '@100mslive/react-native-hms';
+
+import { styles } from './styles';
+
+import { isTileOnSpotlight } from '../utils/functions';
+import type { RootState } from '../redux';
+import { AvatarView } from './AvatarView';
+
+export interface PeerDisplayViewProps {
+  isDegraded?: boolean;
+  isLocal?: boolean;
+  peer: HMSPeer;
+  videoTrack?: HMSVideoTrack;
+}
+
+const PeerDisplayViewUnmemoized = React.forwardRef<
+  ElementRef<typeof HMSView>,
+  PeerDisplayViewProps
+>(({ isDegraded, isLocal, peer, videoTrack }, hmsViewRef) => {
+  const HmsView = useSelector(
+    (state: RootState) => state.user.hmsInstance?.HmsView || null
+  );
+  const mirrorCamera = useSelector(
+    (state: RootState) => state.app.joinConfig.mirrorCamera
+  );
+  const autoSimulcast = useSelector(
+    (state: RootState) => state.app.joinConfig.autoSimulcast
+  );
+  const spotlightTrackId = useSelector(
+    (state: RootState) => state.user.spotlightTrackId
+  );
+
+  if (!HmsView) {
+    return null;
+  }
+
+  // Check if selected tile is "On Spotlight"
+  const { onSpotlight } = isTileOnSpotlight(spotlightTrackId, {
+    tileVideoTrack: videoTrack,
+    peerRegularAudioTrack: peer.audioTrack,
+    peerAuxTracks: peer.auxiliaryTracks,
+  });
+
+  return (
+    <View style={peerDisplayViewStyles.container}>
+      {videoTrack?.isMute() || videoTrack?.trackId === undefined ? (
+        <View style={styles.avatarContainer}>
+          <AvatarView userName={peer.name} />
+        </View>
+      ) : (
+        <View style={styles.flex}>
+          <HmsView
+            ref={hmsViewRef}
+            // setZOrderMediaOverlay={miniView}
+            trackId={videoTrack?.trackId!}
+            key={videoTrack?.trackId!}
+            autoSimulcast={autoSimulcast}
+            mirror={
+              isLocal && mirrorCamera !== undefined ? mirrorCamera : false
+            }
+            scaleType={
+              onSpotlight ||
+              (videoTrack?.source !== undefined &&
+                videoTrack?.source !== HMSTrackSource.REGULAR)
+                ? HMSVideoViewMode.ASPECT_FIT
+                : HMSVideoViewMode.ASPECT_FILL
+            }
+            style={
+              videoTrack?.source !== undefined &&
+              videoTrack?.source !== HMSTrackSource.REGULAR
+                ? styles.hmsViewScreen
+                : styles.hmsView
+            }
+          />
+          {isDegraded && (
+            <View style={styles.degradedContainer}>
+              <View style={styles.avatarContainer}>
+                <Text style={styles.degradedText}>Degraded</Text>
+              </View>
+            </View>
+          )}
+        </View>
+      )}
+    </View>
+  );
+});
+
+PeerDisplayViewUnmemoized.displayName = 'PeerDisplayViewUnmemoized';
+
+const PeerDisplayView = React.memo(PeerDisplayViewUnmemoized);
+
+PeerDisplayView.displayName = 'PeerDisplayView';
+
+const peerDisplayViewStyles = StyleSheet.create({
+  container: {
+    height: '100%',
+    width: '100%',
+    overflow: 'hidden',
+  },
+});
+
+export default PeerDisplayView;

package/src/components/PeerRTCStatsContainer.tsx

@@ -0,0 +1,82 @@
+import React, { memo } from 'react';
+import { View, StyleSheet, ScrollView } from 'react-native';
+import { useSelector } from 'react-redux';
+import { HMSTrackSource } from '@100mslive/react-native-hms';
+
+import { COLORS } from '../utils/theme';
+import type { RootState } from '../redux';
+import PeerRTCStatsView from './PeerRTCStatsView';
+
+interface PeerRTCStatsContainerProps {
+  peerId: string;
+  trackId?: string;
+  trackSource?: string | number;
+}
+
+const PeerRTCStatsContainerUnmemo: React.FC<PeerRTCStatsContainerProps> = ({
+  peerId,
+  trackId,
+  trackSource,
+}) => {
+  const audioTrackStats = useSelector((state: RootState) => {
+    const audioStatsId =
+      !trackSource || trackSource === HMSTrackSource.REGULAR
+        ? peerId
+        : peerId + trackSource;
+    return audioStatsId ? state.app.rtcStats[audioStatsId] : null;
+  });
+  const videoTrackStats = useSelector((state: RootState) => {
+    const videoStats = trackId ? state.app.rtcStats[trackId] : null;
+
+    if (Array.isArray(videoStats) && videoStats.length === 1) {
+      return videoStats[0];
+    }
+    return videoStats;
+  });
+
+  if (!Array.isArray(videoTrackStats)) {
+    return (
+      <View style={styles.statsContainer}>
+        <PeerRTCStatsView
+          audioTrackStats={audioTrackStats}
+          videoTrackStats={videoTrackStats}
+        />
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView style={styles.statsContainer}>
+      {videoTrackStats.map((videoTrackStat) => (
+        <View style={styles.statsViewWrapper} key={videoTrackStat.layer}>
+          <PeerRTCStatsView
+            audioTrackStats={audioTrackStats}
+            videoTrackStats={videoTrackStat}
+          />
+        </View>
+      ))}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  statsContainer: {
+    position: 'absolute',
+    top: 8,
+    left: 8,
+    padding: 4,
+    backgroundColor: COLORS.OVERLAY,
+    borderRadius: 8,
+    minWidth: 124,
+    maxHeight: 170,
+  },
+  statsViewWrapper: {
+    marginBottom: 12,
+  },
+});
+
+const PeerRTCStatsContainer = memo(PeerRTCStatsContainerUnmemo);
+
+PeerRTCStatsContainer.displayName = 'PeerRTCStatsContainer';
+
+export default PeerRTCStatsContainer;

package/src/components/PeerRTCStatsView.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import {
+  HMSLocalAudioStats,
+  HMSRemoteAudioStats,
+  HMSRemoteVideoStats,
+  HMSLocalVideoStats,
+  HMSQualityLimitationReasons,
+} from '@100mslive/react-native-hms';
+
+import { COLORS } from '../utils/theme';
+
+type TrackStats =
+  | HMSLocalAudioStats
+  | HMSRemoteAudioStats
+  | HMSRemoteVideoStats
+  | HMSLocalVideoStats[]
+  | null
+  | undefined;
+
+interface PeerRTCStatsViewProps {
+  audioTrackStats: TrackStats;
+  videoTrackStats: TrackStats;
+}
+
+const PeerRTCStatsView: React.FC<PeerRTCStatsViewProps> = ({
+  audioTrackStats,
+  videoTrackStats,
+}) => {
+  const qualityLimitationReasons =
+    videoTrackStats && 'qualityLimitationReasons' in videoTrackStats
+      ? (videoTrackStats.qualityLimitationReasons as HMSQualityLimitationReasons)
+      : null;
+
+  return (
+    <View>
+      {videoTrackStats && 'layer' in videoTrackStats ? (
+        <Text style={styles.statsTitle}>{videoTrackStats.layer}</Text>
+      ) : null}
+
+      <Text style={styles.statsText}>
+        Width{' '}
+        {(videoTrackStats && 'resolution' in videoTrackStats
+          ? videoTrackStats.resolution?.width
+          : 0) ?? 0}
+      </Text>
+      <Text style={styles.statsText}>
+        Height{' '}
+        {(videoTrackStats && 'resolution' in videoTrackStats
+          ? videoTrackStats.resolution?.height
+          : 0) ?? 0}
+      </Text>
+      <Text style={styles.statsText}>
+        FPS{' '}
+        {(videoTrackStats &&
+        'frameRate' in videoTrackStats &&
+        videoTrackStats.frameRate
+          ? parseInt(videoTrackStats.frameRate.toString() ?? '0')
+          : 0) ?? 0}
+      </Text>
+      <Text style={styles.statsText}>
+        Bitrate(V){' '}
+        {(videoTrackStats && 'bitrate' in videoTrackStats
+          ? videoTrackStats?.bitrate?.toFixed?.(2)
+          : 0) ?? 0}
+      </Text>
+      <Text style={styles.statsText}>
+        Bitrate(A){' '}
+        {(audioTrackStats && 'bitrate' in audioTrackStats
+          ? audioTrackStats?.bitrate?.toFixed?.(2)
+          : 0) ?? 0}
+      </Text>
+      <Text style={styles.statsText}>
+        Jitter(V){' '}
+        {(videoTrackStats && 'jitter' in videoTrackStats
+          ? videoTrackStats?.jitter?.toFixed?.(2)
+          : 0) ?? 0}
+      </Text>
+      <Text style={styles.statsText}>
+        Jitter(A){' '}
+        {(audioTrackStats && 'jitter' in audioTrackStats
+          ? audioTrackStats?.jitter?.toFixed?.(2)
+          : 0) ?? 0}
+      </Text>
+
+      {qualityLimitationReasons ? (
+        <Text style={styles.statsText}>
+          Reason {qualityLimitationReasons.reason}
+        </Text>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  statsTitle: {
+    fontWeight: 'bold',
+    fontSize: 15,
+    lineHeight: 15 * 1.3,
+    color: COLORS.TEXT.HIGH_EMPHASIS,
+    marginBottom: 4,
+  },
+  statsText: {
+    fontSize: 14,
+    lineHeight: 14 * 1.3,
+    color: COLORS.TEXT.HIGH_EMPHASIS,
+  },
+});
+
+export default PeerRTCStatsView;

package/src/components/PeerSettingsModalContent.tsx

@@ -0,0 +1,355 @@
+import React from 'react';
+import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
+import { batch, useDispatch, useSelector } from 'react-redux';
+import { HMSTrack, HMSTrackSource } from '@100mslive/react-native-hms';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+
+import type { RootState } from '../redux';
+import { COLORS } from '../utils/theme';
+import { ModalTypes } from '../utils/types';
+import type { PeerTrackNode } from '../utils/types';
+import { isTileOnSpotlight } from '../utils/functions';
+import { setPeerToUpdate } from '../redux/actions';
+import { useModalType } from '../hooks-util';
+
+interface PeerSettingsModalContentProps {
+  peerTrackNode: PeerTrackNode;
+  cancelModal(): void;
+  onCaptureScreenShotPress(node: PeerTrackNode): void;
+  onCaptureImageAtMaxSupportedResolutionPress(node: PeerTrackNode): void;
+  onStreamingQualityPress(track: HMSTrack): void;
+}
+
+export const PeerSettingsModalContent: React.FC<
+  PeerSettingsModalContentProps
+> = ({
+  peerTrackNode,
+  cancelModal,
+  onCaptureScreenShotPress,
+  onCaptureImageAtMaxSupportedResolutionPress,
+  onStreamingQualityPress,
+}) => {
+  const dispatch = useDispatch();
+  const hmsInstance = useSelector((state: RootState) => state.user.hmsInstance);
+  const localPeer = useSelector(
+    (state: RootState) => state.hmsStates.localPeer
+  );
+  const hmsSessionStore = useSelector(
+    (state: RootState) => state.user.hmsSessionStore
+  );
+  const spotlightTrackId = useSelector(
+    (state: RootState) => state.user.spotlightTrackId
+  );
+  const { handleModalVisibleType: setModalVisible } = useModalType();
+
+  const removePeer = () => {
+    hmsInstance
+      ?.removePeer(peerTrackNode.peer, 'removed from room')
+      .then((d) => console.log('Remove Peer Success: ', d))
+      .catch((e) => console.log('Remove Peer Error: ', e));
+
+    cancelModal();
+  };
+
+  const toggleMuteAudio = () => {
+    cancelModal();
+
+    if (peerTrackNode.peer.isLocal) {
+      return;
+    }
+
+    hmsInstance?.changeTrackState(
+      peerTrackNode.peer.audioTrack!!,
+      !peerTrackNode.peer.audioTrack!!.isMute()
+    );
+  };
+
+  const toggleMuteVideo = () => {
+    cancelModal();
+
+    if (peerTrackNode.peer.isLocal) {
+      return;
+    }
+
+    hmsInstance?.changeTrackState(
+      peerTrackNode.peer.videoTrack!!,
+      !peerTrackNode.peer.videoTrack!!.isMute()
+    );
+  };
+
+  const changeName = () => {
+    batch(() => {
+      dispatch(setPeerToUpdate(peerTrackNode.peer));
+      setModalVisible(ModalTypes.CHANGE_NAME, true);
+    });
+  };
+
+  const changeRole = () => {
+    batch(() => {
+      dispatch(setPeerToUpdate(peerTrackNode.peer));
+      setModalVisible(ModalTypes.CHANGE_ROLE, true);
+    });
+  };
+
+  const changeVolumeLevelOfPeer = () => {
+    batch(() => {
+      dispatch(setPeerToUpdate(peerTrackNode.peer));
+      setModalVisible(ModalTypes.VOLUME, true);
+    });
+  };
+
+  // Check if selected tile is "On Spotlight"
+  const { onSpotlight, tileVideoTrackId, tileAudioTrackId } = isTileOnSpotlight(
+    spotlightTrackId,
+    {
+      tileVideoTrack: peerTrackNode.track,
+      peerRegularAudioTrack: peerTrackNode.peer.audioTrack,
+      peerAuxTracks: peerTrackNode.peer.auxiliaryTracks,
+    }
+  );
+
+  const handleSpotlightPress = async () => {
+    try {
+      // Close Modal
+      cancelModal();
+
+      if (!hmsSessionStore) {
+        return null;
+      }
+
+      if (tileAudioTrackId || tileVideoTrackId) {
+        // Toggle `spotlight` key value on Session Store
+        await hmsSessionStore.set(
+          onSpotlight ? null : tileAudioTrackId || tileVideoTrackId,
+          'spotlight'
+        );
+      }
+    } catch (error) {
+      console.log('Add to spotlight error -> ', error);
+    }
+  };
+
+  const { peer } = peerTrackNode;
+
+  const localPeerPermissions = localPeer?.role?.permissions;
+
+  const isPeerAudioMute = peer.isLocal ? null : peer.audioTrack?.isMute();
+  const isPeerVideoMute = peer.isLocal ? null : peer.videoTrack?.isMute();
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.roleChangeModalHeading}>
+        {peer.name}
+        {peer.isLocal ? ' (You)' : ''}
+      </Text>
+      <Text style={styles.participantRole}>{peer.role?.name}</Text>
+
+      <View style={styles.contentContainer}>
+        <SettingItem
+          text={onSpotlight ? 'Remove from Spotlight' : 'Add to Spotlight'}
+          IconType={Ionicons}
+          iconName={onSpotlight ? 'ios-star' : 'ios-star-outline'}
+          onPress={handleSpotlightPress}
+          disabled={!peerTrackNode.track?.trackId}
+        />
+
+        {!peer.isLocal &&
+        (localPeerPermissions?.mute || localPeerPermissions?.unmute) ? (
+          <>
+            {/* If Peer's Audio is Muted and Local Peer has unmute Permissions */}
+            {isPeerAudioMute && localPeerPermissions?.unmute ? (
+              <SettingItem
+                text={'Request Audio Unmute'}
+                IconType={Ionicons}
+                iconName={'mic-off-outline'}
+                onPress={toggleMuteAudio}
+              />
+            ) : null}
+
+            {/* If Peer's Audio is Unmuted and Local Peer has mute Permissions */}
+            {!isPeerAudioMute && localPeerPermissions?.mute ? (
+              <SettingItem
+                text={'Mute Audio'}
+                IconType={Ionicons}
+                iconName={'mic-outline'}
+                onPress={toggleMuteAudio}
+              />
+            ) : null}
+          </>
+        ) : null}
+
+        {!peer.isLocal &&
+        (localPeerPermissions?.mute || localPeerPermissions?.unmute) ? (
+          <>
+            {/* If Peer's Video is Muted and Local Peer has unmute Permissions */}
+            {isPeerVideoMute && localPeerPermissions?.unmute ? (
+              <SettingItem
+                text={'Request Video Unmute'}
+                IconType={MaterialCommunityIcons}
+                iconName={'video-off-outline'}
+                onPress={toggleMuteVideo}
+              />
+            ) : null}
+
+            {/* If Peer's Video is Unmuted and Local Peer has mute Permissions */}
+            {!isPeerVideoMute && localPeerPermissions?.mute ? (
+              <SettingItem
+                text={'Mute Video'}
+                IconType={MaterialCommunityIcons}
+                iconName={'video-outline'}
+                onPress={toggleMuteVideo}
+              />
+            ) : null}
+          </>
+        ) : null}
+
+        {!peer.isLocal && localPeerPermissions?.removeOthers ? (
+          <SettingItem
+            text="Remove Peer"
+            IconType={Ionicons}
+            iconName={'person-remove-outline'}
+            onPress={removePeer}
+          />
+        ) : null}
+
+        {peer.isLocal ? (
+          <SettingItem
+            text="Change Name"
+            IconType={MaterialCommunityIcons}
+            iconName={'account-edit-outline'}
+            onPress={() => changeName()}
+          />
+        ) : null}
+
+        {localPeerPermissions?.changeRole ? (
+          <SettingItem
+            text="Change Role"
+            IconType={Ionicons}
+            iconName={'people-outline'}
+            onPress={() => changeRole()}
+          />
+        ) : null}
+
+        {!peer.isLocal ? (
+          <SettingItem
+            text="Set Volume"
+            IconType={Ionicons}
+            iconName={'volume-high-outline'}
+            onPress={() => changeVolumeLevelOfPeer()}
+          />
+        ) : null}
+
+        {/* Don't show Capture Screenshot option, if track is screenshare of local peer */}
+        {peerTrackNode.peer.isLocal &&
+        peerTrackNode.track &&
+        peerTrackNode.track.source === HMSTrackSource.SCREEN ? null : (
+          <SettingItem
+            text="Capture Screenshot"
+            IconType={MaterialCommunityIcons}
+            iconName={'cellphone-screenshot'}
+            onPress={() => onCaptureScreenShotPress(peerTrackNode)}
+            disabled={!peerTrackNode.track || peerTrackNode.track.isMute()} // Capture Screenshot option should be disable, if track is muted or not available
+          />
+        )}
+
+        {/* Local Image Capture is only available for local peer */}
+        {peerTrackNode.peer.isLocal ? (
+          <SettingItem
+            text="Local Image Capture"
+            IconType={MaterialCommunityIcons}
+            iconName={'cellphone-screenshot'}
+            onPress={() =>
+              onCaptureImageAtMaxSupportedResolutionPress(peerTrackNode)
+            }
+            disabled={!peerTrackNode.track || peerTrackNode.track.isMute()} // Local Image Capture option should be disable, if track is muted or not available
+          />
+        ) : null}
+
+        {/* Don't show Streaming Quality option for local peer */}
+        {!peer.isLocal ? (
+          <SettingItem
+            text="Streaming Quality"
+            IconType={Ionicons}
+            iconName={'layers-outline'}
+            onPress={() =>
+              peerTrackNode.track
+                ? onStreamingQualityPress(peerTrackNode.track)
+                : null
+            }
+            disabled={!peerTrackNode.track || peerTrackNode.track.isMute()} // Streaming Quality option should be disable, if track is muted or not available
+          />
+        ) : null}
+      </View>
+    </View>
+  );
+};
+
+interface SettingItemProps {
+  onPress(): void;
+  text: string;
+  iconName: string;
+  IconType: any;
+  disabled?: boolean;
+}
+
+const SettingItem: React.FC<SettingItemProps> = ({
+  onPress,
+  text,
+  iconName,
+  IconType,
+  disabled = false,
+}) => {
+  return (
+    <TouchableOpacity
+      disabled={disabled}
+      style={[styles.button, disabled ? { opacity: 0.6 } : null]}
+      onPress={onPress}
+    >
+      <IconType name={iconName} size={24} style={styles.icon} />
+
+      <Text style={styles.text}>{text}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 24,
+  },
+  contentContainer: {
+    marginTop: 16,
+  },
+  roleChangeModalHeading: {
+    color: COLORS.TEXT.HIGH_EMPHASIS,
+    fontSize: 20,
+    lineHeight: 24,
+    letterSpacing: 0.15,
+    fontFamily: 'Inter-Medium',
+    textTransform: 'capitalize',
+  },
+  participantRole: {
+    color: COLORS.TEXT.MEDIUM_EMPHASIS,
+    fontSize: 12,
+    lineHeight: 16,
+    letterSpacing: 0.4,
+    marginTop: 4,
+    fontFamily: 'Inter-Regular',
+    textTransform: 'capitalize',
+  },
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: 12,
+  },
+  text: {
+    fontFamily: 'Inter-Medium',
+    fontSize: 14,
+    lineHeight: 24,
+    color: COLORS.TEXT.HIGH_EMPHASIS,
+  },
+  icon: {
+    color: COLORS.WHITE,
+    marginRight: 12,
+  },
+});