Refactor Conference Screen.

example/src/screens/ConferenceScreen/ConferenceScreen.tsx

@@ -1,10 +1,8 @@
 import React, { FunctionComponent, useContext, useMemo, useState } from 'react';
 import { Image, TouchableOpacity, View } from 'react-native';
-import { ScrollView } from 'react-native-gesture-handler';
 import LinearGradient from 'react-native-linear-gradient';
 import { MenuProvider } from 'react-native-popup-menu';
 import { SafeAreaView } from 'react-native-safe-area-context';
-
 import { DolbyIOContext } from '@components/DolbyIOProvider';
 import { FilePresentationContext } from '@components/FilePresentationHandler';
 import { RecordingContext } from '@components/RecordingProvider';
@@ -15,12 +13,10 @@ import VideoGallery from '@screens/ConferenceScreen/VideoGallery';
 import Space from '@ui/Space';
 import Text from '@ui/Text';
 import { mute, unmute } from '@utils/conference.tester';
-
-import { ParticipantStatus, Participant } from '@dolbyio/comms-sdk-react-native/models';
+import { ParticipantStatus } from '@dolbyio/comms-sdk-react-native/models';
 import styles from './ConferenceScreen.style';
 import ConferenceScreenBottomSheet from './ConferenceScreenBottomSheet';
 import MessageModal from './MessageModal';
-import ParticipantAvatar from './ParticipantAvatar';
 import { startLocalVideo, stopLocalVideo } from '@utils/video.tester';
 
 const DISPLAYED_STATUSES: ParticipantStatus[] = [
@@ -102,8 +98,13 @@ const ConferenceScreen: FunctionComponent = () => {
                   <RecordingDotsText text="Conference is being recorded" />
                 ) : null}
               </Space>
+              <View>
+                <VideoGallery
+                  participants={connectedParticipants}
+                  scaleType={scaleType}
+                />
+              </View>
             </View>
