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

package/src/components/DisplayView.tsx

@@ -0,0 +1,314 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { View, Text, InteractionManager } from 'react-native';
+import { HMSTrack, HMSCameraControl } from '@100mslive/react-native-hms';
+import Animated, {
+  interpolate,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
+
+import { styles } from './styles';
+import { DefaultModal } from './DefaultModal';
+import { ModalTypes, PipModes } from '../utils/types';
+import type { PeerTrackNode } from '../utils/types';
+import { pairData, requestExternalStoragePermission } from '../utils/functions';
+import {
+  ChangeAspectRatio,
+  ChangeNameModal,
+  ChangeRoleAccepteModal,
+  ChangeRoleModal,
+  ChangeTrackStateModal,
+  ChangeVolumeModal,
+  SaveScreenshot,
+} from './Modals';
+import type { RootState } from '../redux';
+import { GridView } from './GridView';
+import { HLSView } from './HLSView';
+import PIPView from './PIPView';
+import { PeerSettingsModalContent } from '../components/PeerSettingsModalContent';
+import { StreamingQualityModalContent } from '../components/StreamingQualityModalContent';
+import {
+  useHMSChangeTrackStateRequest,
+  useHMSInstance,
+  useHMSRoleChangeRequest,
+  useHMSSessionStoreListeners,
+  useIsHLSViewer,
+  useModalType,
+} from '../hooks-util';
+import { useIsPortraitOrientation } from '../utils/dimension';
+import { ParticipantsModal } from './ParticipantsModal';
+
+type CapturedImagePath = { uri: string } | null;
+
+interface DisplayViewProps {
+  offset: SharedValue<number>;
+  peerTrackNodes: Array<PeerTrackNode>;
+}
+
+export const DisplayView: React.FC<DisplayViewProps> = ({
+  offset,
+  peerTrackNodes,
+}) => {
+  // --- 100ms SDK Instance ---
+  const hmsInstance = useHMSInstance();
+
+  const isPortrait = useIsPortraitOrientation();
+  const isHLSViewer = useIsHLSViewer();
+
+  const {
+    modalVisibleType: modalVisible,
+    handleModalVisibleType: setModalVisible,
+  } = useModalType();
+
+  // --- Refs ---
+  const gridViewRef = useRef<React.ElementRef<typeof GridView> | null>(null);
+  const trackToChangeRef = useRef<null | HMSTrack>(null);
+
+  //  --- Redux stores ---
+  const isPipModeActive = useSelector(
+    (state: RootState) => state.app.pipModeStatus === PipModes.ACTIVE
+  );
+  const spotlightTrackId = useSelector(
+    (state: RootState) => state.user.spotlightTrackId
+  ); // State to track active spotlight trackId
+
+  // --- Component Local States ---
+  const [selectedPeerTrackNode, setSelectedPeerTrackNode] =
+    useState<PeerTrackNode | null>(null);
+  const [capturedImagePath, setCapturedImagePath] =
+    useState<CapturedImagePath>(null);
+
+  // --- Constants ---
+  const pairedPeers = useMemo(
+    () => pairData(peerTrackNodes, isPortrait ? 4 : 2, spotlightTrackId),
+    [peerTrackNodes, spotlightTrackId, isPortrait]
+  );
+
+  // --- Listeners ---
+  useHMSSessionStoreListeners();
+
+  const trackStateChangeRequest = useHMSChangeTrackStateRequest(() => {
+    setModalVisible(ModalTypes.CHANGE_TRACK, true);
+  });
+
+  const roleChangeRequest = useHMSRoleChangeRequest(() => {
+    setModalVisible(ModalTypes.CHANGE_ROLE_ACCEPT, true);
+  });
+
+  // --- Effects ---
+  useEffect(() => {
+    // Scroll to start of the list
+    if (spotlightTrackId) {
+      gridViewRef.current
+        ?.getFlatlistRef()
+        .current?.scrollToOffset({ animated: true, offset: 0 });
+    }
+  }, [spotlightTrackId]);
+
+  // functions
+
+  const handlePeerTileMorePress = React.useCallback(
+    (peerTrackNode: PeerTrackNode) => {
+      setSelectedPeerTrackNode(peerTrackNode);
+      setModalVisible(ModalTypes.PEER_SETTINGS);
+    },
+    [setModalVisible]
+  );
+
+  const handleCaptureScreenShotPress = (node: PeerTrackNode) => {
+    setModalVisible(ModalTypes.DEFAULT);
+    InteractionManager.runAfterInteractions(() => {
+      gridViewRef.current?.captureViewScreenshot(node);
+    });
+  };
+
+  const handleCaptureImageAtMaxSupportedResolutionPress = (
+    _node: PeerTrackNode
+  ) => {
+    setModalVisible(ModalTypes.DEFAULT);
+    InteractionManager.runAfterInteractions(async () => {
+      const permission = await requestExternalStoragePermission();
+
+      if (hmsInstance && permission) {
+        HMSCameraControl.captureImageAtMaxSupportedResolution(true)
+          .then((imagePath: string) => {
+            console.log(
+              'captureImageAtMaxSupportedResolution result -> ',
+              imagePath
+            );
+            setModalVisible(ModalTypes.DEFAULT);
+            setCapturedImagePath({ uri: `file://${imagePath}` });
+          })
+          .catch((error: any) => {
+            console.warn(
+              'captureImageAtMaxSupportedResolution error -> ',
+              error
+            );
+          });
+      }
+    });
+  };
+
+  const handleStreamingQualityPress = (track: HMSTrack) => {
+    trackToChangeRef.current = track;
+    setModalVisible(ModalTypes.STREAMING_QUALITY_SETTING, true);
+  };
+
+  const animatedStyles = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateY: interpolate(offset.value, [0, 1], [4, 0]) }],
+    };
+  }, []);
+
+  return (
+    <Animated.View style={[styles.container, animatedStyles]}>
+      {isHLSViewer ? (
+        <HLSView />
+      ) : pairedPeers.length > 0 ? (
+        <>
+          {isPipModeActive ? (
+            <PIPView pairedPeers={pairedPeers} />
+          ) : (
+            <GridView
+              ref={gridViewRef}
+              onPeerTileMorePress={handlePeerTileMorePress}
+              pairedPeers={pairedPeers}
+            />
+          )}
+        </>
+      ) : (
+        <View style={styles.welcomeContainer}>
+          <Text style={styles.welcomeHeading}>Welcome!</Text>
+          <Text style={styles.welcomeDescription}>
+            You're the first one here.
+          </Text>
+          <Text style={styles.welcomeDescription}>
+            Sit back and relax till the others join.
+          </Text>
+        </View>
+      )}
+
+      {isPipModeActive ? null : (
+        <>
+          <DefaultModal
+            backdrop={true}
+            modalPosiion="center"
+            viewStyle={{ minWidth: '70%', width: undefined }}
+            modalVisible={modalVisible === ModalTypes.PEER_SETTINGS}
+            setModalVisible={() => setModalVisible(ModalTypes.DEFAULT)}
+          >
+            {selectedPeerTrackNode ? (
+              <PeerSettingsModalContent
+                peerTrackNode={selectedPeerTrackNode}
+                cancelModal={() => setModalVisible(ModalTypes.DEFAULT)}
+                onCaptureScreenShotPress={handleCaptureScreenShotPress}
+                onCaptureImageAtMaxSupportedResolutionPress={
+                  handleCaptureImageAtMaxSupportedResolutionPress
+                }
+                onStreamingQualityPress={handleStreamingQualityPress}
+              />
+            ) : null}
+          </DefaultModal>
+
+          <DefaultModal
+            modalPosiion="center"
+            modalVisible={modalVisible === ModalTypes.HLS_PLAYER_ASPECT_RATIO}
+            setModalVisible={() => setModalVisible(ModalTypes.DEFAULT)}
+          >
+            <ChangeAspectRatio
+              cancelModal={() => setModalVisible(ModalTypes.DEFAULT)}
+            />
+          </DefaultModal>
+          {/* Save Image Captured from Local Camera */}
+          <DefaultModal
+            modalPosiion="center"
+            modalVisible={!!capturedImagePath}
+            setModalVisible={() => setCapturedImagePath(null)}
+          >
+            {capturedImagePath ? (
+              <SaveScreenshot
+                imageSource={capturedImagePath}
+                cancelModal={() => setCapturedImagePath(null)}
+              />
+            ) : null}
+          </DefaultModal>
+          <DefaultModal
+            modalPosiion="center"
+            modalVisible={modalVisible === ModalTypes.STREAMING_QUALITY_SETTING}
+            setModalVisible={() => setModalVisible(ModalTypes.DEFAULT)}
+          >
+            {trackToChangeRef.current ? (
+              <StreamingQualityModalContent
+                track={trackToChangeRef.current}
+                cancelModal={() => {
+                  setModalVisible(ModalTypes.DEFAULT);
+                }}
+              />
+            ) : null}
+          </DefaultModal>
+          <DefaultModal
+            modalPosiion="center"
+            modalVisible={modalVisible === ModalTypes.CHANGE_TRACK}
+            setModalVisible={() => setModalVisible(ModalTypes.DEFAULT)}
+          >
+            {trackStateChangeRequest ? (
+              <ChangeTrackStateModal
+                roleChangeRequest={trackStateChangeRequest}
+                cancelModal={() => setModalVisible(ModalTypes.DEFAULT)}
+              />
+            ) : null}
+          </DefaultModal>
+          <DefaultModal
+            modalPosiion="center"
+            modalVisible={modalVisible === ModalTypes.CHANGE_ROLE_ACCEPT}
+            setModalVisible={() => setModalVisible(ModalTypes.DEFAULT)}
+          >
+            {roleChangeRequest ? (
+              <ChangeRoleAccepteModal
+                instance={hmsInstance}
+                roleChangeRequest={roleChangeRequest}
+                cancelModal={() => setModalVisible(ModalTypes.DEFAULT)}
+              />
+            ) : null}
+          </DefaultModal>
+          <DefaultModal
+            animationIn={'slideInUp'}
+            animationOut={'slideOutDown'}
+            modalVisible={modalVisible === ModalTypes.PARTICIPANTS}
+            setModalVisible={() => setModalVisible(ModalTypes.DEFAULT)}
+          >
+            <ParticipantsModal />
+          </DefaultModal>
+          <DefaultModal
+            modalPosiion="center"
+            modalVisible={modalVisible === ModalTypes.CHANGE_ROLE}
+            setModalVisible={() => setModalVisible(ModalTypes.DEFAULT)}
+          >
+            <ChangeRoleModal
+              cancelModal={() => setModalVisible(ModalTypes.DEFAULT)}
+            />
+          </DefaultModal>
+          <DefaultModal
+            modalPosiion="center"
+            modalVisible={modalVisible === ModalTypes.VOLUME}
+            setModalVisible={() => setModalVisible(ModalTypes.DEFAULT)}
+          >
+            <ChangeVolumeModal
+              cancelModal={() => setModalVisible(ModalTypes.DEFAULT)}
+            />
+          </DefaultModal>
+          <DefaultModal
+            modalPosiion="center"
+            modalVisible={modalVisible === ModalTypes.CHANGE_NAME}
+            setModalVisible={() => setModalVisible(ModalTypes.DEFAULT)}
+          >
+            <ChangeNameModal
+              cancelModal={() => setModalVisible(ModalTypes.DEFAULT)}
+            />
+          </DefaultModal>
+        </>
+      )}
+    </Animated.View>
+  );
+};

