Add simulcast to tracks

* add simulcast to local tracks
* add simulcast to remote tracks
* allow user to change local tracks encoding
* allow user to change remote track encoding

Author: karkakol

example/.gitignore

@@ -66,4 +66,4 @@ yarn-error.log
 # Env
 .env.development
 /ios/JellyfishExample.xcworkspace/contents.xcworkspacedata
-/ios/jellyfish_ipa/
+/ios/jf/

example/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,3 +1,4 @@
+
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 distributionUrl=https\://services.gradle.org/distributions/gradle-7.5.1-all.zip

example/components/InCallButton.tsx

@@ -3,8 +3,8 @@ import {MaterialCommunityIcons} from '@expo/vector-icons';
 import React from 'react';
 import {
   type GestureResponderEvent,
-  Pressable,
   StyleSheet,
+  TouchableHighlight,
   View,
 } from 'react-native';
 import type AccessibilityLabel from '../types/AccessibilityLabel';
@@ -63,15 +63,18 @@ const InCallButton = ({
   };
 
   return (
-    <Pressable onPress={onPress} accessibilityLabel={accessibilityLabel}>
+    <TouchableHighlight
+      onPress={onPress}
+      style={InCallButtonStyles.common}
+      accessibilityLabel={accessibilityLabel}>
       <View style={GetStylesForButtonType(type)}>
         <MaterialCommunityIcons
           name={iconName}
           size={IconSize}
           color={GetIconColorForButtonType(type)}
         />
       </View>
-    </Pressable>
+    </TouchableHighlight>
   );
 };
 

example/components/LetterButton.tsx

@@ -0,0 +1,84 @@
+import {BrandColors} from '../utils/Colors';
+import React from 'react';
+import {
+  type GestureResponderEvent,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  View,
+} from 'react-native';
+import AccessibilityLabel from '../types/AccessibilityLabel';
+import {TrackEncoding} from '@jellyfish-dev/react-native-client-sdk';
+
+const LetterButtonStyles = StyleSheet.create({
+  common: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  button: {
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: BrandColors.darkBlue100,
+  },
+  buttonSelected: {
+    backgroundColor: BrandColors.darkBlue100,
+  },
+  buttonUnSelected: {
+    backgroundColor: BrandColors.darkBlue20,
+  },
+  text: {
+    fontSize: 18,
+  },
+  textSelected: {
+    color: BrandColors.darkBlue20,
+  },
+  textUnselected: {
+    color: BrandColors.darkBlue100,
+  },
+});
+
+type LetterButtonProps = {
+  onPress: (event: GestureResponderEvent) => void;
+  trackEncoding: TrackEncoding;
+  selected: boolean;
+} & AccessibilityLabel;
+
+const LetterButton = ({
+  onPress,
+  trackEncoding,
+  selected,
+}: LetterButtonProps) => {
+  const stylesForText = () => {
+    return selected
+      ? LetterButtonStyles.textSelected
+      : LetterButtonStyles.textUnselected;
+  };
+
+  const stylesForButton = () => {
+    return selected
+      ? LetterButtonStyles.buttonSelected
+      : LetterButtonStyles.buttonUnSelected;
+  };
+  return (
+    <TouchableHighlight
+      onPress={onPress}
+      style={[LetterButtonStyles.common, stylesForButton()]}
+      key={trackEncoding}>
+      <View
+        style={[
+          LetterButtonStyles.common,
+          LetterButtonStyles.button,
+          stylesForButton(),
+        ]}>
+        <Text style={[LetterButtonStyles.text, stylesForText()]}>
+          {trackEncoding.toUpperCase()}
+        </Text>
+      </View>
+    </TouchableHighlight>
+  );
+};
+
+export default LetterButton;

example/components/VideosGrid.tsx

