@100mslive/react-native-room-kit 0.0.3 → 0.1.0

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

@@ -1,12 +1,17 @@
-import React, { useEffect } from 'react';
-import { StyleSheet, View } from 'react-native';
-import { AvoidSoftInput } from 'react-native-avoid-softinput';
-import { useSelector } from 'react-redux';
+import React from 'react';
+import {
+  Keyboard,
+  StyleSheet,
+  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';
 
-import { COLORS } from '../utils/theme';
-
 import { BackButton } from './BackButton';
 import { HMSManageCameraRotation } from './HMSManageCameraRotation';
 import { HMSManageLocalAudio } from './HMSManageLocalAudio';
@@ -17,9 +22,25 @@ import { HMSPreviewPeersList } from './HMSPreviewPeersList';
 import { HMSPreviewSubtitle } from './HMSPreviewSubtitle';
 import { HMSPreviewTile } from './HMSPreviewTile';
 import { HMSPreviewTitle } from './HMSPreviewTitle';
-import { HMSSpeakerSettings } from './HMSSpeakerSettings';
-import { GenericLogoIcon, NetworkQualityIcon } from '../Icons';
-import type { RootState } from '../redux';
+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;
+
+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 = ({
   join,
@@ -28,114 +49,98 @@ export const Preview = ({
   join(): void;
   loadingButtonState: boolean;
 }) => {
-  const localPeerNetworkQuality = useSelector(
-    (state: RootState) =>
-      state.hmsStates.localPeer?.networkQuality?.downlinkQuality
+  const canPublishVideo = useCanPublishVideo();
+  const animatedKeyboard = useAnimatedKeyboard();
+
+  const keyboardAvoidStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateY: -animatedKeyboard.height.value }],
+    };
+  });
+
+  const hmsRoomStyles = useHMSRoomStyleSheet(
+    (theme) => ({
+      container: {
+        backgroundColor: theme.palette.background_dim,
+      },
+      footer: {
+        backgroundColor: theme.palette.background_default,
+      },
+    }),
+    []
   );
 