package/src/components/Footer.tsx

@@ -0,0 +1,109 @@
+import React, { memo, useMemo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import Animated, {
+  interpolate,
+  useAnimatedProps,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
+
+import { COLORS } from '../utils/theme';
+import { useIsHLSViewer } from '../hooks-util';
+import { EndIcon } from '../Icons';
+import { HMSManageLeave } from './HMSManageLeave';
+import { HMSManageRaiseHand } from './HMSManageRaiseHand';
+import { HMSManageLocalAudio } from './HMSManageLocalAudio';
+import { HMSManageLocalVideo } from './HMSManageLocalVideo';
+import { HMSChat } from './HMSChat';
+import { HMSRoomOptions } from './HMSRoomOptions';
+import { useCanPublishAudio, useCanPublishVideo } from '../hooks-sdk';
+
+interface FooterProps {
+  offset: SharedValue<number>;
+}
+
+export const _Footer: React.FC<FooterProps> = ({ offset }) => {
+  const isHLSViewer = useIsHLSViewer();
+  const canPublishAudio = useCanPublishAudio();
+  const canPublishVideo = useCanPublishVideo();
+
+  const footerActionButtons = useMemo(() => {
+    const actions = ['chat'];
+
+    if (isHLSViewer) {
+      actions.unshift('leave');
+    }
+
+    if (canPublishVideo) {
+      actions.unshift('video');
+    }
+
+    if (canPublishAudio) {
+      actions.unshift('audio');
+    }
+
+    actions.push(isHLSViewer ? 'hand-raise' : 'options');
+
+    return actions;
+  }, [isHLSViewer, canPublishAudio, canPublishVideo]);
+
+  const animatedStyles = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(offset.value, [0, 0.7, 1], [0, 0.5, 1]),
+      transform: [{ translateY: interpolate(offset.value, [0, 1], [10, 0]) }],
+    };
+  }, []);
+
+  const animatedProps = useAnimatedProps((): {
+    pointerEvents: 'none' | 'auto';
+  } => {
+    return {
+      pointerEvents: offset.value === 0 ? 'none' : 'auto',
+    };
+  }, []);
+
+  return (
+    <Animated.View style={animatedStyles} animatedProps={animatedProps}>
+      <View style={styles.container}>
+        {footerActionButtons.map((actionType, index) => {
+          return (
+            <View
+              key={actionType}
+              style={index === 0 ? null : styles.iconWrapper}
+            >
+              {actionType === 'leave' ? (
+                <HMSManageLeave leaveIconDelegate={<EndIcon />} />
+              ) : actionType === 'audio' ? (
+                <HMSManageLocalAudio />
+              ) : actionType === 'video' ? (
+                <HMSManageLocalVideo />
+              ) : actionType === 'chat' ? (
+                <HMSChat />
+              ) : actionType === 'options' ? (
+                <HMSRoomOptions />
+              ) : actionType === 'hand-raise' ? (
+                <HMSManageRaiseHand />
+              ) : null}
+            </View>
+          );
+        })}
+      </View>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    backgroundColor: COLORS.BACKGROUND.DIM,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  iconWrapper: {
+    marginLeft: 24,
+  },
+});
+
+export const Footer = memo(_Footer);

