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

package/src/components/PeerVideoTile/AvatarView.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { PersonIcon } from '../../Icons';
+import { getInitials } from '../../utils/functions';
+import { COLORS } from '../../utils/theme';
+import type { VideoView } from './VideoView';
+import { useHMSRoomStyleSheet } from '../../hooks-util';
+
+export interface AvatarViewProps {
+  name: string;
+  videoView: React.ReactElement<typeof VideoView> | null;
+}
+
+export const _AvatarView: React.FC<AvatarViewProps> = ({ name, videoView }) => {
+  const showInitials = !!name && name.length > 0;
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    avatarContainer: {
+      backgroundColor: theme.palette.surface_default,
+    },
+    avatar: {
+      backgroundColor: COLORS.EXTENDED.PURPLE,
+    },
+    avatarText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+  }));
+
+  return (
+    <View style={styles.container}>
+      {videoView || (
+        <View style={[styles.avatarContainer, hmsRoomStyles.avatarContainer]}>
+          <View style={[styles.avatar, hmsRoomStyles.avatar]}>
+            {showInitials ? (
+              <Text style={[styles.avatarText, hmsRoomStyles.avatarText]}>
+                {getInitials(name)}
+              </Text>
+            ) : (
+              <PersonIcon style={styles.avatarIcon} />
+            )}
+          </View>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    position: 'relative',
+    overflow: 'hidden',
+  },
+  avatarContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  avatar: {
+    width: 88,
+    aspectRatio: 1,
+    borderRadius: 44,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  avatarIcon: {
+    width: 40,
+    height: 40,
+  },
+  avatarText: {
+    fontSize: 34,
+    lineHeight: 40,
+    letterSpacing: 0.25,
+  },
+});
+
+export const AvatarView = React.memo(_AvatarView);

package/src/components/PeerVideoTile/PeerAudioMutedIndicator.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { MicIcon } from '../../Icons';
+import { useHMSRoomStyle } from '../../hooks-util';
+
+export interface PeerAudioMutedIndicatorProps {
+  isMuted: boolean | undefined;
+}
+
+export const PeerAudioMutedIndicator: React.FC<
+  PeerAudioMutedIndicatorProps
+> = ({ isMuted }) => {
+  const iconWrapperStyles = useHMSRoomStyle((theme) => ({
+    backgroundColor: theme.palette.secondary_dim,
+  }));
+
+  if (isMuted) {
+    return (
+      <View style={[styles.iconWrapper, iconWrapperStyles]}>
+        <MicIcon muted={true} style={styles.icon} />
+      </View>
+    );
+  }
+
+  return null;
+};
+
+const styles = StyleSheet.create({
+  iconWrapper: {
+    position: 'absolute',
+    top: 8,
+    right: 8,
+    padding: 8,
+    borderRadius: 16,
+  },
+  icon: {
+    width: 16,
+    height: 16,
+  },
+});

package/src/components/PeerVideoTile/PeerMetadata.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { parseMetadata } from '../../utils/functions';
+import { BRBIcon, HandIcon } from '../../Icons';
+import { useHMSRoomStyle } from '../../hooks-util';
+
+export interface PeerMetadataProps {
+  metadata: string | undefined;
+}
+
+export const PeerMetadata: React.FC<PeerMetadataProps> = ({ metadata }) => {
+  const parsedMetadata = parseMetadata(metadata);
+
+  const iconWrapperStyles = useHMSRoomStyle((theme) => ({
+    backgroundColor: theme.palette.secondary_dim,
+  }));
+
+  if (parsedMetadata.isBRBOn) {
+    return (
+      <View style={[styles.iconWrapper, iconWrapperStyles]}>
+        <BRBIcon />
+      </View>
+    );
+  }
+
+  if (parsedMetadata.isHandRaised) {
+    return (
+      <View style={[styles.iconWrapper, iconWrapperStyles]}>
+        <HandIcon />
+      </View>
+    );
+  }
+
+  return null;
+};
+
+const styles = StyleSheet.create({
+  iconWrapper: {
+    position: 'absolute',
+    top: 8,
+    left: 8,
+    padding: 4,
+    borderRadius: 16,
+  },
+});

package/src/components/PeerVideoTile/PeerNameAndNetwork.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { HMSTrackSource } from '@100mslive/react-native-hms';
+
+import { hexToRgbA } from '../../utils/theme';
+import { NetworkQualityIcon } from '../../Icons';
+import { useHMSRoomStyleSheet } from '../../hooks-util';
+
+export interface PeerNameAndNetworkProps {
+  name: string;
+  isLocal: boolean | undefined;
+  trackSource: HMSTrackSource | undefined;
+  networkQuality: number | undefined;
+}
+
+export const PeerNameAndNetwork: React.FC<PeerNameAndNetworkProps> = ({
+  name,
+  isLocal,
+  trackSource,
+  networkQuality,
+}) => {
+  const showTrackSource = trackSource && trackSource !== HMSTrackSource.REGULAR;
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    contentContainer: {
+      backgroundColor: hexToRgbA(theme.palette.background_dim, 0.64),
+    },
+    name: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+  }));
+
+  return (
+    <View style={styles.container}>
+      <View style={[styles.contentContainer, hmsRoomStyles.contentContainer]}>
+        <Text
+          style={[styles.name, hmsRoomStyles.name]}
+          numberOfLines={1}
+          ellipsizeMode={showTrackSource ? 'middle' : 'tail'}
+        >
+          {name}
+          {isLocal ? ' (You)' : ''}
+          {showTrackSource ? `'s ${trackSource}` : ''}
+        </Text>
+
+        <NetworkQualityIcon
+          quality={networkQuality}
+          style={styles.networkIcon}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    bottom: 8,
+    width: '100%',
+    flexDirection: 'row',
+  },
+  contentContainer: {
+    flexDirection: 'row',
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+    borderRadius: 8,
+    marginLeft: 8, // left offset
+    marginRight: 20 + 4 + 44, // network icon width + network icon left margin + 3 dots button width and horizontal margins
+  },
+  name: {
+    flexGrow: 1,
+    flexShrink: 1,
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.25,
+  },
+  networkIcon: {
+    marginLeft: 4,
+  },
+});

package/src/components/PeerVideoTile/PeerVideoTileView.tsx

@@ -0,0 +1,180 @@
+import * as React from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { HMSTrackSource, 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 { PressableIcon } from '../PressableIcon';
+import { ThreeDotsIcon } from '../../Icons';
+import { hexToRgbA } from '../../utils/theme';
+import { PeerNameAndNetwork } from './PeerNameAndNetwork';
+import { UnmountAfterDelay } from '../UnmountAfterDelay';
+import type { PeerTrackNode } from '../../utils/types';
+import { isTileOnSpotlight } from '../../utils/functions';
+import { selectCanPublishTrackForRole } from '../../hooks-sdk-selectors';
+import { useHMSRoomStyle } from '../../hooks-util';
+
+export interface PeerVideoTileViewProps {
+  peerTrackNode: PeerTrackNode;
+  onMoreOptionsPress(node: PeerTrackNode): void;
+  insetMode?: boolean;
+}
+
+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,
+    });
+
+    return onSpotlight;
+  });
+
+  const show = () => {
+    setMounted(true);
+    unmountAfterDelayRef.current?.resetTimer();
+  };
+
+  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 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
+          name={peer.name}
+          isLocal={peer.isLocal}
+          trackSource={track?.source}
+          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 */}
+      {insetMode ? (
+        <UnmountAfterDelay
+          ref={unmountAfterDelayRef}
+          visible={mounted}
+          onUnmount={hide}
+        >
+          <Animated.View entering={FadeIn} exiting={FadeOut}>
+            <PressableIcon
+              activeOpacity={0.7}
+              style={[styles.iconWrapper, 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>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    position: 'relative',
+  },
+  iconWrapper: {
+    position: 'absolute',
+    bottom: 8,
+    right: 8,
+    padding: 4,
+    borderRadius: 8,
+  },
+  icon: {
+    width: 20,
+    height: 20,
+  },
+  pressable: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+  },
+});
+
+export const PeerVideoTileView = React.memo(_PeerVideoTileView);

package/src/components/PeerVideoTile/VideoView.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type {
+  HMSVideoViewMode,
+  HMSView,
+  HMSPeer,
+} from '@100mslive/react-native-hms';
+import { useSelector } from 'react-redux';
+
+import type { RootState } from '../../redux';
+import { useHMSRoomStyleSheet } from '../../hooks-util';
+
+export interface VideoViewProps {
+  trackId: string;
+  peer: HMSPeer;
+  overlay?: boolean;
+  isDegraded?: boolean;
+  scaleType?: HMSVideoViewMode;
+  containerStyle?: StyleProp<ViewStyle>;
+}
+
+const _VideoView = React.forwardRef<
+  React.ElementRef<typeof HMSView>,
+  VideoViewProps
+>(
+  (
+    { trackId, peer, overlay, isDegraded, scaleType, containerStyle },
+    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 hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+      degradedView: {
+        backgroundColor: theme.palette.surface_default,
+      },
+      degradedText: {
+        color: theme.palette.on_surface_high,
+        fontFamily: `${typography.font_family}-SemiBold`,
+      },
+    }));
+
+    if (!HmsView) {
+      return null;
+    }
+
+    return (
+      <View style={[styles.container, containerStyle]}>
+        <HmsView
+          ref={hmsViewRef}
+          setZOrderMediaOverlay={overlay}
+          trackId={trackId}
+          key={trackId}
+          autoSimulcast={autoSimulcast}
+          mirror={peer.isLocal ? mirrorCamera : false}
+          scaleType={scaleType}
+          style={styles.hmsView}
+        />
+
+        {isDegraded ? (
+          <View style={[styles.degradedView, hmsRoomStyles.degradedView]}>
+            <Text style={[styles.degradedText, hmsRoomStyles.degradedText]}>
+              Degraded
+            </Text>
+          </View>
+        ) : null}
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  hmsView: {
+    flex: 1,
+    // height: '100%',
+    // width: '100%',
+  },
+  degradedView: {
+    flex: 1,
+    position: 'absolute',
+    height: '100%',
+    width: '100%',
+    zIndex: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  degradedText: {
+    fontSize: 15,
+    lineHeight: 20,
+    letterSpacing: 0.25,
+  },
+});
+
+export const VideoView = React.memo(_VideoView);