-  useEffect(() => {
-    AvoidSoftInput.setAdjustNothing();
-    AvoidSoftInput.setEnabled(true);
-
-    return () => AvoidSoftInput.setEnabled(false);
-  }, []);
-
   return (
-    <View style={styles.container}>
-      <HMSPreviewTile />
-
-      <LinearGradient
-        colors={[
-          '#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)',
-        ]}
-        locations={[0.45, 0.55, 0.7, 0.9, 0.95, 1]}
-        style={{
-          position: 'absolute',
-          top: 0,
-          width: '100%',
-          height: 260,
-        }}
-      />
-
-      <SafeAreaView
-        style={{ position: 'absolute', top: 0, width: '100%', marginTop: 24 }}
-        edges={['top', 'left', 'right']}
-        mode="margin"
-      >
-        <GenericLogoIcon style={{ alignSelf: 'center', marginBottom: 16 }} />
-
-        <HMSPreviewTitle />
-
-        <HMSPreviewSubtitle />
-
-        <HMSPreviewPeersList />
-      </SafeAreaView>
-
-      <SafeAreaView
-        style={{ position: 'absolute', top: 0 }}
-        edges={['top']}
-        mode="margin"
-      >
-        <BackButton />
-      </SafeAreaView>
-
-      <View
-        style={{
-          position: 'absolute',
-          bottom: 0,
-          width: '100%',
-        }}
-      >
-        <View
-          style={{
-            marginLeft: 8,
-            marginBottom: 8,
-            borderRadius: 8,
-            paddingVertical: 4,
-            paddingHorizontal: 8,
-            backgroundColor: COLORS.BACKGROUND.DIM_80,
-            alignSelf: 'flex-start',
-          }}
+    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+      <View style={[styles.container, hmsRoomStyles.container]}>
+        {canPublishVideo ? <HMSPreviewTile /> : null}
+
+        {canPublishVideo ? (
+          <LinearGradient
+            colors={gradientColorShades}
+            locations={gradientColorShadeLocations}
+            style={styles.headerGradient}
+          />
+        ) : null}
+
+        <SafeAreaView
+          style={canPublishVideo ? styles.header : null}
+          edges={headerEdges}
+          mode="margin"
         >
-          <NetworkQualityIcon quality={localPeerNetworkQuality} />
-        </View>
+          <CompanyLogo style={styles.logo} />
+
+          <HMSPreviewTitle />
+
+          <HMSPreviewSubtitle />
+
+          <View style={styles.peerListWrapper}>
+            <HMSPreviewHLSLiveIndicator />
 
-        <View
-          style={{
-            flex: 1,
-            backgroundColor: COLORS.BACKGROUND.DEFAULT,
-            borderTopLeftRadius: 16,
-            borderTopRightRadius: 16,
-            padding: 16,
-          }}
+            <HMSPreviewPeersList />
+          </View>
+        </SafeAreaView>
+
+        <SafeAreaView
+          style={styles.backButtonContainer}
+          edges={backButtonEdges}
+          mode="margin"
         >
-          <View style={styles.controlsContainer}>
-            <View style={styles.micAndCameraControls}>
-              <HMSManageLocalAudio />
+          <BackButton />
+        </SafeAreaView>
+
+        <View style={styles.footerWrapper}>
+          <HMSPreviewNetworkQuality />
 
-              <View style={styles.manageLocalVideoWrapper}>
-                <HMSManageLocalVideo />
+          <Animated.View
+            style={[styles.footer, hmsRoomStyles.footer, keyboardAvoidStyle]}
+          >
+            <View style={styles.controlsContainer}>
+              <View style={styles.micAndCameraControls}>
+                <HMSManageLocalAudio />
+
+                <View style={styles.manageLocalVideoWrapper}>
+                  <HMSManageLocalVideo />
+                </View>
+
+                <HMSManageCameraRotation />
               </View>
 
-              <HMSManageCameraRotation />
+              <HMSManageAudioOutput />
             </View>
 
-            <HMSSpeakerSettings />
-          </View>
-
-          <View style={styles.joinButtonRow}>
-            <HMSPreviewEditName />
+            <View style={styles.joinButtonRow}>
+              <HMSPreviewEditName />
 
-            <HMSPreviewJoinButton onJoin={join} loading={loadingButtonState} />
-          </View>
+              <HMSPreviewJoinButton
+                onJoin={join}
+                loading={loadingButtonState}
+              />
+            </View>
+          </Animated.View>
         </View>
       </View>
-    </View>
+    </TouchableWithoutFeedback>
   );
 };
 
@@ -143,13 +148,37 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     position: 'relative',
-    backgroundColor: COLORS.BACKGROUND.DIM,
+    justifyContent: 'center',
+  },
+  header: {
+    position: 'absolute',
+    top: 0,
+    width: '100%',
+    marginTop: 24,
+    zIndex: 20,
+    alignItems: 'center',
+  },
+  headerGradient: {
+    position: 'absolute',
+    top: 0,
+    width: '100%',
+    height: 260,
+    zIndex: 10,
+  },
+  logo: {
+    alignSelf: 'center',
+    marginBottom: 16,
   },
   controlsContainer: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
   },
+  peerListWrapper: {
+    flexDirection: 'row',
+    marginTop: 16,
+    alignSelf: 'center',
+  },
   micAndCameraControls: {
     flexDirection: 'row',
   },
@@ -160,4 +189,21 @@ const styles = StyleSheet.create({
     marginVertical: 16,
     flexDirection: 'row',
   },
+  backButtonContainer: {
+    position: 'absolute',
+    top: 0,
+    zIndex: 40,
+  },
+  footerWrapper: {
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+    zIndex: 30,
+  },
+  footer: {
+    flex: 1,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    padding: 16,
+  },
 });