@@ -1,11 +1,17 @@
-import {VideoRendererView} from '@jellyfish-dev/react-native-client-sdk';
+import {
+  Track,
+  VideoRendererView,
+  setTargetTrackEncoding,
+  Metadata,
+} from '@jellyfish-dev/react-native-client-sdk';
 import React from 'react';
 import {Dimensions, StyleSheet, View} from 'react-native';
 import Animated, {FadeInDown, Layout} from 'react-native-reanimated';
 import {roomScreenLabels} from '../types/ComponentLabels';
+import LetterButton from './LetterButton';
 
 type Props = {
-  tracks: string[];
+  tracks: Track<Metadata>[];
 };
 
 const {width} = Dimensions.get('window');
@@ -32,13 +38,24 @@ export function VideosGrid({tracks}: Props) {
               ? [styles.video2, {width: videoWidth, height: videoWidth}]
               : [styles.video1, {maxWidth: width - 20}]
           }
-          key={v}>
+          key={v.id}>
           <AnimatedVideoRenderer
-            trackId={v}
+            trackId={v.id}
             entering={FadeInDown.duration(200)}
             layout={Layout.duration(150)}
             style={styles.animatedView}
           />
+          {(v.simulcastConfig?.enabled ?? false) && (
+            <View style={styles.buttons}>
+              {v.simulcastConfig?.activeEncodings.map(e => (
+                <LetterButton
+                  trackEncoding={e}
+                  selected={v.encoding === e}
+                  onPress={() => setTargetTrackEncoding(v.id, e)}
+                />
+              ))}
+            </View>
+          )}
         </Animated.View>
       ))}
     </View>
@@ -85,6 +102,16 @@ const styles = StyleSheet.create({
   video: {
     flex: 1,
   },
+  buttons: {
+    flexDirection: 'row',
+    gap: 8,
+    padding: 4,
+    borderRadius: 8,
+    position: 'absolute',
+    opacity: 0.5,
+    backgroundColor: 'white',
+    right: 0,
+  },
 });
 
 export default VideosGrid;

example/contexts/JellyfishExampleContext.tsx

@@ -9,6 +9,10 @@ import {
   updateAudioTrackMetadata,
   CaptureDevice,
   VideoQuality,
+  SimulcastConfig,
+  TrackEncoding,
+  CameraConfig,
+  Metadata,
 } from '@jellyfish-dev/react-native-client-sdk';
 
 import {Platform} from 'expo-modules-core';
@@ -22,12 +26,19 @@ const JellyfishExampleContext = React.createContext<
       isMicrophoneOn: boolean;
       toggleMicrophone: () => void;
       joinRoom: () => Promise<void>;
+      startCamera: <CameraConfigMetadataType extends Metadata>(
+        config?: Partial<CameraConfig<CameraConfigMetadataType>>,
+      ) => Promise<void>;
       flipCamera: () => void;
       getCaptureDevices: () => Promise<CaptureDevice[]>;
       setCurrentCamera: React.Dispatch<
         React.SetStateAction<CaptureDevice | null>
       >;
       currentCamera: CaptureDevice | null;
+      localCameraSimulcastConfig: SimulcastConfig;
+      toggleLocalCameraTrackEncoding: (
+        encoding: TrackEncoding,
+      ) => Promise<void>;
     }
   | undefined
 >(undefined);
@@ -44,6 +55,8 @@ const JellyfishExampleContextProvider = (props: any) => {
     startCamera,
     flipCamera,
     getCaptureDevices,
+    simulcastConfig: localCameraSimulcastConfig,
+    toggleVideoTrackEncoding: toggleLocalCameraTrackEncoding,
   } = useCamera();
   const {toggleMicrophone: membraneToggleMicrophone, startMicrophone} =
     useMicrophone();
@@ -113,11 +126,14 @@ const JellyfishExampleContextProvider = (props: any) => {
     flipCamera,
     toggleCamera,
     toggleMicrophone,
+    startCamera,
     isCameraOn,
     isMicrophoneOn,
     currentCamera,
     setCurrentCamera,
     getCaptureDevices,
+    localCameraSimulcastConfig,
+    toggleLocalCameraTrackEncoding,
   };
 
   return (