package/src/components/PressableIcon.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { StyleSheet, TouchableOpacity } from 'react-native';
 import type { TouchableOpacityProps } from 'react-native';
 
-import { COLORS } from '../utils/theme';
+import { useHMSRoomStyleSheet } from '../hooks-util';
 
 interface PressableIconProps extends Omit<TouchableOpacityProps, 'children'> {
   children: Pick<TouchableOpacityProps, 'children'>;
@@ -19,14 +19,26 @@ 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,
+    },
+  }));
+
   return (
     <TouchableOpacity
       style={[
         styles.pressable,
         {
           borderRadius: rounded ? 20 : undefined,
-          ...(border ? styles.withBorder : undefined),
-          ...(active ? styles.active : undefined),
+          ...(border
+            ? { ...styles.withBorder, ...hmsRoomStyles.border }
+            : undefined),
+          ...(active ? hmsRoomStyles.active : undefined),
         },
         style,
       ]}
@@ -44,11 +56,6 @@ const styles = StyleSheet.create({
   },
   withBorder: {
     borderRadius: 8,
-    borderColor: COLORS.BORDER.BRIGHT,
     borderWidth: 1,
   },
-  active: {
-    backgroundColor: COLORS.SECONDARY.DIM,
-    borderColor: COLORS.SECONDARY.DIM,
-  },
 });

package/src/components/Preview.tsx

@@ -12,8 +12,6 @@ import Animated, {
 import { SafeAreaView } from 'react-native-safe-area-context';
 import LinearGradient from 'react-native-linear-gradient';
 
-import { COLORS } from '../utils/theme';
-
 import { BackButton } from './BackButton';
 import { HMSManageCameraRotation } from './HMSManageCameraRotation';
 import { HMSManageLocalAudio } from './HMSManageLocalAudio';
@@ -28,6 +26,8 @@ import { HMSManageAudioOutput } from './HMSManageAudioOutput';
 import { HMSPreviewNetworkQuality } from './HMSPreviewNetworkQuality';
 import { useCanPublishVideo } from '../hooks-sdk';
 import { HMSPreviewHLSLiveIndicator } from './HMSPreviewHLSLiveIndicator';
+import { CompanyLogo } from './CompanyLogo';
+import { useHMSRoomStyleSheet } from '../hooks-util';
 
 const backButtonEdges = ['top'] as const;
 const headerEdges = ['top', 'left', 'right'] as const;
@@ -58,9 +58,21 @@ export const Preview = ({
     };
   });
 
+  const hmsRoomStyles = useHMSRoomStyleSheet(
+    (theme) => ({
+      container: {
+        backgroundColor: theme.palette.background_dim,
+      },
+      footer: {
+        backgroundColor: theme.palette.background_default,
+      },
+    }),
+    []
+  );
+
   return (
     <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-      <View style={styles.container}>
+      <View style={[styles.container, hmsRoomStyles.container]}>
         {canPublishVideo ? <HMSPreviewTile /> : null}
 
         {canPublishVideo ? (
@@ -76,6 +88,8 @@ export const Preview = ({
           edges={headerEdges}
           mode="margin"
         >
+          <CompanyLogo style={styles.logo} />
+
           <HMSPreviewTitle />
 
           <HMSPreviewSubtitle />
@@ -98,7 +112,9 @@ export const Preview = ({
         <View style={styles.footerWrapper}>
           <HMSPreviewNetworkQuality />
 
-          <Animated.View style={[styles.footer, keyboardAvoidStyle]}>
+          <Animated.View
+            style={[styles.footer, hmsRoomStyles.footer, keyboardAvoidStyle]}
+          >
             <View style={styles.controlsContainer}>
               <View style={styles.micAndCameraControls}>
                 <HMSManageLocalAudio />
@@ -132,7 +148,6 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     position: 'relative',
-    backgroundColor: COLORS.BACKGROUND.DIM,
     justifyContent: 'center',
   },
   header: {
@@ -150,6 +165,10 @@ const styles = StyleSheet.create({
     height: 260,
     zIndex: 10,
   },
+  logo: {
+    alignSelf: 'center',
+    marginBottom: 16,
+  },
   controlsContainer: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -183,7 +202,6 @@ const styles = StyleSheet.create({
   },
   footer: {
     flex: 1,
-    backgroundColor: COLORS.BACKGROUND.DEFAULT,
     borderTopLeftRadius: 16,
     borderTopRightRadius: 16,
     padding: 16,