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

package/src/components/StatusBar.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { StatusBar, Platform } from 'react-native';
+
+import { useShowLandscapeLayout } from '../hooks-util';
+
+type HMSStatusBarProps = {
+  hidden?: boolean;
+};
+
+export const HMSStatusBar: React.FC<HMSStatusBarProps> = ({ hidden }) => {
+  const showLandscapeLayout = useShowLandscapeLayout();
+
+  return (
+    <StatusBar
+      hidden={(Platform.OS === 'ios' && hidden) || showLandscapeLayout} // use `hidden` prop to hide Status bar on iOS
+      barStyle={
+        Platform.OS === 'android' && hidden ? 'dark-content' : 'default'
+      } // hack: use `dark-content` value to make StatusBar look like it's hidden
+      animated={true}
+    />
+  );
+};

package/src/components/StreamingQualityModalContent.tsx

@@ -0,0 +1,266 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import {
+  View,
+  TouchableOpacity,
+  Text,
+  StyleSheet,
+  Platform,
+} from 'react-native';
+import {
+  HMSRemoteVideoTrack,
+  HMSTrack,
+  HMSLayer,
+  HMSSimulcastLayerDefinition,
+} from '@100mslive/react-native-hms';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+
+import { CustomButton } from './CustomButton';
+import type { RootState } from '../redux';
+import { COLORS } from '../utils/theme';
+import { Menu, MenuItem } from './MenuModal';
+
+interface PeerSettingsModalContentProps {
+  track: HMSTrack;
+  cancelModal(): void;
+}
+
+export const StreamingQualityModalContent: React.FC<
+  PeerSettingsModalContentProps
+> = ({ track, cancelModal }) => {
+  const hmsInstance = useSelector((state: RootState) => state.user.hmsInstance);
+  const [remoteVideoTrack, setRemoteVideoTrack] =
+    useState<HMSRemoteVideoTrack | null>(null);
+  const [showQualityOptions, setShowQualityOptions] = useState(false);
+  const [originalLayer, setOriginalLayer] = useState<HMSLayer | null>(null);
+  const [selectedLayer, setSelectedLayer] = useState<HMSLayer | null>(null);
+  const [layerDefinitions, setLayerDefinitions] = useState<
+    HMSSimulcastLayerDefinition[]
+  >([]);
+
+  useEffect(() => {
+    if (remoteVideoTrack) {
+      const getSelectedLayer = async () => {
+        const layer = await remoteVideoTrack.getLayer();
+        setOriginalLayer(layer);
+        setSelectedLayer(layer);
+      };
+
+      const getLayerDefinitions = async () => {
+        const layerDefinitions = await remoteVideoTrack.getLayerDefinition();
+        setLayerDefinitions(layerDefinitions);
+      };
+
+      getSelectedLayer();
+      getLayerDefinitions();
+    }
+  }, [remoteVideoTrack]);
+
+  useEffect(() => {
+    if (hmsInstance) {
+      const getRemoteVideoTrack = async () => {
+        const remoteVideoTrack =
+          await hmsInstance.getRemoteVideoTrackFromTrackId(track.trackId);
+
+        setRemoteVideoTrack(remoteVideoTrack);
+      };
+
+      getRemoteVideoTrack();
+    }
+  }, [track, hmsInstance]);
+
+  const changeStreamingQuality = async () => {
+    cancelModal();
+    if (
+      !selectedLayer ||
+      !remoteVideoTrack ||
+      selectedLayer === originalLayer
+    ) {
+      return;
+    }
+
+    remoteVideoTrack
+      .setLayer(selectedLayer)
+      .then((value) => {
+        if (value) {
+          console.log('Set Layer Success: ', value);
+        }
+      })
+      .catch((e) => console.log('Set Layer Error: ', e));
+  };
+
+  const changeSubmitDisabled =
+    !remoteVideoTrack || selectedLayer === originalLayer;
+  return (
+    <View style={styles.container}>
+      <Text style={styles.roleChangeModalHeading}>
+        Change Streaming Quality
+      </Text>
+      <Text style={styles.participantRole}>
+        Current Layer: {originalLayer || '-'}
+      </Text>
+
+      <View style={styles.contentContainer}>
+        <Menu
+          visible={showQualityOptions}
+          anchor={
+            <TouchableOpacity
+              style={styles.participantFilterContainer}
+              onPress={() => setShowQualityOptions(true)}
+            >
+              <Text style={styles.participantFilterText} numberOfLines={1}>
+                {selectedLayer}
+              </Text>
+              <MaterialIcons
+                name={showQualityOptions ? 'arrow-drop-up' : 'arrow-drop-down'}
+                style={styles.participantFilterIcon}
+                size={24}
+              />
+            </TouchableOpacity>
+          }
+          onRequestClose={() => setShowQualityOptions(false)}
+          style={styles.participantsMenuContainer}
+        >
+          {layerDefinitions.map((layerDefinition) => {
+            const isSelected = layerDefinition.layer === selectedLayer;
+
+            return (
+              <MenuItem
+                onPress={() => {
+                  setShowQualityOptions(false);
+                  setSelectedLayer(layerDefinition.layer);
+                }}
+                key={layerDefinition.layer}
+                style={
+                  isSelected ? styles.participantMenuActiveItem : undefined
+                }
+              >
+                <View style={styles.participantMenuItem}>
+                  <Text style={styles.participantFilterText}>
+                    {layerDefinition.layer} {layerDefinition.resolution.width}x
+                    {layerDefinition.resolution.height}
+                  </Text>
+                </View>
+              </MenuItem>
+            );
+          })}
+        </Menu>
+      </View>
+
+      <View style={styles.roleChangeModalPermissionContainer}>
+        <CustomButton
+          title="Cancel"
+          onPress={cancelModal}
+          viewStyle={styles.roleChangeModalCancelButton}
+          textStyle={styles.roleChangeModalButtonText}
+        />
+        <CustomButton
+          disabled={changeSubmitDisabled}
+          title="Change"
+          onPress={changeStreamingQuality}
+          viewStyle={styles.roleChangeModalSuccessButton}
+          textStyle={styles.roleChangeModalButtonText}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 24,
+    position: 'relative',
+  },
+  contentContainer: {
+    justifyContent: 'center',
+    marginTop: 24,
+  },
+  participantRole: {
+    color: COLORS.TEXT.MEDIUM_EMPHASIS,
+    fontSize: 12,
+    lineHeight: 16,
+    letterSpacing: 0.4,
+    marginTop: 8,
+    fontFamily: 'Inter-Regular',
+    textTransform: 'capitalize',
+  },
+  participantFilterContainer: {
+    padding: 12,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderWidth: 1,
+    borderColor: COLORS.BORDER.LIGHT,
+    borderRadius: 8,
+  },
+  participantFilterText: {
+    color: COLORS.TEXT.HIGH_EMPHASIS,
+    fontFamily: 'Inter-Regular',
+    fontSize: 16,
+    lineHeight: 16 * 1.4,
+    marginRight: 12,
+    textTransform: 'capitalize',
+  },
+  participantFilterIcon: {
+    color: COLORS.TEXT.HIGH_EMPHASIS,
+  },
+  roleChangeModalHeading: {
+    color: COLORS.TEXT.HIGH_EMPHASIS,
+    fontSize: 20,
+    lineHeight: 24,
+    letterSpacing: 0.15,
+    fontFamily: 'Inter-Medium',
+    textTransform: 'capitalize',
+  },
+  participantsMenuContainer: {
+    paddingTop: 8,
+    backgroundColor: COLORS.SURFACE.LIGHT,
+    overflow: 'hidden',
+  },
+  participantMenuActiveItem: {
+    backgroundColor: COLORS.PRIMARY.DEFAULT,
+  },
+  participantMenuItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: Platform.OS === 'ios' ? 16 : 0,
+  },
+  roleChangeModalPermissionContainer: {
+    flexDirection: 'row',
+    marginTop: 28,
+    alignItems: 'center',
+  },
+  roleChangeModalCancelButton: {
+    backgroundColor: COLORS.SECONDARY.DISABLED,
+    borderColor: COLORS.SECONDARY.DISABLED,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderRadius: 8,
+    width: '48%',
+    alignSelf: 'center',
+    marginRight: '4%',
+  },
+  roleChangeModalSuccessButton: {
+    backgroundColor: COLORS.PRIMARY.DEFAULT,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: COLORS.PRIMARY.DEFAULT,
+    borderRadius: 8,
+    width: '48%',
+    alignSelf: 'center',
+  },
+  roleChangeModalButtonText: {
+    color: COLORS.TEXT.HIGH_EMPHASIS,
+    fontSize: 16,
+    lineHeight: 24,
+    letterSpacing: 0.5,
+    fontFamily: 'Inter-Medium',
+    textTransform: 'capitalize',
+  },
+});

