Add Layer selection

Author: aravind-raveendran

src/components/BottomBar/BottomBar.style.ts

@@ -7,6 +7,7 @@ const styles = AppStyleSheet.create({
     alignItems: 'stretch',
     justifyContent: 'space-between',
     paddingHorizontal: 20,
+    width: '100%',
   },
 });
 export default styles;

src/components/BottomBar/BottomBar.tsx

@@ -4,7 +4,7 @@ import { View, TouchableOpacity, Platform } from 'react-native';
 
 import styles from './BottomBar.style';
 
-export const BottomBar = ({ displayStatsInformation, focus }) => {
+export const BottomBar = ({ displayStatsInformation, displaySimulcastSelection, focus }) => {
   const iconSize = Platform.OS === 'android' && Platform.isTV ? 's' : 'm';
   return (
     <View style={styles.wrapper}>
@@ -17,6 +17,15 @@ export const BottomBar = ({ displayStatsInformation, focus }) => {
       >
         <Icon testID="infoIcon" name="info" size={iconSize} />
       </TouchableOpacity>
+      <TouchableOpacity
+        testID="settingsIconButton"
+        hasTVPreferredFocus={focus}
+        onPress={() => {
+          displaySimulcastSelection();
+        }}
+      >
+        <Icon testID="settingsIcon" name="settings" size={iconSize} />
+      </TouchableOpacity>
     </View>
   );
 };

src/components/SimulcastView/SimulcastView.style.ts

@@ -0,0 +1,48 @@
+import { AppStyleSheet as StyleSheet } from '@dolbyio/uikit-react-native';
+import { Platform } from 'react-native';
+
+const styles = StyleSheet.create({
+  outerContainer: {
+    flex: 1,
+    backgroundColor: '#292930E5',
+    marginTop: 100,
+    borderTopLeftRadius: 14,
+    borderTopRightRadius: 14,
+  },
+  simulcastCell: {
+    width: '100%',
+    height: 50,
+    flexDirection: 'row',
+    backgroundColor: '#34343B',
+    marginVertical: 5,
+    justifyContent: 'center',
+    alignContent: 'center',
+  },
+  outerContainerTV: {
+    height: '50%',
+    width: '20%',
+    position: 'absolute',
+    backgroundColor: '#292930',
+    bottom: 20,
+    left: '80%',
+    borderRadius: 14,
+  },
+  innerContainer: {
+    marginTop: 10,
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    justifyContent: 'space-between',
+    paddingHorizontal: 0,
+  },
+  simulcastOptionsContainer: {
+    marginTop: Platform.isTV ? 10 : 60,
+    marginHorizontal: 16,
+  },
+  closeIcon: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    marginTop: 20,
+    paddingHorizontal: 20,
+  },
+});
+export default styles;

src/components/SimulcastView/SimulcastView.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { View, TouchableOpacity, FlatList, Platform } from 'react-native';
+
+import Icon from '../../uikit/components/Icon/Icon';
+import Text from '../text/Text';
+
+import styles from './SimulcastView.style';
+
+export const SimulcastView = ({ streamQualityList, selectedStreamQuality, onClose, onSelectStreamQuality }) => {
+  const isSelected = (streamQuality) => {
+    return selectedStreamQuality === streamQuality;
+  };
+  const renderItem = ({ item }) => (
+    <TouchableOpacity
+      onPress={() => {
+        onSelectStreamQuality(item);
+      }}
+    >
+      <View style={styles.simulcastCell}>
+        {isSelected(item.streamQuality) && <Icon testID="checkmarkIcon" name="checkmark" size="xs" />}
+        <Text style={{ alignSelf: 'center', height: '100%' }} type="bodyDefault">
+          {item.streamQuality}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+
+  return (
+    <View style={Platform.isTV ? styles.outerContainerTV : styles.outerContainer}>
+      <View style={styles.closeIcon}>
+        <TouchableOpacity testID="closeIconButton" hasTVPreferredFocus onPress={onClose}>
+          <Icon testID="closeIcon" name="close" size="s" />
+        </TouchableOpacity>
+      </View>
+      <View style={styles.innerContainer}>
+        <Text
+          testID="simulcastTitle"
+          id="simulcastTitle"
+          type="h2"
+          align={Platform.isTV ? 'left' : 'center'}
+          style={{ paddingTop: 16, paddingLeft: 16 }}
+        />
+        <View style={styles.simulcastOptionsContainer}>
+          <FlatList
+            testID="simulcastList"
+            data={streamQualityList}
+            keyExtractor={(item) => item.streamQuality}
+            renderItem={renderItem}
+          />
+        </View>
+      </View>
+    </View>
+  );
+};

src/components/SimulcastView/index.ts

@@ -0,0 +1,3 @@
+import { SimulcastView } from './SimulcastView';
+
+export default SimulcastView;

src/components/StreamStats/StreamStats.style.ts

@@ -16,6 +16,7 @@ const styles = StyleSheet.create({
     bottom: 20,
     left: 20,
     borderRadius: 14,
+    position: 'absolute',
   },
   innerContainer: {
     marginTop: 10,

src/screens/multiview/MultiView.tsx

@@ -5,6 +5,9 @@ import {
   MediaTrackInfo,
   ViewProjectSourceMapping,
   MediaStreamSource,
+  MediaStreamLayers,
+  MediaLayer,
+  LayerInfo,
 } from '@millicast/sdk';
 import { useNetInfo } from '@react-native-community/netinfo';
 import React, { useEffect, useRef, useState } from 'react';
@@ -25,7 +28,7 @@ import {
 import { RTCView } from 'react-native-webrtc';
 import { useSelector, useDispatch } from 'react-redux';
 
-import { RemoteTrackSource } from '../../types/RemoteTrackSource.types';
+import { RemoteTrackSource, SimulcastQuality } from '../../types/RemoteTrackSource.types';
 import { Routes } from '../../types/routes.types';
 
 window.Logger = MillicastLogger;
@@ -42,6 +45,7 @@ export const MultiView = ({ navigation }) => {
   const playing = useSelector((state) => state.viewerReducer.playing);
   const error = useSelector((state) => state.viewerReducer.error);
   const audioRemoteTrackSource = useSelector((state) => state.viewerReducer.audioRemoteTrackSource);
+
   const dispatch = useDispatch();
   const { routes, index } = navigation.getState();
   const currentRoute = routes[index].name;
@@ -51,6 +55,7 @@ export const MultiView = ({ navigation }) => {
   const sourceIdsRef = useRef([]);
   const netInfo = useNetInfo();
   const audioRemoteTrackSourceRef = useRef(null);
+
   const [isReconnectionScheduled, setIsReconnectionScheduled] = useState<boolean>(false);
 
   remoteTrackSourcesRef.current = remoteTrackSources;
@@ -144,6 +149,25 @@ export const MultiView = ({ navigation }) => {
     }
   };
 
+  const buildQualityOptions = (active, layers) => {
+    const descendingLayers = active.sort((a, b) => b.height - a.height);
+
+    const qualityOptions: SimulcastQuality[] = descendingLayers.map((active) => ({
+      simulcastLayer: {
+        bitrate: active.bitrate,
+        encodingId: active.id,
+        simulcastIdx: active.simulcastIdx,
+        spatialLayerId: layers.find((layer) => layer.simulcastIdx === active.simulcastIdx)?.spatialLayerId,
+        temporalLayerId: layers.find((layer) => layer.simulcastIdx === active.simulcastIdx)?.temporalLayerId,
+        maxSpatialLayerId: layers.find((layer) => layer.simulcastIdx === active.simulcastIdx)?.maxSpatialLayerId,
+        maxTemporalLayerId: layers.find((layer) => layer.simulcastIdx === active.simulcastIdx)?.maxTemporalLayerId,
+      },
+      streamQuality: `${active.height}p`,
+    }));
+
+    return [{ streamQuality: 'Auto' } as SimulcastQuality, ...qualityOptions];
+  };
+
   const subscribe = async () => {
     if (millicastViewRef.current?.isActive()) {
       return;
@@ -193,6 +217,7 @@ export const MultiView = ({ navigation }) => {
                 payload: newRemoteTrackSource,
               });
             }
+
             await viewer.project(sourceId, mappingForProjection);
             dispatch({
               type: 'viewer/addRemoteTrackSource',
@@ -231,11 +256,15 @@ export const MultiView = ({ navigation }) => {
           // A new source was multiplexed over the vad tracks
           break;
         case 'layers':
+          const { medias } = data;
+          const mediaId = Object.keys(medias)[0];
+          const { active, layers } = (data as MediaStreamLayers).medias[mediaId] ?? {};
+          const streamQualities = buildQualityOptions(active, layers);
+
           dispatch({
             type: 'viewer/setActiveLayers',
-            payload: data.medias?.['0']?.active,
+            payload: { mediaId, streamQualities },
           });
-          // Updated layer information for each simulcast/svc video track
           break;
         default:
           console.log('Unknown event', name);

src/screens/singleStreamView/SingleStreamView.style.ts

@@ -13,7 +13,7 @@ const styles = () =>
       ...StyleSheet.absoluteFill,
     },
     bottomMultimediaContainer: {
-      width,
+      width: '100%',
       alignItems: 'stretch',
       justifyContent: 'space-between',
       paddingVertical: 15,