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:
parent
1c360ce5b7
commit
eb010061e0
|
@ -11,7 +11,12 @@ export type Props = {
|
||||||
* The position of the parent element (from right to left) to display the
|
* The position of the parent element (from right to left) to display the
|
||||||
* arrow.
|
* arrow.
|
||||||
*/
|
*/
|
||||||
parentPosition: number
|
parentPosition: number,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Custom styles.
|
||||||
|
*/
|
||||||
|
style: ?Object
|
||||||
};
|
};
|
||||||
|
|
||||||
type State = {
|
type State = {
|
||||||
|
@ -61,7 +66,10 @@ export default class ExpandedLabel<P: Props> extends Component<P, State> {
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Animated.View
|
<Animated.View
|
||||||
style = { [ styles.expandedLabelContainer, { opacity: this.state.opacityAnimation } ] }>
|
style = { [ styles.expandedLabelContainer,
|
||||||
|
this.props.style,
|
||||||
|
{ opacity: this.state.opacityAnimation }
|
||||||
|
] }>
|
||||||
<View
|
<View
|
||||||
style = { [ styles.expandedLabelTextContainer,
|
style = { [ styles.expandedLabelTextContainer,
|
||||||
{ backgroundColor: this._getColor() || DEFAULT_COLOR } ] }>
|
{ backgroundColor: this._getColor() || DEFAULT_COLOR } ] }>
|
||||||
|
|
|
@ -22,6 +22,11 @@ const STATUS_OFF = 'off';
|
||||||
|
|
||||||
type Props = AbstractProps & {
|
type Props = AbstractProps & {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Color for the icon.
|
||||||
|
*/
|
||||||
|
iconColor?: ?string,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Status of the label. This prop adds some additional styles based on its
|
* 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
|
* 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 of the label.
|
||||||
*/
|
*/
|
||||||
style?: ?StyleType
|
style?: ?StyleType,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Custom styles for the text.
|
||||||
|
*/
|
||||||
|
textStyle?: ?StyleType
|
||||||
};
|
};
|
||||||
|
|
||||||
type State = {
|
type State = {
|
||||||
|
@ -91,7 +101,7 @@ export default class Label extends AbstractLabel<Props, State> {
|
||||||
* @inheritdoc
|
* @inheritdoc
|
||||||
*/
|
*/
|
||||||
render() {
|
render() {
|
||||||
const { icon, text, status, style } = this.props;
|
const { icon, text, status, style, iconColor, textStyle } = this.props;
|
||||||
|
|
||||||
let extraStyle = null;
|
let extraStyle = null;
|
||||||
|
|
||||||
|
@ -113,9 +123,10 @@ export default class Label extends AbstractLabel<Props, State> {
|
||||||
extraStyle
|
extraStyle
|
||||||
] }>
|
] }>
|
||||||
{ icon && <Icon
|
{ icon && <Icon
|
||||||
|
color = { iconColor }
|
||||||
size = '18'
|
size = '18'
|
||||||
src = { icon } /> }
|
src = { icon } /> }
|
||||||
{ text && <Text style = { styles.labelText }>
|
{ text && <Text style = { [ styles.labelText, textStyle ] }>
|
||||||
{ text }
|
{ text }
|
||||||
</Text>}
|
</Text>}
|
||||||
</Animated.View>
|
</Animated.View>
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import { ColorPalette } from '../../styles';
|
import { ColorPalette } from '../../styles';
|
||||||
|
import BaseTheme from '../../ui/components/BaseTheme';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The default color of the {@code Label} and {@code ExpandedLabel}.
|
* The default color of the {@code Label} and {@code ExpandedLabel}.
|
||||||
|
@ -29,7 +30,8 @@ export default {
|
||||||
right: 0,
|
right: 0,
|
||||||
top: 36,
|
top: 36,
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
justifyContent: 'center'
|
justifyContent: 'center',
|
||||||
|
zIndex: 1
|
||||||
},
|
},
|
||||||
|
|
||||||
expandedLabelTextContainer: {
|
expandedLabelTextContainer: {
|
||||||
|
@ -59,7 +61,7 @@ export default {
|
||||||
|
|
||||||
labelText: {
|
labelText: {
|
||||||
color: ColorPalette.white,
|
color: ColorPalette.white,
|
||||||
fontSize: 12
|
...BaseTheme.typography.labelBold
|
||||||
},
|
},
|
||||||
|
|
||||||
labelOff: {
|
labelOff: {
|
||||||
|
|
|
@ -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;
|
|
@ -2,6 +2,7 @@
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { NativeModules, SafeAreaView, StatusBar, View } from 'react-native';
|
import { NativeModules, SafeAreaView, StatusBar, View } from 'react-native';
|
||||||
|
import { withSafeAreaInsets } from 'react-native-safe-area-context';
|
||||||
|
|
||||||
import { appNavigate } from '../../../app/actions';
|
import { appNavigate } from '../../../app/actions';
|
||||||
import { PIP_ENABLED, FULLSCREEN_ENABLED, getFeatureFlag } from '../../../base/flags';
|
import { PIP_ENABLED, FULLSCREEN_ENABLED, getFeatureFlag } from '../../../base/flags';
|
||||||
|
@ -32,9 +33,12 @@ import {
|
||||||
} from '../AbstractConference';
|
} from '../AbstractConference';
|
||||||
import type { AbstractProps } from '../AbstractConference';
|
import type { AbstractProps } from '../AbstractConference';
|
||||||
|
|
||||||
|
import AlwaysOnLabels from './AlwaysOnLabels';
|
||||||
import { navigate } from './ConferenceNavigationContainerRef';
|
import { navigate } from './ConferenceNavigationContainerRef';
|
||||||
|
import ExpandedLabelPopup from './ExpandedLabelPopup';
|
||||||
import LonelyMeetingExperience from './LonelyMeetingExperience';
|
import LonelyMeetingExperience from './LonelyMeetingExperience';
|
||||||
import NavigationBar from './NavigationBar';
|
import TitleBar from './TitleBar';
|
||||||
|
import { EXPANDED_LABEL_TIMEOUT } from './constants';
|
||||||
import { screen } from './routes';
|
import { screen } from './routes';
|
||||||
import styles from './styles';
|
import styles from './styles';
|
||||||
|
|
||||||
|
@ -106,13 +110,31 @@ type Props = AbstractProps & {
|
||||||
/**
|
/**
|
||||||
* The redux {@code dispatch} function.
|
* 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.
|
* 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.
|
* Initializes a new Conference instance.
|
||||||
*
|
*
|
||||||
|
@ -122,10 +144,17 @@ class Conference extends AbstractConference<Props, *> {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
visibleExpandedLabel: undefined
|
||||||
|
};
|
||||||
|
|
||||||
|
this._expandedLabelTimeout = React.createRef();
|
||||||
|
|
||||||
// Bind event handlers so they are only bound once per instance.
|
// Bind event handlers so they are only bound once per instance.
|
||||||
this._onClick = this._onClick.bind(this);
|
this._onClick = this._onClick.bind(this);
|
||||||
this._onHardwareBackPress = this._onHardwareBackPress.bind(this);
|
this._onHardwareBackPress = this._onHardwareBackPress.bind(this);
|
||||||
this._setToolboxVisible = this._setToolboxVisible.bind(this);
|
this._setToolboxVisible = this._setToolboxVisible.bind(this);
|
||||||
|
this._createOnPress = this._createOnPress.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -167,6 +196,8 @@ class Conference extends AbstractConference<Props, *> {
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
// Tear handling any hardware button presses for back navigation down.
|
// Tear handling any hardware button presses for back navigation down.
|
||||||
BackButtonRegistry.removeListener(this._onHardwareBackPress);
|
BackButtonRegistry.removeListener(this._onHardwareBackPress);
|
||||||
|
|
||||||
|
clearTimeout(this._expandedLabelTimeout.current);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -243,6 +274,38 @@ class Conference extends AbstractConference<Props, *> {
|
||||||
: undefined);
|
: 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.
|
* Renders the content for the Conference container.
|
||||||
*
|
*
|
||||||
|
@ -307,9 +370,28 @@ class Conference extends AbstractConference<Props, *> {
|
||||||
pointerEvents = 'box-none'
|
pointerEvents = 'box-none'
|
||||||
style = {
|
style = {
|
||||||
_toolboxVisible
|
_toolboxVisible
|
||||||
? styles.navBarSafeViewColor
|
? styles.titleBarSafeViewColor
|
||||||
: styles.navBarSafeViewTransparent }>
|
: styles.titleBarSafeViewTransparent }>
|
||||||
<NavigationBar />
|
<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()}
|
{this._renderNotificationsContainer()}
|
||||||
<KnockingParticipantList />
|
<KnockingParticipantList />
|
||||||
</SafeAreaView>
|
</SafeAreaView>
|
||||||
|
@ -439,4 +521,4 @@ function _mapStateToProps(state) {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export default connect(_mapStateToProps)(Conference);
|
export default withSafeAreaInsets(connect(_mapStateToProps)(Conference));
|
||||||
|
|
|
@ -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;
|
|
@ -3,96 +3,27 @@
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { TouchableOpacity, View } from 'react-native';
|
import { TouchableOpacity, View } from 'react-native';
|
||||||
|
|
||||||
import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
|
import { TranscribingLabel } from '../../../transcribing';
|
||||||
import { RecordingLabel, RecordingExpandedLabel } from '../../../recording';
|
import { VideoQualityLabel } from '../../../video-quality';
|
||||||
import { TranscribingExpandedLabel, TranscribingLabel } from '../../../transcribing';
|
|
||||||
import { VideoQualityExpandedLabel, 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 styles from './styles';
|
||||||
|
|
||||||
import { InsecureRoomNameLabel } from './';
|
import { InsecureRoomNameLabel } from './';
|
||||||
|
|
||||||
type Props = {}
|
type Props = {
|
||||||
|
|
||||||
type State = {
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* String to show which {@code ExpandedLabel} to be shown. (Equals to the
|
* Creates a function to be invoked when the onPress of the touchables are
|
||||||
* label IDs below.).
|
* 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.
|
* A container that renders the conference indicators, if any.
|
||||||
*/
|
*/
|
||||||
class Labels extends Component<Props, State> {
|
class Labels extends Component<Props> {
|
||||||
/**
|
|
||||||
* 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);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Implements React {@code Component}'s render.
|
* Implements React {@code Component}'s render.
|
||||||
|
@ -101,99 +32,34 @@ class Labels extends Component<Props, State> {
|
||||||
*/
|
*/
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<>
|
|
||||||
<View pointerEvents = 'box-none'>
|
<View pointerEvents = 'box-none'>
|
||||||
<View
|
<View
|
||||||
pointerEvents = 'box-none'
|
pointerEvents = 'box-none'
|
||||||
style = { styles.indicatorContainer }>
|
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
|
<TouchableOpacity
|
||||||
hitSlop = { LabelHitSlop }
|
hitSlop = { LabelHitSlop }
|
||||||
onPress = {
|
onPress = {
|
||||||
this._createOnPress(LABEL_ID_TRANSCRIBING)
|
this.props.createOnPress(LABEL_ID_TRANSCRIBING)
|
||||||
} >
|
} >
|
||||||
<TranscribingLabel />
|
<TranscribingLabel />
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
hitSlop = { LabelHitSlop }
|
hitSlop = { LabelHitSlop }
|
||||||
onPress = {
|
onPress = {
|
||||||
this._createOnPress(LABEL_ID_INSECURE_ROOM_NAME)
|
this.props.createOnPress(LABEL_ID_INSECURE_ROOM_NAME)
|
||||||
} >
|
} >
|
||||||
<InsecureRoomNameLabel />
|
<InsecureRoomNameLabel />
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
hitSlop = { LabelHitSlop }
|
hitSlop = { LabelHitSlop }
|
||||||
onPress = {
|
onPress = {
|
||||||
this._createOnPress(LABEL_ID_QUALITY) } >
|
this.props.createOnPress(LABEL_ID_QUALITY) } >
|
||||||
<VideoQualityLabel />
|
<VideoQualityLabel />
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
{ this._renderExpandedLabel() }
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* 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;
|
export default Labels;
|
||||||
|
|
|
@ -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);
|
|
@ -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;
|
|
@ -7,6 +7,7 @@ import { getConferenceName, getConferenceTimestamp } from '../../../base/confere
|
||||||
import { getFeatureFlag, CONFERENCE_TIMER_ENABLED, MEETING_NAME_ENABLED } from '../../../base/flags';
|
import { getFeatureFlag, CONFERENCE_TIMER_ENABLED, MEETING_NAME_ENABLED } from '../../../base/flags';
|
||||||
import { connect } from '../../../base/redux';
|
import { connect } from '../../../base/redux';
|
||||||
import InviteButton from '../../../invite/components/add-people-dialog/native/InviteButton';
|
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 { PictureInPictureButton } from '../../../mobile/picture-in-picture';
|
||||||
import { isToolboxVisible } from '../../../toolbox/functions.native';
|
import { isToolboxVisible } from '../../../toolbox/functions.native';
|
||||||
import ConferenceTimer from '../ConferenceTimer';
|
import ConferenceTimer from '../ConferenceTimer';
|
||||||
|
@ -17,6 +18,12 @@ import styles from './styles';
|
||||||
|
|
||||||
type Props = {
|
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.
|
* Whether displaying the current conference timer is enabled or not.
|
||||||
*/
|
*/
|
||||||
|
@ -45,21 +52,22 @@ type Props = {
|
||||||
* @param {Props} props - The React props passed to this component.
|
* @param {Props} props - The React props passed to this component.
|
||||||
* @returns {React.Node}
|
* @returns {React.Node}
|
||||||
*/
|
*/
|
||||||
const NavigationBar = (props: Props) => {
|
const TitleBar = (props: Props) => (<>
|
||||||
if (!props._visible) {
|
{props._visible && <View
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<View
|
|
||||||
pointerEvents = 'box-none'
|
pointerEvents = 'box-none'
|
||||||
style = { styles.navBarWrapper }>
|
style = { styles.titleBarWrapper }>
|
||||||
<View style = { styles.pipButtonContainer }>
|
<View style = { styles.pipButtonContainer }>
|
||||||
<PictureInPictureButton styles = { styles.pipButton } />
|
<PictureInPictureButton styles = { styles.pipButton } />
|
||||||
</View>
|
</View>
|
||||||
<View
|
<View
|
||||||
pointerEvents = 'box-none'
|
pointerEvents = 'box-none'
|
||||||
style = { styles.roomNameWrapper }>
|
style = { styles.roomNameWrapper }>
|
||||||
|
{
|
||||||
|
props._conferenceTimerEnabled
|
||||||
|
&& <View style = { styles.roomTimerView }>
|
||||||
|
<ConferenceTimer textStyle = { styles.roomTimer } />
|
||||||
|
</View>
|
||||||
|
}
|
||||||
{
|
{
|
||||||
props._meetingNameEnabled
|
props._meetingNameEnabled
|
||||||
&& <View style = { styles.roomNameView }>
|
&& <View style = { styles.roomNameView }>
|
||||||
|
@ -70,20 +78,17 @@ const NavigationBar = (props: Props) => {
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
}
|
}
|
||||||
{
|
{/* eslint-disable-next-line react/jsx-no-bind */}
|
||||||
props._conferenceTimerEnabled
|
<Labels createOnPress = { props._createOnPress } />
|
||||||
&& <View style = { styles.roomTimerView }>
|
|
||||||
<ConferenceTimer textStyle = { styles.roomTimer } />
|
|
||||||
</View>
|
</View>
|
||||||
}
|
<View style = { styles.titleBarButtonContainer }>
|
||||||
<Labels />
|
<AudioDeviceToggleButton styles = { styles.inviteButton } />
|
||||||
</View>
|
</View>
|
||||||
<View style = { styles.inviteButtonContainer }>
|
<View style = { styles.titleBarButtonContainer }>
|
||||||
<InviteButton styles = { styles.inviteButton } />
|
<InviteButton styles = { styles.inviteButton } />
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>}
|
||||||
);
|
</>);
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Maps part of the Redux store to the props of this component.
|
* 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);
|
|
@ -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
|
||||||
|
}
|
||||||
|
};
|
|
@ -4,13 +4,13 @@ import BaseTheme from '../../../base/ui/components/BaseTheme.native';
|
||||||
|
|
||||||
export const INSECURE_ROOM_NAME_LABEL_COLOR = BaseTheme.palette.actionDanger;
|
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,
|
left: 0,
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
right: 0,
|
right: 0,
|
||||||
|
@ -53,14 +53,11 @@ export default {
|
||||||
flexDirection: 'row'
|
flexDirection: 'row'
|
||||||
},
|
},
|
||||||
|
|
||||||
inviteButtonContainer: {
|
titleBarButtonContainer: {
|
||||||
borderRadius: 3,
|
borderRadius: 3,
|
||||||
height: BaseTheme.spacing[7],
|
height: BaseTheme.spacing[7],
|
||||||
position: 'absolute',
|
|
||||||
marginTop: BaseTheme.spacing[1],
|
marginTop: BaseTheme.spacing[1],
|
||||||
marginRight: BaseTheme.spacing[1],
|
marginRight: BaseTheme.spacing[1],
|
||||||
top: 0,
|
|
||||||
right: 0,
|
|
||||||
zIndex: 1,
|
zIndex: 1,
|
||||||
width: BaseTheme.spacing[7]
|
width: BaseTheme.spacing[7]
|
||||||
},
|
},
|
||||||
|
@ -69,7 +66,7 @@ export default {
|
||||||
iconStyle: {
|
iconStyle: {
|
||||||
color: BaseTheme.palette.icon01,
|
color: BaseTheme.palette.icon01,
|
||||||
padding: 12,
|
padding: 12,
|
||||||
fontSize: NAVBAR_BUTTON_SIZE
|
fontSize: TITLE_BAR_BUTTON_SIZE
|
||||||
},
|
},
|
||||||
underlayColor: BaseTheme.spacing.underlay01
|
underlayColor: BaseTheme.spacing.underlay01
|
||||||
},
|
},
|
||||||
|
@ -98,36 +95,35 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
pipButtonContainer: {
|
pipButtonContainer: {
|
||||||
|
'&:not(:empty)': {
|
||||||
borderRadius: 3,
|
borderRadius: 3,
|
||||||
height: BaseTheme.spacing[7],
|
height: BaseTheme.spacing[7],
|
||||||
position: 'absolute',
|
|
||||||
marginTop: BaseTheme.spacing[1],
|
marginTop: BaseTheme.spacing[1],
|
||||||
marginLeft: BaseTheme.spacing[1],
|
marginLeft: BaseTheme.spacing[1],
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
zIndex: 1,
|
zIndex: 1,
|
||||||
width: BaseTheme.spacing[7]
|
width: BaseTheme.spacing[7]
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
pipButton: {
|
pipButton: {
|
||||||
iconStyle: {
|
iconStyle: {
|
||||||
color: BaseTheme.palette.icon01,
|
color: BaseTheme.palette.icon01,
|
||||||
padding: 12,
|
padding: 12,
|
||||||
fontSize: NAVBAR_BUTTON_SIZE
|
fontSize: TITLE_BAR_BUTTON_SIZE
|
||||||
},
|
},
|
||||||
underlayColor: BaseTheme.spacing.underlay01
|
underlayColor: BaseTheme.spacing.underlay01
|
||||||
},
|
},
|
||||||
|
|
||||||
navBarSafeViewColor: {
|
titleBarSafeViewColor: {
|
||||||
...navBarSafeView,
|
...titleBarSafeView,
|
||||||
backgroundColor: BaseTheme.palette.uiBackground
|
backgroundColor: BaseTheme.palette.uiBackground
|
||||||
},
|
},
|
||||||
|
|
||||||
navBarSafeViewTransparent: {
|
titleBarSafeViewTransparent: {
|
||||||
...navBarSafeView
|
...titleBarSafeView
|
||||||
},
|
},
|
||||||
|
|
||||||
navBarWrapper: {
|
titleBarWrapper: {
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
flex: 1,
|
flex: 1,
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
|
@ -135,25 +131,42 @@ export default {
|
||||||
justifyContent: 'center'
|
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: {
|
roomTimer: {
|
||||||
color: BaseTheme.palette.text01,
|
color: BaseTheme.palette.text01,
|
||||||
fontSize: 12,
|
...BaseTheme.typography.bodyShortBold,
|
||||||
fontWeight: '400',
|
paddingHorizontal: 8,
|
||||||
paddingHorizontal: 8
|
paddingVertical: 6,
|
||||||
|
textAlign: 'center'
|
||||||
},
|
},
|
||||||
|
|
||||||
roomTimerView: {
|
roomTimerView: {
|
||||||
backgroundColor: BaseTheme.palette.action02,
|
backgroundColor: BaseTheme.palette.action02,
|
||||||
borderRadius: 3,
|
borderRadius: 3,
|
||||||
height: 28,
|
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
minWidth: 50
|
minWidth: 50
|
||||||
},
|
},
|
||||||
|
|
||||||
roomName: {
|
roomName: {
|
||||||
color: BaseTheme.palette.text01,
|
color: BaseTheme.palette.text01,
|
||||||
fontSize: 14,
|
...BaseTheme.typography.bodyShortBold,
|
||||||
fontWeight: '400'
|
paddingVertical: 6
|
||||||
},
|
},
|
||||||
|
|
||||||
roomNameView: {
|
roomNameView: {
|
||||||
|
@ -161,15 +174,16 @@ export default {
|
||||||
borderBottomLeftRadius: 3,
|
borderBottomLeftRadius: 3,
|
||||||
borderTopLeftRadius: 3,
|
borderTopLeftRadius: 3,
|
||||||
flexShrink: 1,
|
flexShrink: 1,
|
||||||
height: 28,
|
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
paddingHorizontal: 10,
|
paddingHorizontal: 10
|
||||||
maxWidth: 168
|
|
||||||
},
|
},
|
||||||
|
|
||||||
roomNameWrapper: {
|
roomNameWrapper: {
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
marginHorizontal: 35
|
marginRight: 10,
|
||||||
|
marginLeft: 8,
|
||||||
|
flexShrink: 1,
|
||||||
|
flexGrow: 1
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -189,6 +203,20 @@ export default {
|
||||||
|
|
||||||
insecureRoomNameLabel: {
|
insecureRoomNameLabel: {
|
||||||
backgroundColor: INSECURE_ROOM_NAME_LABEL_COLOR
|
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]
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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));
|
|
@ -9,8 +9,6 @@ import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
|
||||||
import { connect } from '../../../base/redux';
|
import { connect } from '../../../base/redux';
|
||||||
import { getSessionStatusToShow } from '../../functions';
|
import { getSessionStatusToShow } from '../../functions';
|
||||||
|
|
||||||
import { LIVE_LABEL_COLOR, REC_LABEL_COLOR } from './styles';
|
|
||||||
|
|
||||||
type Props = AbstractProps & {
|
type Props = AbstractProps & {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -34,21 +32,6 @@ type Props = AbstractProps & {
|
||||||
* component to explain the meaning of the {@code RecordingLabel}.
|
* component to explain the meaning of the {@code RecordingLabel}.
|
||||||
*/
|
*/
|
||||||
class RecordingExpandedLabel extends ExpandedLabel<Props> {
|
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}.
|
* Returns the label specific text of this {@code ExpandedLabel}.
|
||||||
|
|
|
@ -26,14 +26,20 @@ class RecordingLabel extends AbstractRecordingLabel {
|
||||||
* @inheritdoc
|
* @inheritdoc
|
||||||
*/
|
*/
|
||||||
_renderLabel() {
|
_renderLabel() {
|
||||||
let indicatorStyle;
|
let indicatorStyle = styles.indicatorStyle;
|
||||||
|
|
||||||
switch (this.props.mode) {
|
switch (this.props.mode) {
|
||||||
case JitsiRecordingConstants.mode.STREAM:
|
case JitsiRecordingConstants.mode.STREAM:
|
||||||
indicatorStyle = styles.indicatorLive;
|
indicatorStyle = {
|
||||||
|
...indicatorStyle,
|
||||||
|
...styles.indicatorLive
|
||||||
|
};
|
||||||
break;
|
break;
|
||||||
case JitsiRecordingConstants.mode.FILE:
|
case JitsiRecordingConstants.mode.FILE:
|
||||||
indicatorStyle = styles.indicatorRecording;
|
indicatorStyle = {
|
||||||
|
...indicatorStyle,
|
||||||
|
...styles.indicatorRecording
|
||||||
|
};
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
// Invalid mode is passed to the component.
|
// Invalid mode is passed to the component.
|
||||||
|
|
|
@ -1,15 +1,24 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import { ColorPalette, createStyleSheet } from '../../../base/styles';
|
import { ColorPalette, createStyleSheet } from '../../../base/styles';
|
||||||
|
import BaseTheme from '../../../base/ui/components/BaseTheme';
|
||||||
|
|
||||||
export const LIVE_LABEL_COLOR = ColorPalette.blue;
|
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.
|
* The styles of the React {@code Components} of the feature recording.
|
||||||
*/
|
*/
|
||||||
export default createStyleSheet({
|
export default createStyleSheet({
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Style for the recording indicator.
|
||||||
|
*/
|
||||||
|
indicatorStyle: {
|
||||||
|
marginRight: 4,
|
||||||
|
marginLeft: 0,
|
||||||
|
marginBottom: 0
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Style for the recording indicator.
|
* Style for the recording indicator.
|
||||||
*/
|
*/
|
||||||
|
@ -21,6 +30,6 @@ export default createStyleSheet({
|
||||||
* Style for the recording indicator.
|
* Style for the recording indicator.
|
||||||
*/
|
*/
|
||||||
indicatorRecording: {
|
indicatorRecording: {
|
||||||
backgroundColor: REC_LABEL_COLOR
|
backgroundColor: BaseTheme.palette.iconError
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue