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

package/src/components/PeerVideoTile/PeerAudioIndicator.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+import type { HMSPeer } from '@100mslive/react-native-hms';
+import { useSelector } from 'react-redux';
+import LottieView from 'lottie-react-native';
+
+import { MicIcon } from '../../Icons';
+import { useHMSRoomStyleSheet } from '../../hooks-util';
+import type { RootState } from '../../redux';
+
+export interface PeerAudioIndicatorProps {
+  peer: HMSPeer;
+  isMuted: boolean | undefined;
+}
+
+export const PeerAudioIndicator: React.FC<PeerAudioIndicatorProps> = ({
+  peer,
+  isMuted,
+}) => {
+  const activeSpeaker = useSelector(
+    (state: RootState) =>
+      state.hmsStates.activeSpeakers.findIndex(
+        (activeSpeaker) => activeSpeaker.peer.peerID === peer.peerID
+      ) >= 0
+  );
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    iconWrapper: {
+      backgroundColor: theme.palette.secondary_dim,
+    },
+    icon: {
+      tintColor: theme.palette.on_secondary_high,
+    },
+  }));
+
+  if (isMuted) {
+    return (
+      <View style={[styles.iconWrapper, hmsRoomStyles.iconWrapper]}>
+        <MicIcon muted={true} style={[styles.icon, hmsRoomStyles.icon]} />
+      </View>
+    );
+  }
+
+  if (activeSpeaker) {
+    return (
+      <View style={[styles.speakerIconWrapper, hmsRoomStyles.iconWrapper]}>
+        <LottieView
+          style={styles.speakerIcon}
+          source={require('../../assets/audio-level-white.json')}
+          autoPlay
+          loop
+        />
+      </View>
+    );
+  }
+
+  return null;
+};
+
+const styles = StyleSheet.create({
+  iconWrapper: {
+    position: 'absolute',
+    top: 8,
+    right: 8,
+    padding: 8,
+    borderRadius: 16,
+  },
+  icon: {
+    width: 16,
+    height: 16,
+  },
+  speakerIconWrapper: {
+    position: 'absolute',
+    top: 8,
+    right: 8,
+    padding: 0,
+    borderRadius: 16,
+  },
+  speakerIcon: {
+    width: 32,
+    height: 32,
+  },
+});

package/src/components/PeerVideoTile/PeerMetadata.tsx

@@ -3,31 +3,40 @@ import { StyleSheet, View } from 'react-native';
 
 import { parseMetadata } from '../../utils/functions';
 import { BRBIcon, HandIcon } from '../../Icons';
-import { useHMSRoomStyle } from '../../hooks-util';
+import { useHMSRoomStyleSheet } from '../../hooks-util';
 
 export interface PeerMetadataProps {
   metadata: string | undefined;
+  isHandRaised: boolean;
 }
 
