haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(title-bar) Updated title bar (#10752) 

Only display Picture-in-Picture button when feature is available
Moved conference timer before title
Created new always-on container for labels
Moved recording labels to always-on
Updated expanded label to support new always-on labels
Added raised hands counter label
Added speaker - earpiece toggle button
Lifted state up
This commit is contained in:
Robert Pintilii 2022-01-13 14:15:53 +02:00 committed by GitHub
parent 1c360ce5b7
commit eb010061e0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 496 additions and 267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
react/features/base/label/components/ExpandedLabel.native.js
View File

@ -11,7 +11,12 @@ export type Props = {
* The position of the parent element (from right to left) to display the
* arrow.
*/
parentPosition: number
parentPosition: number,
/**
* Custom styles.
*/
style: ?Object
};
type State = {
@ -61,7 +66,10 @@ export default class ExpandedLabel<P: Props> extends Component<P, State> {
render() {
return (
<Animated.View
style = { [ styles.expandedLabelContainer, { opacity: this.state.opacityAnimation } ] }>
style = { [ styles.expandedLabelContainer,
this.props.style,
{ opacity: this.state.opacityAnimation }
] }>
<View
style = { [ styles.expandedLabelTextContainer,
{ backgroundColor: this._getColor() || DEFAULT_COLOR } ] }>

17
react/features/base/label/components/Label.native.js
View File

@ -22,6 +22,11 @@ const STATUS_OFF = 'off';
type Props = AbstractProps & {
/**
* Color for the icon.
*/
iconColor?: ?string,
/**
* Status of the label. This prop adds some additional styles based on its
* value. E.g. If status = off, it will render the label symbolising that
@ -32,7 +37,12 @@ type Props = AbstractProps & {
/**
* Style of the label.
*/
style?: ?StyleType
style?: ?StyleType,
/**
* Custom styles for the text.
*/
textStyle?: ?StyleType
};
type State = {
@ -91,7 +101,7 @@ export default class Label extends AbstractLabel<Props, State> {
* @inheritdoc
*/
render() {
const { icon, text, status, style } = this.props;
const { icon, text, status, style, iconColor, textStyle } = this.props;
let extraStyle = null;
@ -113,9 +123,10 @@ export default class Label extends AbstractLabel<Props, State> {
extraStyle
] }>
{ icon && <Icon
color = { iconColor }
size = '18'
src = { icon } /> }
{ text && <Text style = { styles.labelText }>
{ text && <Text style = { [ styles.labelText, textStyle ] }>
{ text }
</Text>}
</Animated.View>

6
react/features/base/label/components/styles.js
View File

@ -1,6 +1,7 @@
// @flow
import { ColorPalette } from '../../styles';
import BaseTheme from '../../ui/components/BaseTheme';
/**
* The default color of the {@code Label} and {@code ExpandedLabel}.
@ -29,7 +30,8 @@ export default {
right: 0,
top: 36,
flexDirection: 'row',
justifyContent: 'center'
justifyContent: 'center',
zIndex: 1
},
expandedLabelTextContainer: {
@ -59,7 +61,7 @@ export default {
labelText: {
color: ColorPalette.white,
fontSize: 12
...BaseTheme.typography.labelBold
},
labelOff: {

44
react/features/conference/components/native/AlwaysOnLabels.js Normal file
View File

@ -0,0 +1,44 @@
// @flow
import React from 'react';
import { TouchableOpacity } from 'react-native';
import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
import { RecordingLabel } from '../../../recording';
import RaisedHandsCountLabel from './RaisedHandsCountLabel';
import {
LabelHitSlop,
LABEL_ID_RAISED_HANDS_COUNT,
LABEL_ID_RECORDING,
LABEL_ID_STREAMING
} from './constants';
type Props = {
/**
* Creates a function to be invoked when the onPress of the touchables are
* triggered.
*/
createOnPress: Function
}
const AlwaysOnLabels = ({ createOnPress }: Props) => (<>
<TouchableOpacity
hitSlop = { LabelHitSlop }
onPress = { createOnPress(LABEL_ID_RECORDING) } >
<RecordingLabel mode = { JitsiRecordingConstants.mode.FILE } />
</TouchableOpacity>
<TouchableOpacity
hitSlop = { LabelHitSlop }
onPress = { createOnPress(LABEL_ID_STREAMING) } >
<RecordingLabel mode = { JitsiRecordingConstants.mode.STREAM } />
</TouchableOpacity>
<TouchableOpacity
hitSlop = { LabelHitSlop }
onPress = { createOnPress(LABEL_ID_RAISED_HANDS_COUNT) } >
<RaisedHandsCountLabel />
</TouchableOpacity>
</>);
export default AlwaysOnLabels;

98
react/features/conference/components/native/Conference.js
View File

@ -2,6 +2,7 @@
import React from 'react';
import { NativeModules, SafeAreaView, StatusBar, View } from 'react-native';
import { withSafeAreaInsets } from 'react-native-safe-area-context';
import { appNavigate } from '../../../app/actions';
import { PIP_ENABLED, FULLSCREEN_ENABLED, getFeatureFlag } from '../../../base/flags';
@ -32,9 +33,12 @@ import {
} from '../AbstractConference';
import type { AbstractProps } from '../AbstractConference';
import AlwaysOnLabels from './AlwaysOnLabels';
import { navigate } from './ConferenceNavigationContainerRef';
import ExpandedLabelPopup from './ExpandedLabelPopup';
import LonelyMeetingExperience from './LonelyMeetingExperience';
import NavigationBar from './NavigationBar';
import TitleBar from './TitleBar';
import { EXPANDED_LABEL_TIMEOUT } from './constants';
import { screen } from './routes';
import styles from './styles';
@ -106,13 +110,31 @@ type Props = AbstractProps & {
/**
* The redux {@code dispatch} function.
*/
dispatch: Function
dispatch: Function,
/**
* Object containing the safe area insets.
*/
insets: Object
};
type State = {
/**
* The label that is currently expanded.
*/
visibleExpandedLabel: ?string
}
/**
* The conference page of the mobile (i.e. React Native) application.
*/
class Conference extends AbstractConference<Props, *> {
class Conference extends AbstractConference<Props, State> {
/**
* Timeout ref.
*/
_expandedLabelTimeout: Object;
/**
* Initializes a new Conference instance.
*
@ -122,10 +144,17 @@ class Conference extends AbstractConference<Props, *> {
constructor(props) {
super(props);
this.state = {
visibleExpandedLabel: undefined
};
this._expandedLabelTimeout = React.createRef();
// Bind event handlers so they are only bound once per instance.
this._onClick = this._onClick.bind(this);
this._onHardwareBackPress = this._onHardwareBackPress.bind(this);
this._setToolboxVisible = this._setToolboxVisible.bind(this);
this._createOnPress = this._createOnPress.bind(this);
}
/**
@ -167,6 +196,8 @@ class Conference extends AbstractConference<Props, *> {
componentWillUnmount() {
// Tear handling any hardware button presses for back navigation down.
BackButtonRegistry.removeListener(this._onHardwareBackPress);
clearTimeout(this._expandedLabelTimeout.current);
}
/**
@ -243,6 +274,38 @@ class Conference extends AbstractConference<Props, *> {
: undefined);
}
_createOnPress: (string) => void;
/**
* Creates a function to be invoked when the onPress of the touchables are
* triggered.
*
* @param {string} label - The identifier of the label that's onLayout is
* triggered.
* @returns {Function}
*/
_createOnPress(label) {
return () => {
const { visibleExpandedLabel } = this.state;
const newVisibleExpandedLabel
= visibleExpandedLabel === label ? undefined : label;
clearTimeout(this._expandedLabelTimeout.current);
this.setState({
visibleExpandedLabel: newVisibleExpandedLabel
});
if (newVisibleExpandedLabel) {
this._expandedLabelTimeout.current = setTimeout(() => {
this.setState({
visibleExpandedLabel: undefined
});
}, EXPANDED_LABEL_TIMEOUT);
}
};
}
/**
* Renders the content for the Conference container.
*
@ -307,10 +370,29 @@ class Conference extends AbstractConference<Props, *> {
pointerEvents = 'box-none'
style = {
_toolboxVisible
? styles.navBarSafeViewColor
: styles.navBarSafeViewTransparent }>
<NavigationBar />
{ this._renderNotificationsContainer() }
? styles.titleBarSafeViewColor
: styles.titleBarSafeViewTransparent }>
<TitleBar _createOnPress = { this._createOnPress } />
</SafeAreaView>
<SafeAreaView
pointerEvents = 'box-none'
style = {
_toolboxVisible
? [ styles.titleBarSafeViewTransparent, { top: this.props.insets.top + 50 } ]
: styles.titleBarSafeViewTransparent
}>
<View
pointerEvents = 'box-none'
style = { styles.expandedLabelWrapper }>
<ExpandedLabelPopup visibleExpandedLabel = { this.state.visibleExpandedLabel } />
</View>
<View
pointerEvents = 'box-none'
style = { styles.alwaysOnTitleBar }>
{/* eslint-disable-next-line react/jsx-no-bind */}
<AlwaysOnLabels createOnPress = { this._createOnPress } />
</View>
{this._renderNotificationsContainer()}
<KnockingParticipantList />
</SafeAreaView>
@ -439,4 +521,4 @@ function _mapStateToProps(state) {
};
}
export default connect(_mapStateToProps)(Conference);
export default withSafeAreaInsets(connect(_mapStateToProps)(Conference));

37
react/features/conference/components/native/ExpandedLabelPopup.js Normal file
View File

@ -0,0 +1,37 @@
// @flow
import React from 'react';
import BaseTheme from '../../../base/ui/components/BaseTheme';
import { EXPANDED_LABELS } from './constants';
type Props = {
/**
* The selected label to show details.
*/
visibleExpandedLabel: ?string
}
const ExpandedLabelPopup = ({ visibleExpandedLabel }: Props) => {
if (visibleExpandedLabel) {
const expandedLabel = EXPANDED_LABELS[visibleExpandedLabel];
if (expandedLabel) {
const LabelComponent = expandedLabel.component || expandedLabel;
const { props, alwaysOn } = expandedLabel || {};
const style = {
top: alwaysOn ? BaseTheme.spacing[6] : BaseTheme.spacing[1]
};
return (<LabelComponent
{ ...props }
style = { style } />);
}
}
return null;
};
export default ExpandedLabelPopup;

200
react/features/conference/components/native/Labels.js
View File

@ -3,96 +3,27 @@
import React, { Component } from 'react';
import { TouchableOpacity, View } from 'react-native';
import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
import { RecordingLabel, RecordingExpandedLabel } from '../../../recording';
import { TranscribingExpandedLabel, TranscribingLabel } from '../../../transcribing';
import { VideoQualityExpandedLabel, VideoQualityLabel } from '../../../video-quality';
import { TranscribingLabel } from '../../../transcribing';
import { VideoQualityLabel } from '../../../video-quality';
import InsecureRoomNameExpandedLabel from './InsecureRoomNameExpandedLabel';
import { LabelHitSlop, LABEL_ID_INSECURE_ROOM_NAME, LABEL_ID_QUALITY, LABEL_ID_TRANSCRIBING } from './constants';
import styles from './styles';
import { InsecureRoomNameLabel } from './';
type Props = {}
type State = {
type Props = {
/**
* String to show which {@code ExpandedLabel} to be shown. (Equals to the
* label IDs below.).
* Creates a function to be invoked when the onPress of the touchables are
* triggered.
*/
visibleExpandedLabel: ?string
createOnPress: Function
}
const LABEL_ID_QUALITY = 'quality';
const LABEL_ID_RECORDING = 'recording';
const LABEL_ID_STREAMING = 'streaming';
const LABEL_ID_TRANSCRIBING = 'transcribing';
const LABEL_ID_INSECURE_ROOM_NAME = 'insecure-room-name';
const LabelHitSlop = {
top: 10,
bottom: 10,
left: 0,
right: 0
};
/**
* The {@code ExpandedLabel} components to be rendered for the individual
* {@code Label}s.
*/
const EXPANDED_LABELS = {
[LABEL_ID_QUALITY]: VideoQualityExpandedLabel,
[LABEL_ID_RECORDING]: {
component: RecordingExpandedLabel,
props: {
mode: JitsiRecordingConstants.mode.FILE
}
},
[LABEL_ID_STREAMING]: {
component: RecordingExpandedLabel,
props: {
mode: JitsiRecordingConstants.mode.STREAM
}
},
[LABEL_ID_TRANSCRIBING]: TranscribingExpandedLabel,
[LABEL_ID_INSECURE_ROOM_NAME]: InsecureRoomNameExpandedLabel
};
/**
* Timeout to hide the {@ExpandedLabel}.
*/
const EXPANDED_LABEL_TIMEOUT = 5000;
/**
* A container that renders the conference indicators, if any.
*/
class Labels extends Component<Props, State> {
/**
* Timeout for the expanded labels to disappear.
*/
expandedLabelTimeout: TimeoutID;
/**
* Instantiates a new instance of {@code Labels}.
*
* @inheritdoc
*/
constructor(props: Props) {
super(props);
this.state = {
visibleExpandedLabel: undefined
};
}
/**
* Implements React {@code Component}'s componentWillUnmount.
*
* @inheritdoc
*/
componentWillUnmount() {
clearTimeout(this.expandedLabelTimeout);
}
class Labels extends Component<Props> {
/**
* Implements React {@code Component}'s render.
@ -101,99 +32,34 @@ class Labels extends Component<Props, State> {
*/
render() {
return (
<>
<View pointerEvents = 'box-none'>
<View
pointerEvents = 'box-none'
style = { styles.indicatorContainer }>
<TouchableOpacity
hitSlop = { LabelHitSlop }
onPress = { this._createOnPress(LABEL_ID_RECORDING) } >
<RecordingLabel mode = { JitsiRecordingConstants.mode.FILE } />
</TouchableOpacity>
<TouchableOpacity
hitSlop = { LabelHitSlop }
onPress = { this._createOnPress(LABEL_ID_STREAMING) } >
<RecordingLabel mode = { JitsiRecordingConstants.mode.STREAM } />
</TouchableOpacity>
<TouchableOpacity
hitSlop = { LabelHitSlop }
onPress = {
this._createOnPress(LABEL_ID_TRANSCRIBING)
} >
<TranscribingLabel />
</TouchableOpacity>
<TouchableOpacity
hitSlop = { LabelHitSlop }
onPress = {
this._createOnPress(LABEL_ID_INSECURE_ROOM_NAME)
} >
<InsecureRoomNameLabel />
</TouchableOpacity>
<TouchableOpacity
hitSlop = { LabelHitSlop }
onPress = {
this._createOnPress(LABEL_ID_QUALITY) } >
<VideoQualityLabel />
</TouchableOpacity>
</View>
<View pointerEvents = 'box-none'>
<View
pointerEvents = 'box-none'
style = { styles.indicatorContainer }>
<TouchableOpacity
hitSlop = { LabelHitSlop }
onPress = {
this.props.createOnPress(LABEL_ID_TRANSCRIBING)
} >
<TranscribingLabel />
</TouchableOpacity>
<TouchableOpacity
hitSlop = { LabelHitSlop }
onPress = {
this.props.createOnPress(LABEL_ID_INSECURE_ROOM_NAME)
} >
<InsecureRoomNameLabel />
</TouchableOpacity>
<TouchableOpacity
hitSlop = { LabelHitSlop }
onPress = {
this.props.createOnPress(LABEL_ID_QUALITY) } >
<VideoQualityLabel />
</TouchableOpacity>
</View>
{ this._renderExpandedLabel() }
</>
</View>
);
}
/**
* Creates a function to be invoked when the onPress of the touchables are
* triggered.
*
* @param {string} label - The identifier of the label that's onLayout is
* triggered.
* @returns {Function}
*/
_createOnPress(label) {
return () => {
let { visibleExpandedLabel } = this.state;
visibleExpandedLabel
= visibleExpandedLabel === label ? undefined : label;
clearTimeout(this.expandedLabelTimeout);
this.setState({
visibleExpandedLabel
});
if (visibleExpandedLabel) {
this.expandedLabelTimeout = setTimeout(() => {
this.setState({
visibleExpandedLabel: undefined
});
}, EXPANDED_LABEL_TIMEOUT);
}
};
}
/**
* Rendes the expanded (explaining) label for the label that was touched.
*
* @returns {React$Element}
*/
_renderExpandedLabel() {
const { visibleExpandedLabel } = this.state;
if (visibleExpandedLabel) {
const expandedLabel = EXPANDED_LABELS[visibleExpandedLabel];
if (expandedLabel) {
const LabelComponent = expandedLabel.component || expandedLabel;
const { props } = expandedLabel || {};
return <LabelComponent { ...props } />;
}
}
return null;
}
}
export default Labels;

26
react/features/conference/components/native/RaisedHandsCountExpandedLabel.js Normal file
View File

@ -0,0 +1,26 @@
// @flow
import { translate } from '../../../base/i18n';
import { ExpandedLabel, type Props as AbstractProps } from '../../../base/label';
type Props = AbstractProps & {
t: Function
}
/**
* A react {@code Component} that implements an expanded label as tooltip-like
* component to explain the meaning of the {@code RaisedHandsCountExpandedLabel}.
*/
class RaisedHandsCountExpandedLabel extends ExpandedLabel<Props> {
/**
* Returns the label specific text of this {@code ExpandedLabel}.
*
* @returns {string}
*/
_getLabel() {
return this.props.t('raisedHandsLabel');
}
}
export default translate(RaisedHandsCountExpandedLabel);

26
react/features/conference/components/native/RaisedHandsCountLabel.js Normal file
View File

@ -0,0 +1,26 @@
// @flow
import React from 'react';
import { useSelector } from 'react-redux';
import { IconRaisedHand } from '../../../base/icons';
import { Label } from '../../../base/label';
import BaseTheme from '../../../base/ui/components/BaseTheme';
import styles from './styles';
const RaisedHandsCountLabel = () => {
const raisedHandsCount = useSelector(state =>
(state['features/base/participants'].raisedHandsQueue || []).length);
return raisedHandsCount > 0 && (
<Label
icon = { IconRaisedHand }
iconColor = { BaseTheme.palette.uiBackground }
style = { styles.raisedHandsCountLabel }
text = { raisedHandsCount }
textStyle = { styles.raisedHandsCountLabelText } />
);
};
export default RaisedHandsCountLabel;

65
react/features/conference/components/native/NavigationBar.js → react/features/conference/components/native/TitleBar.js
View File

@ -7,6 +7,7 @@ import { getConferenceName, getConferenceTimestamp } from '../../../base/confere
import { getFeatureFlag, CONFERENCE_TIMER_ENABLED, MEETING_NAME_ENABLED } from '../../../base/flags';
import { connect } from '../../../base/redux';
import InviteButton from '../../../invite/components/add-people-dialog/native/InviteButton';
import AudioDeviceToggleButton from '../../../mobile/audio-mode/components/AudioDeviceToggleButton';
import { PictureInPictureButton } from '../../../mobile/picture-in-picture';
import { isToolboxVisible } from '../../../toolbox/functions.native';
import ConferenceTimer from '../ConferenceTimer';
@ -17,6 +18,12 @@ import styles from './styles';
type Props = {
/**
* Creates a function to be invoked when the onPress of the touchables are
* triggered.
*/
_createOnPress: Function,
/**
* Whether displaying the current conference timer is enabled or not.
*/
@ -45,23 +52,24 @@ type Props = {
* @param {Props} props - The React props passed to this component.
* @returns {React.Node}
*/
const NavigationBar = (props: Props) => {
if (!props._visible) {
return null;
}
return (
const TitleBar = (props: Props) => (<>
{props._visible && <View
pointerEvents = 'box-none'
style = { styles.titleBarWrapper }>
<View style = { styles.pipButtonContainer }>
<PictureInPictureButton styles = { styles.pipButton } />
</View>
<View
pointerEvents = 'box-none'
style = { styles.navBarWrapper }>
<View style = { styles.pipButtonContainer }>
<PictureInPictureButton styles = { styles.pipButton } />
</View>
<View
pointerEvents = 'box-none'
style = { styles.roomNameWrapper }>
{
props._meetingNameEnabled
style = { styles.roomNameWrapper }>
{
props._conferenceTimerEnabled
&& <View style = { styles.roomTimerView }>
<ConferenceTimer textStyle = { styles.roomTimer } />
</View>
}
{
props._meetingNameEnabled
&& <View style = { styles.roomNameView }>
<Text
numberOfLines = { 1 }
@ -69,21 +77,18 @@ const NavigationBar = (props: Props) => {
{ props._meetingName }
</Text>
</View>
}
{
props._conferenceTimerEnabled
&& <View style = { styles.roomTimerView }>
<ConferenceTimer textStyle = { styles.roomTimer } />
</View>
}
<Labels />
</View>
<View style = { styles.inviteButtonContainer }>
<InviteButton styles = { styles.inviteButton } />
</View>
}
{/* eslint-disable-next-line react/jsx-no-bind */}
<Labels createOnPress = { props._createOnPress } />
</View>
);
};
<View style = { styles.titleBarButtonContainer }>
<AudioDeviceToggleButton styles = { styles.inviteButton } />
</View>
<View style = { styles.titleBarButtonContainer }>
<InviteButton styles = { styles.inviteButton } />
</View>
</View>}
</>);
/**
* Maps part of the Redux store to the props of this component.
@ -105,4 +110,4 @@ function _mapStateToProps(state) {
};
}
export default connect(_mapStateToProps)(NavigationBar);
export default connect(_mapStateToProps)(TitleBar);

56
react/features/conference/components/native/constants.js Normal file
View File

@ -0,0 +1,56 @@
// @flow
import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
import { RecordingExpandedLabel } from '../../../recording';
import { TranscribingExpandedLabel } from '../../../transcribing';
import { VideoQualityExpandedLabel } from '../../../video-quality';
import InsecureRoomNameExpandedLabel from './InsecureRoomNameExpandedLabel';
import RaisedHandsCountExpandedLabel from './RaisedHandsCountExpandedLabel';
export const LabelHitSlop = {
top: 10,
bottom: 10,
left: 0,
right: 0
};
/**
* Timeout to hide the {@ExpandedLabel}.
*/
export const EXPANDED_LABEL_TIMEOUT = 5000;
export const LABEL_ID_QUALITY = 'quality';
export const LABEL_ID_RECORDING = 'recording';
export const LABEL_ID_STREAMING = 'streaming';
export const LABEL_ID_TRANSCRIBING = 'transcribing';
export const LABEL_ID_INSECURE_ROOM_NAME = 'insecure-room-name';
export const LABEL_ID_RAISED_HANDS_COUNT = 'raised-hands-count';
/**
* The {@code ExpandedLabel} components to be rendered for the individual
* {@code Label}s.
*/
export const EXPANDED_LABELS = {
[LABEL_ID_QUALITY]: VideoQualityExpandedLabel,
[LABEL_ID_RECORDING]: {
component: RecordingExpandedLabel,
props: {
mode: JitsiRecordingConstants.mode.FILE
},
alwaysOn: true
},
[LABEL_ID_STREAMING]: {
component: RecordingExpandedLabel,
props: {
mode: JitsiRecordingConstants.mode.STREAM
},
alwaysOn: true
},
[LABEL_ID_TRANSCRIBING]: TranscribingExpandedLabel,
[LABEL_ID_INSECURE_ROOM_NAME]: InsecureRoomNameExpandedLabel,
[LABEL_ID_RAISED_HANDS_COUNT]: {
component: RaisedHandsCountExpandedLabel,
alwaysOn: true
}
};

94
react/features/conference/components/native/styles.js
View File

@ -4,13 +4,13 @@ import BaseTheme from '../../../base/ui/components/BaseTheme.native';
export const INSECURE_ROOM_NAME_LABEL_COLOR = BaseTheme.palette.actionDanger;
const NAVBAR_BUTTON_SIZE = 24;
const TITLE_BAR_BUTTON_SIZE = 24;
/**
* The styles of the safe area view that contains the navigation bar.
* The styles of the safe area view that contains the title bar.
*/
const navBarSafeView = {
const titleBarSafeView = {
left: 0,
position: 'absolute',
right: 0,
@ -53,14 +53,11 @@ export default {
flexDirection: 'row'
},
inviteButtonContainer: {
titleBarButtonContainer: {
borderRadius: 3,
height: BaseTheme.spacing[7],
position: 'absolute',
marginTop: BaseTheme.spacing[1],
marginRight: BaseTheme.spacing[1],
top: 0,
right: 0,
zIndex: 1,
width: BaseTheme.spacing[7]
},
@ -69,7 +66,7 @@ export default {
iconStyle: {
color: BaseTheme.palette.icon01,
padding: 12,
fontSize: NAVBAR_BUTTON_SIZE
fontSize: TITLE_BAR_BUTTON_SIZE
},
underlayColor: BaseTheme.spacing.underlay01
},
@ -98,36 +95,35 @@ export default {
},
pipButtonContainer: {
borderRadius: 3,
height: BaseTheme.spacing[7],
position: 'absolute',
marginTop: BaseTheme.spacing[1],
marginLeft: BaseTheme.spacing[1],
top: 0,
left: 0,
zIndex: 1,
width: BaseTheme.spacing[7]
'&:not(:empty)': {
borderRadius: 3,
height: BaseTheme.spacing[7],
marginTop: BaseTheme.spacing[1],
marginLeft: BaseTheme.spacing[1],
zIndex: 1,
width: BaseTheme.spacing[7]
}
},
pipButton: {
iconStyle: {
color: BaseTheme.palette.icon01,
padding: 12,
fontSize: NAVBAR_BUTTON_SIZE
fontSize: TITLE_BAR_BUTTON_SIZE
},
underlayColor: BaseTheme.spacing.underlay01
},
navBarSafeViewColor: {
...navBarSafeView,
titleBarSafeViewColor: {
...titleBarSafeView,
backgroundColor: BaseTheme.palette.uiBackground
},
navBarSafeViewTransparent: {
...navBarSafeView
titleBarSafeViewTransparent: {
...titleBarSafeView
},
navBarWrapper: {
titleBarWrapper: {
alignItems: 'center',
flex: 1,
flexDirection: 'row',
@ -135,25 +131,42 @@ export default {
justifyContent: 'center'
},
alwaysOnTitleBar: {
padding: 4,
paddingRight: 0,
borderRadius: 6,
backgroundColor: 'rgba(0, 0, 0, .5)',
marginLeft: BaseTheme.spacing[2],
flexDirection: 'row',
alignSelf: 'flex-start',
alignItems: 'center',
justifyContent: 'center',
marginTop: BaseTheme.spacing[2]
},
expandedLabelWrapper: {
zIndex: 1
},
roomTimer: {
color: BaseTheme.palette.text01,
fontSize: 12,
fontWeight: '400',
paddingHorizontal: 8
...BaseTheme.typography.bodyShortBold,
paddingHorizontal: 8,
paddingVertical: 6,
textAlign: 'center'
},
roomTimerView: {
backgroundColor: BaseTheme.palette.action02,
borderRadius: 3,
height: 28,
justifyContent: 'center',
minWidth: 50
},
roomName: {
color: BaseTheme.palette.text01,
fontSize: 14,
fontWeight: '400'
...BaseTheme.typography.bodyShortBold,
paddingVertical: 6
},
roomNameView: {
@ -161,15 +174,16 @@ export default {
borderBottomLeftRadius: 3,
borderTopLeftRadius: 3,
flexShrink: 1,
height: 28,
justifyContent: 'center',
paddingHorizontal: 10,
maxWidth: 168
paddingHorizontal: 10
},
roomNameWrapper: {
flexDirection: 'row',
marginHorizontal: 35
marginRight: 10,
marginLeft: 8,
flexShrink: 1,
flexGrow: 1
},
/**
@ -189,6 +203,20 @@ export default {
insecureRoomNameLabel: {
backgroundColor: INSECURE_ROOM_NAME_LABEL_COLOR
},
raisedHandsCountLabel: {
backgroundColor: BaseTheme.palette.warning02,
flexDirection: 'row',
alignItems: 'center',
marginLeft: BaseTheme.spacing[0],
marginBottom: BaseTheme.spacing[0],
marginRight: BaseTheme.spacing[1]
},
raisedHandsCountLabelText: {
color: BaseTheme.palette.uiBackground,
paddingLeft: BaseTheme.spacing[2]
}
};

40
react/features/mobile/audio-mode/components/AudioDeviceToggleButton.js Normal file
View File

@ -0,0 +1,40 @@
// @flow
import type { Dispatch } from 'redux';
import { openDialog } from '../../../base/dialog';
import { translate } from '../../../base/i18n';
import { IconVolumeEmpty } from '../../../base/icons';
import { connect } from '../../../base/redux';
import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
import AudioRoutePickerDialog from './AudioRoutePickerDialog';
type Props = AbstractButtonProps & {
/**
* The Redux dispatch function.
*/
dispatch: Dispatch<any>
};
/**
* Implements an {@link AbstractButton} to open the audio device list.
*/
class AudioDeviceToggleButton extends AbstractButton<Props, *> {
accessibilityLabel = 'toolbar.accessibilityLabel.audioRoute';
icon = IconVolumeEmpty;
label = 'toolbar.accessibilityLabel.audioRoute';
/**
* Handles clicking / pressing the button, and opens the appropriate dialog.
*
* @private
* @returns {void}
*/
_handleClick() {
this.props.dispatch(openDialog(AudioRoutePickerDialog));
}
}
export default translate(connect()(AudioDeviceToggleButton));

17
react/features/recording/components/native/RecordingExpandedLabel.js
View File

@ -9,8 +9,6 @@ import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
import { connect } from '../../../base/redux';
import { getSessionStatusToShow } from '../../functions';
import { LIVE_LABEL_COLOR, REC_LABEL_COLOR } from './styles';
type Props = AbstractProps & {
/**
@ -34,21 +32,6 @@ type Props = AbstractProps & {
* component to explain the meaning of the {@code RecordingLabel}.
*/
class RecordingExpandedLabel extends ExpandedLabel<Props> {
/**
* Returns the color this expanded label should be rendered with.
*
* @returns {string}
*/
_getColor() {
switch (this.props.mode) {
case JitsiRecordingConstants.mode.STREAM:
return LIVE_LABEL_COLOR;
case JitsiRecordingConstants.mode.FILE:
return REC_LABEL_COLOR;
default:
return null;
}
}
/**
* Returns the label specific text of this {@code ExpandedLabel}.

12
react/features/recording/components/native/RecordingLabel.js
View File

@ -26,14 +26,20 @@ class RecordingLabel extends AbstractRecordingLabel {
* @inheritdoc
*/
_renderLabel() {
let indicatorStyle;
let indicatorStyle = styles.indicatorStyle;
switch (this.props.mode) {
case JitsiRecordingConstants.mode.STREAM:
indicatorStyle = styles.indicatorLive;
indicatorStyle = {
...indicatorStyle,
...styles.indicatorLive
};
break;
case JitsiRecordingConstants.mode.FILE:
indicatorStyle = styles.indicatorRecording;
indicatorStyle = {
...indicatorStyle,
...styles.indicatorRecording
};
break;
default:
// Invalid mode is passed to the component.

13
react/features/recording/components/native/styles.js
View File

@ -1,15 +1,24 @@
// @flow
import { ColorPalette, createStyleSheet } from '../../../base/styles';
import BaseTheme from '../../../base/ui/components/BaseTheme';
export const LIVE_LABEL_COLOR = ColorPalette.blue;
export const REC_LABEL_COLOR = ColorPalette.red;
/**
* The styles of the React {@code Components} of the feature recording.
*/
export default createStyleSheet({
/**
* Style for the recording indicator.
*/
indicatorStyle: {
marginRight: 4,
marginLeft: 0,
marginBottom: 0
},
/**
* Style for the recording indicator.
*/
@ -21,6 +30,6 @@ export default createStyleSheet({
* Style for the recording indicator.
*/
indicatorRecording: {
backgroundColor: REC_LABEL_COLOR
backgroundColor: BaseTheme.palette.iconError
}
});