package/src/components/FullScreenIndicator.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ActivityIndicator, StyleSheet } from 'react-native';
+
+import { COLORS } from '../utils/theme';
+
+export const FullScreenIndicator: React.FC = () => {
+  return (
+    <ActivityIndicator
+      size={'large'}
+      color={COLORS.PRIMARY.DEFAULT}
+      style={styles.indicator}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  indicator: {
+    flex: 1,
+    backgroundColor: COLORS.BACKGROUND.DIM,
+  },
+});

package/src/components/GridView.tsx

@@ -0,0 +1,124 @@
+import React, { useRef, useState, useImperativeHandle } from 'react';
+import type { ElementRef } from 'react';
+import { View, FlatList } from 'react-native';
+import type { HMSView, HMSPeer } from '@100mslive/react-native-hms';
+
+import { DefaultModal } from './DefaultModal';
+import { SaveScreenshot } from './Modals';
+import { TilesContainer } from './TilesContainer';
+import type { PeerTrackNode } from '../utils/types';
+
+type GridViewProps = {
+  onPeerTileMorePress(peerTrackNode: PeerTrackNode): void;
+  pairedPeers: PeerTrackNode[][];
+};
+
+type GridViewRefAttrs = {
+  captureViewScreenshot(node: PeerTrackNode): any;
+  getFlatlistRef(): React.RefObject<FlatList<any>>;
+};
+
+const GridView = React.forwardRef<GridViewRefAttrs, GridViewProps>(
+  ({ pairedPeers, onPeerTileMorePress }, ref) => {
+    // hooks
+    const [screenshotData, setScreenshotData] = useState<{
+      peer: HMSPeer;
+      source: { uri: string };
+    } | null>(null);
+    const hmsViewRefs = useRef<Record<string, ElementRef<typeof HMSView>>>({});
+    const flatlistRef = useRef<FlatList>(null);
+
+    // We are setting `captureViewScreenshot` method on ref passed to GridView component
+    // `captureViewScreenshot` method can be called to with PeerTrackNode to capture the HmsView Snapshot
+    useImperativeHandle(
+      ref,
+      () => ({
+        captureViewScreenshot: (node: PeerTrackNode) => {
+          // getting HmsView ref for the passed PeerTrackNode
+          const hmsViewRef = hmsViewRefs.current[node.id];
+
+          // If HmsView is not rendered on Tile, then HmsView ref will be `undefined`
+          if (!hmsViewRef) {
+            console.warn(`HmsViewRef for "${node.id}" is not available!`);
+            return;
+          }
+
+          // Calling `capture` method on HmsView ref
+          hmsViewRef
+            .capture?.()
+            .then((imageBase64: string) => {
+              console.log('HmsView Capture Success');
+              // Saving data needed to show captured snapshot in "Save Snapshot" Modal
+              setScreenshotData({
+                peer: node.peer,
+                source: { uri: `data:image/png;base64,${imageBase64}` },
+              });
+            })
+            .catch((error: any) =>
+              console.warn('HmsView Capture Error: ', error)
+            );
+        },
+        getFlatlistRef: () => {
+          return flatlistRef;
+        },
+      }),
+      []
+    );
+
+    const setHmsViewRefs = React.useCallback(
+      (viewId: string, ref: typeof HMSView | null) => {
+        hmsViewRefs.current[viewId] = ref;
+      },
+      []
+    );
+
+    const _renderItem = React.useCallback(
+      ({ item }) => {
+        return (
+          <TilesContainer
+            onPeerTileMorePress={onPeerTileMorePress}
+            peerTrackNodes={item}
+            setHmsViewRefs={setHmsViewRefs}
+          />
+        );
+      },
+      [onPeerTileMorePress, setHmsViewRefs]
+    );
+
+    const _keyExtractor = React.useCallback((item) => item[0]?.id, []);
+
+    return (
+      <View style={{ flex: 1 }}>
+        <FlatList
+          ref={flatlistRef}
+          horizontal
+          data={pairedPeers}
+          initialNumToRender={1}
+          maxToRenderPerBatch={1}
+          windowSize={2}
+          pagingEnabled
+          showsHorizontalScrollIndicator={false}
+          renderItem={_renderItem}
+          numColumns={1}
+          keyExtractor={_keyExtractor}
+        />
+
+        {/* Save Captured Screenshot of HMSView Modal */}
+        <DefaultModal
+          modalPosiion="center"
+          modalVisible={!!screenshotData}
+          setModalVisible={() => setScreenshotData(null)}
+        >
+          <SaveScreenshot
+            imageSource={screenshotData?.source}
+            cancelModal={() => setScreenshotData(null)}
+          />
+        </DefaultModal>
+      </View>
+    );
+  }
+);
+
+GridView.displayName = 'GridView';
+
+export { GridView };