-export const PeerMetadata: React.FC<PeerMetadataProps> = ({ metadata }) => {
-  const parsedMetadata = parseMetadata(metadata);
-
-  const iconWrapperStyles = useHMSRoomStyle((theme) => ({
-    backgroundColor: theme.palette.secondary_dim,
+export const PeerMetadata: React.FC<PeerMetadataProps> = ({
+  metadata,
+  isHandRaised,
+}) => {
+  const isBRBOn = !!parseMetadata(metadata).isBRBOn;
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    iconWrapper: {
+      backgroundColor: theme.palette.secondary_dim,
+    },
+    icon: {
+      tintColor: theme.palette.on_secondary_high,
+    },
   }));
 
-  if (parsedMetadata.isBRBOn) {
+  if (isBRBOn) {
     return (
-      <View style={[styles.iconWrapper, iconWrapperStyles]}>
-        <BRBIcon />
+      <View style={[styles.iconWrapper, hmsRoomStyles.iconWrapper]}>
+        <BRBIcon style={hmsRoomStyles.icon} />
       </View>
     );
   }
 
-  if (parsedMetadata.isHandRaised) {
+  if (isHandRaised) {
     return (
-      <View style={[styles.iconWrapper, iconWrapperStyles]}>
-        <HandIcon />
+      <View style={[styles.iconWrapper, hmsRoomStyles.iconWrapper]}>
+        <HandIcon style={hmsRoomStyles.icon} />
       </View>
     );
   }

package/src/components/PeerVideoTile/PeerNameAndNetwork.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, Text, View } from 'react-native';
 import { HMSTrackSource } from '@100mslive/react-native-hms';
 
 import { hexToRgbA } from '../../utils/theme';
-import { NetworkQualityIcon } from '../../Icons';
+import { NetworkQualityIcon, ScreenShareIcon } from '../../Icons';
 import { useHMSRoomStyleSheet } from '../../hooks-util';
 
 export interface PeerNameAndNetworkProps {
@@ -19,11 +19,15 @@ export const PeerNameAndNetwork: React.FC<PeerNameAndNetworkProps> = ({
   trackSource,
   networkQuality,
 }) => {
+  const isScreenTrackSource =
+    trackSource && trackSource === HMSTrackSource.SCREEN;
   const showTrackSource = trackSource && trackSource !== HMSTrackSource.REGULAR;
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
     contentContainer: {
-      backgroundColor: hexToRgbA(theme.palette.background_dim, 0.64),
+      backgroundColor:
+        theme.palette.background_dim &&
+        hexToRgbA(theme.palette.background_dim, 0.64),
     },
     name: {
       color: theme.palette.on_surface_high,
@@ -34,6 +38,10 @@ export const PeerNameAndNetwork: React.FC<PeerNameAndNetworkProps> = ({
   return (
     <View style={styles.container}>
       <View style={[styles.contentContainer, hmsRoomStyles.contentContainer]}>
+        {isScreenTrackSource ? (
+          <ScreenShareIcon style={styles.screenShareIcon} />
+        ) : null}
+
         <Text
           style={[styles.name, hmsRoomStyles.name]}
           numberOfLines={1}
@@ -75,6 +83,11 @@ const styles = StyleSheet.create({
     lineHeight: 20,
     letterSpacing: 0.25,
   },
+  screenShareIcon: {
+    width: 20,
+    height: 20,
+    marginRight: 6,
+  },
   networkIcon: {
     marginLeft: 4,
   },

package/src/components/PeerVideoTile/PeerVideoTileView.tsx

@@ -1,158 +1,232 @@
 import * as React from 'react';
 import { Pressable, StyleSheet, View } from 'react-native';
-import { HMSTrackSource, HMSVideoViewMode } from '@100mslive/react-native-hms';
+import {
+  HMSTrackSource,
+  HMSTrackType,
+  HMSVideoViewMode,
+} from '@100mslive/react-native-hms';
 import type { HMSView } from '@100mslive/react-native-hms';
-import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
 import { useSelector } from 'react-redux';
 
 import { VideoView } from './VideoView';
 import { AvatarView } from './AvatarView';
 import type { RootState } from '../../redux';
 import { PeerMetadata } from './PeerMetadata';
-import { PeerAudioMutedIndicator } from './PeerAudioMutedIndicator';
+import { PeerAudioIndicator } from './PeerAudioIndicator';
 import { PressableIcon } from '../PressableIcon';
 import { ThreeDotsIcon } from '../../Icons';
 import { hexToRgbA } from '../../utils/theme';
 import { PeerNameAndNetwork } from './PeerNameAndNetwork';
 import { UnmountAfterDelay } from '../UnmountAfterDelay';
+import { PipModes } from '../../utils/types';
 import type { PeerTrackNode } from '../../utils/types';
 import { isTileOnSpotlight } from '../../utils/functions';
-import { selectCanPublishTrackForRole } from '../../hooks-sdk-selectors';
-import { useHMSRoomStyle } from '../../hooks-util';
+import {
+  selectAllowedTracksToPublish,
+  selectCanPublishTrackForRole,
+} from '../../hooks-sdk-selectors';
+import { useHMSRoomStyleSheet } from '../../hooks-util';
+import { HMSFullScreenButton } from './HMSFullScreenButton';
 
 export interface PeerVideoTileViewProps {
   peerTrackNode: PeerTrackNode;
-  onMoreOptionsPress(node: PeerTrackNode): void;
+  zoomIn?: boolean;
   insetMode?: boolean;
+  onMoreOptionsPress?: (node: PeerTrackNode) => void;
 }
 
 export const _PeerVideoTileView = React.forwardRef<
   React.ElementRef<typeof HMSView>,
   PeerVideoTileViewProps
->(({ peerTrackNode, onMoreOptionsPress, insetMode = false }, hmsViewRef) => {
-  const unmountAfterDelayRef = React.useRef<React.ElementRef<
-    typeof UnmountAfterDelay
-  > | null>(null);
-  const [mounted, setMounted] = React.useState(true);
-
-  const onSpotlight = useSelector((state: RootState) => {
-    const { onSpotlight } = isTileOnSpotlight(state.user.spotlightTrackId, {
-      tileVideoTrack: peerTrackNode.track,
-      peerRegularAudioTrack: peerTrackNode.peer.audioTrack,
-      peerAuxTracks: peerTrackNode.peer.auxiliaryTracks,
+>(
+  (
+    { peerTrackNode, onMoreOptionsPress, zoomIn, insetMode = false },
+    hmsViewRef
+  ) => {
+    const unmountAfterDelayRef = React.useRef<React.ElementRef<
+      typeof UnmountAfterDelay
+    > | null>(null);
+    const [mounted, setMounted] = React.useState(true);
+
+    const isPipModeActive = useSelector(
+      (state: RootState) => state.app.pipModeStatus === PipModes.ACTIVE
+    );
+
+    const onSpotlight = useSelector((state: RootState) => {
+      const { onSpotlight } = isTileOnSpotlight(state.user.spotlightTrackId, {
+        tileVideoTrack: peerTrackNode.track,
+        peerRegularAudioTrack: peerTrackNode.peer.audioTrack,
+        peerAuxTracks: peerTrackNode.peer.auxiliaryTracks,
+      });
+
+      return onSpotlight;
     });
 
-    return onSpotlight;
-  });
+    const show = () => {
+      setMounted(true);
+      unmountAfterDelayRef.current?.resetTimer();
+    };
 
-  const show = () => {
-    setMounted(true);
-    unmountAfterDelayRef.current?.resetTimer();
-  };
+    const hide = () => {
+      setMounted(false);
+    };
 
-  const hide = () => {
-    setMounted(false);
-  };
+    const handleTilePress = () => {
+      show();
+    };
+
+    const handleOptionsPress = React.useCallback(() => {
+      if (insetMode) {
+        show();
+      }
+      onMoreOptionsPress?.(peerTrackNode);
+    }, [peerTrackNode, onMoreOptionsPress, insetMode]);
+
+    const { peer, track, isDegraded } = peerTrackNode;
+
+    const peerCanPublishAudio = selectCanPublishTrackForRole(
+      peer.role,
+      'audio'
+    );
+    const peerCanPublishVideo = selectCanPublishTrackForRole(
+      peer.role,
+      'video'
+    );
+
+    const allowedToPublish = useSelector((state: RootState) => {
+      const allowed = selectAllowedTracksToPublish(state);
+      return (allowed && allowed.length > 0) ?? false;
+    });
 
-  const handleTilePress = () => {
-    show();
-  };
+    const canTakeActionOnPeer = useSelector((state: RootState) => {
+      if (peer.isLocal) {
+        return true;
+      }
+
+      const permissions = state.hmsStates.localPeer?.role?.permissions;
+      return (
+        permissions &&
+        (permissions.changeRole ||
+          permissions.mute ||
+          permissions.unmute ||
+          permissions.removeOthers)
+      );
+    });
 
-  const handleOptionsPress = React.useCallback(() => {
-    if (insetMode) {
-      show();
-    }
-    onMoreOptionsPress(peerTrackNode);
-  }, [peerTrackNode, onMoreOptionsPress, insetMode]);
-
-  const { peer, track, isDegraded } = peerTrackNode;
-
-  const peerCanPublishAudio = selectCanPublishTrackForRole(peer.role, 'audio');
-  const peerCanPublishVideo = selectCanPublishTrackForRole(peer.role, 'video');
-
-  const iconWrapperStyles = useHMSRoomStyle((theme) => ({
-    backgroundColor: hexToRgbA(theme.palette.background_dim, 0.64),
-  }));
-
-  return (
-    <View style={styles.container}>
-      <AvatarView
-        name={peer.name}
-        videoView={
-          peerCanPublishVideo &&
-          track &&
-          track.trackId &&
-          track.isMute() === false ? (
-            <VideoView
-              ref={hmsViewRef}
-              peer={peer}
-              trackId={track.trackId}
-              isDegraded={isDegraded}
-              overlay={insetMode}
-              scaleType={
-                onSpotlight || track.source !== HMSTrackSource.REGULAR
-                  ? HMSVideoViewMode.ASPECT_FIT
-                  : HMSVideoViewMode.ASPECT_FILL
-              }
-            />
-          ) : null
-        }
-      />
-
-      {/* Handling Peer Metadata */}
-      <PeerMetadata metadata={peer.metadata} />
-
-      {/* Handling Peer Audio Mute indicator */}
-      {peerCanPublishAudio ? (
-        <PeerAudioMutedIndicator isMuted={peer.audioTrack?.isMute()} />
-      ) : null}
-
-      {/* Handling showing Peer name */}
-      {insetMode ? null : (
-        <PeerNameAndNetwork
+    const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+      iconWrapperStyles: {
+        backgroundColor:
+          theme.palette.background_dim &&
+          hexToRgbA(theme.palette.background_dim, 0.64),
+      },
+      avatarContainer: {
+        backgroundColor: theme.palette.surface_default,
+      },
+    }));
+
+    const trackSource = track?.source;
+    const screenShareTile =
+      !!trackSource && trackSource === HMSTrackSource.SCREEN;
+
+    const showingVideoTrack =
+      peerCanPublishVideo &&
+      track &&
+      track.trackId &&
+      track.type === HMSTrackType.VIDEO &&
+      track.isMute() === false;
+
+    const hide3DotsButton =
+      !onMoreOptionsPress || // If button press handler is not available, Or
+      isPipModeActive || // If Pip Window is active, Or
+      (track && track?.source !== HMSTrackSource.REGULAR) || // If track is non-regular, like screen share, Or
+      !canTakeActionOnPeer || // If local peer can't take action on peer, Or
+      !allowedToPublish; // If local peer can't publish tracks
+
+    return (
+      <View style={styles.container}>
+        <AvatarView
           name={peer.name}
-          isLocal={peer.isLocal}
-          trackSource={track?.source}
-          networkQuality={peer.networkQuality?.downlinkQuality}
+          avatarContainerStyles={
+            insetMode ? hmsRoomStyles.avatarContainer : null
+          }
+          isInset={insetMode || isPipModeActive}
+          videoView={
+            showingVideoTrack ? (
+              <VideoView
+                ref={hmsViewRef}
+                peer={peer}
+                zoomIn={zoomIn}
+                trackId={track.trackId}
+                isDegraded={isDegraded}
+                overlay={insetMode}
+                scaleType={
+                  onSpotlight || track.source !== HMSTrackSource.REGULAR
+                    ? HMSVideoViewMode.ASPECT_FIT
+                    : HMSVideoViewMode.ASPECT_FILL
+                }
+              />
+            ) : null
+          }
         />
-      )}
-
-      {/* Handling press on this View, currently we make 3 dots visible when pressed */}
-      {insetMode ? (
-        <Pressable style={styles.pressable} onPress={handleTilePress} />
-      ) : null}
-
-      {/* 3 dots option menu */}
-      {insetMode ? (
-        <UnmountAfterDelay
-          ref={unmountAfterDelayRef}
-          visible={mounted}
-          onUnmount={hide}
-        >
-          <Animated.View entering={FadeIn} exiting={FadeOut}>
+
+        {/* Handling Peer Metadata */}
+        <PeerMetadata
+          metadata={peer.metadata}
+          isHandRaised={peer.isHandRaised}
+        />
+
+        {/* Handling Peer Audio Mute indicator */}
+        {screenShareTile && showingVideoTrack ? (
+          <HMSFullScreenButton peerTrackNode={peerTrackNode} />
+        ) : peerCanPublishAudio ? (
+          <PeerAudioIndicator isMuted={peer.audioTrack?.isMute()} peer={peer} />
+        ) : null}
+
+        {/* Handling showing Peer name */}
+        {(insetMode || isPipModeActive) ? null : (
+          <PeerNameAndNetwork
+            name={peer.name}
+            isLocal={peer.isLocal}
+            trackSource={trackSource}
+            networkQuality={peer.networkQuality?.downlinkQuality}
+          />
+        )}
+
+        {/* Handling press on this View, currently we make 3 dots visible when pressed */}
+        {insetMode ? (
+          <Pressable style={styles.pressable} onPress={handleTilePress} />
+        ) : null}
+
+        {/* 3 dots option menu */}
+        {hide3DotsButton ? null : insetMode ? (
+          <UnmountAfterDelay
+            ref={unmountAfterDelayRef}
+            visible={mounted}
+            onUnmount={hide}
+          >
             <PressableIcon
               activeOpacity={0.7}
-              style={[styles.iconWrapper, iconWrapperStyles]}
+              style={[styles.iconWrapper, hmsRoomStyles.iconWrapperStyles]}
               border={false}
               onPress={handleOptionsPress}
             >
               <ThreeDotsIcon stack="vertical" style={styles.icon} />
             </PressableIcon>
-          </Animated.View>
-        </UnmountAfterDelay>
-      ) : (
-        <PressableIcon
-          activeOpacity={0.7}
-          style={[styles.iconWrapper, iconWrapperStyles]}
-          border={false}
-          onPress={handleOptionsPress}
-        >
-          <ThreeDotsIcon stack="vertical" style={styles.icon} />
-        </PressableIcon>
-      )}
-    </View>
-  );
-});
+          </UnmountAfterDelay>
+        ) : (
+          <PressableIcon
+            activeOpacity={0.7}
+            style={[styles.iconWrapper, hmsRoomStyles.iconWrapperStyles]}
+            border={false}
+            onPress={handleOptionsPress}
+          >
+            <ThreeDotsIcon stack="vertical" style={styles.icon} />
+          </PressableIcon>
+        )}
+      </View>
+    );
+  }
+);
 
 const styles = StyleSheet.create({
   container: {

package/src/components/PeerVideoTile/VideoView.tsx

@@ -7,13 +7,17 @@ import type {
   HMSPeer,
 } from '@100mslive/react-native-hms';
 import { useSelector } from 'react-redux';
+import { BlurView } from '@react-native-community/blur';
 
 import type { RootState } from '../../redux';
 import { useHMSRoomStyleSheet } from '../../hooks-util';
+import { HMSPinchGesture } from './HMSPinchGesture';
+import { AlertTriangleIcon } from '../../Icons';
 
 export interface VideoViewProps {
   trackId: string;
   peer: HMSPeer;
+  zoomIn?: boolean;
   overlay?: boolean;
   isDegraded?: boolean;
   scaleType?: HMSVideoViewMode;
@@ -25,7 +29,15 @@ const _VideoView = React.forwardRef<
   VideoViewProps
 >(
   (
-    { trackId, peer, overlay, isDegraded, scaleType, containerStyle },
+    {
+      trackId,
+      peer,
+      overlay,
+      isDegraded,
+      scaleType,
+      containerStyle,
+      zoomIn = false,
+    },
     hmsViewRef
   ) => {
     const HmsView = useSelector(
@@ -43,7 +55,10 @@ const _VideoView = React.forwardRef<
       },
       degradedText: {
         color: theme.palette.on_surface_high,
-        fontFamily: `${typography.font_family}-SemiBold`,
+        fontFamily: `${typography.font_family}-Regular`,
+      },
+      icon: {
+        tintColor: theme.palette.on_surface_high,
       },
     }));
 
@@ -51,7 +66,7 @@ const _VideoView = React.forwardRef<
       return null;
     }
 
-    return (
+    const videoView = (
       <View style={[styles.container, containerStyle]}>
         <HmsView
           ref={hmsViewRef}
@@ -63,11 +78,33 @@ const _VideoView = React.forwardRef<
           scaleType={scaleType}
           style={styles.hmsView}
         />
+      </View>
+    );
+
+    return (
+      <View style={styles.container}>
+        {zoomIn ? (
+          <HMSPinchGesture style={styles.container}>
+            {videoView}
+          </HMSPinchGesture>
+        ) : (
+          videoView
+        )}
 
         {isDegraded ? (
-          <View style={[styles.degradedView, hmsRoomStyles.degradedView]}>
-            <Text style={[styles.degradedText, hmsRoomStyles.degradedText]}>
-              Degraded
+          <View style={styles.degradedView}>
+            <BlurView style={styles.blurView} blurType="dark" blurAmount={24} />
+
+            <AlertTriangleIcon
+              type="fill"
+              style={[styles.icon, hmsRoomStyles.icon]}
+            />
+
+            <Text
+              numberOfLines={2}
+              style={[styles.degradedText, hmsRoomStyles.degradedText]}
+            >
+              {peer.isLocal ? 'Your' : `${peer.name}'s`} network is unstable
             </Text>
           </View>
         ) : null}
@@ -94,10 +131,23 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  blurView: {
+    flex: 1,
+    position: 'absolute',
+    height: '100%',
+    width: '100%',
+  },
   degradedText: {
-    fontSize: 15,
-    lineHeight: 20,
-    letterSpacing: 0.25,
+    fontSize: 12,
+    lineHeight: 16,
+    letterSpacing: 0.4,
+    marginTop: 8,
+    textAlign: 'center',
+    paddingHorizontal: 8,
+  },
+  icon: {
+    width: 32,
+    height: 32,
   },
 });