Skip to content
This repository has been archived by the owner on May 16, 2024. It is now read-only.

Commit

Permalink
[MV-384] Improve animation when moving between preview and room screen (
Browse files Browse the repository at this point in the history 
#72)
  • Loading branch information
@graszka22
graszka22 authored Mar 31, 2023
1 parent 3103876 commit 4372009
Showing 1 changed file with 84 additions and 66 deletions.
150 changes: 84 additions & 66 deletions example/src/screens/Room.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,10 @@ import { RoomParticipant } from '@components/RoomParticipant';
import { Typo } from '@components/Typo';
import * as Membrane from '@jellyfish-dev/react-native-membrane-webrtc';
import { RootStack } from '@model/NavigationTypes';
import { useFocusEffect } from '@react-navigation/native';
import type { NativeStackScreenProps } from '@react-navigation/native-stack';
import React, { useCallback, useEffect, useState } from 'react';
import { StyleSheet, View, Dimensions } from 'react-native';
import { StyleSheet, View, Dimensions, InteractionManager } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useVideoroomState } from 'src/VideoroomContext';
Expand Down Expand Up @@ -40,6 +41,18 @@ export const Room = ({ navigation }: Props) => {
MAX_NUM_OF_USERS_ON_THE_SCREEN / 2
);

const [shouldShowParticipants, setShouldShowParticipants] = useState(false);

useFocusEffect(
React.useCallback(() => {
InteractionManager.runAfterInteractions(() => {
setShouldShowParticipants(true);
});

return () => setShouldShowParticipants(false);
}, [])
);

const videoViewWidth = (width - 3 * OFFSET_PER_ROW) / 2;
const smallScreenVideoWidth =
(height - HEADER_AND_FOOTER_SIZE - OFFSET_PER_ROW * (rowNum + 2)) / rowNum;
Expand Down Expand Up @@ -104,76 +117,81 @@ export const Room = ({ navigation }: Props) => {
</View>

<View style={{ flex: 1 }}>
{focusedParticipant ? (
<View style={styles.focusedParticipantContainer}>
<View style={styles.focusedParticipant}>
<RoomParticipant
participant={focusedParticipant}
onPinButtonPressed={setFocusedParticipantId}
focused
/>
</View>
</View>
) : null}
{shouldShowParticipants && (
<>
{focusedParticipant ? (
<View style={styles.focusedParticipantContainer}>
<View style={styles.focusedParticipant}>
<RoomParticipant
participant={focusedParticipant}
onPinButtonPressed={setFocusedParticipantId}
focused
/>
</View>
</View>
) : null}

{focusedParticipant ? (
<View style={styles.otherParticipants}>
<NotFocusedParticipants
participants={participants.filter(
(p) => p.id !== focusedParticipant?.id
)}
/>
</View>
) : (
<View style={styles.participantsContainer}>
<View
style={[
styles.inner,
participants.length > FLEX_BRAKPOINT
? styles.row
: styles.column,
]}
>
{participants
.slice(
0,
participants.length > MAX_NUM_OF_USERS_ON_THE_SCREEN
? MAX_NUM_OF_USERS_ON_THE_SCREEN - 1
: MAX_NUM_OF_USERS_ON_THE_SCREEN
)
.map((p) => (
<View
key={p.id}
style={[
getStylesForParticipants(participants),
styles.shownParticipantBorder,
]}
>
<RoomParticipant
participant={p}
onPinButtonPressed={setFocusedParticipantId}
tileSmall={participants.length > FLEX_BRAKPOINT}
/>
</View>
))}
{focusedParticipant ? (
<View style={styles.otherParticipants}>
<NotFocusedParticipants
participants={participants.filter(
(p) => p.id !== focusedParticipant?.id
)}
/>
</View>
) : (
<View style={styles.participantsContainer}>
<View
style={[
styles.inner,
participants.length > FLEX_BRAKPOINT
? styles.row
: styles.column,
]}
>
{participants
.slice(
0,
participants.length > MAX_NUM_OF_USERS_ON_THE_SCREEN
? MAX_NUM_OF_USERS_ON_THE_SCREEN - 1
: MAX_NUM_OF_USERS_ON_THE_SCREEN
)
.map((p) => (
<View
key={p.id}
style={[
getStylesForParticipants(participants),
styles.shownParticipantBorder,
]}
>
<RoomParticipant
participant={p}
onPinButtonPressed={setFocusedParticipantId}
tileSmall={participants.length > FLEX_BRAKPOINT}
/>
</View>
))}

{participants.length > MAX_NUM_OF_USERS_ON_THE_SCREEN && (
<View style={getStylesForParticipants(participants)}>
<OtherParticipants
p1={participants[participants.length - 1]}
p2={participants[participants.length - 2]}
numOfOtherParticipants={
participants.length -
MAX_NUM_OF_USERS_ON_THE_SCREEN +
1
}
/>
{participants.length > MAX_NUM_OF_USERS_ON_THE_SCREEN && (
<View style={getStylesForParticipants(participants)}>
<OtherParticipants
p1={participants[participants.length - 1]}
p2={participants[participants.length - 2]}
numOfOtherParticipants={
participants.length -
MAX_NUM_OF_USERS_ON_THE_SCREEN +
1
}
/>
</View>
)}
</View>
)}
</View>
</View>
</View>
)}
</>
)}
</View>

<CallControls />
</SafeAreaView>
</View>
Expand Down

0 comments on commit 4372009

Please sign in to comment.