This commit is contained in:
@@ -0,0 +1,20 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import { IconMicSlash } from '../../../base/icons/svg';
|
||||
import BaseIndicator from '../../../base/react/components/native/BaseIndicator';
|
||||
|
||||
/**
|
||||
* Thumbnail badge for displaying the audio mute status of a participant.
|
||||
*/
|
||||
export default class AudioMutedIndicator extends Component<{}> {
|
||||
/**
|
||||
* Implements React's {@link Component#render()}.
|
||||
*
|
||||
* @inheritdoc
|
||||
*/
|
||||
override render() {
|
||||
return (
|
||||
<BaseIndicator icon = { IconMicSlash } />
|
||||
);
|
||||
}
|
||||
}
|
||||
337
react/features/filmstrip/components/native/Filmstrip.tsx
Normal file
337
react/features/filmstrip/components/native/Filmstrip.tsx
Normal file
@@ -0,0 +1,337 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { FlatList, ViewStyle, ViewToken } from 'react-native';
|
||||
import { SafeAreaView, withSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { IReduxState, IStore } from '../../../app/types';
|
||||
import { getLocalParticipant } from '../../../base/participants/functions';
|
||||
import Platform from '../../../base/react/Platform.native';
|
||||
import { ASPECT_RATIO_NARROW } from '../../../base/responsive-ui/constants';
|
||||
import { getHideSelfView } from '../../../base/settings/functions.any';
|
||||
import { isToolboxVisible } from '../../../toolbox/functions.native';
|
||||
import { setVisibleRemoteParticipants } from '../../actions.native';
|
||||
import {
|
||||
getFilmstripDimensions,
|
||||
isFilmstripVisible,
|
||||
shouldDisplayLocalThumbnailSeparately,
|
||||
shouldRemoteVideosBeVisible
|
||||
} from '../../functions.native';
|
||||
|
||||
import LocalThumbnail from './LocalThumbnail';
|
||||
import Thumbnail from './Thumbnail';
|
||||
import styles from './styles';
|
||||
|
||||
|
||||
// Immutable reference to avoid re-renders.
|
||||
const NO_REMOTE_VIDEOS: any[] = [];
|
||||
|
||||
/**
|
||||
* Filmstrip component's property types.
|
||||
*/
|
||||
interface IProps {
|
||||
|
||||
/**
|
||||
* Application's aspect ratio.
|
||||
*/
|
||||
_aspectRatio: Symbol;
|
||||
|
||||
_clientHeight: number;
|
||||
|
||||
_clientWidth: number;
|
||||
|
||||
/**
|
||||
* Whether or not to hide the self view.
|
||||
*/
|
||||
_disableSelfView: boolean;
|
||||
|
||||
_localParticipantId: string;
|
||||
|
||||
/**
|
||||
* The participants in the conference.
|
||||
*/
|
||||
_participants: Array<any>;
|
||||
|
||||
/**
|
||||
* Whether or not the toolbox is displayed.
|
||||
*/
|
||||
_toolboxVisible: Boolean;
|
||||
|
||||
/**
|
||||
* The indicator which determines whether the filmstrip is visible.
|
||||
*/
|
||||
_visible: boolean;
|
||||
|
||||
/**
|
||||
* Invoked to trigger state changes in Redux.
|
||||
*/
|
||||
dispatch: IStore['dispatch'];
|
||||
|
||||
/**
|
||||
* Object containing the safe area insets.
|
||||
*/
|
||||
insets?: Object;
|
||||
}
|
||||
|
||||
/**
|
||||
* Implements a React {@link Component} which represents the filmstrip on
|
||||
* mobile/React Native.
|
||||
*
|
||||
* @augments Component
|
||||
*/
|
||||
class Filmstrip extends PureComponent<IProps> {
|
||||
/**
|
||||
* Whether the local participant should be rendered separately from the
|
||||
* remote participants i.e. outside of their {@link ScrollView}.
|
||||
*/
|
||||
_separateLocalThumbnail: boolean;
|
||||
|
||||
/**
|
||||
* The FlatList's viewabilityConfig.
|
||||
*/
|
||||
_viewabilityConfig: Object;
|
||||
|
||||
/**
|
||||
* Constructor of the component.
|
||||
*
|
||||
* @inheritdoc
|
||||
*/
|
||||
constructor(props: IProps) {
|
||||
super(props);
|
||||
|
||||
// XXX Our current design is to have the local participant separate from
|
||||
// the remote participants. Unfortunately, Android's Video
|
||||
// implementation cannot accommodate that because remote participants'
|
||||
// videos appear on top of the local participant's video at times.
|
||||
// That's because Android's Video utilizes EGL and EGL gives us only two
|
||||
// practical layers in which we can place our participants' videos:
|
||||
// layer #0 sits behind the window, creates a hole in the window, and
|
||||
// there we render the LargeVideo; layer #1 is known as media overlay in
|
||||
// EGL terms, renders on top of layer #0, and, consequently, is for the
|
||||
// Filmstrip. With the separate LocalThumbnail, we should have left the
|
||||
// remote participants' Thumbnails in layer #1 and utilized layer #2 for
|
||||
// LocalThumbnail. Unfortunately, layer #2 is not practical (that's why
|
||||
// I said we had two practical layers only) because it renders on top of
|
||||
// everything which in our case means on top of participant-related
|
||||
// indicators such as moderator, audio and video muted, etc. For now we
|
||||
// do not have much of a choice but to continue rendering LocalThumbnail
|
||||
// as any other remote Thumbnail on Android.
|
||||
this._separateLocalThumbnail = shouldDisplayLocalThumbnailSeparately();
|
||||
|
||||
this._viewabilityConfig = {
|
||||
itemVisiblePercentThreshold: 30,
|
||||
minimumViewTime: 500
|
||||
};
|
||||
|
||||
this._keyExtractor = this._keyExtractor.bind(this);
|
||||
this._getItemLayout = this._getItemLayout.bind(this);
|
||||
this._onViewableItemsChanged = this._onViewableItemsChanged.bind(this);
|
||||
this._renderThumbnail = this._renderThumbnail.bind(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a key for a passed item of the list.
|
||||
*
|
||||
* @param {string} item - The user ID.
|
||||
* @returns {string} - The user ID.
|
||||
*/
|
||||
_keyExtractor(item: string) {
|
||||
return item;
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculates the width and height of the filmstrip based on the screen size and aspect ratio.
|
||||
*
|
||||
* @returns {Object} - The width and the height.
|
||||
*/
|
||||
_getDimensions() {
|
||||
const {
|
||||
_aspectRatio,
|
||||
_clientWidth,
|
||||
_clientHeight,
|
||||
_disableSelfView,
|
||||
_localParticipantId,
|
||||
insets
|
||||
} = this.props;
|
||||
const localParticipantVisible = Boolean(_localParticipantId) && !_disableSelfView;
|
||||
|
||||
return getFilmstripDimensions({
|
||||
aspectRatio: _aspectRatio,
|
||||
clientHeight: _clientHeight,
|
||||
clientWidth: _clientWidth,
|
||||
insets,
|
||||
localParticipantVisible
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Optimization for FlatList. Returns the length, offset and index for an item.
|
||||
*
|
||||
* @param {Array<string>} _data - The data array with user IDs.
|
||||
* @param {number} index - The index number of the item.
|
||||
* @returns {Object}
|
||||
*/
|
||||
_getItemLayout(_data: string[] | null | undefined, index: number) {
|
||||
const { _aspectRatio } = this.props;
|
||||
const isNarrowAspectRatio = _aspectRatio === ASPECT_RATIO_NARROW;
|
||||
const length = isNarrowAspectRatio ? styles.thumbnail.width : styles.thumbnail.height;
|
||||
|
||||
return {
|
||||
length,
|
||||
offset: length * index,
|
||||
index
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* A handler for visible items changes.
|
||||
*
|
||||
* @param {Object} data - The visible items data.
|
||||
* @param {Array<Object>} data.viewableItems - The visible items array.
|
||||
* @returns {void}
|
||||
*/
|
||||
_onViewableItemsChanged({ viewableItems = [] }: { viewableItems: ViewToken[]; }) {
|
||||
const { _disableSelfView } = this.props;
|
||||
|
||||
if (!this._separateLocalThumbnail && !_disableSelfView && viewableItems[0]?.index === 0) {
|
||||
// Skip the local thumbnail.
|
||||
viewableItems.shift();
|
||||
}
|
||||
|
||||
if (viewableItems.length === 0) {
|
||||
// User might be fast-scrolling, it will stabilize.
|
||||
return;
|
||||
}
|
||||
|
||||
let startIndex = Number(viewableItems[0].index);
|
||||
let endIndex = Number(viewableItems[viewableItems.length - 1].index);
|
||||
|
||||
if (!this._separateLocalThumbnail && !_disableSelfView) {
|
||||
// We are off by one in the remote participants array.
|
||||
startIndex -= 1;
|
||||
endIndex -= 1;
|
||||
}
|
||||
|
||||
this.props.dispatch(setVisibleRemoteParticipants(startIndex, endIndex));
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates React Element to display each participant in a thumbnail.
|
||||
*
|
||||
* @private
|
||||
* @returns {ReactElement}
|
||||
*/
|
||||
_renderThumbnail({ item }: { item: string; }) {
|
||||
return (
|
||||
<Thumbnail
|
||||
key = { item }
|
||||
participantID = { item } />)
|
||||
;
|
||||
}
|
||||
|
||||
/**
|
||||
* Implements React's {@link Component#render()}.
|
||||
*
|
||||
* @inheritdoc
|
||||
* @returns {ReactElement}
|
||||
*/
|
||||
override render() {
|
||||
const {
|
||||
_aspectRatio,
|
||||
_disableSelfView,
|
||||
_toolboxVisible,
|
||||
_localParticipantId,
|
||||
_participants,
|
||||
_visible
|
||||
} = this.props;
|
||||
|
||||
if (!_visible) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const bottomEdge = Platform.OS === 'ios' && !_toolboxVisible;
|
||||
const isNarrowAspectRatio = _aspectRatio === ASPECT_RATIO_NARROW;
|
||||
const filmstripStyle = isNarrowAspectRatio ? styles.filmstripNarrow : styles.filmstripWide;
|
||||
const { height, width } = this._getDimensions();
|
||||
const { height: thumbnailHeight, width: thumbnailWidth, margin } = styles.thumbnail;
|
||||
const initialNumToRender = Math.max(
|
||||
0,
|
||||
Math.ceil(
|
||||
isNarrowAspectRatio
|
||||
? width / (thumbnailWidth + (2 * margin))
|
||||
: height / (thumbnailHeight + (2 * margin))
|
||||
)
|
||||
);
|
||||
let participants;
|
||||
|
||||
if (this._separateLocalThumbnail || _disableSelfView) {
|
||||
participants = _participants;
|
||||
} else if (isNarrowAspectRatio) {
|
||||
participants = [ ..._participants, _localParticipantId ];
|
||||
} else {
|
||||
participants = [ _localParticipantId, ..._participants ];
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView // @ts-ignore
|
||||
edges = { [ bottomEdge && 'bottom', 'left', 'right' ].filter(Boolean) }
|
||||
style = { filmstripStyle as ViewStyle }>
|
||||
{
|
||||
this._separateLocalThumbnail
|
||||
&& !isNarrowAspectRatio
|
||||
&& !_disableSelfView
|
||||
&& <LocalThumbnail />
|
||||
}
|
||||
<FlatList
|
||||
bounces = { false }
|
||||
data = { participants }
|
||||
|
||||
/* @ts-ignore */
|
||||
getItemLayout = { this._getItemLayout }
|
||||
horizontal = { isNarrowAspectRatio }
|
||||
initialNumToRender = { initialNumToRender }
|
||||
key = { isNarrowAspectRatio ? 'narrow' : 'wide' }
|
||||
keyExtractor = { this._keyExtractor }
|
||||
onViewableItemsChanged = { this._onViewableItemsChanged }
|
||||
renderItem = { this._renderThumbnail }
|
||||
showsHorizontalScrollIndicator = { false }
|
||||
showsVerticalScrollIndicator = { false }
|
||||
style = { styles.flatListStageView }
|
||||
viewabilityConfig = { this._viewabilityConfig }
|
||||
windowSize = { 2 } />
|
||||
{
|
||||
this._separateLocalThumbnail
|
||||
&& isNarrowAspectRatio
|
||||
&& !_disableSelfView
|
||||
&& <LocalThumbnail />
|
||||
}
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Maps (parts of) the redux state to the associated {@code Filmstrip}'s props.
|
||||
*
|
||||
* @param {Object} state - The redux state.
|
||||
* @private
|
||||
* @returns {IProps}
|
||||
*/
|
||||
function _mapStateToProps(state: IReduxState) {
|
||||
const { enabled, remoteParticipants } = state['features/filmstrip'];
|
||||
const disableSelfView = getHideSelfView(state);
|
||||
const showRemoteVideos = shouldRemoteVideosBeVisible(state);
|
||||
const responsiveUI = state['features/base/responsive-ui'];
|
||||
|
||||
return {
|
||||
_aspectRatio: responsiveUI.aspectRatio,
|
||||
_clientHeight: responsiveUI.clientHeight,
|
||||
_clientWidth: responsiveUI.clientWidth,
|
||||
_disableSelfView: disableSelfView,
|
||||
_localParticipantId: getLocalParticipant(state)?.id ?? '',
|
||||
_participants: showRemoteVideos ? remoteParticipants : NO_REMOTE_VIDEOS,
|
||||
_toolboxVisible: isToolboxVisible(state),
|
||||
_visible: enabled && isFilmstripVisible(state)
|
||||
};
|
||||
}
|
||||
|
||||
export default withSafeAreaInsets(connect(_mapStateToProps)(Filmstrip));
|
||||
@@ -0,0 +1,19 @@
|
||||
import React from 'react';
|
||||
import { View, ViewStyle } from 'react-native';
|
||||
|
||||
import Thumbnail from './Thumbnail';
|
||||
import styles from './styles';
|
||||
|
||||
/**
|
||||
* Component to render a local thumbnail that can be separated from the
|
||||
* remote thumbnails later.
|
||||
*
|
||||
* @returns {ReactElement}
|
||||
*/
|
||||
export default function LocalThumbnail() {
|
||||
return (
|
||||
<View style = { styles.localThumbnail as ViewStyle }>
|
||||
<Thumbnail />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
|
||||
import { IconModerator } from '../../../base/icons/svg';
|
||||
import BaseIndicator from '../../../base/react/components/native/BaseIndicator';
|
||||
|
||||
/**
|
||||
* Thumbnail badge showing that the participant is a conference moderator.
|
||||
*
|
||||
* @returns {JSX.Element}
|
||||
*/
|
||||
const ModeratorIndicator = (): JSX.Element => <BaseIndicator icon = { IconModerator } />;
|
||||
|
||||
export default ModeratorIndicator;
|
||||
@@ -0,0 +1,15 @@
|
||||
import React from 'react';
|
||||
|
||||
import { IconPin } from '../../../base/icons/svg';
|
||||
import BaseIndicator from '../../../base/react/components/native/BaseIndicator';
|
||||
|
||||
/**
|
||||
* Thumbnail badge for displaying if a participant is pinned.
|
||||
*
|
||||
* @returns {React$Element<any>}
|
||||
*/
|
||||
export default function PinnedIndicator() {
|
||||
return (
|
||||
<BaseIndicator icon = { IconPin } />
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
import React, { Component } from 'react';
|
||||
import { View, ViewStyle } from 'react-native';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { IReduxState } from '../../../app/types';
|
||||
import { IconRaiseHand } from '../../../base/icons/svg';
|
||||
import { getParticipantById, hasRaisedHand } from '../../../base/participants/functions';
|
||||
import BaseIndicator from '../../../base/react/components/native/BaseIndicator';
|
||||
|
||||
import styles from './styles';
|
||||
|
||||
export interface IProps {
|
||||
|
||||
/**
|
||||
* True if the hand is raised for this participant.
|
||||
*/
|
||||
_raisedHand?: boolean;
|
||||
|
||||
/**
|
||||
* The participant id who we want to render the raised hand indicator
|
||||
* for.
|
||||
*/
|
||||
participantId: string;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Thumbnail badge showing that the participant would like to speak.
|
||||
*
|
||||
* @augments Component
|
||||
*/
|
||||
class RaisedHandIndicator extends Component<IProps> {
|
||||
|
||||
/**
|
||||
* Implements {@code Component#render}.
|
||||
*
|
||||
* @inheritdoc
|
||||
*/
|
||||
override render() {
|
||||
if (!this.props._raisedHand) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return this._renderIndicator();
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the platform specific indicator element.
|
||||
*
|
||||
* @returns {React$Element<*>}
|
||||
*/
|
||||
_renderIndicator() {
|
||||
return (
|
||||
<View style = { styles.raisedHandIndicator as ViewStyle }>
|
||||
<BaseIndicator
|
||||
icon = { IconRaiseHand }
|
||||
iconStyle = { styles.raisedHandIcon } />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Maps part of the Redux state to the props of this component.
|
||||
*
|
||||
* @param {Object} state - The Redux state.
|
||||
* @param {IProps} ownProps - The own props of the component.
|
||||
* @returns {Object}
|
||||
*/
|
||||
function _mapStateToProps(state: IReduxState, ownProps: IProps) {
|
||||
const participant = getParticipantById(state, ownProps.participantId);
|
||||
|
||||
return {
|
||||
_raisedHand: hasRaisedHand(participant)
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(_mapStateToProps)(RaisedHandIndicator);
|
||||
@@ -0,0 +1,15 @@
|
||||
import React from 'react';
|
||||
|
||||
import { IconScreenshare } from '../../../base/icons/svg';
|
||||
import BaseIndicator from '../../../base/react/components/native/BaseIndicator';
|
||||
|
||||
/**
|
||||
* Thumbnail badge for displaying if a participant is sharing their screen.
|
||||
*
|
||||
* @returns {React$Element<any>}
|
||||
*/
|
||||
export default function ScreenShareIndicator() {
|
||||
return (
|
||||
<BaseIndicator icon = { IconScreenshare } />
|
||||
);
|
||||
}
|
||||
444
react/features/filmstrip/components/native/Thumbnail.tsx
Normal file
444
react/features/filmstrip/components/native/Thumbnail.tsx
Normal file
@@ -0,0 +1,444 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { Image, ImageStyle, View, ViewStyle } from 'react-native';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { IReduxState, IStore } from '../../../app/types';
|
||||
import { JitsiTrackEvents } from '../../../base/lib-jitsi-meet';
|
||||
import { MEDIA_TYPE, VIDEO_TYPE } from '../../../base/media/constants';
|
||||
import { pinParticipant } from '../../../base/participants/actions';
|
||||
import ParticipantView from '../../../base/participants/components/ParticipantView.native';
|
||||
import { PARTICIPANT_ROLE } from '../../../base/participants/constants';
|
||||
import {
|
||||
getLocalParticipant,
|
||||
getParticipantByIdOrUndefined,
|
||||
getParticipantCount,
|
||||
hasRaisedHand,
|
||||
isEveryoneModerator,
|
||||
isScreenShareParticipant
|
||||
} from '../../../base/participants/functions';
|
||||
import { FakeParticipant } from '../../../base/participants/types';
|
||||
import Container from '../../../base/react/components/native/Container';
|
||||
import { StyleType } from '../../../base/styles/functions.any';
|
||||
import { trackStreamingStatusChanged } from '../../../base/tracks/actions.native';
|
||||
import {
|
||||
getTrackByMediaTypeAndParticipant,
|
||||
getVideoTrackByParticipant
|
||||
} from '../../../base/tracks/functions.native';
|
||||
import { ITrack } from '../../../base/tracks/types';
|
||||
import ConnectionIndicator from '../../../connection-indicator/components/native/ConnectionIndicator';
|
||||
import DisplayNameLabel from '../../../display-name/components/native/DisplayNameLabel';
|
||||
import { getGifDisplayMode, getGifForParticipant } from '../../../gifs/functions.native';
|
||||
import {
|
||||
showConnectionStatus,
|
||||
showContextMenuDetails,
|
||||
showSharedVideoMenu
|
||||
} from '../../../participants-pane/actions.native';
|
||||
import { toggleToolboxVisible } from '../../../toolbox/actions.native';
|
||||
import { shouldDisplayTileView } from '../../../video-layout/functions.native';
|
||||
import { SQUARE_TILE_ASPECT_RATIO } from '../../constants';
|
||||
|
||||
import AudioMutedIndicator from './AudioMutedIndicator';
|
||||
import ModeratorIndicator from './ModeratorIndicator';
|
||||
import PinnedIndicator from './PinnedIndicator';
|
||||
import RaisedHandIndicator from './RaisedHandIndicator';
|
||||
import ScreenShareIndicator from './ScreenShareIndicator';
|
||||
import styles, { AVATAR_SIZE } from './styles';
|
||||
|
||||
|
||||
/**
|
||||
* Thumbnail component's property types.
|
||||
*/
|
||||
interface IProps {
|
||||
|
||||
/**
|
||||
* Whether local audio (microphone) is muted or not.
|
||||
*/
|
||||
_audioMuted: boolean;
|
||||
|
||||
/**
|
||||
* The type of participant if the participant is fake.
|
||||
*/
|
||||
_fakeParticipant?: FakeParticipant;
|
||||
|
||||
/**
|
||||
* URL of GIF sent by this participant, null if there's none.
|
||||
*/
|
||||
_gifSrc?: string;
|
||||
|
||||
/**
|
||||
* Indicates whether the participant is screen sharing.
|
||||
*/
|
||||
_isScreenShare: boolean;
|
||||
|
||||
/**
|
||||
* Indicates whether the thumbnail is for a virtual screenshare participant.
|
||||
*/
|
||||
_isVirtualScreenshare: boolean;
|
||||
|
||||
/**
|
||||
* Indicates whether the participant is local.
|
||||
*/
|
||||
_local?: boolean;
|
||||
|
||||
/**
|
||||
* Shared video local participant owner.
|
||||
*/
|
||||
_localVideoOwner: boolean;
|
||||
|
||||
/**
|
||||
* The ID of the participant obtain from the participant object in Redux.
|
||||
*
|
||||
* NOTE: Generally it should be the same as the participantID prop except the case where the passed
|
||||
* participantID doesn't correspond to any of the existing participants.
|
||||
*/
|
||||
_participantId: string;
|
||||
|
||||
/**
|
||||
* Indicates whether the participant is pinned or not.
|
||||
*/
|
||||
_pinned?: boolean;
|
||||
|
||||
/**
|
||||
* Whether or not the participant has the hand raised.
|
||||
*/
|
||||
_raisedHand: boolean;
|
||||
|
||||
/**
|
||||
* Whether to show the dominant speaker indicator or not.
|
||||
*/
|
||||
_renderDominantSpeakerIndicator?: boolean;
|
||||
|
||||
/**
|
||||
* Whether to show the moderator indicator or not.
|
||||
*/
|
||||
_renderModeratorIndicator: boolean;
|
||||
|
||||
_shouldDisplayTileView: boolean;
|
||||
|
||||
/**
|
||||
* The video track that will be displayed in the thumbnail.
|
||||
*/
|
||||
_videoTrack?: ITrack;
|
||||
|
||||
/**
|
||||
* Invoked to trigger state changes in Redux.
|
||||
*/
|
||||
dispatch: IStore['dispatch'];
|
||||
|
||||
/**
|
||||
* The height of the thumbnail.
|
||||
*/
|
||||
height?: number;
|
||||
|
||||
/**
|
||||
* The ID of the participant related to the thumbnail.
|
||||
*/
|
||||
participantID?: string;
|
||||
|
||||
/**
|
||||
* Whether to display or hide the display name of the participant in the thumbnail.
|
||||
*/
|
||||
renderDisplayName?: boolean;
|
||||
|
||||
/**
|
||||
* If true, it tells the thumbnail that it needs to behave differently. E.g. React differently to a single tap.
|
||||
*/
|
||||
tileView?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* React component for video thumbnail.
|
||||
*/
|
||||
class Thumbnail extends PureComponent<IProps> {
|
||||
|
||||
/**
|
||||
* Creates new Thumbnail component.
|
||||
*
|
||||
* @param {IProps} props - The props of the component.
|
||||
* @returns {Thumbnail}
|
||||
*/
|
||||
constructor(props: IProps) {
|
||||
super(props);
|
||||
|
||||
this._onClick = this._onClick.bind(this);
|
||||
this._onThumbnailLongPress = this._onThumbnailLongPress.bind(this);
|
||||
this.handleTrackStreamingStatusChanged = this.handleTrackStreamingStatusChanged.bind(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* Thumbnail click handler.
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
_onClick() {
|
||||
const { _participantId, _pinned, dispatch, tileView } = this.props;
|
||||
|
||||
if (tileView) {
|
||||
dispatch(toggleToolboxVisible());
|
||||
} else {
|
||||
dispatch(pinParticipant(_pinned ? null : _participantId));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Thumbnail long press handler.
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
_onThumbnailLongPress() {
|
||||
const { _fakeParticipant, _participantId, _local, _localVideoOwner, dispatch } = this.props;
|
||||
|
||||
if (_fakeParticipant && _localVideoOwner) {
|
||||
dispatch(showSharedVideoMenu(_participantId));
|
||||
} else if (!_fakeParticipant) {
|
||||
if (_local) {
|
||||
dispatch(showConnectionStatus(_participantId));
|
||||
} else {
|
||||
dispatch(showContextMenuDetails(_participantId));
|
||||
}
|
||||
} // else no-op
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the indicators for the thumbnail.
|
||||
*
|
||||
* @returns {ReactElement}
|
||||
*/
|
||||
_renderIndicators() {
|
||||
const {
|
||||
_audioMuted: audioMuted,
|
||||
_fakeParticipant,
|
||||
_isScreenShare: isScreenShare,
|
||||
_isVirtualScreenshare,
|
||||
_participantId: participantId,
|
||||
_pinned,
|
||||
_renderModeratorIndicator: renderModeratorIndicator,
|
||||
_shouldDisplayTileView,
|
||||
renderDisplayName,
|
||||
tileView
|
||||
} = this.props;
|
||||
const indicators = [];
|
||||
|
||||
let bottomIndicatorsContainerStyle;
|
||||
|
||||
if (_shouldDisplayTileView) {
|
||||
bottomIndicatorsContainerStyle = styles.bottomIndicatorsContainer;
|
||||
} else if (audioMuted || renderModeratorIndicator) {
|
||||
bottomIndicatorsContainerStyle = styles.bottomIndicatorsContainer;
|
||||
} else {
|
||||
bottomIndicatorsContainerStyle = null;
|
||||
}
|
||||
|
||||
if (!_fakeParticipant || _isVirtualScreenshare) {
|
||||
indicators.push(<View
|
||||
key = 'top-left-indicators'
|
||||
style = { styles.thumbnailTopLeftIndicatorContainer as ViewStyle }>
|
||||
{ !_isVirtualScreenshare && <ConnectionIndicator participantId = { participantId } /> }
|
||||
{ !_isVirtualScreenshare && <RaisedHandIndicator participantId = { participantId } /> }
|
||||
{ tileView && (isScreenShare || _isVirtualScreenshare) && (
|
||||
<View style = { styles.screenShareIndicatorContainer as ViewStyle }>
|
||||
<ScreenShareIndicator />
|
||||
</View>
|
||||
) }
|
||||
</View>);
|
||||
indicators.push(<Container
|
||||
key = 'bottom-indicators'
|
||||
style = { styles.thumbnailIndicatorContainer as StyleType }>
|
||||
<Container
|
||||
style = { bottomIndicatorsContainerStyle as StyleType }>
|
||||
{ audioMuted && !_isVirtualScreenshare && <AudioMutedIndicator /> }
|
||||
{ !tileView && _pinned && <PinnedIndicator />}
|
||||
{ renderModeratorIndicator && !_isVirtualScreenshare && <ModeratorIndicator />}
|
||||
{ !tileView && (isScreenShare || _isVirtualScreenshare) && <ScreenShareIndicator /> }
|
||||
</Container>
|
||||
{
|
||||
renderDisplayName && <DisplayNameLabel
|
||||
contained = { true }
|
||||
participantId = { participantId } />
|
||||
}
|
||||
</Container>);
|
||||
}
|
||||
|
||||
return indicators;
|
||||
}
|
||||
|
||||
/**
|
||||
* Starts listening for track streaming status updates after the initial render.
|
||||
*
|
||||
* @inheritdoc
|
||||
* @returns {void}
|
||||
*/
|
||||
override componentDidMount() {
|
||||
// Listen to track streaming status changed event to keep it updated.
|
||||
// TODO: after converting this component to a react function component,
|
||||
// use a custom hook to update local track streaming status.
|
||||
const { _videoTrack, dispatch } = this.props;
|
||||
|
||||
if (_videoTrack && !_videoTrack.local) {
|
||||
_videoTrack.jitsiTrack.on(JitsiTrackEvents.TRACK_STREAMING_STATUS_CHANGED,
|
||||
this.handleTrackStreamingStatusChanged);
|
||||
dispatch(trackStreamingStatusChanged(_videoTrack.jitsiTrack,
|
||||
_videoTrack.jitsiTrack.getTrackStreamingStatus()));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Stops listening for track streaming status updates on the old track and starts listening instead on the new
|
||||
* track.
|
||||
*
|
||||
* @inheritdoc
|
||||
* @returns {void}
|
||||
*/
|
||||
override componentDidUpdate(prevProps: IProps) {
|
||||
// TODO: after converting this component to a react function component,
|
||||
// use a custom hook to update local track streaming status.
|
||||
const { _videoTrack, dispatch } = this.props;
|
||||
|
||||
if (prevProps._videoTrack?.jitsiTrack?.getSourceName() !== _videoTrack?.jitsiTrack?.getSourceName()) {
|
||||
if (prevProps._videoTrack && !prevProps._videoTrack.local) {
|
||||
prevProps._videoTrack.jitsiTrack.off(JitsiTrackEvents.TRACK_STREAMING_STATUS_CHANGED,
|
||||
this.handleTrackStreamingStatusChanged);
|
||||
dispatch(trackStreamingStatusChanged(prevProps._videoTrack.jitsiTrack,
|
||||
prevProps._videoTrack.jitsiTrack.getTrackStreamingStatus()));
|
||||
}
|
||||
if (_videoTrack && !_videoTrack.local) {
|
||||
_videoTrack.jitsiTrack.on(JitsiTrackEvents.TRACK_STREAMING_STATUS_CHANGED,
|
||||
this.handleTrackStreamingStatusChanged);
|
||||
dispatch(trackStreamingStatusChanged(_videoTrack.jitsiTrack,
|
||||
_videoTrack.jitsiTrack.getTrackStreamingStatus()));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove listeners for track streaming status update.
|
||||
*
|
||||
* @inheritdoc
|
||||
* @returns {void}
|
||||
*/
|
||||
override componentWillUnmount() {
|
||||
// TODO: after converting this component to a react function component,
|
||||
// use a custom hook to update local track streaming status.
|
||||
const { _videoTrack, dispatch } = this.props;
|
||||
|
||||
if (_videoTrack && !_videoTrack.local) {
|
||||
_videoTrack.jitsiTrack.off(JitsiTrackEvents.TRACK_STREAMING_STATUS_CHANGED,
|
||||
this.handleTrackStreamingStatusChanged);
|
||||
dispatch(trackStreamingStatusChanged(_videoTrack.jitsiTrack,
|
||||
_videoTrack.jitsiTrack.getTrackStreamingStatus()));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle track streaming status change event by by dispatching an action to update track streaming status for the
|
||||
* given track in app state.
|
||||
*
|
||||
* @param {JitsiTrack} jitsiTrack - The track with streaming status updated.
|
||||
* @param {JitsiTrackStreamingStatus} streamingStatus - The updated track streaming status.
|
||||
* @returns {void}
|
||||
*/
|
||||
handleTrackStreamingStatusChanged(jitsiTrack: any, streamingStatus: string) {
|
||||
this.props.dispatch(trackStreamingStatusChanged(jitsiTrack, streamingStatus));
|
||||
}
|
||||
|
||||
/**
|
||||
* Implements React's {@link Component#render()}.
|
||||
*
|
||||
* @inheritdoc
|
||||
* @returns {ReactElement}
|
||||
*/
|
||||
override render() {
|
||||
const {
|
||||
_fakeParticipant,
|
||||
_gifSrc,
|
||||
_isScreenShare: isScreenShare,
|
||||
_isVirtualScreenshare,
|
||||
_participantId: participantId,
|
||||
_raisedHand,
|
||||
_renderDominantSpeakerIndicator,
|
||||
height,
|
||||
tileView
|
||||
} = this.props;
|
||||
const styleOverrides = tileView ? {
|
||||
aspectRatio: SQUARE_TILE_ASPECT_RATIO,
|
||||
flex: 0,
|
||||
height,
|
||||
maxHeight: null,
|
||||
maxWidth: null,
|
||||
width: null
|
||||
} : null;
|
||||
|
||||
return (
|
||||
<Container
|
||||
onClick = { this._onClick }
|
||||
onLongPress = { this._onThumbnailLongPress }
|
||||
style = { [
|
||||
styles.thumbnail,
|
||||
styleOverrides,
|
||||
_raisedHand && !_isVirtualScreenshare ? styles.thumbnailRaisedHand : null,
|
||||
_renderDominantSpeakerIndicator && !_isVirtualScreenshare ? styles.thumbnailDominantSpeaker : null
|
||||
] as StyleType[] }
|
||||
touchFeedback = { false }>
|
||||
{ _gifSrc ? <Image
|
||||
source = {{ uri: _gifSrc }}
|
||||
style = { styles.thumbnailGif as ImageStyle } />
|
||||
: <>
|
||||
<ParticipantView
|
||||
avatarSize = { tileView ? AVATAR_SIZE * 1.5 : AVATAR_SIZE }
|
||||
disableVideo = { !tileView && (isScreenShare || _fakeParticipant) }
|
||||
participantId = { participantId }
|
||||
zOrder = { 1 } />
|
||||
{
|
||||
this._renderIndicators()
|
||||
}
|
||||
</>
|
||||
}
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Function that maps parts of Redux state tree into component props.
|
||||
*
|
||||
* @param {Object} state - Redux state.
|
||||
* @param {IProps} ownProps - Properties of component.
|
||||
* @returns {Object}
|
||||
*/
|
||||
function _mapStateToProps(state: IReduxState, ownProps: any) {
|
||||
const { ownerId } = state['features/shared-video'];
|
||||
const tracks = state['features/base/tracks'];
|
||||
const { participantID, tileView } = ownProps;
|
||||
const participant = getParticipantByIdOrUndefined(state, participantID);
|
||||
const localParticipantId = getLocalParticipant(state)?.id;
|
||||
const id = participant?.id;
|
||||
const audioTrack = getTrackByMediaTypeAndParticipant(tracks, MEDIA_TYPE.AUDIO, id);
|
||||
const videoTrack = getVideoTrackByParticipant(state, participant);
|
||||
const isScreenShare = videoTrack?.videoType === VIDEO_TYPE.DESKTOP;
|
||||
const participantCount = getParticipantCount(state);
|
||||
const renderDominantSpeakerIndicator = participant?.dominantSpeaker && participantCount > 2;
|
||||
const _isEveryoneModerator = isEveryoneModerator(state);
|
||||
const renderModeratorIndicator = tileView && !_isEveryoneModerator
|
||||
&& participant?.role === PARTICIPANT_ROLE.MODERATOR;
|
||||
const { gifUrl: gifSrc } = getGifForParticipant(state, id ?? '');
|
||||
const mode = getGifDisplayMode(state);
|
||||
|
||||
return {
|
||||
_audioMuted: audioTrack?.muted ?? true,
|
||||
_fakeParticipant: participant?.fakeParticipant,
|
||||
_gifSrc: mode === 'chat' ? undefined : gifSrc,
|
||||
_isScreenShare: isScreenShare,
|
||||
_isVirtualScreenshare: isScreenShareParticipant(participant),
|
||||
_local: participant?.local,
|
||||
_localVideoOwner: Boolean(ownerId === localParticipantId),
|
||||
_participantId: id ?? '',
|
||||
_pinned: participant?.pinned,
|
||||
_raisedHand: hasRaisedHand(participant),
|
||||
_renderDominantSpeakerIndicator: renderDominantSpeakerIndicator,
|
||||
_renderModeratorIndicator: renderModeratorIndicator,
|
||||
_shouldDisplayTileView: shouldDisplayTileView(state),
|
||||
_videoTrack: videoTrack
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(_mapStateToProps)(Thumbnail);
|
||||
299
react/features/filmstrip/components/native/TileView.tsx
Normal file
299
react/features/filmstrip/components/native/TileView.tsx
Normal file
@@ -0,0 +1,299 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import {
|
||||
FlatList,
|
||||
GestureResponderEvent,
|
||||
SafeAreaView,
|
||||
TouchableWithoutFeedback,
|
||||
ViewToken
|
||||
} from 'react-native';
|
||||
import { EdgeInsets, withSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { IReduxState, IStore } from '../../../app/types';
|
||||
import { getLocalParticipant, getParticipantCountWithFake } from '../../../base/participants/functions';
|
||||
import { ILocalParticipant } from '../../../base/participants/types';
|
||||
import { getHideSelfView } from '../../../base/settings/functions.any';
|
||||
import { setVisibleRemoteParticipants } from '../../actions.web';
|
||||
|
||||
import Thumbnail from './Thumbnail';
|
||||
import styles from './styles';
|
||||
|
||||
/**
|
||||
* The type of the React {@link Component} props of {@link TileView}.
|
||||
*/
|
||||
interface IProps {
|
||||
|
||||
/**
|
||||
* Application's aspect ratio.
|
||||
*/
|
||||
_aspectRatio: Symbol;
|
||||
|
||||
/**
|
||||
* The number of columns.
|
||||
*/
|
||||
_columns: number;
|
||||
|
||||
/**
|
||||
* Whether or not to hide the self view.
|
||||
*/
|
||||
_disableSelfView: boolean;
|
||||
|
||||
/**
|
||||
* Application's viewport height.
|
||||
*/
|
||||
_height: number;
|
||||
|
||||
/**
|
||||
* The local participant.
|
||||
*/
|
||||
_localParticipant?: ILocalParticipant;
|
||||
|
||||
/**
|
||||
* The number of participants in the conference.
|
||||
*/
|
||||
_participantCount: number;
|
||||
|
||||
/**
|
||||
* An array with the IDs of the remote participants in the conference.
|
||||
*/
|
||||
_remoteParticipants: Array<string>;
|
||||
|
||||
/**
|
||||
* The thumbnail height.
|
||||
*/
|
||||
_thumbnailHeight?: number;
|
||||
|
||||
/**
|
||||
* Application's viewport height.
|
||||
*/
|
||||
_width: number;
|
||||
|
||||
/**
|
||||
* Invoked to update the receiver video quality.
|
||||
*/
|
||||
dispatch: IStore['dispatch'];
|
||||
|
||||
/**
|
||||
* Object containing the safe area insets.
|
||||
*/
|
||||
insets: EdgeInsets;
|
||||
|
||||
/**
|
||||
* Callback to invoke when tile view is tapped.
|
||||
*/
|
||||
onClick: (e?: GestureResponderEvent) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* An empty array. The purpose of the constant is to use the same reference every time we need an empty array.
|
||||
* This will prevent unnecessary re-renders.
|
||||
*/
|
||||
const EMPTY_ARRAY: any[] = [];
|
||||
|
||||
/**
|
||||
* Implements a React {@link PureComponent} which displays thumbnails in a two
|
||||
* dimensional grid.
|
||||
*
|
||||
* @augments PureComponent
|
||||
*/
|
||||
class TileView extends PureComponent<IProps> {
|
||||
|
||||
/**
|
||||
* The styles for the content container of the FlatList.
|
||||
*/
|
||||
_contentContainerStyles: any;
|
||||
|
||||
/**
|
||||
* The styles for the FlatList.
|
||||
*/
|
||||
_flatListStyles: any;
|
||||
|
||||
/**
|
||||
* The FlatList's viewabilityConfig.
|
||||
*/
|
||||
_viewabilityConfig: Object;
|
||||
|
||||
/**
|
||||
* Creates new TileView component.
|
||||
*
|
||||
* @param {IProps} props - The props of the component.
|
||||
*/
|
||||
constructor(props: IProps) {
|
||||
super(props);
|
||||
|
||||
this._keyExtractor = this._keyExtractor.bind(this);
|
||||
this._onViewableItemsChanged = this._onViewableItemsChanged.bind(this);
|
||||
this._renderThumbnail = this._renderThumbnail.bind(this);
|
||||
|
||||
this._viewabilityConfig = {
|
||||
itemVisiblePercentThreshold: 30,
|
||||
minimumViewTime: 500
|
||||
};
|
||||
this._flatListStyles = {
|
||||
...styles.flatListTileView
|
||||
};
|
||||
this._contentContainerStyles = {
|
||||
...styles.contentContainer,
|
||||
paddingBottom: this.props.insets?.bottom || 0
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a key for a passed item of the list.
|
||||
*
|
||||
* @param {string} item - The user ID.
|
||||
* @returns {string} - The user ID.
|
||||
*/
|
||||
_keyExtractor(item: string) {
|
||||
return item;
|
||||
}
|
||||
|
||||
/**
|
||||
* A handler for visible items changes.
|
||||
*
|
||||
* @param {Object} data - The visible items data.
|
||||
* @param {Array<Object>} data.viewableItems - The visible items array.
|
||||
* @returns {void}
|
||||
*/
|
||||
_onViewableItemsChanged({ viewableItems = [] }: { viewableItems: ViewToken[]; }) {
|
||||
const { _disableSelfView } = this.props;
|
||||
|
||||
if (viewableItems[0]?.index === 0 && !_disableSelfView) {
|
||||
// Skip the local thumbnail.
|
||||
viewableItems.shift();
|
||||
}
|
||||
|
||||
if (viewableItems.length === 0) {
|
||||
// User might be fast-scrolling, it will stabilize.
|
||||
return;
|
||||
}
|
||||
|
||||
// We are off by one in the remote participants array.
|
||||
const startIndex = Number(viewableItems[0].index) - (_disableSelfView ? 0 : 1);
|
||||
const endIndex = Number(viewableItems[viewableItems.length - 1].index) - (_disableSelfView ? 0 : 1);
|
||||
|
||||
this.props.dispatch(setVisibleRemoteParticipants(startIndex, endIndex));
|
||||
}
|
||||
|
||||
/**
|
||||
* Implements React's {@link Component#render()}.
|
||||
*
|
||||
* @inheritdoc
|
||||
* @returns {ReactElement}
|
||||
*/
|
||||
override render() {
|
||||
const { _columns, _height, _thumbnailHeight, _width, onClick } = this.props;
|
||||
const participants = this._getSortedParticipants();
|
||||
const initialRowsToRender = Math.ceil(_height / (Number(_thumbnailHeight) + (2 * styles.thumbnail.margin)));
|
||||
|
||||
if (this._flatListStyles.minHeight !== _height || this._flatListStyles.minWidth !== _width) {
|
||||
this._flatListStyles = {
|
||||
...styles.flatListTileView,
|
||||
minHeight: _height,
|
||||
minWidth: _width
|
||||
};
|
||||
}
|
||||
|
||||
if (this._contentContainerStyles.minHeight !== _height || this._contentContainerStyles.minWidth !== _width) {
|
||||
this._contentContainerStyles = {
|
||||
...styles.contentContainer,
|
||||
minHeight: _height,
|
||||
minWidth: _width,
|
||||
paddingBottom: this.props.insets?.bottom || 0
|
||||
};
|
||||
}
|
||||
|
||||
return (
|
||||
<TouchableWithoutFeedback onPress = { onClick }>
|
||||
<SafeAreaView style = { styles.flatListContainer }>
|
||||
<FlatList
|
||||
bounces = { false }
|
||||
contentContainerStyle = { this._contentContainerStyles }
|
||||
data = { participants }
|
||||
horizontal = { false }
|
||||
initialNumToRender = { initialRowsToRender }
|
||||
key = { _columns }
|
||||
keyExtractor = { this._keyExtractor }
|
||||
numColumns = { _columns }
|
||||
onViewableItemsChanged = { this._onViewableItemsChanged }
|
||||
renderItem = { this._renderThumbnail }
|
||||
showsHorizontalScrollIndicator = { false }
|
||||
showsVerticalScrollIndicator = { false }
|
||||
style = { this._flatListStyles }
|
||||
viewabilityConfig = { this._viewabilityConfig }
|
||||
windowSize = { 2 } />
|
||||
</SafeAreaView>
|
||||
</TouchableWithoutFeedback>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns all participants with the local participant at the end.
|
||||
*
|
||||
* @private
|
||||
* @returns {Participant[]}
|
||||
*/
|
||||
_getSortedParticipants() {
|
||||
const { _localParticipant, _remoteParticipants, _disableSelfView } = this.props;
|
||||
|
||||
if (!_localParticipant) {
|
||||
return EMPTY_ARRAY;
|
||||
}
|
||||
|
||||
if (_disableSelfView) {
|
||||
return _remoteParticipants;
|
||||
}
|
||||
|
||||
return [ _localParticipant?.id, ..._remoteParticipants ];
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates React Element to display each participant in a thumbnail.
|
||||
*
|
||||
* @private
|
||||
* @returns {ReactElement}
|
||||
*/
|
||||
_renderThumbnail({ item }: { item: string; }) {
|
||||
const { _thumbnailHeight } = this.props;
|
||||
|
||||
return (
|
||||
<Thumbnail
|
||||
height = { _thumbnailHeight }
|
||||
key = { item }
|
||||
participantID = { item }
|
||||
renderDisplayName = { true }
|
||||
tileView = { true } />)
|
||||
;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Maps (parts of) the redux state to the associated {@code TileView}'s props.
|
||||
*
|
||||
* @param {Object} state - The redux state.
|
||||
* @param {Object} ownProps - Component props.
|
||||
* @private
|
||||
* @returns {IProps}
|
||||
*/
|
||||
function _mapStateToProps(state: IReduxState, ownProps: any) {
|
||||
const responsiveUi = state['features/base/responsive-ui'];
|
||||
const { remoteParticipants, tileViewDimensions } = state['features/filmstrip'];
|
||||
const disableSelfView = getHideSelfView(state);
|
||||
const { height } = tileViewDimensions?.thumbnailSize ?? {};
|
||||
const { columns } = tileViewDimensions ?? {};
|
||||
|
||||
return {
|
||||
_aspectRatio: responsiveUi.aspectRatio,
|
||||
_columns: columns ?? 1,
|
||||
_disableSelfView: disableSelfView,
|
||||
_height: responsiveUi.clientHeight - (ownProps.insets?.top || 0),
|
||||
_insets: ownProps.insets,
|
||||
_localParticipant: getLocalParticipant(state),
|
||||
_participantCount: getParticipantCountWithFake(state),
|
||||
_remoteParticipants: remoteParticipants,
|
||||
_thumbnailHeight: height,
|
||||
_width: responsiveUi.clientWidth - (ownProps.insets?.right || 0) - (ownProps.insets?.left || 0)
|
||||
};
|
||||
}
|
||||
|
||||
export default withSafeAreaInsets(connect(_mapStateToProps)(TileView));
|
||||
182
react/features/filmstrip/components/native/styles.ts
Normal file
182
react/features/filmstrip/components/native/styles.ts
Normal file
@@ -0,0 +1,182 @@
|
||||
import BaseTheme from '../../../base/ui/components/BaseTheme.native';
|
||||
import { SMALL_THUMBNAIL_SIZE } from '../../constants';
|
||||
|
||||
/**
|
||||
* Size for the Avatar.
|
||||
*/
|
||||
export const AVATAR_SIZE = 50;
|
||||
|
||||
const indicatorContainer = {
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
||||
borderRadius: BaseTheme.shape.borderRadius,
|
||||
height: 24,
|
||||
margin: 2,
|
||||
padding: 2
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* The styles of the feature filmstrip.
|
||||
*/
|
||||
export default {
|
||||
|
||||
/**
|
||||
* The FlatList content container styles.
|
||||
*/
|
||||
contentContainer: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flex: 0
|
||||
},
|
||||
|
||||
/**
|
||||
* The display name container.
|
||||
*/
|
||||
displayNameContainer: {
|
||||
padding: 2
|
||||
},
|
||||
|
||||
/**
|
||||
* The style of the narrow {@link Filmstrip} version which displays
|
||||
* thumbnails in a row at the bottom of the screen.
|
||||
*/
|
||||
filmstripNarrow: {
|
||||
flexDirection: 'row',
|
||||
flexGrow: 0,
|
||||
justifyContent: 'flex-end',
|
||||
margin: 6
|
||||
},
|
||||
|
||||
/**
|
||||
* The style of the wide {@link Filmstrip} version which displays thumbnails
|
||||
* in a column on the short size of the screen.
|
||||
*
|
||||
* NOTE: width is calculated based on the children, but it should also align
|
||||
* to {@code FILMSTRIP_SIZE}.
|
||||
*/
|
||||
filmstripWide: {
|
||||
bottom: BaseTheme.spacing[0],
|
||||
flexDirection: 'column',
|
||||
flexGrow: 0,
|
||||
position: 'absolute',
|
||||
right: BaseTheme.spacing[0],
|
||||
top: BaseTheme.spacing[0]
|
||||
},
|
||||
|
||||
/**
|
||||
* The styles for the FlatList container.
|
||||
*/
|
||||
flatListContainer: {
|
||||
flexGrow: 1,
|
||||
flexShrink: 1,
|
||||
flex: 0
|
||||
},
|
||||
|
||||
/**
|
||||
* The styles for the FlatList component in stage view.
|
||||
*/
|
||||
flatListStageView: {
|
||||
flexGrow: 0
|
||||
},
|
||||
|
||||
/**
|
||||
* The styles for the FlatList component in tile view.
|
||||
*/
|
||||
flatListTileView: {
|
||||
flex: 0
|
||||
},
|
||||
|
||||
/**
|
||||
* Container of the {@link LocalThumbnail}.
|
||||
*/
|
||||
localThumbnail: {
|
||||
alignContent: 'stretch',
|
||||
alignSelf: 'stretch',
|
||||
aspectRatio: 1,
|
||||
flexShrink: 0,
|
||||
flexDirection: 'row'
|
||||
},
|
||||
|
||||
/**
|
||||
* The style of a participant's Thumbnail which renders either the video or
|
||||
* the avatar of the associated participant.
|
||||
*/
|
||||
thumbnail: {
|
||||
alignItems: 'stretch',
|
||||
backgroundColor: BaseTheme.palette.ui02,
|
||||
borderColor: BaseTheme.palette.ui03,
|
||||
borderRadius: BaseTheme.shape.borderRadius,
|
||||
borderStyle: 'solid',
|
||||
borderWidth: 1,
|
||||
flex: 1,
|
||||
height: SMALL_THUMBNAIL_SIZE,
|
||||
justifyContent: 'center',
|
||||
margin: 2,
|
||||
maxHeight: SMALL_THUMBNAIL_SIZE,
|
||||
maxWidth: SMALL_THUMBNAIL_SIZE,
|
||||
overflow: 'hidden',
|
||||
position: 'relative',
|
||||
width: SMALL_THUMBNAIL_SIZE
|
||||
},
|
||||
|
||||
indicatorContainer: {
|
||||
...indicatorContainer
|
||||
},
|
||||
|
||||
screenShareIndicatorContainer: {
|
||||
...indicatorContainer
|
||||
},
|
||||
|
||||
/**
|
||||
* The thumbnail indicator container.
|
||||
*/
|
||||
thumbnailIndicatorContainer: {
|
||||
...indicatorContainer,
|
||||
bottom: 3,
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
left: 3,
|
||||
position: 'absolute',
|
||||
maxWidth: '95%',
|
||||
overflow: 'hidden',
|
||||
padding: BaseTheme.spacing[0]
|
||||
},
|
||||
|
||||
bottomIndicatorsContainer: {
|
||||
flexDirection: 'row',
|
||||
padding: BaseTheme.spacing[1]
|
||||
},
|
||||
|
||||
thumbnailTopLeftIndicatorContainer: {
|
||||
...indicatorContainer,
|
||||
backgroundColor: 'unset',
|
||||
flexDirection: 'row',
|
||||
position: 'absolute',
|
||||
top: BaseTheme.spacing[1]
|
||||
},
|
||||
|
||||
raisedHandIndicator: {
|
||||
...indicatorContainer,
|
||||
backgroundColor: BaseTheme.palette.warning02
|
||||
},
|
||||
|
||||
raisedHandIcon: {
|
||||
color: BaseTheme.palette.uiBackground
|
||||
},
|
||||
|
||||
thumbnailRaisedHand: {
|
||||
borderWidth: 2,
|
||||
borderColor: BaseTheme.palette.warning02
|
||||
},
|
||||
|
||||
thumbnailDominantSpeaker: {
|
||||
borderWidth: 2,
|
||||
borderColor: BaseTheme.palette.action01Hover
|
||||
},
|
||||
|
||||
thumbnailGif: {
|
||||
flexGrow: 1,
|
||||
resizeMode: 'contain'
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user