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

package/src/components/PeerVideoTile/HMSPinchGesture.tsx

@@ -0,0 +1,176 @@
+import * as React from 'react';
+import type { LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+
+export interface HMSPinchGestureProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+export const HMSPinchGesture: React.FC<HMSPinchGestureProps> = ({
+  children,
+  style,
+}) => {
+  /**
+   * - Dimensions of Animated View
+   * This will be used to apply transformations as per width and height of Animated Views
+   */
+  const dimensions = useSharedValue({ width: 0, height: 0 });
+
+  /**
+   * - Tracking number of active pointers in pinch gesture
+   * "Focal point" is used as an origin point for scaling the view
+   * when active number of pointers change, focal point is also changed causing a flicker effect
+   *
+   * To remove flicker effect, when `numberOfPointers` change, we calculate the amount of change in focal point
+   * and use the `(new focal point) + (amount of change in focal point)` to apply transformations
+   */
+  const numberOfPointers = useSharedValue(0);
+
+  /**
+   * - Current focal point to apply scaling
+   * "Focal point" is used as an origin point for scaling the view
+   * > We transform the "center of View" to the "focal point", "apply scaling" and then "undo the transformation"
+   */
+  const focalPoint = useSharedValue({ x: 0, y: 0 });
+
+  const adjustedFocalPoint = useSharedValue({ x: 0, y: 0 });
+
+  /**
+   * - focal point captured at the start of the pinch gesture
+   * We use this point to calculate the amount of translation of focal point
+   * `
+   * translation = (current focal point) - (focal point at the start of the gesture)
+   * `
+   * then translation value is amount of swipe(pan) gesture user has applied while scaling
+   * we can use this calculated value as a translation value, similar to what we get in `pan gesture`
+   */
+  const focalPointAtStart = useSharedValue({ x: 0, y: 0 });
+
+  /**
+   * - x,y coords representing the amount by which focal point shifted due to change in `numberOfPointers`
+   * e.g. focal point when `numberOfPointers = 2`            - (20, 100)
+   *      focal point when `numberOfPointers` reduced to `1` - (40, 300)
+   *
+   *      focal point got shifted by `20` points on x-axis and `200` points on y-axis. Thus, `focalShift = (20, 200)`
+   *
+   * Usage: TODO
+   */
+  const focalShift = useSharedValue({ x: 0, y: 0 });
+
+  const scale = useSharedValue(1);
+  const savedScale = useSharedValue(1);
+  const translation = useSharedValue({ x: 0, y: 0 });
+  const savedTranslation = useSharedValue({ x: 0, y: 0 });
+
+  const handleLayoutChange = React.useCallback(
+    ({ nativeEvent }: LayoutChangeEvent) => {
+      dimensions.value = {
+        width: nativeEvent.layout.width,
+        height: nativeEvent.layout.height,
+      };
+    },
+    []
+  );
+
+  const panGesture = Gesture.Pan()
+    .maxPointers(1)
+    .onUpdate((e) => {
+      translation.value = {
+        x: e.translationX + savedTranslation.value.x,
+        y: e.translationY + savedTranslation.value.y,
+      };
+    })
+    .onEnd(() => {
+      savedTranslation.value = translation.value;
+    });
+
+  const pinchGesture = Gesture.Pinch()
+    .onStart((e) => {
+      numberOfPointers.value = e.numberOfPointers;
+      focalPointAtStart.value = { x: e.focalX, y: e.focalY };
+
+      adjustedFocalPoint.value = {
+        x: e.focalX - focalShift.value.x, // subtracting "focal point shift" value from "current focal point", we will get "focal point before the shift", and apply transformations on the that focal point
+        y: e.focalY - focalShift.value.y, // subtracting "focal point shift" value from "current focal point", we will get "focal point before the shift", and apply transformations on the that focal point
+      };
+    })
+    .onUpdate((e) => {
+      // Calculating `focal point` shift values when `numberOfPointers` changes
+      if (numberOfPointers.value !== e.numberOfPointers) {
+        numberOfPointers.value = e.numberOfPointers;
+
+        focalShift.value = {
+          x: e.focalX - (focalPoint.value.x - focalShift.value.x),
+          y: e.focalY - (focalPoint.value.y - focalShift.value.y),
+        };
+      }
+
+      adjustedFocalPoint.value = {
+        x: e.focalX - focalShift.value.x, // subtracting "focal point shift" value from "current focal point", we will get "focal point before the shift", and apply transformations on the that focal point
+        y: e.focalY - focalShift.value.y, // subtracting "focal point shift" value from "current focal point", we will get "focal point before the shift", and apply transformations on the that focal point
+      };
+
+      // Applying translations
+      translation.value = {
+        x:
+          adjustedFocalPoint.value.x -
+          focalPointAtStart.value.x + // subtracting "focal point position capturred at start of gesture" from "adjusted focal point position" we will get the translation value
+          savedTranslation.value.x, // Adding current translation to previous Translation to make it a continuous gesture
+        y:
+          adjustedFocalPoint.value.y -
+          focalPointAtStart.value.y + // subtracting "focal point position capturred at start of gesture" from "adjusted focal point position" we will get the translation value
+          savedTranslation.value.y, // Adding current translation to previous Translation to make it a continuous gesture
+      };
+
+      // saving focal point to apply scaling on correct position
+      focalPoint.value = { x: e.focalX, y: e.focalY };
+      scale.value = Math.min(Math.max(savedScale.value * e.scale, 0.94), 5.2);
+    })
+    .onEnd(() => {
+      if (scale.value < 1) {
+        scale.value = withSpring(1, { damping: 100, stiffness: 200 });
+        savedScale.value = 1;
+        translation.value = { x: 0, y: 0 };
+      } else if (scale.value > 5) {
+        scale.value = withSpring(5, { damping: 100, stiffness: 200 });
+        savedScale.value = 5;
+      } else {
+        savedScale.value = scale.value;
+      }
+
+      focalShift.value = { x: 0, y: 0 };
+      savedTranslation.value = translation.value;
+    });
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: translation.value.x },
+      { translateY: translation.value.y },
+      { translateX: focalPointAtStart.value.x - dimensions.value.width / 2 },
+      { translateY: focalPointAtStart.value.y - dimensions.value.height / 2 },
+      { scale: scale.value },
+      { translateX: -(focalPointAtStart.value.x - dimensions.value.width / 2) },
+      {
+        translateY: -(focalPointAtStart.value.y - dimensions.value.height / 2),
+      },
+    ],
+  }));
+
+  return (
+    <GestureDetector gesture={Gesture.Exclusive(panGesture, pinchGesture)}>
+      <Animated.View style={{ flex: 1 }}>
+        <Animated.View
+          onLayout={handleLayoutChange}
+          style={[style, animatedStyle]}
+        >
+          {children}
+        </Animated.View>
+      </Animated.View>
+    </GestureDetector>
+  );
+};