package/src/components/SwitchRow.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Switch, View, Text, StyleSheet } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import { COLORS } from '../utils/theme';
+
+interface SwitchRow {
+  value: boolean;
+  onChange(value: boolean): void;
+  text: string;
+  containerStyle?: StyleProp<ViewStyle>;
+  LeftIcon?: React.ReactNode;
+}
+
+export const SwitchRow: React.FC<SwitchRow> = ({
+  text,
+  LeftIcon,
+  containerStyle,
+  value,
+  onChange,
+}) => {
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <View style={styles.container}>
+        {LeftIcon}
+
+        <Text style={styles.text}>{text}</Text>
+      </View>
+
+      <Switch
+        value={value}
+        thumbColor={COLORS.WHITE}
+        trackColor={{
+          true: COLORS.PRIMARY.DEFAULT,
+          false: COLORS.SECONDARY.DISABLED,
+        }}
+        onValueChange={onChange}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  text: {
+    fontFamily: 'Inter-Medium',
+    fontSize: 16,
+    lineHeight: 24,
+    color: COLORS.TEXT.HIGH_EMPHASIS,
+  },
+});

package/src/components/Tile.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import { HMSTrackSource } from '@100mslive/react-native-hms';
+import Feather from 'react-native-vector-icons/Feather';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import type { HMSView } from '@100mslive/react-native-hms';
+
+import { styles } from './styles';
+
+import { parseMetadata } from '../utils/functions';
+import { DisplayTrack } from './DisplayTrack';
+import { COLORS } from '../utils/theme';
+import type { PeerTrackNode } from '../utils/types';
+import { useIsPortraitOrientation } from '../utils/dimension';
+
+interface TileProps {
+  totalTilesInContainer: number;
+  peerTrackNode: PeerTrackNode;
+  onPeerTileMorePress(peerTrackNode: PeerTrackNode): void;
+  setHmsViewRefs(viewId: string, ref: typeof HMSView | null): void;
+}
+
+const TileUnmemoized: React.FC<TileProps> = ({
+  onPeerTileMorePress,
+  peerTrackNode,
+  totalTilesInContainer,
+  setHmsViewRefs,
+}) => {
+  const isPortraitOrientation = useIsPortraitOrientation();
+  const parsedMetadata = parseMetadata(peerTrackNode?.peer?.metadata);
+
+  const oneTileStyle = { width: '100%', height: '100%' };
+  const twoTileStyle = { width: '100%', height: '50%' };
+  const threeTileStyle = { width: '100%', height: '33.3333%' };
+  const fourTileStyle = { width: '50%', height: '50%' };
+
+  const oneTileStyleLandscape = { width: '100%', height: '100%' };
+  const twoTileStyleLandscape = { width: '50%', height: '100%' };
+  const threeTileStyleLandscape = { width: '33.3333%', height: '100%' };
+  const fourTileStyleLandscape = { width: '50%', height: '50%' };
+
+  return (
+    <View
+      style={[
+        { borderWidth: 1 },
+        peerTrackNode?.track?.source !== undefined &&
+        peerTrackNode?.track?.source !== HMSTrackSource.REGULAR
+          ? styles.gridTile
+          : isPortraitOrientation
+          ? totalTilesInContainer === 1
+            ? oneTileStyle
+            : totalTilesInContainer === 2
+            ? twoTileStyle
+            : totalTilesInContainer === 3
+            ? threeTileStyle
+            : fourTileStyle
+          : totalTilesInContainer === 1
+          ? oneTileStyleLandscape
+          : totalTilesInContainer === 2
+          ? twoTileStyleLandscape
+          : totalTilesInContainer === 3
+          ? threeTileStyleLandscape
+          : fourTileStyleLandscape,
+      ]}
+    >
+      <DisplayTrack
+        // saving HmsView ref in collection with uniqueId as key
+        ref={(ref) => setHmsViewRefs(peerTrackNode.id, ref)}
+        isLocal={peerTrackNode?.peer?.isLocal}
+        peer={peerTrackNode?.peer}
+        videoTrack={peerTrackNode?.track}
+        videoStyles={styles.generalTile}
+        isDegraded={peerTrackNode?.isDegraded}
+      />
+
+      {/* More Options button for Peer */}
+      <View style={styles.morePeerOptionsContainer}>
+        <TouchableOpacity
+          onPress={() => onPeerTileMorePress(peerTrackNode)}
+          style={{
+            padding: 8,
+            backgroundColor: COLORS.SECONDARY.DISABLED,
+            borderRadius: 18,
+          }}
+        >
+          <Feather name="more-horizontal" style={styles.mic} size={20} />
+        </TouchableOpacity>
+      </View>
+
+      {peerTrackNode?.peer?.audioTrack?.isMute() && (
+        <View style={styles.micContainer}>
+          <Feather name="mic-off" style={styles.mic} size={20} />
+        </View>
+      )}
+      {parsedMetadata?.isBRBOn ? (
+        <View style={styles.status}>
+          <View style={styles.brbOnContainer}>
+            <Text style={styles.brbOn}>BRB</Text>
+          </View>
+        </View>
+      ) : null}
+      {parsedMetadata?.isHandRaised ? (
+        <View style={styles.status}>
+          <Ionicons
+            name="hand-left"
+            style={{ color: COLORS.TWIN.YELLOW }}
+            size={20}
+          />
+        </View>
+      ) : null}
+    </View>
+  );
+};
+
+const Tile = React.memo(TileUnmemoized);
+
+Tile.displayName = 'Tile';
+
+export { Tile };