package/src/components/HLSPlayerEmoticons.tsx

@@ -0,0 +1,60 @@
+import { useSelector } from 'react-redux';
+import { HMSPeer, useHMSHLSPlayerCue } from '@100mslive/react-native-hms';
+import type { HMSHLSPlayerPlaybackCue } from '@100mslive/react-native-hms';
+import Toast from 'react-native-simple-toast';
+
+import type { RootState } from '../redux';
+
+interface EmoticonMessage extends HMSHLSPlayerPlaybackCue {
+  type: string;
+  senderId: string;
+  emojiId: string;
+  sender: HMSPeer | undefined;
+}
+
+export const HLSPlayerEmoticons = () => {
+  const hmsInstance = useSelector((state: RootState) => state.user.hmsInstance);
+
+  useHMSHLSPlayerCue((cue) => {
+    if (!hmsInstance) {
+      return;
+    }
+
+    const payloadStr = cue.payloadval;
+
+    if (typeof payloadStr === 'string') {
+      try {
+        const emoticonMessage: EmoticonMessage = JSON.parse(payloadStr);
+        if (emoticonMessage.type === 'EMOJI_REACTION') {
+          const peer = hmsInstance.getPeerFromPeerId(emoticonMessage.senderId);
+          Toast.showWithGravity(
+            `${peer?.name} ${getEmojiByString(emoticonMessage.emojiId)}`,
+            Toast.LONG,
+            Toast.TOP
+          );
+        }
+      } catch (error) {
+        const message = `HLS Cue Payload is not JSON: ${error}`;
+        console.warn(message);
+        Toast.showWithGravity(message, Toast.LONG, Toast.TOP);
+      }
+    }
+  }, []);
+
+  return null;
+};
+
+const emojiMap: Record<string, string> = {
+  '+1': '👍',
+  '-1': '👎',
+  'wave': '👋',
+  'clap': '👏',
+  'fire': '🔥',
+  'tada': '🎉',
+  'heart_eyes': '😍',
+  'joy': '😂',
+  'open_mouth': '😮',
+  'sob': '😭',
+};
+
+const getEmojiByString = (emojiCode: string) => emojiMap[emojiCode] || '👍';