-
             {isPresentingFile && fileSrc ? (
               <View style={styles.filePresentationWrapper}>
                 <View style={styles.filePresentation}>
@@ -115,31 +116,6 @@ const ConferenceScreen: FunctionComponent = () => {
                 </View>
               </View>
             ) : null}
-            <View style={styles.bottom}>
-              <Space
-                mh="m"
-                mt="m"
-                mb="s"
-                style={{
-                  flexDirection: 'row',
-                  justifyContent: 'space-between',
-                }}
-              >
-                <Text
-                  header
-                  size="s"
-                >{`Participants (${connectedParticipants.length})`}</Text>
-              </Space>
-              <Space mb="m">
-                <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-                  <Space mh="m" style={styles.participantsList}>
-                    {connectedParticipants.map((p: Participant) => (
-                      <ParticipantAvatar key={p.id} {...p} />
-                    ))}
-                  </Space>
-                </ScrollView>
-              </Space>
-            </View>
             <View style={styles.center}>
               <View style={styles.centerButtons}>
                 <Space mh="xxs">
@@ -180,12 +156,6 @@ const ConferenceScreen: FunctionComponent = () => {
         </MenuProvider>
         {isBottomSheetVisible ? (<ConferenceScreenBottomSheet />) : null}
       </View>
-      <View style={styles.layerVideo} pointerEvents="none">
-        <VideoGallery
-          participants={connectedParticipants}
-          scaleType={scaleType}
-        />
-      </View>
       <MessageModal
         open={isMessageModalActive}
         closeModal={() => setIsMessageModalActive(false)}

example/src/screens/ConferenceScreen/ParticipantAvatar.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useContext, useEffect } from 'react';
 import { View, Alert } from 'react-native';
-
 import { DolbyIOContext } from '@components/DolbyIOProvider';
 import COLORS from '@constants/colors.constants';
 import MenuOptionsButton from '@ui/MenuOptionsButton';
@@ -16,15 +15,20 @@ import {
   isSpeaking,
   setSpatialPosition,
 } from '@utils/conference.tester';
-
 import type { Participant } from '@dolbyio/comms-sdk-react-native/models';
 import styles from './ConferenceScreen.style';
 import SpatialConfigModal from './SpatialConfigModal';
 import { SpatialConfigModalTypeModel } from './SpatialConfigModal';
 import UpdatePermissionsModal from './UpdatePermissionsModal';
 import { startRemoteVideo, stopRemoteVideo } from '@utils/video.tester';
+import Video from './Video';
+
+type ParticipantAvatarProps = {
+  participant: Participant;
+  scaleType?: 'fill' | 'fit';
+};
 
-const ParticipantAvatar = (participant: Participant) => {
+const ParticipantAvatar = ({ participant, scaleType }: ParticipantAvatarProps) => {
   const { me, conference } = useContext(DolbyIOContext);
   const [permissionsModalActive, setPermissionsModalActive] = useState(false);
   const [spatialConfigModalActive, setSpatialConfigModalActive] =
@@ -157,13 +161,16 @@ const ParticipantAvatar = (participant: Participant) => {
 
   return (
     <Space mr="xs">
+      <Video
+        participant={participant}
+        width={150}
+        height={150}
+        scaleType={scaleType}
+      />
       <MenuOptionsButton options={options}>
         <View style={styles.participant} key={participant.id}>
-          <Text size="s" color={COLORS.WHITE}>
-            {participant.info.name}
-            <Text size="s" color={COLORS.WHITE}>
-              ({participant.status})
-            </Text>
+          <Text size="xxs" color={COLORS.WHITE}>
+            {participant.info.name!.slice(0, 10) + " " + participant.status}
           </Text>
         </View>
       </MenuOptionsButton>

example/src/screens/ConferenceScreen/VideoGallery.tsx

@@ -1,49 +1,48 @@
-import React, { useState } from 'react';
-import { View, LayoutChangeEvent } from 'react-native';
-
+import React from 'react';
+import { Dimensions, View } from 'react-native';
 import type { Participant } from '@dolbyio/comms-sdk-react-native/models';
-import Video from './Video';
-
-const GRID = [
-  [1, 1],
-  [1, 2],
-  [2, 2],
-  [2, 2],
-  [2, 3],
-  [2, 3],
-  [3, 3],
-  [3, 3],
-  [3, 3],
-];
+import { StyleSheet } from 'react-native';
+import { FlatList } from 'react-native-gesture-handler';
+import ParticipantAvatar from './ParticipantAvatar';
 
 type VideoGalleryProps = {
   participants: Participant[];
   scaleType?: 'fill' | 'fit';
 };
 
 const VideoGallery = ({ participants, scaleType }: VideoGalleryProps) => {
-  const [width, setWidth] = useState(0);
-  const [height, setHeight] = useState(0);
 
-  const onLayout = (event: LayoutChangeEvent) => {
-    const { width: newWidth, height: newHeight } = event.nativeEvent.layout;
-    setWidth(newWidth);
-    setHeight(newHeight);
-  };
+  const numColumns = 2;
+  const renderItem = ({ item }: { item: Participant }) => (
+    <View style={styles.item}>
+      <ParticipantAvatar participant={item} scaleType={scaleType} />
+    </View>
+  );
+
+  const styles = StyleSheet.create({
+    container: {
+      justifyContent: 'space-between',
+      paddingHorizontal: 16,
+      paddingTop: 16,
+    },
+    item: {
+      flex: 1,
+      margin: 8,
+      padding: 20,
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: Dimensions.get('window').width / numColumns - 24,
+    },
+  });
 
   return (
-    <View onLayout={onLayout} style={{ flex: 1, flexWrap: "wrap", flexDirection: "row", alignContent: "flex-start" }}>
-      {participants.map((p) => (
-        <Video
-          key={p.id}
-          participant={p}
-          width={width / GRID[participants.length - 1][0]}
-          height={height / GRID[participants.length - 1][1]}
-          scaleType={scaleType}
-
-        />
-      ))}
-    </View>
+    <FlatList
+      data={participants}
+      renderItem={renderItem}
+      keyExtractor={item => item.id}
+      numColumns={numColumns}
+      contentContainerStyle={styles.container}>
+    </FlatList>
   );
 };
 

example/src/screens/JoinScreen/JoinScreen.tsx

@@ -112,7 +112,7 @@ const JoinScreen: FunctionComponent = () => {
         <SafeAreaView style={styles.wrapper}>
           <Space mh="m" mv="s">
             <Text color={COLORS.WHITE} header size="m">
-              Join or Create the Conference
+              Join the Conference
             </Text>
             <Space mt="m">
               <Input
@@ -142,9 +142,7 @@ const JoinScreen: FunctionComponent = () => {
               />
             </Space>
             <Space mt="m">
-              <Text color={COLORS.WHITE} size="xs">
-                We need this button to test if getCurrent can return null
-              </Text>
+              {/* We need this button to test if getCurrent can return null */}
               <Button
                 text="Get current conference"
                 onPress={getCurrentConference}