package/src/components/PeerVideoTile/PeerAudioIndicator.tsx

@@ -0,0 +1,78 @@
+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 { useHMSRoomStyle } 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 iconWrapperStyles = useHMSRoomStyle((theme) => ({
+    backgroundColor: theme.palette.secondary_dim,
+  }));
+
+  if (isMuted) {
+    return (
+      <View style={[styles.iconWrapper, iconWrapperStyles]}>
+        <MicIcon muted={true} style={styles.icon} />
+      </View>
+    );
+  }
+
+  if (activeSpeaker) {
+    return (
+      <View style={[styles.speakerIconWrapper, iconWrapperStyles]}>
+        <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/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,15 +1,18 @@
 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';
@@ -17,142 +20,196 @@ 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';
+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 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 localPeerPermissions = useSelector((state: RootState) => {
+      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;
+
+    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}
+          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} />
+
+        {/* Handling Peer Audio Mute indicator */}
+        {screenShareTile && showingVideoTrack ? (
+          <HMSFullScreenButton peerTrackNode={peerTrackNode} />
+        ) : peerCanPublishAudio ? (
+          <PeerAudioIndicator isMuted={peer.audioTrack?.isMute()} peer={peer} />
+        ) : null}
+
+        {/* Handling showing Peer name */}
+        {insetMode ? 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 */}
+        {!onMoreOptionsPress ||
+        (track &&
+          track?.source !== HMSTrackSource.REGULAR) ? 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>
+        ) : !allowedToPublish || !localPeerPermissions ? null : (
+          <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: {