package/src/components/HLSPlayerStatsView.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { useHMSHLSPlayerStats } from '@100mslive/react-native-hms';
+
+import { COLORS } from '../utils/theme';
+
+export interface HLSPlayerStatsViewProps {
+  onClosePress?: () => void;
+}
+
+export const HLSPlayerStatsView: React.FC<HLSPlayerStatsViewProps> = ({
+  onClosePress,
+}) => {
+  const { stats } = useHMSHLSPlayerStats();
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity
+        onPress={() => onClosePress?.()}
+        style={styles.closeButton}
+      >
+        <Text style={styles.text}>close</Text>
+      </TouchableOpacity>
+
+      <Text style={styles.text}>
+        Bandwidth Estimate: {stats.bandWidthEstimate}
+      </Text>
+      <Text style={styles.text}>
+        Total Bytes Loaded: {stats.totalBytesLoaded}
+      </Text>
+      <Text style={styles.text}>
+        Buffered Duration: {stats.bufferedDuration}
+      </Text>
+
+      <Text style={styles.text}>
+        Distance From Live: {stats.distanceFromLive}
+      </Text>
+      <Text style={styles.text}>
+        Dropped Frame Count: {stats.droppedFrameCount}
+      </Text>
+
+      <Text style={styles.text}>Average Bitrate: {stats.averageBitrate}</Text>
+
+      <Text style={styles.text}>Video Height: {stats.videoHeight}</Text>
+      <Text style={styles.text}>Video Width: {stats.videoWidth}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 8,
+    left: 8,
+    backgroundColor: COLORS.OVERLAY,
+    borderRadius: 12,
+    padding: 8,
+    minWidth: '50%',
+  },
+  closeButton: {
+    padding: 12,
+  },
+  text: {
+    fontSize: 14,
+    lineHeight: 14 * 1.3,
+    color: COLORS.TEXT.HIGH_EMPHASIS,
+  },
+});