package/src/components/TilesContainer.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { View, Dimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import type { HMSView } from '@100mslive/react-native-hms';
+
+import { styles } from './styles';
+
+import { Tile } from './Tile';
+import type { PeerTrackNode } from '../utils/types';
+
+interface TilesContainerProps {
+  peerTrackNodes: PeerTrackNode[];
+  onPeerTileMorePress(peerTrackNode: PeerTrackNode): void;
+  setHmsViewRefs(viewId: string, ref: typeof HMSView | null): void;
+}
+
+const TilesContainerUnmemoized: React.FC<TilesContainerProps> = ({
+  peerTrackNodes,
+  setHmsViewRefs,
+  onPeerTileMorePress,
+}) => {
+  const { left, right } = useSafeAreaInsets();
+
+  return (
+    <View
+      style={[
+        styles.page,
+        { width: Dimensions.get('window').width - left - right },
+      ]}
+    >
+      {peerTrackNodes?.map((peerTrackNode, _idx, arr) => (
+        <Tile
+          key={peerTrackNode.id}
+          setHmsViewRefs={setHmsViewRefs}
+          onPeerTileMorePress={onPeerTileMorePress}
+          peerTrackNode={peerTrackNode}
+          totalTilesInContainer={arr.length}
+        />
+      ))}
+    </View>
+  );
+};
+
+const TilesContainer = React.memo(TilesContainerUnmemoized);
+
+TilesContainer.displayName = 'TilesContainer';
+
+export { TilesContainer };

package/src/components/ZoomableView.tsx

@@ -0,0 +1,91 @@
+import React, { useCallback, useRef } from 'react';
+import { Animated, StyleSheet } from 'react-native';
+import {
+  PinchGestureHandler,
+  GestureHandlerRootView,
+  PanGestureHandler,
+  State,
+} from 'react-native-gesture-handler';
+import type {
+  HandlerStateChangeEvent,
+  PinchGestureHandlerEventPayload,
+} from 'react-native-gesture-handler';
+
+import { COLORS } from '../utils/theme';
+
+const ZoomableView = ({ children }: { children?: React.ReactNode }) => {
+  const baseScale = useRef(new Animated.Value(1)).current;
+  const pinchScale = useRef(new Animated.Value(1)).current;
+  const scale = Animated.multiply(baseScale, pinchScale);
+  let lastScale = 1;
+  const translateX = useRef(new Animated.Value(1)).current;
+  const translateY = useRef(new Animated.Value(1)).current;
+
+  const handlePinch = Animated.event([{ nativeEvent: { scale: pinchScale } }], {
+    useNativeDriver: true,
+  });
+
+  const handlePan = Animated.event(
+    [{ nativeEvent: { translationX: translateX, translationY: translateY } }],
+    { useNativeDriver: true }
+  );
+
+  const onHandlerStateChange = useCallback(() => {
+    translateY.extractOffset();
+    translateX.extractOffset();
+  }, [translateX, translateY]);
+
+  const onPinchHandlerStateChange = (
+    event: HandlerStateChangeEvent<PinchGestureHandlerEventPayload>
+  ) => {
+    if (event.nativeEvent.oldState === State.ACTIVE) {
+      lastScale *= event.nativeEvent.scale;
+      baseScale.setValue(lastScale);
+      pinchScale.setValue(1);
+    }
+  };
+
+  return (
+    <GestureHandlerRootView style={styles.container}>
+      <PanGestureHandler
+        onGestureEvent={handlePan}
+        onHandlerStateChange={onHandlerStateChange}
+      >
+        <Animated.View>
+          <PinchGestureHandler
+            onGestureEvent={handlePinch}
+            onHandlerStateChange={onPinchHandlerStateChange}
+          >
+            <Animated.View
+              style={[
+                styles.zoomableView,
+                {
+                  transform: [{ scale: scale }, { translateX }, { translateY }],
+                },
+              ]}
+            >
+              {children}
+            </Animated.View>
+          </PinchGestureHandler>
+        </Animated.View>
+      </PanGestureHandler>
+    </GestureHandlerRootView>
+  );
+};
+
+export { ZoomableView };
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: COLORS.BLACK,
+  },
+  zoomableView: {
+    width: '100%',
+    marginVertical: 1,
+    padding: 0.5,
+    overflow: 'hidden',
+    borderRadius: 10,
+    justifyContent: 'center',
+    alignSelf: 'center',
+  },
+});

package/src/components/index.ts

@@ -0,0 +1,8 @@
+export * from './ChatWindow';
+export * from './Preview';
+export * from './Picker';
+export * from './ZoomableView';
+export * from './CustomInput';
+export * from './CustomButton';
+export * from './DefaultModal';
+export * from './MenuModal';